@charset "utf-8";
/* リニューアル版の下層ページ共通（renewal.css の後に読み込む）
   Codex の下層ページのデザイン画（幅724→1024換算）を基準にする。--u は renewal.css と同じ。 */

/* ページタイトルの帯 */
.rn-page-hero { position: relative; overflow: hidden; background: url(../images/renewal/hero-bg.jpg?v=2) center 40% / cover no-repeat, #CFE3F4; }
.rn-page-hero-in { position: relative; width: calc(1024 * var(--u)); height: calc(156 * var(--u)); margin: 0 auto; padding-left: calc(72 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
.rn-page-title { font-family: var(--serif); font-weight: 700; font-size: calc(46 * var(--u)); line-height: calc(60 * var(--u)); letter-spacing: .06em; color: var(--navy); font-feature-settings: "palt"; }
.rn-page-en { margin-top: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); font-family: var(--latin); font-weight: 600; font-size: calc(21 * var(--u)); letter-spacing: .06em; color: #A9844A; }
.rn-page-en::before { content: ""; width: calc(64 * var(--u)); height: calc(1.5 * var(--u)); background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); }

/* パンくず */
.rn-crumb { width: calc(1024 * var(--u)); margin: 0 auto; padding: calc(14 * var(--u)) calc(48 * var(--u)) 0; }
.rn-crumb ol { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); font-size: max(11px, calc(11.5 * var(--u))); color: #5B6678; }
.rn-crumb li + li::before { content: "›"; margin-right: calc(6 * var(--u)); color: #9AA6B8; }
.rn-crumb a:hover { color: var(--blue-2); text-decoration: underline; }

/* セクション */
.rn-sec { position: relative; padding-block: calc(64 * var(--u)); }
.rn-sec-in { width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(48 * var(--u)); }
.rn-sec.is-blue { background: url(../images/renewal/band-bg.jpg) center / cover no-repeat, #EDF4FB; }
.rn-sec.is-pink { background: radial-gradient(60% 80% at 20% 50%, rgba(248,214,226,.55), rgba(248,214,226,0) 70%), linear-gradient(180deg, #FDF5F8, #FBEFF4); }
.rn-sec.is-pale { background: linear-gradient(180deg, #F7FAFD, #F2F6FB); }

/* 見出し（右に金の線が伸びる） */
.rn-h2 { display: flex; align-items: center; gap: calc(22 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(34 * var(--u)); line-height: calc(46 * var(--u)); letter-spacing: .04em; color: var(--navy); font-feature-settings: "palt"; }
.rn-h2::after { content: ""; flex: 1; height: calc(1.5 * var(--u)); background: linear-gradient(90deg, var(--gold-1), rgba(207,175,114,.15) 80%, rgba(207,175,114,0)); }
.rn-h2.is-center { justify-content: center; }
.rn-h2.is-center::before { content: ""; width: calc(90 * var(--u)); height: calc(1.5 * var(--u)); background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.rn-h2.is-center::after { flex: none; width: calc(90 * var(--u)); background: linear-gradient(90deg, var(--gold-1), rgba(207,175,114,0)); }
.rn-h3 { font-family: var(--serif); font-weight: 700; font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); color: var(--navy); font-feature-settings: "palt"; }

/* 本文 */
.rn-text { font-size: calc(15.5 * var(--u)); line-height: 2; color: #273246; font-weight: 500; }
.rn-text p + p { margin-top: calc(16 * var(--u)); }
.rn-sec .rn-note { font-size: max(11px, calc(11 * var(--u))); color: #6B7686; }

/* 表 */
.rn-table { width: 100%; border-collapse: collapse; font-size: calc(15 * var(--u)); line-height: 1.8; }
.rn-table th, .rn-table td { padding: calc(14 * var(--u)) calc(22 * var(--u)); border: 1px solid #C9D6E6; text-align: left; vertical-align: top; }
.rn-table th { width: 28%; background: #EEF4FB; color: var(--navy); font-weight: 600; font-family: var(--serif); }
.rn-table td { background: #fff; color: #273246; }

/* ボタン（下層ページ共通） */
.rn-btn-line { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: calc(260 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(56 * var(--u)) 0 calc(36 * var(--u)); border-radius: 999px; border: calc(1.5 * var(--u)) solid var(--rose); background: linear-gradient(180deg, #fff, #FBEEF3); color: var(--rose-d) !important; font-family: var(--serif); font-weight: 600; font-size: calc(17 * var(--u)); letter-spacing: .08em; box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(196,106,132,.14); }
.rn-btn-line.is-navy { border-color: var(--navy); color: var(--navy) !important; background: linear-gradient(180deg, #fff, #EEF3FA); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(30,53,96,.1); }
.rn-btn-line::after { content: ""; position: absolute; right: calc(26 * var(--u)); top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(-4 * var(--u)); border-top: calc(1.5 * var(--u)) solid currentColor; border-right: calc(1.5 * var(--u)) solid currentColor; transform: rotate(45deg); }
.rn-btn-line:hover { background: #fff; }
.rn-link-more { position: relative; padding-right: calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: var(--blue-2); border-bottom: 1px solid #A9C4E2; }
.rn-link-more::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-3.5 * var(--u)); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* ========== スマホ ========== */
@media (max-width: 1023px) {
	.rn-page-hero-in { width: auto; height: auto; padding: 28px 24px 24px; }
	.rn-page-title { font-size: 26px; line-height: 1.4; }
	.rn-page-en { margin-top: 6px; font-size: 15px; gap: 10px; }
	.rn-page-en::before { width: 40px; height: 1px; }
	.rn-crumb { width: auto; max-width: 560px; padding: 10px 16px 0; }
	.rn-crumb ol { font-size: 11px; gap: 4px; }
	.rn-sec { padding-block: 44px; }
	.rn-sec-in { width: auto; max-width: 560px; padding: 0 18px; }
	.rn-h2 { font-size: 22px; line-height: 1.45; gap: 12px; }
	.rn-h2.is-center::before, .rn-h2.is-center::after { width: 36px; flex: none; }
	.rn-h3 { font-size: 17px; line-height: 1.5; }
	.rn-text { font-size: 15px; line-height: 1.95; }
	.rn-text p + p { margin-top: 14px; }
	.rn-table { font-size: 14px; }
	.rn-table th, .rn-table td { display: block; width: 100%; padding: 10px 14px; }
	.rn-table tr + tr th { border-top: 0; }
	.rn-table td { border-top: 0; }
	.rn-btn-line { min-width: 0; width: min(300px, 84vw); height: 50px; padding: 0 44px 0 28px; font-size: 16px; border-width: 1.5px; }
	.rn-btn-line::after { right: 22px; width: 8px; height: 8px; margin-top: -4px; border-width: 1.5px; }
	.rn-link-more { font-size: 14px; padding-right: 16px; }
}