/* デザイン幅375px基準。1rem = デザイン上の10px（画面幅に合わせて拡縮、PCでは最大600px） */
html { font-size: calc(min(100vw, 600px) / 37.5); }
:root {
  --gold: #937a18;
  --red: #d94652;
  --blue: #3999ff;
  --ink: #231815;
  --jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --jp-heavy: "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --round: "A1 Gothic", "a-otf-a1-gothic-std", "Zen Kaku Gothic New", var(--jp); /* デザインはA1ゴシック(Adobe Fonts) */
  --din: "DIN 2014", "din-2014", "Barlow Semi Condensed", sans-serif; /* デザインはDIN 2014(Adobe Fonts) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #e9ecf2; font-family: var(--jp); color: #000; -webkit-font-smoothing: antialiased; }
.page { max-width: 600px; margin: 0 auto; background: #fff; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- FV ---------- */
.fv { position: relative; aspect-ratio: 375 / 525; }
.fv > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 座標はイラレの値をそのまま使用: --x=左端, --b=ベースライン, --fs=文字サイズ(px) */
.t { position: absolute; white-space: nowrap; line-height: 1;
  left: calc(var(--x) * .1rem); top: calc((var(--b) - var(--fs) * .88) * .1rem);
  font-size: calc(var(--fs) * .1rem); letter-spacing: .05em; }
.w6 { font-weight: 700; }
.num { font-family: var(--din); font-weight: 600; letter-spacing: 0; }
.rd { font-family: var(--round); font-weight: 700; }
.wh { color: #fff; }
.bl { color: var(--blue); }
.bubble { transform: rotate(-3deg); transform-origin: 0 88%; }
.pink { color: #ef557a; }
.dark { color: #3e3a39; }

.fv-entry { position: absolute; left: 17.6rem; top: 0; width: 19.9rem; height: 5.1rem; color: #fff; text-decoration: none; }
.fv-entry span { position: absolute; left: 1.69rem; top: calc((29.3 - 14 * .88) * .1rem); font: 800 1.4rem/1 var(--jp-heavy); letter-spacing: .02em; }

/* ---------- POINT ---------- */
.points { position: relative; padding: .49rem 1.5rem 0;
  background: url(../img/points-bg.webp) top / 100% auto no-repeat; }
.points ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; row-gap: 2.02rem; padding-top: 1rem; }
.points li { position: relative; background: #fff; border-radius: .8rem;
  box-shadow: 0 .2rem .8rem rgba(40, 40, 60, .12);
  padding: 1.81rem 1rem 1.1rem; }
.points .label { position: absolute; left: 50%; top: -1rem; transform: translateX(-50%);
  width: 10rem; height: 2rem; border-radius: 1rem; background: var(--gold); color: #fff;
  font: 700 1.6rem/2rem var(--din); letter-spacing: .08em; text-align: center; }
.points h2 { text-align: center; font-weight: 700; font-size: 1.4rem; line-height: 2rem; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.points h2 em { font-style: normal; font-size: 2rem; color: var(--gold); letter-spacing: .04em; }
.points p { margin-top: .5rem; font-size: 1.2rem; line-height: 1.8rem; letter-spacing: .04em; font-feature-settings: "halt"; white-space: nowrap; }
/* デザイナーの改行位置を再現（1行ずつ両端揃え、最終行は左揃え） */
.points .ln { display: block; text-align: justify; text-align-last: justify; letter-spacing: -.01em; } /* 両端揃えで広げるので字間は最小にしておく */
.points mark { color: inherit; background: linear-gradient(transparent .25em, rgba(147, 122, 24, .3) .25em); padding-bottom: .1em; }

/* ---------- CTA ---------- */
.cta { padding: 3.42rem 1.5rem 2rem; background: #fff; }
.cta a { position: relative; display: block; height: 7rem; border-radius: 1rem; background: var(--red);
  border: .2rem solid #fff; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .28);
  color: #fff; text-decoration: none; text-align: center; }
.cta .sub { position: absolute; left: 50%; top: -1.3rem; transform: translateX(-50%);
  width: 30rem; height: 2.6rem; border-radius: 1.3rem; background: #fff; border: 1px solid var(--red);
  color: var(--red); font: 800 1.6rem/2.4rem var(--jp-heavy); white-space: nowrap; letter-spacing: .02em; }
.cta .main { display: block; padding-top: 2.3rem; font: 800 2.4rem/1 var(--jp-heavy); letter-spacing: .1em; }
.cta a::after { content: ""; position: absolute; right: 3.3rem; top: 50%; width: .7rem; height: .7rem;
  border-top: .2rem solid #fff; border-right: .2rem solid #fff; transform: translateY(-15%) rotate(45deg); }

/* ===== 共通：背景画像＋デザイン座標テキスト ===== */
.ov { position: relative; }
.ov-bg img { display: block; width: 100%; height: auto; }
.ov .t { z-index: 1; letter-spacing: 0; font-feature-settings: "halt"; }
.f3 { font-family: var(--jp); font-weight: 400; }
.f6 { font-family: var(--jp); font-weight: 700; }
.f8 { font-family: var(--jp-heavy); font-weight: 800; }
.fa { font-family: var(--round); font-weight: 700; }
.fd { font-family: var(--din); font-weight: 700; }
.fdm { font-family: var(--din); font-weight: 600; }
.fs { font-family: var(--jp); font-weight: 400; }
.it { font-style: italic; }
.glow { text-shadow: 0 0 .4rem #fff, 0 0 1rem #fff, 0 0 1.6rem #fff; }
.shade { text-shadow: 0 .2rem .8rem rgba(0, 0, 0, .55); }
.hot { position: absolute; z-index: 2; border-radius: 1rem;
  left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem);
  width: calc(var(--w) * .1rem); height: calc(var(--hh) * .1rem);
  transition: background-color .2s; }
.hot:hover { background: rgba(255, 255, 255, .12); }
.hot:focus-visible { outline: .3rem solid #3999ff; outline-offset: .2rem; }

/* ===== お客様の声（開閉カード） ===== */
.voice-cards { padding: .9rem 2.25rem 3.1rem;
  background: #fcf8f0 url(../img/voice-bg.webp) center top / 100% auto no-repeat; }
.vc { position: relative; font-feature-settings: "halt"; background: #fff; border-radius: 1rem;
  box-shadow: 0 .2rem .8rem rgba(80, 70, 40, .12); padding: 2.25rem 2rem 2.8rem; }
.vc + .vc { margin-top: 2rem; }
.vc h3 { font: 800 1.6rem/2.8rem var(--jp-heavy); color: var(--gold); text-align: center; letter-spacing: .05em; }
.vc-who { display: flex; align-items: flex-start; gap: 2rem; margin: .7rem 0 0 1.75rem; }
.vc-who img { width: 11rem; height: 11rem; border-radius: 50%; object-fit: cover; flex: none; }
.vc-role { display: block; width: 13rem; height: 2.5rem; margin-top: 2.9rem; background: var(--gold); color: #fff;
  font: 800 1.4rem/2.5rem var(--jp-heavy); letter-spacing: .3em; text-indent: .3em; text-align: center; }
.vc-name { margin-top: 1.2rem; font: 700 2rem/1 var(--jp); letter-spacing: .15em; }
.vc-body { position: relative; margin-top: 1.62rem; font-size: 1.4rem; line-height: 2.45rem; letter-spacing: .08em;
  text-align: justify; max-height: 13.78rem; overflow: hidden; }
.vc-body p + p { margin-top: 2.45rem; }
.vc-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.75rem;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.vc.open .vc-body { max-height: none; }
.vc.open .vc-body::after { display: none; }
.vc-more { display: block; margin: 0 auto; width: 13rem; height: 2.5rem; border: 1px solid var(--gold); background: #fff;
  color: var(--gold); font: 800 1.4rem/2.3rem var(--jp-heavy); letter-spacing: .12em; cursor: pointer; }
.vc-more::after { content: "＋"; margin-left: .8em; }
.vc-more .c, .vc.open .vc-more .o { display: none; }
.vc.open .vc-more .c { display: inline; }
.vc.open .vc-more::after { content: "ー"; }
.vc.open .vc-more { margin-top: 1.48rem; }

/* ===== FAQ ===== */
.faq { padding: .8rem 2.25rem 1rem; background: #fff; }
.qa { font-feature-settings: "halt"; background: #fff; border-radius: 1rem; box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .1); padding: 2.05rem 0 2.15rem .95rem; }
.qa + .qa { margin-top: 1.58rem; }
.qa summary { list-style: none; display: flex; align-items: baseline; cursor: pointer; padding-right: 1.75rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa-no { flex: none; width: 4.05rem; font: 700 2.4rem/1 var(--din); color: #172a80; letter-spacing: .08em; position: relative; top: .2rem; }
.qa-q { flex: 1; font: 700 1.6rem/2.5rem var(--jp); letter-spacing: .04em; }
.qa-ic { flex: none; position: relative; width: 1.5rem; height: 1.5rem; margin-left: .5rem; align-self: flex-start; top: .5rem; }
.qa-ic::before, .qa-ic::after { content: ""; position: absolute; left: 0; top: .65rem; width: 1.5rem; height: .2rem; background: #727171; transition: transform .2s; }
.qa-ic::after { transform: rotate(90deg); }
.qa[open] .qa-ic::after { transform: rotate(0); }
.qa-a { margin: 1rem 5rem 0 4.05rem; font-size: 1.2rem; font-weight: 700; line-height: 2.1rem; letter-spacing: .03em; }