:root {
      --renga02: #A75838; --tsuchi: #D8C2A4; --kusa: #9EAD8A;
      --kinari: #F5F1E8; --sora: #7E95A1; --hi: #F47A4E;
      --hikari: #E2B44C; --sumi: #3B322C; --renga01: #522614;
      --logo: #801421; --hai: #D4D3CF;
      --font-en: "Arvo", serif;
      --font-ja: "Zen Kaku Gothic New", sans-serif;
      /* セクション左右パディング（画面幅に応じて可変） */
      --sec-pad-x: clamp(20px, 6vw - 26px, 60px);
      --sec-pad-x-access-r: clamp(20px, 11.9vw - 71px, 100px);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { background: var(--kinari); color: var(--sumi); font-family: var(--font-ja); overflow-x: hidden; padding-right: 216px; }
    img { max-width: 100%; display: block; }
    svg { stroke-linecap: round; stroke-linejoin: round; }
    .ico-up { transform: rotate(-90deg); }
    .ico-ur { transform: rotate(-45deg); }
    a { text-decoration: none; color: inherit; }

    /* ── PC: 右側固定ナビ ── */
    .side-nav {
      position: fixed; right: 0; top: 0;
      z-index: 500; width: 236px; height: 100vh;
      background: var(--renga01);
      display: flex; flex-direction: column;
      padding: 32px 28px;
    }
    .side-nav-logo { margin-bottom: auto; }
    .side-nav-logo img { width: 160px; height: auto; filter: brightness(0) invert(1); }
    .side-nav-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
    .side-nav a {
      font-family: var(--font-en); font-size: 18px; font-weight: 400;
      letter-spacing: 0.04em; color: var(--kinari);
      writing-mode: horizontal-tb;
      padding: 6px 0; opacity: 0.6;
      transition: opacity 0.2s; display: block;
    }
    .side-nav a:hover { opacity: 1; }
    .side-nav a.active { opacity: 1; }
    .side-nav-ig a { opacity: 0.6; transition: opacity 0.2s; display: block; }
    .side-nav-ig a:hover { opacity: 1; }

    /* ── SP: 固定ヘッダー ── */
    .sp-header {
      display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 400;
      background: var(--renga01); height: 72px; padding: 12px 20px;
      align-items: center; justify-content: space-between;
    }
    .sp-header-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
    .sp-header-right { display: flex; align-items: center; gap: 20px; }
    .icon-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--sumi); }
    .sp-header .icon-btn { color: var(--kinari); }
    .sp-header .icon-btn svg { width: 28px; height: 28px; }
    .hamburger { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; }
    .hamburger span { display: block; width: 32px; height: 2px; background: var(--kinari); border-radius: 2px; }

    /* ── SP: ナビオーバーレイ ── */
    .sp-nav {
      display: none; position: fixed; inset: 0; z-index: 600;
      background: var(--renga01); flex-direction: column;
      opacity: 0; visibility: hidden;
      transition: opacity 0.28s, visibility 0.28s;
    }
    .sp-nav.open { opacity: 1; visibility: visible; }
    .sp-nav-top {
      display: flex; align-items: center; justify-content: space-between;
      height: 72px; padding: 12px 20px;
    }
    .sp-nav-top img { height: 40px; width: auto; filter: brightness(0) invert(1); }
    .sp-nav-top-right { display: flex; align-items: center; gap: 20px; }
    .sp-nav-top .icon-btn svg { width: 28px; height: 28px; }
    .sp-close { background: none; border: none; cursor: pointer; position: relative; width: 32px; height: 32px; font-size: 0; }
    .sp-close::before, .sp-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 2px; background: var(--kinari); border-radius: 2px; }
    .sp-close::before { transform: translate(-50%, -50%) rotate(30deg); }
    .sp-close::after  { transform: translate(-50%, -50%) rotate(-30deg); }
    .sp-nav-links { flex: 1; display: flex; flex-direction: column; padding: 28px 28px 0; }
    .sp-nav-links a {
      font-family: var(--font-en); font-size: 28px; font-weight: 400;
      color: var(--kinari); letter-spacing: 0.04em;
      padding: 13px 0;
    }
    .sp-nav-footer { padding: 24px 28px; }
    .sp-cta {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%; max-width: 380px; height: 56px; margin: 0 auto;
      background: var(--hi); color: var(--renga01); border-radius: 20px;
      font-family: var(--font-ja); font-size: 14px; font-weight: 500;
      letter-spacing: 0.05em; text-decoration: none;
    }

    /* ── 共通ボタン ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 12px;
      width: 406px; height: 68px; border-radius: 20px;
      background: var(--sumi); color: var(--kinari);
      font-family: var(--font-ja); font-size: 15px; font-weight: 500;
      letter-spacing: 0.05em;
      transition: background-color 0.25s ease, color 0.25s ease; text-decoration: none; border: 2px solid #351E1C; cursor: pointer;
    }
    .btn svg { transition: transform 0.25s ease; }
    .btn:hover { background: var(--hi) !important; color: #351E1C !important; }
    .btn:hover svg { transform: translateX(4px); }
    /* 下線付きテキストリンク：ホバーで矢印が右へスライド */
    .access-googlemap-link svg,
    .event-more svg,
    .contact-card-link svg,
    .footer-link svg,
    .footer-map-link svg { transition: transform 0.25s ease; }
    .access-googlemap-link:hover svg,
    .event-more:hover svg,
    .contact-card-link:hover svg { transform: translateX(4px); }
    /* フッターのテキストリンク：矢印（右斜め上向き）を回転保持で斜め上へスライド */
    .footer-link:hover svg { transform: rotate(-45deg) translateX(4px); }
    /* フッターのGOOGLE MAP：外部リンク矢印を右上へスライド */
    .footer-map-link:hover svg { transform: translate(3px, -3px); }
    .btn-hi    { background: var(--hi); color: #fff; }
    .btn-white { background: #fff; color: var(--hi); }
    .btn-center { text-align: center; margin: 28px 0; }

    /* ── 共通セクションタイトル ── */
    .section-title {
      font-family: var(--font-en); font-size: 80px; font-weight: 700;
      letter-spacing: 0.06em; text-align: center; color: var(--sumi);
      margin-top: 32px;
    }
    .sec-inner { display: block; width: 100%; max-width: 100%; margin: 0 auto; }

    /* ── 吹き出し ── */
    .speech-bubble { display: flex; justify-content: center; margin: 24px 0 72px; }
    .speech-bubble-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
    .speech-bubble-wrap svg { display: block; }
    .speech-bubble-text {
      position: absolute; top: calc(45% - 6px); left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-ja); font-size: 18px; font-weight: 700;
      color: var(--sumi); white-space: nowrap; letter-spacing: 0.05em;
    }

    /* ════ HERO ════ */
    .hero {
      position: relative; width: 100%; height: 100vh; min-height: 640px;
      background: var(--kinari); overflow: hidden;
    }
    .hero-furnace {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      z-index: 1; height: 88vh; max-height: 980px;
      aspect-ratio: 651 / 683; width: auto; max-width: 65vw;
    }
    /* 写真：レンガ枠の内側開口より少し大きくし、縁を枠の下に潜り込ませる（隙間防止） */
    .hero-furnace-img {
      position: absolute; top: 3%; left: 3.5%; right: 3.5%; bottom: 0;
      z-index: 1; border-radius: 999px 999px 0 0; overflow: hidden;
    }
    /* レンガのアーチ枠：写真の上に重ねる */
    .hero-furnace-frame {
      position: absolute; inset: 0; width: 100%; height: 100%;
      z-index: 2; pointer-events: none; display: block;
    }
    .furnace-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .hero-logo-pc {
      position: absolute; top: 32px; left: 40px; z-index: 100; display: block !important;
    }
    .hero-logo-pc a { display: block; width: 226px; opacity: 1; writing-mode: horizontal-tb; padding: 0; }
    .hero-logo-pc svg,
    .hero-logo-pc img { width: 226px; height: auto; display: block; }
    .hero-catch {
      position: absolute; right: 64px; top: 43%; transform: translateY(-50%);
      z-index: 4; writing-mode: vertical-rl; text-orientation: upright;
    }
    .hero-catch h1 {
      font-family: var(--font-ja); font-size: clamp(30px, 4.7vw, 64px); font-weight: 700;
      color: var(--sumi); line-height: 1.3; letter-spacing: 0.1em; white-space: nowrap;
    }
    .hero-sub { position: absolute; left: 40px; bottom: 180px; z-index: 4; }
    .hero-sub p {
      font-family: var(--font-ja); font-size: clamp(16px, 2.1vw, 26px); font-weight: 500;
      color: var(--sumi); line-height: 1.6; letter-spacing: 0.05em;
    }
    .hero-brick {
      position: absolute; bottom: 0; left: 0; transform: none;
      z-index: 3; width: 100vw;
      /* PCは下のレンガをアーチ枠より少し小さめに（炉連動より控えめの約13vh） */
      height: clamp(84px, 13vh, 150px);
      background: url('../img/brick01.svg') repeat-x left bottom / auto clamp(84px, 13vh, 150px);
    }

    /* ════ ABOUT ════ */
    .section-about { padding: 80px var(--sec-pad-x); background: var(--tsuchi); }
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 56px; align-items: center; margin: 40px 0;
    }
    .about-illust { border-radius: 12px; overflow: hidden; min-height: 400px; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(59,50,44,0.3); }
    .about-illust img { width: 85%; height: auto; }
    .about-body { font-size: 22px; font-weight: 500; line-height: 1.8; color: var(--sumi); margin-bottom: 56px; }

    /* 空き地から */
    .about-field {
      position: relative; overflow: hidden;
      background: var(--kusa) url('../img/land.jpg') center center / cover no-repeat; /* 非対応ブラウザ向けフォールバック */
      background-image: image-set(url('../img/land.webp') type('image/webp'), url('../img/land.jpg') type('image/jpeg'));
      height: 520px;
      display: flex; align-items: center; justify-content: center;
    }
    .about-field-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%);
    }
    .about-field-text { position: relative; z-index: 1; text-align: center; padding: 0 60px; }
    .about-field-text .fc { display: inline-block; }
    .about-field-text h2 {
      font-family: var(--font-ja); font-size: 100px; font-weight: 700;
      color: #ffffff; line-height: 1.4;
      text-align: center;
      -webkit-text-stroke: 2px var(--sumi);
      text-stroke: 2px var(--sumi);
    }

    /* 空き地テキストブロック */
    .about-field-desc {
      background: var(--tsuchi); padding: 64px var(--sec-pad-x);
      text-align: center;
    }
    .about-field-desc p {
      font-family: var(--font-ja); font-size: 22px; font-weight: 500;
      color: var(--sumi); line-height: 2; max-width: 600px; margin: 0 auto;
      text-align: center;
    }

    /* Ticker */
    .ticker { overflow: hidden; background: var(--hikari); padding: 2px 0; }
    .ticker-track {
      display: inline-flex; gap: 0; white-space: nowrap;
      animation: scroll-x 120s linear infinite;
    }
    .ticker-track span { font-family: var(--font-ja); font-size: 64px; font-weight: 500; color: #ffffff; letter-spacing: 0.1em; }
    @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    /* 流れるテキスト：ホバーで一時停止（下線なし） */
    .ticker a { text-decoration: none; cursor: pointer; }
    .ticker:hover .ticker-track { animation-play-state: paused; }

    /* ════ HOW TO JOIN ════ */
    .section-how { padding: 80px var(--sec-pad-x); background: var(--kinari); }
    .how-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 40px 0 32px; border: 2px solid var(--sumi); border-radius: 0; overflow: hidden; width: 100%; }
    .how-card { background: var(--kinari); padding: 20px 16px 48px; text-align: center; height: auto; border-right: 2px solid var(--sumi); display: flex; flex-direction: column; align-items: center; }
    .how-card:last-child { border-right: none; }
    .how-card-img { height: 230px; padding: 44px 0; background: var(--kinari); border-radius: 8px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--renga01); width: 100%; }
    .how-card-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
    .how-card:nth-child(2) .how-card-img img { height: 90%; transform: translateY(8px); }
    .how-card:nth-child(3) .how-card-img img { height: 106%; }
    .how-card h3 { font-size: 20px; font-weight: 700; color: var(--sumi); margin-bottom: 16px; }
    .how-card p  { font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--sumi); opacity: 1; text-align: left; }
    .how-desc { font-size: 22px; font-weight: 500; line-height: 2; color: var(--sumi); margin-top: 64px; margin-bottom: 32px; text-align: center; }

    /* ════ ACCESS ════ */
    .section-access { padding: 80px var(--sec-pad-x-access-r) 80px var(--sec-pad-x); background: var(--hikari); border-radius: 50% 50% 0 0 / 450px 450px 0 0; }
    .access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 40px; }
    .access-map { position: relative; background: var(--tsuchi); border-radius: 12px; height: 480px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--renga01); text-align: center; line-height: 2; border: 2px solid var(--sumi); }
    .access-map iframe {
      width: 100%; height: 100%; border: none;
      /* レンガ（ブラウン）調フィルター */
      filter: sepia(0.35) saturate(1.35) hue-rotate(-24deg) contrast(1.02) brightness(0.91);
    }
    .access-googlemap-link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en); font-size: 13px; font-weight: 400; letter-spacing: 0.1em; color: var(--sumi); text-decoration: none; border-bottom: 2px solid var(--sumi); padding-bottom: 2px; margin-top: 32px; }
    /* 下線：ホバーで火の色のラインが左から右へ引かれる */
    .access-googlemap-link::after {
      content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
      background: var(--hi); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .access-googlemap-link:hover::after { transform: scaleX(1); }
    /* 矢印（外部リンクアイコン）：斜め上へスライド */
    .access-googlemap-link:hover svg { transform: translate(3px, -3px); }
    .access-info { border-radius: 10px; padding: 8px 20px; }
    .info-block { background: none; border-radius: 0; padding: 16px 0; margin-bottom: 0; border-bottom: none; }
    .info-block:last-child { border-bottom: none; }
    .info-block h3 { font-family: var(--font-en); font-size: 15px; font-weight: 400; letter-spacing: 0.08em; color: var(--renga02); margin-bottom: 8px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--renga02); padding: 5px 14px 3px; line-height: 1; }
    .info-block p { font-family: var(--font-ja); font-size: 18px; font-weight: 500; line-height: 1.9; color: var(--sumi); }
    .info-block p + p { margin-top: 10px; }
    .access-list { list-style: none; padding: 0; margin: 4px 0 10px 8px; }
    .access-list li { font-family: var(--font-ja); font-size: 18px; font-weight: 500; line-height: 1.9; color: var(--sumi); padding-left: 12px; position: relative; }
    .access-list li::before { content: "・"; position: absolute; left: 0; }

    /* ════ EVENT ════ */
    .section-event { padding: 80px var(--sec-pad-x); background: var(--hi); }
    .section-event .section-title { color: var(--sumi); }
    .event-cards { display: grid; grid-template-columns: repeat(2, round(down, calc((100% - 4px) / 3), 1px)) 1fr; gap: 2px; margin-top: 40px; border: 2px solid var(--sumi); background: var(--sumi); width: 100%; }
    .event-card { background: var(--kinari); display: flex; flex-direction: column; }
    .event-card-img { aspect-ratio: 4/5; background: var(--tsuchi); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--renga01); overflow: hidden; margin: 30px 16px 0; border: 2px solid var(--sumi); }
    /* 写真を入れたとき：ホバーで中の写真が少し拡大（マスク内でズーム） */
    .event-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .event-card-img:hover img { transform: scale(1.08); }
    .event-card-body { padding: 20px 16px 24px; flex: 1; }
    .event-card-body h3 { font-size: 15px; font-weight: 700; color: var(--sumi); margin-bottom: 8px; }
    .event-card-body p { font-size: 13px; line-height: 1.8; color: var(--sumi); opacity: 0.75; margin-bottom: 32px; }
    .event-more { display: inline-flex; align-items: center; gap: 6px; float: right; font-size: 15px; color: var(--sumi); font-weight: 500; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid var(--sumi); border-radius: 0; position: relative; }
    /* 下線：ホバーで火の色のラインが左から右へ引かれる */
    .event-more::after {
      content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
      background: var(--hi); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .event-more:hover::after { transform: scaleX(1); }
    /* 矢印：回転（右上向き）を保ったまま斜め上へスライド */
    .event-more:hover svg { transform: rotate(-45deg) translateX(5px); }
    .event-card-body span { font-size: 11px; color: var(--renga01); font-weight: 500; }
    .event-tags { font-size: 13px; color: var(--renga02); font-weight: 500; margin-bottom: 32px; opacity: 1; }
    .event-date { font-size: 13px !important; color: var(--hi) !important; font-weight: 500; display: block; margin-bottom: 6px; }

    /* ════ TOGETHER WITH ════ */
    .section-together { padding: 80px var(--sec-pad-x); background: var(--kinari); }
    .together-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 40px; }
    .together-card { text-align: left; }
    .together-card-img {
      width: 100%; aspect-ratio: 4/5;
      background: var(--tsuchi);
      border-radius: 999px 999px 100px 100px;
      border: 2px solid var(--sumi);
      margin-bottom: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--renga01);
      overflow: hidden;
    }
    /* 写真を入れたとき：ホバーで中の写真が少し拡大（マスク内でズーム） */
    .together-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .together-card-img:hover img { transform: scale(1.08); }
    .together-card-catchcopy { font-size: 14px; font-weight: 500; color: var(--sumi); margin-bottom: 4px; line-height: 1.5; }
    .together-card-type { font-size: 11px; color: var(--renga02); margin-bottom: 2px; }
    .together-card-name { font-size: 18px; font-weight: 700; color: var(--sumi); margin-bottom: 4px; }
    .together-card-tag { font-size: 11px; color: var(--renga02); font-weight: 700; letter-spacing: 0.05em; }

    /* ════ INFORMATION ════ */
    /* ════ INFORMATION ════ */
    .section-information { padding: 80px var(--sec-pad-x); background: #fff; }
    .info-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 40px; border: 2px solid var(--sumi); width: 100%; }
    .info-card { background: #fff; padding: 20px 20px 16px; border-right: 2px solid var(--sumi); display: flex; flex-direction: column; min-height: 140px; transition: background-color 0.25s ease; cursor: pointer; }
    .info-card:last-child { border-right: none; }
    .info-card:hover { background: rgba(212, 211, 207, 0.5); }
    .info-card-arrow svg { transition: transform 0.25s ease; }
    .info-card:hover .info-card-arrow svg { transform: rotate(-45deg) translateX(4px); }
    .info-card-date { font-size: 11px; color: var(--hi); font-weight: 500; margin-bottom: 12px; }
    .info-card-text { font-size: 14px; font-weight: 500; color: var(--sumi); line-height: 1.7; flex: 1; }
    .info-card-arrow { display: flex; justify-content: flex-end; margin-top: 16px; }

    /* ════ CONTACT ════ */
    .section-contact { position: relative; padding: 80px var(--sec-pad-x); background: var(--hai); border-radius: 50% 50% 0 0 / 450px 450px 0 0; }
    .section-contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 470px; background: #fff; z-index: -1; }
    /* 公開準備中の暫定：ACCESSとCONTACTの間の白余白 */
    .contact-gap-white { background: #fff; height: clamp(48px, 8vw, 96px); }
    .section-contact .section-title { font-size: 64px; }
    .contact-lead { text-align: center; font-size: 22px; font-weight: 500; line-height: 2; color: var(--sumi); margin-bottom: 48px; }
    .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .contact-card { background: var(--kinari); border-radius: 16px; padding: 32px 28px; border: 2px solid var(--sumi); display: flex; flex-direction: column; }
    .contact-card-title { font-size: 20px; font-weight: 700; color: var(--hi); margin-bottom: 20px; line-height: 1.6; }
    .contact-card-body { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--sumi); flex: 1; margin-bottom: 32px; }
    .contact-card-link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--sumi); text-decoration: none; border-bottom: 2px solid var(--sumi); padding-bottom: 2px; align-self: flex-end; }
    /* 下線：ホバーで火の色のラインが左から右へ引かれる */
    .contact-card-link::after {
      content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
      background: var(--hi); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .contact-card-link:hover::after { transform: scaleX(1); }
    /* 矢印：回転（右上向き）を保ったまま斜め上へスライド */
    .contact-card-link:hover svg { transform: rotate(-45deg) translateX(5px); }

    /* ════ COMMUNITY ════ */
    .section-community { background: var(--hikari); padding: 64px var(--sec-pad-x); }
    .community-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 900px; margin: 0 auto; }
    .community-illust { display: flex; align-items: center; justify-content: center; min-height: 240px; background: transparent; border-radius: 12px; color: rgba(59,50,44,0.4); font-size: 13px; }
    .community-illust img { width: 85%; height: auto; display: block; }
    .community-body h2 { font-family: var(--font-ja); font-size: 24px; font-weight: 700; color: var(--sumi); margin-bottom: 24px; line-height: 1.5; }
    .community-body p { font-family: var(--font-ja); font-size: 15px; font-weight: 500; color: var(--sumi); line-height: 1.9; margin-bottom: 32px; }

    /* ════ INSTAGRAM ════ */
    .section-instagram { padding: 64px var(--sec-pad-x) 100px; background: var(--hi); }
    .instagram-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .instagram-left { display: flex; flex-direction: column; gap: 0; align-items: center; text-align: center; }
    .section-instagram .section-title { color: var(--sumi); text-align: center; font-size: 64px; }
    .instagram-handle { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-bottom: 32px; }
    .instagram-handle-label { font-family: var(--font-en); font-size: 13px; font-weight: 400; color: var(--sumi); letter-spacing: 0.05em; }
    .instagram-handle-name { font-family: var(--font-en); font-size: 36px; font-weight: 400; color: var(--sumi); letter-spacing: 0.02em; }
    .instagram-illust { display: flex; align-items: center; justify-content: center; min-height: 300px; background: transparent; border-radius: 12px; color: rgba(59,50,44,0.4); font-size: 13px; }
    .instagram-illust img { width: 85%; height: auto; display: block; }
    .insta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 406px; height: 68px; border-radius: 20px; background: var(--sumi); color: var(--kinari); font-family: var(--font-ja); font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: 0.05em; border: 2px solid #351E1C; transition: background-color 0.25s ease, color 0.25s ease; }
    .insta-btn:hover { background: var(--hi); color: #351E1C; }
    /* 背景がオレンジの EVENT / INSTAGRAM エリアは、同化を避けてホバー色を黄色に */
    .section-event .btn:hover { background: var(--hikari) !important; }
    .section-instagram .insta-btn:hover { background: var(--hikari); }

    /* ════ SPONSOR TICKER ════ */
    .sponsor-ticker { overflow: hidden; background: #fff; padding: 80px 0; border-top: 1px solid rgba(59,50,44,0.1); }
    .sponsor-ticker-track { display: inline-flex; gap: 64px; white-space: nowrap; animation: scroll-x 30s linear infinite; align-items: center; }
    .sponsor-ticker-track span { font-family: var(--font-ja); font-size: 18px; font-weight: 500; color: var(--sumi); letter-spacing: 0.05em; opacity: 0.6; }
    .sponsor-ticker-track img { height: 22px; width: auto; display: block; }

    /* ════ FOOTER ════ */
    .footer { background: var(--sumi); padding: 0; position: relative; }
    .footer-brick { width: 100%; line-height: 0; overflow: hidden; background: var(--kinari); padding-top: clamp(40px, 6vw, 72px); }
    .footer-brick img { width: 100%; height: auto; display: block; }
    .footer-inner { padding: 56px 60px 32px; display: grid; grid-template-columns: 200px 1fr 1fr; gap: 48px; }
    .footer-logo img { height: 48px; width: auto; filter: brightness(0) invert(0.85); }
    .footer-nav { display: flex; flex-direction: column; gap: 20px; }
    .footer-nav a { font-family: var(--font-en); font-size: 16px; font-weight: 400; letter-spacing: 0.1em; color: rgba(245,241,232,0.6); transition: color 0.2s; }
    .footer-nav a:hover { color: var(--kinari); }
    .footer-right { display: flex; flex-direction: column; gap: 16px; }
    .footer-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ja); font-size: 14px; font-weight: 500; color: var(--kinari); text-decoration: none; border-bottom: 1px solid rgba(245,241,232,0.4); padding-bottom: 2px; align-self: flex-start; }
    .footer-address { font-size: 12px; color: rgba(245,241,232,0.5); line-height: 2.4; margin-top: 8px; }
    .footer-address strong { display: block; font-size: 13px; color: rgba(245,241,232,0.7); margin-bottom: 2px; }
    .footer-ig { color: rgba(245,241,232,0.7); margin-top: 8px; }
    .footer-bottom { padding: 20px 60px; display: flex; justify-content: space-between; align-items: center; }
    .footer-copy { font-size: 11px; color: rgba(245,241,232,0.3); }
    .footer-privacy { font-size: 12px; color: rgba(245,241,232,0.6); text-decoration: none; border-bottom: 1px solid rgba(245,241,232,0.3); padding-bottom: 1px; align-self: flex-start; transition: color 0.2s; }
    .footer-privacy:hover { color: var(--kinari); }
    .footer-pagetop { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en); font-size: 15px; font-weight: 400; letter-spacing: 0.1em; color: rgba(245,241,232,0.6); text-decoration: none; border: 1px solid rgba(245,241,232,0.3); padding: 6px 12px; border-radius: 4px; transition: opacity 0.2s; }
    .footer-pagetop:hover { opacity: 0.8; }
    /* ページトップ：矢印（上向き）を回転保持で上へスライド */
    .footer-pagetop svg { transition: transform 0.25s ease; }
    .footer-pagetop:hover svg { transform: rotate(-90deg) translateX(4px); }
    .footer-map-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(245,241,232,0.6); text-decoration: none; border-bottom: 1px solid rgba(245,241,232,0.3); padding-bottom: 1px; margin-top: 8px; align-self: flex-start; }

    /* ════ RESPONSIVE ════ */
    /* ── PC・タブレット：地図を右カラムの高さに合わせて伸ばす ── */
    @media (min-width: 769px) {
      .access-grid { align-items: stretch; }
      .access-grid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
      .access-map { flex: 1 1 auto; height: auto; min-height: 480px; width: 100%; }
      .access-googlemap-link { align-self: flex-start; }
      .access-info { padding-top: 0; }
      .access-info .info-block:first-child { padding-top: 0; }
    }

    /* ── ナビ切替（1024px以下はハンバーガー） ── */
    @media (max-width: 1024px) {
      .sp-header { display: flex; }
      .sp-nav    { display: flex; }
      .side-nav  { display: none; }
      .hero-logo-pc { display: none !important; }
      body { padding-top: 73px; padding-right: 0; }
      body > section, body > .about-field, body > .about-field-desc,
      body > .ticker, body > .sponsor-ticker, body > footer { width: calc(100% + 3px); }
    }

    /* ════ タブレット（769〜1024px） ════ */
    @media (min-width: 769px) and (max-width: 1024px) {
      /* セクション共通パディング */
      .section-about, .section-how, .section-access, .section-event,
      .section-together, .section-information, .section-contact,
      .section-instagram, .section-community { padding-top: 64px; padding-bottom: 64px; }

      /* セクションタイトル */
      .section-title { font-size: 56px; }
      .section-contact .section-title,
      .section-instagram .section-title,
      .section-event .section-title { font-size: 48px; }

      /* HERO */
      .hero-catch { right: 48px; }
      .hero-sub { left: 40px; top: auto; bottom: 140px; }
      .hero-furnace { max-width: 651px; max-height: 643px; }
      /* 炉の最大高643pxに合わせてレンガ帯の上限も調整 */
      .hero-brick { height: min(15.7vh, 115px); background-size: auto min(15.7vh, 115px); }

      /* 本文フォントを中間サイズに */
      .about-body, .about-field-desc p, .how-desc, .contact-lead { font-size: 19px; }
      .about-field-text h2 { font-size: 64px; }
      .ticker-track span { font-size: 48px; }

      /* HOW TO JOIN（4列→2列） */
      .how-cards { grid-template-columns: 1fr 1fr; }
      .how-card { height: auto; min-height: 340px; }
      .how-card:nth-child(2n) { border-right: none; }
      .how-card:nth-child(1), .how-card:nth-child(2) { border-bottom: 2px solid var(--sumi); }

      /* TOGETHER WITH（4列→2列） */
      .together-cards { grid-template-columns: 1fr 1fr; gap: 24px; }

      /* フッター（gap調整） */
      .footer-inner { gap: 32px; }
      .footer-nav a { font-size: 15px; }
    }

    @media (max-width: 768px) {
      /* PC用の改行をスマホでは無効化（自然に折り返す） */
      .br-pc { display: none; }

      /* ── セクション共通パディング ── */
      .section-about, .section-how, .section-access, .section-event,
      .section-together, .section-information, .section-contact,
      .section-instagram, .section-community { padding-top: 52px; padding-bottom: 52px; }

      /* ── セクションタイトル（個別指定もまとめて上書き） ── */
      .section-title,
      .section-contact .section-title,
      .section-instagram .section-title,
      .section-event .section-title { font-size: 40px; letter-spacing: 0.04em; }

      /* ── 吹き出し（はみ出し防止） ── */
      .speech-bubble { margin: 18px 0 48px; }
      .speech-bubble-wrap svg { width: 100%; max-width: 280px; height: auto; }
      .speech-bubble-text { font-size: 15px; }

      /* ── 共通ボタン（中央寄せ・最大380px） ── */
      .btn { display: flex; width: 100%; max-width: 380px; height: 56px; font-size: 14px; margin-left: auto; margin-right: auto; }
      .btn-center { margin: 24px 0; }

      /* ── HERO ── */
      .hero { height: calc(100svh - 73px); min-height: 560px; }
      .hero-furnace {
        bottom: 40px; height: auto;
        width: 84vw; aspect-ratio: 651 / 683;
        max-width: 348px; max-height: 62svh;
      }
      /* スマホは炉が幅基準(84vw)なのでレンガ帯も幅基準で連動：84vw×683/651×122/683≒15.7vw */
      .hero-brick { height: clamp(44px, 15.7vw, 66px); background-size: auto clamp(44px, 15.7vw, 66px); }
      .hero-catch { right: 16px; top: 22%; }
      .hero-catch h1 { line-height: 1.4; font-size: 34px; }
      .hero-sub { left: 20px; top: 108px; bottom: auto; }
      .hero-sub p { font-size: 18px; }

      /* ── ABOUT ── */
      .about-grid { grid-template-columns: 1fr; gap: 24px; margin: 28px 0; }
      .about-illust { min-height: 260px; }
      .about-illust img { transform: translateX(-9px); }
      .about-body { font-size: 16px; line-height: 1.9; margin-bottom: 28px; }

      /* ── 空き地 ── */
      .about-field { padding: 56px 20px; height: auto; min-height: 280px; }
      .about-field-text { padding: 0; }
      .about-field-text h2 { font-size: 48px; -webkit-text-stroke: 2px var(--sumi); transform: translateX(18px); }
      .about-field-desc { padding-top: 44px; padding-bottom: 44px; }
      .about-field-desc p { font-size: 16px; line-height: 1.9; }

      /* ── 流れるテキスト ── */
      .ticker-track span { font-size: 34px; }

      /* ── HOW TO JOIN（横スクロール・枠＋縦線区切り） ── */
      .how-cards {
        display: flex; grid-template-columns: none; gap: 0;
        overflow-x: auto; overflow-y: hidden;
        border: none; border-radius: 0;
        margin: 28px 0 32px; padding: 0; scroll-padding: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; cursor: grab;
      }
      .how-cards.dragging { cursor: grabbing; }
      .how-cards.dragging .how-card { cursor: grabbing; }
      .how-cards::-webkit-scrollbar { display: none; }
      .how-card {
        flex: 0 0 min(round(80%, 1px), 280px); height: auto;
        padding: 24px 20px 28px;
        border-top: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi);
        border-right: 2px solid var(--sumi); border-left: none;
        border-radius: 0;
        scroll-snap-align: center;
      }
      .how-card:first-child { border-left: 2px solid var(--sumi); }
      .how-card:last-child { border-right: 2px solid var(--sumi); }
      .how-card-img { height: 150px; padding: 18px 0; }
      .how-card h3 { font-size: 16px; margin-bottom: 10px; }
      .how-card p  { font-size: 13px; line-height: 1.7; }
      .how-desc { font-size: 16px; line-height: 1.9; margin-top: 36px; }

      /* ── ACCESS ── */
      .section-access { border-radius: 50% 50% 0 0 / 120px 120px 0 0; }
      .section-contact { border-radius: 50% 50% 0 0 / 120px 120px 0 0; }
      .access-grid { grid-template-columns: 1fr; gap: 28px; }
      .access-map { height: 320px; }
      .access-info { padding: 0; }
      .access-googlemap-link { display: flex; width: fit-content; margin-left: auto; }
      .info-block p { font-size: 15px; }
      .access-list li { font-size: 15px; }

      /* ── EVENT（横スクロール・カルーセル） ── */
      .event-cards {
        display: flex; grid-template-columns: none; gap: 0;
        overflow-x: auto; overflow-y: hidden;
        border: none; border-radius: 0;
        margin: 28px 0 0; padding: 0; scroll-padding: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; cursor: grab;
      }
      .event-cards.dragging { cursor: grabbing; }
      .event-cards.dragging .event-card { cursor: grabbing; }
      .event-cards::-webkit-scrollbar { display: none; }
      .event-card {
        flex: 0 0 min(round(80%, 1px), 300px);
        border-top: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi);
        border-right: 2px solid var(--sumi); border-left: none; border-radius: 0;
        scroll-snap-align: center;
      }
      .event-card:first-child { border-left: 2px solid var(--sumi); }
      .event-card:last-child { border-right: 2px solid var(--sumi); }
      .event-card-img { margin: 18px 12px 0; }
      .event-card-body { padding: 16px 14px 20px; }

      /* ── TOGETHER WITH（横スクロール・センターカルーセル） ── */
      .together-cards {
        display: flex; grid-template-columns: none; gap: 16px;
        overflow-x: auto; overflow-y: hidden;
        margin: 28px 0 0; padding: 0; scroll-padding: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; cursor: grab;
      }
      .together-cards.dragging { cursor: grabbing; }
      .together-cards.dragging .together-card { cursor: grabbing; }
      .together-cards::-webkit-scrollbar { display: none; }
      .together-card {
        flex: 0 0 min(round(75%, 1px), 300px);
        scroll-snap-align: center;
      }

      /* ── INFORMATION（1列・横ボーダー） ── */
      .info-cards { grid-template-columns: 1fr; }
      .info-card { border-right: none; border-bottom: 2px solid var(--sumi); min-height: 0; }
      .info-card:last-child { border-bottom: none; }

      /* ── CONTACT ── */
      .contact-lead { font-size: 16px; line-height: 1.9; margin-bottom: 32px; }
      .contact-cards { grid-template-columns: 1fr; gap: 16px; }
      .contact-card { padding: 26px 22px; }
      .contact-card-title { font-size: 17px; }

      /* ── COMMUNITY ── */
      .community-inner { grid-template-columns: 1fr; gap: 28px; }
      .community-illust { min-height: 180px; }
      .community-illust img { width: 76%; }

      /* ── INSTAGRAM ── */
      .instagram-inner { grid-template-columns: 1fr; gap: 32px; }
      .instagram-illust { min-height: 240px; }
      .instagram-handle-name { font-size: 30px; }
      .insta-btn { width: 100%; max-width: 380px; height: 56px; font-size: 14px; }

      /* ── SPONSOR ── */
      .sponsor-ticker-track { gap: 40px; }

      /* ── FOOTER（1列） ── */
      .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 28px; }
      .footer-logo img { height: 40px; }
      .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
      .footer-map-link { margin-top: -12px; }
      .footer-bottom { flex-direction: column-reverse; gap: 14px; align-items: flex-start; padding: 20px; }
      .footer-bottom .footer-pagetop { align-self: flex-end; }
    }

    /* ════ HERO 登場アニメーション ════ */
    /* ロゴ → キャッチ → サブ → 炉 → レンガ の順にフェード＋スライドイン */
    @media (prefers-reduced-motion: no-preference) {
      .hero-logo-pc,
      .hero-sub,
      .hero-furnace,
      .hero-brick {
        opacity: 0;
        animation-duration: 0.9s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-fill-mode: both;
      }

      /* 1. ロゴ：左上から */
      .hero-logo-pc {
        animation-name: heroLogoIn;
        animation-delay: 0.25s;
      }
      /* 2. キャッチ：一文字ずつフェードイン */
      .hero-catch .hc {
        display: inline-block;
        opacity: 0;
        animation: heroCharIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(0.7s + var(--i) * 0.11s);
      }
      /* 3. サブ：左からスライド */
      .hero-sub {
        animation-name: heroSubIn;
        animation-delay: 1.15s;
      }
      /* 4. 炉：下からせり上がり（既存の translateX(-50%) を保持） */
      .hero-furnace {
        animation:
          heroFurnaceIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.55s both,
          furnaceSettle 1.15s linear 2.8s 1 forwards;
      }
      /* 5. レンガ：下からせり上がり */
      .hero-brick {
        animation-name: heroBrickIn;
        animation-delay: 2.05s;
        animation-duration: 1s;
      }

      @keyframes heroLogoIn {
        from { opacity: 0; transform: translateY(-44px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes heroCharIn {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes heroSubIn {
        from { opacity: 0; transform: translateX(-40px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      @keyframes heroFurnaceIn {
        from { opacity: 0; transform: translateX(-50%) translateY(72px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
      }
      @keyframes heroBrickIn {
        from { opacity: 0; transform: translateY(48px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* 炉：マスクごと「ドスッ」と重く沈み込む（落下は加速、跳ね返りは減衰） */
      @keyframes furnaceSettle {
        0%   { transform: translateX(-50%) translateY(0);    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25); } /* 加速して落下 */
        24%  { transform: translateX(-50%) translateY(28px); animation-timing-function: cubic-bezier(0.22, 0.9, 0.35, 1); }  /* 着地・反発 */
        44%  { transform: translateX(-50%) translateY(0);    animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4); }
        60%  { transform: translateX(-50%) translateY(9px);  animation-timing-function: cubic-bezier(0.22, 0.9, 0.4, 1); }   /* 小さく2回目 */
        76%  { transform: translateX(-50%) translateY(0);    animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4); }
        88%  { transform: translateX(-50%) translateY(3px); }
        100% { transform: translateX(-50%) translateY(0); }
      }
    }

    /* ════════════════════════════════════════════════ */
    /* ════ ABOUT ページ（下層） ════ */
    /* ════════════════════════════════════════════════ */

    /* ── ページ上部ヒーロー ── */
    .about-hero { padding: 96px var(--sec-pad-x) 88px; background: var(--kinari); }
    .about-hero .section-title { margin-top: 0; }
    .about-hero-illust { max-width: 760px; margin: 8px auto 64px; display: flex; justify-content: center; }
    .about-hero-illust img { width: 100%; height: auto; }
    .about-intro {
      display: grid; grid-template-columns: 280px 1fr; gap: 56px;
      align-items: center; max-width: 880px; margin: 0 auto;
    }
    .about-logo-box {
      display: flex; align-items: center; justify-content: center;
    }
    .about-logo-box img { width: 100%; max-width: 240px; height: auto; }
    .about-intro-text {
      font-family: var(--font-ja); font-size: 19px; font-weight: 500;
      line-height: 2.1; color: var(--sumi); letter-spacing: 0.04em;
    }

    /* ── まだ、何もありません。 ── */
    .section-nothing { display: block; width: 100%; background: var(--tsuchi); padding: 96px var(--sec-pad-x); text-align: center; }
    .section-nothing h2 {
      font-family: var(--font-ja); font-size: clamp(28px, 4vw, 44px); font-weight: 500;
      color: var(--sumi); letter-spacing: 0.06em; margin-bottom: 40px; line-height: 1.5;
    }
    /* 「ん。」だけが取り残されないよう、かたまり単位で折り返す */
    .section-nothing h2 .nobr { display: inline-block; white-space: nowrap; }
    .section-nothing p {
      font-family: var(--font-ja); font-size: 18px; font-weight: 500;
      line-height: 2.2; color: var(--sumi); max-width: 720px; margin: 0 auto;
      letter-spacing: 0.03em;
    }

    /* ── 始まった会社たち（ヤマサキ / STORY&Co.） ── */
    .section-founders { display: block; width: 100%; background: var(--kinari); padding: 88px var(--sec-pad-x); }
    .about-hero { display: block; width: 100%; }
    .founders-lead {
      text-align: center; font-family: var(--font-ja); font-size: 20px; font-weight: 500;
      line-height: 2; color: var(--sumi); max-width: 780px; margin: 0 auto 56px;
      letter-spacing: 0.03em;
    }
    .founders-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
    .founder-card {
      background: var(--kinari); border: 2px solid var(--sumi); border-radius: 16px;
      padding: 40px 36px 36px; display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .founder-card-label { font-family: var(--font-ja); font-size: 18px; font-weight: 500; color: var(--hi); margin-bottom: 26px; letter-spacing: 0.04em; }
    .founder-card-logo { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
    .founder-card-logo img { height: 26px; width: auto; }
    .founder-card-body { font-family: var(--font-ja); font-size: 14px; font-weight: 500; line-height: 1.95; color: var(--sumi); margin-bottom: 28px; text-align: left; }
    .founder-card-link {
      position: relative; display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-ja); font-size: 14px; font-weight: 500; color: var(--sumi);
      border-bottom: 2px solid var(--sumi); padding-bottom: 3px; margin-top: auto;
    }
    .founder-card-link::after {
      content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
      background: var(--hi); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .founder-card-link:hover::after { transform: scaleX(1); }
    .founder-card-link svg { transition: transform 0.25s ease; }
    .founder-card-link:hover svg { transform: translate(3px, -3px); }

    /* ── ABOUTページ：タブレット ── */
    @media (min-width: 769px) and (max-width: 1024px) {
      .about-hero { padding-top: 72px; padding-bottom: 64px; }
      .about-intro { grid-template-columns: 240px 1fr; gap: 40px; }
      .about-intro-text { font-size: 17px; }
      .section-nothing { padding-top: 72px; padding-bottom: 72px; }
      .section-founders { padding-top: 64px; padding-bottom: 64px; }
      .founders-lead { font-size: 18px; }
    }

    /* ── ABOUTページ：スマホ ── */
    @media (max-width: 768px) {
      .about-hero { padding-top: 52px; padding-bottom: 52px; }
      .about-hero-illust { margin: 4px auto 40px; }
      .about-intro { display: block; }
      .about-logo-box { padding: 0; max-width: 200px; margin: 0 auto 32px; }
      .about-intro-text { font-size: 16px; line-height: 2; text-align: center; }
      .section-nothing { padding: 52px 20px; }
      .section-nothing p { font-size: 16px; line-height: 2; text-align: left; }
      .section-founders { padding: 52px 20px; }
      .founders-lead { font-size: 16px; line-height: 1.9; margin-bottom: 36px; text-align: left; }
      .founders-cards { grid-template-columns: 1fr; gap: 20px; }
      .founder-card { padding: 32px 24px 28px; }
    }

    /* ════════════════════════════════════════════════ */
    /* ════ HOW TO JOIN ページ（下層） ════ */
    /* ════════════════════════════════════════════════ */

    /* ── ページ上部ヒーロー ── */
    .htj-hero { display: block; width: 100%; padding: 96px var(--sec-pad-x) 0; background: var(--kinari); }
    .htj-hero .section-title { margin-top: 0; }
    .htj-hero-illust { max-width: 720px; margin: 8px auto 56px; display: flex; justify-content: center; }
    .htj-hero-illust img { width: 100%; height: auto; }
    .htj-lead {
      text-align: center; font-family: var(--font-ja); font-size: clamp(28px, 4vw, 44px);
      font-weight: 500; color: var(--sumi); letter-spacing: 0.06em; line-height: 1.4;
    }
    /* 「か。」だけが取り残されないよう、かたまり単位で折り返す */
    .htj-lead .nobr { display: inline-block; white-space: nowrap; }

    /* ── 関わり方（横並びの行カード） ── */
    .section-join { display: block; width: 100%; background: var(--kinari); padding: 56px var(--sec-pad-x) 88px; }
    /* ティッカーとCONTACTの丸い背景の間に白い余白（このページのみ） */
    .contact-gap { display: block; width: 100%; height: 88px; background: #fff; }
    .join-rows { border: 2px solid var(--sumi); max-width: 980px; margin: 0 auto; background: var(--kinari); }
    .join-row {
      display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center;
      padding: 52px 44px; border-bottom: 2px solid var(--sumi);
    }
    .join-row:last-child { border-bottom: none; }
    .join-row-illust { display: flex; align-items: center; justify-content: center; height: 150px; }
    .join-row-illust img { max-height: 150px; max-width: 100%; width: auto; }
    /* 「場を一緒につくる人」のイラストだけ少し小さく */
    .join-row:nth-child(2) .join-row-illust img { max-height: 126px; }
    .join-row-body h3 { font-family: var(--font-ja); font-size: 24px; font-weight: 700; color: var(--sumi); margin-bottom: 14px; letter-spacing: 0.04em; }
    .join-row-body p { font-family: var(--font-ja); font-size: 16px; font-weight: 500; line-height: 1.9; color: var(--sumi); }

    /* ── 募集本文＋ボタン ── */
    .htj-desc { text-align: center; font-family: var(--font-ja); font-size: 18px; font-weight: 500; line-height: 2.1; color: var(--sumi); max-width: 760px; margin: 0 auto 48px; letter-spacing: 0.03em; }
    .htj-btns { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }

    /* ── HOW TO JOINページ：タブレット ── */
    @media (min-width: 769px) and (max-width: 1024px) {
      .htj-hero { padding-top: 72px; }
      .section-join { padding-bottom: 64px; }
      .contact-gap { height: 64px; }
      .join-row { grid-template-columns: 200px 1fr; gap: 24px; padding: 44px 32px; }
      .join-row-body h3 { font-size: 21px; }
      .htj-desc { font-size: 17px; }
    }

    /* ── HOW TO JOINページ：スマホ ── */
    @media (max-width: 768px) {
      .htj-hero { padding-top: 52px; }
      .htj-hero-illust { margin: 4px auto 36px; }
      .section-join { padding: 36px 20px 52px; }
      .contact-gap { height: 48px; }
      .join-rows { max-width: 100%; }
      .join-row { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px; text-align: center; justify-items: stretch; }
      .join-row-illust { height: 130px; width: 100%; }
      .join-row-illust img { max-height: 130px; }
      .join-row:nth-child(2) .join-row-illust img { max-height: 108px; }
      .join-row-body h3 { font-size: 19px; margin-bottom: 10px; }
      .join-row-body p { font-size: 14px; line-height: 1.85; text-align: left; }
      .htj-desc { font-size: 16px; line-height: 2; text-align: left; }
      .htj-btns { gap: 14px; }
    }

    /* ════ スクロールリビール（画面に入ったら登場） ════ */
    /* クラスは JS が付与するため、JS が無い環境では常に表示される */
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }
      .reveal.reveal-left  { transform: translateX(-48px); }
      .reveal.reveal-right { transform: translateX(48px); }
      .reveal.reveal-scale { transform: scale(0.9); }
      .reveal.is-visible   { opacity: 1; transform: none; }

      /* カード群：子要素を1枚ずつスタガー表示（遅延は JS が付与） */
      .reveal-group > * {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }
      .reveal-group.is-visible > * { opacity: 1; transform: none; }

      /* 吹き出し：登場後、ずっと優しく揺れ続ける */
      .speech-bubble.is-visible .speech-bubble-wrap {
        animation: bubbleFloat 3s ease-in-out 0.45s infinite both;
      }
      @keyframes bubbleFloat {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(7px); }
        100% { transform: translateY(0); }
      }
    }

    /* ============================================================
       インラインstyleから移設したルール
       ============================================================ */

    /* SVGスプライト（画面外に隠すアイコン定義） */
    .svg-sprite { position: absolute; overflow: hidden; }

    /* スマホメニュー上部のInstagramアイコン */
    .sp-nav-top .icon-btn { color: rgba(245, 241, 232, 0.8); }

    /* 濃色ボタン（イベント一覧・仲間になる など） */
    .btn-dark { background: var(--sumi); color: var(--kinari); }

    /* 矢印アイコンの色（currentColor 用） */
    .access-googlemap-link svg,
    .event-card .ico-ur,
    .info-card-arrow .ico-ur,
    .contact-card-link .ico-ur { color: var(--sumi); }
    .footer-pagetop .ico-up { color: var(--kinari); }

    /* 上余白ユーティリティ */
    .mt-48 { margin-top: 48px; }
    .mt-64 { margin-top: 64px; }