@charset "UTF-8";

/* =========================================================
	 共通（全体）— 変数/基本リセット/タイポグラフィ
	 ========================================================= */
:root{
	--bg:#0b1020;
	--card:#fff;
	--muted:#64748b;
	--accent:#2563eb;
	--good:#16a34a;
	--bad:#dc2626;
	--grid:#e5e7eb;
	--fill:#cfe1ff;

	/* 右側「計算結果」パネルの最大幅（PC/タブレット） */
	--result-max-pc: 640px;	 /* PCでの右パネル最大幅 */
	--result-max-tab: 560px;	/* タブレットでの右パネル最大幅（※本修正で未使用化） */
}

*{ box-sizing:border-box }

body{
	font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
	margin:0;
	background:#f6f7fb;
	color:#0f172a;
}

/* =========================================================
	 ヘッダー
	 ========================================================= */
header{}
header h1{
	font-size: 1.5rem;
	padding: 0.5em 0;
	margin-bottom: 0;
	color: white;
	background-color: #0e0080;
}
header p{padding:0.5em; line-height:1.5;}

/* =========================================================
	 レイアウト（PC=横並び2カラム / SP・タブレット=縦並び）
	 ========================================================= */
.wrap{max-width:1200px;margin:16px auto;padding:0 12px}
.grid{display:grid;gap:14px}
.cols{grid-template-columns:1fr 1fr;align-items:start}
.card{
	background:var(--card);
	border-radius:14px;
	box-shadow:0 6px 18px rgba(14,26,77,.08);
	padding:14px;
}

/* ★ グリッド子要素が縮めるように（これが無いと横に広がりやすい） */
.cols > .card{ min-width:0; }

/* 「借入条件」内の2列グリッド（PC/タブレット） */
.card > .grid:first-of-type{grid-template-columns:repeat(2,1fr);gap:10px}

/* =========================================================
	 UIパーツ
	 ========================================================= */

h2{
	font-size: 1.25rem;
	line-height: 2rem;
	padding: 0.75rem;
	margin: 1rem 0;
	color: white;
	background-color: royalblue;
	padding: 0.5em;
	border-top: double 8px white;
	border-bottom: double 8px white;
}
h3{
	font-size: 1.2rem;
	font-weight: bold;
	padding-bottom: 8px;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}
h3:after {
	content: ".";
	line-height: 0;
	display: block;
	overflow: hidden;
	position: absolute;
	bottom: -1px;
	width: 30%;
	border-bottom: 1px solid #337ab7;
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.text-center{text-align: center;}
label{display:flex;gap:8px;align-items:center}

input[type="number"],select{width:120px;padding:6px 8px;border:1px solid #d1d9e6;border-radius:8px}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

.btn{padding:9px 12px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.btn.ghost{background:#e5e7eb;color:#111}
.btn.slim{padding:6px 10px}
#calcFlat,#calcVar{font-size:1.1em;}

.pill{display:inline-block;background:#eef2ff;color:#1e3a8a;border:1px solid #dbe3ff;border-radius:999px;padding:2px 8px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#eef2ff;border:1px solid #dbe3ff;border-radius:999px;padding:2px 10px;margin-right:6px}

.muted{color:var(--muted)}
.small{font-size:12px}

/* =========================================================
	 テーブル（共通）
	 ========================================================= */
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{border-bottom:1px solid #eef1f6;padding:8px 6px;text-align:right;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:#f9fafb}

.result{font-weight:700}
.good{color:var(--good)}
.bad{color:var(--bad)}
.note{font-size:12px;color:#475569;margin-top:6px;line-height:1.5}
.table-wrap{overflow:auto;max-height:360px;-webkit-overflow-scrolling:touch}

/* =========================================================
	 右側「計算結果」パネルの横幅制限
	 - PC: 左=可変 / 右=最大640px
	 - タブレット: スマホ同様に縦並びへ（本修正）
	 - スマホ(≤600px): 縦並び・全幅
	 ========================================================= */
@media (min-width: 901px){ /* PC */
	.cols{
		grid-template-columns: minmax(0,1fr) minmax(360px, var(--result-max-pc));
	}
	.cols > .card:nth-of-type(2){
		max-width: var(--result-max-pc);
		justify-self: end;
	}
}

/* ===== 本修正：タブレットもスマホと同じ縦1カラムに変更 ===== */
@media (min-width: 601px) and (max-width: 900px){ /* タブレット */
	/* 入力→結果の縦並び */
	.cols{ grid-template-columns:1fr !important; }

	/* パネルは100%幅、縮む余地を確保 */
	.cols > .card{ max-width:100%; min-width:0; }
	.cols > .card:nth-of-type(2){ max-width:100%; justify-self:stretch; }

	/* 「借入条件」の2列グリッドを1列に */
	.card > .grid:first-of-type{ grid-template-columns:1fr !important; }

	/* 入力は横幅いっぱいに */
	input[type="number"], select{ width:100%; max-width:100% }

	/* シナリオラジオ群は縦積み */
	#scenarioWrap{ display:grid; grid-template-columns:1fr; gap:8px; }

	/* 表は高さを抑えてスクロール */
	.table-wrap{ max-height:280px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

	/* テーブルは固定レイアウトで幅暴れを抑える */
	#flatTable, #varTable{ table-layout: fixed; }

	/* 可視化も横スクロールを内側で完結 */
	.vizWrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

	/* ラベル等の詰まりを緩和 */
	label{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

	/* 見出し調整（スマホより少し大きめ） */
	header h1{ font-size:18px }
}

/* 右パネル内の表/可視化がはみ出さないように（横スクロールは右パネル内で完結） */
.cols > .card:nth-of-type(2) .table-wrap{
	max-width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.cols > .card:nth-of-type(2) .vizWrap{
	max-width:100%;
	overflow-x:auto;					 /* ★フラット可視化の横スクロール */
	-webkit-overflow-scrolling:touch;
}
#flatSummary, #varSummary{
	word-break:break-word;
	overflow-wrap:anywhere;
	line-height:1.5;
}

/* =========================================================
	 可視化（フラット35ポイント & 金利推移）
	 ========================================================= */
.vizWrap{margin-top:8px;border:1px solid var(--grid);border-radius:12px;padding:12px}
.vizArea{display:grid;grid-template-columns:80px 1fr;gap:10px;margin-top:8px}
.vizY{display:grid;grid-template-rows:repeat(4,28px);gap:6px;align-items:center;color:#334155;font-size:12px}
.vizY .tick{display:flex;align-items:center;justify-content:flex-end;height:28px}
.vizGrid{display:grid;grid-template-rows:repeat(4,28px);gap:6px}
.vizRow{display:grid;gap:6px}
.vizCell{background:#fff;border:1px dashed #d6dbe6;border-radius:8px;position:relative;overflow:hidden}
.vizFill{position:absolute;inset:0;background:var(--fill)}
.vizLegend{display:grid;gap:6px;margin-top:6px;overflow-wrap:anywhere}
.vizLabels{display:grid;gap:6px}
.vizNote{font-size:12px;color:#334155;margin-top:10px;background:#f9fbff;border:1px solid #dbe6ff;border-radius:8px;padding:8px}

/* =========================================================
	 スマホ最適化（iPhone想定）
	 - 縦並びに切替
	 - 右パネルは100%幅に固定（横スクロールは内側要素のみ）
	 - テーブルは安定表示のため table-layout:fixed を採用
	 ========================================================= */
@media (max-width: 600px){
	/* 入力→結果の縦並び */
	.cols{grid-template-columns:1fr !important;}

	/* パネルは100%幅、縮む余地を確保 */
	.cols > .card{max-width:100%; min-width:0;}

	/* 「借入条件」の2列グリッドを1列に */
	.card > .grid:first-of-type{grid-template-columns:1fr !important;}

	/* 入力は横幅いっぱいに */
	input[type="number"], select{width:100%; max-width:100%}

	/* シナリオラジオ群は縦積み */
	#scenarioWrap{display:grid; grid-template-columns:1fr; gap:8px}

	/* 表は高さを抑えてスクロール */
	.table-wrap{max-height:280px; max-width:100%; overflow-x:auto}

	/* スマホ時は固定レイアウトで幅暴れを抑える */
	#flatTable, #varTable{ table-layout: fixed; }

	/* 可視化も横スクロールを内側で完結 */
	.vizWrap{max-width:100%; overflow-x:auto}

	/* ラベル等の詰まりを緩和 */
	label{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

	/* 見出し調整 */
	header h1{font-size:16px}
}

/* さらに狭い端末での微調整 */
@media (max-width: 400px){
	header h1{font-size:15px}
}

/* =========================================================
	 フッター / 付帯ブロック
	 ========================================================= */
.footer-menu{max-width: 720px; margin: 0 auto; padding: 1em;}
.footer-menu h3{font-size: 1.5rem; font-weight: bold; padding-bottom: 8px; position: relative; border-bottom: 1px solid rgba(0, 0, 0, .1);}
.footer-menu dl{margin-top:0;}
.footer-menu dl dt{margin-bottom:0.5em;}
.footer-menu dl dd{margin-inline-start:1em; margin-bottom:0.5em;}
.logo {display: block; max-width: 100%; margin: 0 auto !important;}

footer{text-align:center; color:white; height: 4rem; padding-top: 1rem; background-color: #000080; border-top: 3px solid #337ab7;}
footer p{margin-top:0; margin-bottom:1em;}
footer a{color:white;}


/* ========== 入力前は右パネル（計算結果）を非表示 ========== */
.cols.no-results{ grid-template-columns: 1fr !important; }								 /* 左だけ1カラム */
.cols.no-results > .card:nth-of-type(2){ display: none !important; }			 /* 右パネル隠す */

/* SPでも同じ振る舞い */
@media (max-width: 600px){
	.cols.no-results{ grid-template-columns: 1fr !important; }
	.cols.no-results > .card:nth-of-type(2){ display: none !important; }
}

/* 入力パネル内の縦分割用サブパネル */
.subpanel{ border:1px solid var(--grid); border-radius:12px; padding:12px; background:#fff; }
.subpanel + .subpanel{ margin-top:14px; }
.subpanel .subttl{ margin:0 0 6px; font-size:14px; }

/* 固定金利の最初の入力グリッド（PCで2列、SP/タブレットで1列） */
.fixed-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
@media (max-width:600px){
	.fixed-grid{ grid-template-columns:1fr !important; }
}
/* タブレットも1列化（本修正） */
@media (min-width:601px) and (max-width:900px){
	.fixed-grid{ grid-template-columns:1fr !important; }
}


/* ===== 結果パネル rpanel 用 ===== */
/* 入力前は結果パネルを非表示（.no-results が main.cols に付く運用は従来通り） */
.cols.no-results > .rpanel:nth-of-type(2){
	display: none !important;
}


/* 右パネル内の表/可視化がはみ出さないように（.card と同等の扱い） */
.cols > .rpanel:nth-of-type(2) .table-wrap{
	max-width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.cols > .rpanel:nth-of-type(2) .vizWrap{
	max-width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

/* PC時、右パネルの最大幅（.card と同等のレイアウト寄せ） */
@media (min-width: 901px){
	.cols > .rpanel:nth-of-type(2){
		max-width: var(--result-max-pc);
		justify-self: end;
	}
}

/* タブレットは1カラム運用のため個別指定は不要（縦並び） */
/* ===== スマホの横はみ出し対策（結果表示） ===== */

/* ページ全体での横スクロールを抑止（内側要素は個別にスクロール） */
html, body{
	max-width: 100%;
	overflow-x: hidden;
}

/* 総合比較テーブルは .table-wrap が無いので、ブロック化＋内側スクロールを許可 */
.compare-block{
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.compare-block > table{
	width: 100%;
	table-layout: fixed; /* セル幅の暴れを防止 */
}
.compare-block th,
.compare-block td{
	word-break: break-word; /* 日本語の長文も折り返す */
	overflow-wrap: anywhere; /* 英数の連続でも折り返す */
}

/* 可視化系の横幅を確実に親幅内に収める */
#rateChart{
	display: block; /* inline要素由来の余白を除去 */
	max-width: 100%;
}
.vizWrap{
	max-width: 100%;
	overflow-x: auto; /* グリッドが広い場合は内側で横スクロール */
	-webkit-overflow-scrolling: touch;
}

/* rpanel（結果パネル）配下でも内側でスクロールを完結 */
.rpanel{
	max-width: 100%;
	overflow-x: hidden; /* パネル外へはみ出さない */
}

/* スマホ時の微調整：表とSVGの高さを抑えつつ収まりを良くする */
@media (max-width: 600px){
	#flatTable, #varTable{
		table-layout: fixed; /* 念のため再指定（安定化） */
		width: 100%;
	}
	/* グラフの高さを少し低めにしてはみ出しリスク低減（必要なら調整可） */
	#rateChart{ height: 280px; }
}