@charset "utf-8";
/* ===================================================
	Meal CSS
====================================================== */

/* ---------------------------------------------------
cnav
------------------------------------------------------ */
.cmn_cnav_img { flex-wrap: wrap; padding: 80px 0 110px;}
.cmn_cnav_img li { width: 280px; max-width: calc((100% - 90px) / 4);}

@media screen and (max-width: 600px) {
	.cmn_cnav_img { padding: 30px 0 50px;}
}
/* <!-- ▼ラインナップ追加 --> */
.cmn_cnav_img li{width: 297px;max-width: initial;margin:0 20px 30px;}
.cmn_cnav{justify-content: center;}
@media screen and (max-width: 600px) {
.cmn_cnav{display: flex;justify-content: space-between; line-height: 1.6;}
.cmn_cnav_img li {  width: calc((100vw - 1px) / 2) !important;max-width: none !important; margin-top: 1px !important;margin:initial; }
}


/* ---------------------------------------------------
section共通
------------------------------------------------------ */
section { padding: 85px 0 100px;}
section:nth-of-type(odd) { background: #f3ede0;}
section .cmn_tit_h { margin-bottom: 50px;}
section .sec_main img { width: 100%;}
section .sec_main.slick { padding: 0 0 50px; margin-bottom: 0;}
section .sec_main.slick .slick-dots { bottom: 0;}
section .attention { color: #ce4c32;}
#sec04 > .detail >.txt{width: initial;}

.plan .cmn_tit_h { line-height: 1.3;}
.plan .cmn_tit_h .note { font-size: 20px;}
.plan .cmn_tit_h .note:first-child { margin: 0 0 10px;}
.plan .detail { display: flex;justify-content: space-between; margin-top: 75px;}
.plan .detail .txt { width: 545px;}
.plan .detail .txt .cap { padding: 0 0 10px; margin: 0 0 15px; border-bottom: 1px solid #c4c4c4; font-size: 25px;}
.plan .detail .txt .cmn_btn_y { width: 375px; margin: 35px 0 0 auto;}
.plan .detail .menu { width: 510px; padding: 35px 50px; background: #fbfaf6;}
.plan .detail .menu dt { font-size: 20px;}
.plan .detail .menu dd li { padding: 0 0 0 1em; text-indent: -1em;}
.plan .detail .menu dd li::before { content: '・';}

@media screen and (max-width: 600px) {
	.plan .detail{padding: 20px;}
	section { padding: 50px 0;}
	section .cmn_tit_h { margin-bottom: 30px;}
	section .sec_main.slick { padding-bottom: 30px;}

	.plan .cmn_tit_h { line-height: 1.6;}
	.plan .cmn_tit_h .note { font-size: 14px;}
	.plan .sec_main .ofi { min-height: 180px;}
	.plan .detail { display: block; margin-top: 20px;}
	.plan .detail .txt { width: auto;}
	.plan .detail .txt .cap { font-size: 18px;}
	.plan .detail .txt .cmn_btn_y { width: auto; margin: 20px 0 0;}
	.plan .detail .menu { width: auto; padding: 20px; margin: 30px 0 0;}
	.plan .detail .menu dt { font-size: 16px;}
}


/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01 .cmn_tit_h rt { font-size: 10px;}
#sec01 .sec_main .ofi { min-height: 650px;}
#sec01 .inner_xs { margin-top: 40px;}
#sec01 .inner_xs p+p { margin-top: 30px; }

@media screen and (max-width: 600px) {
	#sec01 .sec_main .ofi { min-height: 200px;}
	#sec01 .inner_xs { margin-top: 20px;}
	#sec01 .inner_xs p+p { margin-top: 20px; }
}


/* ---------------------------------------------------
sec02
------------------------------------------------------ */
#sec02 .sec_main .ofi { min-height: 455px;}
#sec02 .inner_xs { margin-top: 40px;}
#sec02 .cmn_btn { width: 470px; margin: 30px auto 0;}
#sec02 .cmn_btn .acc_tit img { margin: 0 8px 0 0;}
#sec02 .cmn_btn .acc_tit .view_open { display: none;}
#sec02 .cmn_btn .acc_tit.active img { transform: rotate(45deg);}
#sec02 .cmn_btn .acc_tit.active .view_close { display: none;}
#sec02 .cmn_btn .acc_tit.active .view_open { display: inline;}

@media screen and (max-width: 600px) {
	#sec02 .sec_main .ofi { min-height: 180px;}
	#sec02 .inner_xs { margin-top: 20px;}
	#sec02 .cmn_btn { width: 100%; margin-top: 20px;}
}

/* ---------------------------------------------------
sec04
------------------------------------------------------ */
#sec04 .detail { padding: 35px 45px;border: 1px solid #2f2f2f; border-radius: 6px;width: 1200px;margin-top: initial;}


/* ---------------------------------------------------
sec05
------------------------------------------------------ */
#sec05 { padding-bottom: 60px;}
#sec05 .items { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 95px;}
#sec05 .items li { width: 570px; max-width: calc((100% - 60px) / 2); margin: 0 0 40px;}
#sec05 .items li p { margin: 10px 0 0; font-size: 18px;}

@media screen and (max-width: 600px) {
	#sec05 { padding-bottom: 20px;}
	#sec05 .items { display: block; margin-top: 50px;}
	#sec05 .items li { width: auto; max-width: 100%; margin-bottom: 30px;}
	#sec05 .items li p { font-size: 16px;}
}


/* ---------------------------------------------------
sec06
------------------------------------------------------ */
#sec06 .txt { width: 360px; max-width: 30%; padding: 25px 0 0;}
#sec06 .cmn_tit_h { margin-bottom: 40px; text-align: center;}
#sec06 .img { width: 795px; max-width: 66.25%;}
#sec06 .img p { margin: 5px 0 0; font-size: 14px; text-align: right;}
#sec06>.inner_md{ margin: 0 auto; text-align: center;}
#sec06 .inner_sm { margin-top: 100px; padding: 35px 60px; border: 1px solid #2f2f2f; border-radius: 6px;}
#sec06 .inner_sm dt { padding: 0 0 10px; margin: 0 0 25px; position: relative; font-size: 25px; text-align: center;}
#sec06 .inner_sm dt::before { content: ''; width: 120px; height: 1px; position: absolute; bottom: 0; left: 50%; background: #2f2f2f; transform: translateX(-50%);}


@media screen and (max-width: 600px) {
	#sec06 { display: block;}
	#sec06 .img { width: auto; max-width: none;}
	#sec06 .img p { margin: 5px 0 0; font-size: 12px; text-align: right;}
	#sec06 .txt { width: auto; max-width: none; padding: 0 0 20px;}
	#sec06 .cmn_tit_h { margin-bottom: 15px;}
	#sec06>.inner_md{display: block;}
	#sec06 .inner_sm { margin-top: 30px; padding: 20px;}
	#sec06 .inner_sm dt { margin-bottom: 20px; font-size: 18px;}
	#sec06 .inner_sm dt::before { content: ''; width: 80px; height: 1px; position: absolute; bottom: 0; left: 50%; background: #2f2f2f; transform: translateX(-50%);}

}


/* ---------------------------------------------------
sec07
------------------------------------------------------ */
#sec07 .cmn_tit_h { margin-bottom: 10px;}
#sec07 .cmn_tit_h + p { margin-bottom: 40px; text-align: center;}
#sec07 .detail { border: solid 1px;display: flex; align-items: center; justify-content: space-between; padding: 50px; background: #fff; margin-bottom: 40px}
#sec07 .detail .img { flex-shrink: 0; width: 550px;}
#sec07 .detail .txt { width: 500px; max-width: calc(100% - 580px);}
#sec07 .detail .cap { margin: 0 0 20px; font-size: 25px; line-height: 1.6;}
#sec07 .detail .cap span { font-size: 20px;}
#sec07 .detail .attention { margin: 20px 0 0;}
#sec07 .detail dl.attention { display: flex; align-items: flex-start;}
#sec07 .detail dl.attention dt { flex-shrink: 0; padding: 0 10px; margin: 0 10px 0 0; background: #ce4c32; color: #fff;}

@media screen and (max-width: 600px) {
	#sec07 .cmn_tit_h + p { margin-bottom: 30px;}
	#sec07 .detail { display: block; padding: 20px;}
	#sec07 .detail + .detail { margin-top: 30px;}
	#sec07 .detail .img { width: auto;}
	#sec07 .detail .txt { width: auto; max-width: none; margin: 20px 0 0;}
	#sec07 .detail .cap { margin-bottom: 10px; font-size: 18px;}
	#sec07 .detail .cap span { font-size: 14px;}
	#sec07 .detail .attention { margin-top: 15px;}
}


/* ---------------------------------------------------
sec08
------------------------------------------------------ */
#sec08 h2 { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; font-size: 13px;}
#sec08 h2 .main { margin: 0 0 5px; font-size: 35px; writing-mode: vertical-rl;}
#sec08 h2 + p { margin-bottom: 40px; text-align: center;}

@media screen and (max-width: 600px) {
	#sec08 h2 { font-size: 12px;}
	#sec08 h2 .main { font-size: 22px;}
	#sec08 h2 + p { margin-bottom: 30px;}
}


/* ---------------------------------------------------
sec09
------------------------------------------------------ */
#sec09 .sec_main { display: flex;}
#sec09 .sec_main p { width: 50%; min-height: 558px;}
#sec09 .sec_main .ofi { height: 100%;}
#sec09 .inner_xs { width: 690px; margin-top: 50px;}

@media screen and (max-width: 600px) {
	#sec09 .sec_main p { min-height: 200px;}
	#sec09 .inner_xs { margin-top: 30px;}
}


/* ---------------------------------------------------
sec10 - dummy
------------------------------------------------------ */
#sec10 .flex_box { display: flex; max-width: 1600px; margin: 0 auto;}
#sec10 .img { width: 52.375%;}
#sec10 .img p + p { margin: 1px 0 0;}
#sec10 .img .ofi { width: 100%;}
#sec10 .txt { width: 47.625%; padding: 0 4% 0 95px;}
#sec10 .txt > div { display: flex; flex-direction: column; width: 460px; max-width: 100%; height: 100%;}
#sec10 .txt .cmn_table { margin: 0 0 30px;}
#sec10 .txt .cmn_table th { width: auto;}
#sec10 .txt .cmn_table td { width: 200px; text-align: right;}
#sec10 .txt .cmn_btn_y { margin: auto 0 0;}

@media screen and (max-width: 600px) {
	#sec10 .flex_box { display: block;}
	#sec10 .img { width: auto;}
	#sec10 .txt { width: 92%; padding: 0; margin: 20px auto 0;}
	#sec10 .txt > div { width: auto;}
	#sec10 .txt .cmn_table td { text-align: left;}
}

/* ---------------------------------------------------
sec11
------------------------------------------------------ */
#sec11 h2 { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; font-size: 13px;}
#sec11 h2 .main {margin: 0 0 5px;font-size: 35px;}
#sec11 h2 + p { margin-bottom: 40px; text-align: center;}

@media screen and (max-width: 600px) {
	#sec11 h2 { font-size: 12px;}
	#sec11 h2 .main { font-size: 22px;}
	#sec11 h2 + p { margin-bottom: 30px;}
}


/* ---------------------------------------------------
bnr_fuwariya
------------------------------------------------------ */
.bnr_fuwariya { display: block; width: 975px; margin: 80px auto 75px; position: relative; background: #000; line-height: 1.4; overflow: hidden;}
.bnr_fuwariya .ofi { width: 100%; height: 345px; transition: transform .7s, opacity .7s;}
.bnr_fuwariya div { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 0 0 0 95px; position: absolute; top: 0; left: 0; color: #fff;}
.bnr_fuwariya div .main { margin: 0 0 10px; font-size: 35px;}
.bnr_fuwariya div .main span { padding: 0 10px 0 30px; background: url(../img/icon_link_arrow_w.svg) no-repeat left center; background-size: auto 100%; font-size: 20px;}

@media screen and (hover: hover) {
	.bnr_fuwariya:hover { opacity: 1;}
	.bnr_fuwariya:hover .ofi { opacity: .7; transform: scale(1.03);}
}
@media screen and (max-width: 600px) {
	.bnr_fuwariya { width: 100%; margin: 0 auto 1px;}
	.bnr_fuwariya .ofi { height: auto; min-height: 220px;}
	.bnr_fuwariya div { padding-left: 4%;}
	.bnr_fuwariya div .main { padding-left: 25px; background: url(../img/icon_link_arrow_w.svg) no-repeat left calc((1.4em - 20px) / 2); background-size: 20px; font-size: 22px;}
	.bnr_fuwariya div .main span { padding: 0 5px 0 0; background: none; font-size: 16px;}
}