@charset "utf-8";
/* =====================================================================
   field-c.net 2026 リニューアル 共通ヘッダ（header2026.tmpl）
   - デザイントークン、ヘッダ、メニュー、画面左下の電話ボタン
   - 新しいページ（head2026.tmpl）と、ヘッダだけ差し替えた既存ページの両方で読み込む。
     既存ページの fc_common.css と同居しても崩れないよう、クラス名は gh_ / fl_ で始める
   - 配色は --gh-* で持ち、窓口別ページは body のテーマクラス（.theme-blue など）で差し替える
   - レイアウトの切り替え（メディアクエリ）はファイル末尾に集約
   ===================================================================== */

/* ---------------------------------------------------------------------
   デザイントークン
--------------------------------------------------------------------- */
:root {
  /* 色 */
  --c-orange: #ff8e32;      /* ブランドオレンジ（面・見出し） */
  --c-red: #ff6633;         /* 強調・ボタン・電話番号 */
  --c-blue: #3366ee;        /* 会社概要・教室セミナー */
  --c-yellow: #ffee99;      /* FAQ・提供サービス背景 */
  --c-hl: #ffff00;          /* オレンジ面上の強調文字 */
  --c-bg: #fbfbfb;          /* 基本背景 */
  --c-gray: #eeeeee;        /* グレー面 */
  --c-footer: #666666;
  --c-text: #444444;
  --c-text-sub: #666666;
  --c-line-bg: #ddedcc;

  /* サポートメニュー色 */
  --c-karada: #eaa48c;
  --c-seikatsu: #879ac4;
  --c-shokuji: #8db798;
  --c-uta: #dbada5;
  --c-online: #a184af;
  --c-seminar: #aaaaaa;

  /* 書体（既存CSSと同じ指定） */
  --ff-base: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --ff-head: 'Noto Sans JP', sans-serif;
  --ff-num: verdana, sans-serif;

  /* 文字サイズ（393px → 1680px の間で線形に変化） */
  --fs-xs: clamp(12px, 11.4px + .27vw, 16px);   /* 12.5 → 16 注記 */
  --fs-s: clamp(16px, 15.4px + .16vw, 18px);    /* 16 → 18 補足・タグ */
  --fs-m: clamp(16px, 14.8px + .31vw, 20px);    /* 16 → 20 本文 */
  --fs-l: clamp(17px, 16.2px + .47vw, 24px);    /* 18 → 24 */
  --fs-xl: clamp(18px, 16.3px + .93vw, 32px);   /* 20 → 32 */
  --fs-h2: clamp(28px, 24.5px + 1.4vw, 48px);   /* 30 → 48 セクション見出し */
  --fs-h2l: clamp(28px, 20.8px + 2.33vw, 60px); /* 30 → 60 大見出し */

  /* 余白・寸法 */
  --gutter: clamp(16px, 4vw, 48px);
  --sec-pad: clamp(56px, 35.6px + 6.2vw, 140px);
  --w-wide: 1240px;
  --w-mid: 1060px;
  --w-narrow: 900px;
  --radius: clamp(10px, 1vw, 16px);
  --gh-h: clamp(56px, 40px + 3.5vw, 98px);
  --gh-full: calc(var(--gh-h) + 1px);  /* 下罫を含むヘッダの高さ（ページ先頭の面をヘッダの裏へ回り込ませる量） */

  /* ヘッダ・メニュー・電話ボタンの配色（窓口別ページはテーマのクラスで差し替える） */
  --gh-main: var(--c-orange);       /* ナビ・メニューボタン・メニュー面・電話ボタン */
  --gh-accent: var(--c-red);        /* ホバー */
  --gh-logo: var(--c-red);          /* ロゴ */
  --gh-logo-hover: var(--c-orange);
  --gh-bg: rgba(255, 255, 255, .8); /* ヘッダの地（下のページが透けて見える白） */
  --gh-border: #c9a283;             /* ヘッダの下罫 */
  --gh-hl: var(--c-yellow);         /* メニューを開いた時の見出し・ホバー */
}

/* 窓口別ページ：青（法人・団体のご担当者様。body に .theme-blue） */
.theme-blue {
  --gh-main: #0044aa;
  --gh-accent: #3366ee;
  --gh-logo: #0044aa;
  --gh-logo-hover: #3366ee;
  --gh-border: #a8b9d6;
}

/* ---------------------------------------------------------------------
   ヘッダ（header2026.tmpl）
--------------------------------------------------------------------- */
.gh {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gh-bg);
  border-bottom: 1px solid var(--gh-border);
  /* 文字の基準を新しいページと揃える（既存ページは body が 10px のため、em の間隔が詰まらないように） */
  font-size: var(--fs-m);
  letter-spacing: .06em;
}
.gh_inner {
  display: flex;
  align-items: center;
  height: var(--gh-h);
  padding-inline: var(--gutter);
}
/* ロゴは logo_field-c_02_new_orange.svg を型抜きに使い、リンクの文字色で塗る（ホバー・反転で色を変えられるように） */
.gh_logo a { display: block; color: var(--gh-logo); }
.gh_logo span {
  display: block;
  font-size: clamp(9px, 7.2px + .46vw, 15px);
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.3;
}
.gh_logo_mark {
  display: block;
  width: clamp(132px, 102px + 9.2vw, 256px);
  aspect-ratio: 640 / 141;
  background-color: currentColor;
  -webkit-mask: url(../img/logo_field-c_02_new_orange.svg) 0 0 / 100% 100% no-repeat;
  mask: url(../img/logo_field-c_02_new_orange.svg) 0 0 / 100% 100% no-repeat;
}

.gh_nav { margin-left: auto; }
.gh_nav ul { display: flex; gap: clamp(1em, 2.2vw, 2em); }
.gh_nav a {
  display: inline;  /* 既存ページの nav a { display: block } を打ち消す */
  color: var(--gh-main);
  font-size: var(--fs-l);
  font-weight: bold;
  letter-spacing: .06em;
  line-height: 1.8;
}

.gh_line img, .gh_instagram img { display: block; width: 100%; height: auto; }  /* 既存ページの img 指定は高さが自動にならないため */
.gh_line, .gh_instagram { flex: none; width: clamp(38px, 2vw + 30px, 58px); margin-left: clamp(16px, 2.4vw, 44px); transition: opacity .25s; }

/* ハンバーガーボタン（旧サイトと同じ太めの角丸の3本線。開くと白い×に）：3本線の間隔は --bar-gap、下に MENU の文字 */
.gh_toggle { display: none; }
.gh_btn {
  --bar-w: clamp(34px, 1.2vw + 30px, 52px);
  --bar-h: clamp(4px, .2vw + 3px, 6px);
  --bar-gap: clamp(9px, .4vw + 8px, 14px);
  --bar-c: var(--gh-main);
  position: relative;
  flex: none;
  width: var(--bar-w);
  height: calc(var(--bar-gap) * 2 + var(--bar-h) + clamp(16px, .4vw + 14px, 20px));
  margin-left: clamp(16px, 3vw, 52px);
  cursor: pointer;
}
.gh_btn span,
.gh_btn span::before,
.gh_btn span::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bar-h);
  border-radius: var(--bar-h);
  background: var(--bar-c);
  transition: transform .5s, background-color .25s;
}
.gh_btn span { top: var(--bar-gap); }
.gh_btn span::before,
.gh_btn span::after { content: ""; }
.gh_btn span::before { top: calc(var(--bar-gap) * -1); }
.gh_btn span::after { top: var(--bar-gap); }
.gh_btn i {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: var(--bar-c);
  font-family: var(--ff-num);
  font-size: clamp(9px, .2vw + 8px, 12px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-align: center;
  transition: color .25s;
}
.gh_toggle:checked ~ .gh_btn { --bar-c: #fff; }
.gh_toggle:checked ~ .gh_btn span { background: transparent; }
.gh_toggle:checked ~ .gh_btn span::before { transform: translateY(var(--bar-gap)) rotate(45deg); }
.gh_toggle:checked ~ .gh_btn span::after { transform: translateY(calc(var(--bar-gap) * -1)) rotate(-45deg); }

/* メニューを開いたとき：ヘッダはメニューと同じオレンジになり、ロゴ・ナビ・ボタンが白に反転（旧サイトの演出） */
.gh { transition: background-color .3s, border-color .3s; }
.gh_logo a,
.gh_nav a { transition: color .25s; }
.gh:has(.gh_toggle:checked) { background-color: var(--gh-main); border-bottom-color: var(--gh-main); }
.gh:has(.gh_toggle:checked) .gh_logo a,
.gh:has(.gh_toggle:checked) .gh_nav a { color: #fff; transition-duration: .75s; }

/* メニュー本体：画面上部から下りてくるオレンジの帯（ヘッダの裏まで覆う）。下の画面には暗い幕 */
.gh_shade {
  position: fixed;
  z-index: -2;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease-in-out;
}
.gh_drawer {
  position: fixed;
  z-index: -1;  /* .gh の重なりの中で、ヘッダの背景より上・ロゴやボタンより下 */
  top: 0;
  left: 0;
  right: 0;
  max-height: 100dvh;
  padding: calc(var(--gh-h) + clamp(24px, 3vw, 48px)) var(--gutter) clamp(32px, 4vw, 64px);
  overflow-y: auto;
  background: var(--gh-main);
  color: #fff;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .3s ease-in, visibility 0s .3s;
}
.gh_toggle:checked ~ .gh_shade { opacity: 1; pointer-events: auto; }
.gh_toggle:checked ~ .gh_drawer { transform: none; visibility: visible; transition: transform .4s ease-out, visibility 0s; }
.gh_drawer_inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6em clamp(16px, 2.4vw, 40px);
  width: min(100%, 1100px);
  margin-inline: auto;
}
.gh_drawer dt {
  margin: 0 0 .6em 1em;
  color: var(--gh-hl);
  font-size: var(--fs-s);
  letter-spacing: .1em;
  line-height: 1.8;
}
.gh_drawer dd + dd { margin-top: .6em; }
/* 項目：旧サイトと同じ白枠の丸いボタン＋アイコン。ホバーで白地・オレンジ文字に。
   アイコン（矢印・封筒・受話器）は SVG を型抜き（mask）に使い、文字と同じ色（currentColor）で塗る。
   どれも幅 1.6em の枠に収めるので、文字の書き出しが揃う */
.gh_drawer dd a {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em 1em .55em 1.1em;
  border: 1px solid #fff;
  border-radius: 2em;
  color: #fff;
  font-size: var(--fs-s);
  font-weight: bold;
  letter-spacing: .06em;
  line-height: 1.4;
  white-space: nowrap;
  transition: color .25s ease-in, background-color .25s ease-in;
}
.gh_drawer dd a::before {
  --ico: url(../img/ico/ico_arr2_white.svg);
  content: "";
  flex: none;
  width: 1.6em;
  height: .55em;
  background-color: currentColor;
  -webkit-mask: var(--ico) 50% 50% / contain no-repeat;
  mask: var(--ico) 50% 50% / contain no-repeat;
}
.gh_drawer dd a.is-mail::before { --ico: url(../img/ico/ico_mail_white.svg); height: 1em; }
/* 受話器はお問合せ欄と同じ形。縦長の細い絵柄なので、封筒と見た目の重さが揃うよう高めに */
.gh_drawer dd a.gh_drawer_tel { font-family: var(--ff-num); letter-spacing: .04em; }
.gh_drawer dd a.gh_drawer_tel::before { --ico: url(../img/ico/ico_tel_white.svg); height: 1.45em; }

/* ---------------------------------------------------------------------
   画面左下に浮かぶ電話ボタン（header2026.tmpl）
   旧サイトの電話の帯と同じ中身。画面下端に貼り付けず、四隅が丸いボタンとして浮かせる
   （下にメニューバーがあるモバイルブラウザでも不自然にならないように）。
   寸法は font-size を基準にした em で持ち、画面幅ごとに font-size だけを変えて縮める
--------------------------------------------------------------------- */
.fl_tel {
  position: fixed;
  z-index: 900;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  display: flex;
  align-items: center;
  padding: 1.3em 2.2em 1.3em 2em;
  border: 2px solid #fff;  /* オレンジの面の上でも輪郭が分かるように */
  border-radius: 1em;
  background: var(--gh-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 11.25px;  /* PC（タブレットとSPは末尾のメディアクエリで縮める） */
  white-space: nowrap;
  transition: transform .3s, background-color .3s, opacity .3s;
}
.fl_tel_label { font-size: 2em; line-height: 1; }
.fl_tel_label small { display: block; margin-top: .125em; font-size: .8em; line-height: 1.25; }
.fl_tel_num {
  margin-left: .4em;
  padding-left: .8em;
  background: url(../img/ico/ico_tel_white.svg) 0 50% / auto 1.1em no-repeat;
  font-family: var(--ff-num);
  font-size: 3.4em;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}

/* メニューを開いている間は電話ボタンを隠す */
.gh:has(.gh_toggle:checked) ~ .fl_tel { opacity: 0; pointer-events: none; }

/* メニュー内の改行指定（fc2026.css を読まない既存ページでも効くように、ここでも持つ） */
.gh_drawer br.br-sp { display: none; }

/* =====================================================================
   メディアクエリ
   ===================================================================== */

/* ---- ホバー（マウス環境のみ） ---- */
@media (hover: hover) {
  /* ヘッダ：閉じている時はオレンジ系の中で色を入れ替え、メニューを開いて白の時は淡い黄色に（旧サイトと同じ考え方） */
  .gh_logo a:hover { color: var(--gh-logo-hover); }
  .gh_nav a:hover { color: var(--gh-accent); }
  .gh_btn:hover { --bar-c: var(--gh-accent); }
  .gh_line:hover, .gh_instagram:hover { opacity: .7; }
  .fl_tel:hover { transform: translateY(-4px); background-color: var(--gh-accent); }
  .gh:has(.gh_toggle:checked) .gh_logo a:hover,
  .gh:has(.gh_toggle:checked) .gh_nav a:hover,
  .gh_toggle:checked ~ .gh_btn:hover { --bar-c: var(--gh-hl); color: var(--gh-hl); transition-duration: .25s; }
  .gh_drawer dd a:hover { background-color: #fff; color: var(--gh-main); }  /* アイコンも文字と同じ色に変わる */
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  .fl_tel { font-size: 9px; }

  .gh_nav { font-size: .8rem; }
  /* メニュー：2列（3つ目のまとまりは2列目の下へ） */
  .gh_drawer_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- スマートフォン ---- */
@media (max-width: 767px) {
  /* 電話ボタン：小さくし、左下の余白も詰める */
  /* ボタンの幅は約 43.5em。狭い画面では左右 12px の余白に収まる大きさまで縮める */
  .fl_tel { bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; font-size: min(7.5px, (100vw - 24px) / 43.5); }

  /* メニュー：iPhone SE の Safari（表示域 約550px）にも収まるよう、まとまりごとに2列の小さなボタンにする。
     長い項目はボタン内で2行に折り返す。矢印は省き、文字を中央に（メール・電話のアイコンは文字の前に残す） */
  .gh_drawer { padding: calc(var(--gh-h) + 8px) 16px 12px; }
  .gh_drawer_inner { grid-template-columns: 1fr; gap: 10px; }
  .gh_drawer dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .gh_drawer dt { grid-column: 1 / -1; margin: 0 0 0 .5em; font-size: 14px; }
  .gh_drawer dd + dd { margin-top: 0; }
  .gh_drawer dd a {
    justify-content: center;
    min-height: 36px;
    padding: .25em .6em;
    font-size: 13px;
    letter-spacing: .02em;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .gh_drawer dd a.is-mail,
  .gh_drawer dd a.gh_drawer_tel { gap: .35em; padding-inline: .4em; }
  .gh_drawer dd a::before { display: none; }  /* 矢印は省く */
  .gh_drawer dd a.is-mail::before,
  .gh_drawer dd a.gh_drawer_tel::before { display: block; width: 1.2em; }

  .gh_drawer br.br-sp { display: inline; }

  /* ヘッダ：テキストナビを隠し、LINE とメニューのみ */
  .gh_nav { display: none; }
  .gh_line { margin-left: .75em; }
  .gh_instagram { margin-left: auto; }
}