@charset "utf-8";
/* ===================================================
	meal season CSS
====================================================== */
*{
    min-height: 0;
    min-width : 0;
}


span.tit_en { color: #d8a314; font-size: 16px;}
.page_top { display: table; margin: 0 0 0 auto; padding: 0 40px 0 0; background: url(../../meal/img/icon_pagetop.svg)no-repeat center right;}

.flex_col { display: flex; flex-wrap: wrap; justify-content: space-between;}
 
#main_img { margin: 0 0 30px;}
#main_img h1 { position: static; display: table; margin: 140px auto 0; transform: none; text-shadow: none; color: #000; font-size: 46px;}
#main_img dl.lang_nav { top: -30px;}

@media screen and (max-width: 600px) {
    .flex_col { display: block;}
    
    #main_img h1 { font-size: 30px; margin: 70px auto 0;}
	#main_img dl.lang_nav { top: -45px; right: 0; margin-right: 0; }
}



/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { position: relative; margin-bottom: 100px; background: url(../../meal/img/sec_lead_bg1.png)no-repeat right 470px;}
#sec1::after { position: absolute; content: ""; display: block; width: 800px; height: 596px; background: url(../../meal/img/sec_lead_bg2.png)no-repeat center center; right: 42%; bottom: -360px; z-index: -1;}
.sec1_photo { position: relative; margin: 0 0 30px;}
.sec1_photo >img { width: 100%; height: 900px;}
.sec1_photo h2 { position: absolute; padding: 30px 40px; right: 60px; top: 0; font-size: 40px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; height: -webkit-max-content; background: rgba(255,255,255,0.9); height: 100%; box-sizing: border-box;}
.sec1_photo h2 span.season_stit { display: block; position: absolute; top: -30px; right: -40px; color: #fff; font-size: 46px; padding: 38px 0; line-height: 1.4;}
.sec1_photo h2 span.season_stit span { font-size: 50px;}
.sec1_photo h2 span.season_stit#season_spring { background-color: #e2536b;}
.sec1_photo h2 span.season_stit#season_summer { background-color: #72af43;}
.sec1_photo h2 span.season_stit#season_autumn { background-color: #d87d06;}
.sec1_photo h2 span.season_stit#season_winter { background-color: #2583c9;}
#sec1 .sec_txt { width: 35%;}
#sec1 .sec_txt h3 { color: #006835; font-size: 26px; margin: 0 0 20px;}
#sec1 .sec1_slide { width: 57%;}

#sec1 .sec1_slide .slick-dots { display: flex; justify-content: center;}
#sec1 .sec1_slide .slick-dots li button { padding: 0;}
#sec1 .sec1_slide .slick-dots li { margin: 0;}
#sec1 .sec1_slide .slick-dots li button:before { color: #aaaaaa; opacity: 1;}
#sec1 .sec1_slide .slick-dots li.slick-active button:before { font-size: 16px; color: #006835; opacity: 1;}

@media (hover: hover) {
	
}

@media screen and (max-width: 600px) {
    #sec1 { background-size: 120%;}
    #sec1::after { width: 96%; height: 70vw; right: 0; bottom: -55vw; background-size: cover;}
    .sec1_photo h2 { position: static; -ms-writing-mode: inherit; writing-mode: inherit; font-feature-settings: inherit; background-color: initial; padding: 20px 0; font-size: 26px; font-size: 22px;}
	.sec1_photo h2 span.season_stit { display: table; position: static; margin: 0 auto 10px; padding: 0 20px; text-align: center; font-size: 26px;}
    .sec1_photo h2 span.season_stit span { font-size: 33px;}
    .sec1_photo >img { min-height: inherit; height: 90vw;}
    #sec1 .sec_txt { width: 100%;}
    #sec1 .sec_txt h3 { margin: 0 0 10px; font-size: 20px;}
    
    #sec1 .sec1_slide { width: 100%; margin: 30px 0 0;}
    
}


/* ---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 h2 { margin: 0 0 60px; font-size: 46px; text-align: center;}
#sec2 h2 span { color: #006835;}
#sec2 .flex_col { margin-bottom: 80px;}
#sec2 .flex_col >img { width: 50%; height: 400px;}
#sec2 .flex_col >div { width: 43%; padding: 30px 0 0;}
#sec2 .flex_col >div h3 { padding: 0 0 20px; font-size: 26px; color: #006835;}
#sec2 .flex_col:last-of-type { margin-bottom: 100px;}


@media screen and (max-width: 600px) {
    #sec2 h2 { margin: 0 0 20px; font-size: 30px;}
    #sec2 .flex_col { margin: 0 0 30px;}
    #sec2 .flex_col >img { width: 100%; height: 55vw;}
    #sec2 .flex_col >div { width: 100%; padding: 10px 0 0;}
    #sec2 .flex_col >div h3 { padding: 0 0 10px; font-size: 22px;}
    #sec2 .flex_col:last-of-type { margin-bottom: 50px;}
}
/* ---------------------------------------------------
sec3
------------------------------------------------------ */
#sec3 { padding: 70px 0; background: url(../../meal/img/bg.gif);}
#sec3 h2 { margin: 0 0 60px; font-size: 46px; text-align: center;}
#sec3 h2 span { color: #006835;}

#sec3 .PlanView { display: flex; justify-content: space-between; background-color: #fff;}
#sec3 .PlanView+.PlanView { margin-top: 80px;}
#sec3 .PlanView .picture { width: 50%;}
#sec3 .PlanView .picture * { height: 100%;}
#sec3 .PlanView .picture picture { display: block;}
#sec3 .PlanView .main_picture img { width: 100%; height: 100%; object-fit: cover;}
#sec3 .PlanView .explan { width: 50%; padding: 60px;}
#sec3 .PlanView .plan { margin: 0 0 30px; font-size: 26px;}
#sec3 .PlanView .planlist { position: relative; display: block;}
#sec3 .PlanView .planlist a { display: block; padding: 20px; width: 100%; background-color: #006835; font-size: 18px; color: #fff; box-sizing: border-box;}
#sec3 .PlanView .planlist::before { content: ''; position: absolute; bottom: 50%; right: 20px; width: 30px; height: 1px; background: #fff; z-index: 1;}
#sec3 .PlanView .planlist::after { content: '';  position: absolute; bottom: 53%; right: 20px; width: 8px; height: 1px; background: #fff; transform: rotate(35deg); z-index: 1;}


@media screen and (max-width: 600px) {
    #sec3 { padding: 50px 0;}
    #sec3 h2 { margin: 0 0 20px; font-size: 30px;}
    #sec3 .PlanView { display: block;}
    #sec3 .PlanView+.PlanView { margin-top: 50px;}
    #sec3 .PlanView .picture { width: 100%;}
    #sec3 .PlanView .explan { width: 100%; padding: 30px 5%;}
    #sec3 .PlanView .plan { margin: 0 0 20px; font-size: 18px;}
    #sec3 .PlanView .planlist a { padding: 10px 4%;}
    
}


/* ---------------------------------------------------
sec4
------------------------------------------------------ */
#sec4 { padding: 70px 0;}
#sec4 h2 { margin: 0 0 60px; font-size: 46px; text-align: center;}
#sec4 h2 span { color: #006835;}
#sec4 .flex_col >div { position: relative; width: 47.5%; margin-bottom: 90px;}
#sec4 .sec4_slide .slick-dots { display: flex; justify-content: right;}
#sec4 .sec4_slide img { width: 100%; height: 380px;}
#sec4 .sec4_slide .slick-dots li button { padding: 0;}
#sec4 .sec4_slide .slick-dots li { margin: 0;}
#sec4 .sec4_slide .slick-dots li button:before { color: #aaaaaa; opacity: 1;}
#sec4 .sec4_slide .slick-dots li.slick-active button:before { font-size: 16px; color: #006835; opacity: 1;}
#sec4 h4 { position: absolute; left: 20px; top: -20px; padding: 20px 0; line-height: 1.5; font-size: 38px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; color: #fff; z-index: 1;}
#sec4 h4 span { font-size: 46px;}
#sec4 .flex_col >div:nth-of-type(1) h4 { background-color: #e2536b;}
#sec4 .flex_col >div:nth-of-type(2) h4 { background-color: #72af43;}
#sec4 .flex_col >div:nth-of-type(3) h4 { background-color: #d87d06;}
#sec4 .flex_col >div:nth-of-type(4) h4 { background-color: #2583c9;}
#sec4 .flex_col >div h3 { font-size: 26px;}
#sec4 .flex_col >div:nth-of-type(1) h3 { color: #e2536b;}
#sec4 .flex_col >div:nth-of-type(2) h3 { color: #72af43;}
#sec4 .flex_col >div:nth-of-type(3) h3 { color: #d87d06;}
#sec4 .flex_col >div:nth-of-type(4) h3 { color: #2583c9;}

@media screen and (max-width: 600px) {
    #sec4 { padding: 50px 0;}
    #sec4 h2 { margin: 0 0 50px; font-size: 30px;}
    #sec4 .flex_col >div { width: 100%; margin-bottom: 60px;}
    #sec4 h4 { font-size: 26px;}
    #sec4 h4 span { font-size: 30px;}
    #sec4 .flex_col >div h3 { font-size: 22px;}
    #sec4 .sec4_slide img { height: 55vw;}
}