/* SweetAlert v2 用：モーダル幅の制限を外す */
.swal-wide {
	width: 95vw !important;
	max-width: 95vw !important;
	background: transparent !important;
	padding: 0 !important;
}
.swal-wide .swal-content {
	margin: 0 !important;
	padding: 0 !important;
}
.swal-wide .swal-footer { display: none !important; }


.list{
	flex-wrap:wrap;	/* ★これ重要 */
}


figure img {
	cursor: pointer;
}

.img_exp_link {
	color: #ea0000;
	font-size: clamp(16px, 1vw + .35rem, 18px);
	cursor: pointer;
	text-decoration: underline;
	margin-top: 0.3rem;
	display: inline-block;
	text-align: center;
	padding-left: 3vw
}
.img_exp_link:hover {
	opacity: .8;
}


.detail_area {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem 1.2rem;
	background: #fafafa;
	font-size: clamp(16px, 1vw + .35rem, 18px);
	line-height: 1.8;
	margin: 1rem 0;
}

.detail_item {
	display: flex;
	align-items: center;
	margin-bottom: .3rem;
}

.detail_item:last-child {
	margin-bottom: 0;
}

.detail_label {
	min-width: 6em;
	font-weight: bold;
	color: #333;
}

.detail_value {
	color: #444;
}

.detail_value.price {
	font-size: clamp(18px, 1vw + .35rem, 21px);
	color: #ea0000;
	font-weight: bold;
}

.evaluation_btns {
	display: flex;
	gap: 1rem; /* ボタン間隔を少し広めに */
	margin-top: .5rem;
}

.btn-eval {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .6rem 1.2rem; /* ボタン大きめ */
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid #ddd;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .1s;
	min-width: 100px; /* 押しやすいように横幅を確保 */
}

.btn-eval i {
	margin-right: .5rem;
	font-size: 1.3rem; /* アイコンも少し大きく */
}

.btn-good {
	color: #0a7a00;
	border-color: #0a7a00;
}
.btn-good:hover {
	background: #0a7a00;
	color: #fff;
	transform: scale(1.05);
}

.btn-bad {
	color: #d00;
	border-color: #d00;
}
.btn-bad:hover {
	background: #d00;
	color: #fff;
	transform: scale(1.05);
}





/*　カートに入れる　*/
.detail_buy_area{
	width: 100%;
	display:grid;
	grid-template-columns: 1fr;
	column-gap: 2rem;
	row-gap: 1rem;
	align-items:center;
	padding: 1rem 2rem;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
}

/* 行レイアウト */
.buy_row{
	display:flex;          /* 横並びの基本 */
	align-items:center;    /* 垂直方向を中央揃え */
	justify-content:flex-start;
	gap:1rem;              /* 要素の間隔 */
	flex-wrap:nowrap;      /* 折り返さない */
	width:100%;            /* 親幅いっぱい */
	box-sizing:border-box; /* 余白計算のズレ防止 */
}

/* ラベルをインライン化して横並びさせる */
.buy_label{
	display:inline-block;
	min-width:5em;         /* 幅そろえ */
	font-weight:700;
	margin:0;
}

/* 数量入力 */
.buy_qty{
	width:7em;
	max-width:100%;
	padding:.5em .6em;
	border:1px solid #ccc;
	border-radius:8px;
	font-size:clamp(13px,1vw + .25rem,15px);
	line-height:1.2;
}

/* オプション */
.buy_option_group{
	display:flex;
	align-items:center;
	gap:1rem;
}
.opt_radio{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	margin:0;
}
.opt_radio input[type="radio"]{
	accent-color: var(--cart-base);
	transform:translateY(.5px);
}

/* 送信行はボタンを広げやすく */
.buy_submit{
	grid-column: 1 / -1;           /* ←2カラムぶち抜き */
	display:flex;
	justify-content:center;       /* ★中央寄せ */
}

/* ===== 既存.btn-cartを活かして“角丸→四角”のバリエーションだけ付与 ===== */
.btn-cart--square{
	border-radius: 10px; /* ←丸ではなく四角寄りに */
	padding: 1.0em 1.25em; /* 視認性少しUP（文字は既存clamp準拠） */
}

/* 詳細では幅いっぱいに（モバイルで押しやすく） */
@media (max-width: 960px){
	.btn-cart--square{ width:100%; }
	.detail_buy_area{
		grid-template-columns: 1fr;
	}
}

/* ダーク境界での見切れケア（任意） */
@media (prefers-color-scheme: dark){
	.detail_buy_area{ border-color:#CCC; background:#FFF; }
	.buy_qty{ border-color:#444; background:#1c1c1c; color:#fff; }
	.buy_label{ color:#000; }
	.opt_radio span{ color:#000; }
}

.comment{
	flex: 0 0 100%;	/* 幅100%の独立行になる */
	/* ついでに余白ほしければ ↓ */
	margin-top: 3rem;
}