/* ======================================= */
/* modals */
/* ======================================= */

/* モーダルオープン時、背景固定 */
body.openModal {
	overflow: hidden;
}

#modal p {
	margin: 0;
	padding: 0;
}

#modal .close {
	pointer-events: all;
	position: absolute;
	right: 15px;
	top: 15px;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	color: #FFF;
	background-color: #A0A0A0;
	overflow: hidden;
	z-index: 1010;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

/* ------------------------------------- */
/* #modal: モーダル全体（Flexコンテナとして中央配置を担う） */
/* ------------------------------------- */
#modal {
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition-duration: 400ms;
	transition-property: visibility, opacity;

	/* ★修正1: Flexboxで frame を中央配置する設定を維持 */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	container-type: inline-size;
	visibility: hidden;
	opacity: 0;
}

/* モーダルが開いたとき (display: block; は不要) */
body.openModal #modal {
	opacity: 1;
	visibility: visible;
	/* display: flex; を上書きしないように注意 */
}

/* 背景の暗転部分 */
#modal .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	cursor: pointer;
	z-index: 1000;
}

/* ------------------------------------- */
/* .frame: モーダルの中身（画面中央に表示される部分） */
/* ------------------------------------- */
#modal .frame {
	position: relative;
	z-index: 1010;
	width: 100%;
	max-height: 90vh;
	/* background-image: url(../../img/e-every/modal/bk_modal.png); */
	/* background-size: cover; */
	/* background-position: center center; */
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 50px;
			transition: all 0.3s ease-in-out;
}

/* ------------------------------------- */
/* .scroll: モーダルコンテンツのスクロール担当要素 */
/* ------------------------------------- */
#modal .scroll {
	width: 100%;
	/* Flexboxの子要素として、残りの高さを全て占有 */
	flex-grow: 1;
	/* ★追加: 高さが足りなくなったらスクロールを有効にする ★ */
	overflow-y: auto;
	/* padding-left/rightをframeからこちらに移すと、スクロールバーがパディングの外側に来る */
}

/* ------------------------------------- */
/* .pages: コンテンツのラッパー */
/* ------------------------------------- */
#modal .pages {
	/* pagesはscrollの中で流れるようにする */
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/* .scroll は .frame の中に配置されているため、必要であれば scroll に overflow-y: auto; を設定します。 */

/* ------------------------------------- */
/* .page: 各コンテンツページ のベーススタイル */
/* ------------------------------------- */
#modal .page {
	display: none;
	padding: 0;
	opacity: 0;
		transition: opacity 0.3s ease;
}

#modal .page.active {
	display: flex;
	flex-direction: column;
	opacity: 1;
}

/* ------------------------------------- */
/* コンテンツ内の共通要素 */
/* ------------------------------------- */
#modal .hd {
	padding: 20px;
	text-align: center;
}

#modal .shoulder {
	margin-bottom: 5px;
	flex: 1 1 100%;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: #333;
}

#modal p.body {
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 150%;
	color: #333333;
}

#modal p.tx1 {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: #333333;
}

#modal p.tx1 span {
	font-size: 32px;
	line-height: 120%;
}

#modal p.tx1 span.yen {
	font-size: 20px;
	line-height: 150%;
}

#modal .ttl {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin-bottom: 8px;
}

#modal .grade {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-bottom: 3px;
}

#modal .grade li {
	padding: 3px 8px;
	background: #7A8892;
	/* グレードアイコンの背景色 */
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
}

#modal .image figure {
	margin: 0;
	padding: 0;
}

#modal .image img {
	width: 100%;
	height: auto;
	display: block;
}

/* 価格・スペックエリア */
#modal .spec {
	margin-top: 12px;
}

#modal .spec .grade_box {
	margin-bottom: 9px;
}

#modal .spec-section {
	padding: 20px;
	border-top: 1px solid #eee;
}

#modal .spec-area .body {
	font-weight: 700;
	margin-bottom: 10px;
}

#modal .spec-area .tx1 span {
	font-size: 32px;
	font-weight: 700;
	margin-right: 5px;
}

#modal .spec-area .tx1 {
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

#modal .spec-area .tx2 {
	font-size: 12px;
	color: #666;
}

#modal .notes {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: #333333;
}

/* ------------------------------------- */
/* PC/SP共通: 複雑なレイアウトの調整 */
/* ------------------------------------- */
#modal .grade-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

#modal .set-name {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin: 0;
}

#modal .price-time-wrap {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

#modal .spec .prs {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}

#modal .prs_time {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

#modal .time {
	padding: 0px 5px;
	border: 1px solid #333;
	border-radius: 3px;
	font-size: 14px;
	color: #333;
	margin-left: 14px;
	margin-bottom: 5px;
}

#modal .notes {
	width: 100%;
}

/* 2段価格表示の微調整 */
#modal .multi-price {
	margin-top: 15px;
}

#modal .multi-price-item:not(:last-child) {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed #ccc;
}

#modal .note-box {
	padding: 6px;
	border: 1px solid #BF0010;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.4;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	color: #BF0010;
	margin-top: 12px;
}


/* ======================================= */
/* 2. SP LAYOUT (BREAKPOINT: 750px 以下) */
/* ======================================= */
@media (max-width: 750px) {
	#modal .close {
		top: 15px;
		width: 50px;
		height: 50px;
		font-size: 12px;
	}

	#modal .frame {
		padding: 20px;
		max-height: 95vh;
		/* SPでは画面いっぱいに近づける */
	}

	#modal .pages {
		width: 95%;
		/* SPでは幅を広げる */
	}

	#modal .hd {
		padding: 15px 0px;
	}

	#modal .ttl {
		font-size: 24px;
	}

	#modal .grade-wrap {
		flex-wrap: wrap;
		/* グレードが多くなったら折り返し */
	}

	#modal .grade {

		justify-content: flex-start;
	}

	/* 画像エリア */
	#modal .image-section {
		padding: 10px;
	}

	/* 画像セット: 縦に積む */
	#modal .image-set {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	#modal .subimage {
		display: flex;
		justify-content: flex-end;
	}

	#modal .subimage figure {
		width: 320px;
		text-align: right;
		margin: 17px 0;
	}

	#modal .page.active.hassubimage .subimage figcaption {
		text-align: right;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 150%;
		color: #333333;
	}

	#modal .bln {
		padding: 10px;
		font-size: 14px;
	}

	/* スペックエリア */
	#modal .spec-section {
		padding: 15px 10px;
	}

	#modal .spec-area .tx1 span {
		font-size: 28px;
	}
}


/* ======================================= */
/* 3. PC LAYOUT (BREAKPOINT: 751px 以上) */
/* ======================================= */
@media (min-width: 751px) {

	/* --- PCの基本GRID定義 --- */
	#modal .page.active {
		display: grid;
		padding: 0;
		/* PCでのモーダル内パディング */
		/* 公式サイトのベーステンプレート (hassubimageがない場合) */
		grid-template:
			"hd        hd        hd" auto
			"image     image     image" auto
			"...       ...       ..." 20px
			/* 隙間 */
			"spec spec spec" auto
			"...       ...       ..." 20px
			/* 隙間 */
			"caution   caution   caution" auto / 1fr 40px 280px;
		grid-column-gap: 40px;
		/* 2列目と3列目の間の40pxギャップをここで定義 */
	}

	/* --- GRIDエリアへの要素割り当て (共通) --- */
	#modal .hd {
		grid-area: hd;
		padding: 0;
		text-align: left;
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
	}

	#modal .image {
		grid-area: image;
	}

	#modal .spec {
		grid-area: spec;
		/* padding: 0; */
	}

	#modal .caution-area {
		grid-area: caution;
	}

	#modal .subimage {
		/* サブ画像がない場合は非表示 */
		display: none;
	}


	/* --- 特殊GRID定義 (hassubimageがある場合) --- */
	#modal .page.active.hassubimage {
		grid-template:
			"hd        hd        hd" auto
			"image     image     image" auto
			"...       ...       ..." 20px
			/* 隙間 */
			"spec      spec       subimage" auto
			/* subimageが右端に移動 */
			"...       ...       ..." 20px
			/* 隙間 */
			"caution   caution   caution" auto / 1fr 40px 320px;
		/* ★修正: 280px → 320px に拡大 ★ */
		/* ... */
	}

	/* --- hassubimageがある場合の追加割り当て --- */
	#modal .page.active.hassubimage .image {
		/* メイン画像は subimage が移動しても同じ 'image' エリアを占有 */
	}

	#modal .page.active.hassubimage .subimage {
		grid-area: subimage;
		display: block;
		/* サブ画像を表示 */
	}

	#modal .page.active.hassubimage .subimage figcaption {
		text-align: right;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 150%;

		color: #333333;

	}

	/* --- その他 PC向け詳細スタイル --- */

	/* .hd の中身の調整 */
	#modal .ttl {
		font-size: 32px;
		text-align: left;
		flex: 1 1 auto;
	}

	#modal .grade {
		justify-content: flex-start;
		align-items: flex-end;
	}

	/* spec 内の調整 */
	#modal .spec .prs {
		/* 既存のスタイルを維持 */
	}

	/* image/subimage 内の調整 */
	#modal .image figure {
		width: 100%;
	}

	#modal .subimage figure {
		width: 320px;
		x;
		/* 3列目の固定幅 */
		text-align: center;
	}

}/* ラベル共通 */
#modal .optional-txt_gray,
#modal .optional-txt_green,
#modal .optional-txt_red {
	display: inline-block;
	/* 中身幅で閉じる */
	padding: 4px 12px 6px;
	border-radius: 8px;

	font-style: normal;
	line-height: 150%;
}

/* 色・太さ違い */
#modal .optional-txt_gray {
	background: #787878;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 16px;
		margin-top: 6px;
}

#modal .optional-txt_green {
	background: #09A859;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 16px;
		margin-top: 6px;
}

#modal .optional-txt_red {
	background: transparent;
	border: 1px solid #BF0010;
	color: #BF0010;
	font-weight: 400;
	font-size: 12px;
	padding: 6px;
	border-radius: 0;
	margin-top: 6px;
}

/* 縦並び用ラッパー */
.wrapbox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* ★ 横に伸びるのを防ぐ */
	gap: 8px;
}
.wrapbox>div{

}

.fc_red{
	color: #BF0010;
}
/* フェードイン効果を足したい場合 */
body.openModal #modal .page.active {
	animation: modalFade 0.3s ease forwards;
}

@keyframes modalFade {
	from {
		opacity: 0;
		/* transform: translate(-50%, -55%); */
	}

	to {
		opacity: 1;
		/* transform: translate(-50%, -50%); */
	}
}

/* extra settings */
.extra_setting01>figure {
	max-width: 192px;
	margin-left: auto;
}

/* 左右ナビゲーションボタン */
#modal .nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	background: #fff;
	/* border: 1px solid #ccc; */
	cursor: pointer;
	z-index: 1020;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}

#modal .nav-btn:hover {
	background: #f5f5f5;
}

#modal .prev {
	left: 20px;
}

#modal .next {
	right: 20px;
}

/* 矢印アイコン（擬似要素） */
#modal .nav-btn::before {
	content: "";
	width: 15px;
	height: 15px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	display: block;
}

#modal .prev::before {
	transform: rotate(-135deg);
	margin-left: 5px;
}

#modal .next::before {
	transform: rotate(45deg);
	margin-right: 5px;
}

/* 下部カウンター */
#modal .modal-counter {
	margin-top: 15px;
	font-weight: 400;
	font-size: 18px;
	color: #949494;
	text-align: center;
	z-index: 1020;
}

/* スマホ対応：ボタンを少し小さく、位置を調整 */
@media (max-width: 750px) {
	#modal .nav-btn {
		width: 40px;
		height: 40px;
		top: auto;
		bottom: 10px;
		/* スマホでは下部に配置するなどの調整もアリ */
		transform: none;
	}

	#modal .prev {
		left: 10px;
	}

	#modal .next {
		right: 10px;
	}
}