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



@media screen and ( max-width: 1920px ){}
@media screen and ( max-width: 1800px ){}
@media screen and ( max-width: 1700px ){}
@media screen and ( max-width: 1600px ){}
@media screen and ( max-width: 1500px ){}
@media screen and ( max-width: 1400px ){}
@media screen and ( max-width: 1300px ){}
@media screen and ( max-width: 1200px ){}
@media screen and ( max-width: 1100px ){}
@media screen and ( max-width: 1024px ){}
@media screen and ( max-width: 900px ){}
@media screen and ( max-width: 768px ){}



a {
    opacity: 1;
    transition: opacity 0.5s;
}
a:hover {
    opacity: 0.65;
}




.section {
    margin: 0 0 180px 0;
    padding: 0;
}
@media screen and ( max-width: 1620px ){
    .section {
        margin: 0 0 calc( 100vw * 180 / 1620 ) 0;
    }
}
@media screen and ( max-width: 768px ){
    .section {
        margin: 0 0 calc( 100vw * 180 / 750 ) 0;
    }
}



/*--------------------------------------------------

.section .box_recipe 

--------------------------------------------------*/










/*--------------------------------------------------

.main_view

--------------------------------------------------*/
.main_view {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main_view .container {
    position: relative;
    width: 100%;
    /*
    height: 100vh;
    */
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 50px 0;
    padding: calc( 100vw * 100 / 1500 ) 0 0 0;
    background-image: url( '../image/recipe/main_view-container--bg.webp' );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.main_view .container .title {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 35px 25px 35px;
    text-align: center;
}
.main_view .container .title img {
    width: 100%;
}



.main_view .container .youtube_container {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    aspect-ratio: 16 / 9;
}
.main_view .container .youtube_container iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}



.main_view .container .slide_container {
    position: relative;
    width: 100%;
    max-width: 832px;
    margin: 0 auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.main_view .container .slide_container .catchcopy {
    position: absolute;
    top: calc( 50% - 45.5px );
    left: calc( calc( 100% - 817px ) / 2 );
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 815px; /* 331px + 484px */
    height: 91px;
    margin: 0;
    padding: 0;
    z-index: 10;
}
.main_view .container .slide_container .catchcopy .copy_01 {
    display: inline-block;
    width: 331px;
    height: 85px;
    opacity: 0;
    transition: opacity 0.5s;
}
.main_view .container .slide_container .catchcopy .copy_02 {
    display: inline-block;
    width: 484px;
    height: 91px;
    opacity: 0;
    transition: opacity 0.5s;
}
.main_view .container .slide_container .catchcopy .copy_01.active, 
.main_view .container .slide_container .catchcopy .copy_02.active {
    opacity: 1;
    filter: drop-shadow( 2px 2px 2px rgba( 0, 0, 0, 0.3 ) );
}
.main_view .container .slide_container .catchcopy .copy_01 img, 
.main_view .container .slide_container .catchcopy .copy_02 img {
    width: 100%;
    filter: drop-shadow( 2px 2px 2px rgba( 0, 0, 0, 0.3 ) );
}
@media screen and ( max-width: 832px ){
    .main_view .container .slide_container .catchcopy {
        top: calc( 50% - calc( calc( 100vw * 91 / 832 ) / 2 ) );
        left: calc( calc( 100% - calc( 100vw * 817 / 832 ) ) / 2 );
        width: calc( 100vw * 817 / 832 );
        height: calc( 100vw * 91 / 832 );
    }
    .main_view .container .slide_container .catchcopy .copy_01 {
        width: calc( 100vw * 331 / 832 );
        height: calc( 100vw * 85 / 832 );
    }
    .main_view .container .slide_container .catchcopy .copy_02 {
        width: calc( 100vw * 484 / 832 );
        height: calc( 100vw * 91 / 832 );
    }
    .main_view .container .slide_container .catchcopy .copy_01 img, 
    .main_view .container .slide_container .catchcopy .copy_02 img {
    }
}
.main_view .container .slide_container > ul > li {
    width: 100%;
}
.main_view .container .slide_container > ul > li img {
    width: 100%;
}




.main_view .container .lead {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 0 0 0;
}
.main_view .container .lead .image {
    position: relative;
    width: 47%;
    margin: 0;
    padding: 0;
}
.main_view .container .lead .image img {
    width: 100%;
}
.main_view .container .lead .image.image_02 {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}
.main_view .container .lead .image.image_02 a:first-of-type img {
    width: 100%;
    max-width: 116px;
    aspect-ratio: 29 / 65 ;
}
.main_view .container .lead .image.image_02 a:last-of-type img {
    width: 100%;
    max-width: 418px;
    aspect-ratio: 418 / 227 ;
}
@media screen and ( max-width: 768px ){
    .main_view {
    }
    .main_view .container {
        padding-top: 100px;
    }
    .main_view .container .title {
        max-width: none;
        margin: 0;
        padding: 40px 15px 20px 15px;
        text-align: center;
    }
    .main_view .container .title img {
        width: 100%;
    }



    .main_view .container .youtube_container {
        width: calc( 100% - 30px );
        max-width: none;
        margin: 0 auto;
        padding: 0;
        aspect-ratio: 16 / 9;
    }
    .main_view .container .youtube_container iframe {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }



    .main_view .container .slide_container {
        position: relative;
        width: calc( 100% - 30px );
        max-width: none;
        margin: 0 auto;
        padding: 0;
    }

    .main_view .container .slide_container .catchcopy {
        top: calc( 50% - calc( calc( 100vw * 74 / 750 ) / 2 ) );
        left: calc( calc( 100% - calc( 100vw * 677 / 750 ) ) / 2 );
        width: calc( 100vw * 677 / 750 );
        height: calc( 100vw * 74 / 750 );
    }
    .main_view .container .slide_container .catchcopy .copy_01 {
        width: calc( 100vw * 274 / 750 );
        height: calc( 100vw * 68 / 750 );
    }
    .main_view .container .slide_container .catchcopy .copy_02 {
        width: calc( 100vw * 400 / 750 );
        height: calc( 100vw * 74 / 750 );
    }
    .main_view .container .slide_container .catchcopy .copy_01 img, 
    .main_view .container .slide_container .catchcopy .copy_02 img {
    }



    .main_view .container .lead {
        flex-wrap: wrap;
        max-width: none;
        margin: 0;
        padding: 50px 15px;
    }
    .main_view .container .lead .image {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .main_view .container .lead .image.image_01 {
        margin: 0 0 20px 0;
    }
    .main_view .container .lead .image img {
        width: 100%;
    }
    .main_view .container .lead .image.image_02 {
        justify-content: center;
    }
    .main_view .container .lead .image.image_02 a:first-of-type img {
        max-width: none;
    }
    .main_view .container .lead .image.image_02 a:last-of-type img {
        width: 100%;
        max-width: none;
        aspect-ratio: 418 / 227 ;
    }
}



/*--------------------------------------------------

.gNavi

--------------------------------------------------*/
.gNavi {
    margin: 0 0 80px 0;
}
.gNavi .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 0;
}
.gNavi .container .flex-item {
    width: calc( 100% / 7 );
    padding: 0;
}
.gNavi .container .flex-item a {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
}
.gNavi .container .flex-item a img {
}
.gNavi .container .flex-item.item_02,
.gNavi .container .flex-item.item_03,
.gNavi .container .flex-item.item_04,
.gNavi .container .flex-item.item_05,
.gNavi .container .flex-item.item_06,
.gNavi .container .flex-item.item_07 {
    border-left: 2px dashed #333;
}
.gNavi .container .flex-item.item_01 a img { width: calc( 100vw * 111 / 1217 ); max-width: 111px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_02 a img { width: calc( 100vw * 94 / 1217 ); max-width: 94px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_03 a img { width: calc( 100vw * 80 / 1217 ); max-width: 80px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_04 a img { width: calc( 100vw * 82 / 1217 ); max-width: 82px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_05 a img { width: calc( 100vw * 129.42 / 1217 ); max-width: 129.42px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_06 a img { width: calc( 100vw * 86 / 1217 ); max-width: 86px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
.gNavi .container .flex-item.item_07 a img { width: calc( 100vw * 109 / 1217 ); max-width: 109px; height: calc( 100vw * 89 / 1217 ); max-height: 89px; }
@media screen and ( max-width: 768px ){
    .gNavi {
        margin: 0 0 calc( 100vw * 80 / 750 ) 0;
        padding: 0 calc( 100vw * 50 / 750 );
    }
    .gNavi .container {
        flex-wrap: wrap;
        max-width: none;
        margin: 0;
    }
    .gNavi .container .flex-item {
        width: 50%;
        margin: 0;
        padding: 0;
    }
    .gNavi .container .flex-item a {
        display: flex;
        justify-content: center;
        align-items: baseline;
        width: 100%;
        margin: 10px auto;
        padding: 10px 20px;
        text-align: center;
    }
    .gNavi .container .flex-item a img {
    }
    .gNavi .container .flex-item.item_02,
    .gNavi .container .flex-item.item_03,
    .gNavi .container .flex-item.item_04,
    .gNavi .container .flex-item.item_05,
    .gNavi .container .flex-item.item_06,
    .gNavi .container .flex-item.item_07 {
        border-left-style: none;
    }
    .gNavi .container .flex-item.item_02 a,
    .gNavi .container .flex-item.item_04 a,
    .gNavi .container .flex-item.item_06 a {
        border-left: 2px dashed #333;
    }
    .gNavi .container .flex-item.item_01,
    .gNavi .container .flex-item.item_02,
    .gNavi .container .flex-item.item_03,
    .gNavi .container .flex-item.item_04,
    .gNavi .container .flex-item.item_05,
    .gNavi .container .flex-item.item_06 {
        border-bottom: 2px dashed #333;
    }
    .gNavi .container .flex-item.item_01 a img { width: calc( 100vw * 105 / 375 ); max-width: 105px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_02 a img { width: calc( 100vw * 88 / 375 ); max-width: 88px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_03 a img { width: calc( 100vw * 76 / 375 ); max-width: 76px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_04 a img { width: calc( 100vw * 77 / 375 ); max-width: 77px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_05 a img { width: calc( 100vw * 123 / 375 ); max-width: 123px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_06 a img { width: calc( 100vw * 81 / 375 ); max-width: 81px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
    .gNavi .container .flex-item.item_07 a img { width: calc( 100vw * 103 / 375 ); max-width: 103px; height: calc( 100vw * 84 / 375 ); max-height: 84px; }
}