/* concept専用スタイル（Vercel版<style>から移植・会長指示 2026-07-03）*/
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1a2d40;
      --navy-mid:   #243347;
      --white:      #ffffff;
      --off-white:  #f5f3ef;
      --text:       #252525;
      --text-mid:   #555555;
      --text-light: #888888;
      --accent:     #a89880;
      --border:     rgba(26,45,64,.1);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--white);
      overflow-x: hidden;
    }
    /* ゴシックのベースフォントは concept 本文だけにスコープ（共通フッターは明朝のまま） 会長指示 2026-07-13 */
    main.page.concept {
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
    }

    /* ─── HEADER ─────────────────────────────────── */
    header {
      position: fixed; top: 0; left: 0; width: 100%; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 48px;
      height: 72px;
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .logo {
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: var(--navy);
    }

    .logo-mark {
      width: 40px; height: 40px;
      background: var(--navy);
      display: flex; align-items: center; justify-content: center;
    }

    .logo-mark svg { width: 24px; height: 24px; fill: white; }

    .logo-name {
      font-family: 'Noto Serif JP', serif;
      font-size: 13px; font-weight: 400;
      letter-spacing: .12em;
    }

    .nav-icon {
      width: 28px; height: 18px; cursor: pointer;
      display: flex; flex-direction: column; justify-content: space-between;
    }

    .nav-icon span {
      display: block; height: 1px;
      background: var(--navy);
      transition: opacity .2s;
    }

    .nav-icon span:nth-child(2) { width: 70%; }

    /* ─── HERO ────────────────────────────────────── */
    .hero {
      height: 100vh; min-height: 640px;
      position: relative;
      display: flex; align-items: flex-end;
      padding: 0 80px 80px;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('../images/concept/kaizen_hero_concept.jpg');
      background-size: cover; background-position: center;
      transform: scale(1.04);
      animation: heroZoom 8s ease-out forwards;
    }

    @keyframes heroZoom {
      from { transform: scale(1.04); }
      to   { transform: scale(1.00); }
    }

    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(8,18,28,.88) 0%,
        rgba(8,18,28,.45) 45%,
        rgba(8,18,28,.18) 100%
      );
    }

    .hero-content {
      position: relative; z-index: 1;
      max-width: 760px;
    }

    .hero-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 11px; font-weight: 300;
      letter-spacing: .4em; color: rgba(255,255,255,.55);
      display: flex; align-items: center; gap: 18px;
      margin-bottom: 36px; text-transform: uppercase;
    }

    .hero-label::before {
      content: ''; display: block;
      width: 40px; height: 1px;
      background: rgba(255,255,255,.4);
    }

    .hero-kigo {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(64px, 10vw, 112px);
      font-weight: 200; color: white;
      line-height: 1; letter-spacing: .08em;
      margin-bottom: 22px;
    }

    .hero-kigo .kakko { font-weight: 200; opacity: .7; }

    .hero-definition {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(11px, 1.2vw, 15px);
      font-weight: 300; color: rgba(255,255,255,.65);
      letter-spacing: .12em; margin-bottom: 44px;
    }

    .hero-body {
      font-size: 13px; font-weight: 300;
      line-height: 2.2; color: rgba(255,255,255,.6);
      max-width: 420px;
    }

    .scroll-hint {
      position: absolute; bottom: 40px; right: 72px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }

    .scroll-hint span {
      font-family: 'Cormorant Garamond', serif;
      font-size: 9px; letter-spacing: .3em;
      color: rgba(255,255,255,.45); text-transform: uppercase;
    }

    .scroll-line {
      width: 1px; height: 56px;
      background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
      animation: scrollAnim 1.8s ease-in-out infinite;
    }

    @keyframes scrollAnim {
      0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
      40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
      100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
    }

    /* ─── SHARED TYPOGRAPHY ──────────────────────── */
    .sec-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 11px; font-weight: 300;
      letter-spacing: .35em; color: var(--accent);
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 28px; text-transform: uppercase;
    }

    .sec-label::before {
      content: ''; display: block;
      width: 32px; height: 1px; background: var(--accent);
    }

    .sec-label.center { justify-content: center; }
    .sec-label.center::before { display: none; }

    .sec-label.light { color: rgba(255,255,255,.4); }
    .sec-label.light::before { background: rgba(255,255,255,.3); }

    .sec-heading {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(22px, 2.8vw, 36px);
      font-weight: 300; line-height: 1.65;
      letter-spacing: .04em;
      margin-bottom: 32px;
    }

    .sec-body {
      font-size: 14px; font-weight: 300;
      line-height: 2.3; color: var(--text-mid);
    }

    .sec-body p + p { margin-top: 1.4em; }

    /* ─── VERTICAL LINE DIVIDER ──────────────────── */
    .vline-divider {
      display: flex; justify-content: center;
      padding: 0;
    }

    .vline-divider::after {
      content: ''; display: block;
      width: 1px; height: 72px;
      background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    }

    /* ─── 01 · OUR PHILOSOPHY ────────────────────── */
    .philosophy {
      padding: 120px 80px 100px;
      text-align: center;
      max-width: 800px; margin: 0 auto;
    }

    .philosophy .sec-heading { max-width: 640px; margin: 0 auto 36px; }
    .philosophy .sec-body    { max-width: 520px; margin: 0 auto; text-align: left; }

    /* ─── SPLIT LAYOUT ───────────────────────────── */
    .split {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 580px;
    }

    .split-img {
      background-size: cover; background-position: center;
      min-height: 480px;
    }

    .split-txt {
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 80px 72px;
    }

    .split-txt.dark {
      background: var(--navy);
    }

    .split-txt.dark .sec-label  { color: rgba(255,255,255,.38); }
    .split-txt.dark .sec-label::before { background: rgba(255,255,255,.25); }
    .split-txt.dark .sec-heading { color: white; }
    .split-txt.dark .sec-body    { color: rgba(255,255,255,.88); }
    /* kaizen: テーマCSSのp色指定に勝つよう、暗背景セクションのpを直接白指定（2026-06-20） */
    .split-txt.dark .sec-body p { color: rgba(255,255,255,.88) !important; }
    .kaniwa .sec-body,
    .kaniwa .sec-body p { color: rgba(255,255,255,.88) !important; }
    .split-txt.dark .btn-line    { color: white; border-color: rgba(255,255,255,.35); }

    /* ─── BUTTON ─────────────────────────────────── */
    .btn-line {
      display: inline-flex; align-items: center; gap: 14px;
      font-size: 11px; font-weight: 400; letter-spacing: .15em;
      color: var(--navy); text-decoration: none;
      margin-top: 40px; width: fit-content;
      transition: opacity .2s;
    }

    .btn-line:hover { opacity: .65; }

    .btn-circle {
      width: 46px; height: 46px;
      border: 1px solid currentColor; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0;
      transition: background .25s, color .25s;
    }

    .btn-line:hover .btn-circle {
      background: var(--navy); color: white;
    }

    .split-txt.dark .btn-line:hover .btn-circle {
      background: white; color: var(--navy);
    }

    /* ─── 02 · 代表の言葉 PLACEHOLDER ───────────── */
    .placeholder-split {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 560px;
    }

    .ph-img-side {
      background: #d8d3cc;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }

    .ph-img-side::after {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px,
        transparent 1px, transparent 16px
      );
    }

    .ph-img-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 11px; letter-spacing: .3em;
      color: rgba(255,255,255,.55);
      text-transform: uppercase;
      text-align: center; position: relative; z-index: 1;
    }

    .ph-img-label strong {
      display: block;
      font-family: 'Noto Serif JP', serif;
      font-size: 15px; font-weight: 300;
      letter-spacing: .15em;
      color: rgba(255,255,255,.7);
      margin-bottom: 8px;
    }

    /* 代表写真（会社概要ページより引用）：3:4の額装ポートレートとして中央配置 */
    .ph-img-side.is-photo {
      background: var(--navy);
      flex-direction: column;
      gap: 24px;
      padding: 60px 24px;
    }
    .ph-img-side.is-photo::after { display: none; }
    /* 写真実寸 597×786(≒3:4) に合わせたフレーム。cover でもほぼ無トリミング */
    .ph-img-frame {
      position: relative; margin: 0;
      width: min(76%, 392px);
      aspect-ratio: 3 / 4;
      overflow: hidden;
      box-shadow: 0 26px 54px -22px rgba(0,0,0,.6);
    }
    .ph-img-frame img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      display: block;
    }
    .ph-img-frame::after {        /* インセット罫線で上質な額装感 */
      content: ''; position: absolute; inset: 12px;
      border: 1px solid rgba(255,255,255,.32);
      pointer-events: none;
    }
    .ph-img-side.is-photo .ph-photo-cap {
      text-align: center;
      font-family: 'Noto Serif JP', serif;
      color: #fff; letter-spacing: .12em;
    }
    .ph-img-side.is-photo .ph-photo-cap small {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10px; letter-spacing: .28em;
      color: rgba(255,255,255,.55);
      text-transform: uppercase; margin-bottom: 7px;
    }
    .ph-img-side.is-photo .ph-photo-cap b { font-weight: 400; font-size: 15px; }

    .ph-txt-side {
      display: flex; flex-direction: column;
      justify-content: center; padding: 80px 72px;
      background: var(--off-white);
      position: relative;
    }

    .ph-badge {
      display: inline-block;
      border: 1px solid var(--accent);
      padding: 6px 18px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10px; letter-spacing: .3em;
      color: var(--accent); text-transform: uppercase;
      margin-bottom: 28px; width: fit-content;
    }

    .ph-note {
      font-size: 12px; font-weight: 300;
      color: var(--text-light); line-height: 2;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(168,152,128,.3);
    }

    /* ─── 03 · 家と庭 ─────────────────────────────── */
    .kaniwa {
      background: var(--navy);
      padding: 130px 80px;
      position: relative; overflow: hidden;
    }

    .kaniwa-bg {
      position: absolute; inset: 0;
      background-image: url('../images/top/prl03.jpg');
      background-size: cover; background-position: center;
      opacity: .12;
    }

    .kaniwa-inner {
      position: relative; z-index: 1;
      max-width: 720px;
    }

    .kaniwa .sec-label { color: rgba(255,255,255,.38); }
    .kaniwa .sec-label::before { background: rgba(255,255,255,.25); }

    .kaniwa .sec-heading { color: white; max-width: 600px; }

    .kaniwa .kanji-large {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(44px, 4.4vw, 60px);   /* PCで「暮らしを、聞く。」が1行に収まるよう縮小（2026-06-20） */
      font-weight: 200; color: white;
      line-height: 1.2; letter-spacing: .1em;
      white-space: nowrap;
      margin-bottom: 12px;
    }

    .kaniwa .kanji-def {
      font-family: 'Noto Serif JP', serif;
      font-size: 18px; font-weight: 300;
      color: rgba(255,255,255,.5);
      letter-spacing: .12em; margin-bottom: 52px;
    }

    .kaniwa .sec-body { color: rgba(255,255,255,.65); max-width: 540px; }

    /* ─── 04 · 自社職人 PLACEHOLDER ─────────────── */

    /* ─── 05 · 暮らしとお金 ────────────────────── */
    .finance {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 560px;
    }

    .finance-img {
      background-image: url('../images/top/prl04.jpg');
      background-size: cover; background-position: center;
    }

    /* ─── 06 · OBの声 PLACEHOLDER ───────────────── */
    .ob-placeholder {
      padding: 120px 80px;
      background: var(--white);
      text-align: center;
      position: relative;
    }

    .ob-placeholder .sec-label { justify-content: center; }
    .ob-placeholder .sec-label::before { display: none; }
    .ob-placeholder .sec-heading { max-width: 600px; margin: 0 auto 36px; }

    .ob-card-mock {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; max-width: 1100px; margin: 0 auto;
    }

    .ob-card {
      height: 260px;
      background: var(--off-white);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 12px;
    }

    .ob-card-ph {
      font-family: 'Cormorant Garamond', serif;
      font-size: 10px; letter-spacing: .3em;
      color: var(--text-light); text-transform: uppercase;
    }

    .ob-card-ph strong {
      display: block;
      font-family: 'Noto Serif JP', serif;
      font-size: 14px; font-weight: 300;
      letter-spacing: .1em; color: var(--text-mid);
      margin-bottom: 4px;
    }

    /* OBの声：実際のインタビュー記事（/interviews/）3件を写真付きカードで表示 */
    .ob-card.ob-voice {
      height: auto;
      padding: 0;
      gap: 0;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--border);
      text-align: left;
      text-decoration: none;
      transition: box-shadow .3s ease, transform .3s ease;
    }
    .ob-card.ob-voice:hover { box-shadow: 0 18px 40px -22px rgba(26,45,64,.5); transform: translateY(-4px); }
    .ob-photo { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
    .ob-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
    .ob-card.ob-voice:hover .ob-photo img { transform: scale(1.05); }
    .ob-card-body {
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
      padding: 26px 26px 30px;
    }
    .ob-who {
      font-family: 'Cormorant Garamond', serif;
      font-size: 12px; letter-spacing: .08em; color: var(--text-light);
    }
    .ob-title {
      font-family: 'Noto Serif JP', serif;
      font-size: 17px; font-weight: 400; line-height: 1.75;
      color: var(--navy); letter-spacing: .02em;
    }
    .ob-link {
      margin-top: 2px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 3px;
    }
    .ob-imgnote {
      text-align: center; margin-top: 30px;
      font-size: 11px; letter-spacing: .04em; color: var(--text-light);
    }

    /* ─── WORKS ──────────────────────────────────── */
    .works { background: #eeeae4; padding: 100px 80px; }

    .works-hd { margin-bottom: 56px; }

    .works-en {
      font-family: 'Cormorant Garamond', serif;
      font-size: 56px; font-weight: 300;
      color: var(--navy); letter-spacing: .04em;
      /* .works-en は offsetHeight が 0 に潰れ「施工事例」と重なるため、padding-bottom（高さ0でも加算される・em でフォント基準にスケール）で確実に押し下げる（2026-06-20） */
      line-height: 1.1; padding-bottom: 0.78em;
      margin-bottom: 8px;
    }

    .works-ja {
      font-size: 12px; color: var(--text-light);
      font-weight: 300; letter-spacing: .1em;
      margin-bottom: 4px;
    }

    .works-desc { font-size: 13px; color: var(--text-light); font-weight: 300; }

    .works-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px; margin-bottom: 56px;
    }

    .work-card { text-decoration: none; color: inherit; }

    .work-card img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      display: block; border-radius: 2px; margin-bottom: 14px;
      transition: opacity .3s;
    }

    .work-card:hover img { opacity: .82; }

    .work-loc {
      font-size: 11px; color: var(--text-light);
      font-weight: 300; margin-bottom: 4px;
    }

    .work-name {
      font-size: 14px; font-weight: 400;
      display: flex; align-items: center; gap: 6px;
    }

    .works-more { text-align: center; }

    .btn-outline {
      display: inline-flex; align-items: center; gap: 16px;
      padding: 15px 48px;
      border: 1px solid var(--navy);
      font-size: 11px; letter-spacing: .18em;
      color: var(--navy); text-decoration: none;
      transition: all .3s;
    }

    .btn-outline:hover { background: var(--navy); color: white; }

    /* ─── FLOATING CTA ───────────────────────────── */
    .floating-cta {
      position: fixed; bottom: 36px; right: 36px;
      background: white;
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,.08);
      display: flex; z-index: 150;
    }

    .cta-item {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 14px 18px;
      text-decoration: none; color: var(--navy);
      border-right: 1px solid var(--border);
      transition: background .2s;
      min-width: 80px; gap: 5px;
    }

    .cta-item:last-child { border-right: none; }
    .cta-item:hover { background: var(--off-white); }

    .cta-item svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 1.5; }

    .cta-en {
      font-family: 'Cormorant Garamond', serif;
      font-size: 9.5px; letter-spacing: .1em; line-height: 1.2; text-align: center;
    }

    .cta-ja { font-size: 8.5px; color: var(--text-light); }

    /* ─── HELPERS ────────────────────────────────── */
    .mt-sm { margin-top: 16px; }
    .mt-md { margin-top: 32px; }

    /* SP専用の改行（PCでは改行を出さない）。会長指示 2026-06-26 */
    @media (min-width: 769px) { br.br-sp { display: none; } }

    /* ═══ SP（スマホ）対応：このページは元々メディアクエリ無し＝デスクトップ専用だったため、
           特大フォント・2カラム圧縮・代表セクションの極狭崩れをSPで一括是正（2026-06-20） ═══ */
    @media (max-width: 768px) {
      /* 共通タイポ */
      .sec-heading { font-size: 24px; line-height: 1.6; margin-bottom: 24px; }
      .sec-body    { font-size: 14px; line-height: 2.1; }
      .sec-label   { margin-bottom: 20px; font-size: 10px; letter-spacing: .28em; }

      /* HERO */
      /* SP：縦長画像は上部に空・下部に家。文字が家と被るため上部（空）に配置（2026-06-20） */
      .hero { align-items: flex-start; padding: 104px 26px 56px; min-height: 560px; }
      .hero-bg { background-image: url('../images/concept/kaizen_hero_concept_sp.jpg'); }  /* SP用は縦長画像（2026-06-20） */
      .hero-content { max-width: 100%; }
      .hero-label { margin-bottom: 24px; }
      .hero-kigo { font-size: 52px; margin-bottom: 16px; }
      .hero-definition { font-size: 12px; margin-bottom: 24px; line-height: 1.7; }
      .hero-body { font-size: 13px; line-height: 2; max-width: 100%; }
      .scroll-hint { right: 22px; bottom: 28px; }

      /* 区切り線を短く */
      .vline-divider::after { height: 48px; }

      /* 01 PHILOSOPHY */
      .philosophy { padding: 72px 26px 64px; }
      .philosophy .sec-heading { margin-bottom: 24px; }

      /* SPLIT系（職人・Timeless・資金・Enduring）を縦積みに */
      .split, .finance { grid-template-columns: 1fr; min-height: 0; }
      .split-img, .finance-img { min-height: 240px; order: 0 !important; }
      .split-txt { padding: 52px 26px; order: 0 !important; }
      .btn-line { margin-top: 28px; }

      /* 02 代表の言葉（placeholder-split）を縦積みに＝極狭崩れの是正 */
      .placeholder-split { grid-template-columns: 1fr; min-height: 0; }
      .ph-img-side.is-photo { padding: 44px 24px; }
      .ph-img-frame { width: min(72%, 280px); }
      .ph-txt-side { padding: 52px 26px; }

      /* 03 暮らしを、聞く（kaniwa）大文字を縮小 */
      .kaniwa { padding: 76px 26px; }
      .kaniwa-inner { max-width: 100%; }
      .kaniwa .kanji-large { font-size: 28px; line-height: 1.35; }
      .kaniwa .kanji-def { font-size: 18px; margin-bottom: 32px; line-height: 1.7; }
      .kaniwa .sec-body { max-width: 100%; }
      .kaniwa .sec-heading { max-width: 100%; }

      /* 06 OBの声 カードを縦積みに */
      .ob-placeholder { padding: 72px 26px; }
      .ob-card-mock { grid-template-columns: 1fr; gap: 12px; }

      /* 会長指示のSP個別フォントサイズ（2026-06-20） */
      .philosophy .sec-heading { font-size: 22px; }      /* 納得して選んでいただきたい。 */
      .ph-txt-side .sec-heading { font-size: 20px; }      /* 誠実さを、言葉ではなく行動で。 */
      .ob-placeholder .sec-heading { font-size: 20px; }   /* 10年後も、ここでよかった。 */

      /* WORKS：崩れ是正＋施工事例を横スワイプのスライド形式に（CSS scroll-snap・JS不要） */
      .works { padding: 64px 0 88px; }
      .works-hd { margin-bottom: 32px; padding: 0 26px; }
      .works-en { font-size: 40px; }
      .works-grid {
        display: flex; gap: 14px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 0 32px; padding: 0 26px 12px;
      }
      .works-grid .work-card {
        flex: 0 0 80%; scroll-snap-align: center;
      }
      .works-grid::-webkit-scrollbar { height: 3px; }
      .works-grid::-webkit-scrollbar-thumb { background: rgba(26,45,64,.25); border-radius: 3px; }
      .works-more { padding: 0 26px; }
    }