@charset "utf-8";
/* ===================================================
	meal CSS
====================================================== */
/* ---------------------------------------------------
lead_col
------------------------------------------------------ */
#lead_col { padding: 120px 0; text-align: center;}
#lead_col h2 { padding: 50px 0 0; font-size: 40px; background: url(../../img/tit_icon.svg)no-repeat top center; background-size: 33px; line-height: 1.5;}
#lead_col h2 span { display: table; margin: 10px auto 0; padding: 15px 30px 50px; font-size: 15px; color: #cfd5db; border-top: 1px solid #cfd5db;}
#lead_col p { margin-bottom: 120px; line-height: 2;}
#lead_col .slick-initialized .slick-slide { margin: 0 5px 0 0;}

@media screen and (max-width: 600px) {
	#lead_col { padding: 100px 0 50px;}
	#lead_col h2 { padding: 50px 0 20px; font-size: 26px; background-size: 25px;}
	#lead_col h2 span { font-size: 13px; padding: 10px 0 0;}
	#lead_col p { margin-bottom: 60px; text-align: left;}
	#lead_col .slick-initialized .slick-slide img { width: auto; height: 60vw;}
}

/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { padding: 120px 0 100px; background: url(../../meal/img/sec1_bg.png)no-repeat top -30px right -20px,url(../../meal/img/sec1_bg2.png)no-repeat bottom left, url(../img/bg.jpg); color: #fff;}
#sec1 h2 { margin: 0 0 80px; font-size: 35px; color: #fff; text-align: center;}
#sec1 h2 span { font-size: 12px; display: block; opacity: .5;}
#sec1 #panel1 >ul li { position: relative; width: 21%; border-bottom: 1px solid rgba(255, 255, 255, .3);}
#sec1 #panel1 >ul li::after { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 30px; height: 1px; background-color: #b7b7b7;z-index: 1;}
#sec1 #panel1 >ul { display: flex; width: 1070px; margin: 0 auto 55px; max-width: 100%; justify-content: space-between;}
#sec1 #panel1 >ul a { display: block; text-align: center; opacity: .5; font-size: 35px; color: #fff;}
#sec1 #panel1 >ul a span { font-size: 15px; padding: 0 0 0 20px;}
#sec1 #panel1 >ul a:hover,
#sec1 #panel1 >ul li a.active { opacity: 1; text-shadow: 0px 0px 24px rgba(255, 255, 255, 0.9),0px 0px 24px rgba(255, 255, 255, 0.9),0px 0px 24px rgba(255, 255, 255, 0.9);}
#sec1 #panel1 .panel:not(:first-of-type) { display: none;}
.sec1_photo { position: relative; margin: 0 0 40px;}
.sec1_photo p { position: absolute; font-feature-settings: initial; writing-mode: tb-rl; writing-mode: vertical-rl; right: 20px; top: 35px; font-size: 44px; line-height: 1.2;}
.sec1_photo p span { padding: 0 0 10px; font-size: 27px;}
#panel1_2 .sec1_photo p span { padding: 0;}
#sec1  #panel1_1 .sec1_photo p { text-shadow: 0px 0px 10px rgba(166, 124, 35, 0.9),0px 0px 10px rgba(166, 124, 35, 0.9),0px 0px 10px rgba(166, 124, 35, 0.9),0px 0px 10px rgba(166, 124, 35, 0.9),0px 0px 10px rgba(166, 124, 35, 0.9),0px 0px 10px rgba(166, 124, 35, 0.9);}
#sec1  #panel1_2 .sec1_photo p { text-shadow: 0px 0px 10px rgba(69, 141, 171, 0.9),0px 0px 10px rgba(69, 141, 171, 0.9),0px 0px 10px rgba(69, 141, 171, 0.9),0px 0px 10px rgba(69, 141, 171, 0.9),0px 0px 10px rgba(69, 141, 171, 0.9),0px 0px 10px rgba(69, 141, 171, 0.9);}
#sec1  #panel1_3 .sec1_photo p { text-shadow: 0px 0px 10px rgba(123, 42, 42, 0.9),0px 0px 10px rgba(123, 42, 42, 0.9),0px 0px 10px rgba(123, 42, 42, 0.9),0px 0px 10px rgba(123, 42, 42, 0.9),0px 0px 10px rgba(123, 42, 42, 0.9),0px 0px 10px rgba(123, 42, 42, 0.9);}
#sec1  #panel1_4 .sec1_photo p { text-shadow: 0px 0px 10px rgba(182, 82, 11, 0.9),0px 0px 10px rgba(182, 82, 11, 0.9),0px 0px 10px rgba(182, 82, 11, 0.9),0px 0px 10px rgba(182, 82, 11, 0.9),0px 0px 10px rgba(182, 82, 11, 0.9),0px 0px 10px rgba(182, 82, 11, 0.9);}

#sec1 #panel1 .panel h3 { font-size: 30px; color: #c6b97b; text-align: center;}
#sec1 #panel1 .panel > p { padding: 20px 0 40px; text-align: center;}
#sec1 #panel1 .panel a { display: block; margin: 0 auto; padding: 20px 0; width: 440px; max-width: 100%; border: 1px solid #fff; color: #fff; text-align: center; border-radius: 50px;}
#sec1 #panel1 .panel a span { position: relative; font-size: 18px;}
#sec1 #panel1 .panel a span:after { position: absolute; content: ">"; right: -90px;}
#sec1 #panel1 .panel > span { display: block; padding: 10px 0 0; text-align: center;}

@media screen and (max-width: 600px) {
	#sec1 { padding: 60px 0 50px;}
	#sec1 h2 { margin: 0 0 40px; font-size: 26px;}
	#sec1 #panel1 >ul { flex-wrap: wrap; justify-content: space-between;}
	#sec1 #panel1 >ul li { width: 45%;}
	#sec1 #panel1 >ul a { font-size: 24px;}
	#sec1 #panel1 >ul a span { font-size: 12px;}
	#sec1 #panel1 >ul li:nth-of-type(3),
	#sec1 #panel1 >ul li:nth-of-type(4) { margin-top: 10px;}
	#sec1 #panel1 .panel img { height: 300px;}
	.sec1_photo p span { display: block; font-size: 20px;}
	.sec1_photo p { font-size: 30px;}
	#sec1  #panel1_3 .sec1_photo p { line-height: 0.5;}
	#sec1  #panel1_3 .sec1_photo p span { line-height: 1.4;}
	.sec1_photo { margin: 0 0 10px;}
	#sec1 #panel1 .panel h3 { font-size: 22px;}
	#sec1 #panel1 .panel > p { padding: 0 0 30px; text-align: left;}
	#sec1 #panel1 .panel a { padding: 10px 0; width: 100%;}
	#sec1 #panel1 .panel a span { font-size: 15px;}
}

/* ---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 { padding: 100px 0 160px;}
#sec2 h2 { margin: 0 0 40px; font-size: 35px;}
#sec2 h2 span { font-size: 12px; padding: 0 0 0 20px; opacity: .5;}
#sec2 .flex_col { align-items: center;}
#sec2 .flex_col > img { width: 61.7%;}
#sec2 .flex_col > dl { width: 31.7%;}
#sec2 .flex_col > dl dt { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid #d0cccc; font-size: 30px; color: #7d690d; line-height: 1.5;}
#sec2 .flex_col:nth-of-type(1) { margin-bottom: 80px;}

@media screen and (max-width: 600px) {
	#sec2 { padding: 50px 0 60px;}
	#sec2 h2 { margin: 0 0 30px; font-size: 26px; line-height: 1.5;}
	#sec2 h2 span { display: block; padding: 0;}
	#sec2 .flex_col > img,
	#sec2 .flex_col > dl { width: 100%;}
	#sec2 .flex_col > dl dt { padding: 10px 0; margin: 0 0 10px; font-size: 22px;}
	#sec2 .flex_col:nth-of-type(1) { margin-bottom: 40px;}
}

/* ---------------------------------------------------
sec3
------------------------------------------------------ */
#sec3 { padding: 150px 0; background: url(../../meal/img/sec3_bg.png)no-repeat right -15px bottom 0,url(../img/bg.jpg); color: #fff;}
#sec3 .flex_col > img { width: 63.4%;}
#sec3 .flex_col .sec_col { width: 27.5%;}
#sec3 .flex_col .sec_col h2 { margin: 0 0 30px; padding: 0 0 30px; text-align: center; font-size: 35px; line-height: 1.6; border-bottom: 1px solid #4f5f77;}
#sec3 .flex_col .sec_col h2 span { display: block; font-size: 20px;}
#sec3 .flex_col .sec_col h2 span:nth-of-type(2) { font-size: 12px; opacity: .5;}


@media screen and (max-width: 600px) {
	#sec3 { padding: 50px 0;}
	#sec3 .flex_col .sec_col,
	#sec3 .flex_col > img { width: 100%;}
	#sec3 .flex_col .sec_col h2 span { font-size: 15px;}
	#sec3 .flex_col .sec_col h2 { margin: 0 0 20px; padding: 0 0 20px; font-size: 26px;}
	#sec3 .flex_col .sec_col { margin: 0 0 30px;}
}


/* ---------------------------------------------------
sec4
------------------------------------------------------ */
#sec4 { padding: 70px 0 100px;}
#sec4 h2 { text-align: center; font-size: 35px;}
#sec4 h2 span { display: block; font-size: 12px; opacity: .5;}
#sec4 h2+p { text-align: center; padding: 30px 0 70px;}
.sec4_col { display: flex; justify-content: space-between; flex-wrap: wrap;}
.sec4_col >div { width: 45.9%; padding: 0 0 70px;}
.sec4_col >div dl { padding: 25px 0; text-align: center; border-bottom: 1px solid #ccc;}
.sec4_col >div dt { font-size: 20px;}
.sec4_col >div dd { font-size: 17px;}
.sec4_col >div p { padding: 30px 0 0;}

@media screen and (max-width: 600px) {
	#sec4 { padding: 50px 0;}
	#sec4 h2 { font-size: 26px;}
	#sec4 h2+p { padding: 20px 0 30px;}
	.sec4_col { display: block;}
	.sec4_col >div { width: 100%; padding: 0 0 40px;}
	.sec4_col >div dl { padding: 10px 0;}
	.sec4_col >div dt { font-size: 18px;}
	.sec4_col >div dd { font-size: 16px;}
	.sec4_col >div p { padding: 10px 0 0;}

}


/* ---------------------------------------------------
sec5
------------------------------------------------------ */
#sec5 { padding: 127px 0 167px; background: url(../../meal/img/sec5_bg.png)no-repeat bottom right; background-color: #ccdbe7;}
#sec5 .sec_col { width: 28.4%;}
#sec5 .flex_col { align-items: center;}
#sec5 .flex_col >img { width: 63.4%;}
#sec5 .flex_col .sec_col h2 { margin: 0 0 30px; padding: 0 0 30px; text-align: center; font-size: 35px; line-height: 1.6; border-bottom: 1px solid #a3afb9;}
#sec5 .flex_col .sec_col h2 span { display: block; font-size: 20px;}
#sec5 .flex_col .sec_col h2 span:nth-of-type(2) { font-size: 12px;}
#sec5+div { margin: 125px auto 165px; padding: 70px 14.4% 80px; border: 1px solid #b7b7b7;}
#sec5+div dt { margin: 0 0 25px; padding: 0 0 20px; text-align: center; font-size: 17px; border-bottom: 1px solid #b7b7b7;}
#sec5+div dd li { padding-left: 1em; text-indent: -.5em;}
#sec5+div dd li::before { content: "・";}

@media screen and (max-width: 600px) {
	#sec5 { padding: 50px 0;}
	#sec5 .flex_col >img { width: 100%;}
	#sec5 .sec_col { width: 100%;}
	#sec5 .flex_col .sec_col h2 span { font-size: 16px;}
	#sec5 .flex_col .sec_col h2 { margin: 0 0 20px; padding: 20px 0; font-size: 26px;}
	#sec5+div { margin: 50px auto; padding: 50px 5%;}
	#sec5+div dt { padding: 0 0 10px; margin: 0 0 10px;}
}