/* ============================================================
   TAIYO HOME — Global Stylesheet
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Roboto:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --c-darkest:   #1c1c1c;
  --c-dark:      #252525;
  --c-bg:        #363636;
  --c-bg2:       #3d3d3d;
  --c-bg3:       #474747;
  --c-mid:       #505050;
  --c-white:     #ffffff;
  --c-off-white: #e8e8e8;
  --c-gray:      #aaaaaa;
  --c-gray2:     #888888;
  --c-border:    rgba(255,255,255,0.18);
  --c-border2:   rgba(255,255,255,0.08);

  --font-en: 'Barlow Condensed', Arial, sans-serif;
  --font-roboto: 'Roboto', Arial, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

  --header-h: 74px;
  --max-w:    1080px;
  /* COLUMN/NEWS カード枠 285×214px（3列＋gap20px = 895px） */
  --card-w:      285px;
  --card-h:      214px;
  --card-grid-w: 895px;
  /* WORKS カード: 画像260×195 / ラベル261×71 */
  --works-card-w:  261px;
  --works-gap:     36px;
  --works-track-w: 855px;
  --pad:      24px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-jp);
  background: var(--c-bg);
  color: var(--c-white);
  line-height: 1.9;
  font-size: 15px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ── Utility ──────────────────────────────────────────────── */
.inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.sec-title {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--c-white);
}
.sec-title-jp {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--c-gray);
  text-align: center;
  margin-top: 4px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-white);
  padding: 10px 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--c-white); color: var(--c-bg); }
.btn-outline .icon { font-size: 14px; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  background: var(--c-darkest);
  display: flex;
  align-items: center;
  padding: 0 20px 0 24px;
  gap: 0;
}
.hdr-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: auto;
}
.hdr-logo img { height: 42px; width: auto; }

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-right: 28px;
}
.hdr-nav a {
  font-family: var(--font-roboto);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-white);
  transition: opacity .2s;
}
.hdr-nav a:hover { opacity: .65; }

.hdr-contact {
  font-family: var(--font-roboto);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  background: #c9cbce;
  border: none;
  border-radius: 15px;
  width: 150px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-darkest);
  transition: background .2s, color .2s;
  margin-right: 24px;
}
.hdr-contact:hover { background: var(--c-white); color: var(--c-darkest); }

.hdr-tel {
  font-family: var(--font-roboto);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-white);
  white-space: nowrap;
  margin-right: 18px;
}
.hdr-tel span { font-size: 12px; font-weight: 400; margin-right: 5px; font-family: var(--font-jp); letter-spacing: 0; }

.hdr-sns {
  color: var(--c-white);
  font-size: 18px;
  line-height: 1;
  margin-right: 16px;
  opacity: .85;
  transition: opacity .2s;
}
.hdr-sns img { width: 24px; height: 24px; display: block; }
.hdr-sns:hover { opacity: 1; }

.hdr-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  cursor: pointer;
  padding: 4px;
}
.hdr-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-white);
  transition: transform .3s, opacity .3s;
}

/* Drawer */
.drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px;
  height: 100%;
  background: var(--c-darkest);
  z-index: 1000;
  transition: right .35s ease;
  display: flex;
  flex-direction: column;
  padding: 80px 40px 40px;
  overflow-y: auto;
}
.drawer.open { right: 0; }
.drawer-close {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 28px;
  color: var(--c-white);
  cursor: pointer;
  line-height: 1;
}
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-nav a {
  font-family: var(--font-roboto);   /* ヘッダー/フッターの欧文と統一 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-white);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border2);
  transition: opacity .2s;
}
.drawer-nav a:hover { opacity: .65; }
.drawer-info {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--c-border2);
}
.drawer-info p { font-size: 12px; color: var(--c-gray); line-height: 1.6; }
.drawer-info .tel {
  font-family: var(--font-roboto);   /* ヘッダー/フッターの電話番号と統一 */
  font-size: 21px;
  font-weight: 400;
  color: var(--c-white);
  margin-top: 8px;
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999;
}
.overlay.open { display: block; }

/* ── モデルルーム見学会 追従ボタン（φ150px・ヒーロー右側） ── */
.modelroom-btn {
  position: fixed;
  right: 40px;
  /* 下層ページ: デザイン実測（円の中心 = ヘッダー下153px / 直径150px / 右40px） */
  top: calc(var(--header-h) + 153px);
  transform: translateY(-50%);
  z-index: 800;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--c-darkest);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  transition: background .2s, transform .2s;
  box-shadow: -2px 0 12px rgba(0,0,0,.4);
}
.modelroom-btn:hover { background: #333; }

/* TOPページのみヒーロー右下に配置（従来位置） */
body:has(.top-hero) .modelroom-btn {
  top: calc(var(--header-h) + (100vh - var(--header-h)) * 0.78);
}

/* 見出し帯255pxのページ: 追従ボタンをその帯の中央に */
body:has(.page-hero-bg) .modelroom-btn {
  top: calc(var(--header-h) + 127px);
}


/* ── Page Hero (subpages) ─────────────────────────────────── */
.page-hero {
  position: relative;
  height: 500px;   /* デザイン実測（head画像2000×694相当） */
  margin-top: var(--header-h);
  overflow: hidden;
}
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.65);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
}
.page-hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.page-hero-text h1 {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.1em;
  color: var(--c-white);
  line-height: 1;
}
.page-hero-text p {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.75);
  margin-top: 10px;
}

/* 画像なしのページ見出し（WORKS/COMPANY/FAQ/NEWS/CONTACT）は
   420pxの背高ヒーローにせず、デザイン同様コンパクトな中央見出しにする */
.page-hero:has(.page-hero-bg) {
  height: 255px;              /* 画像なしページの見出し帯の高さ（CONCEPT/BRANDは画像ヒーローのため対象外） */
  overflow: visible;
}
.page-hero:has(.page-hero-bg) .page-hero-bg { display: none; }
.page-hero:has(.page-hero-bg) .page-hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.page-hero:has(.page-hero-bg) .page-hero-text h1 {
  font-size: 40px;
}

/* ── CTA Phone Section ────────────────────────────────────── */
.cta-phone {
  background: var(--c-bg3);
  padding: 90px var(--pad) 85px;
  text-align: center;
}
.cta-phone .catch {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-off-white);
  margin-bottom: 10px;
}
.cta-phone .tel {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 0.04em;
  color: var(--c-white);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.cta-phone .hours {
  font-size: 20px;
  color: var(--c-gray);
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}
.cta-phone .btn-contact {
  /* デザイン: 白枠(角丸なし) 160×35px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 160px;
  height: 35px;
  border: 1px solid var(--c-white);
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  font-family: var(--font-roboto);
  color: var(--c-white);
  transition: background .2s, color .2s;
}
.cta-phone .btn-contact .ico-mail { flex: 0 0 auto; }
.cta-phone .btn-contact:hover { background: var(--c-white); color: var(--c-bg); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--c-darkest);
  padding: 56px var(--pad) 0;
}
.footer-inner {
  max-width: 901px;                  /* デザイン実測（他ページと共通の約900px） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding-bottom: 26px;
}
.footer-left {}
.footer-logo { display: block; margin-bottom: 22px; }
.footer-logo img { height: 38px; }     /* デザイン実測 */
.footer-addr {
  font-size: 12px;
  color: var(--c-off-white);
  line-height: 1.5;                  /* デザイン実測 行ピッチ18px */
  letter-spacing: 0.03em;
}
.footer-addr .tel-num {
  font-family: var(--font-roboto);
  font-size: 20px;                   /* デザイン実測 幅139px相当 */
  font-weight: 400;
  color: var(--c-white);
  margin-top: 12px;
  display: block;
  letter-spacing: 0.04em;
}

/* デザイン実測: 4列×2行の横並び（HOME/CONCEPT/BRAND/WORKS ＋ COMPANY/FAQ/NEWS/CONTACT） */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, auto);   /* 9項目 = 3列×3行 */
  justify-items: start;
  gap: 12px 38px;
  align-content: start;
  padding-top: 20px;
}
.footer-nav a {
  font-family: var(--font-roboto);
  font-size: 14px;                   /* デザイン実測 HOME=43px幅相当 */
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-white);
  padding: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.footer-nav a:hover { opacity: .65; }

.footer-bottom {
  max-width: 901px;
  margin: 0 auto;
  border-top: none;                  /* デザインには区切り線なし */
  padding: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-family: var(--font-roboto);
  font-size: 11px;
  color: var(--c-off-white);
  letter-spacing: 0.06em;
}
.footer-sns img { width: 28px; height: 28px; display: block; }
.footer-sns {
  font-size: 18px;
  color: var(--c-gray);
  transition: opacity .2s;
}
.footer-sns:hover { opacity: .7; }


/* ============================================================
   TOP PAGE
   ============================================================ */

/* Hero Split */
/* デザイン準拠：単一画像のヒーロー（縦コピーを右にオーバーレイ） */
.top-hero {
  margin-top: var(--header-h);
  position: relative;
  height: calc(100vh - var(--header-h));
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
}
.top-hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* インジケーター（デザイン実測: 横棒50×2px・間隔10px・下端から38px） */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
}
.hero-dot {
  width: 50px;
  height: 2px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .25s;
}
.hero-dot.is-active { background: var(--c-white); }
.top-hero-text {
  position: absolute;
  right: 72px;
  top: 12%;
  transform: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--c-white);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.9;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  white-space: nowrap;
}

/* Photo Grid (below hero) */
/* デザイン準拠：大小混在のモザイク（大2枚＋小8枚） */
.top-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 364px;
}
.top-grid-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.top-grid-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.top-grid-item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.top-grid-item:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
.top-grid-item:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }
.top-grid-item:nth-child(6) { grid-column: 5 / 7; grid-row: 1 / 3; }
.top-grid-item:nth-child(7) { grid-column: 7 / 8; grid-row: 1 / 2; }
.top-grid-item:nth-child(8) { grid-column: 8 / 9; grid-row: 1 / 2; }
.top-grid-item:nth-child(9) { grid-column: 7 / 8; grid-row: 2 / 3; }
.top-grid-item:nth-child(10) { grid-column: 8 / 9; grid-row: 2 / 3; }
.top-grid-item { display: block; overflow: hidden; }
.top-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.top-grid-item:hover img { transform: scale(1.04); }

/* Concept Section */
.top-concept {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.top-concept-photo { overflow: hidden; }
.top-concept-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
.top-concept-photo:hover img { transform: scale(1.04); }
.top-concept-body {
  background: var(--c-dark);
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top-concept-body h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.top-concept-body p {
  font-size: 14px;
  color: var(--c-gray);
  line-height: 1.9;
  margin-bottom: 30px;
}
/* デザイン準拠：丸で囲うだけのバッジ（アイコンなし） */
.top-concept-features {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}
.top-concept-feat {
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.top-concept-feat .feat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: 0.04em;
  line-height: 1.45;
  display: block;
  margin-bottom: 6px;
}
.top-concept-feat .feat-sub {
  font-size: 9.5px;
  color: var(--c-gray);
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-family: var(--font-en);
}
.top-concept-body .more-link {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--c-gray);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  font-family: var(--font-roboto);
}
.top-concept-body .more-link:hover { color: var(--c-white); }

/* Section: BRAND */
.top-brand {
  padding: 72px 0;
  background: var(--c-bg);
}
.top-brand .sec-header {
  text-align: center;
  margin-bottom: 26px;
}
.top-brand-slider {
  position: relative;
  overflow: hidden;
}
/* デザイン準拠：全幅の画像帯に STANDARD HOUSE を左オーバーレイ */
.top-brand-card {
  position: relative;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.top-brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 72%);
}
.top-brand-img { overflow: hidden; }
.top-brand-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}
.top-brand-body {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  padding: 0 var(--pad);
  z-index: 2;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}
.top-brand-body > * { pointer-events: auto; }
.top-brand-body .brand-name {
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  color: var(--c-white);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.top-brand-body p {
  font-size: 13px;
  color: var(--c-off-white);
  line-height: 1.9;
  margin-bottom: 24px;
  max-width: 430px;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.top-brand-body .more-link {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--c-gray);
  font-family: var(--font-roboto);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.top-brand-body .more-link:hover { color: var(--c-white); }

/* Section: WORKS */
.top-works {
  padding: 72px 0;
  background: var(--c-bg2);
  overflow: hidden;
}
.top-works .sec-header {
  text-align: center;
  margin-bottom: 26px;
}
/* デザイン実測: 画像260×195 / ラベル帯261×71 / カード間36px（3枚=855px） */
.top-works-slider-wrap {
  position: relative;
  width: var(--works-track-w);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
/* デザイン準拠: 1行3列。4件目以降は左右の矢印で送る */
.top-works-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--works-gap)) / 3);
  gap: var(--works-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.top-works-track::-webkit-scrollbar { display: none; }
.top-works-card { scroll-snap-align: start; }
.slider-arrow[disabled] { opacity: .25; cursor: default; }
.top-works-slider-wrap.is-static .slider-arrow { visibility: hidden; }
.top-works-card { overflow: hidden; }
.top-works-card img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  transition: transform .5s;
  display: block;
}
.top-works-card:hover img { transform: scale(1.04); }
.top-works-card-label {
  height: 71px;
  background: #c8c8c8;
  color: #333333;
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 18px;              /* 先方指定 */
  letter-spacing: 0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 矢印は枠なしの細いシェブロン。ラベル帯の高さに合わせて配置 */
.slider-arrow {
  position: absolute;
  bottom: 36px;
  transform: translateY(50%);
  width: auto;
  height: auto;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s;
  font-size: 60px;
  font-weight: 200;
  line-height: 1;
  color: rgba(255,255,255,.55);
}
.slider-arrow:hover { color: var(--c-white); background: none; }
.slider-arrow.prev { left: -53px; }
.slider-arrow.next { right: -53px; }

/* Section: SERVICE */
.top-service {
  padding: 72px 0;
  background: var(--c-bg);
}
.top-service .sec-header {
  text-align: center;
  margin-bottom: 26px;
}
.top-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.top-service-item {
  position: relative;
  height: 260px;
  overflow: hidden;
  cursor: pointer;
}
.top-service-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.82);          /* 全体は明るく保つ（.5 → .68 → .82） */
  transition: transform .5s, filter .5s;
}
.top-service-item:hover img {
  transform: scale(1.05);
  filter: brightness(.74);
}
/* 全面を暗くする代わりに、文字が乗る左下だけグラデーションで落とす（デザイン準拠）*/
.top-service-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top right,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.30) 38%,
    rgba(0,0,0,0)   72%);
}
.top-service-item-label { z-index: 2; }
.top-service-item-label {
  position: absolute;
  bottom: 28px;
  left: 24px;
}
.top-service-item-label .title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-white);
  display: block;
  margin-bottom: 8px;
}
.top-service-item-label .more {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,.7);
  font-family: var(--font-roboto);
}

/* Section: COLUMN */
.top-column {
  padding: 72px 0;
  background: var(--c-bg2);
}
.top-column .sec-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
}
.top-column .more-all {
  position: absolute;
  /* コンテンツ幅(max-w)の右端に揃える（画面端まで飛ばさない） */
  right: max(var(--pad), calc((100% - var(--card-grid-w)) / 2));
  /* 見出しに対して上下中央 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-family: var(--font-roboto);
  color: var(--c-gray);
  transition: color .2s;
}
.top-column .more-all:hover { color: var(--c-white); }
.top-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--card-w)));
  justify-content: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  gap: 20px;
}
.top-column-card { overflow: hidden; }
.top-column-card-img {
  height: var(--card-h);
  overflow: hidden;
  margin-bottom: 12px;
}
.top-column-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.top-column-card:hover .top-column-card-img img { transform: scale(1.04); }
.top-column-card .cat-badge {
  display: inline-block;
  background: var(--c-off-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  color: var(--c-darkest);
  margin-bottom: 10px;
}
.top-column-card .card-date {
  font-size: 11px;
  color: var(--c-gray2);
  margin-bottom: 4px;
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}
.top-column-card .card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-off-white);
}

/* Section: NEWS */
.top-news {
  padding: 72px 0;
  background: var(--c-bg);
}
.top-news .sec-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
}
.top-news .more-all {
  position: absolute;
  /* コンテンツ幅(max-w)の右端に揃える（画面端まで飛ばさない） */
  right: max(var(--pad), calc((100% - var(--card-grid-w)) / 2));
  /* 見出しに対して上下中央 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-family: var(--font-roboto);
  color: var(--c-gray);
  transition: color .2s;
}
.top-news .more-all:hover { color: var(--c-white); }
.top-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--card-w)));
  justify-content: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  gap: 20px;
}
.top-news-card { overflow: hidden; }
.top-news-card-img {
  height: var(--card-h);
  overflow: hidden;
  margin-bottom: 12px;
}
.top-news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.top-news-card:hover .top-news-card-img img { transform: scale(1.04); }
.top-news-card .cat-badge {
  display: inline-block;
  background: var(--c-bg3);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  color: var(--c-gray);
  margin-bottom: 6px;
}
.top-news-card .news-date {
  font-size: 11px;
  color: var(--c-gray2);
  margin-bottom: 4px;
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}
.top-news-card .card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-off-white);
}

/* Section: instagram */
.top-instagram {
  padding: 72px 0;
  background: var(--c-bg2);
}
.top-instagram .sec-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
}
.top-instagram-inner {
  max-width: 900px;
  margin: 0 auto;
}
.top-instagram .more-all {
  position: absolute;
  /* コンテンツ幅(max-w)の右端に揃える（画面端まで飛ばさない） */
  right: max(var(--pad), calc((100% - var(--card-grid-w)) / 2));
  /* 見出しに対して上下中央 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-family: var(--font-roboto);
  color: var(--c-gray);
  transition: color .2s;
}
.top-instagram .more-all:hover { color: var(--c-white); }

/* ACCESS */
.top-access {
  /* デザイン: マップ〜CTAは同一背景の連続ブロック */
  background: var(--c-bg3);
  padding: 50px var(--pad) 0;
}
/* COMPANYページのマップ: レイアウトはTOPと共通、背景のみ暗色（デザイン実測 #1E1E1E） */
.top-access.is-dark { background: var(--c-darkest); padding: 62px var(--pad) 60px; }
.top-access-inner {
  /* デザイン実測: 全体900px = マップ540 + gap50 + 情報310 */
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.top-access-map {
  aspect-ratio: 540 / 328;
  overflow: hidden;
  background: var(--c-bg3);
}
.top-access-map img,
.top-access-map iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.top-access-info .company-name {
  /* デザイン実測: Roboto Regular 約25px（幅152px相当） */
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.top-access-info .company-jp {
  font-size: 11px;
  color: var(--c-gray);
  margin-bottom: 18px;
}
.top-access-info .addr {
  font-size: 13px;
  color: var(--c-gray);
  line-height: 1.5;
  margin-bottom: 10px;
}
.top-access-info .tel-num {
  font-family: var(--font-roboto);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-white);
  margin-bottom: 20px;
  display: block;
}
.top-access-info .btn-map {
  /* デザイン: 薄グレー塗りのピル 160×32px・濃い文字 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 160px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #c8c8c8;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-family: var(--font-roboto);
  color: #3a3a3a;
  transition: background .2s;
}
.top-access-info .btn-map:hover { background: var(--c-white); }


/* ============================================================
   CONCEPT PAGE
   ============================================================ */

.con-main {
  background: var(--c-bg);
}
.con-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 539px;   /* デザイン実測 */
}
.con-split-photo { overflow: hidden; }
.con-split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.con-split-body {
  background: var(--c-darkest);   /* デザイン実測 #1E1E1E */
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.con-split-body h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 27px;
  line-height: 1.6;
}
.con-split-body p {
  font-size: 13px;
  color: var(--c-off-white);
  line-height: 1.65;
  margin-bottom: 33px;
}
.con-split-body .more-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-gray);
  font-family: var(--font-roboto);
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.con-split-body .more-link:hover { color: var(--c-white); }

.con-features {
  background: var(--c-bg3);   /* デザイン実測 #464646 */
  padding: 78px var(--pad);   /* 下が0で本文が切れていたため上下同値に */
}
.con-features-inner {
  max-width: 960px;           /* 3列×320px（デザイン実測） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.con-feat-item { text-align: center; }
.con-feat-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 66px;
  margin-bottom: 18px;
  color: var(--c-white);
}
.con-feat-icon img { height: 100%; width: auto; }
.con-feat-label {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--c-white);
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.con-feat-en {
  display: block;
  font-family: var(--font-roboto);
  font-size: 11px;
  font-weight: 400;
  color: var(--c-off-white);
  letter-spacing: 0.06em;
  margin-bottom: 30px;
}
.con-feat-title {
  display: inline-block;
  text-align: left;
  max-width: 265px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 14px;
}
.con-feat-body {
  display: inline-block;
  text-align: left;
  max-width: 265px;
  font-size: 12px;
  color: var(--c-off-white);
  line-height: 1.75;
}

/* 家ができるまでの流れ（FLOW）— 3特徴の円バッジと同じトーンで統一 */
.con-flow {
  background: var(--c-darkest);
  padding: 78px var(--pad) 86px;
}
.con-flow-head {
  text-align: center;
  margin-bottom: 50px;
}
.con-flow-sub {
  font-size: 13px;
  color: var(--c-off-white);
  letter-spacing: 0.12em;
  margin-top: 10px;
}
.con-flow-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px 24px;
}
.con-flow-item { text-align: center; }
.con-flow-item .num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 20px;
  color: var(--c-white);
}
.con-flow-item h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 10px;
}
.con-flow-item p {
  font-size: 12px;
  color: var(--c-off-white);
  line-height: 1.75;
}

/* SERVICE内の「施工例／物件例」抜粋（旧 /service/ の内部リンクハブを再現） */
.svc-picks { margin: 4px 0 22px; }
.svc-picks-label {
  font-size: 12px;
  color: var(--c-gray);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.svc-picks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 430px;
}
.svc-pick { display: block; transition: opacity .2s; }
.svc-pick:hover { opacity: .75; }
.svc-pick-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg3);
  margin-bottom: 6px;
}
.svc-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-pick-body { display: block; }
.svc-pick-title {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c-white);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.svc-pick-spec {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--c-gray);
  margin-top: 2px;
}

/* SERVICE on CONCEPT page */
.con-service { padding-top: 72px; background: var(--c-bg3); }
.con-service-title-wrap {
  text-align: center;
  padding-bottom: 56px;
}
.con-service-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;   /* デザイン実測 */
  align-items: stretch;
}
.con-service-item-photo { order: 1; overflow: hidden; }
.con-service-item-body  { order: 2; }
/* 画像右・テキスト左の行（デザイン: 2行目・4行目） */
.con-service-item.is-reverse .con-service-item-photo { order: 2; }
.con-service-item.is-reverse .con-service-item-body  { order: 1; padding-left: 277px; padding-right: 60px; }
.con-service-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.con-service-item:hover .con-service-item-photo img { transform: scale(1.03); }
.con-service-item-body {
  background: var(--c-darkest);   /* デザイン実測 #1E1E1E */
  padding: 52px 60px 52px 51px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.con-service-item-body .en-title {
  font-family: var(--font-roboto);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-white);
  line-height: 1.2;
  margin-bottom: 2px;
}
.con-service-item-body .jp-sub {
  font-size: 13px;
  color: var(--c-off-white);
  letter-spacing: 0.06em;
  margin-bottom: 42px;
}
.con-service-item-body .tagline {
  font-size: 21px;
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: 24px;
  line-height: 1.5;
}
.con-service-item-body p {
  font-size: 13px;
  color: var(--c-off-white);
  line-height: 1.7;
  margin-bottom: 28px;
}
.con-service-item-body .more-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-gray);
  font-family: var(--font-roboto);
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.con-service-item-body .more-link:hover { color: var(--c-white); }

/* ============================================================
   BRAND PAGE
   ============================================================ */

.brand-lead {
  background: var(--c-bg3);      /* デザイン実測 #464646 */
  padding: 88px var(--pad) 92px; /* セクション高さ 約290px */
  text-align: center;
}
.brand-lead h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  line-height: 1.6;
}
.brand-lead p {
  font-size: 13px;
  color: var(--c-off-white);
  max-width: 470px;              /* デザイン実測 約466px（3行で折り返す） */
  margin: 0 auto;
  line-height: 1.85;
}

/* BRAND features (DESIGN / FUNCTIONALITY / MATERIAL) */
.brand-feature {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.brand-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
/* 文字の可読性のため左下だけ極薄く落とす（デザインは画像を暗くしていない） */
.brand-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.brand-feature:hover img { transform: scale(1.03); }
.brand-feature-body {
  position: relative;
  z-index: 2;
  padding: 40px 52px 34px 88px;   /* デザイン実測: 左88px */
}
.brand-feature-body .feat-title {
  font-family: var(--font-roboto);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-white);
  margin-bottom: 16px;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.brand-feature-body p {
  font-size: 13px;
  color: var(--c-white);
  line-height: 1.7;
  max-width: 215px;               /* デザイン実測: 2行で折り返す幅 */
  margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.brand-feature-body .more-link {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--c-white);
  font-family: var(--font-roboto);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.brand-feature-body .more-link:hover { opacity: .7; }

/* Brand List */
.brand-list {
  background: var(--c-bg3);      /* デザイン実測 #464646 */
  padding: 76px var(--pad) 92px;
}
.brand-list-inner {
  max-width: 902px;              /* デザイン実測: カード幅 902px */
  margin: 0 auto;
}
.brand-list-title {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: 26px;               /* デザイン実測 幅162px相当 */
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 14px;
}
.brand-list-lead {
  font-size: 13px;
  color: var(--c-off-white);
  text-align: center;
  max-width: 400px;              /* デザイン実測 約396px（4行で折り返す） */
  margin: 0 auto 44px;
  line-height: 1.85;
}
.brand-list-items { display: flex; flex-direction: column; gap: 10px; }  /* デザイン実測: カード間10px */
.brand-list-item {
  display: grid;
  grid-template-columns: 307px minmax(0, 1fr) auto;  /* 画像307px（実測） */
  gap: 0;
  align-items: center;
  border: none;
  background: var(--c-white);
  overflow: hidden;
  transition: background .2s;
  cursor: pointer;
  min-height: 200px;             /* デザイン実測 */
}
.brand-list-item:hover { background: #f5f5f5; }
.brand-list-item img {
  width: 307px;
  height: 200px;
  object-fit: cover;
}
.brand-list-item-body {
  padding: 20px 30px;
  color: #333;
}
.brand-list-item-body .sub-top {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.brand-list-item-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.3;
}
.brand-list-item-body .sub-bot {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.05em;
}
.brand-list-item-body p {
  font-size: 12.5px;
  color: #555;
  margin-top: 14px;
  line-height: 1.7;
  max-width: 380px;              /* デザイン同様2行で折り返す */
}
.brand-list-item .arrow {
  padding: 0 28px;
  font-size: 20px;
  color: #aaa;
}

/* Coming soon */
/* Coming-soon（未公開ページ用）: CTAと同じ背景で1ブロックに見せる（デザイン実測） */
.brand-coming-soon {
  padding: 90px var(--pad) 0;
  text-align: center;
  background: var(--c-bg3);
}
.brand-coming-soon h2 {
  font-family: var(--font-roboto);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-white);
}


/* ============================================================
   WORKS PAGE
   ============================================================ */

.works-layout {
  background: var(--c-bg);
  padding: 60px var(--pad);
  max-width: calc(var(--max-w) + 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}
.works-sidebar {}
.works-cat-group { margin-bottom: 28px; }
.works-cat-group h3 {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--c-white);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.works-cat-group ul { display: flex; flex-direction: column; gap: 0; }
.works-cat-group a {
  font-size: 12px;
  color: var(--c-gray);
  padding: 6px 0;
  display: block;
  letter-spacing: 0.05em;
  transition: color .2s;
}
.works-cat-group a::before {
  content: '> ';
  font-family: monospace;
  font-size: 10px;
}
.works-cat-group a:hover,
.works-cat-group a.active { color: var(--c-white); }
.works-cat-count {
  font-size: 10px;
  color: #8a8a8a;
  letter-spacing: 0;
  margin-left: 2px;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
}
.works-card { display: block; overflow: hidden; }
.works-card-img {
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 10px;
}
.works-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.works-card:hover .works-card-img img { transform: scale(1.04); }
.works-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.works-card-name {
  font-size: 12px;
  color: var(--c-off-white);
  letter-spacing: 0.04em;
}
.works-card-more {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-gray);
  font-family: var(--font-roboto);
  white-space: nowrap;
  transition: color .2s;
}
.works-card:hover .works-card-more { color: var(--c-white); }
.works-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--c-gray);
  padding: 40px 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px 0 20px;
  grid-column: 1 / -1;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 24px;
  font-family: var(--font-roboto);
  font-size: 14px;
  color: var(--c-white);
  border: none;
  transition: opacity .2s;
}
.pagination a:hover { opacity: .65; }
.pagination .current { color: var(--c-white); border-color: var(--c-border); }
.pagination .arrow { font-size: 14px; }


/* ============================================================
   WORKS SINGLE PAGE
   ============================================================ */

/* WORKS詳細: 帯を使わず全体を同じグレー1色に（デザイン実測 #464646） */
.wsingle-head {
  background: var(--c-bg3);
  margin-top: var(--header-h);
  padding: 90px var(--pad) 0;
  text-align: center;
}
.wsingle-head h1 {
  font-size: 31px;              /* デザイン実測 幅154px相当 */
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-white);
  line-height: 1.4;
}
.wsingle-wrap {
  background: var(--c-bg3);
  padding: 89px var(--pad) 80px;   /* 見出し下の余白（実測） */
}
.wsingle-inner {
  max-width: 780px;
  margin: 0 auto;
}
.wsingle-gallery { margin-bottom: 32px; }
.wsingle-main-img {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.wsingle-main-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
/* サムネイルは左右の矢印で送る横一列のカルーセル（デザイン準拠） */
.wsingle-thumbs-wrap {
  --thumb-per-view: 6;
  --thumb-gap: 6px;
  position: relative;      /* トラックの左右端をメイン画像に揃え、矢印は外側へ出す */
}
.wsingle-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--thumb-per-view) - 1) * var(--thumb-gap)) / var(--thumb-per-view));
  gap: var(--thumb-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wsingle-thumbs::-webkit-scrollbar { display: none; }
.wsingle-thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.wsingle-thumb-arrow.prev { right: calc(100% + 12px); }
.wsingle-thumb-arrow.next { left:  calc(100% + 12px); }
.wsingle-thumb-arrow:hover { opacity: 1; }
.wsingle-thumb-arrow[disabled] { opacity: .2; cursor: default; }
.wsingle-thumbs-wrap.is-static .wsingle-thumb-arrow { visibility: hidden; }
.wsingle-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
  scroll-snap-align: start;
}
.wsingle-thumb.active { border-color: var(--c-white); }
.wsingle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s;
}
.wsingle-thumb:hover img { opacity: .8; }

.wsingle-desc {
  font-size: 13px;
  color: var(--c-gray);
  line-height: 1.9;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-border2);
}

.wsingle-spec-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
  align-items: start;
}
.wsingle-spec {}
.wsingle-spec-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--c-border2);
  padding: 10px 0;
  font-size: 12px;
}
.wsingle-spec-row:first-child { border-top: 1px solid var(--c-border2); }
.wsingle-spec-row dt {
  color: var(--c-gray);
  letter-spacing: 0.05em;
}
.wsingle-spec-row dd { color: var(--c-off-white); }

/* 間取り図: 白地の枠に図面、左上に階数ラベル、右下に拡大の＋（デザイン7.pdf） */
.wsingle-plans { display: flex; flex-direction: column; gap: 16px; }
.wsingle-plan-item {
  position: relative;
  background: #ffffff;
}
.wsingle-plan-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  color: var(--c-white);
  background: var(--c-bg);
}
.wsingle-plan-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: #ffffff;
  padding: 18px;
  display: block;
}
.wsingle-plan-expand {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 20px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}
/* 図面はどこを押しても拡大できるようにする */
.wsingle-plan-item { cursor: zoom-in; }

/* 間取り図のポップアップ拡大 */
.plan-lb {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .82);
  padding: 56px 64px;
}
.plan-lb.is-open { display: flex; }
.plan-lb-fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.plan-lb-fig img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  background: #fff;
  padding: 20px;
  display: block;
}
.plan-lb-fig figcaption {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-white);
}
.plan-lb-close,
.plan-lb-prev,
.plan-lb-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--c-white);
  cursor: pointer;
  line-height: 1;
  padding: 8px;
  opacity: .8;
  transition: opacity .2s;
}
.plan-lb-close:hover,
.plan-lb-prev:hover,
.plan-lb-next:hover { opacity: 1; }
.plan-lb-close { top: 18px; right: 24px; font-size: 32px; }
.plan-lb-prev  { left: 18px;  top: 50%; transform: translateY(-50%); font-size: 44px; font-family: var(--font-en); }
.plan-lb-next  { right: 18px; top: 50%; transform: translateY(-50%); font-size: 44px; font-family: var(--font-en); }

/* 価格: グレーの帯に黒文字（デザイン7.pdf）。未入力ならテンプレート側で出力しない */
.wsingle-price {
  background: #c8c8c8;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-bottom: 40px;
}
.wsingle-price .price-num {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #1c1c1c;
  white-space: nowrap;
}
.wsingle-price .price-num small {
  font-size: 15px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.wsingle-price .price-note {
  font-size: 11px;
  color: #1c1c1c;
  line-height: 1.6;
}

.wsingle-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border2);
  padding-top: 28px;
}
.wsingle-nav a {
  font-size: 12px;
  color: var(--c-gray);
  letter-spacing: 0.06em;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wsingle-nav a:hover { color: var(--c-white); }
.wsingle-nav .center { justify-content: center; }
.wsingle-nav .right { justify-content: flex-end; }


/* ============================================================
   COMPANY PAGE
   ============================================================ */

.company-table {
  background: var(--c-bg);
  padding: 60px var(--pad);
}
.company-table-inner {
  max-width: 780px;
  margin: 0 auto;
}
.company-table dl { display: flex; flex-direction: column; }
.company-table-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--c-border2);
  padding: 18px 0;
}
.company-table-row:first-child { border-top: 1px solid var(--c-border2); }
.company-table-row dt {
  font-size: 12px;
  color: var(--c-gray);
  letter-spacing: 0.06em;
  padding-top: 2px;
  padding-right: 16px;
  flex-shrink: 0;
}
.company-table-row dd {
  font-size: 13px;
  color: var(--c-off-white);
  line-height: 1.8;
}

.company-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 322px;                 /* デザイン実測 */
}
.company-link-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;           /* デザイン実測: 上下中央 */
  cursor: pointer;
}
/* 文字の可読性のため薄く落とす（デザインは画像を暗くしていない） */
.company-link-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}
.company-link-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.company-link-item:hover img { transform: scale(1.04); }
.company-link-label {
  position: relative;
  z-index: 2;
  padding: 0 24px 0 53px;        /* デザイン実測: 左53px */
}
.company-link-label .title {
  font-size: 31px;               /* デザイン実測 幅124px相当 */
  font-weight: 400;
  color: var(--c-white);
  display: block;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.company-link-label .more {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-white);
  font-family: var(--font-roboto);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}


/* ============================================================
   FAQ PAGE
   ============================================================ */

.faq-main {
  background: var(--c-bg3);   /* デザイン実測 #464646 */
  padding: 50px var(--pad) 80px;
}
.faq-inner {
  max-width: 902px;          /* デザイン実測 */
  margin: 0 auto;
}
.faq-tab-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 52px;
}
.faq-tab {
  border: 1px solid var(--c-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--c-gray);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  letter-spacing: 0.04em;
}
.faq-tab:hover { border-color: var(--c-white); color: var(--c-white); }
.faq-tab.active { border-color: var(--c-white); color: var(--c-white); background: rgba(255,255,255,.05); }
.faq-tab-arrow { font-size: 14px; color: var(--c-border); transition: color .2s; }
.faq-tab:hover .faq-tab-arrow,
.faq-tab.active .faq-tab-arrow { color: var(--c-gray); }

.faq-section { margin-bottom: 52px; }
.faq-section-title {
  font-size: 20px;             /* デザイン実測 幅223px相当 */
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-white);
  margin-bottom: 22px;
}

.faq-item { border-bottom: none; margin-bottom: 2px; }
/* 質問行: グレー地(#828282)＋白文字。バッジは白丸にグレーのQ（デザイン実測） */
.faq-question {
  display: flex;
  align-items: center;
  gap: 27px;
  min-height: 65px;
  padding: 14px 24px 14px 19px;
  cursor: pointer;
  background: #828282;
  transition: background .2s;
}
.faq-question:hover,
.faq-question.open { background: #8b8b8b; }
.faq-q-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-roboto);
  font-weight: 500;
  font-size: 15px;
  color: #828282;
  flex-shrink: 0;
}
.faq-q-text {
  flex: 1;
  font-size: 14px;
  color: var(--c-white);
  line-height: 1.5;
}
/* トグルは枠なしの ＋ / −（デザイン実測） */
.faq-q-toggle {
  width: auto;
  height: auto;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--c-white);
  flex-shrink: 0;
  line-height: 1;
}
.faq-q-toggle::before { content: "+"; font-size: 22px; font-weight: 300; }
.faq-question.open .faq-q-toggle::before { content: "\2212"; }

.faq-answer {
  display: none;
  padding: 14px 14px 20px calc(28px + 14px + 4px);
  background: var(--c-white);
}
.faq-answer.open { display: block; }
.faq-a-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* 回答バッジ: グレー背景の円の中に白抜きのA（デザイン実測） */
.faq-a-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #828282;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-roboto);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-white);
  flex-shrink: 0;
}
.faq-answer {
  padding: 0;
}
.faq-a-wrap {
  display: none;
  background: var(--c-white);
  padding: 16px 24px 16px 19px;
  gap: 27px;
  align-items: center;
  min-height: 65px;
}
.faq-a-wrap.open { display: flex; }
.faq-a-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  padding-left: 0;
}


/* ============================================================
   NEWS LIST PAGE
   ============================================================ */

.news-layout {
  background: var(--c-bg3);          /* デザイン実測 #464646 */
  padding: 60px var(--pad) 80px;
}
.news-layout-inner {
  max-width: 897px;                  /* デザイン実測 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);   /* サイドバー（実測270pxから余白ぶん調整） */
  gap: 0 44px;                       /* サイドバーと一覧の間に余白 */
  align-items: start;
}
.news-sidebar {}
.news-sidebar-title {
  font-family: var(--font-roboto);
  font-size: 15px;                   /* デザイン実測 幅95px相当 */
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-white);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.85);
  margin-bottom: 18px;
}
.news-sidebar-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 36px; }
.news-sidebar-list a {
  font-size: 13px;
  color: var(--c-off-white);
  padding: 5px 0;
  letter-spacing: 0.04em;
  transition: color .2s;
  display: block;
}
.news-sidebar-list a:hover { color: var(--c-white); }

.news-archives { margin-bottom: 32px; }
.news-archives-year {
  font-size: 12px;
  color: var(--c-off-white);
  font-weight: 700;
  margin-bottom: 6px;
}
.news-archives-months { display: flex; flex-direction: column; gap: 0; }
.news-archives-months a {
  font-size: 11px;
  color: var(--c-gray);
  padding: 3px 0 3px 16px;
  transition: color .2s;
  display: block;
}
.news-archives-months a:hover { color: var(--c-white); }

.news-list { display: flex; flex-direction: column; gap: 0; }
.news-list-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);   /* サムネ170px（実測・正方形） */
  gap: 32px;
  align-items: start;
  padding: 0 0 50px;                 /* 行ピッチ220px（170+50） */
  border: none;
  cursor: pointer;
  transition: opacity .2s;
}
.news-list-item:hover { opacity: .8; }
.news-list-thumb {
  aspect-ratio: 1 / 1;               /* デザイン実測: 正方形 */
  overflow: hidden;
  background: var(--c-bg3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-list-body {}
.news-list-body .cat-date {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
/* デザイン実測: 薄グレー(#c8c8c8)の箱に白文字・100×19px */
.nsingle-meta .cat-badge,
.news-list-body .cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 19px;
  background: #c8c8c8;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 10px;
  color: var(--c-white);
  font-family: var(--font-roboto);
}
.nsingle-meta .news-date,
.news-list-body .news-date {
  font-size: 13px;
  color: var(--c-white);
  font-family: var(--font-roboto);
  letter-spacing: 0.04em;
}
.news-list-body .news-title {
  font-size: 17px;                   /* デザイン実測 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-white);
  margin-bottom: 12px;
}
.news-list-body .news-excerpt {
  font-size: 12.5px;                 /* デザイン実測 */
  color: var(--c-off-white);
  line-height: 1.65;
}
.news-list-body .more {
  font-size: 13px;                   /* デザイン実測 */
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-white);
  font-family: var(--font-roboto);
  display: flex;
  justify-content: flex-end;         /* デザイン: 右揃え */
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  transition: opacity .2s;
}
.news-list-item:hover .more { opacity: .7; }
.news-list-item:hover .more { color: var(--c-white); }


/* ── INFORMATION（モデルハウス・宅地・イベント）──────────── */
.news-list-body .info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  color: var(--c-white);
  margin-bottom: 8px;
}
.info-status {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-darkest);
  background: var(--c-white);
  font-family: var(--font-jp);
}
.info-cat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--c-off-white);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.info-map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg3);
}
.info-map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ============================================================
   NEWS SINGLE PAGE
   ============================================================ */

.nsingle-layout {
  background: var(--c-bg3);          /* デザイン実測 #464646 */
  padding: 40px var(--pad) 80px;
}
.nsingle-inner {
  max-width: 897px;                  /* デザイン実測（NEWS一覧と共通） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);   /* 一覧と揃える */
  gap: 0 44px;                       /* サイドバーと本文の間に余白 */
  align-items: start;
}

.nsingle-main {}
.nsingle-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.nsingle-eyecatch {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 24px;
}
.nsingle-title {
  font-size: 17px;                   /* デザイン実測（一覧と同サイズ） */
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-white);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.nsingle-body {
  font-size: 13px;                   /* デザイン実測 */
  color: var(--c-off-white);
  line-height: 1.85;                 /* 行ピッチ24px（実測） */
}
.nsingle-body p { margin-bottom: 24px; }
/* 実際の投稿は画像の縦横比がまちまちなので、比率は固定せず原寸比で表示する
   （デザインの見本画像は 630:446 なので見た目は変わらない） */
.nsingle-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
}
.nsingle-body h2,
.nsingle-body h3,
.nsingle-body h4 {
  color: var(--c-white);
  line-height: 1.5;
  margin: 32px 0 12px;
}
.nsingle-body h2 { font-size: 19px; }
.nsingle-body h3 { font-size: 16px; }
.nsingle-body h4 { font-size: 14px; }
.nsingle-body ul,
.nsingle-body ol { margin: 0 0 24px 1.4em; }
.nsingle-body li { margin-bottom: 6px; list-style: inherit; }
.nsingle-body ul { list-style: disc; }
.nsingle-body ol { list-style: decimal; }
.nsingle-body a { color: var(--c-white); text-decoration: underline; }
.nsingle-body blockquote {
  margin: 24px 0;
  padding: 12px 18px;
  border-left: 2px solid var(--c-border);
  color: var(--c-gray);
}
.nsingle-body table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.nsingle-body th,
.nsingle-body td { border: 1px solid var(--c-border2); padding: 8px 10px; }

.nsingle-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border2);
  padding-top: 28px;
  margin-top: 40px;
}
.nsingle-nav a {
  font-size: 13px;
  color: var(--c-white);
  letter-spacing: 0.06em;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nsingle-nav a:hover { color: var(--c-white); }
.nsingle-nav .center { justify-content: center; }
.nsingle-nav .right { justify-content: flex-end; }


/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-main {
  background: var(--c-bg3);          /* デザイン実測 #464646 */
  padding: 40px var(--pad) 90px;
}
.contact-inner {
  max-width: 966px;                  /* ラベル241〜入力右端1201（実測） */
  margin: 0 auto;
}
.contact-lead {
  text-align: center;
  font-size: 13px;
  color: var(--c-off-white);
  line-height: 1.9;
  margin-bottom: 56px;
}

.cf-form {}
.cf-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);   /* ラベル列（実測） */
  gap: 0;
  border: none;
  padding: 0 0 28px;                 /* 行ピッチ80px（実測） */
  align-items: start;
}
.cf-label {
  font-size: 13px;
  color: var(--c-white);
  letter-spacing: 0.06em;
  padding-top: 13px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* デザインはバッジではなく「−必須」のテキスト表記 */
.cf-required {
  font-size: 12px;
  background: none;
  color: var(--c-white);
  padding: 0;
  letter-spacing: 0.04em;
  border-radius: 0;
  white-space: nowrap;
}
/* 入力欄は白地・濃い文字（デザイン実測） */
.cf-input, .cf-select, .cf-textarea {
  width: 100%;
  height: 44px;
  background: var(--c-white);
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  color: #333;
  font-family: var(--font-jp);
  outline: none;
  transition: box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.cf-input::placeholder, .cf-textarea::placeholder { color: #a5a5a5; }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.cf-textarea { resize: vertical; height: auto; min-height: 150px; }

.cf-pp-box {
  background: var(--c-white);
  border: none;
  padding: 18px 20px;
  max-height: 167px;                 /* デザイン実測 */
  overflow-y: auto;
  font-size: 11.5px;
  color: #444;
  line-height: 1.85;
  margin-top: 0;
}
.cf-pp-title { font-weight: 700; color: #222; margin-bottom: 8px; }
.cf-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0 0;                 /* 入力列の中（プライバシーボックス直下） */
  border: none;
}
.cf-check-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--c-white); }
.cf-check-row label { font-size: 12.5px; color: var(--c-white); line-height: 1.6; }

.cf-submit-wrap {
  padding-top: 46px;
  text-align: center;
}
/* デザイン実測: 320×52px の薄グレー塗り（#b4b4b4） */
.cf-submit {
  background: #b4b4b4;
  border: none;
  color: #333;
  width: 320px;
  height: 52px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-family: var(--font-jp);
  transition: background .2s;
}
.cf-submit:hover {
  background: var(--c-white);
  color: #222;
}

/* ---- Contact Form 7 出力への適用（静的デザインと同じ見た目にする） ---- */
.cf-row-top { align-items: flex-start; }
.cf-row-top .cf-label { padding-top: 0; }

/* CF7 は入力欄を span.wpcf7-form-control-wrap で包む。グリッド項目として振る舞わせる */
.cf-row .wpcf7-form-control-wrap { display: block; width: 100%; }
.cf-form .wpcf7-form-control-wrap > .cf-input,
.cf-form .wpcf7-form-control-wrap > .cf-select,
.cf-form .wpcf7-form-control-wrap > .cf-textarea { width: 100%; }

/* 同意チェック（[acceptance]）*/
.cf-check-row .wpcf7-form-control-wrap { display: inline-block; width: auto; }
.cf-check-row .wpcf7-list-item { margin: 0; }
.cf-check-row .wpcf7-list-item-label { display: none; }
.cf-check-row input[type="checkbox"] { margin: 3px 8px 0 0; accent-color: var(--c-white); }

/* バリデーションメッセージ */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #ff9b9b;
  padding-top: 6px;
  letter-spacing: 0.04em;
}
.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-white);
  letter-spacing: 0.04em;
}
.wpcf7-spinner { margin: 0 auto; display: block; }

@media (max-width: 768px) {
  .cf-row { grid-template-columns: 1fr; }
  .cf-label { padding-top: 0; padding-bottom: 8px; }
  .cf-submit { width: 100%; max-width: 320px; }
}

/* ============================================================
   SP用: 絞り込みの開閉ボタン（PCでは非表示）
   ============================================================ */
.sb-toggle { display: none; }


/* ============================================================
   SP 下部固定バー（767px以下で表示・PCでは非表示）
   デザイン指定: 「モデルルーム見学会」「お問い合わせ」「メニュー」の3分割
   ============================================================ */
.sp-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  height: var(--sp-bar-h);
  background: var(--c-darkest);
  grid-template-columns: 1fr 1fr 64px;
}
.sp-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-white);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--c-border);
}
.sp-bar-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.sp-bar-menu span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--c-white);
}


/* ============================================================
   SP レイアウト（767px以下）
   PC版デザインを1〜2カラムへ落とし込む。TOPのヒーローとナビは支給デザイン準拠。
   ============================================================ */
@media (max-width: 767px) {

  :root {
    --header-h: 64px;
    --sp-bar-h: 60px;
    --pad: 20px;
    --card-w: 100%;
    --card-h: auto;
  }

  body { padding-bottom: var(--sp-bar-h); }

  /* ---- ヘッダー: ロゴのみ中央 ---- */
  .site-header { justify-content: center; padding: 0 16px; }
  .hdr-logo { margin-right: 0; }
  .hdr-logo img { height: 32px; width: auto; }
  .hdr-nav, .hdr-contact, .hdr-tel, .hdr-sns, .hdr-hamburger { display: none; }

  /* ---- 下部固定バー / 追従ボタン ---- */
  .sp-bar { display: grid; }
  .modelroom-btn { display: none; }   /* 下部バーの「モデルルーム見学会」に置き換え */

  /* ---- ドロワー ---- */
  .drawer { width: 84%; max-width: 320px; right: -100%; padding: 68px 28px 40px; }
  .drawer.open { right: 0; }
  .drawer-nav a { font-size: 15px; padding: 13px 0; }

  /* ---- TOP ヒーロー（支給デザイン準拠）---- */
  .top-hero {
    height: calc(100vh - var(--header-h) - var(--sp-bar-h));
    height: calc(100svh - var(--header-h) - var(--sp-bar-h));
    min-height: 420px;
    max-height: none;
  }
  /* 明るいスライドでも白文字が読めるよう、右側にごく薄い暗幕を敷く */
  .top-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,0) 52%);
  }
  .top-hero-text {
    right: 26px;
    top: 44px;
    font-size: 20px;
    letter-spacing: 0.2em;
    line-height: 1.85;
    z-index: 3;
  }
  .hero-dots { bottom: 16px; gap: 6px; }
  .hero-dot { width: 26px; }

  /* ---- 下層ページのヒーロー帯 ---- */
  .page-hero { height: 200px; }
  .page-hero:has(.page-hero-bg) { height: 160px; }
  .page-hero-text h1 { font-size: 30px; }

  /* ---- セクション共通 ---- */
  .inner { padding: 0 var(--pad); }
  .sec-title-jp { font-size: 12px; }

  /* ---- Instagram 帯（10枚 → 5列×2段）---- */
  /* 先方指定: 3列（3×3の9枚。10枚目はSPでは出さない） */
  .top-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; height: auto; }
  .top-grid-item:nth-child(10) { display: none; }
  /* PCはモザイク配置（nth-childでgrid-column/rowを指定）しているため、
     解除しないとSPで5列に並ばず大きく崩れる */
  .top-grid-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .top-grid-item { aspect-ratio: 1 / 1; }

  /* ---- CONCEPT / BRAND / SERVICE / COLUMN / NEWS / ACCESS ---- */
  .top-concept { grid-template-columns: 1fr; }
  .top-concept-photo { height: 240px; }
  .top-concept-body { padding: 32px var(--pad); }

  /* WORKSスライダー: 画面端で切れないよう左右に余白を取り、
     次のカードを少し覗かせて「横に送れる」と分かるようにする。
     矢印は写真に重ねず、トラックの下に横並びで置く。 */
  .top-works-slider-wrap {
    width: 100%;
    --works-gap: 12px;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  /* 先方指定: カードを画面中央に。左右に同じだけ余白を取り、両側が均等に覗く */
  .top-works-track {
    grid-column: 1 / -1;
    /* 左右19%ずつ余白を取り、カードは残り(=全体の62%)いっぱい。
       ％は padding を除いた幅が基準になるので 100% と書く。 */
    grid-auto-columns: 100%;
    padding: 0 19% 2px;
    scroll-padding-inline: 19%;
  }
  .top-works-card { scroll-snap-align: center; }
  .top-works-card img { height: 150px; }
  .slider-arrow {
    position: static;
    transform: none;
    font-size: 30px;
    padding: 14px 16px 0;
  }
  .slider-arrow.prev { justify-self: end; }
  .slider-arrow.next { justify-self: start; }

  /* CONCEPTの丸3つ: 縦一列だと間延びするので三角に並べて中央寄せ */
  .top-concept-features {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    gap: 14px 16px;
    margin: 4px auto 28px;
  }
  .top-concept-features .top-concept-feat:first-child { grid-column: 1 / -1; }

  .top-service-grid { grid-template-columns: 1fr; gap: 14px; }
  .top-column-grid, .top-news-grid { grid-template-columns: 1fr; gap: 18px; }
  .top-column-card, .top-news-card { width: 100%; height: auto; }
  .top-column-card-img, .top-news-card-img { height: 180px; }

  .top-instagram { padding: 50px var(--pad) 0; }
  .top-access-inner { grid-template-columns: 1fr; gap: 20px; }
  .top-access-map iframe, .info-map iframe { height: 240px; }

  /* ---- CTA（電話）---- */
  .cta-phone { padding: 44px var(--pad); }
  .cta-phone .tel { font-size: 34px; }

  /* ---- CONCEPT / SERVICE ページ ---- */
  .con-split { grid-template-columns: 1fr; }
  .con-split-photo { height: 220px; }
  .con-split-body { padding: 28px var(--pad); }
  /* 先方指定: 3項目の間隔を広げる（本文が次の項目に接していた） */
  .con-features-inner { grid-template-columns: 1fr; gap: 56px; }
  .con-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  /* 画像を必ず上・本文を下に。is-reverse（PCで左右入れ替える行）も同じ並びに揃える。
     .is-reverse の指定は詳細度が高いので、同じ詳細度で打ち消すこと。 */
  .con-service-item,
  .con-service-item.is-reverse { grid-template-columns: 1fr; min-height: 0; }
  .con-service-item .con-service-item-photo,
  .con-service-item.is-reverse .con-service-item-photo { order: 0; height: 220px; }
  .con-service-item .con-service-item-body,
  .con-service-item.is-reverse .con-service-item-body {
    order: 1;
    padding: 26px var(--pad);
  }
  .con-service-item-body .jp-sub { margin-bottom: 18px; }
  .con-service-item-body .en-title { font-size: 26px; }
  .con-service-item-body .tagline { font-size: 17px; margin-bottom: 16px; }
  .svc-picks-list { grid-template-columns: 1fr; }

  /* ---- BRAND ---- */
  .brand-list-item { grid-template-columns: 1fr; gap: 14px; padding: 22px var(--pad); }
  .brand-list-item-body { padding: 0; }
  .brand-feature { grid-template-columns: 1fr; }

  /* ---- WORKS 一覧 ---- */
  .works-layout { grid-template-columns: 1fr; gap: 24px; padding: 36px var(--pad) 56px; }
  .works-sidebar { display: block; }
  .works-cat-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .works-sidebar.is-open .works-cat-groups { display: grid; }
  .works-cat-group { margin-bottom: 18px; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  /* 万一奇数で余ったときは最後の1件を横幅いっぱいにして、片側だけ空くのを防ぐ */
  .works-grid .works-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .works-grid .works-card:last-child:nth-child(odd) .works-card-img { aspect-ratio: 16 / 9; }
  .works-card-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .works-card-name { font-size: 11.5px; }
  .works-card-more { font-size: 9px; }

  /* ---- WORKS 詳細 ---- */
  .wsingle-inner { padding: 0 var(--pad); }
  .wsingle-thumbs-wrap { --thumb-per-view: 4; }
  .wsingle-thumb-arrow { font-size: 24px; }
  .wsingle-thumb-arrow.prev { right: calc(100% + 2px); }
  .wsingle-thumb-arrow.next { left:  calc(100% + 2px); }
  .wsingle-spec-wrap { grid-template-columns: 1fr; gap: 0; }
  .wsingle-spec-row { grid-template-columns: 84px minmax(0, 1fr); }
  .wsingle-nav { grid-template-columns: 1fr; gap: 8px; }
  .wsingle-price { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
  .plan-lb { padding: 44px 12px; }
  .plan-lb-prev, .plan-lb-next { font-size: 30px; }
  .plan-lb-prev { left: 2px; }
  .plan-lb-next { right: 2px; }
  .plan-lb-fig img { padding: 10px; max-height: calc(100svh - 120px); }
  .wsingle-price .price-num { font-size: 26px; }
  .wsingle-plans { grid-template-columns: 1fr; }

  /* ---- COMPANY ---- */
  .company-table-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  /* PCは「全体322pxを3列で分割」だが、SPは縦積みなのでその高さを解除しないと
     1項目あたり約100pxに潰れる */
  .company-links { grid-template-columns: 1fr; gap: 12px; height: auto; }
  .company-link-item { height: 160px; }
  .company-link-label { padding: 0 var(--pad); }
  .company-link-label .title { font-size: 22px; margin-bottom: 10px; }

  /* ---- FAQ ---- */
  .faq-tab-row { grid-template-columns: 1fr; gap: 8px; }
  .faq-inner { padding: 0 var(--pad); }
  .faq-q-text { font-size: 13.5px; }

  /* ---- 絞り込みの開閉（A案）---- */
  .sb-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    color: var(--c-white);
    font-family: var(--font-jp);
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 13px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    text-align: left;
  }
  .sb-toggle .sb-label { color: var(--c-gray); font-size: 12px; }
  .sb-toggle .sb-current { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-toggle .sb-caret { transition: transform .2s; font-size: 11px; color: var(--c-gray); }
  .sb-toggle[aria-expanded="true"] .sb-caret { transform: rotate(180deg); }

  /* 閉じているときは中身を隠す */
  .works-cat-groups,
  .news-cats .news-sidebar-title,
  .news-cats .news-sidebar-list { display: none; }
  .works-sidebar.is-open .works-cat-groups,
  .news-cats.is-open .news-sidebar-title,
  .news-cats.is-open .news-sidebar-list { display: block; }

  /* ---- NEWS / INFORMATION 一覧 ---- */
  .news-layout { padding: 36px var(--pad) 56px; }
  .news-layout-inner { grid-template-columns: 1fr; gap: 28px; }
  /* display:contents で子を親グリッドに参加させ、順番を入れ替える
     （カテゴリ → 一覧 → アーカイブ） */
  .news-sidebar { display: contents; }
  .news-cats     { order: 1; }
  .news-layout-inner > div:last-child { order: 2; }
  .news-archives { order: 3; margin-top: 32px; }
  .news-list-item { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .news-list-body .cat-date { flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
  .news-list-body .cat-badge { width: auto; min-width: 64px; padding: 0 8px; }
  .news-date { font-size: 11px; }
  .news-excerpt { display: none; }   /* スマホは所在地・面積・価格を優先 */
  .news-list-thumb { height: 108px; }
  .news-title { font-size: 14px; }
  .info-meta { font-size: 11.5px; }

  /* ---- NEWS 詳細 ---- */
  .nsingle-inner { grid-template-columns: 1fr; gap: 28px; padding: 0 var(--pad); }
  .nsingle-inner .news-sidebar { display: contents; }
  .nsingle-main  { order: 1; }
  .nsingle-inner .news-cats     { order: 2; margin-top: 8px; }
  .nsingle-inner .news-archives { order: 3; }
  .nsingle-title { font-size: 20px; }
  .nsingle-nav { grid-template-columns: 1fr; gap: 8px; }

  /* ---- CONTACT ---- */
  .contact-inner { padding: 0 var(--pad); }
  .cf-row { grid-template-columns: 1fr; padding-bottom: 20px; }
  .cf-label { padding-top: 0; padding-bottom: 8px; }
  .cf-pp-box { max-height: 200px; }
  .cf-submit { width: 100%; max-width: 320px; }

  /* ---- フッター ---- */
  .site-footer { padding-bottom: 28px; }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; justify-items: start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ---- さらに小さい端末 ---- */
@media (max-width: 380px) {
  .sp-bar-item { font-size: 11.5px; }
  .top-hero-text { font-size: 18px; right: 20px; }
  .works-grid { gap: 14px 10px; }
}