@charset "utf-8";

.sub-wrap  {margin-top: 10em;}
.sub-top {height: 55em; background: #111; justify-content: center; align-items: center; position: fixed; top:10em; left: 0; width: 100%;}
.sub-top .txt {margin-bottom: 5em; text-align: center; color: var(--reverse);display: flex; flex-flow: column wrap; align-items: center;}
.sub-top .txt h4 {font-size: 2.6em; display: inline-block; padding: 0.1em 0.3em; background: var(--point1); margin-bottom: 1em;}
.sub-top .txt h2 {font-size: 7.2em; font-weight: 600; position: relative; display: inline-block;}
.sub-top .txt h2:not(:first-child) {margin-top: 0.1em;}
.sub-top h2 .cover {display: block; position: absolute; width: 100%; height: 100%; background: var(--point1); transform: scale(0, 1); transform-origin: left center; left: 0; top:0; animation:cover_start 1s -0.1s forwards 1 ease;}


.sub1 .sub-top {background: url(../images/sub/sub1_top.jpg) no-repeat center / cover;}
.sub2 .sub-top {background: url(../images/sub/sub2_top.jpg) no-repeat center / cover;}
.sub3 .sub-top {background: url(../images/sub/sub3_top.jpg) no-repeat center / cover;}
.sub4 .sub-top {background: url(../images/sub/sub4_top.jpg) no-repeat center / cover;}
.sub5 .sub-top {background: url(../images/sub/sub5_top.jpg) no-repeat center / cover;}
.sub6 .sub-top { background: url(../images/sub/sub6_top.jpg) no-repeat center / cover;}
.sub7 .sub-top { background: url(../images/sub/sub7_top.jpg) no-repeat center / cover; }

.sub-container {background: #fff; border-radius: 5em 5em 0 0; margin-top: 60em; position: relative; padding-top: 9em;}

.sub-tit {align-items: center; text-align: center; margin-bottom: 5.5em;color: var(--default);}
.sub-tit p {font-size: max(16px,2em); padding: 0.25em 1em; border-radius: 3em; background: #eceff9; margin-bottom: 1em;}
.sub-tit h3 {font-size: 5.2em; font-weight: 600; line-height: 1.4; }
.sub-tit h4 {font-size: 2.8em; margin-top: 0.5em;}
.sub-tit h5 {font-size: 2.4em; margin-top: 0.75em;}

.sub_navi_wrap {position: relative; text-align: center; padding: 12em 0 5em; z-index: 4;}
.sub_navi_wrap .list_btn {font-size: max(16px,2em); margin: 0 auto; display: inline-block; padding: .7em 3.2em; background: #b1b1b1; color: var(--reverse); border-radius: .5em;}
.sub_navi_slide_wrap {margin-top: 6em; padding-top: 6em; border-top: 1px solid #d7d7d7;}
.sub_navi_slide_wrap h4 {font-size: max(20px,2.4em); font-weight: 700; margin-bottom: 1em;}
.sub_navi_slide_wrap .sub-inner {position: relative; text-align: left; padding-bottom: 3em;}
.sub_navi_slide_wrap .swiper {padding-bottom: 2px;}
.sub_navi_slide_wrap .swiper-slide .img {display: flex;}
.sub_navi_slide_wrap .swiper-slide img {height: min(265px,27em); width: 100%; object-fit: cover;}
.sub_navi_slide_wrap .swiper-slide .txt {padding: 1em 2em; border: 1px solid #d7d7d7; border-top: 0;}
.sub_navi_slide_wrap .swiper-slide .txt p {font-size: max(14px,1.7em); padding: 0.05em 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.sub_navi_slide_wrap .swiper-slide .txt b {font-weight: 700;}
.sub_navi_wrap .sub_navi_prev::after, .sub_navi_wrap .sub_navi_next::after {display: none;}
.sub_navi_wrap .sub_navi_prev {width: 4.7em; height: 4.7em; transform: rotate(180deg) translateX(50%); left:0;}
.sub_navi_wrap .sub_navi_next {width: 4.7em; height: 4.7em; right:0; transform: translateX(50%);}

.img-link{ font-size:2em; display:inline-block; padding: 0.5em 1.5em; background: #000; color: #fff; border-radius :0.5em; transition:all 0.2s; margin-top: 2em;}
.img-link:hover {background: var(--point1);}

@media (max-width:1240px) {
    .sub-top .txt h4 {margin-bottom: .75em;}
    .sub-top .txt h2 {font-size: 6.5em;}
    .sub-tit h3 {font-size: 5em;}
    .sub-tit h4 {font-size: 2.6em; }
    .sub_navi_slide_wrap .swiper-slide img {height: min(340px, 25vw);}
}
@media (max-width:800px) {
    .sub-top {height: 45em; }
    .sub-container {margin-top: 50em;}
    .sub-top .txt h2 {font-size: 5.2em;}
    .sub-tit h3 {font-size: 4.5em;}
    .sub-tit h4 {font-size: 2.4em; }
    .sub_navi_slide_wrap .swiper-slide img {height: min(340px, 40vw);}
    .sub-top .txt h2 {font-size: 4.5em;}
    .sub-tit h3 {font-size: 4em;}
}

.sub-wrap .sub-container .txt-box {padding: 2em; background: #f5f5f5;}
.sub-wrap .sub-container .txt-box p {margin-bottom: 0; font-size: max(14px,1.8em); font-weight: 300;}

.sub-wrap .sub-container a.link-txt {color: #54aaf3; font-weight: 500;}

.sub-type1 .sub-container > .sub-inner {max-width: 900px;}
.sub-type1 .cont .img {text-align: center; margin-bottom: 5em;}
.sub-type1 .cont .img-border {border:1px solid #d7d7d7; padding: 1rem;}
.sub-type1 .cont h5 {font-size: max(20px,2.4em); font-weight: 600; margin-bottom: 0.5em; line-height: 1.6; color:var(--point1);}
.sub-type1 .cont p,
.sub-type1 .cont p:has( + h5) {font-size: max(16px,2em); margin-bottom: 2em; line-height: 1.8;}
.sub-type1 .cont p + p {margin-bottom: 2em;}
.sub-type1 .cont p:has( + p) {margin-bottom: 1em;}
.sub-type1 .cont .cont-img {text-align: center; margin-bottom: 4em;}
.sub-type1 .cont .cont-img p {text-align: center;}
.sub-type1 .cont h6 {font-size: max(16px,2em); font-weight: 700;}
.sub-type1 .cont h6 span {font-size: 1.2em;}

.sub-type2 .txt-wrap {font-weight:600;background-color:#ffefd3;font-size:max(16px,2rem);text-align:center;padding: 3.2rem;border-radius: 2rem;line-height:3.6rem;}
.sub-type2 .cont{ max-width:900px; width:100%; margin:0 auto; font-weight:600;}
.sub-type2 .cont .cont-title{ margin:6rem 0 4rem;}
.sub-type2 .cont .cont-title .img-box { margin-bottom:2rem; text-align: center;}
.sub-type2 .cont .cont-title h4{ font-size:3.4rem; font-weight:700; text-align:center;}
.sub-type2 .cont .cooking_txt { font-size:max(16px,2rem); margin-top:3rem;  line-height: 1.8;}
.sub-type2 .cooking-cont{ margin-top:5rem;}
.sub-type2 .cooking-title {
    width: 100%;
}
.sub-type2 .cooking-title h5{ font-size:max(18px,2.2em); font-weight:700; color:#ff7200; padding:0 0 1rem 3.2em; text-indent: -3.2em;border-bottom:1px solid #ff7200; margin-bottom: 1.5rem; width: 100%;}
.sub-type2 .cooking-cont > ul li{ font-size:max(16px,2rem);}
.sub-type2 .cooking-cont > p { border-top:1px solid #ff7200; padding:1.5rem 0; font-size:max(16px,2rem);}
.sub-type2 .cooking-cont .ref {color: #333; font-weight: 300; font-size: max(14px,1.8rem); line-height: 1.7;}
.sub-type2 .cooking_ingredient ul li{ position:relative; display:flex; align-items:center; padding-left:20px;}
.sub-type2 .cooking_ingredient ul li::before{ content:""; position:absolute; left:0; width:8px; height:8px; border-radius: 100%; background-color:#ffd488;}
.sub-type2 .cooking_order > ul > li, 
.sub-type2 .cooking_tip > ul > li{  margin:1rem 0; line-height: 1.8; padding-left: 1.5em; text-indent: -1.5em;}
.sub-type2 .cooking_order > ul li span, 
.sub-type2 .cooking_tip > ul li span{  margin-right:1rem; }




@media (max-width:1200px) {
    .sub-type2 .txt-wrap br {display: none;}
}
@media (max-width:800px) {
    .sub-type2 .cont1 .cooking_ingredient ul { grid-template-columns:repeat(1,minmax(0,1fr));}
}
.sub-type1 .cont p:has(+ .table-wrap) {margin-bottom: 1rem;}
.table-wrap{margin-bottom: 3rem;}   
.table-wrap .table-tit {font-size: max(16px, 2rem); font-weight: 600; margin-bottom: 1rem; position: relative; padding-left: 1.5rem;}

.table-wrap table {width: 100%; border: 1px solid var(--point1);  }
.table-wrap table thead th {font-size: max(18px, 2rem); text-align: center; padding-block: 1rem; background: var(--point1); color: var(--reverse);}
.table-wrap table thead th:not(:first-child) {border-left: 1px solid var(--reverse);}
.table-wrap table tbody tr:not(:last-child) {border-bottom: 1px solid #e1e1e1;}
.table-wrap table tbody tr td {font-size: max(14px, 1.8rem); padding: 1rem 2rem;}
.table-wrap table tbody tr td:not(:last-child) {border-right: 1px solid #e1e1e1;}


.list-dot { padding-left: 1.5rem; position: relative; font-size: max(16px,2em); line-height: 1.8;}
.list-dot::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .5rem; height: .5rem; background: var(--point1); border-radius: 100%;}

.sub3 .cont {max-width: 900px; margin: 0 auto;} 
.sub3 .cont .grid {
    text-align: center;
}
.sub3 .cont .grid p {
    font-size:max(15px,1.8rem);
    font-weight: 300;
    margin-top: .5rem;
}
.sub3 .cont1{ padding-bottom: 7rem; border-bottom: 1px dashed #e1e1e1;}
.sub3 .cont1_2 .grid-item img {width: 100%;}
.sub3 .cont1 .cooking_ingredient ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 1rem; padding-inline: 1.5rem;}
.sub3 .cont2 .cooking_ingredient ul{ display:flex; flex-wrap:wrap; flex-direction:column; padding-left: 1.5rem;}
.sub3 .cont2 .cooking_ingredient ul li {margin-bottom: 1rem;}
.sub3 .cont2 .img-wrap p {font-size: max(14px,1.8em);  line-height: 1.8; font-weight: 400; text-align: center;}
.sub3 .cont1 .cooking_order {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.sub3 .cooking_order .order_list-box {
    width: 60%;
}
.sub3 .cooking_order .img {
    width: 35%;
}
.sub3 .cont2 .grid-item {border:1px solid #eee;}
.sub3 .cont2 .grid p {background: #eee; font-weight: 500; padding: .5rem 0; }
.sub3 .cont2 .cooking-cont > ul {
    margin-top: 2rem;
}
.sub3 .cont2 .cooking-cont > ul li {
    margin: .5rem 0;
    line-height: 1.8;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
@media (max-width:800px) {
    .sub3 .cooking_order .order_list-box,
    .sub3 .cooking_order .img {
        width: 100%;
    }
}


.sub5 .sub-tit h4 {max-width: 900px;  margin: 0 auto;}
.sub5 .sub-tit h4 span {color: #da4e2e; font-weight: 600;}
.sub5 .img-wrap {justify-content: space-between;}
.sub5 .img-wrap img {max-width: 49%;}
.sub5 .img-7 {display: grid;}
@media (max-width:800px) {
    .sub5 .img-wrap img {max-width: 100%; width: 100%;}
    .sub5 .img-wrap img:first-child {margin-bottom: 4%;}
}


.sub8 .img-box img {
    border: 1px solid #d7d7d7;
}