@charset "utf-8";

/* =========================================================
   LOOPIA — TOP
   Figma: 五日市塗装工業さま / LOOPIA TOP_TOPデザイン (346:22)
   Canvas 1280px, content column 1024px
   ========================================================= */

/* ---------- design tokens ---------- */
:root {
  --paper:        #c1b5a7;   /* ブランドベース（プレート・見出し） */
  --paper-dim:    #ada291;
  --ink:          #0a0a0a;
  --ink-soft:     #1f1f1f;

  --gold:         #ffc26c;   /* ボタン文字 */
  --btn-from:     #9b5923;
  --btn-to:       #803030;
  --btn-border:   #88732f;

  --cta-bg:       #3f4144;
  --cta-ring-1:   #414750;
  --cta-ring-2:   #565e68;

  --brand-red:    #842f2d;
  --brand-green:  #13562f;
  --tag:          #ff9290;

  --footer-bg:    #1f1f1f;
  --footer-link:  #9d9d9d;

  --scrim:        rgba(0, 0, 0, .7);

  --font-en: "DIN", "DIN Alternate", "DIN Next", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* body の基本フォント。Mac/iPhone 用（-apple-system・BlinkMacSystemFont・ヒラギノ）を追加（2026-09-23） */
  --font-jp: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Yu Gothic", sans-serif;

  --page:   1280px;
  --column: 1024px;
  --gutter: 32px;

  --sp-header-h: 72px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper);
  background: #0b0b0b url("../img/top/images/brick-dark.jpg") repeat center top;
  background-size: 980px auto;
  overflow-x: hidden;
}

/* すべてのセクションに敷かれる暗幕（Figma: 画像 + rgba(0,0,0,.7)） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
  z-index: 0;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* SP でのみ有効な改行 */
.br-sp { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- layout helpers ---------- */
.container {
  width: min(var(--column), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  position: relative;
  z-index: 1;
  padding-block: 60px;
}

/* =========================================================
   ボタン（Figma: 240×43 / r44 / #9b5923→#803030 / border #88732f）
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 43px;          /* Figma 346:745: 240×43 */
  max-width: 100%;
  padding: 0 24px;
  border: 1px solid var(--btn-border);
  border-radius: 44px;
  background: linear-gradient(180deg, var(--btn-from) 0%, var(--btn-to) 100%);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25);
  color: var(--gold);
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: filter .25s ease, transform .25s ease;
}
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.95); }
.btn--wide { width: 200px; }

/* =========================================================
   飾りプレート見出し（Figma: Group 2147205167 + テキスト）
   SVG は js/main.js が要素幅に合わせて生成
   ========================================================= */
.plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(var(--plate-w, 301px), 100%);
  min-height: 62.39px;
  padding: 12px 36px;
  font-weight: 400;
}
.plate--center { margin-inline: auto; }

.plate__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.plate > span {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  color: var(--ink);
}

/* 上下の二重罫（Figma: Line 137/138/139/140） */
.header__rules { position: absolute; inset: 0; pointer-events: none; }
.header__rules::before,
.header__rules::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background-image:
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft));
  background-repeat: no-repeat;
}
.header__rules::before {
  top: 2px;
  background-size: 100% 3px, 100% 1px;
  background-position: 0 0, 0 5px;
}
.header__rules::after {
  bottom: 2px;
  background-size: 100% 1px, 100% 3px;
  background-position: 0 0, 0 3px;
}

.header__inner {
  position: relative;
  width: min(var(--column), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 19px;
}

.logo { display: flex; align-items: center; gap: 8px; }
.logo__mark { width: 60px; height: 51.65px; }
.logo__word { width: 88px; height: 16px; }

.header__right { display: flex; align-items: center; gap: 24px; }
.header__utility { display: flex; align-items: center; gap: 16px; }

.sns, .footer__sns { display: flex; align-items: center; gap: 8px; }
.sns__item { display: block; width: 40px; height: 40px; transition: opacity .2s ease; }
.sns__item:hover { opacity: .7; }
.sns__item--boxed {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
.sns__item--boxed img {
  width: 24px;
  height: 24px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.nav a { transition: opacity .2s ease; }
.nav a:hover { opacity: .6; }

.header__burger { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  width: min(var(--page), 100%);
  margin-inline: auto;
  height: 542px;
}

.hero__copy { position: absolute; left: 40px; top: 128px; z-index: 3; }

.hero__title { margin: 0 0 16px; }
.hero__title-box {
  display: inline-block;
  padding: 16px 24px;
  background: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
}

.hero__lead {
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
/* 見出し2行目と本文の間隔（Figma: 410 → 443 = 33px。上の margin と相殺される） */
.hero__title + .hero__lead { margin-top: 33px; }

.hero__shot {
  position: absolute;
  width: 365px;
  height: 512px;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
.hero__shot--front { left: 471px; top: 30px; z-index: 2; }
.hero__shot--back  { left: 875px; top: 0;    z-index: 1; }

/* SCROLL インジケーターとヒーロー下部の全幅ボタンは SP 専用 */
.hero__scroll,
.hero__cta { display: none; }

/* まわる円形テキスト（Figma: Linked Path Group 346:598） */
.hero__ring {
  position: absolute;
  left: 716px;
  top: -225px;
  width: 660px;
  height: 660px;
  z-index: 4;
  pointer-events: none;
  animation: ring-spin 40s linear infinite;
}
.hero__ring-text {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .18em;
  fill: #fff;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* SCROLL の縦罫を上から下へ光が流れる（SP のみ表示される要素） */
@keyframes scroll-line {
  0%   { background-position: 0 -48px, 0 0; }
  100% { background-position: 0 136px, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ring,
  .hero__scroll::after { animation: none; }
}

/* =========================================================
   ANNOUNCE（2026年秋 ショールームオープン）
   ========================================================= */
.announce {
  position: relative;
  z-index: 1;
  padding-block: 48px 16px;
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.announce__line {
  flex: 1 1 auto;
  max-width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.announce__inner .announce__line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.announce__text {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--paper);
  white-space: nowrap;
}

.announce__label {
  font-family: var(--font-en);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
}

/* =========================================================
   SERVICE
   ========================================================= */
.service { position: relative; overflow-x: clip; padding-block: 32px 60px; }

/* .service__decor {
  position: absolute;
  right: -248px;
  top: 584px;
  width: 596px;
  height: 484px;
  background: url("../img/top/images/decor-globe.jpg") center / cover no-repeat;
  opacity: .12;
  pointer-events: none;
} */

.service .container{
  width: min(var(--column), calc(100% - 48px));
}

.service__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.svc-card {
  position: relative;
  min-height: 238px;
  padding: 24px 32px;
  border: 1px solid rgba(193, 181, 167, .55);
  border-radius: 12px;
  background: url("../img/top/images/brick-red.jpg") center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .68) 100%);
}
.svc-card > * { position: relative; }

.svc-card .plate { margin-left: 0; }
/* Figma 346:38: プレート62.39 + 16 + 本文52 + 16 + ボタン43 = 189.39 */
.svc-card__text {
  margin: 16px 0;
  font-size: 13px;
  line-height: 2;
  color: var(--paper);
}

.svc-card--wide { margin-top: 32px; min-height: 194px; padding: 32px; }
.svc-card--wide .plate { margin-inline: auto; }
.svc-card__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 25px;
}
.svc-card__headline {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--paper);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about { padding-block: 60px 96px; overflow: hidden; }

.about__scatter { position: absolute; inset: 0; pointer-events: none; }
.about__ph {
  position: absolute;
  display: block;
  background-size: cover;
  background-position: center;
}
.about__ph--a { left: 0;    top: 163px;  width: 460px; height: 283px; }
.about__ph--b { left: 40px; top: 566px;  width: 320px; height: 197px; }
.about__ph--c { right: 0;   top: 446px;  width: 460px; height: 283px; }
.about__ph--d { right: 260px; top: 849px; width: 320px; height: 197px; }
.about__ph--e { left: 0;    top: 1066px; width: 320px; height: 197px; }
.about__ph--f { right: 0;   top: 1152px; width: 460px; height: 283px; }

.about__inner { position: relative; }

.about__story {
  margin-top: 52px;
  text-align: center;
  font-size: 16px;
  line-height: 2.15;
  color: var(--paper);
}
.about__story p + p { margin-top: 2.15em; }

.about__medallion {
  position: relative;
  margin: 48px auto 0;
  width: 464px;
  max-width: 100%;
  min-height: 464px;
  display: grid;
  place-items: center;
}
.about__medallion-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("../img/top/images/about-medalion.jpg") center / cover no-repeat;
  opacity: .55;
}
.about__medallion-copy { position: relative; text-align: center; width: min(475px, 100%); }

.about__m-small  { font-size: 16px; line-height: 2; color: var(--paper); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.about__m-lead   { margin-top: 1.6em; font-size: 16px; line-height: 1.5; color: var(--paper); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.about__m-strong { font-size: 28px; font-weight: 700; line-height: 1.4; color: var(--paper); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.about__m-close  { margin-top: 1.2em; font-size: 20px; font-weight: 700; line-height: 1.7; color: var(--paper); text-shadow: 0 2px 8px rgba(0,0,0,.8); }

.about__cta { margin-top: 48px; text-align: center; }

/* =========================================================
   NEWS
   ========================================================= */
.news { padding-block: 60px 100px; } /* OTHER SERVICES との間を +100px */

/* Figma の装飾画像は Mask group（縁がぼける）なので同等のフェードを掛ける。
   これが無いと画像の矩形の縁が背景に見えてしまう */
.service__decor {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
}

/* 装飾画像・左（Figma 346:537 Mask group / 画像 346:539）
   画像ボックス: canvas x0 y2710 250×307、NEWS フレーム(y2709)基準で left0 / top1。
   1280 キャンバス左端なので、他の装飾と同じく中央から -640px で固定する。
   背景の拡大率は Figma の 512% × 278.51%、位置は -211.26% × -46.27%
   （= 250×307 に対して -528.15px / -142.05px）。 */
.news__decor {
  position: absolute;
  top: -242px;
  width: 534px;
  height: 720px;
  background-image: url("../img/top/images/decor-globe.png");
}

.news__rail {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  /* デフォルト(3件以下): 横スクロールさせず、.container 幅に収めて中央寄せ
     （見出しの .container と左右位置を揃える） */
  width: min(var(--column), 100% - var(--gutter) * 2);
  justify-content: center;
  margin-inline: auto;
  /* auto: 通常は収まって非表示だが、極端に狭い画面幅でも
     カードが見切れず必ずスクロールで見られるようにする保険 */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* 4件以上になったら横スクロールのレールに切り替える
   （画面幅に関わらず件数で判定。カード幅は固定302pxのまま） */
.news__rail:has(.news-card:nth-child(4)) {
  width: auto;
  justify-content: flex-start;
  margin-inline: 0;
  /* 左パディングだと scroll-snap が食って見出しカラムより左に寄る。
     レール自体を .container と同じ左端に置き、右だけ画面端まで伸ばす */
  margin-inline-start: max(var(--gutter), calc((100% - var(--column)) / 2));
  padding-inline-end: max(var(--gutter), calc((100% - var(--column)) / 2));
  overflow-x: auto;
}
.news__rail::-webkit-scrollbar { display: none; }

/* マウスでドラッグ中はスナップを外して指に追従させる（js/top.js initNews） */
.news__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.news.is-scrollable .news__rail { cursor: grab; }

/* 前へ／次へボタン：横スクロールが発生しているときだけ表示 */
.news__nav {
  display: none;
  justify-content: flex-end;
  gap: 16px;
  width: min(var(--column), 100% - var(--gutter) * 2);
  margin: 24px auto 0;
}
.news.is-scrollable .news__nav { display: flex; }
.news__arrow {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  transition: filter .2s ease, opacity .2s ease;
}
.news__arrow > img:first-child { width: 100%; height: 100%; }
.news__arrow:hover:not(:disabled) { filter: brightness(1.15); }
.news__arrow:disabled { opacity: .35; cursor: default; }
.news__arrow-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 12px;
  transform: translate(-50%, -50%);
}
.news__arrow--prev .news__arrow-glyph { transform: translate(-50%, -50%) rotate(180deg); }

.news-card {
  position: relative;
  flex: 0 0 302px;
  padding-bottom: 16px;
  scroll-snap-align: start;
}
.news-card__date { display: block; font-size: 14px; color: var(--paper); }
.news-card__tag {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 12px;
  border: 1px solid var(--tag);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tag);
}
.news-card__title { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--paper); }
.news-card__body {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .75);
}
.news-card__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-size: 100% 3px, 100% 1px;
  background-position: 0 0, 0 6px;
}

/* =========================================================
   OTHER SERVICES
   ========================================================= */
.other { padding-block: 60px; }

.other__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 41px;
}

.other-card {
  position: relative;
  min-height: 367px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.other-card::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.other-card__body { position: relative; padding: 0 30px 28px; }
.other-card__body h3 { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
.other-card__body p { margin-top: 12px; font-size: 13px; line-height: 20px; color: #fff; }
.other-card__body .btn { margin-top: 24px; }

/* =========================================================
   EVENT / SEMINAR
   ========================================================= */
.event { padding-block: 60px; overflow: hidden; }
.event__decor {
    position: absolute;
    top: -20px;
    left: 200px;
    width: 547px;
    height: 480px;
    background: url(../img/top/images/decor-globe-seminor.png) center / cover no-repeat;
}
.event__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
}
.event__copy { flex: 1 1 280px; min-width: 0; }
.event__text { margin: 40px 0 24px; font-size: 16px; line-height: 2; color: var(--paper); }
.event__figure { flex: 1 1 240px; min-width: 0; max-width: 506px; }
.event__figure img {
  width: 100%;
  height: auto; /* 写真は切らずに全体表示 */
  border-radius: 6px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding-block: 60px;  }
.faq__decor {
  position: absolute;
  left: -20px;
  top: -80px;
  width: 467px;
  height: 500px;
  background: url("../img/top/images/decor-globe-faq.png") left center / cover no-repeat;
}
.faq__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.faq__list { position: relative; margin-top: 32px; display: grid; gap: 22px; }

.faq-item { border-radius: 8px; background: var(--paper); overflow: hidden; }

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 20px;
  text-align: left;
  color: var(--ink);
}
.faq-item__q[aria-expanded="true"] {
  border-bottom: 1px solid #6c6c6c;
}

.faq-item__mark { position: relative; flex: 0 0 32px; height: 31px; display: block; }
.faq-item__mark img { width: 32px; height: 31px; }
.faq-item__mark em {
  position: absolute;
  inset: 4px 0 0;
  display: grid;
  place-items: center;
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--ink);
}

.faq-item__text { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.6; }

.faq-item__toggle {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.faq-item__toggle::before { content: "＋"; }
.faq-item__q[aria-expanded="true"] .faq-item__toggle::before { content: "−"; }

.faq-item__a {
  display: none;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  color: var(--ink);
}
.faq-item__q[aria-expanded="true"] + .faq-item__a { display: flex; }
.faq-item__a p { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; }

/* =========================================================
   VOICE
   ========================================================= */
.voice { padding-block: 60px 80px; }
.voice__decor {
  position: absolute;
  right: 0px;
  top: -100px;
  width: 547px;
  height: 400px;
  background: url(../img/top/images/decor-globe-voice.png) center / cover no-repeat;
}
.voice__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.voice__desc { font-size: 16px; line-height: 24px; color: var(--paper); text-align: right; }

.voice__carousel {
  position: relative;
  margin-top: 103px;
  padding-bottom: 24px;
}

.voice__track {
  display: flex;
  gap: 56px;
  width: 650px;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.voice-card {
  position: relative;
  flex: 0 0 100%;
  height: 400px;
  border: 1px solid var(--paper);
  overflow: visible;
}
.voice-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-card__scrim {
  position: absolute;
  inset: 0;
}
.voice-card__thumb {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 240px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.voice-card__quote {
  position: absolute;
  left: 32px;
  bottom: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 292px;
}
.voice-card__badge { flex: none; width: 47px; height: 52px; }
.voice-card__badge img { width: 47px; height: 52px; }
.voice-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.voice-card__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.voice-card__text { font-size: 16px; line-height: 24px; color: #fff; }

.voice__arrow {
  position: absolute;
  top: 200px;
  width: 80px;
  height: 80px;
  transform: translateY(-50%);
  transition: filter .2s ease;
}
.voice__arrow:hover { filter: brightness(1.15); }
.voice__arrow--prev { left: calc(50% - 365px); }
.voice__arrow--next { right: calc(50% - 365px); }
.voice__arrow-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25.5px;
  height: 17.3px;
  transform: translate(-50%, -50%);
}
.voice__arrow--prev .voice__arrow-glyph { transform: translate(-50%, -50%) rotate(180deg); }

.voice__cta { position: relative; margin-top: 64px; text-align: center; }

/* =========================================================
   COMPANY
   ========================================================= */
.company { padding: 60px 80px 120px; overflow: hidden; }
.company__decor {
  position: absolute;
  width: 412px;
  height: 753px;
}
.company__decor--l {
  left: 0;
  top: 100px;
  background: url("../img/top/images/decor-globe-company.png") center / contain no-repeat;
}
.company__decor--r {
  right: 0;
  bottom: 100px;
  background: url("../img/top/images/decor-globe-company-2.png") center / contain no-repeat;
}

.company__head,
.staff { position: relative; }

.company__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.company__body {
  position: relative;
  display: flex;
  gap: 44px;
  margin-top: 31px;
}

.company__table { flex: 0 1 540px; }
.company__row {
  display: flex;
  gap: 16px;
  padding: 14px 0 21px;
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 3px;
  background-position: 0 calc(100% - 6px), 0 100%;
}
.company__row dt {
  flex: 0 0 104px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--paper);
}
.company__row dd {
  flex: 1;
  font-size: 16px;
  line-height: 1.4;
  color: var(--paper);
}
.company__row dd a:hover { text-decoration: underline; }

.company__map {
  flex: 0 1 440px;
  width: 440px;
  max-width: 100%;
  min-width: 0;
}
.company__map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 394px;
  border: 0;
  border-radius: 2px;
}

.staff { margin-top: 72px; }
.staff__title {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--paper);
}
.staff__grid {
  /* 3列固定のグリッドではなく、横並び・中央揃えのレールにする。
     人数が増減してもカード幅は変えずに折り返して中央に並ぶ */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.staff-card {
  position: relative;
  flex: 1 1 calc((100% - 24px * 2) / 3);
  max-width: calc((100% - 24px * 2) / 3);
  /* 写真を切らずに全体表示：高さは各写真の縦横比（HTML の --ar）で決める */
  height: auto;
  aspect-ratio: var(--ar, 4 / 3);
  align-self: flex-start;
  border-radius: 4px;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}
.staff-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, 0) 60%);
}
.staff-card__body { position: absolute; left: 20px; right: 20px; bottom: 16px; }
.staff-card__name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--paper); }
.staff-card__name span { margin-left: 8px; font-size: 16px; font-weight: 400; }
.staff-card__desc { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--paper); }

/* =========================================================
   CTA
   ========================================================= */
.cta {
  position: relative;
  z-index: 1;
  height: 390px;
  background: var(--cta-bg);
  overflow: hidden;
}

.cta__pattern {
  position: absolute;
  top: 0;
  width: 330px;
  height: 390px;
  background: url("../img/top/icons/cta-pattern.svg") no-repeat center / contain;
}
.cta__pattern--l { left: 0; }
.cta__pattern--r { right: 0; transform: scaleX(-1); }

.cta__ring {
  position: absolute;
  left: 50%;
  border-radius: 50%;
}
.cta__ring--1 { width: 672px; height: 672px; top: -114px; margin-left: -336px; background: var(--cta-ring-1); }
.cta__ring--2 { width: 632px; height: 632px; top: -89px;  margin-left: -316px; background: var(--cta-ring-2); }
.cta__ring--3 { width: 592px; height: 592px; top: -69px;  margin-left: -296px; background: var(--paper); }

.cta__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 24px;
  text-align: center;
  color: var(--ink-soft);
}

.cta__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.cta__logo-mark { width: 90px; height: 77.5px; }
.cta__logo-word { width: 132px; height: 24px; }

.cta__title  { font-size: 30px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.cta__sub    { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.cta__strong { margin-top: 18px; font-size: 32px; font-weight: 900; letter-spacing: .02em; }
.cta__strong .is-red   { color: var(--brand-red); }
.cta__strong .is-green { color: var(--brand-green); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  z-index: 1;
  padding-block: 48px 42px;
  background: var(--footer-bg);
}

.footer__menu { display: flex; align-items: flex-start; gap: 32px; }

.footer__info { flex: 0 0 236px; display: flex; flex-direction: column; gap: 24px; }

.footer__contact { display: flex; flex-direction: column; gap: 6px; }
.footer__contact-name {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.footer__contact-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--footer-link);
}

.footer__col { flex: 0 1 248px; display: flex; flex-direction: column; }
.footer__col-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  width: 208px;
  max-width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.footer__col a {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  transition: color .2s ease;
}
.footer__col a:hover { color: #fff; }

/* Figma 346:521: メニュー下端265 → hr 288（23px） */
.footer__hr { margin: 23px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .4); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 23px;
  font-size: 13px;
  line-height: 16px;
  color: #fff;
}
.footer__bottom a { color: #fff; }
.footer__bottom a:hover { text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* HERO は段落ちさせず、1280px デザインを画面幅に合わせて等比縮小 */
@media (max-width: 1279px) and (min-width: 769px) {
  .hero { height: calc(100vw * 542 / 1280); }
  .hero__inner {
    width: 1280px;
    transform: scale(calc(100vw / 1280px));
    transform-origin: top left;
  }
}

/* ABOUT 透かしは 1280 基準の配置を画面幅に合わせて縮小（消さない） */
@media (max-width: 1279px) and (min-width: 769px) {
  .about__scatter {
    width: 1280px;
    left: 50%;
    right: auto;
    margin-left: -640px;
    transform: scale(calc(100vw / 1280px));
    transform-origin: top center;
  }
}

/* =========================================================
   SP ヘッダー / ハンバーガーメニュー
   Figma: SP / LOOPIA TOP (375)MENU (371:1413)
   ヘッダー72px・内側16px、メニューは #c1b5a7 の全画面オーバーレイ
   ========================================================= */
/* ヘッダーは 1199px 以下でハンバーガーメニュー（2026-09-23 変更。元は 1023px） */
@media (max-width: 1199px) {
  .header__inner {
    width: 100%;
    min-height: var(--sp-header-h);
    padding: 0 16px;
    gap: 0;
  }

  /* SP はロゴが一回り小さい（Figma: 51.23×44.1 / 74.99×13.66） */
  .logo { gap: 6.83px; }
  .logo__mark { width: 51.23px; height: 44.1px; }
  .logo__word { width: 74.99px; height: 13.66px; }

  /* 上下の二重罫: 上=2px+1px / 下=1px+2px */
  .header__rules::before {
    top: 0;
    height: 5px;
    background-size: 100% 2px, 100% 1px;
    background-position: 0 0, 0 4px;
  }
  .header__rules::after {
    bottom: 2px;
    height: 4px;
    background-size: 100% 1px, 100% 2px;
    background-position: 0 0, 0 2px;
  }

  /* ハンバーガー / クローズボタン（バー 24×2.18, #25211d） */
  .header__burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    margin-right: -10px;
  }
  .header__burger span {
    grid-area: 1 / 1;
    display: block;
    width: 24px;
    height: 2.18px;
    border-radius: 1.09px;
    background: #25211d;
    transition: transform .3s ease, opacity .2s ease;
  }
  .header__burger span:nth-child(1) { transform: translateY(-7px); }
  .header__burger span:nth-child(3) { transform: translateY(7px); }
  .header__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  /* 全画面オーバーレイ */
  .header__right {
    position: fixed;
    inset: var(--sp-header-h) 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 24px 40px;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .header__right.is-open { opacity: 1; visibility: visible; }

  /* ナビ: ラベル20px + 右端に「→」+ 下に 1px/2px の二重罫（幅304px） */
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  .nav a {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    height: 39px;
    font-size: 20px;
    line-height: 24px;
    color: var(--ink);
  }
  .nav a::before {
    content: "→";
    order: 2;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 27px;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-image:
      linear-gradient(var(--ink-soft), var(--ink-soft)),
      linear-gradient(var(--ink-soft), var(--ink-soft));
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 2px;
    background-position: 0 0, 0 2px;
  }

  /* 問い合わせボタン + SNS（200 + 16 + 88 = 304px） */
  .header__utility {
    gap: 16px;
    width: 304px;
    max-width: 100%;
  }

  body.is-menu-open { overflow: hidden; }
}

@media (max-width: 1023px) {
  .company__body { flex-direction: column; }
  .company__map { flex: 1; width: 100%;}

  .voice__arrow--prev { left: 4px; }
  .voice__arrow--next { right: 4px; }
  .voice__track { gap: 32px; }
}

/* =========================================================
   SP レイアウト
   Figma: SP / LOOPIA TOP (375) — 371:767
   基準 375px / 左右 24px（本文幅 327px）
   ========================================================= */
@media (max-width: 768px) {
  :root { --gutter: 24px; }

  .br-sp { display: inline; }
  .container { width: min(327px, 100% - var(--gutter) * 2); }
  .section { padding-block: 64px; }

  /* ---------- ANNOUNCE ---------- */
  .announce { padding-block: 32px 12px; }
  .announce__inner { gap: 12px; }
  .announce__line { max-width: 32px; }
  .announce__text {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 16px;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .announce__label { font-size: 10px; }

  /* ---------- 飾りプレート（SP は 231.35×47.95 相当まで等比縮小） ---------- */
  .plate {
    width: min(var(--plate-w-sp, 231.35px), 100%);
    height: 47.95px;
    min-height: 0;
    padding: 0 24px;
  }
  .plate > span { font-size: 24px; }
  /* PROPERTY CONSULTATION DESK のみ 2 行（Figma: 278.35×87.95） */
  .plate--2line { height: 87.95px; }
  .plate--2line > span { white-space: normal; text-align: center; line-height: 1.15; letter-spacing: -0.5px;}

  /* ---------- HERO ---------- */
  .hero__inner {
    display: block;
    height: auto;
    padding: 0 0 48px;
    min-height: calc(100svh - var(--sp-header-h));
  }

  .hero__shot {
    position: absolute;
    width: 194px;
    height: 273px;
    margin: 0;
    border-radius: 0;
  }
  /* 2 枚を 1 かたまり（-15〜390 = 405px 幅）として画面中央に揃える。
     Figma の 375px 幅では中心が 187.5px なので、そのままの重なりを保てる */
  .hero__shot--back  { left: 50%; transform: translateX(8.5px);    top: 4px;  z-index: 1; }
  .hero__shot--front { left: 50%; transform: translateX(-202.5px); top: 40px; z-index: 2; }

  .hero__copy {
    position: relative;
    left: auto;
    top: auto;
    z-index: 3;
    padding: 345px 24px 0;
  }
  .hero__title { margin: 0; }
  .hero__title-box {
    padding: 0;
    background: none;
    font-size: 39px;
    line-height: 58px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
  }
  .hero__lead { margin-top: 0; font-size: 16px; line-height: 29px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
  .hero__title + .hero__lead { margin-top: 24px; }

  /* 円中心 (327, 137.4) — Figma 371:776 (x127 / y-114.64 / 400×400)
     文字サイズは viewBox 単位なので SVG 全体の縮小に追従する（指定しない） */
  /* 写真と同じかたまりとして中央寄せ（transform は回転アニメが使うので margin で寄せる） */
  .hero__ring { left: 50%; margin-left: -60.5px; right: auto; top: -134.6px; width: 400px; height: 400px; }
  .hero__ring-text { font-size: 26px; }

  /* 右端の縦組み SCROLL + 縦罫（Figma: 371:840） */
  /* 全体で 198px（テキスト50 + 余白12 + 罫136）、下端は固定ボタンの上に揃える */
  .hero__scroll {
    position: absolute;
    right: 16px;
    bottom: 48px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .hero__scroll span {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--paper);
    writing-mode: vertical-rl;
  }
  /* ベースの線＋上から下へ流れる光の 2 レイヤー */
  .hero__scroll::after {
    content: "";
    width: 1px;
    height: 136px;
    background-image:
      linear-gradient(180deg, transparent 0%, #fff 50%, transparent 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-repeat: no-repeat;
    background-size: 100% 48px, 100% 100%;
    background-position: 0 -48px, 0 0;
    animation: scroll-line 2.4s cubic-bezier(.45, 0, .25, 1) infinite;
  }

  /* 画面下部に固定される全幅ボタン（Figma: 371:1412 / 375×48）
     ヘッダー(z50)より下にして、メニューを開いたときはオーバーレイに隠れる */
  .hero__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    border-top: 1px solid var(--btn-border);
    background: linear-gradient(180deg, var(--btn-from) 0%, var(--btn-to) 100%);
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25);
    color: var(--gold);
    font-size: 16px;
    font-weight: 700;
  }


  /* ---------- SERVICE ---------- */
  .service { padding-block: 20px 64px; }
  .service__grid { grid-template-columns: 1fr; gap: 32px; }
  .svc-card { min-height: 250px; padding: 24px; border-radius: 8px; }
  .svc-card .plate { margin-inline: auto; }
  /* SP は改行位置が変わるので PC 用の <br> は無効化して自然折返しにする */
  .svc-card__text { margin: 12px 0 20px; font-size: 16px; line-height: 32px; }
  .svc-card__text br { display: none; }
  .svc-card--wide { margin-top: 32px; min-height: 236px; padding: 24px; }
  .svc-card__row { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px; }
  .svc-card__headline { font-size: 20px; text-align: center; }
  /* SP のカード内ボタンは横幅いっぱい（Figma: 279×40） */
  .svc-card .btn { width: 100%; height: 40px; padding: 8px 24px; }

  /* ---------- 装飾画像（SP 座標 / Figma 371:767）---------- */
  /* NEWS 371:922 / EVENT 371:983 / FAQ 371:1034 / VOICE 371:1075
     / COMPANY 371:1306・371:1303。SERVICE は SP に装飾なし */
  .news__decor,
  .event__decor,
  .faq__decor,
  .voice__decor,
  .company__decor { display: block; }

  .news__decor {
    transform: scale(0.5);
    left: -160px;
  }
  .event__decor   { left: initial; right:-70px;  top: initial; bottom:0;  width: 264px;    height: 198px; transform: none; }
  .faq__decor     {
    left: 0px;
    top: initial;
    bottom: 0px;
    width: 225.4px;
    height: 277.5px;
    transform: none;
  }
  .voice__decor   { left: 166px;   right: auto;  top: -1px;       width: 225.4px; height: 183px; }
  .company__decor--l { left: -104px; top: -43px;  width: 386.5px; height: 476.3px; transform: scale(0.5);}
  .company__decor--r { left: initial; right: -80px; top: 521px;      width: 306px;   height: 376.7px; }

  /* ABOUT の散らし画像（Figma 371:898〜904 / 375 基準を中央から拡縮） */
  .about__scatter {
    display: block;
    width: 375px;
    left: 50%;
    right: auto;
    margin-left: -187.5px;
    transform: scale(calc(100vw / 375));
    transform-origin: top center;
  }
  .about__ph--a { left: -52.5px; top: 163px;   width: 185px;   height: 113.8px; }
  .about__ph--b { left: 23.6px;  top: 325px;   width: 128.7px; height: 79.2px; }
  .about__ph--c { right: auto; left: 256.8px;  top: 288px;     width: 154.6px; height: 95.1px; }
  .about__ph--d { right: auto; left: 216.5px;  top: 443.5px;   width: 107.6px; height: 66.2px; }
  .about__ph--e { left: -2.5px;  top: 526px;   width: 128.7px; height: 79.2px; }
  .about__ph--f { right: auto; left: 256.8px;  top: 595px;     width: 154.6px; height: 95.1px; }

  /* ---------- ABOUT ---------- */
  .about { padding-block: 64px 48px; }
  .about__inner { width: calc(100% - 48px); }
  .about__story { margin-top: 24px; font-size: 16px; line-height: 30px; }
  .about__story p + p { margin-top: 30px; }

  /* Figma 371:906 — 375 基準 319 円を中央から拡縮。min-height 固定だと縦に伸びて楕円になる */
  .about__medallion {
    width: min(100%, calc(319 / 375 * 100vw));
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    margin-top: calc(40 / 375 * 100vw);
  }
  .about__medallion-img { border-radius: 50%; }
  .about__medallion-copy { width: 82%; }
  .about__m-small  { font-size: 16px; line-height: 24px; }
  .about__m-lead   { margin-top: 16px; font-size: 16px; }
  .about__m-strong { font-size: 20px; }
  .about__m-close  { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .about__cta { margin-top: 40px; }
  .about__cta .btn { width: 279px; height: 40px; padding: 8px 24px; }

  /* ---------- NEWS ---------- */
  .news__rail {
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 48px);
    margin-top: 40px;
    margin-inline: auto;
    padding-inline: 0;
    overflow: visible;
  }
  .news-card { flex: none; width: 100%; padding-bottom: 23px; }
  /* SP でも 4 件以上は縦積みをやめて横スクロールにする（次のカードを少し覗かせる） */
  .news__rail:has(.news-card:nth-child(4)) {
    flex-direction: row;
    width: auto;
    margin-inline: 0;
    margin-inline-start: 24px;
    padding-inline-end: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline-start: 0;
  }
  .news__rail:has(.news-card:nth-child(4)) .news-card { flex: 0 0 82%; width: auto; }
  .news__nav { width: calc(100% - 48px); }
  .news__arrow { width: 48px; height: 48px; }
  .news-card__date { display: inline-block; font-size: 14px; vertical-align: middle; }
  .news-card__tag { margin: 0 0 0 16px; vertical-align: middle; }
  .news-card__title { margin-top: 16px; font-size: 16px; }
  /* Figma は 3 行で切っているので行数を揃える */
  .news-card__body {
    margin-top: 16px;
    font-size: 16px;
    line-height: 19px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* ---------- OTHER SERVICES ---------- */
  .other { padding: 64px 0; }
  .other__grid { grid-template-columns: 1fr; margin-top: 41px; }
  .other-card { min-height: 240px; justify-content: center;}
  .other-card__body { padding: 0 24px 24px; text-align: center; }
  .other-card__body h3 { font-size: 20px; }
  .other-card__body p { font-size: 13px; }
  .other-card__body .btn { width: 240px; margin-inline: auto; }

  /* ---------- EVENT / SEMINAR ---------- */
  /* SP は プレート → 画像 → 本文 → ボタン の縦並び（Figma: 371:979）。
     display:contents で .event__copy の子を .event__inner の
     フレックスアイテムに引き上げ、order で入れ替える。 */
  .event { padding-block: 80px; } /* Figma 371:979: プレート上 80 / ボタン下 80 */
  .event__inner { flex-direction: column; align-items: center; gap: 0;  width: calc(100% - 48px);}
  .event__copy { display: contents; }
  .event__copy > .plate { order: 0; margin-inline: auto; }
  .event__figure {
    order: 1;
    flex: none;
    width: 100%;
    min-width: 0;
    margin-top: 40px;
    max-width: initial;
  }
  .event__figure img { width: 100%; height: auto; border-radius: 12px; }
  .event__text { order: 2; margin: 24px 0 0; font-size: 16px; line-height: 1.2; }
  .event__copy > .btn { order: 3; margin: 24px auto 0; }

  /* ---------- FAQ ---------- */
  /* SP は プレート → 質問リスト → ボタン */
  .faq { padding-block: 64px; }
  .faq .container { display: flex; flex-direction: column; width: calc(100% - 48px);}
  .faq__head { display: contents; }
  .faq__head > .plate { order: 0; margin-inline: auto; }
  .faq__head > .btn { order: 2; margin: 40px auto 0; }
  .faq__list { order: 1; margin-top: 40px; gap: 24px; }
  .faq-item__q { min-height: 72px; padding: 16px; gap: 12px; align-items: center; }
  .faq-item__text { font-size: 16px; line-height: 24px; }
  .faq-item__a { padding: 16px; gap: 12px; }

  /* ---------- VOICE ---------- */
  /* SP は プレート → カルーセル → 本文 → ボタン（Figma: 371:1071） */
  .voice { display: flex; flex-direction: column; padding-block: 64px; overflow: hidden;}
  .voice__head { display: contents; }
  .voice__head > .plate { order: 1; margin-inline: auto; }
  .voice__desc {
    order: 3;
    width: calc(100% - 48px);
    margin: 24px auto 0;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
  }
  .voice__cta { order: 4; }
  .voice__carousel { order: 2; margin-top: 40px; padding-bottom: 20px; }
  .voice__track { width: 315px; gap: 24px; }
  .voice-card { height: 193px; }
  .voice-card__thumb { right: -12px; bottom: -18px; width: 120px; height: 74px; }
  /* Figma 371:1091: 引用ブロック（バッジ + 名前/本文の縦積み） */
  .voice-card__quote { left: 16px; right: auto; bottom: 8px; width: auto; max-width: calc(100% - 128px); gap: 6px; }
  .voice-card__badge { width: 36.25px; height: 40px; }
  .voice-card__badge img { width: 36.25px; height: 40px; }
  .voice-card__name { font-size: 10px; }
  .voice-card__text { font-size: 10px; line-height: 12px; }
  .voice__arrow { width: 48px; height: 48px; top: 97px; }
  .voice__arrow--prev { left: 12px; }
  .voice__arrow--next { right: 12px; }
  .voice__arrow-glyph { width: 18px; height: 12px; }
  .voice__cta { margin-top: 40px; }

  /* ---------- COMPANY ---------- */
  /* SP は プレート → 会社情報 → 地図 → STAFF → ボタン（Figma: 371:1270） */
  .company { padding: 64px 0; }
  .company .container { display: flex; flex-direction: column; width: calc(100% - 48px);}
  .company__head { display: contents; }
  .company__head > .plate { order: 0; margin-inline: auto; }
  .company__head > .btn { order: 3; margin: 40px auto 0; }
  .company__body { order: 1; flex-direction: column; gap: 24px; margin-top: 48px; }
  .staff { order: 2; }
  .company__map { flex: none; width: 100%;}
  .company__map iframe { height: 240px; }
  .company__row { padding: 14px 0 21px; }
  .company__row dt { flex: 0 0 104px; font-size: 16px; }
  .company__row dd { font-size: 16px; line-height: 24px; }

  .staff { margin-top: 64px; }
  .staff__title { font-size: 20px; }
  .staff__grid { flex-direction: column; gap: 24px; width: min(327px, 100% - var(--gutter) * 2); margin: 0 auto;}
  .staff-card { flex: none; max-width: none; width: 100%; height: auto; }

  /* ---------- CTA ---------- */
  .cta { height: auto; padding-block: 32px; }
  .cta__ring { left: 50%; }
  .cta__ring--1 { width: 327px;    height: 327px;    top: 32px;    margin-left: -163.5px; }
  .cta__ring--2 { width: 307.54px; height: 307.54px; top: 44.16px; margin-left: -153.77px; }
  .cta__ring--3 { width: 288.07px; height: 288.07px; top: 54.38px; margin-left: -144.04px; }
  .cta__inner { min-height: 327px; gap: 0; }
  .cta__logo { margin-bottom: 16px; gap: 9px; }
  .cta__logo-mark { width: 67.74px; height: 58.3px; }
  .cta__logo-word { width: 99.15px; height: 18.06px; }
  .cta__title  { font-size: 22px; line-height: 32px; }
  .cta__sub    { margin-top: 2px; font-size: 15px; }
  .cta__strong { margin-top: 14px; font-size: 22px; line-height: 32px; }
  .cta__pattern { width: 190px; height: 100%; opacity: .85; }

  /* ---------- FOOTER ---------- */
  /* 下は固定ボタン(48px)ぶんの逃げを足す */
  .footer { padding-block: 64px calc(40px + 48px + env(safe-area-inset-bottom)); }
  .footer__menu { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer__info { order: 2; flex: none; width: 100%; }
  .footer__contact-line { max-width: 260px; }
  .footer__col { flex: none; width: 208px; max-width: 100%; }
  .footer__hr { margin-top: 39px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 32px; margin-top: 41px; }
}

/* 電話番号リンク：スマホ（768px以下）のときだけタップで発信できるようにする。
   PCではリンクとして動作させず、通常の文字と同じ見た目にする（2026-09-23） */
.tel-link { color: inherit; text-decoration: none; }
@media (max-width: 768px) {
  .tel-link { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 769px) {
  .tel-link { pointer-events: none; cursor: text; }
}

/* =========================================================
   ヘッダー・フッター幅の拡張／フッター連絡先（2026-09-23）
   PC（769px以上）はヘッダー・フッターの中身を最大1280pxまで広げる。
   フッター連絡先は白・16px（PC/SP共通）。
   ========================================================= */
.footer__contact-line { font-size: 16px; color: #fff; }
@media (min-width: 1200px) {
  .header__inner { width: min(1280px, 100% - var(--gutter) * 2); }
}
@media (min-width: 769px) {
  .footer .container { width: min(1280px, 100% - var(--gutter) * 2); }
}
/* フッター：1280px未満はメニュー列を詰めて横はみ出しを防ぐ／1280px以上は連絡先欄を広げる */
@media (min-width: 769px) and (max-width: 1279px) {
  .footer__menu { gap: 24px; }
  .footer__col { min-width: 0; }
}
@media (min-width: 1280px) {
  .footer__info { flex-basis: 340px; }
}