@charset "UTF-8";

/* ==========================================================================
   c-heading / 見出し
   ========================================================================== */
.c-heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.c-headingSub {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 768px) {
  .c-heading    { font-size: 40px; }
  .c-headingSub { font-size: 24px; }
}

/* ==========================================================================
   c-btnPill / 赤い丸ボタン（私たちについて・もっと見る）
   ========================================================================== */
.c-btnPill {
  position: relative;
  width: 225px;
  margin-inline: auto;
}

/* フレーム（背景色）は ::before に分離する。ホバー時にこの ::before だけを
   拡大させ、文字とアイコンの位置・大きさは固定のままにするため
   （2026-08-19 クライアント指示）。下記 Hover エフェクト参照 */
.c-btnPill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c-floral-red);
  pointer-events: none;
}

/* Figma は文字をボタン全体の中央に置き、矢印アイコンはその上に重ねている
     PC 2001:5616「私たちについて」657..783（ボタン 570..870・中央 720）
     SP 2001:5289「私たちについて」138.25..236.25（ボタン 75..300・中央 187.5）
   左右非対称の padding（左 20 / 右 44・56）だと justify-content:center の
   基準がずれ、文字が (56-20)/2 = 18px（SP 12px）左に寄っていた。
   センタリングは padding が左右対称でありさえすれば量に依存しないので、
   矢印（SP 右12+22.5 ＝ 内側 190.5 まで／PC 右16+30 ＝ 254 まで）に当たらない
   最小限の対称量にしてラベル許容幅を確保する（SP 185 / PC 252）。 */
.c-btnPill a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  text-align: center;
}

/* 矢印アイコンは擬似要素で付与（<a> に class を付けない方針のため親側で制御） */
.c-btnPill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 22.5px;
  height: 22.5px;
  transform: translateY(-50%);
  background: url("../img/icon-arrow-btn.svg") no-repeat center / contain;
  pointer-events: none;
}

@media (min-width: 768px) {
  .c-btnPill { width: 300px; }
  .c-btnPill a { min-height: 60px; font-size: 18px; padding-inline: 24px; }
  .c-btnPill::after { right: 16px; width: 30px; height: 30px; }
}

/* ==========================================================================
   button-wrap / ボタン大（Vibit CMS 仕様）
   色・アイコン・テキスト位置は class の組み合わせで切り替える。
     色       : btn-green / btn-pink / btn-brown
     アイコン : btn-icon-file / btn-icon-mail / btn-icon-external / btn-icon-arrow
     位置     : btn-text-left / btn-text-center
   例: <div class="button-wrap btn-green btn-icon-file btn-text-left">
         <a href="…">学校・教育機関向け資料</a>
       </div>
   ========================================================================== */
.button-wrap {
  position: relative;
  width: 100%;
  max-width: 305px;
  margin-inline: auto;
}

/* フレーム（背景色）は ::before に分離する。ホバー時にこの ::before だけを
   拡大させ、文字とアイコンの位置・大きさは固定のままにするため
   （2026-08-19 クライアント指示。「文字と矢印は固定でフレームだけ拡大」）。
   下記 Hover エフェクト参照 */
.button-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

.button-wrap a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 10px 56px 10px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-white);
}

/* 色指定（フレーム＝::before に適用） */
.btn-green::before { background: var(--c-floral-green); }
.btn-pink::before  { background: var(--c-floral-red); }
.btn-brown::before { background: var(--c-brown); }

/* アイコン指定（<a> に class を付けない方針のため親の擬似要素で描画） */
.button-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 22.5px;
  height: 22.5px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* 色クラスが無い場合の既定（元の書き出しファイルをそのまま使う） */
.btn-icon-file::after     { background-image: url("../img/icon-arrow-doc.svg"); }
.btn-icon-mail::after     { background-image: url("../img/icon-mail.svg"); }
.btn-icon-external::after { background-image: url("../img/icon-external.svg"); }
.btn-icon-arrow::after    { background-image: url("../img/icon-arrow-btn.svg"); }

/* ------------------------------------------------------------------
   アイコンの色をボタンの色に追従させる（2026-09-01）

   各アイコンSVGは「白い丸＋グリフ」で、グリフ色が書き出し時のまま
   焼き込まれている（file=緑 / mail=ピンク / external=茶 / arrow=ピンク）。
   そのため btn-pink × btn-icon-file だとピンクのボタンに緑のアイコン、
   という食い違いが起きていた（公開時点で 39 箇所該当）。

   色(3) × アイコン(4) = 12 通りを、グリフ色だけ差し替えた SVG の
   データURI で定義する。SVGファイルを 12 個に増やさずに済み、
   ::after のサイズ・位置指定（cms-additions.css の b-dlList 用や
   sections.css のグロナビ用の上書き）もそのまま効き続ける。
   詳細度は .btn-* .btn-icon-*（0,3,0）> .btn-icon-*（0,2,0）で上書きされる。
   ※ CSSファイルはCMSを通らないのでデータURIのパス変換の影響を受けない（A-25）
   ------------------------------------------------------------------ */
.btn-green.btn-icon-file::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M16.5 9.00002L13.125 5.25002H7.99995C7.72381 5.25002 7.49995 5.47388 7.49995 5.75002V16C7.49995 16.2762 7.72381 16.5 7.99995 16.5H16C16.2761 16.5 16.5 16.2762 16.5 16V9.00002ZM13.125 5.25002V8.50002C13.125 8.77617 13.3488 9.00002 13.625 9.00002H16.5' stroke='%233fa07c' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-pink.btn-icon-file::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M16.5 9.00002L13.125 5.25002H7.99995C7.72381 5.25002 7.49995 5.47388 7.49995 5.75002V16C7.49995 16.2762 7.72381 16.5 7.99995 16.5H16C16.2761 16.5 16.5 16.2762 16.5 16V9.00002ZM13.125 5.25002V8.50002C13.125 8.77617 13.3488 9.00002 13.625 9.00002H16.5' stroke='%23ea635a' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-brown.btn-icon-file::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M16.5 9.00002L13.125 5.25002H7.99995C7.72381 5.25002 7.49995 5.47388 7.49995 5.75002V16C7.49995 16.2762 7.72381 16.5 7.99995 16.5H16C16.2761 16.5 16.5 16.2762 16.5 16V9.00002ZM13.125 5.25002V8.50002C13.125 8.77617 13.3488 9.00002 13.625 9.00002H16.5' stroke='%23692c1a' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-green.btn-icon-mail::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Crect x='5.24995' y='7.50002' width='12' height='7.5' rx='0.5' stroke='%233fa07c' stroke-width='1.1'/%3E%3Cpath d='M5.24995 8.24998L11.0263 11.1382C11.1671 11.2086 11.3328 11.2086 11.4736 11.1382L17.25 8.24998' stroke='%233fa07c' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-pink.btn-icon-mail::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Crect x='5.24995' y='7.50002' width='12' height='7.5' rx='0.5' stroke='%23ea635a' stroke-width='1.1'/%3E%3Cpath d='M5.24995 8.24998L11.0263 11.1382C11.1671 11.2086 11.3328 11.2086 11.4736 11.1382L17.25 8.24998' stroke='%23ea635a' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-brown.btn-icon-mail::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Crect x='5.24995' y='7.50002' width='12' height='7.5' rx='0.5' stroke='%23692c1a' stroke-width='1.1'/%3E%3Cpath d='M5.24995 8.24998L11.0263 11.1382C11.1671 11.2086 11.3328 11.2086 11.4736 11.1382L17.25 8.24998' stroke='%23692c1a' stroke-width='1.1'/%3E%3C/svg%3E"); }
.btn-green.btn-icon-external::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M12.8 6.6h3.1v3.1' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.9 6.6l-4.4 4.4' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.4 12.4v2.9c0 .3-.2.5-.5.5H7.2c-.3 0-.5-.2-.5-.5V8.6c0-.3.2-.5.5-.5h2.9' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-pink.btn-icon-external::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M12.8 6.6h3.1v3.1' stroke='%23ea635a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.9 6.6l-4.4 4.4' stroke='%23ea635a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.4 12.4v2.9c0 .3-.2.5-.5.5H7.2c-.3 0-.5-.2-.5-.5V8.6c0-.3.2-.5.5-.5h2.9' stroke='%23ea635a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-brown.btn-icon-external::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M12.8 6.6h3.1v3.1' stroke='%23692c1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.9 6.6l-4.4 4.4' stroke='%23692c1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.4 12.4v2.9c0 .3-.2.5-.5.5H7.2c-.3 0-.5-.2-.5-.5V8.6c0-.3.2-.5.5-.5h2.9' stroke='%23692c1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-green.btn-icon-arrow::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22.5' height='22.5' rx='11.25' fill='white'/%3E%3Cpath d='M5.625 10.5C5.21079 10.5 4.875 10.8358 4.875 11.25C4.875 11.6642 5.21079 12 5.625 12V11.25V10.5ZM17.4053 11.7803C17.6982 11.4874 17.6982 11.0126 17.4053 10.7197L12.6324 5.9467C12.3395 5.65381 11.8646 5.65381 11.5717 5.9467C11.2788 6.23959 11.2788 6.71447 11.5717 7.00736L15.8143 11.25L11.5717 15.4926C11.2788 15.7855 11.2788 16.2604 11.5717 16.5533C11.8646 16.8462 12.3395 16.8462 12.6324 16.5533L17.4053 11.7803ZM5.625 11.25V12H16.875V11.25V10.5H5.625V11.25Z' fill='%233fa07c'/%3E%3C/svg%3E"); }
.btn-pink.btn-icon-arrow::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22.5' height='22.5' rx='11.25' fill='white'/%3E%3Cpath d='M5.625 10.5C5.21079 10.5 4.875 10.8358 4.875 11.25C4.875 11.6642 5.21079 12 5.625 12V11.25V10.5ZM17.4053 11.7803C17.6982 11.4874 17.6982 11.0126 17.4053 10.7197L12.6324 5.9467C12.3395 5.65381 11.8646 5.65381 11.5717 5.9467C11.2788 6.23959 11.2788 6.71447 11.5717 7.00736L15.8143 11.25L11.5717 15.4926C11.2788 15.7855 11.2788 16.2604 11.5717 16.5533C11.8646 16.8462 12.3395 16.8462 12.6324 16.5533L17.4053 11.7803ZM5.625 11.25V12H16.875V11.25V10.5H5.625V11.25Z' fill='%23ea635a'/%3E%3C/svg%3E"); }
.btn-brown.btn-icon-arrow::after { background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22.5' height='22.5' rx='11.25' fill='white'/%3E%3Cpath d='M5.625 10.5C5.21079 10.5 4.875 10.8358 4.875 11.25C4.875 11.6642 5.21079 12 5.625 12V11.25V10.5ZM17.4053 11.7803C17.6982 11.4874 17.6982 11.0126 17.4053 10.7197L12.6324 5.9467C12.3395 5.65381 11.8646 5.65381 11.5717 5.9467C11.2788 6.23959 11.2788 6.71447 11.5717 7.00736L15.8143 11.25L11.5717 15.4926C11.2788 15.7855 11.2788 16.2604 11.5717 16.5533C11.8646 16.8462 12.3395 16.8462 12.6324 16.5533L17.4053 11.7803ZM5.625 11.25V12H16.875V11.25V10.5H5.625V11.25Z' fill='%23692c1a'/%3E%3C/svg%3E"); }

/* テキスト位置指定 */
.btn-text-left a   { justify-content: flex-start; }

/* Figma SP 実測（02 Link1 2001:6145）: ボタン 305 の中で文字は 208×24 の 1 行
   （左右の余白は 49/48）。左右 56 のままだと内寸 193 で 13 文字が折れ、
   「題」1 文字が 2 行目に落ちていた。アイコンは右 20 から始まるので当たらない */
.btn-text-center a { justify-content: center; padding-inline: 48px; }

@media (min-width: 768px) {
  /* Figma 実測（02 Link1/Link2）: 420×80 / 文字 22px / アイコン 30px・右 20px */
  .button-wrap { max-width: 420px; }

  .button-wrap a {
    min-height: 80px;
    padding-left: 32px;
    padding-right: 72px;
    font-size: 22px;
    font-weight: 500;
  }

  .btn-text-center a { padding-inline: 56px; }

  .button-wrap::after { right: 20px; width: 30px; height: 30px; }
}

/* ==========================================================================
   c-tagList / ハッシュタグ
   ========================================================================== */
/* Figma 実測: ピルは 23 高（文字 12px・行ボックス 17・左右 10・上下 3）。
   Figma のストロークは箱の外側に出ないので、CSS では border 1px ぶんを
   padding から引いて 23×123 に合わせる。列間 8 / 行間 10。 */
.c-tagList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 10px;
}

.c-tagList li {
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 32px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

/* 記事ページのタグ行は PC だけ大きい（Figma 実測 160×30・文字 14px・
   行ボックス 20・左右 20・上下 5・列間 10）。SP はカードと同寸。 */
@media (min-width: 768px) {
  .c-tagList.is-lg { column-gap: 10px; }

  .c-tagList.is-lg li {
    padding: 4px 19px;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ==========================================================================
   c-newsCard / お知らせカード
   ========================================================================== */
.c-newsCard {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--c-white);
  overflow: hidden;
}

/* global.css の `.is-pcOnly { display:none }` は詳細度 (0,1,0)。
   この直上の `.c-newsCard { display:flex }` も (0,1,0) で、
   components.css のほうが後に読まれるためソース順で勝ってしまい、
   SP でも PC 専用カードが出ていた（TOP のお知らせが SP で 6 枚）。
   !important ではなく、同じファイル内でクラス 2 つ (0,2,0) にして解決する。
   PC 側の表示復帰は sections.css の `.p-news__list .is-pcOnly` が担う。 */
@media (max-width: 767px) {
  .c-newsCard.is-pcOnly { display: none; }
}

/* Figma 実測: PC のカードは 310×520（サムネ 200 + 本文 320）。
   本文は flex:1 なので矢印は下端 18 に固定される。
   SP は 335×430（05/06/07/09 で一致）。
   ※ 08 一覧の SP だけ Figma が 360 だが、これはタグ群を 0.75 倍に
     縮小した（文字 9px）インスタンスなので他 4 ページの 430 を正とする。 */
.c-newsCard { min-height: 430px; }

@media (min-width: 768px) {
  .c-newsCard { min-height: 520px; }
}


/* サムネは Figma では PC 310×200 / SP 335×200 と、カード幅が違っても
   高さは 200 で同じ。PC の比率のままだと SP で 216 になり、
   カード内の日付・見出し・タグが揃って 16px 下がる。 */
.c-newsCard__thumb {
  position: relative;
  aspect-ratio: 335 / 200;
  overflow: hidden; /* ホバーズーム時に元のサムネイル枠からはみ出さないため（2026-08-19） */
}

@media (min-width: 768px) {
  .c-newsCard__thumb { aspect-ratio: 310 / 200; }
}

/* img は aspect-ratio を持つ親の中で height:100% を使っても、
   置換要素の内在サイズが先に効いてしまい高さが画像の固有比で解決される。
   その結果 news-02.jpg（1600×1066）だけサムネが 223px になり、
   SP のカード高が 1 枚だけ 445 になっていた（他は 430）。
   絶対配置にして親の aspect-ratio が決めた箱へ強制的に流し込む。
   本番の CMS 画像は比率がまちまちなので、この対策は必須。 */
.c-newsCard__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 実測のカード内オフセット（カード上端から）
   PC: 日付 +219(h20) / タイトル +249(h69=3行×23) / タグ +338(h56) / 矢印 +472
   SP: 日付 +219(h17) / タイトル +244(h48=2行×24) / タグ +306(h56) / 矢印 +387 */
.c-newsCard__body {
  position: relative;
  flex: 1;
  padding: 19px 12px 60px;
}

.c-newsCard__date {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.c-newsCard__title {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.c-newsCard .c-tagList { margin-top: 14px; }

/* 矢印：カード右下に固定配置 */
.c-newsCard__body::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 30px;
  height: 30px;
  background: url("../img/icon-arrow-news.svg") no-repeat center / contain;
  pointer-events: none;
}

@media (min-width: 768px) {
  .c-newsCard__body { padding: 19px 15px 60px; }
  .c-newsCard__date { font-size: 14px; line-height: 20px; }
  /* 280÷17字 ＝ 16px・行ボックス 23 */
  .c-newsCard__title { margin-top: 10px; font-size: 16px; line-height: 23px; }
  .c-newsCard .c-tagList { margin-top: 20px; }
  .c-newsCard__body::after { right: 15px; bottom: 18px; }
}

/* 矢印の色はページのベースカラーに追従（Figma: 05 #4778AC / 06 #3FA07C / 07 #0CA490）*/
.l-mainBg.is-peace    .c-newsCard__body::after { background-image: url("../img/icon-arrow-news-pd.svg"); }
.l-mainBg.is-kankojin .c-newsCard__body::after { background-image: url("../img/icon-arrow-news-kq.svg"); }
.l-mainBg.is-program  .c-newsCard__body::after { background-image: url("../img/icon-arrow-news-mlp.svg"); }

.l-mainBg.is-peace    .c-btnPill::after { background-image: url("../img/icon-arrow-btn-pd.svg"); }
.l-mainBg.is-kankojin .c-btnPill::after { background-image: url("../img/icon-arrow-btn-kq.svg"); }
.l-mainBg.is-program  .c-btnPill::after { background-image: url("../img/icon-arrow-btn-mlp.svg"); }

/* カード全体クリック（JS 有効時のみ。HTML 構造は変更しない）
   menu.js は .c-newsCard と .c-serviceCard の両方に is-clickable を付けるので
   カーソルも両方に当てる（2026-09-01: serviceCard が矢印のままだった） */
.c-newsCard.is-clickable,
.c-serviceCard.is-clickable { cursor: pointer; }

/* ==========================================================================
   c-serviceCard / 提供サービスカード
   ========================================================================== */
/* Figma SP 2001:5137 ＝ 335×440。中身の積み上げだけでは 417 にしかならないので
   min-height で 440 を保証し、body を flex:1 で下端まで伸ばす。
   こうしないと「リンク・矢印をカード下端から測る」ことができず、
   絶対配置の基準がカードではなく縮んだ body の下端になってしまう
   （リンクが Figma より 8px 上に来ていた原因）。 */
.c-serviceCard {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
}

.c-serviceCard--peace    { background: var(--c-bg-peace); }
.c-serviceCard--kankojin { background: var(--c-bg-kankojin); }
.c-serviceCard--program  { background: var(--c-bg-program); }

.c-serviceCard__thumb { aspect-ratio: 335 / 238; overflow: hidden; }

.c-serviceCard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma SP のカード内オフセット（カード上端から）
     サムネ 0..238 / ピル 262.25(h22.5) / リード 291(h32) / 見出し 325(h32)
     リンク 395(h20) / 矢印 390(h30) */
.c-serviceCard__body {
  position: relative;
  flex: 1;
  padding: 24.25px 16px 60px;
}

.c-serviceCard__lead {
  margin-top: 6.25px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.28;
}

.c-serviceCard__title {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* 行頭が「で始まる見出しは、「 の左サイドベアリング（Noto Sans JP で 0.643em）ぶん
   ぶら下げて、墨面の左端をリード文・ピルと揃える（行頭括弧のぶら下げ）。
   Figma もこの分だけテキストボックスを外へ出している:
     PC 2001:5431 x625（墨面 645.6 ＝ ピル左端 646）
     SP 2001:5145 x25 （墨面 37.9 ＝ ピル左端 36）
   CMS で「以外の文字から始まる見出しに切り替わったときに効かないよう、
   クラスで明示的に付ける（`:has()` は使わない）。 */
.c-serviceCard__title.is-quoted { text-indent: -0.643em; }

/* Figma 2001:5430（PC）＝ 16px・行ボックス 23 / 2001:5144（SP）＝ 14px・行ボックス 20。
   いずれも Figma の auto 行送りそのままなので、Figma の h を line-height に入れる。 */
.c-serviceCard__link {
  position: absolute;
  right: 60px;
  bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
}

/* サービスごとの文字色 */
.c-serviceCard--peace    .c-serviceCard__lead,
.c-serviceCard--peace    .c-serviceCard__title,
.c-serviceCard--peace    .c-serviceCard__link { color: var(--c-peace); }

.c-serviceCard--kankojin .c-serviceCard__lead,
.c-serviceCard--kankojin .c-serviceCard__title,
.c-serviceCard--kankojin .c-serviceCard__link { color: var(--c-kankojin); }

.c-serviceCard--program  .c-serviceCard__lead,
.c-serviceCard--program  .c-serviceCard__title,
.c-serviceCard--program  .c-serviceCard__link { color: var(--c-program); }

/* 矢印アイコン */
.c-serviceCard__body::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 20px;   /* Figma SP 2001:5140 ＝ カード下端から 20 */
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.c-serviceCard--peace    .c-serviceCard__body::after { background-image: url("../img/icon-arrow-service1.svg"); }
.c-serviceCard--kankojin .c-serviceCard__body::after { background-image: url("../img/icon-arrow-service2.svg"); }
.c-serviceCard--program  .c-serviceCard__body::after { background-image: url("../img/icon-arrow-service3.svg"); }

/* PC：画像左・テキスト右の横並び
   Figma 実測（Group 34 = 2001:5423 / カード 230..1210 × 5736..6006）
     ピル   2001:5432  x646 y5764  120×25（Inter SemiBold 14 / 角丸 32）
     リード 2001:5429  x643 y5807  18px SemiBold・行ボックス 32
     見出し 2001:5431  x625 y5845  32px SemiBold・行ボックス 32
     リンク 2001:5430  右端 1134.07 y5953  16px SemiBold
     矢印   2001:5426  x1144 y5950 30×30
   ※ 見出しの x625 は「」ぶんの左サイドベアリングを見込んだ位置で、
      墨面の左端はリード（643）と揃う。CSS では padding-left 36 のままでよい。 */
@media (min-width: 768px) {
  .c-serviceCard {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 270px;
  }

  .c-serviceCard__thumb { aspect-ratio: auto; }

  .c-serviceCard__body { padding: 28px 36px 28px 36px; }

  .c-serviceCard__lead  { margin-top: 18px; font-size: 18px; line-height: 32px; }
  .c-serviceCard__title { margin-top: 6px; font-size: 32px; line-height: 32px; }

  .c-serviceCard__link { right: 76px; bottom: 30px; font-size: 16px; line-height: 23px; }

  .c-serviceCard__body::after { right: 36px; bottom: 26px; }
}

/* ==========================================================================
   c-targetList / for Student・for Business バッジ
   ========================================================================== */
.c-targetList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Figma SP 2001:5146 ＝ 108×22.5・文字 12px Inter SemiBold・行ボックス 15。
   1.6（19.2）＋ 上下 2 だと 23.2 になり、カード内の以降の要素が 0.7px ずつ下がる。 */
.c-targetList li {
  min-width: 108px;
  padding: 3.75px 18px;
  border-radius: 999px;
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: var(--c-white);
  text-align: center;
}

.c-targetList .is-student  { background: var(--c-floral-orange); }
.c-targetList .is-business { background: var(--c-floral-blue); }

/* Figma PC 2001:5432 ＝ 120×25・角丸 32・Inter SemiBold 14px。
   行ボックスを 25 に固定して padding を 0 にしないと高さが 26.8 になる。
   列間は 781-766 = 15。 */
@media (min-width: 768px) {
  .c-targetList { gap: 15px; }

  .c-targetList li {
    min-width: 120px;
    padding: 0 18px;
    font-size: 14px;
    line-height: 25px;
  }
}

/* ==========================================================================
   Hover エフェクト（ポインタ操作できる環境のみ）
   ========================================================================== */
@media (hover: hover) {

  /* ボタン：少しだけズーム */
  .l-header__contact a {
    transition: transform .25s ease, opacity .3s;
  }

  .l-header__contact:hover a {
    transform: scale(1.05);
  }

  /* もっと見る等のピル/角丸ボタン：フレーム（::before）だけを拡大し、
     文字とアイコンは固定のまま（2026-08-19 クライアント指示） */
  .button-wrap::before,
  .c-btnPill::before {
    transition: transform .25s ease;
  }

  .button-wrap:hover::before,
  .c-btnPill:hover::before {
    transform: scale(1.05);
  }

  /* 横矢印のリンクアイコン：カードにマウスオーバーで矢印が右へ */
  .c-serviceCard__body::after,
  .c-newsCard__body::after {
    transition: transform .25s ease;
  }

  .c-serviceCard:hover .c-serviceCard__body::after,
  .c-newsCard:hover .c-newsCard__body::after {
    transform: translateX(6px);
  }

  /* サムネイル：カードにマウスオーバーで拡大（2026-08-19 クライアント指示。
     矢印の動きだけではインタラクションが弱いため）。
     thumb 側の overflow:hidden はカード本体（.c-newsCard/.c-serviceCard）が
     既に持っているので、img を拡大するだけで枠からはみ出さない */
  .c-newsCard__thumb img,
  .c-serviceCard__thumb img {
    transition: transform .35s ease;
  }

  .c-newsCard:hover .c-newsCard__thumb img,
  .c-serviceCard:hover .c-serviceCard__thumb img {
    transform: scale(1.08);
  }

  /* ページトップへ戻る：矢印の向きに合わせて少し上へ。
     中の img は -90° 回転しているので、移動は <a> 側に掛ける */
  .l-footer__pagetop a {
    display: block;
    transition: transform .25s ease;
  }

  .l-footer__pagetop:hover a {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-wrap::before,
  .c-btnPill::before,
  .l-header__contact a,
  .l-footer__pagetop a,
  .c-serviceCard__body::after,
  .c-newsCard__body::after,
  .c-newsCard__thumb img,
  .c-serviceCard__thumb img {
    transition: none;
    transform: none;
  }
}