/* ======================================= */
/* 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%;

	/* ★追加: 縦幅を画面の90%に制限 ★ */
	max-height: 90vh;
	/* overflow: hidden; は一旦削除（.scrollに任せる） */

	background-image: url(../../img/swift/modal/bk_modal.png);
	background-size: cover;
	background-position: center center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* padding は中身のサイズに影響するため、max-heightの計算に入れる */
	padding: 30px 50px;
}
/* ------------------------------------- */
/* .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;
}

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

/* ------------------------------------- */
/* コンテンツ内の共通要素 */
/* ------------------------------------- */
#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;
	}

}

/* フェードイン効果を足したい場合 */
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;
}