@charset "utf-8";
/*===============================
0004_product_detail_W2toJAL.css
採取更新 20260402
===============================*/

:root {
	--mincho: "Shippori Mincho", serif;
	--basecolor: #8A0068;
	--subBtnBgTx: #0099cc;
	--subBtnBg: #fff;
	--fsize3L: 30px;
	--fsize2L: 24px;
	--fsizeL: 20px;
	--fsizeM: 16px;
	--fsizeD: 14px;
	--fsizeS: 12px;
	--main-width: 1200px;
	--slim-width: 1000px;
	--wide-width: 100%;
	--marginS: 12px 0;
	--marginM: 20px 0;
	--marginL: 24px 0;
	--black: #333;
	--lightGray: #f8f8f8;
	--Accolor: #222;
	--saleccolor: #0099cc;
	--normalBtnwidth: 340px;
	--nextBtnColor: #333;
	--borderBtnColor: #fff;
	--mb_normal: 12px;
	--mb_large: 20px;
	--mb_short: 12px;
	--mb_mini: 8px;
	--padLL: 60px;
	--box-pad-ss: 16px;
	--box-pad-m: 32px;
	--box-pad-s: 20px;
}





/*==============================================================================================
 商品ページ　商品詳細説明1
==============================================================================================*/

/*　JAL用　*/
.W2toJAL p{ line-height: 1.7;}
.W2toJAL .cite { background: #f8f8f8; padding: 20px;}
html[data-browse-mode="S"] .W2toJAL .cite { padding: 10px;}

/*　共通　*/
.W2toJAL .setumei { margin-bottom: 1em; font-size: 1.2em; font-weight: bold; color: blue;}
.W2toJAL .f-red, .f_red { color: #cc0000;}
.W2toJAL .f-purple { color: var(--basecolor);}
.W2toJAL .f-sizeS { font-size: var(--fsizeS); /*12px*/}
.W2toJAL .f-sizeM { font-size: var(--fsizeM); /*16px*/}
.W2toJAL .f-sizeL { font-size: var(--fsizeL); /*20px*/}
.W2toJAL .f-size2L { font-size: var(--fsize2L); /*20px*/}
.W2toJAL .f-size3L { font-size: var(--fsize3L); /*20px*/}
.W2toJAL .mincho { font-family: var(--mincho);}
html[data-browse-mode="P"] .W2toJAL .Wide90 { width: 90%; margin: 0 auto;}
html[data-browse-mode="S"] .W2toJAL .Wide90 { width: 100%;}
html[data-browse-mode="P"] .W2toJAL .pc { display: block;}
html[data-browse-mode="S"] .W2toJAL .pc { display: none;}
html[data-browse-mode="P"] .W2toJAL .sp { display: none;}
html[data-browse-mode="S"] .W2toJAL .sp { display: block;}




/*　lineup　*/
.W2toJAL .lineup > p { width: 90%; margin: 0 auto 40px auto;}
html[data-browse-mode="S"] .W2toJAL .lineup > p { width: 90%;}

.W2toJAL .lineup h2 {
	text-align: center;
	margin: 0 0 40px 0;
	font-size: 26px;
	font-weight: bold;
	border-top: 2px solid var(--basecolor) !important;
	border-bottom: 2px solid var(--basecolor) !important;
	display: block;
	padding: 20px;
	color: var(--basecolor);
	font-family: var(--mincho);
}
html[data-browse-mode="S"] .W2toJAL .lineup h2 { font-size: 20px;}


/*▼wine-box*/
.W2toJAL .wine-box { width: 90%; margin: 0 auto 60px;}
html[data-browse-mode="S"] .W2toJAL .wine-box { width: 100%; margin-bottom: 30px;}

.W2toJAL .wine-box p { width: 100%; margin: 0 auto;}


.W2toJAL .wine-box h4 { font-weight: bold; margin-bottom: 12px;}
.W2toJAL .wine-box [class^="detail"] { text-align: left;}
.W2toJAL .wine-box [class^="detail"] h3 { font-size: 18px; font-weight: bold; margin: 12px 0;}
.W2toJAL .wine-box .detail-variety { margin-bottom: 10px;}
.W2toJAL .wine-box .detail-award { border: 4px double #cccccc; padding: 20px; margin-bottom: 20px;}
.W2toJAL .wine-box .price { margin-bottom: 20px;}

.W2toJAL .wine-box .contry { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.W2toJAL .wine-box .contry img { width: 40px;}
html[data-browse-mode="S"] .W2toJAL .wine-box .contry img { width: 24px;}

.W2toJAL .wine-box .text { border-top: 1px solid #ccc; padding: 20px 0; }
.W2toJAL .wine-box .photo img { width: 100%; height: auto;}
html[data-browse-mode="S"] .W2toJAL .wine-box .photo { margin: 0 auto 20px auto;}

html[data-browse-mode="S"] .W2toJAL .wine-box .tx p { line-height: 1.4;}
html[data-browse-mode="S"] .W2toJAL .wine-box .tx h3 { font-size: 15px;}
html[data-browse-mode="S"] .W2toJAL .detail-text-area { padding: 0;}


/*　▼wine-box 1カラム　*/
.W2toJAL .wine-box.col1 .photo { width: 100%;}

/*　▼wine-box 2カラム　*/
.W2toJAL .wine-box.col2, .flexwrap {
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
}
.W2toJAL .wine-box.col2 .photo,
.W2toJAL .flexwrap .photo { width: 36%;}
html[data-browse-mode="S"] .W2toJAL .wine-box.col2 .photo,
html[data-browse-mode="S"] .W2toJAL .wine-box.col2 [class^="detail"] { width: 100%;}

.W2toJAL .wine-box.col2 .detail01, .flexwrap .txtbox { width: 60%;}
.W2toJAL .wine-box.col2 .detail02 { width: 100%; margin-top: 20px;}

/*▼wine-box 枠あり*/
section.frame .wine-box { border: 1px solid #ccc; padding: 20px;}
html[data-browse-mode="S"] .W2toJAL section.frame .wine-box { border: 1px solid #ccc; padding: 5px;}


/*▼ワイン評価ポイント*/
.W2toJAL .wineinfo { margin: 0 auto;}
html[data-browse-mode="S"] .W2toJAL .wineinfo { width: 100%;}
.W2toJAL .wineinfo-score {
	text-align: left;
	margin: 0 auto 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.W2toJAL .wineinfo-score li {
	padding: 10px;
	background-color: #f9f5e9;
	margin: 0 0 10px;
	width: 48%;
}
html[data-browse-mode="S"] .W2toJAL .wineinfo-score li { width: 100%;}

.W2toJAL .wineinfo-score li span {
	border-left: 5px solid;
	padding: 0 0 0 10px;
	color: #916906;
	display: inline-block;
}
html[data-browse-mode="S"] .W2toJAL .wineinfo-score li span { border-left: 3px solid;}

.W2toJAL .wineinfo-score-link { text-align: right; margin-bottom: 1em;}
.W2toJAL .wineinfo-score-link a { color: var(--basecolor); font-size: var(--fsizeS);}
.W2toJAL .wineinfo-score-link a:before {
	content: "？";
	width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; background-color: var(--basecolor);
	font-size: 14px; font-weight: bold; line-height: 1; font-family: Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
	box-sizing: border-box; vertical-align: middle; border-radius: 50%;
}
.W2toJAL .wineinfo-score-link a span { padding-left: 6px;  vertical-align: top; text-decoration: underline;}

.W2toJAL .wineinfo-list {
	background-color: #ffffff;
	text-align: left;
	margin: 0 auto 20px;
	padding: 10px;
	border: 4px double;
	color: #916906;
}
.W2toJAL .wineinfo-list ul li:before {
	content: "★";
	display: inline-block;
	padding-right: 0.5em;
}
.W2toJAL .wineinfo-list ul li {
	padding: 5px 0 5px 1em;
	text-indent: -1em;
	margin-left: 1em;
}
.W2toJAL .wineinfo-list li span {
	padding-left: 0.5em;
}
.W2toJAL .wineinfo-list h3.wineinfo-list-ttl {
	text-align: center;
	font-size: 1.1em;
	margin: -20px auto 5px;
	background: #ffffff;
	width: 29%;
}
html[data-browse-mode="S"] .W2toJAL .wineinfo-list h3.wineinfo-list-ttl { width: 60%;}




/*==============================================================================================
 商品ページ　商品詳細説明4
==============================================================================================*/
/* 共通 */
.W2toJAL .detailFour-inner { text-align: center; width: 80%; margin: 0 auto;}
#detailFour .txtlink { text-decoration: underline; color: var(--basecolor);}
.W2toJAL .detailFour-inner h3 { font-size: 1.2em; font-weight: 700; margin: 10px 0; color: var(--basecolor); }
/* bn-wrap */
.W2toJAL .detailFour-inner [class^="bn-wrap"] { display: flex; flex-wrap: wrap;}
.W2toJAL .detailFour-inner [class^="bn-wrap"] li { width: 49%; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; }
html[data-browse-mode="S"] .W2toJAL .detailFour-inner { width: 100%;}
html[data-browse-mode="S"] .W2toJAL .detailFour-inner [class^="bn-wrap"] li { width: 100%; padding: 5px;}

.W2toJAL .detailFour-inner [class^="bn-wrap"] li a { display: flex; justify-content: center;}
.W2toJAL .detailFour-inner [class^="bn-wrap"] li figure { width: 20%;}
.W2toJAL .detailFour-inner [class^="bn-wrap"] li p { width: 78%; padding-left: 10px; font-size: 16px;}
html[data-browse-mode="S"] .W2toJAL .detailFour-inner [class^="bn-wrap"] li p { font-size: 14px;}

.W2toJAL .detailFour-inner .bn-wrap-col1 { justify-content: center;}
.W2toJAL .detailFour-inner .bn-wrap-col2, .detailFour-inner .bn-wrap-col3 { justify-content: space-between;}
.W2toJAL .detailFour-inner .bn-wrap-col3 li { width: 32%;}
html[data-browse-mode="S"] .W2toJAL .detailFour-inner .bn-wrap-col3 li { width: 100%;}

.W2toJAL .detailFour-inner .bn-wrap-col3 li figure { width: 30%;}
html[data-browse-mode="S"] .W2toJAL .detailFour-inner .bn-wrap-col3 li figure { width: 20%;}


/*==============================================================================================
 商品ページ　商品詳細説明1,4 共通デコレーション
==============================================================================================*/
/*.midashi01*/
.W2toJAL .detailText .midashi01 {
	position: relative;
	padding: 1rem 2rem calc(1rem + 10px);
	background: #fdfb73;
	font-size: var(--fsizeL);
	font-weight: bold;
	text-align: center;
	margin: 1em auto 1em;
	color: #333333;
	width: 80%;
}
html[data-browse-mode="S"] .W2toJAL .detailText .midashi01{ width: 100%; }
.W2toJAL .detailText .midashi01:before {
	content: '';
	position: absolute; top: -7px; left: -7px;
	width: 100%; height: 100%; border: 2px solid;
}
#detailFour .bk-red{background: #ffdcda;}	
	
/*.midashi02*/
.W2toJAL .detailText .midashi02 {
	text-align: center;
	font-weight: bold;
	font-size: var(--fsizeL);
	font-family: var(--mincho);
	position: relative;
	padding: 1.5rem 2rem;
}
.W2toJAL .detailText .midashi02:before,
.W2toJAL .detailText .midashi02:after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	content: '';
	background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
	background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}
.W2toJAL .detailText .midashi02:before { top: 0;}
.W2toJAL .detailText .midashi02:after { bottom: 0;}
/*.midashi03*/
.W2toJAL .detailText .midashi03 {
	text-align: center;
	font-weight: bold;
	font-size: var(--fsizeL);
	font-family:  var(--mincho);
	padding: 1rem 2rem;
	color: #fff;
	background: #000;
}
.W2toJAL .detailText .midashi03 span {
	background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
	background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*.midashi04*/
.W2toJAL .detailText .midashi04 {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	text-align: center;
	font-weight: bold;
	font-size: var(--fsizeL);
}
.W2toJAL .detailText .midashi04:before, .detailText .midashi04:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: black;
}
.W2toJAL .detailText .midashi04:before { left:0;}
.W2toJAL .detailText .midashi04:after { right: 0;}
/*.deco01*/
.W2toJAL .detailText .deco01 {
	font-weight: bold;
	font-size: var(--fsizeL);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.W2toJAL .detailText .deco01::before,
.W2toJAL .detailText .deco01::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #555555;
}
.W2toJAL .detailText .deco01::before { margin-right: 30px; transform: rotate(-35deg) }
.W2toJAL .detailText .deco01::after { margin-left: 30px; transform: rotate(35deg) }	
/*.icon01*/
.W2toJAL .detailText .icon01 {
	position: relative;
	padding-left: 5em;
	font-weight: bold;
	font-size: var(--fsizeL);
	
}
.W2toJAL .detailText .icon01 span {
	position: absolute; top: 0; left: 0;
	padding: 0 2rem; color: #e3f5d8; background: #22ac38;
}
.W2toJAL .detailText .icon01 span:after {
	position: absolute;
	top: calc(50% - 7px);
	right: -11px;
	width: 0;
	height: 0;
	content: '';
	border-width: 7px 0 7px 12px;
	border-style: solid;
	border-color: transparent transparent transparent #22ac38;
}



/*==============================================================================================
 商品ページ　ストーリー、シャトー
==============================================================================================*/

.W2toJAL .story,
.W2toJAL .chateau{ margin-bottom:100px;}

.W2toJAL .story h2,
.W2toJAL .chateau h2{
	display: block; margin: 0 0 40px 0; padding: 20px;
	text-align: center; font-size: 26px; font-weight: bold; font-family: var(--mincho);
}
html[data-browse-mode="S"] .W2toJAL .chateau h2,
html[data-browse-mode="S"] .W2toJAL .story h2{ font-size:16px;}

.W2toJAL .story h2{
	color: var(--basecolor);
	border-top: 2px solid var(--basecolor);
	border-bottom: 2px solid var(--basecolor);
}

.W2toJAL .chateau h2{ background: var(--basecolor); color: #fff; }

.W2toJAL .story p,
.W2toJAL .chateau p{ width:90%; margin: 0 auto 40px auto;}
html[data-browse-mode="S"] .W2toJAL .story p,
html[data-browse-mode="S"] .W2toJAL .chateau p{ width:100%;}

.W2toJAL .story .photo,
.W2toJAL .chateau .photo{ max-width:100%; margin: 0 auto 40px auto;}
.W2toJAL .detail-catch{ margin-bottom:10px;}

/*==============================================================================================
 商品ページ　l-imgほか
==============================================================================================*/


.W2toJAL .l-img.type02{ gap:0; border:1px solid #ccc; }
.W2toJAL .l-img.l-img-wine.type02 h3{ background: unset; padding: 0;}
.W2toJAL .l-img.type02 .tx{ padding:20px;}
html[data-browse-mode="S"] .W2toJAL .l-img.type02 .tx { padding: 8px;}
.W2toJAL .l-img.type02 .tx h3 { background: #8a0068; color:#fff; padding: 10px;}

html[data-browse-mode="S"] .W2toJAL .l-img .tx p{ clear:both; font-size:13px; line-height: 1.4;}
html[data-browse-mode="S"] .W2toJAL .l-img.type02 { gap: 0; padding: 4px; }
html[data-browse-mode="S"] .W2toJAL .l-img .tx{ padding: 8px; }


/*▼コンテンツ　flex*/
.W2toJAL .flexwrap { display: flex; flex-wrap: wrap; justify-content: space-between;}
.W2toJAL .flexwrap .photo { width: 36%;}
html[data-browse-mode="S"] .W2toJAL .flexwrap .photo, .flexwrap .txtbox { width: 100%;}
.W2toJAL .flexwrap .txtbox { width: 60%;}

html[data-browse-mode="S"] .W2toJAL .sp-flex{ display: flex !important; gap: 10px; align-items: center;}
html[data-browse-mode="S"] .W2toJAL .sp-flex .photo { width:80px !important;}