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

/* ---------------------------------------------------
	共通
------------------------------------------------------ */
section h3.tit {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-ms-align-items: center; align-items: center; justify-content: center;
	width: 100%; height: 500px; background: no-repeat center center;
	-webkit-background-size: cover; background-size: cover; color: #fff;
}
section h3.tit .eng { color: #fff;}

section .cnav {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: center; margin: 50px 0 10px;
}
section .cnav li { margin: 0 30px;}
section .cnav li a { padding: 0 0 25px; display: block; position: relative; font-size: 18px;}
section .cnav li a::after {
	content: ''; width: 26px; height: 26px; margin: 0 0 0 -13px;
	position: absolute; left: 50%; bottom: 0;
	background: url(../img/icon_arrow_b.svg) no-repeat center center;
	-webkit-background-size: 100% auto; background-size: 100% auto;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
}
section .cnav li a:hover { text-decoration: none;}
section .cnav li a:hover::after {
	-webkit-transform: rotate(90deg) translateX(3px);
	-ms-transform: rotate(90deg) translateX(3px);
	transform: rotate(90deg) translateX(3px);
}

section > div { padding: 60px 0 80px;}

section h4 { margin: 0 0 35px;}
section .inner { max-width: 96%; margin: 0 auto;}

section [class*='layout'] {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-ms-align-items: center; align-items: center;
	justify-content: space-between; width: 1400px;
}
section [class*='layout'] .image { width: 68.6%;}
section [class*='layout'] .detail { width: 31.4%; padding: 0 calc( (31.4% - 290px) / 2);}

section .layout1 {
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

section .caption { margin: 0 0 15px; font-size: 26px;}

@media screen and (max-width: 600px) {
	section h3.tit { height: 275px;}
	section h3.tit span { text-indent: 5px;}
	section h3.tit .eng { text-indent: 3px;}

	section .cnav { margin-top: 25px;}
	section .cnav li { margin: 0 10px;}
	section .cnav li a { font-size: 14px;}

	section > div { padding: 40px 0 50px;}

	section h4 { width: 92%; margin: 0 auto 20px;}
	section .inner { width: 92% !important;}

	section [class*='layout'] { display: block;}
	section [class*='layout'] .image,
	section [class*='layout'] .detail { width: 100%;}
	section [class*='layout'] .detail { padding: 0; margin: 15px 0 0;}

	section .caption { margin-bottom: 10px; font-size: 19px;}
}



/* ---------------------------------------------------
	sec1
------------------------------------------------------ */
#sec1 h3.tit { background-image: url(../../meal/img/sec1_tit_pc.jpg);}

/* sec1a */
#sec1a { padding-bottom: 100px;}
#sec1a .detail p:not(:last-child) { margin: 0 0 10px;}
#sec1a .detail li span { font-weight: bold;}
#sec1a .detail li span::before { content: '*';}
#sec1a .detail li span::after { content: '･･･'; font-weight: normal;}

/* sec1b */
#sec1b .inner {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: space-between; width: 1400px;
}
#sec1b .inner div { width: 48.6%;}
#sec1b .inner dl { padding: 0 6.6%; margin: 35px 0 0;}
#sec1b .inner dt { text-align: center;}
#sec1b .inner dd .btn { display: block; width: 280px; padding: 10px; margin: 20px auto 0;}

/* sec1c */
#sec1c .inner { width: 1100px; overflow: hidden;}
#sec1c .slick { height: 300px; overflow: hidden;}
#sec1c .slick.slick-initialized { height: auto;}
#sec1c .slick.slick-slider { width: 1140px; max-width: calc(100% + 40px); margin: 0 -20px 75px;}
#sec1c .slick-slide > div { margin: 0 20px;}
#sec1c .slick dl { margin: 10px 0 0; line-height: 1.6;}
#sec1c .slick dt { font-size: 18px;}

#sec1c .bnr_col { text-align: center;}

@media screen and (max-width: 600px) {
	#sec1 h3.tit { background-image: url(../../meal/img/sec1_tit_sp.jpg);}

	/* sec1a */
	#sec1a { padding-bottom: 50px;}
	#sec1a .detail { margin-top: 40px;}

	/* sec1b */
	#sec1b .inner { display: block;}
	#sec1b .inner div { width: 100%;}
	#sec1b .inner div:not(:last-child) { margin: 0 0 30px;}
	#sec1b .inner dl { padding: 0; margin-top: 15px;}
	#sec1b .inner dt { text-align: left;}
	#sec1b .inner dd .btn { width: 100%; margin-top: 15px;}

	/* sec1c */
	#sec1c .slick.slick-dotted.slick-slider { max-width: calc(100% + 20px); margin: 0 -10px 30px;}
	#sec1c .slick-slide > div { margin: 0 10px;}
	#sec1c .slick dt { font-size: 16px;}
	#sec1c .slick dd { font-size: 14px;}
}



/* ---------------------------------------------------
	sec2
------------------------------------------------------ */
#sec2 h3.tit { background-image: url(../../meal/img/sec2_tit_pc.jpg);}

#sec2 .detail .attention { margin: 15px 0 0; color: #cb503c;}
#sec2 .detail .attention li { margin: 0 0 3px;}
#sec2 .detail .attention li::before { content: '※';}
#sec2 .btn { display: block; padding: 10px; margin: 15px 0 0;}

/* sec2a */
#sec2a .image {
	display: -ms-grid; display: grid;
	-ms-grid-columns: 42.7% 57.3%;
	grid-template-columns: 42.7% 57.3%;
	-ms-grid-rows: auto auto;
	grid-template-rows: auto auto;
}
#sec2a .image p:last-child {
	-ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1 / 3;
	-ms-grid-column: 2; grid-column: 2;
}

/* IE11 */
#sec2a .image p:nth-child(2) { -ms-grid-row: 2; -ms-grid-column: 1;}


/* ---------------------------------------------------
	contact_col
------------------------------------------------------ */
.contact_col { padding: 50px 0 60px; text-align: center;}
.contact_col .caption { font-size: 18px;}
.contact_col .tel-link {
	display: inline-block; font-size: 30px; padding: 0 0 0 30px;
	background: url(../img/icon_tel_b.svg) no-repeat left center;
	-webkit-background-size: 35px auto; background-size: 35px auto;
}

@media screen and (max-width: 600px) {
	.contact_col { padding: 30px 4% 50px; font-size: 14px;}
	.contact_col .caption { font-size: 16px;}
	.contact_col .tel-link { font-size: 24px;}
}