@charset "UTF-8";
/* ===========================================================
   components.css — ボタン・見出し・カード・ナビ・ニュース・数値・CTA
   ボタンは3種類＋幅バリアントのみ。サイズ違いは作らない
   =========================================================== */
@layer components {

  /* =========================================================
     アイコン
     ========================================================= */
  .c-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    stroke: currentColor;
    fill: none;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .c-icon--xs { width: .8em; height: .8em; }
  .c-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  .c-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

  /* 長い右矢印（リンク・ボタン共通）。色は親の color に追従させず赤で出す */
  .c-arrow {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 14px;
    background-color: var(--arrow-color, var(--c-action-primary));
    -webkit-mask: var(--icon-arrow-long) center / contain no-repeat;
    mask: var(--icon-arrow-long) center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
  }
  a:hover > .c-arrow,
  a:hover .c-arrow { transform: translateX(4px); }

  /* =========================================================
     ボタン（input は Contact Form 7 の送信ボタン）
     wp:button のラッパ(div)は必ずリセットし、
     スタイルは中の a.wp-block-button__link 側にだけ当てる
     ========================================================= */
  .wp-block-button.c-btn {
    display: inline-block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
  }

  :is(a, button, input, span).c-btn,
  .wp-block-button.c-btn > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: .95em 1.5em;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-wide);
    line-height: 1.5;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }

  /* Primary：色面のボタン */
  :is(a, button, input, span).c-btn--primary,
  .wp-block-button.c-btn--primary > .wp-block-button__link {
    --arrow-color: var(--c-text-invert);
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    border: 2px solid var(--c-action-primary);
    padding-inline: 2.625em;
  }
  :is(a, button, input, span).c-btn--primary:hover,
  .wp-block-button.c-btn--primary > .wp-block-button__link:hover {
    background: var(--c-action-primary-hover);
    border-color: var(--c-action-primary-hover);
  }
  /* CTA帯の大きいボタン */
  :is(a, button, span).c-btn--cta { gap: var(--sp-5); padding: 1.5em 3em; font-size: var(--fs-lead); }

  /* Secondary：枠線のボタン（細い枠＋赤の長い矢印） */
  :is(a, button, span).c-btn--secondary,
  .wp-block-button.c-btn--secondary > .wp-block-button__link {
    justify-content: space-between;
    min-width: 240px;
    background: var(--c-bg);
    border: 1px solid var(--c-text-subtle);
    color: var(--c-text);
  }
  :is(a, button, span).c-btn--secondary:hover,
  .wp-block-button.c-btn--secondary > .wp-block-button__link:hover {
    border-color: var(--c-action-primary);
    color: var(--c-action-primary);
  }

  /* Text：カード内・リスト内のリンク */
  :is(a, button, span).c-btn--text,
  .wp-block-button.c-btn--text > .wp-block-button__link {
    padding: 0;
    color: var(--c-action-primary);
    gap: var(--sp-2);
  }
  :is(a, button, span).c-btn--text:hover,
  .c-card:hover .c-btn--text,
  .wp-block-button.c-btn--text > .wp-block-button__link:hover {
    color: var(--c-action-primary-hover);
  }

  /* 幅いっぱい */
  :is(a, button, span).c-btn--wide,
  .wp-block-button.c-btn--wide > .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  /* 色背景の上に置く白ボタン */
  :is(a, button, span).c-btn--invert,
  .wp-block-button.c-btn--invert > .wp-block-button__link {
    background: transparent;
    border-color: var(--c-text-invert);
    color: var(--c-text-invert);
  }
  :is(a, button, span).c-btn--invert:hover,
  .wp-block-button.c-btn--invert > .wp-block-button__link:hover {
    background: var(--c-text-invert);
    color: var(--c-text);
  }

  /* 矢印はCSSで自動付与（赤の長い矢印） */
  :is(a, button, span).c-btn--arrow::after,
  .wp-block-button.c-btn--arrow > .wp-block-button__link::after {
    content: "";
    display: inline-block;
    flex: none;
    width: 20px;
    height: 14px;
    background-color: var(--arrow-color, var(--c-action-primary));
    -webkit-mask: var(--icon-arrow-long) center / contain no-repeat;
    mask: var(--icon-arrow-long) center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
  }
  :is(a, button, span).c-btn--arrow:hover::after,
  .c-card:hover .c-btn--arrow::after,
  .wp-block-button.c-btn--arrow:hover > .wp-block-button__link::after {
    transform: translateX(4px);
  }

  @media (max-width: 767px) {
    :is(a, button, span).c-btn--secondary { min-width: 0; width: 100%; }
    :is(a, button, span).c-btn--cta { padding: 1.2em 1.5em; justify-content: center; }
  }

  /* =========================================================
     セクション見出し
     緑の短い線＋赤の英字ラベル／大きな日本語見出し／
     背景に薄く敷く大きな英字（ウォーターマーク）
     ========================================================= */
  .c-head {
    position: relative;
    margin-bottom: var(--sp-7);
  }
  .c-head--split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-6);
  }
  .c-head > :not(.c-head__wm) { position: relative; z-index: 1; }
  .c-head__wm {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 0;
    transform: translateY(-62%);
    font-family: var(--ff-num);
    font-size: var(--fs-watermark);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--c-watermark);
    pointer-events: none;
    user-select: none;
  }
  .c-head__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-3);
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tr-eyebrow);
    line-height: 1.4;
    color: var(--c-action-primary);
  }
  .c-head__eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--c-action-mark);
  }
  .c-head__eyebrow--invert { color: var(--c-text-invert); }
  h2.c-head__title,
  .c-head__title {
    margin: 0;
    padding: 0;
    font-size: var(--fs-section);
    font-weight: var(--fw-black);
    line-height: 1.3;
    letter-spacing: var(--tr-heading);
  }
  .c-head__title::before { display: none; }
  .c-head__lead {
    max-width: 30em;
    padding-bottom: .4em;
    font-size: var(--fs-small);
    line-height: 1.9;
    color: var(--c-text-muted);
    text-align: right;
  }
  /* 赤・暗い面の上 */
  .c-head--invert .c-head__eyebrow,
  .c-head--invert .c-head__title,
  .c-head--invert .c-head__lead { color: var(--c-text-invert); }
  .c-head--invert .c-head__eyebrow::before { background: var(--c-text-invert); }
  .c-head--invert .c-head__wm { color: rgba(255, 255, 255, .07); }

  @media (max-width: 900px) {
    .c-head--split { flex-direction: column; align-items: flex-start; }
    .c-head__lead { text-align: left; }
  }

  /* =========================================================
     グローバルナビ（TOPのMV下の帯）
     英字ラベル＋日本語の2段。ホバーで赤の面に変わる
     ========================================================= */
  .c-gnav {
    position: sticky;
    top: var(--header-h-compact);
    z-index: 20;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  }
  .c-gnav__list { display: grid; grid-template-columns: repeat(5, 1fr); }
  .c-gnav__list > li + li { border-left: 1px solid var(--c-line); }
  .c-gnav a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--gnav-band-h);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    white-space: nowrap;
    font-size: var(--fs-gnav);
    font-weight: var(--fw-black);
    line-height: 1.4;
    transition: min-height var(--dur) var(--ease), padding var(--dur) var(--ease),
                background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .c-gnav a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--c-action-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .c-gnav .t-eyebrow { font-size: var(--fs-caption); color: var(--c-action-mark-text); transition: color var(--dur) var(--ease); }
  /* マウスオンは緑（赤だと直下の数字の帯と同じ色になり、境目が消える） */
  .c-gnav a:hover { background: var(--c-accent-700); color: var(--c-text-invert); }
  .c-gnav a:hover .t-eyebrow { color: var(--c-text-invert); }
  .c-gnav a:hover::after { transform: scaleX(1); background: var(--c-accent-800); }

  /* 貼りついた状態 */
  .is-nav-stuck .c-gnav { box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
  .is-nav-stuck .c-gnav a { min-height: 58px; padding: var(--sp-3) var(--sp-2); font-size: var(--fs-body); }
  .is-nav-stuck .c-gnav .t-eyebrow { display: none; }

  /* 幅が足りないときも1行を保ち、横スクロールで送る */
  @media (max-width: 1060px) {
    .c-gnav__list {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .c-gnav__list::-webkit-scrollbar { display: none; }
    .c-gnav__list > li { flex: 0 0 auto; }
    .c-gnav a { padding-inline: var(--sp-6); }
  }
  @media (max-width: 767px) {
    .c-gnav { display: none; }
  }

  /* =========================================================
     カード
     写真の右上に赤い三角のあしらい。下に「詳しく見る →」の行
     ========================================================= */
  .c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: transform var(--dur) var(--ease);
  }
  .c-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--c-bg-alt);
  }
  .c-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    background: var(--c-action-primary);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
  }
  .c-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
  }
  .c-card:hover .c-card__media img { transform: scale(1.05); }
  .c-card:hover .c-card__media::after { width: 84px; height: 84px; }
  .c-card:hover .c-card__title { color: var(--c-action-primary); }

  .c-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5) 0 0;
  }
  .c-card__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    transition: color var(--dur) var(--ease);
  }
  .c-card__body .t-eyebrow { margin-top: 2px; font-size: var(--fs-caption); }
  .c-card__title .c-icon { display: inline-block; margin-left: var(--sp-2); vertical-align: .05em; color: var(--c-text-subtle); }
  .c-card__text { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-small); line-height: 1.85; }
  .c-card__body .c-btn--text {
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
    font-size: var(--fs-small);
  }
  /* 説明文の長さが違っても「詳しく見る」の線は下端で揃える */
  .c-card__text { margin-bottom: var(--sp-5); }

  /* 白い面のカード（赤・グレーの面の上で使う） */
  .c-card--panel { background: var(--c-bg); box-shadow: var(--sh-md); }
  .c-card--panel .c-card__body { padding: var(--sp-6) var(--sp-6) var(--sp-5); }

  @media (max-width: 767px) {
    .c-card__media::after { width: 44px; height: 44px; }
    .c-card--panel .c-card__body { padding: var(--sp-5) var(--sp-4); }
  }

  /* =========================================================
     お知らせリスト（罫線区切り）
     ========================================================= */
  .c-news__list { border-top: 1px solid var(--c-line); }
  .c-news__item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-2);
    border-bottom: 1px solid var(--c-line);
    transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
  }
  .c-news__item:hover { background: var(--c-surface-emphasis); padding-inline: var(--sp-4); }
  .c-news__item p { font-weight: var(--fw-medium); }
  .c-news__date {
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    color: var(--c-action-primary);
  }
  .c-news__arrow {
    justify-self: end;
    width: 20px;
    height: 14px;
    background-color: var(--c-action-primary);
    -webkit-mask: var(--icon-arrow-long) center / contain no-repeat;
    mask: var(--icon-arrow-long) center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
  }
  .c-news__item:hover .c-news__arrow { transform: translateX(4px); }
  @media (max-width: 767px) {
    .c-news__item { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-4) 0; }
    .c-news__item:hover { padding-inline: 0; }
    .c-news__arrow { display: none; }
  }

  /* =========================================================
     数値アピール（赤ベタの帯）
     ========================================================= */
  .c-figures {
    position: relative;
    overflow: hidden;
    background: var(--c-surface-strong);
    color: var(--c-text-invert);
    padding-block: var(--sp-7);
  }
  /* Aマークの斜めのラインをうっすら */
  .c-figures::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pattern-diagonal);
    opacity: .5;
    pointer-events: none;
  }
  .c-figures__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
  .c-figures__item { padding-inline: var(--sp-6); border-left: 1px solid var(--c-line-invert); }
  .c-figures__item:last-child { border-right: 1px solid var(--c-line-invert); }
  .c-figures__num {
    font-family: var(--ff-num);
    font-size: var(--fs-num);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--c-text-invert);
  }
  .c-figures__num span { font-variant-numeric: tabular-nums; }
  .c-figures__unit {
    font-family: var(--ff-base);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    margin-left: var(--sp-1);
  }
  .c-figures__label {
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-wide);
    color: var(--c-text-invert);
    line-height: 1.6;
  }
  @media (max-width: 767px) {
    .c-figures { padding-block: var(--sp-6); }
    .c-figures__list { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
    .c-figures__item { padding-inline: var(--sp-4); }
    .c-figures__item:nth-child(2) { border-right: 1px solid var(--c-line-invert); }
    .c-figures__num { font-size: 2.1rem; }
  }

  /* =========================================================
     CTA帯（白地に斜めのライン）
     ========================================================= */
  .c-cta {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
  }
  .c-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(105deg, transparent calc(8% - 1px), var(--c-line) 8%, transparent calc(8% + 1px)),
      linear-gradient(105deg, transparent calc(30% - 1px), var(--c-line) 30%, transparent calc(30% + 1px));
    pointer-events: none;
  }
  .c-cta__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-6);
    padding-block: var(--sp-9);
  }
  .c-cta__title { font-size: var(--fs-section); font-weight: var(--fw-black); line-height: 1.4; }
  .c-cta__inner p:not(.c-cta__title) { margin-top: var(--sp-3); color: var(--c-text-muted); }
  @media (max-width: 767px) {
    .c-cta__inner { flex-direction: column; align-items: stretch; gap: var(--sp-5); padding-block: var(--sp-8); }
  }
}