@charset "utf-8";
/* ===================================================
	cuisine CSS
====================================================== */
.cmn_lead .tit .color{ color: #468bd1;}

/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01 {
	padding-bottom: 100px;
	position: relative; z-index: 0;
}
#sec01::before {
	content: ""; width: 100%; height: 422px; 
	position: absolute; left: 0; bottom: 0; z-index: -1;
	background: #2f4858 url(../../cuisine/img/sec01_bg.jpg) no-repeat center bottom;
}

#sec01 .photo_col{
	display: grid;
	grid-template-columns: 35.4% 32.3% 32.3%;
	grid-template-rows: 400px 300px;
}
#sec01 .photo_col li:first-child{
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
#sec01 .photo_col li:nth-child(2){
	grid-column: 2 / 4;
	grid-row: 1 / 2;
}
#sec01 .photo_col li:nth-child(3){
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
#sec01 .photo_col li:last-child{
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

#sec01 .photo_col img{ height: 100%;}

@media screen and (max-width:600px) {
	#sec01{ padding-bottom: 10vw;}
	#sec01::before { height: 50vw;}
	#sec01 .photo_col{
		max-width: 92%;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto auto;
	}
	#sec01 .photo_col li:first-child{
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	#sec01 .photo_col li:nth-child(2){
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	#sec01 .photo_col li:nth-child(3){
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	#sec01 .photo_col li:last-child{
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
}


/* ---------------------------------------------------
sec02
------------------------------------------------------ */
#sec02{ padding-bottom: 80px; background: url(../img/bg.jpg);}
#sec02 h2{ margin-bottom: 80px; padding-top: 100px; position: relative;}
#sec02 h2::before{
	display: block; content: ''; width: 5px; height: 80px;
	top: 0; left: calc( 50% - 2.5px); position: absolute;
	background: url(../../cuisine/img/tit_bg.jpg) no-repeat;
}

.sec02_01{
	margin-bottom: 80px;
	display: flex; justify-content: space-between; flex-direction: row-reverse;
}
.sec02_01 .txt_block{ width: 300px;}
.sec02_01 .txt_block h3{
	margin-bottom: 35px; width: 300px; height: 302px; position: relative;
	display: flex; justify-content: center; align-items: center;
}
.sec02_01 .txt_block h3::before{ 
	display: block; content: ''; width: 300px; height: 302px;
	top: 0; left: 0; position: absolute;
	background: url(../../cuisine/img/tit_bg01.png) no-repeat;
}
.sec02_01 .txt_block h3 span{
	position: relative; z-index: 1;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0;
}

.sec02_01 .photo_block{ width: calc(94% - 300px); height: 600px;}
.sec02_01 .photo_block img{ height: 100%;}

.sec02_plan{
	background: #fff;
	display: flex; justify-content: space-between;
	box-shadow: 0px 0px 50px 0px rgba(80,80,80,0.25)
}

.sec02_plan dl{ padding: 55px 45px; width: 500px; box-sizing: border-box;}
.sec02_plan dt{ margin-bottom: 30px; font-size: 30px;}
.sec02_plan dt span{
	display: block; margin-bottom: 15px;
	color: #478a69; font-size: 20px; line-height: 1.4;
}
.sec02_plan .photo_block{ width: 600px; min-height: 400px;}
.sec02_plan .photo_block img{ height: 100%;}

.sec02_02{ margin-bottom: 80px;}
.sec02_03{ flex-direction: row-reverse;}

@media screen and (max-width: 600px) {
	#sec02{ padding-bottom: 10vw;}
	#sec02 h2{ margin-bottom: 5vw; padding-top: 11vw;}
	#sec02 h2::before{ height: 10vw; background-size: contain;}

	.sec02_01{
		margin: 0 auto 10vw; max-width: 100%;
		flex-direction: column;
	}
	.sec02_01 .txt_block{ margin: 0 auto 10vw; width: 92%;}
	.sec02_01 .txt_block h3{ margin-bottom: 0; width: 100%; height: 50vw;}
	.sec02_01 .txt_block h3::before{ 
		width: 100%; height: 100%;
		background-position: center center;
		background-size: contain;
	}
	.sec02_01 .txt_block h3 span{
		writing-mode: horizontal-tb; font-feature-settings: 'palt';
	}
	.sec02_01 .txt_block p{ margin-top: -12vw; position: relative; z-index: 1;}
	.sec02_01 .photo_block{ width: 100%; height: auto;}
	.sec02_plan{ flex-direction: column; max-width: 100%;}
	.sec02_plan dl{ padding: 7vw 4vw; width: 100%;}
	.sec02_plan dt{ margin-bottom: 5vw; font-size: 24px; text-align: center;}
	.sec02_plan dt span{ margin: 0 auto; font-size: 18px;}
	.sec02_plan .photo_block{ width: 100%; min-height: 0;}
	.sec02_02{ margin-bottom: 10vw;}
	.sec02_03{ flex-direction: column;}
}


/* ---------------------------------------------------
sec03
------------------------------------------------------ */
#sec03{ padding: 50px 0 100px;}

.sec03_01{
	margin-bottom: 50px;
	display: flex; justify-content: space-between;
	flex-direction: row-reverse; align-items: flex-end;
}
.sec03_01 .txt_block{ width: 300px;}
.sec03_01 .txt_block h3{
	margin-bottom: 35px; width: 300px; height: 302px; position: relative;
	display: flex; justify-content: center; align-items: center; text-align: left;
}
.sec03_01 .txt_block h3::before{ 
	display: block; content: ''; width: 300px; height: 302px;
	top: 0; left: 0; position: absolute;
	background: url(../../cuisine/img/tit_bg02.png) no-repeat;
}
.sec03_01 .txt_block h3 span{
	position: relative; z-index: 1;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0;
}
.sec03_01 .txt_block h3 span span{ display: block; font-size: 40px;}

.sec03_01 .txt_block .border_box{
	margin-bottom: 50px; padding: 20px; color: #2e64ae; font-size: 30px;
	text-align: center; line-height: 1.4; border: 1px solid #2e64ae;
}
.sec03_01 .txt_block .border_box span{ display: block; font-size: 16px;}

.sec03_01 .photo_block{ width: calc(94% - 300px); height: 600px;}
.sec03_01 .photo_block img{ height: 100%;}

.sec03_photo{ display: flex; justify-content: space-between;}
.sec03_photo li {height: 360px;}
.sec03_photo li:first-of-type{ width: 47.7%; max-width: 620px;}
.sec03_photo li:not(:first-of-type){ width: 25.4%; max-width: 330px;}
.sec03_photo li img{ height: 100%;}

@media screen and (max-width: 600px) {
	#sec03{ padding: 10vw 0;}

	.sec03_01{
		margin-bottom: 0.5vw; max-width: 100%;
		flex-direction: column;
	}
	.sec03_01 .txt_block{ margin: 0 auto 10vw; width: 92%;}
	.sec03_01 .txt_block h3{ margin-bottom: 0; width: 100%; height: 50vw;}
	.sec03_01 .txt_block h3::before{ 
		width: 100%; height: 100%;
		background-position: center center;
		background-size: contain;
	}
	.sec03_01 .txt_block h3 span{
		writing-mode: horizontal-tb; font-feature-settings: 'palt';
	}
	.sec03_01 .txt_block h3 span span{ font-size: 22px; text-align: center;}

	.sec03_01 .txt_block .border_box{
		margin: -3vw 0 7vw; padding: 4vw;
		font-size: 20px; background: #fff;
		position: relative; z-index: 1;
	}
	.sec03_01 .txt_block .border_box span{ display: block; font-size: 16px;}
	.sec03_01 .photo_block{ width: 100%; height: auto;}
	.sec03_photo{ max-width: 100%;}
	.sec03_photo li { height: 27.5vw;}
}


/* ---------------------------------------------------
sec04
------------------------------------------------------ */
#sec04{ padding: 83px 0; background: url(../img/bg.jpg);}

#sec04 .top_item{
	margin-bottom: 50px;
	display: flex; justify-content: space-between;
	background-color: rgba(203,131,119,0.3);
	position: relative;
}
#sec04 .top_item h3{
	width: 100px; height: 350px;
	left: -30px; top: -23px; position: absolute;
	display: flex; justify-content: center;
	background: #fff;
}
#sec04 .top_item h3::before{
	display: block; width: 5px; height: 20px; content: '';
	top: 0; left: calc(50% - 2.5px); position: absolute;
	background: #cf8377;
}
#sec04 .top_item h3 span{
	padding-top: 40px; font-size: 30px;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0;
}
#sec04 .top_item .photo{ width: 600px; min-height: 400px;}
#sec04 .top_item .photo img{ height: 100%;}
#sec04 .top_item .txt{ 
	padding: 45px 5% 40px; width: calc(100% - 600px);
	box-sizing: border-box;
}
#sec04 .top_item .txt .tit{ 
	margin-bottom: 40px;
	color: #be5a4a; font-size: 24px; text-align: center;
	display: flex; justify-content: center; align-items: center;
	flex-direction: column;
}
#sec04 .top_item .txt .tit span:first-of-type{
	margin-bottom: 25px; padding: 10px 30px; font-size: 20px;
	background: #f8e4e1; border: 1px solid #be5a4a;
}

#sec04 .flex_col{ display: flex; justify-content: space-between;}
#sec04 .item{ width: 30.7%; max-width: 400px; min-height: 600px; position: relative;}
#sec04 .item h3{
	width: 100px; height: 280px; background: #fff;
	left: -20px; top: 190px; position: absolute;
	display: flex; justify-content: center;
}
#sec04 .item h3::before{
	display: block; width: 5px; height: 20px; content: '';
	top: 0; left: calc(50% - 2.5px); position: absolute;
}

#sec04 .item:first-of-type h3::before{ background: #2e64ae;}
#sec04 .item:nth-of-type(2) h3::before{ background: #71a68c;}
#sec04 .item:last-of-type h3::before{ background: #50478a;}

#sec04 .item h3 span{
	padding-top: 40px; font-size: 30px;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0;
}
#sec04 .item .photo{ width: 100%; height: 340px;}
#sec04 .item .photo img{ height: 100%;}
#sec04 .item .txt{ margin: 30px 12% 30px 30%;}
#sec04 .item .txt p{ margin-bottom: 20px;}

#sec04 .item .txt p a{
	padding-bottom: 7px;
	border-bottom: 1px solid #2f4858; transition: all .5s;
}
#sec04 .item .txt p a:after{
	display: inline-block; content: ''; margin-left: 15px; width: 6px; height: 12px;
	background: url(../../cuisine/img/icon_arrow.svg) no-repeat;
	background-size: 6px 12px;
}
#sec04 .item .txt p a:hover{ opacity: 1; border-bottom: none;}

#sec04 .item:first-of-type{ background-color: rgba(46,100,174,0.3);}
#sec04 .item:nth-of-type(2){ background-color: rgba(71,138,105,0.3);}
#sec04 .item:last-of-type{ background-color: rgba(80,71,138,0.3);}

@media screen and (max-width: 600px) {
	#sec04{ padding: 18vw 0 0;}

	#sec04 .top_item{ margin-bottom: 0; flex-direction: column;}
	#sec04 .top_item h3{
		margin: 0 auto; width: 68%; height: auto; padding: 5vw 5vw 3vw;
		top: -8vw; left: calc( 50% - 34%); box-sizing: border-box;
	}
	#sec04 .top_item h3 span{
		padding-top: 0; font-size: 24px;
		writing-mode: horizontal-tb; font-feature-settings: 'palt';
	}
	#sec04 .top_item .photo{ width: 100%; height: 70vw; min-height: 0;}

	#sec04 .top_item .txt{ padding: 5vw 5vw 7vw; width: 100%;}
	#sec04 .top_item .txt .tit{ 
		margin-bottom: 5vw;
		color: #be5a4a; font-size: 20px; text-align: left;
	}
	#sec04 .top_item .txt .tit span:first-of-type{
		margin-bottom: 3vw; padding: 1vw 3vw; font-size: 18px;
	}
	#sec04 .top_item .txt p:not(.tit){ font-size: 15px;}
	
	#sec04 .flex_col{ padding-top: 15vw; flex-direction: column;}
	#sec04 .item{ margin: 0 auto 15vw; width: 90%; min-height: 0;}
	
	#sec04 .item h3{
		margin: 0 auto; width: 68%; height: auto; padding: 5vw 5vw 3vw;
		display: flex; box-sizing: border-box;
		top: -8vw; left: calc( 50% - 34%);
	}
	#sec04 .item h3 span{
		padding-top: 0; font-size: 24px;
		writing-mode: horizontal-tb; font-feature-settings: 'palt';
	}
	#sec04 .item .photo{ height: 70vw;}
	#sec04 .item .txt{ margin: 5vw 5vw 7vw;}
	#sec04 .item .txt p{ margin-bottom: 5vw; font-size: 15px;}
	#sec04 .item .txt p.more{ text-align: right;}
}


/* ---------------------------------------------------
sec05
------------------------------------------------------ */
#sec05{
	padding: 100px 0;
	display: flex; justify-content: space-between;
}

#sec05 .txt_block{ padding: 0 50px; width: 400px;}

#sec05 .txt_block h2{
	margin-bottom: 55px; position: relative;
	display: flex; justify-content: center;
}
#sec05 .txt_block h2::before{
	display: block; width: 2px; height: 20px; content: '';
	top: 0; left: calc(50% - 1px); position: absolute;
	background: #71a68c;
}
#sec05 .txt_block h2 span{
	padding-top: 40px;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0;
}

#sec05 .photo_block{ width: calc(100% - 400px); height: 450px;}
#sec05 .photo_block img{ height: 100%;}

@media screen and (max-width: 600px) {
	#sec05{
		padding: 10vw 0 15vw;
		flex-direction: column;
	}
	#sec05 .txt_block{ margin-bottom: 5vw; padding: 0; width: 100%;}
	#sec05 .txt_block h2{ margin-bottom: 5vw;}
	#sec05 .txt_block h2 span{
		padding-top: 5vw;
		writing-mode: horizontal-tb; font-feature-settings: 'palt';
	}
	#sec05 .photo_block{ width: 100%; height: auto;}
}