/* ==========================================================================
   sections/00-header-fv.css
   - C-01 Header              ← 実装済み (logo-ut.png 使用)
   - C-02 FV (Hero)           ← 実装済み (bg-fv.png 1枚絵を中央配置)
   - C-03 Anchor Card Strip   ← 実装済み (nav-XX.png でアイコン部分)
   ========================================================================== */


/* =================================================================
   C-01 Header
   - 白背景 / 高さ 70px / sticky なし
   - ロゴ中央配置 / クリックで公式サイトへ別タブ遷移
   ================================================================= */
.c-header {
  position: relative;
  width: 100%;
  height: var(--header-height);
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-gray-border);
  border-top: 5px solid var(--c-green-primary);
}

.c-header__inner {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-header__logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--t-fast);
}

.c-header__logo-link:hover {
  opacity: 0.7;
}

.c-header__logo {
  height: 40px;
  width: auto;
}

/* =================================================================
   リンク
   ================================================================= */
.c-header .c-cta {
  margin: 0;
}
.c-header .c-cta__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.c-header .c-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing:.1em;
  transition: opacity var(--t-fast);
  background: var(--c-black);
  border-radius: 10px;
  line-height: 1;
  border: 1px solid #fff;
  padding: 6px 22px;
}
 
.c-header .c-cta__link::after {
  content: '›';
  font-size: 30px;
  position: relative;
  bottom: 2px;
  color: #fff;
  font-weight: 700;
  margin-left: 5px;
}
 
.c-header .c-cta__link:hover {
  opacity: 0.7;
}
 
.c-header .c-cta__link:focus-visible {
  outline: 3px solid var(--c-yellow-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .c-header {
    height: 50px;
  }
  .c-header__logo {
    height: 24px;
  }
  .c-header .c-cta__link {
    font-size: 12px;
    padding: 2px 12px;
  }
  .c-header .c-cta__link::after {
    content: '›';
    font-size: 24px;
    position: relative;
    bottom: 2px;
    color: #fff;
    font-weight: 700;
    margin-left: 1px;
    letter-spacing:0em;
    gap: var(--space-2);
  }
}


/* =================================================================
   C-02 FV (Hero)
   - bg-fv.png (1920×600) を中央配置
   - ブラウザ幅 > 1920px は緑単色で左右を埋める
   - ブラウザ幅 < 1920px は等比縮小
   - テキスト（タイトル+リード）を画像の上に絶対配置
   ================================================================= */
.s-fv {
  position: relative;
  width: 100%;
  background-color: var(--c-green-primary);
  overflow: hidden;
}

.s-fv__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  /* 画像のアスペクト比（1920:600 = 3.2:1）を維持 */
  aspect-ratio: 1920 / 600;
}

.s-fv__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.s-fv__content {
  position: absolute;
  /* 画像内の楕円中央付近に配置:
     - 楕円中心は画像幅の50%、高さの45%付近 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: min(580px, 52%);
  pointer-events: none; /* テキスト下の画像装飾を隠さない（リンクなどはないので問題なし） */
}

.s-fv__title {
  font-family: var(--ff-base);
  font-weight: 900;
  /* PCでは画像基準の比率を維持するため vw を使ったクランプ */
  font-size: clamp(28px, 4.2vw, 72px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: clamp(8px, 1.5vw, 24px);
}

.s-fv__title-row {
  display: block;
}

.s-fv__title-main {
  color: var(--c-green-primary);
}

.s-fv__title-particle {
  color: var(--c-text-strong);
  font-size: 0.62em;
  font-weight: 900;
}

.s-fv__title-sub {
  display: block;
  color: var(--c-text-strong);
}

.s-fv__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .1em;
  color: var(--c-text);
}

/* ===== SP ===== */
@media (max-width: 767px) {
  /* SP は専用FV画像 bg-spfv.png を使用 
     画像の実際のアスペクト比に合わせて余白なく表示 */
  .s-fv__stage {
    position: relative;
    /* aspect-ratioを削除して画像のアスペクト比に従う */
  }

  .s-fv__bg {
    display: block;
    width: 100%;
    height: auto;
    /* SP版の画像に切り替え */
    content: url('../../img/bg/bg-spfv.webp');
  }

  .s-fv__content {
    width: 86%;
    max-width: 320px;
  }

  .s-fv__title {
    font-size: clamp(22px, 8vw, 38px);
  }

  .s-fv__lead {
    font-size: clamp(9px, 2.5vw, 12px);
    line-height: 1.55;
  }

  .s-fv__lead br.none{
    display:none;
  }
}


/* =================================================================
   C-03 Anchor Card Strip
   - クリーム背景の全幅帯
   - PC: 4枚横並び / SP: 2×2グリッド
   - カード上半分: CSSで緑背景 + タイトル + サブテキスト
   - カード下半分: nav-XX.png 画像（緑背景込み、白丸+アイコン+下矢印）
   - 上下の緑が同色 (#80CE44) なので継ぎ目なく繋がる
   ================================================================= */
.s-anchor {
  width: 100%;
  background-color: var(--c-cream);
  padding-block: var(--space-48);
}

.s-anchor__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.s-anchor .pcbr{
  display: block;
}

.s-anchor .spbr{
  display: none;
}

.c-anchor-card {
  display: flex;
  width:95%;
  margin: 0 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  text-decoration: none;
  color: inherit;
  background-color: var(--c-green-primary);
  border-radius: var(--radius-card);
  border: 5px solid #fff;
  padding-bottom:20px;
  overflow: hidden;
  transition: transform var(--t-base), background-color var(--t-base);
}

.c-anchor-card:hover {
  transform: translateY(-8px);
}

/* ----- 上半分: タイトル + サブ ----- */
.c-anchor-card__head {
  padding: var(--space-24) var(--space-16) var(--space-16);
  text-align: center;
  background-color: transparent; /* 親の緑が透ける */
}

.c-anchor-card__title {
  color: var(--c-white);
  font-size: var(--fs-anchor-title);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-8);
  letter-spacing: 0.05em;
}

.c-anchor-card__sub {
  color: var(--c-white);
  font-size: var(--fs-anchor-sub);
  font-weight: 400;
  line-height: 1.5;
  min-height: 2.8em; /* 1行/2行カードの高さ揃え */
}

/* ----- 下半分: nav-XX.png ----- */
.c-anchor-card__visual {
  display: block;
  /* 画像は実寸（130×162px）固定。カード幅との差は緑単色で埋まる。
     画像内の緑とカード本体の緑が同じ #80CE44 なので継ぎ目なし */
  width: 130px;
  height: 162px;
  margin: 0 auto;
  /* hover 時に画像のみ少しスケール */
  transition: transform var(--t-base);
}

.c-anchor-card:hover .c-anchor-card__visual {
  transform: translateY(2px);
}

/* ===== SP ===== */
@media (max-width: 767px) {
  .s-anchor {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .s-anchor__inner {
    padding-inline: var(--space-4);  /* ← これで制御 */
  }

  .s-anchor__grid {
    gap: var(--space-4);  /* 間隔を狭く */
    margin: 0;
    padding: var(--space-12) 0;
  }

  .s-anchor .pcbr{
    display: none;
  }

  .s-anchor .spbr{
    display: block;
  }

  .c-anchor-card {
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
    padding: var(--space-8) var(--space-2);
    aspect-ratio: 3 / 5.0;
  }

  .c-anchor-card__head {
    padding: var(--space-8) var(--space-1) var(--space-6);
    flex-shrink: 0;
  }

  .c-anchor-card__title {
    font-size: 14px;
    margin-bottom: var(--space-4);
    line-height: 1.1;
  }

  .c-anchor-card__sub {
    font-size: 8.5px;
    transform: scaleX(0.8);
    line-height: 1.4;
    min-height: auto;
  }

  .c-anchor-card__visual {
    width: 55px;
    height: 68px;
    flex-shrink: 0;
    object-fit: contain;  /* アスペクト比を保持 */
    object-position: center;
  }

}