@charset "UTF-8";
/* CSS Document */

/*---------------------------------
reset（リセット）
---------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a,
a::before,
a::after {
    transition: .3s all;
    color: inherit;
}

img {
    width: 100%;
    height: auto;
}

ul,
li {
    list-style-type: none;
}


/*---------------------------------
settings（設定）
---------------------------------*/
:root {
    --color-main: #231815;
    --color-sub: #ea5520;
}


/*---------------------------------
structure（全体の構造）
---------------------------------*/
::selection {
    background: #1236ff;
    color: #fff;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #e60012;
    color: var(--color-main);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-feature-settings: "palt";
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.container {
    background-color: #e60012;
    background-image: url(../img/bg.png);
    background-repeat: repeat;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    overflow: hidden;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4));
    margin-inline: auto;
    max-width: 560px;
}


.inr {
    margin: 0 auto;
    width: calc(100% - (20px * 2));
    max-width: 1000px;
}

/*hover*/
@media (hover: hover) and (pointer: fine) {
    a:hover img{
        opacity: .7;
        transition: .2s all;
    }
}

/*responsive*/
@media screen and (min-width: 1000px) {
    .container_wrap {
        display: grid;
        grid-template-columns: 560px 320px;
        gap: 20px;
        margin-inline: auto;
        width: fit-content;
    }
    .container {
        margin-inline: 0;
        order: 1;
    }
    .gnav{
        font-size: 94%;
        order: 2;
    }
}
@media screen and (min-width: 560px) {
    body::before {
        content: '';
        width: 100vw;
        height: 100lvh;
        background-image: url(../img/bg.png);
        background-repeat: repeat;
        position: fixed;
        z-index: 0;
    }
    .inr {
        width: calc(100% - (40px * 2));
    }
}


/*---------------------------------
element（要素）
---------------------------------*/

/*margin*/
.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt80 {
    margin-top: 80px;
}

.mb10 {
    margin-bottom: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

/*font-size*/
.fz160 {
    font-size: 160%;
    line-height: 1.4;
}

.fz120 {
    font-size: 120%;
    line-height: 1.4;
}

.fz100 {
    font-size: 100%;
}

.fz80 {
    font-size: 80%;
}

/*list*/
ul.list_disc {
    padding-left: 1.5em;
}

ul.list_disc li {
    list-style-type: disc;
    line-height: 1.4;
}

ul.list_custom li {
    display: grid;
    grid-template-columns: 22px 1fr;
    line-height: 1.4;
}

ul.list_custom li::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--color-sub);
    border-radius: 50%;
    display: block;
    margin-top: calc(1em - 12px);
    margin-inline: auto;
}

ol.list_other li{
    text-indent: -1em;
    padding-left: 1em;
}

/*btn*/
.btn {
    background-color: #5b3f38;
    border-radius: 100px;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    line-height: 1.0;
}

.btn.next{
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: center;
}
.btn.next::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
}

/*other*/
.f_bold {
    font-weight: bold;
}

.t_center {
    text-align: center;
}

.indent {
    text-indent: -1em;
    padding-left: 1em;
}

.underline {
    text-decoration: underline;
}

.flex_box {
    display: flex;
}

.grid_box {
    display: grid;
    align-items: center;
}

.secondary{
    color: var(--color-sub);
}

.inline_block{
    display: inline-block;
}


.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s;
}
.fadein.is-visible {
  opacity: 1;
  transform: none;
}

/*hover*/
@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        background-color: var(--color-sub);
    }
}


/*---------------------------------
header
---------------------------------*/
.logo{
    margin: 10px 10px 0;
    width: 80px;
}

.main_img{
    margin-top: -10px;
}

.main_item{
    margin: -40px auto 0;
    width: 80%;
    max-width: 500px;
}

/*---------------------------------
menu
---------------------------------*/
input#sp_menu {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gnav ul{
    line-height: 1.2;
}
.gnav ul a{
    padding: 5px 0;
    text-decoration: none;
}
.gnav ul li + li{
    margin-top: 10px;
}
.gnav .gnav_main > li + li{
    border-top: 2px solid #fff1b5;
    margin-top: 12px;
    padding-top: 12px;
}
.gnav .gnav_main > li > a{
    display: grid;
    grid-template-columns: 22px 1fr 22px;
}
.gnav .gnav_main > li > a::before{
    content: '';
    background-color: #f6af02;
    border-radius: 50%;
    display: block;
    margin-top: .1em;
    width: 16px;
    height: 16px;
}
.gnav .gnav_main > li > a::after{
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #f6af02;
    border-right: solid 2px #f6af02;
    margin-top: .2em;
    transform: rotate(45deg);
}
.gnav .gnav_sub{
    margin-top: 16px;
    margin-left: 20px;
}
.gnav .gnav_sub a{
    display: grid;
    grid-template-columns: 22px 1fr;
    width: fit-content;
}
.gnav .gnav_sub a::before{
    content: '';
    background-color: #fff1b5;
    display: block;
    margin-top: .5em;
    width: 16px;
    height: 2px;
}

/*responsive*/
@media screen and (max-width: 999px) {

    html:has(#sp_menu:checked),
    body:has(#sp_menu:checked) {
        overflow: hidden;
    }

    .gnav {
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        width: 90vw;
        max-width: 600px;
        height: fit-content;
        max-height: 80vh;
        max-height: min(80vh, 600px);
        padding: 30px;
        position: fixed;
        right: -100vw;
        top: 0;
        bottom: 0;
        margin-block: auto;
        transition: .2s all;
        z-index: 99;
    }

    /*safariのみ*/
    ::-webkit-full-page-media, :future, :root
    .gnav {
        height: auto;
    }

    .gnav nav{
        display: block;
        overflow-y: auto;
        height: 100%;
        flex: 1;
    }

    /*メニュー開閉ボタン*/
    #sp_menu:checked ~ .container_wrap .gnav {
        right: 0;
        left: 0;
        margin-inline: auto;
    }

    #sp_menu:checked ~ #overlay {
        background-color: rgba(0, 0, 0, .6);
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 90;
    }

    .sp_menu_btn {
        background: #fff;
        border-radius: 50%;
        display: block;
        width: 60px;
        height: 60px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 999;
        filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
    }

    .sp_menu_btn span,
    .sp_menu_btn span::before,
    .sp_menu_btn span::after {
        position: absolute;
        display: block;
        content: '';
        width: 22px;
        height: 3px;
        background-color: #e60012;
        border-radius: 10px;
        transition: all 0.5s;
    }

    .sp_menu_btn span::before {
        top: -6px;
    }

    .sp_menu_btn span::after {
        bottom: -6px;
    }

    #sp_menu:checked+.sp_menu_btn span {
        background-color: transparent;
    }

    #sp_menu:checked+.sp_menu_btn span::before {
        top: 0;
        transform: rotate(45deg);
    }

    #sp_menu:checked+.sp_menu_btn span::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
}





@media screen and (min-width: 1000px) {
    .sp_menu_btn {
        display: none;
    }
    .gnav nav{
        background-color: #fff;
        border-radius: 20px;
        padding: 26px;
        position: sticky;
        right: 0;
        top: 20px;
    }
}

/*hover*/
@media (hover: hover) and (pointer: fine) {    
    .gnav nav a:hover{
        background-color: #fff6d0;
        text-decoration: underline;
    }
}

/*---------------------------------
main
---------------------------------*/
main {
    flex-grow: 1;
}

.top_recipe_ttl{
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6));
    margin-inline: auto;
    width: 80%;
    max-width: 300px;
    position: relative;
    z-index: 1;
}

.top_recipe_img{
    display: flex;
    margin-top: -20%;
}
.top_recipe_img li{
    width: 300px; 
}
.top_recipe_img li:nth-child(2){
    margin-top: 20%;
    margin-left: -10%;
}
.top_recipe_img img{
    border-radius: 20px;
    border: 6px solid #ffe67a;
    display: block;    
}

.top_recipe_icon{
    margin-top: -36%;
    width: 45%;
    max-width: 250px;
    position: relative;
    z-index: 1;
}

.top_recipe_wrap{
    background:
        url(../img/bg_y.png)  top 300px left 0,
        linear-gradient( to bottom, transparent 340px, #ffe67a 340px,#ffe67a 100% );
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 60px;
    position: relative;
}
.top_recipe_wrap::after{
    content: '';
    display: block;
    background: #ffe67a;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 200px;
    margin-left: -100px;
    margin-right: -100px;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    z-index: -1;
}
.top_recipe_wrap::before{
    content: '';
    width: 40%;
    max-width: 200px;
    aspect-ratio: 200 / 160;
    background-image: url(../img/img_cow.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    bottom: 20px;
    left: 0;

}

.btn_red{
    background-color: #c90a16;
}

.top_recipe_list{
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
}

.top_recipe_list :last-child:nth-child(odd){
    grid-column:2;
}

.sns{
    background-color: #fff;
    border: 5px solid #e60012;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    align-items: center;
    gap: 10px;
    margin-top: -20px;
    padding: 20px 10px;
    position: relative;
    z-index: 1;
}

.sns .sns_icon{
    line-height: 1.2;
    font-size: 80%;
    word-break: break-all;
    text-align: center;
}
.sns .sns_icon a{
    text-decoration: none;
}
.sns .sns_icon img{
    display: block;
    margin-inline: auto;
    width: 80%;
    max-width: 60px;
}

.point_list{
    background-color: #fff;
    border-radius: 20px;
    padding: 0 20px 20px;
}

.bg_y{
    background:#ffe67a;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-bottom: -50px;
    padding: 20px 0 120px;
    position: relative;
    z-index: 0;
}
.bg_y .inr{
    position: relative;
    z-index: 1;
}
.bg_y::before{
    content: '';
    background: url(../img/bg_y.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: block;
    width: 100%;
    aspect-ratio: 1120 / 202;
    position: absolute;
    top: -14vw;
    left: 0;
}
.bg_y::after{
    content: '';
    display: block;
    background: #ffe67a;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 200px;
    margin-left: -100px;
    margin-right: -100px;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    z-index: -1;
}

.about_wrap{
    margin-top: 120px;
}
.about_wrap_img{
    margin-inline: auto;
    width: 80%;
}
.about_list_wrap{
    background-color: #fff;
    padding: 10px;
}
.about_list_ttl{
    background-color: #f6af02;
    font-size: 90%;
    text-align: center;
}
.about_list{
    display: grid;
    grid-template-columns: 2fr 3fr;
    font-size: 90%;
}
.about_list dt{
    padding-block: 10px;
    padding-right: 10px;
}
.about_list dt:not(:nth-last-child(2)){
  background-image :
    linear-gradient(to bottom, #9fa0a0, #9fa0a0 2px, transparent 2px, transparent 6px), /* 右 */
    linear-gradient(to left, #9fa0a0, #9fa0a0 2px, transparent 2px, transparent 6px);  /* 下 */
  background-size:
    2px 6px, /* 右 */
    6px 2px;  /* 下 */
  background-position:
    right top, /* 右 */
    right bottom;  /* 下 */
  background-repeat:
    repeat-y, /* 右 */
    repeat-x;  /* 下 */
}
.about_list dt:nth-last-child(2){
  background-image :
    linear-gradient(to bottom, #9fa0a0, #9fa0a0 2px, transparent 2px, transparent 6px); /* 右 */
  background-size:
    2px 6px; /* 右 */
  background-position:
    right top; /* 右 */
  background-repeat:
    repeat-y; /* 右 */
}
.about_list dd{
    padding-block: 10px;
    padding-left: 10px;
}
.about_list dd:not(:last-child){
  background-image :
    linear-gradient(to left, #9fa0a0, #9fa0a0 2px, transparent 2px, transparent 6px);  /* 下 */
  background-size:
    6px 2px;  /* 下 */
  background-position:
    right bottom;  /* 下 */
  background-repeat:
    repeat-x;  /* 下 */
}

.detail_recipe_btn{
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .1));
    position: relative;
    z-index: 1;
}

.recipe_main_img{
    background-image: url(../img/recipe_main_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-top: -10px;
    padding-top: 40px;
}
.recipe_lead{
    background-color: #fff;
    border: 5px solid #f6af02;
    border-radius: 20px;
    margin-bottom: -30px;
    padding: 26px;
    position: relative;
    z-index: 1;
}
.recipe_how_wrap{
    background-color: #fff;
    border-radius: 20px;
    margin-top: 60px;
    padding: 5px 26px 46px;
}
.recipe_how_ttl{
    margin-inline: auto;
    max-width: 360px;
}
.recipe_how_ttl_first{
    margin-top: -20px;
}
.recipe_material_wrap{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.recipe_material_wrap::after{
    content: '';
    width: 80px;
    aspect-ratio: 160 / 170;
    background-image: url(../img/recipe_single.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin-top: -20px;
    margin-right: -20px;
}
.img_plus{
    position: relative;
}
.img_plus::after{
    content: '';
    width: 60px;
    height: 60px;
    background-image: url(../img/img_plus.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin-inline: auto;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
}

.recipe_topping_wrap{
    background-color: #fff;
    border-radius: 20px;
    margin-top: 60px;
    padding: 5px 26px 26px;
}
.recipe_topping_ttl{
    background-color: #007c3c;
    border-radius: 50px;
    line-height: 1.0;
    margin: -20px auto 20px;
    padding: 5px 20px;
    text-align: center;
    width: 80%;
}
.recipe_topping_ttl img{
    max-width: 200px;
}

@media screen and (min-width: 561px) {
    .sns{
        padding-inline: 20px;
    }
    .sns .sns_icon img{
        max-width: 100px;
    }
    .bg_y::before{
        top: -65px;
    }
    .recipe_material_wrap::after{
        margin-right: 0;
    }
}


/*---------------------------------
footer
---------------------------------*/
.logo_footer{
    margin-inline: auto;
    margin-top: 80px;
    width: 80%;
}
.copyright{
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    padding: 40px 5px 20px;
}

.pagetop {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .1));
    width: 60px;
    height: 60px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transition: .2s all;
}

.pagetop::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #e60012;
    border-right: solid 2px #e60012;
    transform: rotate(-45deg);
}

/*hover*/
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover {
        background-color: rgba(255, 255, 255, 1);
    }
}

.pagetop.is_active {
    opacity: 1;
    visibility: visible;
}



/*---------------------------------
print（印刷用）
---------------------------------*/
/*@media print {
}*/