/* 須賀（2丁目E棟・1丁目）— ペライチ版トレース（西大道と同じテンプレートのためCSSを流用） */
:root {
  --base: #f3f2ea;      /* ページ全体の地色 */
  --text: #5a5129;      /* 本文の茶 */
  --dark: #4a3f3d;      /* 濃い茶の帯 */
  --gold: #b49531;      /* 見出し金・フォーム帯 */
  --btn-gold: #755e00;
  --orange: #f47e00;
  --gray-band: #afafaf;
  --white: #fff;
  --wrap: 940px;
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--round);
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .04em;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h2, h3 { margin: 0; font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.sp-only { display: none; }

/* ---------- header ---------- */
.hd { background: var(--base); color: var(--text); position: sticky; top: 0; z-index: 40; }
.admin-bar .hd { top: 32px; }
.hd-in { max-width: 1200px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 90px; }
.hd-logo img { width: 130px; }
.hd-right { display: flex; align-items: center; gap: 12px; }
.hd-tel { text-align: right; font-size: 18px; line-height: 1.3; margin-right: 8px; }
.hd-tel .hd-hours { font-size: 11px; margin-top: 2px; }
.hd-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 36px; padding: 0 16px; color: var(--white); text-decoration: none; font-size: 13px; transition: opacity .2s; }
.hd-btn:hover { opacity: .85; }
.hd-btn-contact { background: var(--orange); }
.hd-btn-hp { background: var(--btn-gold); }

/* ---------- common ---------- */
.mv img, .full img { width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 24px; color: var(--white); text-decoration: none; font-size: 15px; transition: opacity .2s; text-align: center; }
.btn:hover { opacity: .85; }
.btn-orange { background: var(--orange); }
.btn-gold { background: var(--btn-gold); }
.btn-sm { font-size: 13px; min-height: 36px; padding: 6px 22px; }
.dash { height: 22px; background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--text) 4px 6px) center / 100% 7px no-repeat; }
.gold-h { color: var(--gold); text-align: center; font-size: 26px; margin-bottom: 18px; }

/* ---------- CTA ---------- */
.cta { padding: 40px 20px; background-size: 400px; }
.cta-box { max-width: var(--wrap); margin: 0 auto; border: 2px solid var(--text); background: rgba(255,255,255,.35); padding: 24px 50px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta .btn { width: 360px; max-width: 100%; font-size: 15px; }
.cta-info { font-size: 20px; line-height: 1.5; min-width: 0; }
.cta-info .cta-hours { font-size: 12px; margin-bottom: 4px; }

/* ---------- spec ---------- */
.spec { max-width: 800px; margin: 0 auto; padding: 30px 20px 50px; }
.acc { border-bottom: 2px solid var(--text); }
.acc summary { list-style: none; cursor: pointer; position: relative; padding: 24px 48px 14px 14px; font-size: 18px; font-weight: 700; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform .25s; }
.acc[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.acc-body { padding: 4px 14px 24px; font-size: 15px; line-height: 2; }
.dot { margin: 0; padding: 0; list-style: none; }
.dot li::before { content: "⚫︎"; }
.eq-h { margin-top: 6px; }
.price { font-size: 24px; font-weight: 700; }
.price-note { font-size: 13px; margin-top: 8px; line-height: 1.8; }

/* ---------- gallery / slider ---------- */
.gallery { padding: 40px 0 30px; }
.name-box { max-width: 680px; margin: 0 auto 30px; background: var(--dark); color: var(--gold); text-align: center; font-size: 26px; padding: 14px 20px; outline: 2px solid var(--dark); outline-offset: 3px; border: 1px solid var(--gold); }
.slider { position: relative; overflow: hidden; }
.slider-track { display: flex; transition: transform .6s ease; }
.slide { margin: 0; flex: 0 0 64%; padding: 0 6px; opacity: .55; transition: opacity .6s; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.slider-btn { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(40,40,40,.75); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.slider-btn.prev { left: calc(18% - 22px); }
.slider-btn.next { right: calc(18% - 22px); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.slider-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #ccc; cursor: pointer; }
.slider-dots button[aria-selected="true"] { background: #666; }

/* ---------- 360 tour ---------- */
.tour { max-width: var(--wrap); margin: 0 auto; padding: 20px 20px 50px; }
.tour-frame { aspect-ratio: 16 / 9; background: #12182a; }
.tour-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.tour-lead { text-align: center; font-size: 15px; margin-top: 30px; }

/* ---------- points (PC) ---------- */
.points { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: var(--white); align-items: center; }
.points-txt { padding: 40px 40px 40px max(40px, calc((100vw - 1200px) / 2)); }
.points-h { color: var(--gold); font-size: 26px; margin-bottom: 18px; }
.points h3 { font-size: 20px; margin: 18px 0 6px; }
.points p { font-size: 14px; }
.points .btn { margin-top: 22px; }
.points-img { align-self: stretch; }
.points-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- SP points ---------- */
.sp-points { background: var(--white); padding-bottom: 30px; }
.sp-pt { padding: 0 16px; margin-top: 26px; }
.sp-pt img { margin: 0 -16px 14px; max-width: calc(100% + 32px); width: calc(100% + 32px); }
.sp-pt h3 { font-size: 17px; margin-bottom: 8px; }
.sp-points .btn { display: flex; margin: 26px 16px 0; }

/* ---------- plan ---------- */
.plan { background: var(--white); }
.plan-pc { width: 100%; max-width: 1440px; margin: 0 auto; }
.wave-top { width: 100%; background: var(--base); }

/* ---------- loan ---------- */
.loan { text-align: center; padding: 20px 20px 40px; }
.loan .btn { width: 300px; max-width: 100%; font-size: 13px; min-height: 30px; }

/* ---------- 4D studio ---------- */
.studio { background: var(--base); }
.studio > picture img { width: 100%; }
.studio-lead { background: var(--gray-band); color: var(--white); text-align: center; font-size: 15px; padding: 26px 20px; }
.studio-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: var(--white); }
.studio-row.is-rev .studio-img { order: 2; }
.studio-img img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.studio-txt { padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.studio-no { color: var(--gold); font-size: 26px; }
.studio-txt .btn { align-self: flex-start; margin-top: 14px; }

/* ---------- housing ---------- */
.housing { background: var(--white); }
.housing img { width: 100%; }
.housing-txt { max-width: 760px; margin: 0 auto; padding: 30px 20px 40px; font-size: 14px; }

/* ---------- message ---------- */
.message { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: var(--white); }
.message-img img { width: 100%; height: 100%; object-fit: cover; }
.message-txt { padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-size: 13px; }
.message-txt h2 { color: var(--gold); font-size: 24px; margin-bottom: 6px; }
.message-sign { margin-top: 6px; }

/* ---------- windows ---------- */
.windows { background: #9c8f7a; padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ---------- access ---------- */
.access { padding: 0 20px 30px; }
.access .dash { margin: 0 -20px 30px; }
.access-addr { text-align: center; font-size: 17px; margin-bottom: 20px; }
.map { max-width: var(--wrap); margin: 0 auto; aspect-ratio: 940 / 530; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; padding: 30px 20px 50px; }

/* ---------- contact ---------- */
.contact { padding-bottom: 60px; }
.contact-h { background: var(--gold); color: var(--white); text-align: center; font-size: 24px; padding: 20px; position: relative; margin-bottom: 40px; }
.contact-h::after { content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); border: 14px solid transparent; border-bottom: 0; border-top-color: var(--gold); }
.contact-card { max-width: 800px; margin: 0 auto; background: var(--white); color: var(--text); padding: 24px 24px 30px; }

/* CF7 */
.vf-row { margin-bottom: 18px; }
.vf-label { display: block; font-size: 13px; margin-bottom: 4px; }
.vf-req { display: inline-block; background: #c4002a; color: #fff; font-size: 10px; line-height: 1; padding: 3px 5px; margin-left: 6px; vertical-align: 2px; border-radius: 2px; }
.contact-card .wpcf7-list-item { margin: 0 16px 4px 0; display: inline-block; }
.contact-card .wpcf7-list-item label { cursor: pointer; }
.contact-card input[type="radio"], .contact-card input[type="checkbox"] { margin: 0 6px 0 0; accent-color: #1ea0d6; vertical-align: -1px; }
.contact-card input[type="text"], .contact-card input[type="tel"], .contact-card input[type="email"] { width: 100%; border: 0; background: var(--base); padding: 10px 8px; font: inherit; font-size: 16px; color: var(--text); }
.contact-card input:focus { outline: 2px solid var(--gold); }
.contact-card ::placeholder { color: #aaa; }
.vf-submit { text-align: center; margin-top: 30px; position: relative; }
.contact-card input[type="submit"] { appearance: none; border: 0; background: var(--text); color: #fff; font: inherit; font-size: 15px; width: 200px; max-width: 100%; height: 40px; cursor: pointer; }
.contact-card input[type="submit"]:hover { opacity: .85; }
.contact-card .wpcf7-spinner { position: absolute; margin: 10px 0 0 10px; }
.vf-agree { font-size: 12px; margin-top: 8px; }
.contact-card .wpcf7-not-valid-tip { font-size: 12px; }
.contact-card .wpcf7-response-output { margin: 20px 0 0 !important; font-size: 13px; }
.vf-notice { font-size: 14px; text-align: center; padding: 20px 0; }
.vf-privacy-link { color: inherit; text-decoration: underline; }

/* ---------- footer ---------- */
.ft { text-align: center; font-size: 12px; padding: 40px 20px 60px; }
.ft a { color: inherit; }
.ft p + p { margin-top: 6px; }

/* ---------- LINE / SP bar ---------- */
.line-float { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 64px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.spbar { display: none; }

/* ---------- privacy policy ---------- */
.policy { background: var(--white); color: var(--text); }
.policy-in { max-width: 860px; margin: 0 auto; padding: 60px 20px 80px; }
.policy h1 { font-size: 28px; font-weight: 500; text-align: center; margin: 0 0 36px; }
.policy h2 { font-size: 19px; font-weight: 700; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
.policy h3 { font-size: 16px; font-weight: 700; margin: 26px 0 10px; }
.policy p { margin-bottom: 12px; line-height: 1.95; }
.policy .paren { list-style: none; margin: 0; padding: 0; line-height: 1.95; }
.policy-addr { background: var(--base); padding: 18px 22px; }
.policy-date { text-align: right; margin-top: 30px; }
.policy-back { text-align: center; margin-top: 40px; }

/* ---------- fade-in ---------- */
.fade { transition: opacity .8s, transform .8s; }
.js .fade.is-wait { opacity: .001; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider-track, .slide { transition: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .points-txt { padding: 36px 28px; }
  .message-txt { padding: 30px 24px; }
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .pc-only { display: none !important; }
  .sp-only { display: block; }
  .admin-bar .hd { top: 0; }
  .hd { position: relative; }
  .hd-in { min-height: 62px; padding: 10px 16px; }
  .hd-logo img { width: 120px; }
  .hd-right { display: none; }

  .cta { padding: 24px 16px; }
  .cta-box { flex-direction: column; padding: 22px 18px; text-align: center; gap: 16px; }
  .cta .btn { width: 100%; }
  .cta-info { font-size: 17px; }

  .spec { padding: 20px 16px 36px; }
  .acc summary { font-size: 16px; }

  .gallery { padding: 30px 0 20px; }
  .name-box { margin: 0 16px 20px; font-size: 20px; }
  .slide { flex-basis: 100%; padding: 0; opacity: 1; }
  .slider-btn { width: 36px; height: 36px; font-size: 24px; }
  .slider-btn.prev { left: 8px; }
  .slider-btn.next { right: 8px; }

  .tour { padding: 10px 16px 36px; }
  .tour-frame { aspect-ratio: 4 / 3; }
  .tour-lead { font-size: 14px; text-align: left; }
  .tour-lead br { display: none; }

  .studio-lead { font-size: 13px; padding: 20px 16px; }
  .studio-lead br { display: none; }
  .studio-row { grid-template-columns: 1fr; }
  .studio-row.is-rev .studio-img { order: 0; }
  .studio-txt { padding: 24px 16px 30px; }
  .studio-no { font-size: 22px; }

  .housing-txt { padding: 20px 16px 30px; }

  .message { grid-template-columns: 1fr; }
  .message-txt { padding: 30px 16px 36px; }

  .windows { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }

  .map { aspect-ratio: 4 / 3; }
  .faq { padding: 20px 16px 36px; }
  .contact-h { font-size: 20px; }
  .contact-card { margin: 0 16px; padding: 20px 16px 26px; }

  .ft { padding: 30px 16px calc(90px + env(safe-area-inset-bottom, 0px)); }

  .line-float { display: none; }
  .spbar { display: grid; grid-template-columns: 1fr 1fr 60px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--white); }
  .spbar a { display: flex; align-items: center; justify-content: center; height: 56px; color: #fff; text-decoration: none; font-size: 14px; }
  .spbar-contact { background: var(--orange); }
  .spbar-hp { background: var(--btn-gold); }
  .spbar-line { background: var(--white); }
  .spbar-line img { width: 48px; }

  .policy-in { padding: 40px 16px 60px; }
  .policy h1 { font-size: 22px; }
}

/* ---------- お支払いシミュレーション（背景画像＋テキスト） ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sim { position: relative; container-type: inline-size; overflow: hidden; color: #fdfdfd; font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; line-height: 1; letter-spacing: 0; }
.sim-bg { width: 100%; height: auto; display: block; }
.sim p { position: absolute; margin: 0; white-space: nowrap; }
.sim-l1, .sim-l2 { display: flex; align-items: baseline; }
.sim-price, .sim-monthly { font-family: "Barlow", "DIN Alternate", "Helvetica Neue", Arial, sans-serif; font-weight: 600; letter-spacing: .01em; }
.sim-price { color: #a88f58; text-shadow: .025em .035em 0 rgba(0,0,0,.55); }
.sim-monthly { text-shadow: .02em .03em .02em rgba(0,0,0,.6); }
.sim-man, .sim-tsuki, .sim-yen { font-weight: 400; }
.sim-l3, .sim-l4 { font-weight: 400; letter-spacing: .12em; }
.sim-note { color: #dadada; font-weight: 400; letter-spacing: .03em; line-height: 1.41; }

/* PC（1672×941 の画像に合わせた位置） */
.sim-l1 { left: 6.04%; top: calc(27.74% - .2em); font-size: 9.05cqw; }
.sim-l1 .sim-man { font-size: .265em; margin-left: .38em; }
.sim-l2 { left: 6.16%; top: calc(46.23% - .2em); font-size: 5.9cqw; }
.sim-l2 .sim-tsuki { font-size: .44em; margin-right: .36em; }
.sim-l2 .sim-yen { font-size: .44em; margin-left: .3em; }
.sim-l3 { left: 6.04%; top: calc(56.22% - .06em); font-size: 1.75cqw; letter-spacing: .26em; }
.sim-l4 { left: 6.1%; top: calc(60.79% - .06em); font-size: 1.75cqw; letter-spacing: .06em; }
.sim-note { left: 58.9%; top: calc(66.52% - .26em); font-size: 1.32cqw; }

/* スマホ（1080×1080 の画像に合わせた位置） */
@media (max-width: 767px) {
  .sim-l1 { left: 6.85%; top: calc(21.2% - .2em); font-size: 10.8cqw; }
  .sim-l1 .sim-man { font-size: .27em; margin-left: .36em; }
  .sim-l2 { left: 7.04%; top: calc(33.43% - .2em); font-size: 6.9cqw; }
  .sim-l2 .sim-tsuki { font-size: .46em; margin-right: .38em; }
  .sim-l2 .sim-yen { font-size: .46em; margin-left: .3em; }
  .sim-l3 { left: 6.85%; top: calc(41.67% - .06em); font-size: 2.7cqw; letter-spacing: .26em; }
  .sim-l4 { left: 6.94%; top: calc(45.74% - .06em); font-size: 2.7cqw; }
  .sim-note { left: 48.89%; top: calc(75.83% - .26em); font-size: 1.57cqw; line-height: 1.45; }
}

/* ===== 須賀専用 ===== */
.btn-yellow { background: #f1b800; }
.s-band { position: relative; background: #2f2a26; color: #d9b65c; text-align: center; font-size: 22px; font-weight: 500; letter-spacing: .1em; padding: 18px 20px; }
.s-band::after { content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 12px solid transparent; border-bottom: 0; border-top-color: #2f2a26; z-index: 1; }
.s-photo img { width: 100%; }
.s-lead { max-width: 800px; margin: 0 auto; padding: 30px 20px 0; font-size: 13px; text-align: center; }
.s-pd { color: #c4002a; font-weight: 700; }
.s-note { text-align: center; font-size: 11px; margin-top: 10px; }
.s-points { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--base); }
.s-points-img img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.s-points-txt { padding: 30px 40px; }
.s-points-txt h2 { color: var(--gold); font-size: 22px; margin-bottom: 12px; }
.s-points-txt h3 { font-size: 15px; font-weight: 500; margin-top: 12px; }
.s-points-txt p { font-size: 12px; }
.s-points-txt .btn { margin-top: 18px; }
.s-full img { width: 100%; }
.s-env { padding: 0 20px 50px; }
.s-env .dash { margin: 0 -20px 30px; }
.s-env-list { list-style: none; margin: 0 auto 40px; padding: 0; max-width: var(--wrap); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.s-env-list img { width: 150px; margin: 0 auto 6px; }
.s-env-name { font-size: 14px; font-weight: 500; }
.s-env-dist { font-size: 12px; }
.s-map { max-width: 600px; margin: 0 auto; }
.s-map h3 { color: var(--gold); font-size: 15px; border-bottom: 3px solid var(--text); padding-bottom: 4px; margin-bottom: 8px; }
.s-map .map { aspect-ratio: 4 / 3; }
.s-map dl { margin: 0; background: #e9e7de; font-size: 12px; padding: 8px 12px; }
.s-map dt { color: #888; }
.s-map dd { margin: 0; }
.windows img { width: 100%; }
@media (max-width: 767px) {
  .s-band { font-size: 18px; padding: 14px 16px; }
  .s-lead { padding: 22px 16px 0; text-align: left; }
  .s-lead br { display: none; }
  .s-points { grid-template-columns: 1fr; }
  .s-points-txt { padding: 24px 16px 30px; }
  .s-extra { width: 100%; max-width: 360px; margin: 16px auto 0; }
  .s-points-txt .btn { display: flex; }
  .s-env { padding: 0 16px 36px; }
  .s-env .dash { margin: 0 -16px 24px; }
  .s-env-list { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .s-env-list img { width: 110px; }
}
.contact-card textarea { width: 100%; height: 140px; border: 0; background: var(--base); padding: 10px 8px; font: inherit; font-size: 16px; color: var(--text); resize: vertical; }
.contact-card textarea:focus { outline: 2px solid var(--gold); }