/* ==========================================================================
   hero.css — サイト共通ヒーロー（ページ冒頭の見出し帯）
   --------------------------------------------------------------------------
   ・緑1色の濃淡で「どの階層のページか」を表す。セクションごとに色は変えない
   ・色・高さ・線は :root の変数だけで管理する（ここを直せば全ページに効く）
   ・Tailwind の設定に依存しない素のCSS（各ページの tailwind.config が違っても同じ見た目）
   ・各ページの <head> で読み込む:
       <link rel="stylesheet" href="/assets/css/hero.css?v=YYYYMMDD">
   ・ページ側の <style> でヒーローの色・高さを再定義しないこと

   階層とクラス
     第1階層（8セクション入口）  .hero.hero--l1  濃い緑グラデ・白文字・中央寄せ・丸バッジ＋Lucideアイコン
     第2階層（セクション内の項目）.hero.hero--l2  やや明るい緑・白文字・左寄せ・親セクションのチップ
     第3階層（記事）              .hero.hero--l3  淡い若葉色・濃緑文字・左寄せ・親ページのチップ
     第4階層（記事の子）          .hero.hero--l4  淡緑＋上辺に深緑の線・濃緑文字・左寄せ・メタ（親ページ名・日付）

   基本の組み方（第1階層の例）
     <section id="intro" class="hero-section">
       <div class="hero-container">
         <div class="hero hero--l1">
           <span class="hero-badge"><svg …Lucide…></svg></span>
           <p class="hero-eyebrow">About Us</p>
           <h1 class="hero-title">私たちについて</h1>
           <p class="hero-lead">…</p>
           <div class="hero-actions">
             <a class="hero-btn hero-btn--primary" href="#…">…</a>
             <a class="hero-btn hero-btn--secondary" href="/…/">…</a>
           </div>
         </div>
       </div>
     </section>

   確定値の出典: ヒーロー見本 調整記録（2026-09-26）。小さい文字はすべてコントラスト比 4.5:1 以上
   ========================================================================== */

:root {
    /* --- 色（緑1色の濃淡） --- */
    --hero-frame:        #15803d;  /* 外枠（全階層）・第2階層の地色・第3階層のチップ地 */
    --hero-deep:         #14532d;  /* 第3・第4階層の文字、第4階層の上線、第2階層のチップ地 */
    --hero-l1-from:      #166534;  /* 第1階層グラデの始点 */
    --hero-l1-to:        #14532d;  /* 第1階層グラデの終点 */
    --hero-l2-bg:        #15803d;  /* 第2階層の地色 */
    --hero-l3-bg:        #bbf7d0;  /* 第3階層の地色（若葉色） */
    --hero-l4-bg:        #f0fdf4;  /* 第4階層の地色 */
    --hero-l4-line:      5px;      /* 第4階層の上線の太さ */
    --hero-meta:         #4b5563;  /* 第4階層の日付など補助文字（gray-600） */

    /* --- 形・高さ --- */
    --hero-radius:       12px;
    --hero-min-h:        15rem;    /* 共通の最小の高さ（約240px）。第1階層は中身に応じて高くなってよい */
    --hero-min-h-md:     17.5rem;  /* md（768px）以上（約280px） */
    --hero-pad-y:        3rem;
    --hero-pad-y-md:     4rem;
    --hero-pad-x:        1.25rem;
    --hero-pad-x-md:     3rem;
}

/* ===== 外側（ページ上の置き場所） ===== */
.hero-section {
    padding: 1.5rem 0;
}
@media (min-width: 768px) {
    .hero-section { padding: 2rem 0; }
}
.hero-container {
    max-width: 56rem;              /* Tailwind max-w-4xl と同じ */
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== ヒーロー本体（全階層共通） ===== */
.hero {
    position: relative;
    overflow: hidden;              /* 第4階層の上線を角丸に沿って切る */
    display: flex;
    flex-direction: column;
    justify-content: center;       /* 最小の高さの中で縦中央 */
    align-items: flex-start;       /* 既定は左寄せ（第2〜第4階層） */
    min-height: var(--hero-min-h);
    padding: var(--hero-pad-y) var(--hero-pad-x);
    border: 1px solid var(--hero-frame);
    border-radius: var(--hero-radius);
    text-align: left;
}
@media (min-width: 768px) {
    .hero {
        min-height: var(--hero-min-h-md);
        padding: var(--hero-pad-y-md) var(--hero-pad-x-md);
    }
}

/* ===== 第1階層：入口（濃い緑・白文字・中央寄せ） ===== */
.hero--l1 {
    background: linear-gradient(135deg, var(--hero-l1-from) 0%, var(--hero-l1-to) 100%);
    color: #fff;
    align-items: center;
    text-align: center;
}

/* ===== 第2階層：項目（やや明るい緑・白文字） ===== */
.hero--l2 {
    background: var(--hero-l2-bg);
    color: #fff;
}

/* ===== 第3階層：記事（淡い若葉色・濃緑文字） ===== */
.hero--l3 {
    background: var(--hero-l3-bg);
    color: var(--hero-deep);
}

/* ===== 第4階層：記事の子（淡緑＋上辺に深緑の線） ===== */
.hero--l4 {
    background: var(--hero-l4-bg);
    color: var(--hero-deep);
}
.hero--l4::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--hero-l4-line);
    background: var(--hero-deep);
}

/* ヒーローから外に出した要素（写真・カード・関連ボタン等）の置き場所。ヒーロー直下 */
.hero-after {
    margin-top: 1.5rem;
    text-align: center;
}

/* ヒーロー直下のページ内リンク・目次（旧ヒーロー内のジャンプボタンを移したもの）。白地・緑枠・濃緑文字（9.9:1） */
.hero-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.hero-jump {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--hero-frame);
    border-radius: 9999px;
    background: #fff;
    color: var(--hero-deep);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}
.hero-jump:hover { background: var(--hero-l4-bg); }

/* ===== 中の部品 ===== */

/* 第1階層の丸バッジ（白い半透明の丸＋Lucide線画アイコン） */
.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    color: #fff;
}
.hero-badge svg { width: 2rem; height: 2rem; }
@media (min-width: 768px) {
    .hero-badge { width: 4.5rem; height: 4.5rem; }
}

/* 英語の小見出し（第1階層） */
.hero-eyebrow {
    margin: 0 0 .75rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* 見出し */
.hero-title {
    margin: 0 0 1rem;
    font-size: 1.875rem;           /* text-3xl */
    line-height: 1.25;
    font-weight: 700;
    color: inherit;
}
@media (min-width: 768px) {
    .hero-title { font-size: 3rem; }   /* md:text-5xl */
}
.hero--l2 .hero-title,
.hero--l3 .hero-title,
.hero--l4 .hero-title {
    font-size: 1.5rem;             /* text-2xl */
}
@media (min-width: 768px) {
    .hero--l2 .hero-title,
    .hero--l3 .hero-title,
    .hero--l4 .hero-title { font-size: 2.25rem; }   /* md:text-4xl */
}
.hero-title:last-child { margin-bottom: 0; }

/* リード文 */
.hero-lead {
    margin: 0;
    max-width: 42rem;              /* max-w-2xl */
    font-size: 1rem;
    line-height: 1.75;
}
@media (min-width: 768px) {
    .hero-lead { font-size: 1.125rem; }
}
.hero--l1 .hero-lead { color: rgba(255, 255, 255, 0.9); margin-left: auto; margin-right: auto; }
.hero--l2 .hero-lead { color: #fff; }
.hero-lead + .hero-lead { margin-top: .5rem; }   /* リード文が複数段落のとき */   /* 白90%では 4.5:1 に届かないため白100% */

/* CTAボタン（第1階層のみ。第2階層以下はチップが親への導線を担うためCTAを置かない） */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 2rem;
}
.hero-btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.hero-btn--primary {
    background: #fff;
    color: var(--hero-l1-from);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.hero-btn--primary:hover { background: #f0fdf4; }
.hero-btn--secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.hero-btn--secondary:hover { background: rgba(255, 255, 255, 0.25); }

/* 第2階層（地色 #15803d）の上書き：白80%では 3.81:1 で 4.5:1 に届かないため白100%（5.02:1） */
.hero--l2 .hero-eyebrow { color: #fff; }

/* チップ（第2階層＝親セクション、第3階層＝親ページ） */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: 1rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.hero-chip svg { width: .9rem; height: .9rem; }
.hero--l2 .hero-chip { background: var(--hero-deep); }
.hero--l3 .hero-chip { background: var(--hero-frame); }
.hero--l4 .hero-chip { background: var(--hero-frame); }   /* 第4階層も第2階層ハブのチップ（5.02:1） */

/* メタ（第4階層＝親ページ名・日付） */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    font-size: .875rem;
}
.hero-meta svg { width: 1rem; height: 1rem; }
.hero-meta > * { display: inline-flex; align-items: center; gap: .375rem; }
.hero-meta .hero-meta-parent { font-weight: 600; }
.hero-meta .hero-meta-date { color: var(--hero-meta); }
.hero-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }   /* 第4階層の「↳ 親ページ」リンク */
/* 第3階層：日付など（地色 #bbf7d0 の上で #14532d＝7.52:1） */
.hero--l3 .hero-meta { color: var(--hero-deep); margin-bottom: 0; }   /* h1 の下に置くので下余白なし */
.hero-lead + .hero-meta { margin-top: .75rem; }                        /* リード文と日付の間をあける */

/* ==========================================================================
   写真ヒーロー用：外枠だけ合わせる（2026-09-26 Phase6）
   --------------------------------------------------------------------------
   トップ・申込ページ・イベント記事などの写真ヒーローは、写真・グラデーション・文字・高さを
   そのまま残し、外枠（緑の細枠1px・角丸12px）だけをサイト共通のヒーローに揃える。
   ・既存の <section>/<header> の class に「hero-frame-only」を足すだけで使う
   ・背景・文字色・余白・高さは一切指定しない（写真ヒーロー側のデザインを優先）
   ・overflow:hidden と isolation:isolate で、背景写真やオーバーレイの角も角丸に沿って切り抜く
   ========================================================================== */
.hero-frame-only {
    border: 1px solid var(--hero-frame);
    border-radius: var(--hero-radius);
    overflow: hidden;
    isolation: isolate;
}

/* 写真バナー（記事・報告の写真帯）用：四隅に余白を取り、他の階層と同じ「枠付きカード」に見せる。
   .hero-frame-only と併用する。トップ等の全画面写真（大型写真）には付けない（全幅の迫力を残す） */
.hero-frame-only--inset {
    margin: 1rem;
}
@media (min-width: 768px) {
    .hero-frame-only--inset { margin: 1.5rem 2rem; }
}