/* RIBERUTA DESIGN V4
   オレンジ×ホワイトを主役にした軽い比較LPデザイン */
:root {
  --navy: #18334d;
  --navy-2: #284761;
  --blue: #f0642e;
  --blue-2: #ff9a27;
  --pale-blue: #fff4e8;
  --pale-blue-2: #ffead6;
  --orange: #ff9a27;
  --orange-2: #f0642e;
  --yellow: #ffd364;
  --ink: #18334d;
  --muted: #756b65;
  --line: #f0d8c1;
  --paper: #fffdf9;
  --shadow: 0 10px 24px rgba(186, 96, 34, .10);
}

body { background: #f4eadf; color: var(--ink); }
.site { background: #fffdf9; box-shadow: 0 0 30px rgba(180, 107, 53, .14); }

.header { background: rgba(255, 253, 249, .98); border-bottom: 3px solid #f0642e; box-shadow: 0 3px 13px rgba(174, 99, 43, .12); }
.brand { color: var(--ink); }
.brand__sub { color: #cc682f; }
.menu-button span:not(.visually-hidden) { background: #f0642e; }
.menu-button:hover, .menu-button:focus-visible { background: #fff0df; }
.header-menu { border-color: #f0d8c1; background: #fffdf9; box-shadow: 0 16px 30px rgba(174, 99, 43, .16); }
.header-menu a { border-color: #f4e3d4; color: var(--ink); }
.header-menu a:hover, .header-menu a:focus-visible { background: #fff0df; color: #e85628; }

.section-wrap { padding-right: 16px; padding-left: 16px; }
.section-heading__eyebrow { color: #e85628; font-size: .72rem; letter-spacing: .12em; }
.section-heading h2, .criteria h2, .selection-cta h2, .question h2 { color: var(--ink); letter-spacing: .02em; }
.section-heading p:not(.section-heading__eyebrow) { color: #7d7169; }

.notice { border-top: 1px solid #f0d0b0; border-bottom: 1px solid #f0d0b0; background: #fff4e8; }
.notice__inner { gap: 15px; padding: 22px 16px 23px; }
.notice__title { align-items: flex-start; }
.notice__icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; background: #f0642e; box-shadow: 4px 4px 0 rgba(232, 109, 36, .14); }
.notice h2 { color: var(--ink); }
.notice__list li { color: #695b53; }
.notice__list li::before { border-radius: 4px; background: #f0642e; }

.ranking-summary, .guide, .question { background: #fffdf9; }
.ranking-summary .section-heading, .ranking-detail .section-heading { max-width: none; margin-bottom: 21px; padding-left: 13px; border-left: 5px solid #f0642e; text-align: left; }
.summary-list { gap: 9px; }
.summary-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; padding: 10px; border: 1px solid #f0d8c1; border-left: 6px solid #ff9a27; border-radius: 10px; background: #fff; box-shadow: 0 5px 13px rgba(186, 96, 34, .07); }
.summary-row--gold { border: 2px solid #f0642e; border-left-width: 6px; background: #fff3e6; }
.summary-row--silver, .summary-row--bronze { background: #fff; }
.summary-row__rank { border-radius: 7px; background: #f0642e; }
.summary-row--gold .summary-row__rank { background: #e55327; }
.summary-row--bronze .summary-row__rank { background: #e28b54; }
.summary-row__body h3 { color: var(--ink); }
.summary-row__body p { color: #7b6c63; }
.summary-row__body p span { color: #e85628; }
.summary-row__link { border-radius: 7px; background: #f0642e; color: #fff; }
.summary-row--gold .summary-row__link { background: #e55327; }
.source-note { color: #8a776c; }

.criteria { border-top: 1px solid #f0d0b0; border-bottom: 1px solid #f0d0b0; background: #fff4e8; }
.criteria__inner { padding: 34px 16px; }
.criteria__intro > i { color: #f0642e; }
.criteria__intro h2 { color: var(--ink); }
.criteria__intro p { color: #806e63; }
.criteria__items { gap: 9px; }
.criteria__items > div { gap: 4px; padding: 10px 4px 9px; border: 1px solid #f0d8c1; border-radius: 9px; background: #fffdf9; }
.criteria__items span { width: 42px; height: 42px; border-radius: 11px; background: #f0642e; color: #fff; box-shadow: none; }
.criteria__items b { color: var(--ink); }
.criteria__items small { color: #8a776c; }
.criteria .button { border: 0; background: #f0642e; color: #fff; box-shadow: 0 4px 0 #c94b25; }

.guide-grid { gap: 10px; }
.guide-grid article { min-height: 0; padding: 17px 15px 16px; border: 1px solid #f0d8c1; border-left: 5px solid #ff9a27; border-radius: 10px; background: #fff; box-shadow: 0 5px 13px rgba(186, 96, 34, .06); text-align: left; }
.guide-grid article > i { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: #fff0df; color: #f0642e; font-size: 1.25rem; }
.guide-grid h3 { color: var(--ink); }
.guide-grid p { color: #74665e; }

.filter, .ranking-detail, .selection-cta { background: #fffaf5; }
.filter__box { border: 1px solid #f0d8c1; border-radius: 12px; box-shadow: 0 8px 19px rgba(186, 96, 34, .07); }
.filter__heading { border-bottom: 4px solid #ffb342; background: linear-gradient(100deg, #f0642e, #ff9a27); }
.filter__heading > i { color: #fff; }
.filter__heading p { color: #ffe9cc; }
.filter-group { border-bottom-color: #f2dfcf; }
.filter-group legend { border-left-color: #f0642e; color: var(--ink); }
.filter-group label { color: #6e5f57; }
.filter-group input { accent-color: #f0642e; }
.filter__footer { border-top: 1px solid #f2dfcf; background: #fffdf9; }
.filter__footer output { color: #806e63; }
.filter-submit { background: #f0642e; color: #fff; box-shadow: 0 4px 0 #c94b25; }

.rank-card { border: 1px solid #f0d8c1; border-radius: 11px; background: #fff; box-shadow: 0 8px 18px rgba(186, 96, 34, .08); }
.rank-card--top { border: 2px solid #f0642e; box-shadow: 0 11px 23px rgba(240, 100, 46, .14); }
.rank-card__head { border-bottom: 4px solid #ffb342; background: #fff0df; color: var(--ink); }
.rank-card--top .rank-card__head { background: linear-gradient(100deg, #f0642e, #ff9a27); color: #fff; }
.rank-card__head span { border-radius: 6px; background: #f0642e; color: #fff; }
.rank-card--top .rank-card__head span { background: rgba(255, 255, 255, .2); }
.rank-card__catch { color: #746057; }
.rank-image { border-color: #f0d8c1; border-radius: 7px; background: #fffaf4; }
.spec-table, .spec-table div { border-color: #f0d8c1; }
.spec-table dt { background: #fff0df; color: #a34d28; }
.spec-table dd { color: #514c4a; }
.official-button { border-radius: 8px; background: #f0642e; color: #fff; box-shadow: 0 4px 0 #c94b25, 0 8px 14px rgba(240, 100, 46, .14); }
.rank-card h4 { border-left: 5px solid #ff9a27; background: #fff5eb; color: var(--ink); }
.point-list li { color: #63564f; }
.point-list li::before { color: #f0642e; }
.voice-box p, .voice-box p::before { background: #fff0df; }
.voice-box p { color: #745f54; }
.no-results { border-color: #f0d8c1; background: #fff; }

.selection-cta__inner { min-height: 225px; border: 1px solid #f2b06a; border-radius: 15px; background: linear-gradient(135deg, #f0642e, #ff9a27); box-shadow: 0 11px 23px rgba(216, 99, 36, .14); }
.selection-cta h2 { color: #fff; }
.selection-cta__line { background: #fff; }
.selection-cta p { color: #fff0df; }
.selection-cta .button { background: #fff; color: #e85628; box-shadow: 0 4px 0 #d36b2b; }
.faq-list details { border-color: #f0d8c1; border-radius: 9px; background: #fff; }
.faq-list summary { color: var(--ink); }
.faq-list summary::after { color: #f0642e; }
.faq-list details p { color: #74665e; }

.footer { border-top: 5px solid #ffb342; background: #f0642e; color: #fff3e6; }
.footer__brand { color: #fff; }
.footer small { color: #ffe1b4; }
.fixed-cta { border-top-color: #f0642e; background: rgba(255, 253, 249, .96); box-shadow: 0 -5px 15px rgba(186, 96, 34, .12); }
.fixed-cta a { border-radius: 10px; background: linear-gradient(100deg, #f0642e, #ff9a27); color: #fff; box-shadow: 0 4px 0 #c94b25, 0 7px 14px rgba(216, 99, 36, .16); }

/* final image lock */
.fv__inner { aspect-ratio: 430 / 622; min-height: 0; }
.fv__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.fv__inner::after, .fv::after { display: none; }

/* temporary composition for the new ImageGen artwork */
.fv__inner { position: relative; overflow: hidden; background: #fffdf9; }
.fv-v4__background { position: absolute; inset: 0; z-index: 0; background: url("../images/fv-orange-v4-bg.png") center / 100% 100% no-repeat; }
.fv-v4__copy { position: absolute; top: 6.8%; left: 6.6%; z-index: 2; width: 54%; color: var(--ink); }
.fv-v4__meta { display: flex; align-items: center; gap: 6px; margin: 0 0 13px; color: #8b6f60; font-size: .47rem; font-weight: 700; line-height: 1.1; }
.fv-v4__meta span { display: inline-grid; place-items: center; min-width: 27px; padding: 4px 6px; border-radius: 4px; background: #f0642e; color: #fff; font-size: .56rem; font-weight: 900; }
.fv-v4__eyebrow { margin: 0 0 6px; color: #e85628; font-size: .62rem; font-weight: 900; letter-spacing: .05em; line-height: 1.2; }
.fv-v4__copy h1 { margin: 0; color: var(--ink); font-size: clamp(1.45rem, 6.4vw, 2.1rem); font-weight: 900; letter-spacing: -.06em; line-height: 1.05; white-space: nowrap; }
.fv-v4__copy h1 em { color: #f0642e; font-style: normal; letter-spacing: -.06em; }
.fv-v4__lead { margin: 11px 0 0; color: #6b5c55; font-size: .66rem; font-weight: 700; line-height: 1.55; }
.fv-v4__lead strong { color: var(--ink); font-weight: 900; }
.fv-v4__chips { display: flex; gap: 4px; width: 112%; margin-top: 12px; }
.fv-v4__chips span { flex: 1 1 0; padding: 5px 3px; border: 1px solid #f0642e; border-radius: 4px; background: rgba(255, 255, 255, .82); color: #d95427; font-size: .56rem; font-weight: 900; line-height: 1.1; text-align: center; white-space: nowrap; }
.fv-v4__badge { position: absolute; top: 51.5%; left: 6.5%; z-index: 2; display: grid; gap: 2px; padding: 9px 10px 8px; border: 2px solid #fff; border-radius: 7px; background: #f0642e; color: #fff; box-shadow: 0 4px 0 rgba(203, 75, 37, .22); transform: rotate(-7deg); }
.fv-v4__badge strong { font-size: 1rem; font-weight: 900; line-height: 1; }
.fv-v4__badge span { font-size: .55rem; font-weight: 800; line-height: 1.1; }
.fv-v4__cta { position: absolute; right: 6%; bottom: 4.5%; left: 6%; z-index: 3; display: grid; gap: 3px; padding: 9px 14px 10px; border: 2px solid #fff; border-radius: 8px; background: linear-gradient(100deg, #f0642e, #ff9a27); color: #fff; text-align: center; box-shadow: 0 5px 0 rgba(203, 75, 37, .3); }
.fv-v4__cta span { color: #fff3d7; font-size: .56rem; font-weight: 800; line-height: 1.05; }
.fv-v4__cta b { font-size: .94rem; font-weight: 900; line-height: 1.2; }
.fv-v4__cta i { margin-left: 7px; color: #fff; }

/* FV proportion fix: photo keeps its aspect ratio; copy follows the safe area */
.fv__inner { aspect-ratio: 430 / 622; min-height: 0; position: relative; overflow: hidden; }
.fv-v5__background { position: absolute; inset: 0; z-index: 0; background: url("../images/fv-orange-v4-bg.png") 68% center / cover no-repeat; }
.fv-v5__copy { position: absolute; top: 6.8%; left: 6.6%; z-index: 2; width: 54%; color: var(--ink); }
.fv-v5__meta { display: flex; align-items: center; gap: 6px; margin: 0 0 13px; color: #8b6f60; font-size: .47rem; font-weight: 700; line-height: 1.1; }
.fv-v5__meta span { display: inline-grid; place-items: center; min-width: 27px; padding: 4px 6px; border-radius: 4px; background: #f0642e; color: #fff; font-size: .56rem; font-weight: 900; }
.fv-v5__eyebrow { margin: 0 0 6px; color: #e85628; font-size: .62rem; font-weight: 900; letter-spacing: .05em; line-height: 1.2; }
.fv-v5__copy h1 { margin: 0; color: var(--ink); font-size: clamp(1.45rem, 6.4vw, 2.1rem); font-weight: 900; letter-spacing: -.06em; line-height: 1.05; white-space: nowrap; }
.fv-v5__copy h1 em { color: #f0642e; font-style: normal; letter-spacing: -.06em; }
.fv-v5__lead { margin: 11px 0 0; color: #6b5c55; font-size: .66rem; font-weight: 700; line-height: 1.55; }
.fv-v5__lead strong { color: var(--ink); font-weight: 900; }
.fv-v5__chips { display: flex; gap: 4px; width: 100%; margin-top: 12px; }
.fv-v5__chips span { flex: 1 1 0; padding: 5px 3px; border: 1px solid #f0642e; border-radius: 4px; background: rgba(255, 255, 255, .82); color: #d95427; font-size: .56rem; font-weight: 900; line-height: 1.1; text-align: center; white-space: nowrap; }
.fv-v5__badge { position: absolute; top: 51.5%; left: 6.5%; z-index: 2; display: grid; gap: 2px; padding: 9px 10px 8px; border: 2px solid #fff; border-radius: 7px; background: #f0642e; color: #fff; box-shadow: 0 4px 0 rgba(203, 75, 37, .22); transform: rotate(-7deg); }
.fv-v5__badge strong { font-size: 1rem; font-weight: 900; line-height: 1; }
.fv-v5__badge span { font-size: .55rem; font-weight: 800; line-height: 1.1; }
.fv-v5__cta { position: absolute; right: 6%; bottom: 4.5%; left: 6%; z-index: 3; display: grid; gap: 3px; padding: 9px 14px 10px; border: 2px solid #fff; border-radius: 8px; background: linear-gradient(100deg, #f0642e, #ff9a27); color: #fff; text-align: center; box-shadow: 0 5px 0 rgba(203, 75, 37, .3); }
.fv-v5__cta span { color: #fff3d7; font-size: .56rem; font-weight: 800; line-height: 1.05; }
.fv-v5__cta b { font-size: .94rem; font-weight: 900; line-height: 1.2; }
.fv-v5__cta i { margin-left: 7px; color: #fff; }

/* 添付されたFV画像を元の比率のまま表示 */
.fv__inner { aspect-ratio: 750 / 1085; }
.fv__image { width: 100%; height: auto; max-width: none; object-fit: contain; }