@charset "UTF-8";
/* ==========================================================================
   はむ先生サイト 共通スタイル（黒板＋クリーム＋木のトーン）
   ========================================================================== */

:root{
  /* 黒板のグリーン */
  --hs-green-900:#0F3714;
  --hs-green-800:#14421A;
  --hs-green-700:#1C5626;
  --hs-green-600:#2A7135;
  --hs-green-500:#3E8B49;
  /* クリーム（黒板に貼った紙） */
  --hs-cream-50:#FDFAF2;
  --hs-cream-100:#F8F1E0;
  --hs-cream-200:#F0E4CA;
  --hs-cream-300:#E4D3B2;
  /* 木 */
  --hs-wood-700:#6F3507;
  --hs-wood-600:#8A4A15;
  --hs-wood-400:#B87B44;
  /* 文字 */
  --hs-ink:#2B1A0B;
  --hs-text:#3A342C;
  --hs-muted:#7A7167;
  /* アクセント */
  --hs-yellow:#F2B705;
  --hs-pink:#F7D4E0;
  --hs-pink-600:#E0799C;

  --hs-radius:18px;
  --hs-radius-sm:10px;
  --hs-wrap:1100px;
  --hs-shadow:0 3px 0 rgba(43,26,11,.10), 0 10px 24px -14px rgba(43,26,11,.45);

  --hs-font-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Yu Gothic",sans-serif;
  --hs-font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,sans-serif;
}

/* --------------------------------------------------------------------------
   1. Cocoon コンテナの調整（独自テンプレートのページのみ全幅にする）
   -------------------------------------------------------------------------- */
.hs-page #content.content{ margin-top:0; padding-top:0; }
.hs-page #content-in.wrap{ width:100%; max-width:100%; padding:0; display:block; }
.hs-page #main.main{
  width:100%; max-width:100%;
  margin:0; padding:0;
  border:none; background:transparent; box-shadow:none;
}
.hs-page .entry-content{ margin:0; }

/* このサイトは全ページ1カラム。
   ただし sidebar.php はスマホの「サイドバー」スライドインメニューでも
   読み込まれているため、テンプレート自体は消さず、通常表示だけを隠す。 */
#sidebar.sidebar{ display:none; }
#main.main{ width:100%; max-width:100%; }
.hs-page .article-header,
.hs-page .date-tags,
.hs-page .entry-title{ display:none; }
html{ overflow-x:hidden; }

/* 本文の基本 */
body.hs-page,
body.hs-single{
  font-family:var(--hs-font-body);
  color:var(--hs-text);
  background:var(--hs-cream-50);
  line-height:1.9;
  letter-spacing:.02em;
}
.hs-wrap{ max-width:var(--hs-wrap); margin-inline:auto; padding-inline:20px; }
.hs-wrap--narrow{ max-width:820px; }

/* セクション */
.hs-section{ padding:64px 0; }
.hs-section--tight{ padding:44px 0; }
.hs-section--cream{ background:var(--hs-cream-100); }
.hs-section--paper{ background:var(--hs-cream-50); }
.hs-section--green{ background:var(--hs-green-800); color:var(--hs-cream-50); }
.hs-section--wood{
  background:
    linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),
    repeating-linear-gradient(90deg,var(--hs-wood-600) 0 6px,var(--hs-wood-700) 6px 13px);
  color:var(--hs-cream-50);
}

/* --------------------------------------------------------------------------
   2. 見出し・テキスト
   -------------------------------------------------------------------------- */
.hs-heading{ text-align:center; margin:0 0 36px; }
.hs-heading__main{
  font-family:var(--hs-font-round);
  font-weight:900;
  text-wrap:balance;
  font-size:clamp(1.45rem,1.05rem + 1.7vw,2.15rem);
  line-height:1.45;
  color:var(--hs-ink);
  margin:0;
  position:relative;
  display:inline-block;
  padding:0 .3em .18em;
}
.hs-heading__main::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:8px; border-radius:6px;
  background:var(--hs-yellow); opacity:.55; z-index:-1;
}
.hs-section--green .hs-heading__main,
.hs-section--wood .hs-heading__main{ color:var(--hs-cream-50); }
.hs-section--green .hs-heading__main::after{ background:var(--hs-green-500); opacity:.8; }
.hs-heading__sub{
  margin:.7em 0 0;
  font-size:.95rem; color:var(--hs-muted);
}
.hs-section--green .hs-heading__sub{ color:var(--hs-cream-200); }

.hs-lead{
  font-size:1.05rem; line-height:2.1; text-align:center;
  margin:0 auto 36px; max-width:760px;
  text-wrap:pretty;
}
.hs-catch{
  font-family:var(--hs-font-round); font-weight:700;
  font-size:clamp(1.15rem,.9rem + 1.1vw,1.6rem);
  line-height:1.8; text-align:center; color:var(--hs-ink);
  margin:0 0 28px;
  /* 1行目と2行目の長さが近くなるように折り返す */
  text-wrap:balance;
}
.hs-note{ font-size:.87rem; color:var(--hs-muted); }
.hs-center{ text-align:center; }

/* --------------------------------------------------------------------------
   3. ヒーロー（黒板）
   -------------------------------------------------------------------------- */
.hs-hero{ position:relative; overflow:hidden; }
.hs-hero--green{
  /* images/bg-chalkboard.png を置くと、黒板のテクスチャが重なります */
  background:
    var(--hs-chalk-texture,none) center/cover,
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(180deg,var(--hs-green-700),var(--hs-green-900));
  border-bottom:14px solid var(--hs-wood-700);
}
/* images/chalk-doodle.png を置くと、チョーク風の手描き装飾が入ります */
.hs-hero--green::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--hs-chalk-doodle,none) center/cover no-repeat;
  opacity:.45;
}
.hs-hero__inner{ position:relative; z-index:1; }
.hs-hero--cream{ background:linear-gradient(180deg,var(--hs-cream-200),var(--hs-cream-100)); }
.hs-hero--pink{ background:linear-gradient(180deg,#FBE3EB,var(--hs-pink)); }

.hs-hero__inner{
  display:flex; align-items:center; gap:32px;
  padding-block:clamp(38px,5vw,64px);
}
/* ヒーローの文字側は縦並び。
   こう組んでおくと「肩書き」「タイトルの紙」「ひとこと」が
   それぞれ自分の文字幅ぶんだけの大きさになり、右側に空白が残らない。 */
.hs-hero__body{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hs-hero__eyebrow{
  font-family:var(--hs-font-round); font-weight:700;
  font-size:clamp(.9rem,.82rem + .35vw,1.05rem);
  margin:0 0 .8em; letter-spacing:.06em;
}
.hs-hero--green .hs-hero__eyebrow{
  color:var(--hs-cream-100);
  border-bottom:2px dashed rgba(253,250,242,.5);
  display:inline-block; padding-bottom:.35em;
}
.hs-hero--cream .hs-hero__eyebrow,
.hs-hero--pink .hs-hero__eyebrow{ color:var(--hs-wood-700); }

.hs-hero__title{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:clamp(1.7rem,1.05rem + 2.9vw,3rem);
  line-height:1.35; margin:0;
}
/* タイトルの「白い紙」は文字の幅ぴったりにする。
   見出しはもともと横幅いっぱいに広がるブロックなので、そのままだと
   文字の右側に紙だけが長く残り、大きな空白に見えてしまっていた。 */
.hs-hero--green .hs-hero__title{
  max-width:100%;
  color:var(--hs-ink);
  background:var(--hs-cream-100);
  border:3px solid var(--hs-cream-300);
  border-radius:var(--hs-radius);
  padding:.5em .7em;
  box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.hs-hero--cream .hs-hero__title,
.hs-hero--pink .hs-hero__title{ color:var(--hs-ink); }

.hs-hero__lead{
  margin:1.1em 0 0; font-size:clamp(.95rem,.88rem + .3vw,1.08rem); line-height:1.95;
  max-width:34em;
}
.hs-hero--green .hs-hero__lead{ color:var(--hs-cream-100); }

.hs-hero__figure{ flex:0 0 auto; width:clamp(120px,20vw,220px); }
.hs-hero__figure img{ width:100%; height:auto; display:block; }

/* 正方形の写真的な画像は丸く切り抜く */
.hs-hero__figure--circle img{
  border-radius:50%; border:5px solid var(--hs-cream-100);
  box-shadow:var(--hs-shadow);
}
/* 背景が透明な切り抜きは、丸で切らずに少し大きく置く */
.hs-hero__figure--cutout{ width:clamp(150px,24vw,280px); }
.hs-hero__figure--cutout img{ filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }

/* 明るい背景のページでは影を弱める（黒い影が浮いて見えるため） */
.hs-hero--cream .hs-hero__figure--cutout img,
.hs-hero--pink .hs-hero__figure--cutout img{
  filter:drop-shadow(0 6px 14px rgba(111,53,7,.20));
}

/* 画面が広いときは、切り抜きをヒーローの下端に立たせる */
@media screen and (min-width:835px){
  .hs-hero__figure--cutout{
    align-self:flex-end;
    margin-bottom:calc(clamp(38px,5vw,64px) * -1);
  }
}

/* --------------------------------------------------------------------------
   4. ボタン
   -------------------------------------------------------------------------- */
.hs-btn-wrap{ text-align:center; margin:32px 0 0; }
.hs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--hs-font-round); font-weight:700;
  font-size:1.05rem; line-height:1.4;
  padding:.95em 2.2em; border-radius:999px;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  min-height:56px;
}
.hs-btn::after{ content:"›"; font-size:1.3em; line-height:1; transform:translateY(-.06em); }
.hs-btn--primary{
  background:var(--hs-yellow); color:var(--hs-ink);
  box-shadow:0 4px 0 #C99400;
}
.hs-btn--primary:hover{ background:#FFC825; transform:translateY(-2px); box-shadow:0 6px 0 #C99400; }
.hs-btn--green{
  background:var(--hs-green-600); color:var(--hs-cream-50);
  box-shadow:0 4px 0 var(--hs-green-900);
}
.hs-btn--green:hover{ background:var(--hs-green-500); transform:translateY(-2px); box-shadow:0 6px 0 var(--hs-green-900); }
.hs-btn--pink{
  background:var(--hs-pink-600); color:#fff; box-shadow:0 4px 0 #B85476;
}
.hs-btn--pink:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #B85476; }
.hs-btn--outline{
  background:var(--hs-cream-50); color:var(--hs-green-800);
  border:2px solid var(--hs-green-600); box-shadow:0 4px 0 rgba(28,86,38,.25);
}
.hs-btn--lg{ font-size:1.15rem; padding:1.1em 2.8em; }
.hs-btn-note{ display:block; margin-top:.8em; font-size:.85rem; color:var(--hs-muted); }

/* --------------------------------------------------------------------------
   5. カード類
   -------------------------------------------------------------------------- */
.hs-grid{ display:grid; gap:20px; }
.hs-grid--2{ grid-template-columns:repeat(2,1fr); }
.hs-grid--3{ grid-template-columns:repeat(3,1fr); }

.hs-card{
  background:var(--hs-cream-50);
  border:2px solid var(--hs-cream-300);
  border-radius:var(--hs-radius);
  padding:24px;
  box-shadow:var(--hs-shadow);
}
a.hs-card{ display:block; text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease; }
a.hs-card:hover{ transform:translateY(-3px); border-color:var(--hs-green-500); }
.hs-card__title{
  font-family:var(--hs-font-round); font-weight:700;
  font-size:1.12rem; color:var(--hs-green-800);
  margin:0 0 .6em; display:flex; align-items:center; gap:.5em;
}
.hs-card__text{ margin:0; font-size:.94rem; line-height:1.85; }
.hs-card__more{
  display:inline-block; margin-top:1em;
  font-size:.9rem; font-weight:700; color:var(--hs-green-600);
}
.hs-card__more::after{ content:" ›"; }

/* 吹き出し */
.hs-bubble{
  position:relative;
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-600);
  border-radius:20px;
  padding:18px 22px;
  font-family:var(--hs-font-round); font-weight:700;
  font-size:1rem; line-height:1.7; color:var(--hs-ink);
  box-shadow:var(--hs-shadow);
}
.hs-bubble::before,
.hs-bubble::after{
  content:""; position:absolute; bottom:-16px; left:38px;
  border:8px solid transparent; border-top-color:var(--hs-green-600);
}
.hs-bubble::after{ bottom:-12px; border-top-color:var(--hs-cream-50); }

/* 画像と準備中プレースホルダー */
.hs-img{ max-width:100%; height:auto; border-radius:var(--hs-radius-sm); }
.hs-img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:150px; padding:16px; text-align:center;
  background:repeating-linear-gradient(45deg,var(--hs-cream-100) 0 10px,var(--hs-cream-200) 10px 20px);
  border:2px dashed var(--hs-cream-300); border-radius:var(--hs-radius-sm);
  color:var(--hs-muted); font-size:.9rem; font-weight:700;
}
.hs-img-placeholder small{ font-weight:400; font-size:.75rem; opacity:.75; }

/* --------------------------------------------------------------------------
   6. セミナーカード
   -------------------------------------------------------------------------- */
.hs-seminar-card{
  background:var(--hs-cream-50);
  border:3px solid var(--hs-yellow);
  border-radius:var(--hs-radius);
  padding:28px;
  box-shadow:var(--hs-shadow);
  max-width:820px; margin-inline:auto;
}
.hs-seminar-card__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.hs-seminar-card__title{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:1.25rem; color:var(--hs-ink); margin:0;
}
.hs-badge{
  display:inline-block; padding:.28em 1em; border-radius:999px;
  font-size:.82rem; font-weight:700; color:#fff; background:var(--hs-green-600);
}
.hs-badge--full{ background:var(--hs-pink-600); }
.hs-badge--closed{ background:var(--hs-muted); }

.hs-seminar-card__meta{ margin:0 0 16px; display:grid; gap:8px; }
.hs-seminar-card__meta > div{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.hs-seminar-card__meta dt{
  flex:0 0 5.5em; font-size:.85rem; font-weight:700;
  color:var(--hs-cream-50); background:var(--hs-green-700);
  border-radius:6px; padding:.15em .6em; text-align:center;
}
.hs-seminar-card__meta dd{ margin:0; font-weight:700; color:var(--hs-ink); }
.hs-seminar-card__theme{
  font-family:var(--hs-font-round); font-weight:700;
  background:var(--hs-cream-200); border-radius:var(--hs-radius-sm);
  padding:.7em 1em; margin:0 0 14px;
}
.hs-seminar-card__lead{ margin:0; font-size:.95rem; }

/* --------------------------------------------------------------------------
   7. アコーディオン／タブ
   -------------------------------------------------------------------------- */
.hs-acc{ display:grid; gap:14px; }
.hs-acc__item{
  background:var(--hs-cream-50);
  border:2px solid var(--hs-cream-300);
  border-radius:var(--hs-radius);
  overflow:hidden;
}
.hs-acc__btn{
  width:100%; display:flex; align-items:center; gap:14px;
  text-align:left; background:none; border:0; cursor:pointer;
  padding:18px 22px; font-family:var(--hs-font-round); font-weight:700;
  font-size:1.02rem; line-height:1.6; color:var(--hs-ink);
}
.hs-acc__btn:hover{ background:var(--hs-cream-100); }
.hs-acc__q{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--hs-green-600); color:#fff;
  display:grid; place-items:center; font-size:.95rem;
}
.hs-acc__label{ flex:1 1 auto; }
.hs-acc__icon{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--hs-green-600); color:#fff; position:relative;
  transition:transform .2s ease;
}
.hs-acc__icon::before,
.hs-acc__icon::after{
  content:""; position:absolute; inset:50% 7px auto; height:2px;
  background:#fff; transform:translateY(-50%); border-radius:2px;
}
.hs-acc__icon::after{ transform:translateY(-50%) rotate(90deg); transition:opacity .2s ease; }
.hs-acc__btn[aria-expanded="true"] .hs-acc__icon::after{ opacity:0; }
.hs-acc__panel{ padding:0 22px 22px; }
.hs-acc__panel[hidden]{ display:none; }
.hs-acc__panel > :first-child{ margin-top:0; }
.hs-acc__panel p{ font-size:.96rem; line-height:1.95; }
.hs-acc__a{
  display:flex; gap:14px;
}
.hs-acc__a::before{
  content:"A"; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--hs-yellow); color:var(--hs-ink); font-weight:900;
  display:grid; place-items:center; font-family:var(--hs-font-round);
}

.hs-tabs__list{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin:0 0 -2px; padding:0; list-style:none;
}
/* display:flex が UA の [hidden]{display:none} に勝ってしまうため明示する */
.hs-tabs__list[hidden]{ display:none; }
.hs-tabs__btn{
  border:2px solid var(--hs-cream-300); border-bottom-color:transparent;
  background:var(--hs-cream-100); color:var(--hs-muted);
  font-family:var(--hs-font-round); font-weight:700; font-size:1rem;
  padding:.7em 1.4em; border-radius:12px 12px 0 0; cursor:pointer;
  min-height:48px;
}
.hs-tabs__btn[aria-selected="true"]{
  background:var(--hs-cream-50); color:var(--hs-green-800);
  border-color:var(--hs-green-600); border-bottom-color:var(--hs-cream-50);
}
.hs-tabs__panels{
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-600);
  border-radius:0 0 var(--hs-radius) var(--hs-radius);
  padding:28px;
}
.hs-tabs__panel[hidden]{ display:none; }
.hs-tabs__panel h3{
  font-family:var(--hs-font-round); font-weight:900; font-size:1.2rem;
  color:var(--hs-green-800); margin:0 0 .8em;
}
.hs-tabs__panel ul{ margin:0; padding-left:1.2em; }
.hs-tabs__panel li{ margin-bottom:.6em; line-height:1.9; }

/* --------------------------------------------------------------------------
   8. 通知（フォーム）
   -------------------------------------------------------------------------- */
.hs-notice{
  border-radius:var(--hs-radius); padding:20px 24px; margin:0 0 28px;
  border:2px solid;
}
.hs-notice p{ margin:0 0 .4em; }
.hs-notice p:last-child{ margin-bottom:0; }
.hs-notice--ok{ background:#EAF6EC; border-color:var(--hs-green-600); color:var(--hs-green-900); }
.hs-notice--ng{ background:#FDEDEF; border-color:#D3596F; color:#8A2437; }
.hs-notice ul{ margin:.4em 0 0; padding-left:1.3em; }

/* --------------------------------------------------------------------------
   9. ヘッダー・グローバルナビ（Cocoon の上書き）
   -------------------------------------------------------------------------- */

/* --- ページ最上部のタイトル帯について ------------------------------------
   Cocoon 標準のヘッダー（キャッチフレーズ＋サイト名の帯）は、
   すぐ下のヒーロー（黒板）にも同じタイトルが出るため二重に見えていた。
   そこで「見た目だけ」消している。
   HTML からは消していないので、
     ・検索エンジンに伝わるサイト名（schema.org の WebSite name）
     ・読み上げソフトでの「サイト名」
   はこれまで通り残る。SEO 上の不利はない。
   （ページの見出し <h1> は各ページのヒーロー側にあり、
     ブラウザのタブに出る <title> にもサイト名が入っている）

   もう一度この帯を表示したくなったら、下の #header{...} を消すだけでよい。
   ------------------------------------------------------------------------ */
#header{
  position:absolute;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  border:0;
}
#header-container, .header-container{ background:var(--hs-cream-50); }
#header-container-in{ padding:0; }

/* --- グローバルナビ -------------------------------------------------------
   黒板（緑）のヒーローがすぐ下に続くので、メニュー帯は緑ではなく
   クリーム地＋緑文字にして、境目がはっきり分かるようにしている。
   下辺の木色のラインは、黒板の受け皿（チョーク台）のイメージ。
   ------------------------------------------------------------------------ */
/* Cocoon の設定画面が書き出すCSS（#header-container .navi）に負けないよう、
   こちらも「#header-container を前に付けた形」で指定している。 */
#navi, .navi,
#header-container #navi,
#header-container .navi{
  background:var(--hs-cream-50);
  border-top:0;
  border-bottom:4px solid var(--hs-wood-400);
  box-shadow:0 2px 10px -6px rgba(43,26,11,.45);
}
#navi .navi-in > ul > li > a,
.navi .navi-in > ul > li > a{
  font-family:var(--hs-font-round); font-weight:700;
  color:var(--hs-green-800); font-size:.97rem;
}
#navi .navi-in > ul > li > a:hover{
  background:var(--hs-cream-100); color:var(--hs-green-600);
}
#navi .navi-in > ul > li.current-menu-item > a{
  color:var(--hs-green-900);
  box-shadow:inset 0 -4px 0 var(--hs-yellow);
}

/* メニュー名は PC では折り返させない。
   Cocoonのメニュー項目は width/height/line-height がすべて固定値のため、
   2行になると2行目と現在地の下線が枠の外に出て見えなくなる。
   （スマホ側は下の「モバイルメニュー」で折り返せるように作り直している） */
@media screen and (min-width:835px){
  #navi .navi-in > ul > li > a{ white-space:nowrap; }
  #navi .navi-in > ul > li{ width:auto; }
}
/* 835〜1199px でも6項目が1行に収まるよう、少しだけ詰める */
@media screen and (max-width:1199px){
  #navi .navi-in > ul > li > a{ font-size:.9rem; padding:0 1.1em; }
}

/* --- スマホのメニュー -----------------------------------------------------
   Cocoon 標準は「1項目＝画面半分・高さ40px・折り返し禁止」なので、
   「時間講師の働き方とお金情報」のような長い項目が画面の外にはみ出して
   文字が切れていた。2行になっても収まるように作り直している。
   ------------------------------------------------------------------------ */
@media screen and (max-width:834px){
  #navi .navi-in > .menu-mobile{
    flex-wrap:wrap; padding:6px 4px;
  }
  #navi .navi-in > .menu-mobile li{
    width:50%; height:auto; line-height:1.35;
  }
  #navi .navi-in > .menu-mobile li a{
    display:flex; align-items:center; justify-content:center;
    min-height:44px; height:auto; line-height:1.35;
    padding:.35em .6em; white-space:normal; text-align:center;
    font-size:.82rem;
  }
  #navi .navi-in > .menu-mobile li a .caption-wrap,
  #navi .navi-in > .menu-mobile li a .item-label{
    height:auto; line-height:1.35; white-space:normal;
  }
}

/* ナビ内のサイト内検索
   画面が狭いとメニューと並びきらないので、2行目に回して
   「意図してそう置いた」見た目になるようにしている。 */
#navi .navi-in > ul{ align-items:center; }
/* Cocoon が #navi 付きで width を指定しているので、こちらも同じ強さで上書きする */
#navi .navi-in > ul > li.hs-nav-search{
  display:flex; align-items:center; margin-left:auto;
  width:auto; height:60px; padding:0 12px; line-height:1;
}
@media screen and (max-width:1199px){
  #navi .navi-in > ul > li.hs-nav-search{
    margin-left:0; width:100%; height:auto;
    justify-content:center; padding:8px 12px;
    border-top:1px solid var(--hs-cream-200);
  }
  .hs-search__input{ width:min(60vw,260px); }
}
/* スマホでは下の固定ボタンに「検索」があるので、ナビ内の検索欄は出さない */
@media screen and (max-width:834px){
  #navi .navi-in > ul > li.hs-nav-search{ display:none; }
}
/* 入力欄とボタンの高さは指定せず、ピル全体の高さに伸ばす。
   固定値にすると、わずかな差が丸い角のすき間として見えてしまう。 */
.hs-search{
  display:flex; align-items:stretch;
  min-height:44px;
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-600);
  border-radius:999px; overflow:hidden;
}
/* Cocoon の input[type="search"] 指定（枠線・角丸4px・padding 11px）を打ち消すため、
   クラス2つ分の強さで書く。1つだけだと負けて「枠の中に枠」になる。 */
.hs-search .hs-search__input{
  appearance:none; -webkit-appearance:none;
  flex:1 1 auto; min-width:0; min-height:0; height:auto;
  border:0; border-radius:0; outline:0; box-shadow:none;
  background:transparent;
  padding:0 .4em 0 1.1em; font-size:.88rem; line-height:1.4;
  width:clamp(120px,14vw,180px);
  color:var(--hs-ink);
}
.hs-search .hs-search__input:focus{ outline:0; box-shadow:none; }
/* ブラウザ標準の検索欄の装飾（×ボタンや内側の枠）を消す */
.hs-search__input::-webkit-search-decoration,
.hs-search__input::-webkit-search-cancel-button,
.hs-search__input::-webkit-search-results-button{ -webkit-appearance:none; display:none; }

.hs-search__submit{
  appearance:none; -webkit-appearance:none;
  flex:0 0 46px; align-self:stretch;
  width:46px; height:auto; min-height:0; padding:0; border:0; border-radius:0;
  cursor:pointer; background:var(--hs-green-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hs-search__submit:hover{ background:var(--hs-green-500); }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* フッター */
#footer, .footer{ background:var(--hs-green-800); color:var(--hs-cream-100); }
#footer a, .footer a{ color:var(--hs-cream-100); }
.navi-footer-in > .menu-footer li a{ font-family:var(--hs-font-round); font-weight:700; }

/* --------------------------------------------------------------------------
   10. ページ末尾の共通CTA
   -------------------------------------------------------------------------- */
.hs-cta{
  background:linear-gradient(180deg,var(--hs-green-700),var(--hs-green-900));
  color:var(--hs-cream-50); padding:56px 0; text-align:center;
}
.hs-cta__title{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem); margin:0 0 .8em;
}
/* 「悩んでいるなら、」「最初の1歩はこちらから。」をそれぞれ途中で切らず、
   収まらない幅では2つ目を次の行へ送る */
.hs-cta__title > span{ display:inline-block; }
.hs-cta__text{ margin:0 auto 28px; max-width:640px; font-size:.98rem; }
.hs-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hs-cta__btns .hs-btn-wrap{ margin:0; }

/* ページトップへ */
.hs-pagetop{ text-align:right; padding:28px 0 0; }
.hs-pagetop a{
  font-size:.9rem; font-weight:700; color:var(--hs-green-700); text-decoration:none;
}
.hs-pagetop a::before{ content:"↑ "; }

/* --------------------------------------------------------------------------
   11. レスポンシブ
   -------------------------------------------------------------------------- */
/* 画面幅が本文の幅（1100px）に近いとき、文字が画面のふちに寄りすぎるので
   左右の余白を少し広げる */
@media screen and (min-width:835px) and (max-width:1199px){
  .hs-wrap{ padding-inline:32px; }
}
@media screen and (max-width:1023px){
  .hs-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:834px){
  .hs-section{ padding:48px 0; }
  .hs-hero__inner{ flex-direction:column-reverse; text-align:center; gap:20px; }
  .hs-hero__body{ align-items:center; width:100%; }
  .hs-hero__figure{ width:clamp(110px,30vw,170px); }
  .hs-hero--green .hs-hero__eyebrow{ display:inline-block; }
}
@media screen and (max-width:600px){
  .hs-grid--2,
  .hs-grid--3{ grid-template-columns:1fr; }
  .hs-wrap{ padding-inline:16px; }
  .hs-card{ padding:20px; }
  .hs-seminar-card{ padding:20px; }
  .hs-tabs__panels{ padding:20px; }
  .hs-btn{ width:100%; }
  .hs-seminar-card__meta dt{ flex-basis:5em; font-size:.8rem; }
}

/* --------------------------------------------------------------------------
   11-2. スマホでの読みやすさ
   PCでは中央ぞろえがきれいに見える文章も、画面の狭いスマホでは
   1行が短くなり、行の始まりが左右にずれて読みにくくなる。
   そのため、長めの文章はスマホでは左ぞろえに切り替えている。
   （短いキャッチコピーや見出しは、中央ぞろえのままの方が見栄えがよい）
   -------------------------------------------------------------------------- */
@media screen and (max-width:600px){
  .hs-lead,
  .hs-cta__text,
  .hs-hero__lead{
    text-align:left;
  }
  /* 本文の行間は、狭い画面では少し詰めた方が読みやすい */
  .hs-lead{ line-height:1.95; font-size:1rem; }
  body.hs-page, body.hs-single{ line-height:1.85; }

  /* 単語の途中で改行されないようにする（対応ブラウザのみ効く） */
  .hs-catch,
  .hs-heading__main,
  .hs-hero__title,
  .hs-bubble{ word-break:auto-phrase; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* --------------------------------------------------------------------------
   12. 共通コンポーネント（複数ページで使用）
   -------------------------------------------------------------------------- */
.hs-br-pc{ display:inline; }
@media screen and (max-width:834px){ .hs-br-pc{ display:none; } }

.hs-subheading{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:1.18rem; color:var(--hs-green-800);
  margin:40px 0 18px; padding-left:.7em;
  border-left:6px solid var(--hs-yellow); line-height:1.5;
}
.hs-subheading:first-child{ margin-top:0; }

.hs-num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--hs-green-600); color:#fff;
  display:grid; place-items:center; font-size:.9rem; font-weight:700;
}

/* 定義リスト（開催概要など） */
.hs-deflist{ margin:0 auto; max-width:720px; display:grid; gap:2px; }
.hs-deflist > div{ display:flex; gap:0; flex-wrap:wrap; }
.hs-deflist dt{
  flex:0 0 8.5em; background:var(--hs-green-700); color:var(--hs-cream-50);
  font-weight:700; font-size:.92rem; padding:.9em 1em; display:flex; align-items:center;
}
.hs-deflist dd{
  flex:1 1 60%; margin:0; background:var(--hs-cream-50);
  border:1px solid var(--hs-cream-300); border-left:0;
  padding:.9em 1.2em; font-weight:700; color:var(--hs-ink);
}
.hs-deflist dd .hs-note{ font-weight:400; display:inline-block; margin-top:.3em; }
@media screen and (max-width:600px){
  .hs-deflist dt{ flex-basis:100%; }
  .hs-deflist dd{ flex-basis:100%; border-left:1px solid var(--hs-cream-300); }
}

/* お客様の声風の吹き出し列
   吹き出しは文字の幅ぶんだけふくらませる（横幅いっぱいに広げると、
   短い文の右側が大きく空いて見えてしまうため）。 */
.hs-voice{
  list-style:none; padding:0; display:grid; gap:22px;
  /* 一番長い吹き出しの幅にそろえて、そのかたまりを中央に置く */
  width:fit-content; max-width:100%; margin:0 auto 28px;
}
.hs-voice > li{ width:fit-content; max-width:100%; }
.hs-voice > li:nth-child(even){ margin-left:clamp(20px,5vw,64px); }
@media screen and (max-width:600px){
  .hs-voice > li:nth-child(even){ margin-left:0; }
}

/* 料金表示 */
.hs-price{
  background:var(--hs-cream-50); border:3px solid var(--hs-pink-600);
  border-radius:var(--hs-radius); padding:26px; text-align:center;
  max-width:520px; margin:0 auto; box-shadow:var(--hs-shadow);
}
.hs-price__label{
  display:inline-block; background:var(--hs-pink-600); color:#fff;
  font-weight:700; font-size:.85rem; border-radius:999px;
  padding:.25em 1.2em; margin:0 0 .6em;
}
.hs-price__value{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:1.4rem; color:var(--hs-ink); margin:0 0 .4em;
}
.hs-price__value strong{ font-size:1.9rem; color:var(--hs-pink-600); }
.hs-price__note{ margin:0; font-size:.88rem; color:var(--hs-muted); line-height:1.8; }

/* 必須バッジ */
.hs-req{
  display:inline-block; margin-left:.5em;
  background:#D3596F; color:#fff; font-style:normal;
  font-size:.72rem; font-weight:700; border-radius:4px;
  padding:.15em .6em; vertical-align:middle;
}

/* --------------------------------------------------------------------------
   13. 2回目の修正依頼（2026-09）
   -------------------------------------------------------------------------- */
/* ヒーローの肩書きを区切りごとに折り返す（言葉の途中では切らない）。
   PCでは1行、狭い画面では「最初の1歩は、こちらから！」をまるごと2行目へ送る。 */
.hs-hero__eyebrow.is-split{
  display:flex; flex-wrap:wrap; column-gap:1em; row-gap:.2em;
  justify-content:flex-start;
}
.hs-hero__eyebrow.is-split > span{ white-space:nowrap; }
@media screen and (max-width:834px){
  .hs-hero__eyebrow.is-split{ justify-content:center; }
}

/* セミナーのお知らせ：「申込締切」の見出しが「申込締／切」と割れないように。
   見出しの幅はそろえたまま、スマホでは文字と余白を少しだけ詰めて1行に収める */
.hs-seminar-card__meta dt{ white-space:nowrap; flex:0 0 6.4em; }
.hs-nowrap{ white-space:nowrap; }
@media screen and (max-width:600px){
  .hs-seminar-card__meta > div{ gap:8px; }
  .hs-seminar-card__meta dt{ flex:0 0 5.4em; font-size:.74rem; padding:.2em .35em; }
  .hs-seminar-card__meta dd{ font-size:.95rem; }
}

/* スマホのメニュー：「時間講師の働き方とお金情報」が1行に収まるよう、
   画面幅に合わせて文字を少しだけ小さくし、折り返さないようにする */
@media screen and (max-width:834px){
  #navi .navi-in > .menu-mobile li a,
  #navi .navi-in > .menu-mobile li a .caption-wrap,
  #navi .navi-in > .menu-mobile li a .item-label{
    white-space:nowrap;
  }
  #navi .navi-in > .menu-mobile li a{
    font-size:min(.82rem, 3.35vw);
    letter-spacing:.02em;
    padding-inline:.3em;
  }
}
/* 日時などの中身は、見出しの右側の残り幅で折り返す（見出しの下に回り込ませない） */
.hs-seminar-card__meta > div{ flex-wrap:nowrap; }
.hs-seminar-card__meta dd{ flex:1 1 0; min-width:0; }

/* カードの数が列数で割り切れないとき、最後の段を中央に寄せる
   （トップページのページメニューは5項目なので、PCでは 3＋2 の並びになる） */
.hs-grid--center{ display:flex; flex-wrap:wrap; justify-content:center; }
.hs-grid--center > *{ flex:0 1 calc((100% - 40px) / 3); }
@media screen and (max-width:1023px){
  .hs-grid--center > *{ flex-basis:calc((100% - 20px) / 2); }
}
@media screen and (max-width:600px){
  .hs-grid--center > *{ flex-basis:100%; }
}