@charset "UTF-8";

/* ==================================
 京都の加悦寿司
================================== */
.pane-contents:has(#kyo_kayasushi_intro) { overflow-x: hidden;}

#kyo_kayasushi_intro h2,
#kyo_kayasushi_intro h3,
#kyo_kayasushi_intro h4,
#kyo_kayasushi_intro div,
#kyo_kayasushi_intro p,
#kyo_kayasushi_intro span,
#kyo_kayasushi_intro dl,
#kyo_kayasushi_intro ul,
#kyo_kayasushi_intro li { padding: 0; margin: 0; border: none; line-height: 1.4; box-sizing: border-box;}
#kyo_kayasushi_intro .sec-inner { position: relative; z-index: 2;}

[data-browse-mode="P"] .for-sp { display: none;}
[data-browse-mode="S"] .for-pc { display: none;}

#kyo_kayasushi_intro { position: relative;}
#kyo_kayasushi_intro::before { 
	content: '';
	width: calc(100% + 20vw);
	display: block;
	background-color: transparent;
	background-image: url("bg.png");
	background-position: center;
	background-repeat: repeat;
	background-size: auto;
	position: absolute;
	top: 0;
	left: -10vw;
	bottom: 0;
	z-index: 1;
}
[data-browse-mode="S"] .block-goods-comment2:has(#kyo_kayasushi_intro) { margin: 0;}

@media screen and (min-width: 1200px) {
	[data-browse-mode="P"] #kyo_kayasushi_intro::before { width: calc(100vw + 100px); left: 50%; transform: translateX(-50%);}
}

#kyo_kayasushi_intro .head-design { margin: 0 0 50px; text-align: center;}
#kyo_kayasushi_intro .head-design .ttl-eng { margin: 0 0 15px; font-family: "EB Garamond", serif; font-size: 18px; font-weight: 600; text-align: center; color: #074D29;}
#kyo_kayasushi_intro .head-design .ttl-img { text-align: center;}
#kyo_kayasushi_intro .head-design .ttl-jp  { font-family: "Zen Old Mincho"; font-size: 30px; font-weight: 500; text-align: center; color: #000000;}

[data-browse-mode="P"] #kyo_kayasushi_intro .head-design { margin: 0 0 50px; text-align: center;}
[data-browse-mode="P"] #kyo_kayasushi_intro .head-design .ttl-eng { margin: 0 0 5px;}
[data-browse-mode="P"] #kyo_kayasushi_intro .head-design .ttl-jp { font-size: 44px;}

/* ----------------------------------
 ABOUT / お米をおいしいまま届けたい
---------------------------------- */
#kyo_kayasushi_intro #intro_about { padding: 50px 20px; position: relative;}
#kyo_kayasushi_intro #intro_about::before { 
	content: '';
  width: 100%;
	display: block;
	background-color: transparent;
	background-image: url("message_bg_sp.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 1;
}
#kyo_kayasushi_intro #intro_about .sec-inner { padding: 50px 20px; margin: 0 auto; background: rgba(255,255,255,0.9);}
#kyo_kayasushi_intro #intro_about .head-design { margin: 0 0 20px;}
#kyo_kayasushi_intro #intro_about .head-design .ttl-eng { margin: 0 auto 20px;}
#kyo_kayasushi_intro #intro_about .head-design .ttl-img { width: 230px; margin: 0 auto;}
#kyo_kayasushi_intro #intro_about .message-wrap { text-align: center;}
#kyo_kayasushi_intro #intro_about .message-wrap h3 { margin: 0 -20px 20px; font-family: "Zen Old Mincho"; font-size: 30px; font-weight: 500; text-align: center; line-height: 1.4;}
#kyo_kayasushi_intro #intro_about .message-wrap .message { font-size: 16px; text-align: left; line-height: 1.8;}

[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about { padding: 95px 25px 80px; margin: 0 -30px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about::before { background-image: url("message_bg_pc.jpg");}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about .sec-inner { width: 1100px; padding: 50px 90px; margin: 0 auto; background: rgba(255,255,255,0.9);}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about .head-design { margin: 0 0 40px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about .message-wrap .message { font-size: 18px; text-align: center; line-height: 2.0;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about .message-wrap h3 { margin: 0 0 40px; font-size: 44px; line-height: 1.2;}

@media screen and (min-width: 1200px) {
	[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about { margin: 0;}
	[data-browse-mode="P"] #kyo_kayasushi_intro #intro_about::before { width: calc(100vw + 100px); left: 50%; transform: translateX(-50%);}
}

/* ----------------------------------
 STRENGTH / お米のおいしさの秘訣
---------------------------------- */
#kyo_kayasushi_intro #intro_strength { padding: 60px 25px 80px; position: relative;}
#kyo_kayasushi_intro #intro_strength .strength-list li .image { margin: 0 auto 32px; text-align: center;}
#kyo_kayasushi_intro #intro_strength .strength-list li .image img { border-radius: 30px; vertical-align: top;}
#kyo_kayasushi_intro #intro_strength .strength-list li .name { margin: 0 0 20px; font-family: "Zen Old Mincho"; font-size: 28px; font-weight: 700; text-align: center;}
#kyo_kayasushi_intro #intro_strength .strength-list li .text { font-size: 16px; font-weight: 400; line-height: 1.8;}

[data-browse-mode="S"] #kyo_kayasushi_intro #intro_strength::before { 
	content: '';
	width: 50vw;
	height: 50vw;
	display: block;
	background-color: transparent;
	background-image: url("hiketu_desing01.png");
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: -10px;
	z-index: 1;
}
[data-browse-mode="S"] #kyo_kayasushi_intro #intro_strength .strength-list li + li { margin-top: 50px;}

[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength { padding: 170px 0 140px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength::before { 
	content: '';
	width: 546px;
	height: 468px;
	display: block;
	background-color: transparent;
	background-image: url("hiketu_desing01.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 100px;
	left: -300px;
	z-index: 1;
}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength::after { 
	content: '';
	width: 572px;
	height: 434px;
	display: block;
	background-color: transparent;
	background-image: url("hiketu_desing02.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	right: -300px;
	bottom: 80px;
	z-index: 1;
}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength .strength-list { display: flex; justify-content: space-between; gap: 80px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength .strength-list li { width: calc((100% - 80px * 2)/3);}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength .strength-list li .image { margin: 0 0 40px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength .strength-list li .name { font-size: 30px; font-weight: 500;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_strength .strength-list li .text { font-size: 18px;}

/* ----------------------------------
 PRODUCT / 商品説明
---------------------------------- */
#kyo_kayasushi_intro #intro_product { padding: 50px 20px; position: relative;}
#kyo_kayasushi_intro #intro_product::before { 
	content: '';
  width: calc(100% + 20vw);
	display: block;
	background: rgba(159, 87, 0, 0.1255);
	position: absolute;
	top: 0;
	left: -10vw;
	bottom: 0;
	z-index: 1;
}
@media screen and (min-width: 1200px) {
	[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product::before { width: calc(100vw + 100px); left: 50%; transform: translateX(-50%);}
}

#kyo_kayasushi_intro #intro_product .sec-inner .frame-box { position: relative; z-index: 2;}
#kyo_kayasushi_intro #intro_product .frame-desc { margin: 0 0 20px;}
#kyo_kayasushi_intro #intro_product .frame-desc .head-design { margin: 0 0 20px;}
#kyo_kayasushi_intro #intro_product .frame-desc .head-design .ttl-jp { font-weight: 400;}
#kyo_kayasushi_intro #intro_product .frame-desc .text { padding: 20px 0 0; border-top: #FFF 2px solid; font-size: 16px; line-height: 1.6;}
#kyo_kayasushi_intro #intro_product .frame-image { width: 100%;}
#kyo_kayasushi_intro #intro_product .frame-image img { width: 100%;}

[data-browse-mode="S"] #kyo_kayasushi_intro #intro_product .sec-inner::before,
[data-browse-mode="S"] #kyo_kayasushi_intro #intro_product .sec-inner::after { 
	content: '';
	width: 80vw;
	height: 40vw;
	display: block;
	background-color: transparent;
	background-image: url("product_desing01.png");
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	z-index: 1;
}
[data-browse-mode="S"] #kyo_kayasushi_intro #intro_product .sec-inner::before { top: -30px; left: -40vw;}
[data-browse-mode="S"] #kyo_kayasushi_intro #intro_product .sec-inner::after  { top: 200px; left: 40vw;}

[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product { padding: 70px 0;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .sec-inner::before,
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .sec-inner::after {
	content: '';
	width: 716px;
	height: 278px;
	display: block;
	background-color: transparent;
	background-image: url("product_desing01.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 1;
}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .sec-inner::before { top: -10px; left: -340px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .sec-inner::after  { right: -630px; bottom: -40px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-box { display: flex; justify-content: space-between; align-items: center;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-desc { width: calc(50% - 60px); margin: 0;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-desc .head-design { margin: 0 0 30px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-desc .head-design .ttl-eng { text-align: left;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-desc .head-design .ttl-jp  { text-align: left;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-desc .text { padding: 30px 0 0; font-size: 18px; line-height: 1.8;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_product .frame-image { width: 50%;}

/* ----------------------------------
 栄養成分・特定原材料等
---------------------------------- */
#kyo_kayasushi_intro #intro_detail { padding: 40px 15px; position: relative;}
#kyo_kayasushi_intro #intro_detail .sec-inner { max-width: 1000px; margin: 0 auto;}
#kyo_kayasushi_intro #intro_detail .table-frame { margin: 0 0 25px;}
#kyo_kayasushi_intro #intro_detail .table-frame dl + dl { margin-top: 2px;}
#kyo_kayasushi_intro #intro_detail .table-frame dl { width: 100%; display: flex; justify-content: space-between; gap: 2px;}
#kyo_kayasushi_intro #intro_detail .table-frame dl dt { width: calc(40% - 2px); padding: 10px 15px; font-size: 16px; display: flex; align-items: center; background: #DFE6E2;}
#kyo_kayasushi_intro #intro_detail .table-frame dl dd { width: 60%; padding: 10px 15px; font-size: 16px; background: #FFF;}
#kyo_kayasushi_intro #intro_detail .notice-list li { font-size: 14px;}
#kyo_kayasushi_intro #intro_detail .notice-list li.indent { padding: 0 0 0 1em; text-indent: -1em;}
#kyo_kayasushi_intro #intro_detail .notice-list li + li { margin-top: 5px;}

[data-browse-mode="P"] #kyo_kayasushi_intro #intro_detail { padding: 100px 0; position: relative;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_detail .table-frame { margin: 0 0 30px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_detail .table-frame dl dt { width: calc(40% - 2px); padding: 15px 30px; font-size: 18px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_detail .table-frame dl dd { width: 60%; padding: 15px 30px; font-size: 18px;}
[data-browse-mode="P"] #kyo_kayasushi_intro #intro_detail .notice-list li + li { margin-top: 10px;}