/* ========================================================
   おまかせ学童保育システム LP 専用の調整
   ☆ 基本のデザインは保育LPと共通（/css/hoiku-lp.css）。
      ここには学童LPだけで変える部分を書く。
   ======================================================== */

/* ---- FV：背景のグラデーション（デザイン指定）----
   左上の淡い緑 #EFF9E9 → 45% の位置で透明（#FFFEF5 / 0%）。
   向き（左上→右下）と下端を白へなじませる部分は保育LPのまま */
.fv-hoiku {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #ffffff 100%),
    linear-gradient(135deg, #EFF9E9 0%, rgba(255, 254, 245, 0) 45%);
}

/* ---- FV：PC画面を左、文章を右に（保育LPと左右逆）----
   HTML でも PC画面 → 文章 の順に並べ替えてある。
   バッジも PC画面の左上に寄せる */
.fv-hoiku_badge {
  right: auto;
  left: -30px;
}

/* バッジ「各／補助金／対応」は3行とも同じ大きさ */
.fv-hoiku_badge .badge-main {
  font-size: 1.4rem;
  display: block;   /* インラインのままだと親の行間（1.35）が優先されて詰まらない */
  line-height: 1.1;
}

/* ---- FV：リード文は緑の帯（見本どおり） ---- */
.fv-hoiku_lead {
  width: fit-content;
  margin: 0 auto;
  padding: 6px 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #13AA48 0%, #8FDD66 100%);   /* デザイン指定のグラデーション */
  color: #fff;
  /* 明るい緑の上でも白い文字が読みやすいよう、ページ内の緑のピル見出しと同じ影を付ける */
  text-shadow: 1px 2px 0 rgba(38, 92, 63, 0.55);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.04em;
}

/* ---- FV：子どもたちのイラストを PC画面の下側に重ねる ----
   margin の % は幅基準なので、PC画面の大きさが変わっても重なり具合は同じ */
.fv-hoiku_kids {
  position: relative;
  z-index: 1;
  display: block;
  width: 88%;
  height: auto;
  margin: -11% 0 0 2%;
  pointer-events: none;
}

/* ---- PC幅：文章を左揃えに（見本どおり） ---- */
@media (min-width: 980px) {
  .fv-hoiku_lead {
    margin: 0;
  }

  .fv-hoiku_logobox img {
    margin-top: 16px;
  }

  .fv-hoiku_desc {
    text-align: left;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .fv-hoiku_badge .badge-main {
    font-size: 0.85rem;
  }
}

@media (max-width: 979px) {
  .fv-hoiku_badge {
    right: auto;
    left: 10px;
  }

  .fv-hoiku_badge .badge-main {
    font-size: 0.85rem;
  }
}

/* タブレット幅は「ロゴ（全幅）→ PC画面｜CTAボタン」の並び */
@media (min-width: 768px) and (max-width: 979px) {
  .fv-hoiku_ctas {
    order: 3;
  }

  .container .fv-hoiku_right {
    order: 2;
  }

  .fv-hoiku_badge {
    right: auto;
    left: -8px;
  }

  .fv-hoiku_badge .badge-main {
    font-size: 1.1rem;
  }
}

/* スマホ幅は保育LPと同じ「ロゴ → PC画面 → CTAボタン」の縦並び */
@media (max-width: 640px) {
  .fv-hoiku_badge {
    right: auto;
    left: -6px;
  }

  .fv-hoiku_badge .badge-main {
    font-size: 1.05rem;
  }
}

/* ========================================================
   学童業務をまとめて一元管理（保育LPの「4つの基本機能」の位置）
   ======================================================== */
/* 見出し：白い角丸の箱。左右の緑線は保育LPの .fv-feat_line をそのまま使う */
.gk-feat_title {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 44px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  /* 影は外ではなく内側に落とし、少しへこんだ枠に見せる（見本どおり） */
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.22),
    inset 0 -1px 2px rgba(255, 255, 255, 0.9);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  white-space: nowrap;
}

/* 「一元管理」の上のピンクの点（傍点）
   ☆ text-emphasis では点の大きさを変えられないため、1文字（1em）ごとに点を1つ描く */
.gk-feat_em {
  position: relative;
  font-style: normal;
}

.gk-feat_em::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.14em;
  height: 7px;
  background: radial-gradient(circle, #ff9494 2.8px, rgba(255, 148, 148, 0) 3.3px) 0 0 / 1em 7px repeat-x;
  pointer-events: none;
}

/* 3つの円写真を » でつなぐ */
.gk-flow {
  --gk-gap: clamp(12px, 2vw, 28px);   /* 写真と » のすき間 */
  --gk-aw: clamp(28px, 3vw, 40px);    /* » の幅（高さは幅の0.8倍） */
  --gk-pmax: 270px;                    /* 写真の直径の上限 */
  /* » の位置を写真の大きさから計算するため、幅を基準にできるようにする */
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gk-gap);
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
}

/* 3列を均等に並べ、コンテンツ幅いっぱいに広げる */
.gk-flow_item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.gk-flow_photo {
  position: relative;
  width: 100%;
  max-width: var(--gk-pmax);
  margin: 0 auto;
}

.gk-flow_photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

/* 写真の右下に重ねるピンクの丸ラベル */
.gk-flow_label {
  position: absolute;
  right: -8%;
  bottom: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FF9494;   /* ページ内のピンク（特徴の数字・» ・傍点）と同じ色 */
  box-shadow: 0 4px 10px rgba(255, 148, 148, 0.35);
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}

.gk-flow_text {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* » は写真の高さの中央に置く。
   写真の直径 ＝ min(上限, 1列分の幅)。1列分の幅は全体から » 2つとすき間4つを引いて3等分 */
.gk-flow_arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  width: var(--gk-aw);
  margin-top: calc(min(var(--gk-pmax), (100cqw - 2 * var(--gk-aw) - 4 * var(--gk-gap)) / 3) / 2 - var(--gk-aw) * 0.4);
}

.gk-flow_arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ：縦に並べ、» は下向きにする */
@media (max-width: 640px) {
  .gk-feat_title {
    padding: 8px 18px;
    font-size: 20px;
  }

  .gk-flow {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .gk-flow_item {
    flex: 0 0 auto;
    width: 100%;
  }

  .gk-flow_photo {
    max-width: 200px;
  }

  .gk-flow_label {
    font-size: 16px;
  }

  .gk-flow_text {
    margin-top: 12px;
  }

  .gk-flow_arrow {
    align-self: center;
    width: 28px;
    margin: 0;
    transform: rotate(90deg);
  }
}

/* ========================================================
   他・連携サービス：丸ではなく角丸の四角にする（見本どおり）
   ☆ 大きさ・並び・横スクロールは保育LPのまま
   ======================================================== */
.fv-ai_circles li,
.fv-ai_circles li a,
.fv-ai_circles li span.fv-ai_circle-clip {
  border-radius: 14px;
}

.fv-ai_circles li {
  background: #fff;
}

@media (max-width: 640px) {
  .fv-ai_circles li,
  .fv-ai_circles li a,
  .fv-ai_circles li span.fv-ai_circle-clip {
    border-radius: 10px;
  }
}

/* ========================================================
   共通：語のまとまりの途中で改行させない
   （狭い幅では、このまとまりの切れ目で折り返す）
   ======================================================== */
.gk-nobr {
  display: inline-block;
}

/* ========================================================
   機能一覧：ブロック名の帯を、学童システムの画面と同じ画像にする
   （gakudo_images/title/menu-ttl01〜04.png）
   ======================================================== */
.fv-list_colhead.gk-colhead {
  padding: 0;
  background: none;
  border-radius: 0;
}

.gk-colhead img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
}

/* ========================================================
   機能一覧：学童システムのメインメニュー画面と同じ比率・余白にする
   ☆ 各ブロックの幅を 100cqw として、画面の実測値を比率で指定
      （ブロック幅 400px のとき：帯 約300px／アイコン 約100px／文字 19px／行の間隔 約175px）
   ☆ スマホ幅（640px以下）は保育LPのまま（比率どおりだとアイコンが小さくなりすぎるため）
   ======================================================== */
@media (min-width: 641px) {
  .fv-list_cols {
    column-gap: 2.6%;   /* ブロック間 ＝ ブロック幅の約11% */
  }

  .fv-list_col {
    container-type: inline-size;
    padding: 0;
    border-color: #c4c4c4;
    border-radius: 10px;
  }

  /* 帯：画像の上下にある影の余白ぶん、下のアイコンと少し重ねる */
  .fv-list_colhead.gk-colhead {
    margin: 0 0 -3.7cqw;
    padding-top: 2.3cqw;
  }

  .gk-colhead img {
    width: 76cqw;
    max-width: none;
  }

  .fv-list_grid {
    row-gap: 3.3cqw;
    padding: 0 2cqw 4cqw;
  }

  .fv-list_icon {
    gap: 0.5cqw;
    padding: 0;
  }

  /* アイコン画像は四角の周りに影の余白があるため、見た目の四角がブロック幅の約25%になる大きさ */
  .fv-list_icon img {
    width: 33.5cqw;
    height: 33.5cqw;
  }

  .fv-list_icon span {
    font-size: clamp(13px, 4.75cqw, 19px);
    line-height: 1.3;
    letter-spacing: 0.08em;
  }
}

/* ========================================================
   特徴：丸ではなく、機能一覧のアイコンのような立体的な四角いボタン風にする
   ☆ 中身の量に合わせて縦に伸びる（最低でも正方形）
   ======================================================== */
.fv-char_item {
  max-width: 320px;
}

/* ボタンの見た目は、機能一覧のアイコン画像から中の絵を消した画像
   （gakudo_images/button_base.png）をそのまま使う。
   ☆ border-image で「四隅はそのまま、辺と中央だけ伸ばす」表示にしているので、
      箱の大きさが変わっても角・厚み・くぼみ・影はアイコンと同じ形になる
   ☆ 数値は画像（500×500px）の実測値：ボタン本体は 64〜435px、角の範囲は端から170px。
      箱の幅（100cqw）＝ボタン本体の幅になるよう、画像の透明な余白ぶん外側へはみ出させている */
.fv-char_item {
  container-type: inline-size;   /* cqw ＝ 箱の幅 */
}

.fv-char_circle {
  aspect-ratio: 1 / 1;          /* 最低でも正方形。文章が多いときは縦に伸びる */
  border-radius: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  /* 影は元のアイコンの半分の濃さにした版（元の濃さは button_base.png） */
  border-image-source: url("../images/gakudo/button_base_light.webp");
  border-image-slice: 170 fill;
  border-image-width: 45.8cqw;   /* 170px ÷ ボタン本体371px */
  border-image-outset: 17.3cqw;  /*  64px ÷ ボタン本体371px（透明な余白） */
}

.fv-char_circle::before,
.fv-char_circle::after {
  content: none;
}

/* 中身は絶対配置をやめ、文章の量に合わせて高さを決める */
.fv-char_inner {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  align-items: stretch;
  padding: 44px 30px 58px 36px;   /* 上は「特徴01」の数字、左と下は側面の厚みの分 */
}

.fv-char_title {
  text-align: center;
}

.fv-char_text {
  font-size: 15px;
  color: #333;
}

@media (max-width: 640px) {
  /* スマホは保育LPの指定で数字が深くかぶるため、上の余白を多めに取る */
  .fv-char_inner {
    padding: 58px 26px 56px 32px;
  }
}

/* タブレット幅：保育LPは丸の形に合わせて特徴03を引き上げているが、
   四角だと上の2つに数字がかぶるため、引き上げをやめて間を空ける */
@media (min-width: 768px) and (max-width: 979px) {
  .fv-char_item--3 {
    margin-top: 28px;
  }
}

/* ========================================================
   FV：説明文の下の「補助金対応」チップ
   ======================================================== */
/* 左端にチェックの丸いバッジ（PC画面の「各補助金対応」バッジと同じ色・白い線、中央に白い円と緑のチェック）を重ね、
   右に説明。「各種補助金」は濃い緑＋黄色マーカーで強調
   ☆ サイト共通の「.grid_7 p:last-child」より優先させるため、親のクラスを付けて指定 */
.fv-hoiku .fv-hoiku_logobox p.gk-subsidy {
  --gk-seal: 54px;               /* 丸いバッジの直径 */
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 上：説明文の下の余白（14px）と合わせて約20px（バッジが上下に約5pxはみ出す分を含む）。
     下：サイト共通の p の余白（20px）を打ち消し、ボタン上の見出しまでを約30pxにそろえる */
  margin: 10px 0 4px;
  padding: 8px 20px 8px calc(var(--gk-seal) + 12px);
  background: #fff;
  border: 2px solid #13AA48;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(19, 170, 72, 0.12);
  color: #1f8a45;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* 丸いバッジ：チップの左端に重ねて、上下に少しはみ出させる */
.gk-subsidy_tag {
  position: absolute;
  top: 50%;
  left: -2px;   /* 枠線の分だけ外へ。バッジの左端を説明文の左端にそろえる */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--gk-seal);
  height: var(--gk-seal);
  border-radius: 50%;
  background: linear-gradient(135deg, #34c868 0%, #fff8c2 60%, #6fbf8b 78%, #34c868 100%);
  box-shadow: 0 4px 10px rgba(79, 174, 85, 0.4);
  color: #fff;
}

.gk-subsidy_tag::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  pointer-events: none;
}

/* 中央に白い円を置き、その上に緑のチェック（白いチェックだとクリーム色の部分で見えにくいため） */
.gk-subsidy_tag::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 17%;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.gk-subsidy_tag-check {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 46%;
}

.gk-subsidy_tag-check path {
  stroke: #13AA48;
}

/* 「各種補助金」を強調：濃い緑の文字＋下半分に黄色のマーカー線
   （赤系だと「資料請求」ボタンの色と競合するため、ページの緑にそろえる） */
.gk-subsidy_em {
  font-style: normal;
  color: #0F7A3A;
  font-size: 1.12em;
  padding: 0 2px;
  background: linear-gradient(transparent 58%, #FFE66D 58%);
}

@media (max-width: 640px) {
  /* スマホ：説明は2行（「ICT補助金など、」で改行）。角丸はPCと同じく両端まで丸く */
  .fv-hoiku .fv-hoiku_logobox p.gk-subsidy {
    --gk-seal: 50px;
    margin-top: 6px;       /* 説明文との間を約20pxに（スマホは2行なのでバッジははみ出さない） */
    margin-bottom: 32px;   /* 下に来るPC画面の「各補助金対応」バッジと詰まらないように */
    padding: 8px 14px 8px calc(var(--gk-seal) + 8px);
    border-radius: 999px;
    font-size: 14px;
  }

}

/* タブレット幅：チップのすぐ下にPC画面の「各補助金対応」バッジが来るため、間を空ける */
@media (min-width: 641px) and (max-width: 979px) {
  .fv-hoiku .fv-hoiku_logobox p.gk-subsidy {
    margin-bottom: 30px;   /* 丸いバッジのはみ出し分（約5px）も含めて、下のバッジまで約36px */
  }
}

/* ========================================================
   FV：PC画面の「各補助金対応」バッジの下にリボンを付ける（メダル風）
   ☆ リボンをバッジの円の「後ろ」に置くため、円の色はバッジ本体ではなく ::after で描く。
      バッジを重なりの基準（z-index:0）にして、
      リボン（-1）→ 円（::after 0）→ 白い線（::before 1）→ 文字（2）の順に重ねる
   ☆ 大きさはバッジに対する割合なので、画面幅でバッジの大きさが変わってもリボンも追従する
   ======================================================== */
.fv-hoiku_badge {
  z-index: 0;
  background: none;
  box-shadow: none;
}

.fv-hoiku_badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #34c868 0%, #fff8c2 60%, #6fbf8b 78%, #34c868 100%);
  box-shadow: 0 8px 18px rgba(79, 174, 85, 0.4);
}

.fv-hoiku_badge::before {
  z-index: 1;
}

.gk-badge_text {
  position: relative;
  z-index: 2;
  line-height: 1.1;
}

/* リボン：円の下半分の後ろから2本垂れ下がる */
.gk-ribbon {
  position: absolute;
  z-index: -1;
  left: 15%;
  top: 55%;
  width: 70%;
  height: 60%;   /* 円の下から見える長さ ＝ 55% + 60% - 100% ＝ バッジの約15% */
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
}

.gk-ribbon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ========================================================
   FV：ボタンを角丸の四角にし、「最短1分で入力！」の吹き出しをボタンの下へ離す（見本どおり）
   ======================================================== */
.fv-hoiku_btn {
  border-radius: 8px;
}

/* 吹き出しは絶対配置でカラムの下端に置いているため、カラム下の余白を広げて吹き出しを下げる
   （ボタンと吹き出しの間 約14px。しっぽの分を含む） */
.fv-hoiku_cta {
  padding-bottom: 68px;
}

/* CTAが縦並びになる幅（保育LPで吹き出しを通常の流れに戻している幅）は、上の余白で離す */
@media (max-width: 479px), (min-width: 768px) and (max-width: 979px) {
  .fv-hoiku_cta {
    padding-bottom: 0;
  }

  .fv-hoiku_note {
    margin-top: 16px;
  }
}

/* ========================================================
   FV：説明文を少し大きく（大きなロゴの下で小さく見えるため）
   ☆ スマホは画面幅に対して十分な大きさなので保育LPのまま
   ======================================================== */
@media (min-width: 641px) {
  .fv-hoiku_desc {
    font-size: 17px;
  }
}

/* ========================================================
   右端の固定ボタン「資料請求」：FVの四角いボタンに合わせて、丸みを小さくする
   （左側だけ角丸。右側は画面の端に貼り付く）
   ======================================================== */
.fv-fab {
  border-radius: 12px 0 0 12px;
}

/* ========================================================
   特徴：背景写真を学童システムの画面が映ったものにする
   （保育LPは images/lp/bg.png ＝ 保育システムの画面）
   ======================================================== */
.fv-char {
  background-image: url("../images/gakudo/bg.webp");
}

/* 背景写真を薄く見せる：上にかぶせる白の濃さを上げる（保育LPは 0.55） */
.fv-char_overlay {
  background: rgba(255, 255, 255, 0.7);
}

/* ========================================================
   「基本機能に加えて、さらに便利に！」の帯：背景も学童の写真（bg.png）にする
   （画像の指定は HTML の style 属性。ここでは切り取り位置だけ調整）
   ☆ 学童の写真は画面のアイコンが上寄りにあるため、保育LP（75%）より少し上を見せる
   ======================================================== */
.fv-more_img {
  background-position: center 58%;
}

/* ========================================================
   他・連携サービス：エンペイ・給与大臣、egao、CMS（見本どおり）
   ☆ エンペイ・給与大臣は、学童のロゴ（logo2.png）とバナーから切り抜いた相手のロゴを
      組み合わせて作った正方形の画像（gakudo_images/service_*.png）。枠いっぱいに表示する
   ☆ egao は横長のロゴなので、白地の中央に収める
   ======================================================== */
.fv-ai_circles li.gk-svc--egao img {
  object-fit: contain;
  object-position: center;
}

.gk-svc--egao a {
  background: #fff;
}

.gk-svc--egao img {
  padding: 0 10px;
  box-sizing: border-box;
}

/* ========================================================
   右固定ナビ（機能一覧・特徴など）を最初から表示するため、
   14インチノートPC幅（1200〜1450px 前後）では、右側の文章・ボタンがナビに重ならないよう右に余白を取る
   （学童LPは文章が右側。必要な余白は画面幅から計算：1200px で約120px、1450px 以上で 0）
   ======================================================== */
@media (min-width: 1200px) and (max-width: 1480px) {
  .container .fv-hoiku_left {
    box-sizing: border-box;
    padding-right: max(0px, calc(724px - 50vw));
  }
}

/* ========================================================
   スマホ：FV（最初の画面）に「資料請求」「お問い合わせ」の2つのボタンが入り切るようにする（保育LPと同じ仕様）
   ・ボタンは縦並び → 横並び（ラベル「導入を検討している皆様へ」は2行）、幅はロゴと同じ
   ・上の余白、説明文、補助金のチップ、PC画面とバッジを少し小さく・詰める
     （学童LPは説明文が4行・補助金のチップもあるため、保育LPより少し小さめ）
   ======================================================== */
@media (max-width: 640px) {
  .fv-hoiku.fv-hoiku {
    padding-top: calc(var(--gnav-h, 0px) + 18px);
  }

  .fv-hoiku .fv-hoiku_desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
  }

  .fv-hoiku .fv-hoiku_logobox p.gk-subsidy {
    --gk-seal: 44px;
    margin: 8px 0 0;
  }

  .fv-hoiku .fv-hoiku_right {
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: 0;
  }

  .fv-hoiku .fv-hoiku_laptop {
    max-width: 74%;
    margin: 0 auto;
  }

  .fv-hoiku .fv-hoiku_badge {
    width: 88px;
    height: 88px;
    top: -26px;
    left: -34px;
  }

  .fv-hoiku .fv-hoiku_badge .badge-main {
    font-size: 0.85rem;
  }

  .fv-hoiku .fv-hoiku_ctas {
    flex-direction: row;
    align-self: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
  }

  /* 吹き出し「最短1分で入力！」はボタンの下に重ねて置く（横並びでも2つのボタンの高さをそろえる） */
  .fv-hoiku .fv-hoiku_cta {
    padding-bottom: 42px;
  }

  .fv-hoiku .fv-hoiku_cta-label {
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.35;
  }

  .fv-hoiku .fv-hoiku_cta-label .arrow {
    margin-top: 4px;
  }

  .fv-hoiku .fv-hoiku_btn {
    width: 100%;
    padding: 12px 4px;
    font-size: 15px;
  }

  .fv-hoiku .fv-hoiku_note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    align-self: auto;
    margin-top: 0;
    padding: 4px 12px;
    font-size: 13px;
  }
}

/* 幅の狭いスマホ（360px 前後）：説明文が1行増えるぶん、PC画面と説明文をもう少し小さくしてボタンを最初の画面に収める */
@media (max-width: 370px) {
  .fv-hoiku .fv-hoiku_laptop {
    max-width: 68%;
  }

  .fv-hoiku .fv-hoiku_desc {
    font-size: 13px;
  }
}

/* ========================================================
   補助金チップ：左の丸いバッジを、枠線にかぶせず枠の内側に収める
   ※ スマホ幅（640px 以下）だけ。PC・タブレットは丸が枠からはみ出す元のデザインのまま
   ・丸と枠線のすき間（--gk-seal-gap）を上下左右で同じにする
   ・丸が上下にはみ出さないよう、チップの高さを「丸＋すき間×2＋枠線」以上にする
   ======================================================== */
@media (max-width: 640px) {
  .fv-hoiku .fv-hoiku_logobox p.gk-subsidy {
    --gk-seal-gap: 5px;
    box-sizing: border-box;
    min-height: calc(var(--gk-seal) + var(--gk-seal-gap) * 2 + 4px);
    padding-left: calc(var(--gk-seal) + var(--gk-seal-gap) + 10px);
  }

  .gk-subsidy_tag {
    left: var(--gk-seal-gap);
  }
}