@charset "utf-8";

/* ========================================================
	recommended-products.css => 商品ページ用CSS（スラッグ recommended-products）
	読み込み順： variable.css → base.css → template.css → page.css → 本ファイル

	・クラス名の接頭辞は item_ のまま（画像フォルダ images/item/ と揃えている）

	・ベースCSS（variable / base / template / page）は編集しない
	・レイアウトはベースの .w / .flex / .jc-space-between / .sp_block /
	  .col_3 / .sp_col_2 / .btn / .title_set / dl.dl_line を流用し、
	  ここには足りない分だけを書いている
======================================================== */

/* ページ全体
============================================================================================================ */
@media screen and (max-width: 768px) {
	.item_page {
		padding: 0 10px;
	}
}


/* アンカーリンク
============================================================================================================ */
.item_anchor {
	padding: 0 2.6%;
	margin-top: 40px;
}
.item_anchor > li {
	margin-bottom: 2%;
}
.item_anchor > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-size: 1.3rem;
	line-height: 1.4;
	text-decoration: none;
	padding: 0.9em 15px;
	border: 1px solid var(--c-gray);
	border-radius: 100vh;
}
.item_anchor > li > a:after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background: url(../images/item/icon_anchor.svg) no-repeat;
	background-size: contain;
}
.item_anchor > li > a:hover {
	background: #fff;
}
@media screen and (max-width: 768px) {
	/* デザインではアンカーだけ商品ブロックより外側（.w の内寸いっぱい）に出ているので、
	   .item_page の左右10pxを打ち消す。ボタン幅がデザイン実測（375幅で171px）とほぼ一致する */
	.item_anchor {
		padding: 0;
		margin: 25px -10px 0;
	}
	.item_anchor > li {
		margin-bottom: 3%;
	}
	/* デザイン実測（SPアートボード）のアンカー文字は約10.5px。
	   1.1rem のままだと1行に入る文字数が足りず、
	   商品06「（酪酸菌サプリメント）」が2行に割れてデザインの改行と合わない */
	.item_anchor > li > a {
		font-size: 1.05rem;
		gap: 0.5em;
		padding: 0.8em 15px;
	}
}


/* 商品ブロック
============================================================================================================ */
.item_box {
	padding: 70px 6.5%;
	border-top: 1px solid var(--c-gray);
}
.item_box:first-of-type {
	padding-top: 40px;
	border-top: none;
}
@media screen and (max-width: 768px) {
	.item_box {
		padding: 35px 0;
		border-top: none;
	}
	.item_box:first-of-type {
		padding-top: 20px;
	}
}


/* 商品ヘッダー
============================================================================================================ */
.item_head > *:first-child {
	width: 41%;
}
.item_head > *:last-child {
	width: 52.5%;
}
@media screen and (max-width: 768px) {
	.item_head > *:first-child,
	.item_head > *:last-child {
		width: auto;
	}
}


/* 商品画像スライダー
============================================================================================================ */
/* touch-action: pan-y … 縦スクロールはブラウザに任せ、
   横方向は item.js のスワイプ判定用に確保する（これが無いと横に振った時点で
   ブラウザが pointercancel を投げてスワイプが途切れることがある） */
.item_slider_main {
	position: relative;
	touch-action: pan-y;
}
/* 画像は横にスライドさせて切り替える。
   li を同じ位置に重ねて置き、切り替えのたびに item.js が
   「入る側を進行方向の反対側へ瞬間移動 → 0 まで滑らせる」を行う。
   はみ出した分は overflow で隠す。
   絶対配置にすると高さの基準が無くなるので、商品画像が 1:1 であることを使って
   aspect-ratio で確定させている（img 側にも同じ比率と object-fit を指定済み） */
.item_slider_list {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.item_slider_list > li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* JSが読み込まれなかった場合でも1枚目だけが見えるようにしておく */
	transform: translateX(100%);
	transition: transform 0.4s ease;
}
.item_slider_list > li.is-current {
	transform: translateX(0);
}
.item_slider_list img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	display: block;
}
.item_since {
	position: absolute;
	right: 20px;
	bottom: 16px;
	font-family: var(--font_serif);
	line-height: 1.1;
	text-align: center;
}
.item_since_ttl {
	display: block;
	font-size: 1.2rem;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--c-primary);
}
.item_since_year {
	display: block;
	font-size: 2.4rem;
	padding-top: 3px;
}
.item_slider_nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}
/* カウンターはデザインではゴシック体の太字（Since / 2014 の DM Serif Display とは別）。
   font-family は指定せず body の var(--font_base) を継承させる */
.item_slider_count {
	font-size: 2rem;
	font-weight: 700;
	color: var(--c-gray);
}
.item_slider_current {
	color: var(--c-body);
}
.item_slider_btn {
	display: flex;
	gap: 12px;
}
.item_slider_btn button {
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/item/icon_arrow_circle.svg) no-repeat;
	background-size: contain;
}
.item_slider_prev {
	transform: rotate(-180deg);
}
.item_slider_btn button:hover {
	opacity: 0.6;
}


/* 商品名まわり
============================================================================================================ */
.item_tag {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.2em;
}
.item_tag > li {
	font-size: 1.3rem;
	line-height: 1.4;
	background: #fff;
	border-radius: 100vh;
	padding: 0.35em 1em;
}
.item_name {
	font-size: 3.0rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.06em;
}
/* 括弧内で改行させない（SPで（　）ごと次行に送る） */
.item_name span {
	display: inline-block;
}
.item_sub {
	font-size: 1.5rem;
	margin-top: 0.4em;
}
.item_read {
	font-size: 1.6rem;
	line-height: 1.9;
	margin-top: 1.6em;
}
@media screen and (max-width: 768px) {
	.item_tag {
		gap: 6px;
		margin-top: 1.2em;
	}
	.item_name {
		font-size: 2.6rem;
	}
	.item_read {
		font-size: 1.5rem;
		margin-top: 1.2em;
	}
}


/* 購入ボタン
============================================================================================================ */
.item_buy {
	margin-top: 2em;
}
.item_buy_col + .item_buy_col {
	margin-top: 1.4em;
}
.item_buy_ttl {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: 1.3rem;
	margin-bottom: 0.7em;
}
.item_buy_ttl:after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-gray);
}
.item_buy_list {
	display: flex;
	gap: 20px;
}
.item_buy_list > li {
	width: 50%;
}
/* 詳細下の再掲（PCのみ） */
.item_buy_wide {
	display: flex;
	justify-content: space-between;
	margin-top: 3em;
}
.item_buy_wide .item_buy_col {
	width: 41%;
	margin-top: 0;
}
.item_buy_wide .item_buy_col + .item_buy_col {
	width: 52.5%;
}
/* .btn の差分（幅・高さ・アイコンのみ上書き） */
.item_page .btn {
	display: block;
	min-width: 0;
	width: 100%;
	font-size: 1.5rem;
	/* ベースは padding:1em（=1.5rem時に15px）。上下を5pxずつ広げて20px＝2rem。
	   左右はベースの25px のまま（:after の right:25px と揃えるため） */
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.item_page .btn:after {
	background: url(../images/item/icon_blank_round.svg) no-repeat;
	background-size: contain;
}
.item_page .btn:hover:after {
	background: url(../images/item/icon_blank_round_white.svg) no-repeat;
	background-size: contain;
}
/* 発売前でURLが未定のボタン。ボタンは見せたまま押せない状態にする。
   href を持たない <a> なのでクリック・キーボード操作のどちらでも反応しないが、
   ホバーの見た目まで止めるため pointer-events も切っている */
.item_page .btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}
/* 1360px以下（＝.w が可変幅になる幅）では、html の font-size が 0.8vw／1.1vw で
   伸びるのにベース .btn の左右padding 25px と :after のアイコン（right:25px／18px角）が
   固定pxのままなので、横並び（幅50%）だと「Amazonでのご購入はこちら」がアイコンに重なる。
   この帯では2ボタンを縦積みにする */
@media screen and (max-width: 1360px) {
	.item_buy_list {
		display: block;
	}
	.item_buy_list > li {
		width: auto;
	}
	.item_buy_list > li + li {
		margin-top: 12px;
	}
}
@media screen and (max-width: 768px) {
	.item_page .btn {
		font-size: 1.4rem;
		/* 0.9em（=1.4rem時に12.6px）＋5px ≒ 1.8rem */
		padding: 1.8rem 20px;
	}
}


/* 詳細（SPはアコーディオン）
============================================================================================================ */
.item_more {
	margin-top: 25px;
	border-top: 1px solid var(--c-gray);
	border-bottom: 1px solid var(--c-gray);
}
.item_more a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.5rem;
	text-decoration: none;
	padding: 1em 0;
}
.item_more_icon {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-primary);
}
.item_more_icon:before,
.item_more_icon:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}
.item_more_icon:before {
	width: 10px;
	height: 1.4px;
}
.item_more_icon:after {
	width: 1.4px;
	height: 10px;
	transition: transform 0.4s ease;
}
/* 開くと縦棒が横棒に重なって「−」になる */
.item_box.is-open .item_more_icon:after {
	transform: translate(-50%, -50%) rotate(90deg);
}
@media screen and (max-width: 768px) {
	/* 下罫線は .item_more ではなく .item_detail_body 側に持たせる。
	   閉じているとき（height:0）は罫線だけが .item_more の直下に残って従来と同じ見た目になり、
	   開くと罫線が中身と一緒に下がって最下部に付く（デザインの商品01がこの形）。
	   高さのアニメーションにそのまま乗るので、開閉の途中で罫線が飛ばない */
	.item_more {
		border-bottom: none;
	}
	.item_more a {
		padding: 1em 20px;
	}
	/* display の切替では遷移できないため height で開閉する。
	   height:auto はアニメーションできないので、開閉中だけ item.js が
	   実測値を inline style で入れ、終わったら消して auto / 0 に戻す */
	.item_detail_body {
		height: 0;
		overflow: hidden;
		border-bottom: 1px solid var(--c-gray);
		transition: height 0.4s ease;
	}
	/* 開いたとき中身と下罫線が接してしまうので間を空ける。
	   .item_detail_body に padding を入れると閉じたとき（height:0）も
	   その分の高さが残ってしまうため、中身側に高さを持つ擬似要素を置いている
	   （scrollHeight に含まれるので開閉アニメーションにもそのまま乗る） */
	.item_detail_body:after {
		content: "";
		display: block;
		height: 40px;
	}
	.item_box.is-open .item_detail_body {
		height: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.item_detail_body,
	.item_more_icon:after,
	.item_slider_list > li {
		transition: none;
	}
}


/* 代表からのコメント
============================================================================================================ */
.item_comment {
	display: grid;
	grid-template-columns: 41% 52.5%;
	justify-content: space-between;
	margin-top: 70px;
}
.item_comment_img {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: start;
}
.item_comment_img img {
	width: 100%;
	aspect-ratio: 1.6 / 1;
	object-fit: cover;
	display: block;
}
.item_comment .title_set {
	margin-bottom: 1.5em;
}
.item_comment_txt {
	font-size: 1.6rem;
	line-height: 1.9;
}
@media screen and (max-width: 768px) {
	.item_comment {
		display: block;
		margin-top: 25px;
	}
	.item_comment .title_set {
		margin-bottom: 1em;
	}
	.item_comment_img {
		margin-bottom: 1.5em;
	}
	.item_comment_txt {
		font-size: 1.5rem;
	}
}


/* Detals
============================================================================================================ */
.item_detail {
	background: #fff;
	padding: 15px;
	margin-top: 60px;
}
.item_detail_inner {
	background: var(--bg-gray);
	padding: 50px 55px 40px;
}
.item_detail_ttl {
	font-family: var(--font_serif);
	font-size: 3.2rem;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0.4em;
}
.item_detail dl.dl_line.dl_line_tb_line {
	border-color: var(--c-gray);
}
.item_detail dl.dl_line > dt {
	width: 15%;
	padding-left: 0;
	font-weight: 500;
	border-top-color: var(--c-gray);
}
.item_detail dl.dl_line > dd {
	width: 85%;
	border-top-color: var(--c-gray);
}
@media screen and (max-width: 768px) {
	.item_detail {
		padding: 10px;
		margin-top: 25px;
	}
	.item_detail_inner {
		padding: 25px 20px 20px;
	}
	.item_detail_ttl {
		font-size: 2.6rem;
	}
	.item_detail dl.dl_line > dt,
	.item_detail dl.dl_line > dd {
		width: 100%;
	}
	.item_detail dl.dl_line > dt {
		padding: 1em 0 0.2em;
	}
	.item_detail dl.dl_line > dd {
		padding: 0 0 1em;
		border-top: none;
	}
}