@charset "UTF-8";

/* CSS Document */

/* ---------------------------------------------------
	Section Lead
------------------------------------------------------ */
.cmn_sec_lead .txt_01 { letter-spacing: 0.1em; }

@media screen and (max-width: 600px) {
}



/* ---------------------------------------------------
	Section 01
------------------------------------------------------ */
#sec01 {
	color: #e8e8e8; padding: 180px 0; letter-spacing: 0.15em;
	position: relative; width: 100%; overflow: hidden; margin: 0 auto; background: url("/img/ja/cuisine/sec01_bg01.webp") no-repeat center top/cover,#050505; background-attachment: scroll;
}
#sec01 .tit01 { font-size: 28px; line-height: 1.8; margin-bottom: 60px; }
#sec01 .txt01 { line-height: 2.1; }
#sec01 .txt01 + .txt01 { margin-top: 2em;}

@media screen and (max-width: 1500px) {
	#sec01 { background-size: 1500px auto; }
}

@media screen and (max-width: 600px) {
	#sec01 { padding: 80px 0; background-image: url("/img/ja/cuisine/sec01_bg01_sp.webp"); background-size: auto calc(100% + 300px); }
	#sec01 .tit01 { font-size: 20px; margin-bottom: 30px; }
	#sec01 .txt01 + .txt01 { margin-top: 1.5em;}
}



/* ---------------------------------------------------
	Section 02
------------------------------------------------------ */
#sec02 { padding-bottom: 30px; }
#sec02 .flex_box { display: flex; }
#sec02 .flex_box .photo:nth-child(1) { width: 63.33%; }
#sec02 .flex_box .photo:nth-child(2) { width: 36.67%;}
#sec02 .inner_lg { width: 90%; padding: 70px 0; display: flex; justify-content: space-between; }
#sec02 .inner_lg .photo_col { width: 49.2%; }
#sec02 .inner_lg .txt_col { width: 45.8%; padding: 25px 3.8% 0 0; letter-spacing: 0.15em; }
#sec02 .inner_lg .txt_col .tit01 { font-size: 24px; line-height: 1.8; margin-bottom: 25px; }
#sec02 .inner_lg .txt_col .txt01 { line-height: 2.1;}
#sec02 .inner_lg .txt_col .txt01 + .txt01 { margin-top: 2em;}
#sec02 .ticker,
#sec02 .ticker ul { display: flex !important; gap: 10px; }
#sec02 .ticker { position: relative; z-index: 0; width: 100%; overflow: hidden; }
#sec02 .ticker ul { backface-visibility: hidden; will-change: transform; }
#sec02 .ticker ul:first-child { animation: loop 160s -80s linear infinite; }
#sec02 .ticker ul:last-child { animation: loop2 160s linear infinite; }
#sec02 .ticker ul li { width: 400px; }

@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-200%);
	}
}

@media screen and (max-width: 600px) {
	#sec02 { padding-bottom: 15px; }
	#sec02 .inner_lg { padding: 50px 0; flex-direction: column-reverse; }
	#sec02 .inner_lg .photo_col { width: 100%; margin-top: 30px; }
	#sec02 .inner_lg .txt_col { width: 100%; padding: 0; }
	#sec02 .inner_lg .txt_col .tit01 { font-size: 20px; margin-bottom: 25px; }
	#sec02 .inner_lg .txt_col .txt01 { line-height: 1.8;}
	#sec02 .inner_lg .txt_col .txt01 + .txt01 { margin-top: 1em;}
	#sec02 .ticker,
	#sec02 .ticker ul { gap: 5px; }
	#sec02 .ticker ul li { position: relative; z-index: 0; width: 40vw; }

}



/* ---------------------------------------------------
	Section 03
------------------------------------------------------ */
#sec03 { color: #eee; padding: 190px 0 235px; letter-spacing: 0.2em; position: relative; }
#sec03::before { content: ''; position: absolute; inset: 0; background: url("/img/ja/cuisine/sec03_bg01.webp") no-repeat center center/cover; background-attachment: fixed; z-index: -1; }
#sec03 .inner { width: 600px; margin: 0 auto;}
#sec03 .tit01 { font-size: 30px; line-height: 1.7; margin-bottom: 45px; }
#sec03 .txt01 { line-height: 2.1;}
#sec03 .txt01 + .txt01 { margin-top: 3em;}

@media screen and (max-width: 600px) {
#sec03 { padding: 100px 0 120px; letter-spacing: 0.15em; }
#sec03::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-attachment: scroll!important; background-image: url("/img/ja/cuisine/sec03_bg01_sp.webp"); }
#sec03 .inner { width: 70%; }
#sec03 .tit01 { font-size: 20px; margin-bottom: 30px; }
#sec03 .txt01 { line-height: 1.8;}
#sec03 .txt01 + .txt01 { margin-top: 1.5em;}
}



/* ---------------------------------------------------
	Section 04
------------------------------------------------------ */
#sec04 { color: #d4d1ca; padding: 70px 0 15px; background: url("/img/ja/cuisine/sec04_bg01.jpg"); letter-spacing: 0.15em; counter-reset: number 0; }
#sec04 .cmn_tit_01 + p { text-align: center; margin-bottom: 95px; }
#sec04 .inner { width: 84%; max-width: 800px; margin: 0 auto; }
#sec04 .sec04_layout { padding-bottom: 70px; }
#sec04 .sec04_layout + .sec04_layout { padding-top: 60px; border-image: linear-gradient(180deg,#575551 1px, transparent 0) fill 0//0 100vw; }
#sec04 .sec04_layout .tit_col { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
#sec04 .sec04_layout .tit_col .tit01 { font-size: 26px; }
#sec04 .sec04_layout .tit_col .tit01 .price { display: flex; align-items: center; gap: 15px; font-size: 20px; margin-top: 5px; }
#sec04 .sec04_layout .tit_col .tit01 .price span { font-size: 16px; }
#sec04 .sec04_layout .tit_col .ranking { flex-shrink: 0; width: 72px; height: 72px; align-content: center; text-align: center; line-height: 1; border-radius: 50%; background: #000; color: #c9ab84; }
#sec04 .sec04_layout.no2 .tit_col .ranking { color: #000; background: #ae9368; }
#sec04 .sec04_layout .tit_col .ranking .num span { font-size: 24px; }
#sec04 .sec04_layout .txt01 { line-height: 2.1; }
#sec04 .sec04_layout .list_abc { margin-top: 25px; color: #d4c7a6; }
#sec04 .sec04_layout .list_abc li + li { margin-top: 5px; }
#sec04 .sec04_layout .list_abc li::before { counter-increment: number 1; content: '【'counter(number, upper-alpha)'】 ';  }
#sec04 .sec04_layout .photo_col { margin-top: 45px; display: flex; }
#sec04 .sec04_layout .photo_col:has(:nth-child(3)) { display: grid; grid-auto-columns: 1fr 1fr; grid-template-rows: repeat(2, 240px); }
#sec04 .sec04_layout .photo_col:has(:nth-child(3)) div:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
#sec04 .sec04_layout .photo_col:has(:nth-child(3)) div:nth-child(2) { grid-column: 2; grid-row: 1 / 2; }
#sec04 .sec04_layout .photo_col:has(:nth-child(3)) div:nth-child(3) { grid-column: 2; grid-row: 2 / 3; }

@media screen and (max-width: 600px) {
#sec04 { padding: 60px 0 5px; }
#sec04 .cmn_tit_01 + p { text-align: left; margin-bottom: 60px; }
#sec04 .sec04_layout { padding-bottom: 35px; }
#sec04 .sec04_layout + .sec04_layout { padding-top: 30px; }
#sec04 .sec04_layout .tit_col { gap: 10px; margin-bottom: 15px; }
#sec04 .sec04_layout .tit_col .tit01 { font-size: 20px; }
#sec04 .sec04_layout .tit_col .tit01 .price { gap: 10px; font-size: 17px; margin-top: 5px; }
#sec04 .sec04_layout .tit_col .tit01 .price span { font-size: 15px; }
#sec04 .sec04_layout .tit_col .ranking { font-size: 14px; width: 65px; height: 65px; }
#sec04 .sec04_layout .tit_col .ranking .num span { font-size: 20px; }
#sec04 .sec04_layout .txt01 { line-height: 1.8; }
#sec04 .sec04_layout .list_abc li + li { margin-top: 10px; }
#sec04 .sec04_layout .photo_col { margin-top: 25px; }
#sec04 .sec04_layout .photo_col:has(:nth-child(3)) { grid-template-rows: repeat(2, 22vw); }
}



/* ---------------------------------------------------
	Section 05
------------------------------------------------------ */
#sec05 { color: #d4d1ca; padding: 100px 0 110px; background: url("/img/ja/cuisine/sec05_bg01.webp") no-repeat top center/cover , #000; letter-spacing: 0.18em; }
#sec05 .inner { max-width: 1290px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; }
#sec05 .inner .txt_col { width: 490px; padding: 0 0 20px 6.6%; line-height: 1.7; }
#sec05 .inner .txt_col .logo { margin-bottom: 45px;}
#sec05 .inner .txt_col .tit01 { font-size: 24px; margin-bottom: 25px; }
#sec05 .inner .txt_col .txt01 { margin-bottom: 30px; }
#sec05 .inner .photo_col { width: 600px; }

@media screen and (max-width: 600px) {
#sec05 { padding: 60px 0 50px; letter-spacing: 0.15em; background-image: url("/img/ja/cuisine/sec05_bg01_sp.webp"); background-size: 100vw auto; background-position: top right; }
#sec05 .inner { width: 80%; flex-direction: column; }
#sec05 .inner .txt_col { width: 100%; padding: 0 0 35px; }
#sec05 .inner .txt_col .logo { margin-bottom: 35px; text-align: center; }
#sec05 .inner .txt_col .logo img { width: min(230px, 50vw); height: auto; }
#sec05 .inner .txt_col .tit01 { font-size: 20px; margin-bottom: 15px; }
#sec05 .inner .txt_col .txt01 { margin-bottom: 10px; }
#sec05 .inner .photo_col { width: 100%; }
}


/* ---------------------------------------------------
	Section 06
------------------------------------------------------ */
#sec06 { letter-spacing: 0.18em; padding: 95px 0 120px; }
#sec06 .inner { max-width: 980px; width: 84%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
#sec06 .inner .txt_col { width: 49%; padding-top: 10px; }
#sec06 .inner .txt_col .tit01 { font-size: 24px; margin-bottom: 25px; line-height: 1.7; }
#sec06 .inner .txt_col .txt01 { line-height: 2.1;}
#sec06 .inner .txt_col .txt02 { margin-top: 1em; text-align: right; }
#sec06 .inner .photo_col { width: 45.7%; }

@media screen and (max-width: 600px) {
#sec06 { letter-spacing: 0.15em; padding: 45px 0 50px; }
#sec06 .inner { flex-direction: column; }
#sec06 .inner .txt_col { width: 100%; padding-top: 10px; }
#sec06 .inner .txt_col .tit01 { font-size: 20px; margin-bottom: 15px; }
#sec06 .inner .txt_col .txt01 { line-height: 1.8;}
#sec06 .inner .photo_col { width: 100%; margin-top: 35px; }
}


/* ---------------------------------------------------
	Section 07
------------------------------------------------------ */
#sec07 { padding: 100px 0 135px; background: #f9f8f7; }
#sec07 .inner { max-width: 1000px; }
#sec07 .inner .txt01 { line-height: 2.1; letter-spacing: 0.15em; }
#sec07 .inner .photo { margin-bottom: 35px; }

@media screen and (max-width: 600px) {
	#sec07 { padding: 50px 0 65px; }
	#sec07 .inner { width: 84%; }
	#sec07 .inner .txt01 { line-height: 1.8; letter-spacing: 0.1em; }
	#sec07 .inner .photo { margin-bottom: 25px; }

}



/* ---------------------------------------------------
	Section Information
------------------------------------------------------ */
.sec_info{ position: relative; padding: 0 0 100px; }
.sec_info::before{ content: ""; display: block; width: 1px; height: 120px; background: #c1b8af; position: absolute; top: -60px; left: 50%;}
.sec_info .tit{ font-size: 26px; line-height: 1; color: #9c937d; letter-spacing: 0.3em; text-align: center; padding: 100px 0 50px;}
.sec_info .box_data{ width: 1000px; margin: 0 auto;}
.sec_info .cmn_table_01 div{ flex-direction: column; }
.sec_info .cmn_table_01 div dt { width: 100%; font-size: 20px; }
.sec_info .cmn_table_01 div dd { width: 100%; padding-top: 0; }
@media screen and (max-width: 600px) {
.sec_info{ padding: 0 0 50px;}
.sec_info::before{ height: 60px; top: -30px; left: 50%;}
.sec_info .tit{ font-size: 22px; padding: 50px 0 20px;}
.sec_info .box_data{ width: 90%; margin: 0 auto;}
.sec_info .cmn_table_01 div dt { font-size: 16px; }
}