@charset "UTF-8";
/* ==========================================================================
   「はじめてばこ」まとめページ 専用CSS（/cam/hajimetebako/css/style.css）
   --------------------------------------------------------------------------
   ・共通CSS（normalize.css / common.css / module.css）の後に読み込みます。
   ・<section class="hb-page"> の中だけに効くように書いています。
     共通ヘッダー・パンくず・フッターには影響しません。
   ・デザインはコープみらいの「はじめてばこ」ページに合わせています。
       見出し（h1）… 明朝体・中央ぞろえ
       見出し（h2）… 下にパステルのグラデーション線
       ボタン        … 青い文字＋上下の線（マウスを乗せると線が縮む）
       注意の囲み    … 水色の二重線
   ・色や横幅は「1. 基本設定」の値を変えると、ページ全体に反映されます。
   ・見出しの番号（1〜7）は、index.html のコメントの番号と対応しています。
   ・画面幅による切り替えは1か所だけです。
       640px以下 … スマホ表示（7.）
       641px以上 … PC表示（中身の横幅960px）
   ・ページ内リンク（#area-saitama など）のスクロールは、サイト共通の main.js が
     行います（ヘッダーの高さ分ずらして移動）。このCSSでは指定していません。
   ・改行（<br>）の出し分けは、サイト共通の module.css のルールを使います。
       <br> … PCだけ／<br class="br"> … スマホだけ／<br class="br2"> … 両方
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 基本設定（色・横幅・文字）
   -------------------------------------------------------------------------- */
.hb-page {
  --hb-width: 960px;           /* 中身の横幅 */
  --hb-text: #333;             /* 本文・見出しの文字色（コープみらいと同じ） */
  --hb-accent: #0670c4;        /* アクセント色（青）：ボタン・番号など
                                  コープみらいの #078cf5 を、白い背景でも
                                  文字が読みやすい濃さに少し濃くしています */
  --hb-accent-hover: #04528f;  /* ボタンにマウスを乗せたときの色 */
  --hb-pink: #edbcd8;          /* パステル5色（コープみらいの見出し線の色） */
  --hb-purple: #ddbced;
  --hb-blue: #93a9ed;
  --hb-cyan: #93dced;
  --hb-green: #93edb7;
  --hb-rainbow: linear-gradient(to left, #edbcd8 0%, #ddbced 25%, #93a9ed 50%, #93dced 75%, #93edb7 100%);
  --hb-pale: #f5f9fd;          /* うすい水色：④・⑥の背景 */
  --hb-frame: #93c8ed;         /* 注意の囲み（二重線）の色 */
  --hb-line: #dfe6ee;          /* 罫線・枠線 */
  --hb-sub: #666;              /* 補足の文字色 */

  /* 県ごとの色（各県の「はじめてばこ」の箱のメイン色、またはぱっと見て目立つ色）
     ・使う場所 … 地域ナビのボタン（枠の色・マウスを乗せたときの色）、
                   各地域のカード（上の色帯・県名のラベル）
     ・--hb-○○    … 県の色
       --hb-○○-on … その色の上に乗せる文字の色
                       濃い色のとき #fff（白）、黄色など明るい色のとき #333（黒）
     ・埼玉県はオレンジ（#f39800）、千葉県は水色（#40b8f0）に決定。
       ほかの県は【仮の色】（これまでと同じパステル色）なので、色が決まったら書き換えてください。 */
  --hb-saitama: #f39800;  --hb-saitama-on: #333;   /* 埼玉県（コープみらい）オレンジ
                                                      ※強すぎるときは #f7b55c（やや淡いオレンジ）に */
  --hb-chiba:   #40b8f0;  --hb-chiba-on:   #333;   /* 千葉県（コープみらい）水色
                                                      ※強すぎるときは #8fd3f5（やや淡い水色）に */
  --hb-ibaraki: #93a9ed;  --hb-ibaraki-on: #333;   /* 茨城県（いばらきコープ） */
  --hb-tochigi: #93dced;  --hb-tochigi-on: #333;   /* 栃木県（とちぎコープ） */
  --hb-gunma:   #93edb7;  --hb-gunma-on:   #333;   /* 群馬県（コープぐんま） */
  --hb-nagano:  #edbcd8;  --hb-nagano-on:  #333;   /* 長野県（コープながの） */
  --hb-niigata: #ddbced;  --hb-niigata-on: #333;   /* 新潟県（コープデリにいがた） */
  --hb-mincho: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --hb-maru: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", "Noto Sans JP", sans-serif;

  display: block;
  background: #fff;
  color: var(--hb-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

/* このページの中だけのリセット（ブラウザや共通CSSの余白をそろえる）
   ※ :where() で「弱い指定」にしているので、下に書いた各パーツの余白が優先されます */
.hb-page *,
.hb-page *::before,
.hb-page *::after { box-sizing: border-box; }
.hb-page :where(h1, h2, h3, h4, p, ul, ol, li) { margin: 0; padding: 0; }
.hb-page :where(ul, ol) { list-style: none; }
.hb-page :where(img) { display: block; max-width: 100%; height: auto; }

/* 画面には出さず、読み上げソフトだけに伝える文字（ボタンの補足など） */
.hb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   2. 共通パーツ（横幅・区切り・見出し・ボタン）
   -------------------------------------------------------------------------- */
.hb-inner { max-width: var(--hb-width); margin: 0 auto; }

.hb-sec { padding: 72px 0; }                       /* ブロックの上下の余白 */
.hb-sec--pale { background: var(--hb-pale); }

/* 大見出し（h2）：下にパステルのグラデーション線（コープみらいと同じ） */
.hb-h2 {
  margin-bottom: 40px;
  color: var(--hb-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.hb-h2::after {
  content: "";
  display: block;
  width: 160px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: var(--hb-rainbow);
}
.hb-lead {                                         /* 見出しの下の説明文 */
  margin: -12px 0 40px;
  font-family: var(--hb-maru);
  font-size: 17px;
  text-align: center;
}
.hb-note { margin-top: 20px; color: var(--hb-sub); font-size: 14px; text-align: center; }

/* ボタン「詳しくはこちら」：青い文字＋上下の線（コープみらいの btn-border と同じ動き） */
.hb-page .hb-btn {
  display: inline-block;
  position: relative;
  min-width: 240px;
  padding: 12px 40px;
  color: var(--hb-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  transition: color .3s;
}
.hb-page .hb-btn::before,
.hb-page .hb-btn::after {                          /* 上下の線 */
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: width .3s;
}
.hb-page .hb-btn::before { top: 0; left: 0; }
.hb-page .hb-btn::after { right: 0; bottom: 0; }
.hb-page .hb-btn:hover { color: var(--hb-accent-hover); }
.hb-page .hb-btn:hover::before,
.hb-page .hb-btn:hover::after { width: 0; }

/* キーボードで操作したときの枠（リンク共通） */
.hb-page a:focus-visible { outline: 3px solid var(--hb-accent); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   3. ヒーロー（ページ最上部：タイトル・リード・地域ナビ）
   -------------------------------------------------------------------------- */
.hb-hero {
  position: relative;
  padding: 72px 0 64px;
  background: linear-gradient(180deg, #fdf8fb 0%, #f3f8fe 100%);
  text-align: center;
}
.hb-hero::before {                                 /* 上のパステルの帯 */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--hb-rainbow);
}
.hb-hero__label {                                  /* 「子育て応援プロジェクト」の小さな枠 */
  display: inline-block;
  margin-bottom: 20px;
  padding: 2px 16px;
  border: 1px solid var(--hb-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-accent);
  font-size: 14px;
  font-weight: 700;
}
.hb-hero__title {                                  /* 明朝体（コープみらいと同じ） */
  margin-bottom: 32px;
  color: var(--hb-text);
  font-family: var(--hb-mincho);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.7;
}
.hb-hero__title span { font-size: 1.2em; }         /* 「はじめてばこ」を大きく */
.hb-hero__lead {
  font-family: var(--hb-maru);
  font-size: 17px;
  line-height: 2;
}
.hb-hero__lead + .hb-hero__lead { margin-top: 16px; font-weight: 700; }

/* 地域ナビ（各地域のカードへ移動） */
.hb-areanav { margin-top: 44px; }
.hb-areanav__title { margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.hb-areanav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hb-page .hb-areanav__list a {
  --hb-c: var(--hb-blue);
  --hb-c-on: var(--hb-text);
  display: block;
  min-width: 112px;
  padding: 8px 20px;
  border: 2px solid var(--hb-c);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.hb-page .hb-areanav__list a:hover { background: var(--hb-c); color: var(--hb-c-on); }
/* 色の割り当て（県ごとの色：「1. 基本設定」で指定）
   ※リンク先（href）で県を見分けています。地域を増やすときは1行追加し、
     「1. 基本設定」にもその県の色を追加してください。 */
.hb-areanav__list a[href="#area-saitama"] { --hb-c: var(--hb-saitama); --hb-c-on: var(--hb-saitama-on); }
.hb-areanav__list a[href="#area-chiba"]   { --hb-c: var(--hb-chiba);   --hb-c-on: var(--hb-chiba-on); }
.hb-areanav__list a[href="#area-ibaraki"] { --hb-c: var(--hb-ibaraki); --hb-c-on: var(--hb-ibaraki-on); }
.hb-areanav__list a[href="#area-tochigi"] { --hb-c: var(--hb-tochigi); --hb-c-on: var(--hb-tochigi-on); }
.hb-areanav__list a[href="#area-gunma"]   { --hb-c: var(--hb-gunma);   --hb-c-on: var(--hb-gunma-on); }
.hb-areanav__list a[href="#area-nagano"]  { --hb-c: var(--hb-nagano);  --hb-c-on: var(--hb-nagano-on); }
.hb-areanav__list a[href="#area-niigata"] { --hb-c: var(--hb-niigata); --hb-c-on: var(--hb-niigata-on); }


/* --------------------------------------------------------------------------
   4. 「はじめてばこ」ってなあに？（4つのポイント：PCは2列）
   -------------------------------------------------------------------------- */
.hb-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.hb-points__item {
  position: relative;
  padding: 28px 32px 28px 92px;
  border: 1px solid var(--hb-line);
  border-radius: 8px;
  background: #fff;
}
.hb-points__no {                                   /* 番号の丸 */
  position: absolute;
  top: 26px;
  left: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hb-c, var(--hb-blue));
  color: var(--hb-text);
  font-family: var(--hb-mincho);
  font-size: 22px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}
.hb-points__item:nth-child(1) { --hb-c: var(--hb-pink); }
.hb-points__item:nth-child(2) { --hb-c: var(--hb-purple); }
.hb-points__item:nth-child(3) { --hb-c: var(--hb-cyan); }
.hb-points__item:nth-child(4) { --hb-c: var(--hb-green); }
.hb-points__title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.hb-points__text { font-size: 15px; }


/* --------------------------------------------------------------------------
   5. 各地域の「はじめてばこ」（カード：PCは2列、奇数のとき最後は中央）
   ・画像は index.html で指定しています。
       埼玉・千葉 … このサイトの img/area/ に置いた画像
       そのほか   … 各生協のサイトの画像を絶対パス（https://〜）で表示
   ・カードの縦幅は、すべて同じ高さにそろえています。
       画像の枠 … 高さを固定（PC 300px／スマホ 220px）。縦長・横長の画像でも
                   枠の中に全体が収まり、画像によって枠の高さが変わりません。
       カード全体 … いちばん背の高いカードに、ほかのカードの高さを合わせます。
                   文章が短いカードは、文章とボタンの間が空き、ボタンは下にそろいます。
   -------------------------------------------------------------------------- */
.hb-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;                             /* すべての行を同じ高さにする */
  gap: 32px;
}
.hb-area:last-child:nth-child(odd) {               /* カードが奇数のとき、最後の1枚を中央に */
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 32px) / 2);
}
.hb-area {
  --hb-c: var(--hb-blue);
  --hb-c-on: var(--hb-text);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hb-line);
  border-top: 6px solid var(--hb-c);               /* 上の色帯 */
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
/* 色の割り当て（県ごとの色：「1. 基本設定」で指定。地域ナビと同じ色）
   ※カードの id で県を見分けています。 */
#area-saitama { --hb-c: var(--hb-saitama); --hb-c-on: var(--hb-saitama-on); }
#area-chiba   { --hb-c: var(--hb-chiba);   --hb-c-on: var(--hb-chiba-on); }
#area-ibaraki { --hb-c: var(--hb-ibaraki); --hb-c-on: var(--hb-ibaraki-on); }
#area-tochigi { --hb-c: var(--hb-tochigi); --hb-c-on: var(--hb-tochigi-on); }
#area-gunma   { --hb-c: var(--hb-gunma);   --hb-c-on: var(--hb-gunma-on); }
#area-nagano  { --hb-c: var(--hb-nagano);  --hb-c-on: var(--hb-nagano-on); }
#area-niigata { --hb-c: var(--hb-niigata); --hb-c-on: var(--hb-niigata-on); }

.hb-page .hb-area__img {                           /* 画像の枠（高さを変える場合は height を変更） */
  --hb-img-pad: 16px;                              /* 枠と画像のすき間（大きくすると画像が小さくなる） */
  display: block;
  position: relative;
  flex-shrink: 0;
  height: 300px;
  background: var(--hb-pale);                      /* 画像がないときの色 */
  transition: opacity .5s;
}
/* 画像を一回り小さく見せる地域（栃木・群馬・埼玉）：HTMLの class に hb-area__img--small を追加
   ※画像そのものの余白が少なく、ほかの地域より大きく見えるため。
     大きさは下の数値で調整（数値を大きくするほど小さくなる） */
.hb-page .hb-area__img--small { --hb-img-pad: 48px; }
/* 画像をさらに小さく見せる地域（千葉）：HTMLの class に hb-area__img--xsmall を追加
   ※箱が画像いっぱいに写っていて（周りの余白がほとんどない）、
     --small でもほかの地域より大きく見えるため。 */
.hb-page .hb-area__img--xsmall { --hb-img-pad: 64px; }
/* 画像を少しだけ小さく見せる地域（新潟）：HTMLの class に hb-area__img--little を追加
   ※栃木・群馬と同じ大きさにする場合は、HTMLの class を hb-area__img--small に変更 */
.hb-page .hb-area__img--little { --hb-img-pad: 32px; }
.hb-page .hb-area__img:hover { opacity: .7; }      /* コープみらいと同じ、画像を薄くする */
.hb-page .hb-area__img img {                       /* 枠の内側（すき間をあけて）に全体を収める */
  position: absolute;
  top: var(--hb-img-pad);
  left: var(--hb-img-pad);
  width: calc(100% - var(--hb-img-pad) * 2);
  height: calc(100% - var(--hb-img-pad) * 2);
  max-width: none;
  object-fit: contain;
}
.hb-area__body {                                   /* ボタンはカードの下にそろえる */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 28px 28px;
}
.hb-area__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
.hb-area__pref {                                   /* 「埼玉県」などのラベル */
  display: inline-block;
  margin-right: 10px;
  padding: 0 12px;
  border-radius: 4px;
  background: var(--hb-c);
  color: var(--hb-c-on);
  font-size: 15px;
  line-height: 1.8;
  vertical-align: 3px;
}
.hb-area__org { margin-top: 4px; color: var(--hb-sub); font-size: 14px; }
.hb-area__text { flex-grow: 1; margin-top: 12px; font-size: 15px; }
.hb-area__btn { margin-top: 20px; text-align: center; }


/* --------------------------------------------------------------------------
   6. お申し込みについて（水色の二重線の囲み：コープみらいと同じ）
   -------------------------------------------------------------------------- */
.hb-entry {
  padding: 32px 40px;
  border: 5px double var(--hb-frame);
  background: #fff;
}
.hb-entry__title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.hb-entry__list li {                               /* 先頭の「・」 */
  position: relative;
  padding-left: 1.2em;
  font-size: 15px;
}
.hb-entry__list li + li { margin-top: 8px; }
.hb-entry__list li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}


/* --------------------------------------------------------------------------
   7. スマホ（画面幅640px以下）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .hb-page { font-size: 15px; line-height: 1.75; }
  .hb-inner { padding: 0 16px; }
  .hb-sec { padding: 48px 0; }

  /* 2. 共通パーツ */
  .hb-h2 { margin-bottom: 28px; font-size: 22px; }
  .hb-h2::after { width: 120px; margin-top: 12px; }
  .hb-lead { margin: -8px 0 24px; font-size: 15px; text-align: left; }
  .hb-note { text-align: left; }
  .hb-page .hb-btn { display: block; width: 100%; min-width: 0; }

  /* 3. ヒーロー */
  .hb-hero { padding: 44px 0 40px; }
  .hb-hero__label { margin-bottom: 14px; font-size: 13px; }
  .hb-hero__title { margin-bottom: 20px; font-size: 22px; line-height: 1.6; }
  .hb-hero__lead { font-size: 15px; line-height: 1.85; text-align: left; }
  .hb-hero__lead + .hb-hero__lead { margin-top: 12px; }
  .hb-areanav { margin-top: 32px; }
  .hb-areanav__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hb-page .hb-areanav__list a { min-width: 0; padding: 8px 10px; font-size: 14px; }

  /* 4. ポイント（1列） */
  .hb-points { grid-template-columns: 1fr; gap: 16px; }
  .hb-points__item { padding: 20px 18px 20px 72px; }
  .hb-points__no { top: 20px; left: 16px; width: 40px; height: 40px; font-size: 20px; line-height: 40px; }
  .hb-points__title { font-size: 17px; }
  .hb-points__text { font-size: 14px; }

  /* 5. 各地域（1列） */
  .hb-areas { grid-template-columns: 1fr; gap: 20px; }
  .hb-area:last-child:nth-child(odd) { width: 100%; }
  .hb-page .hb-area__img { --hb-img-pad: 12px; height: 220px; }
  .hb-page .hb-area__img--small { --hb-img-pad: 36px; }
  .hb-page .hb-area__img--xsmall { --hb-img-pad: 48px; }
  .hb-page .hb-area__img--little { --hb-img-pad: 24px; }
  .hb-area__body { padding: 20px 18px 24px; }
  .hb-area__name { font-size: 19px; }
  .hb-area__pref { font-size: 14px; }

  /* 6. お申し込みについて */
  .hb-entry { padding: 24px 18px; }
  .hb-entry__title { font-size: 18px; }
  .hb-entry__list li { font-size: 14px; }
}