@charset "UTF-8";
/* ==========================================================================
   common.css — 全ページ共通スタイル
   1. 変数
   2. リセット / ベース
   3. レイアウト共通パーツ
   4. ヘッダー
   5. フッター
   ========================================================================== */

/* ==========================================================================
   1. 変数
   ========================================================================== */
:root {
  /* カラー */
  --navy:        #185488;  /* ヘッダーの紺 */
  --navy-dark:   #123f68;
  --navy-footer: #005691;  /* フッターの紺 */
  --navy-light:  #005691;  /* 無料体験セクション */
  --edu-blue:    #2d73a4;  /* 教育部門セクション・ページトップボタン */
  --edu-blue-hover: #3a83b4;  /* ページトップボタン（マウスを乗せたとき） */
  --blue-text:   #1d69ad;  /* 見出しの青 */
  --blue-deep:   #005691;  /* トップのリード文の文字色 */
  --ribbon:      #2a61b3;  /* リボン型小見出しの青 */

  /* ファイル種別アイコンの色 */
  --doc-pdf:     #c8352b;
  --doc-word:    #2b579a;
  --doc-excel:   #217346;

  /* 新着情報のカテゴリーラベル */
  --tag-class-bg:   #fdf6ca;
  --tag-class-text: #7a6000;
  --tag-info-bg:    #e7f1fa;
  --tag-info-text:  #1d5989;
  --pale-blue:   #e9f8fb;  /* 薄い水色背景 */
  --pale-blue-2: #e4eff3;
  --pill-blue:   #ddf7ff;  /* ラベル（ピル）の背景 */
  --yellow:      #faf700;
  --yellow-soft: #ffeb3b;  /* くすんだ黄（現在は未使用） */
  --yellow-dark: #ece900;
  --green:       #8fc31f;
  --accent-bar:  #4c6221;  /* 事業リストの縦棒 */
  --text:        #333333;
  --text-light:  #666666;
  --white:       #ffffff;
  --line:        #d8e2ea;

  /* レイアウト */
  --container:   1000px;
  --container-narrow: 820px;
  --header-h:    64px;

  /* フォント */
  --font-base: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
               "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium",
               YuGothic, "游ゴシック体", Meiryo, sans-serif;
}

/* ==========================================================================
   2. リセット / ベース
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* 全体の文字サイズの基準です。
   このサイトの font-size はほぼ rem 指定なので、ここを変えると
   全ページの文字が一律で大きく／小さくなります。
   （2026/09/08：読みやすさのため 16px → 17px に変更） */
html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1rem;   /* ＝html の font-size（17px） */
  line-height: 1.9;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, p, dl, dd, figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}

a:hover { opacity: .75; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ==========================================================================
   3. レイアウト共通パーツ
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--narrow { max-width: var(--container-narrow); }

/* --- 文中の一部を「かたまり」として扱う ---------------------------------
   囲んだ部分が途中で改行されず、幅が足りないときだけ
   まとまったまま次の行へ送られます。
   （　）付きの補足や、切りたくない語句に使ってください。
     例：入力<span class="wrap-unit">（希望日・ご連絡先）</span>
   ※長い文章に使うと、はみ出す原因になるので短い語句だけに使います。
   --------------------------------------------------------------------- */
.wrap-unit { display: inline-block; }

/* --- 画面には出さず、検索エンジンと音声読み上げにだけ伝える --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section { padding-block: 64px; }
.section--tight { padding-block: 44px; }

/* --- セクション見出し（中央・紺文字） --- */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-text);
  text-align: center;
  letter-spacing: .06em;
  margin-bottom: 32px;
}

/* --- リボン型の小見出し（サブページで使用） ------------------------------
   本体（テキスト部分）＋ ::after（右側の切り込みが入った帯）の2ピース構成。
   ::after は本体の外側（left:100%）に置き、背景色を本体と揃えたうえで
   clip-path でリボン状に切り抜いています。
   ※ ::after を本体の内側（flexアイテム）に置くと、切り抜いた部分から
     本体の背景色が見えてしまうため、外側に出しています。
   --------------------------------------------------------------------- */
.ribbon-title {
  --ribbon-h: 30px;      /* リボンの高さ */
  --ribbon-tail: 26px;   /* 右側の帯の長さ */

  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  min-height: var(--ribbon-h);
  margin-right: var(--ribbon-tail);
  padding: 3px 10px 3px 16px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--white);
  background: var(--ribbon);
  border-radius: 6px 0 0 6px;   /* 左上・左下だけ角丸 */
}

.ribbon-title::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  /* 本体との継ぎ目にサブピクセルの隙間が出るのを防ぐため 1px だけ重ねます
     （left: 99.5% でも同じ効果ですが、リボンの幅に左右されない calc を使用） */
  left: calc(100% - 1px);
  width: var(--ribbon-tail);
  background: var(--ribbon);
  clip-path: polygon(0 0, 100% 0, 48% 50%, 100% 100%, 0 100%);
}

/* --- 画像キャプション（写真の上に重ねる） --- */
.figure-band {
  position: relative;
  overflow: hidden;
}

.figure-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure-band__caption {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 16px;
  max-width: calc(100% - 40px);
  padding: 4px 14px;
  font-size: .82rem;
  color: var(--white);
  background: rgba(0, 0, 0, .38);
}

.figure-band__caption--left {
  right: auto;
  left: 20px;
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 360px;
  padding: 16px 32px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  text-align: center;
}

.btn--yellow {
  color: var(--navy-dark);
  background: var(--yellow);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.btn--yellow:hover { background: var(--yellow-dark); opacity: 1; }

/* --- 丸い黄色ボタン（無料体験の申込み） --- */
.btn--pill {
  min-width: 0;
  gap: 28px;
  padding: 20px 52px;
  font-size: 1.7rem;
  letter-spacing: .06em;
  color: var(--navy-dark);
  background: var(--yellow);
  border-radius: 999px;
}

.btn--pill:hover { background: var(--yellow-dark); opacity: 1; }

.btn__arrow { font-size: 1.15em; font-weight: 700; line-height: 1; }

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */
.site-header {
  background: var(--navy);
  color: var(--white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  min-height: var(--header-h);
  margin-inline: auto;
  padding: 10px 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;   /* 「一般社団法人」を法人名と上下中央でそろえます */
  gap: 10px;
  line-height: 1.4;
}

.site-header__logo-sub  { font-size: .8rem; font-weight: 600; letter-spacing: .05em; }
.site-header__logo-main { font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .82rem;
  font-weight: 600;
}

.site-header__nav li + li::before {
  content: "｜";
  margin-right: 14px;
  opacity: .6;
}

.site-header__nav a.is-current { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   5. フッター
   ========================================================================== */
.site-footer {
  background: var(--navy-footer);
  color: var(--white);
  padding-block: 32px 20px;
}

.site-footer__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.site-footer__logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* 「一般社団法人」を法人名と上下中央でそろえます */
  gap: 0 10px;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* 法人名は途中で改行させない */
.site-footer__logo-sub,
.site-footer__logo-main,
.site-header__logo-sub,
.site-header__logo-main { white-space: nowrap; }

.site-footer__logo-sub  { font-size: .8rem; font-weight: 600; }
.site-footer__logo-main { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; }

.site-footer__dl {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 2px 12px;
  font-size: .82rem;
  line-height: 1.9;
}

.site-footer__dl dt { font-weight: 400; letter-spacing: .1em; }

.site-footer__nav {
  padding-top: 6px;
  font-size: .84rem;
}

.site-footer__nav li + li { margin-top: 6px; }
.site-footer__nav a { text-decoration: underline; text-underline-offset: 3px; }

/* --- ページトップへ戻る（画面右下に固定 / スクロールで下から出現） --- */
.pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;

  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--white);
  background: var(--edu-blue);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);

  /* 初期状態は画面外（下）に隠しておく */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  transition: transform .35s ease, opacity .35s ease, visibility .35s,
              background-color .2s ease;
}

/* スクロールで表示（JS が is-visible を付与） */
.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pagetop:hover { background: var(--edu-blue-hover); opacity: 1; }
.pagetop svg   { width: 26px; height: 26px; }

/* アニメーションを減らす設定の場合 */
@media (prefers-reduced-motion: reduce) {
  .pagetop { transition: opacity .2s ease, visibility .2s; transform: none; }
  .pagetop.is-visible { transform: none; }
}

.site-footer__copyright {
  max-width: var(--container);
  margin: 26px auto 0;
  padding-inline: 24px;
  font-size: .72rem;
  text-align: center;
  opacity: .9;
}

/* ==========================================================================
   6. レスポンシブ
   ========================================================================== */
@media (max-width: 900px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer__inner { flex-wrap: wrap; gap: 24px; }
}

@media (max-width: 640px) {
  /* スマホでも1段上げています（15px → 16px） */
  html { font-size: 16px; }

  .container { padding-inline: 18px; }
  .section   { padding-block: 44px; }

  .site-header__logo      { flex-direction: column; gap: 0; align-items: flex-start; }
  .site-header__logo-main { font-size: 1.1rem; }
  /* ヘッダーの項目を増やしてスマホ幅で2行に折り返すようになった場合は、
     折り返した行の先頭に「｜」が残ってしまいます。
     そのときは下の2行を
        .site-header__nav ul { flex-wrap: wrap; gap: 6px 18px; }
        .site-header__nav li + li::before { content: none; }
     に置き換えて、「｜」を出さず間隔だけで区切ってください。 */
  .site-header__nav ul    { flex-wrap: wrap; gap: 10px; }
  .site-header__nav li + li::before { margin-right: 10px; }

  .section-title { font-size: 1.25rem; }

  .btn { min-width: 0; width: 100%; gap: 12px; padding: 14px 20px; }

  /* デザイン案どおり、ラベルと内容は横並びのまま（幅が足りないときだけ縦積み） */
  .site-footer__dl { grid-template-columns: 6.4em 1fr; gap: 4px 10px; }
  .pagetop { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .pagetop svg { width: 22px; height: 22px; }
}

/* 幅が足りない端末ではフッターのラベルを内容の上に置きます */
@media (max-width: 420px) {
  .site-footer__dl { grid-template-columns: 1fr; gap: 0; }
  .site-footer__dl dt { margin-top: 8px; font-weight: 700; }
}