LP Components

@use '../config' as *;

.example {
  color: $lp-brown;
  background: $lp-band-bg;
}

Gothic A1 は日本語グリフを持たないため、和文は Zen Kaku Gothic New にフォールバックする（カンプ上も同じ挙動）。

インナー幅は 820px と 760px の2パターンのみ。それ以外の幅は使わない。

地色 #f2eeea の上に、白・角丸50px のコンテンツエリアを載せる。全ページで1回だけ使う。
PC: 上下76px・最大940px・角丸50px ／ SP: 上下32px・左右16px（375px端末で343px）・角丸20px

<div class="l-lp-wrapper">
  <div class="l-lp-container">
    …全セクション…
  </div>
</div>

コンテンツ幅の制御。セクション側（p-）は上下余白と中身だけを持ち、横幅とセンタリングはこのクラスに任せる。
SP では左右12pxのガターになる。

<section class="p-xxx">
  <div class="l-lp-inner">…</div>
  <div class="l-lp-inner l-lp-inner--narrow">…</div>
</section>

ページ最上部の開催日＋主催表記。1回しか使わないが、レイアウト骨格なので l- 層に置いている。

セクション見出し（● + テキスト + 下線）。使用箇所: こんな方におすすめ／当日のスケジュール／募集要項／ゲスト紹介／よくある質問（5箇所）
PC: ●20px・34px・下線6px ／ SP: ●11px・20px・下線4px

<div class="c-heading">
  <div class="c-heading__main">
    <div class="c-heading__group">
      <span class="c-heading__icon" aria-hidden="true"></span>
      <h2 class="c-heading__text">こんな方におすすめ！</h2>
    </div>
  </div>
</div>

任意要素：__eyebrow（見出し上の日付）、__note（右の注釈・PCのみ表示）。
SP では __note が非表示になるため、セクション側で別途出す（スケジュールの .p-schedule__note がその例）。

<div class="c-heading">
  <p class="c-heading__eyebrow">2026年11月8日(日)</p>
  <div class="c-heading__main">
    <div class="c-heading__group">
      <span class="c-heading__icon" aria-hidden="true"></span>
      <h2 class="c-heading__text">当日のスケジュール</h2>
    </div>
    <p class="c-heading__note">※都合により変更となる場合がございます。</p>
  </div>
</div>

修飾子 --tight：字間を0にする。長い見出し（ゲスト・コーディネーター紹介）専用。カンプ上そこだけ tracking が 0 のため。

CTA ボタン。使用箇所: 募集要項／クロージングCTA（2箇所）
矢印は images/bus-tour202611/btn-arrow.svg を右端に絶対配置。PC 45px ／ SP 30px。
リンク先は Google フォーム（https://forms.gle/xu437rgsfGbWWM8q9）。別タブで開く。
募集要項とクロージングCTAの2箇所で使用。

参加申し込みはこちら

<a class="c-btn" href="https://…" target="_blank" rel="noopener">
  参加申し込みはこちら
  <img class="c-btn__arrow" src="…/btn-arrow.svg" width="45" height="45" alt="" aria-hidden="true">
</a>

英字＋和訳の区分ラベル。使用箇所: ゲスト紹介の GUEST / COORDINATOR（2箇所）
--lg は英字を38pxにする修飾子（COORDINATOR用。カンプ上 GUEST 36px / COORDINATOR 38px のため）。

<p class="c-label">
  <span class="c-label__en">GUEST</span>
  <span class="c-label__ja">ゲスト</span>
</p>

<p class="c-label c-label--lg">
  <span class="c-label__en">COORDINATOR</span>
  <span class="c-label__ja">コーディネーター</span>
</p>

人物プロフィール。使用箇所: ゲスト2名／コーディネーター（3箇所）
PC と SP で写真の位置が変わるが、DOM は同じ。CSS Grid の列指定だけを切り替えている （__profile の grid-column を 2 → 1 / -1）。
PC: 写真211×303 ＋ テキスト547px ／ SP: 写真126×126 ＋ 名前、その下にプロフィール全幅

＊＊＊＊＊＊＊ ジェントル
ゆうすけさん

プロフィール

秦野市を拠点に、地域活性化コミュニティ「ココハダLAB」代表として活動。

当日聞けること
・秦野の地域コミュニティについて

<div class="c-profile">          <!-- --coordinator で写真351×368・角丸なし -->
  <picture>…<img class="c-profile__img">…</picture>
  <p class="c-profile__names">
    <span class="c-profile__role">肩書</span>
    <span class="c-profile__name">名前<span class="c-profile__sub">(左)</span></span>
  </p>
  <div class="c-profile__profile">
    <p class="c-profile__label">プロフィール</p>
    <div class="c-profile__text"><p>本文</p></div>
  </div>
</div>

<picture> はグリッドアイテムにならないよう display: contents で透過させている。

<!-- PC: 1行 /  SP: 2行 -->
<p>
  <span class="u-pc-only-inline">【</span>2026年11月8日（日）<br class="u-sp-only-inline">神奈川県秦野市移住体験バスツアー<span class="u-pc-only-inline">】</span>
</p>

検討 現状インライン用の2つだけ。ブロック要素の出し分けが必要になったら .u-pc-only / .u-sp-only を追加する。