@charset "UTF-8";
/* ============================================================
   キャリアデザインスクール シゴトの学び舎 / 条文系ページ共通CSS
   coaching/kiyaku.html(サービス利用規約・サービス細則)、
   coaching/tokushoho.html(特定商取引法に基づく表記・v81後半で追加)が共有する。
   配色体系はcoaching/index.htmlと共通(決定記録v51確定・5色)だが、
   条文中心の読みやすさを優先し、レイアウトは条文系ページ専用に設計する。
   作成:2026-08-20/更新:2026-08-21(特定商取引法ページへの共用化)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

:root{
  /* 配色体系(coaching/index.css :root と同一値。トークンの一元管理が課題として残る) */
  --navy:#003461;
  --yellow:#f1e577;
  --brass:#8c6f3e;
  --white:#ffffff;
  --jade:#3da183;
  --jade-10:#eaf5f1;

  --ink:#1a1a1a;
  --gray-1:#333;
  --gray-2:#555;
  --gray-3:#888;
  --gray-4:#bbb;
  --gray-5:#ddd;
  --gray-6:#eee;
  --gray-7:#f6f6f6;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--navy); }

/* ============================================================
   サイト共通ヘッダー(index.html css/index.cssと同一定義・v78確定分を展開)
   ============================================================ */
header.site-header{ background:var(--white); border-bottom:1px solid var(--gray-6); }
.site-header-inner{
  max-width:1080px; margin:0 auto; padding:16px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
/* ヘッダーロゴ+タグライン(横並び・決定記録v91確定。index.css .site-logoと同一定義) */
.site-logo{
  display:flex; flex-direction:row; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.site-logo-img{ display:block; height:29px; width:auto; }
.site-logo-sub{ font-size:11px; letter-spacing:.13em; color:var(--brass); font-weight:500; white-space:nowrap; }
/* .site-logo-main は決定記録v91でlogo.png画像に置き換えられ、現在未使用(要:将来クリーンアップ候補) */
.site-logo-main{
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:15px; font-weight:700; color:var(--navy);
}
.site-header-cta{
  flex-shrink:0; display:inline-block; background:var(--navy); color:#fff; padding:10px 22px;
  border-radius:999px; font-size:12px; font-weight:500; letter-spacing:.03em; text-decoration:none; white-space:nowrap;
}
.site-header-cta:hover{ opacity:.88; color:#fff; }

/* ---- ページヘッダー(サイト共通ヘッダーではなく本ページ専用の簡易ヘッダー。
       ECBM本体・coaching/共通ヘッダーの仕様が確定次第、差し替えを検討) ---- */
.kiyaku-pageheader{
  background:var(--navy); color:#fff;
  padding:26px 24px;
}
.kiyaku-pageheader .inner{ max-width:760px; margin:0 auto; }
.kiyaku-back{
  display:inline-block; font-size:12px; color:#cfe0ec; text-decoration:none; margin-bottom:14px;
}
.kiyaku-back:hover{ color:#fff; }
.kiyaku-pageheader h1{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:20px; font-weight:700; margin:0 0 6px 0; letter-spacing:.02em;
}
.kiyaku-pageheader .sub{ font-size:12px; color:#cfe0ec; margin:0; }

.kiyaku-main{ max-width:760px; margin:0 auto; padding:32px 24px 90px 24px; }

/* ---- 表形式の項目(特定商取引法に基づく表記・店舗名/販売業者名等) ---- */
.tokushoho-table{
  width:100%; border-collapse:collapse; margin:0 0 40px 0; font-size:13.5px;
}
.tokushoho-table th, .tokushoho-table td{
  border:1px solid var(--gray-5); padding:12px 16px; text-align:left; vertical-align:top;
}
.tokushoho-table th{
  width:160px; background:var(--gray-7); color:var(--ink); font-weight:700; font-size:13px;
}
.tokushoho-table td{ color:var(--ink); }
.tokushoho-table a{ word-break:break-all; }

/* ---- 前書き ---- */
.kiyaku-lead{
  font-size:13px; color:var(--gray-2); border-left:3px solid var(--brass);
  padding:16px 20px; margin:0 0 40px 0; background:var(--gray-7);
}

/* ---- 目次(ジャンプナビゲーション) ---- */
.kiyaku-toc{
  border:1px solid var(--gray-5); border-top:3px solid var(--brass);
  padding:22px 24px 26px 24px; margin:0 0 48px 0;
}
.kiyaku-toc h2{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:13px; font-weight:700; color:var(--brass); letter-spacing:.08em;
  margin:0 0 16px 0;
}
.kiyaku-toc-block + .kiyaku-toc-block{ margin-top:20px; }
.kiyaku-toc-block h3{
  font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 10px 0;
}
.kiyaku-toc-block h4{
  font-size:11px; font-weight:700; color:var(--gray-2); margin:14px 0 8px 0;
}
.kiyaku-toc-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 18px;
}
.kiyaku-toc-list li{ font-size:12px; }
.kiyaku-toc-list a{ text-decoration:none; color:var(--gray-1); }
.kiyaku-toc-list a:hover{ color:var(--navy); text-decoration:underline; }

/* ---- 文書ブロック(利用規約/細則) ---- */
.kiyaku-doc{ margin-bottom:64px; scroll-margin-top:16px; }
.kiyaku-doc-title{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:19px; font-weight:700; color:var(--navy);
  border-bottom:2px solid var(--navy); padding-bottom:10px; margin:0 0 22px 0;
}
.kiyaku-doc-intro{ font-size:13px; color:var(--gray-2); margin:0 0 30px 0; }

/* 細則の大区分(１　用語の定義 / ２　パーソナルコーチング / ３　講座・セミナー) */
.kiyaku-part{ margin:0 0 38px 0; scroll-margin-top:16px; }
.kiyaku-part-title{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:15px; font-weight:700; color:#fff; background:var(--navy);
  padding:9px 16px; margin:0 0 20px 0;
}

/* 条 */
.kiyaku-article{ margin:0 0 26px 0; scroll-margin-top:16px; }
.kiyaku-article-title{
  font-size:14.5px; font-weight:700; color:var(--ink);
  border-left:4px solid var(--navy); padding:2px 0 2px 12px; margin:0 0 12px 0;
}
.kiyaku-article-plain{ font-size:13.5px; color:var(--ink); margin:0; }

/* 項(番号付き)・号(入れ子番号付き) */
.kiyaku-items{ list-style:none; counter-reset:kiyaku-item; margin:0; padding:0; }
.kiyaku-items > li{
  counter-increment:kiyaku-item;
  font-size:13.5px; color:var(--ink); margin:0 0 12px 0; padding-left:28px; position:relative;
}
.kiyaku-items > li::before{
  content:counter(kiyaku-item)".";
  position:absolute; left:0; top:0; color:var(--brass); font-weight:700; font-size:12.5px;
}
.kiyaku-subitems{ list-style:none; counter-reset:kiyaku-subitem; margin:10px 0 0 0; padding:0; }
.kiyaku-subitems > li{
  counter-increment:kiyaku-subitem;
  font-size:13px; color:var(--gray-1); margin:0 0 8px 0; padding-left:26px; position:relative;
}
.kiyaku-subitems > li::before{
  content:"("counter(kiyaku-subitem)")";
  position:absolute; left:0; top:0; color:var(--gray-3); font-size:12px;
}

/* 付則 */
.kiyaku-supplementary{
  font-size:12.5px; color:var(--gray-2); border-top:1px solid var(--gray-5); padding-top:16px; margin-top:8px;
}
.kiyaku-supplementary p{ margin:0 0 4px 0; }

/* トップに戻る */
.kiyaku-totop{
  display:inline-block; font-size:11.5px; color:var(--gray-3); text-decoration:none; margin-top:6px;
}
.kiyaku-totop:hover{ color:var(--navy); }

/* ============================================================
   フッター(index.html css/index.cssと同一定義・4列構成は決定記録v86確定・展開)
   ============================================================ */
/* 決定記録v104確定:本文の1.9(法的文書向け)とは別に、フッター内はindex.css側の
   値(1.7)に揃える(index.htmlとの行間統一)。当初は.footer-columns(4カラム部分)
   のみへの適用だったが、.footer-meta(受付時間・定休日の紺色帯)・.copyright
   (コピーライト表記)は.footer-columnsの外側にあるため、この上書きが及ばず、
   本文由来のline-height:1.9をそのまま引き継いでいた。結果、.footer-hours・
   .copyrightの行の高さがindex.htmlと食い違う(2026年9月の運営者指摘・v109時点)
   状態が残っていたため、適用範囲をfooter要素全体に広げ、フッター内のどの部分も
   ページ間で行間が食い違わないようにした。 */
footer{ background:var(--white); border-top:2px solid var(--navy); line-height:1.7; }
/* 要確認(決定記録v89で調査・修正):このフッター(section-inner)のmax-widthは、
   本文ラッパー.kiyaku-main(760px)に合わせて760pxに設定されていたため、footer要素
   自体は本文と同じ独立したブロック(フッター背景は全幅)であるにもかかわらず、
   フッター内側のコンテンツ幅がindex.html(1080px)より狭く見えていた。原因は
   ラッパー構造の入れ子ではなく、max-widthの値の不一致だったため、index.cssの
   footer .section-innerと同じ値に統一する。 */
footer .section-inner{ max-width:1080px; margin:0 auto; padding:48px 32px 34px 32px; }

/* フッターロゴ(決定記録v89確定・B案。クリックでindex.htmlへ遷移する通常のリンク) */
.footer-brand{ margin:0 0 28px 0; }
.footer-logo{ display:block; height:40px; width:auto; }

.footer-columns{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-bottom:28px; margin-bottom:20px; border-bottom:1px solid var(--gray-5);
  /* line-height:1.7は、上記footer要素側の指定に統合済み(v109)。ここでの
     個別指定は不要なため削除した。 */
}
.footer-col{ padding:0 16px; }
.footer-col:first-child{ padding-left:0; }
.footer-col + .footer-col{ border-left:1px solid var(--gray-5); }

.footer-col-label{
  font-size:11.5px; letter-spacing:.16em; color:var(--brass); font-weight:600;
  margin:0 0 12px 0;
}
.footer-col-list{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
/* フッターリンクのホバー時、下線は表示しない(運営者指定・index.cssと同じ対応)。
   以前は下線を透明の状態で常駐させ、ホバー時のみ色を付けて可視化する実装だった
   ため、意図せずホバー時に下線が表示されていた。border-bottom自体を廃し、文字色の
   変化のみでホバーを表現する。 */
.footer-col-list a{
  font-size:11px; letter-spacing:-.005em; color:var(--gray-1); text-decoration:none;
  width:fit-content;
  transition:color .15s ease;
}
.footer-col-list a:hover{ color:var(--navy); }
.footer-col-list a.line-badge{
  display:inline-flex; align-items:center; border:1px solid var(--navy); border-bottom:1px solid var(--navy);
  color:var(--navy); font-weight:500; padding:8px 14px;
}
.footer-col-list a.line-badge:hover{ background:var(--navy); color:#fff; }
.footer-current{ font-size:11px; letter-spacing:-.005em; color:var(--gray-4); text-decoration:none; }

.footer-operator{ font-size:10.5px; color:var(--gray-2); margin:12px 0 0 0; }
/* 下線を廃し(上記.footer-col-list aと同じ理由・index.cssと同じ対応)、ホバー
   表現はサイト内の紺色要素と共通の慣習(opacity低下)に合わせた。 */
.footer-operator a{
  color:var(--navy); text-decoration:none;
  transition:opacity .15s ease;
}
.footer-operator a:hover{ opacity:.7; }

/* フッター下部:ロゴ+受付時間+定休日の統合行(決定記録v100〜v103確定)。
   4カラムフッターの3ページ(index.html・kiyaku.html・tokushoho.html)、および
   privacy-policy.htmlに適用する。3カラムフッターのサンクスページには適用しない。
   紺色の帯(白文字・v101)に、受付時間・定休日を1本のテキストとして
   1行に統合(v102)。モバイル幅では、テキスト中の区切り位置に強制改行を
   入れ、2行表示に戻す(v103・.footer-hours-break)。 */
.footer-meta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:14px 28px; background:var(--navy); padding:16px 20px;
}
.footer-meta-logo{ display:block; flex-shrink:0; }
.footer-meta .footer-logo{ height:28px; }
.footer-hours{ font-size:10px; color:var(--white); margin:0; flex-shrink:0; white-space:nowrap; }
.footer-hours-break{ display:none; }

.copyright{ font-size:9.5px; color:var(--gray-2); text-align:right; padding:0; margin:0; }

/* フッターの「つながる」列(LINEリンク)を非表示にする修飾クラス(決定記録v88確定)。
   サンクスページ2件のみに適用し、4列→3列相当のバランスに調整する。
   index.html・kiyaku.html・tokushoho.htmlのフッター(4列)には適用しない。 */
footer.footer-noline .footer-columns{ grid-template-columns:repeat(3,1fr); }

/* ============================================================
   フローティング「ページ先頭へ戻る」ボタン(kiyaku.html・tokushoho.html・決定記録v91確定)
   index.css .totop-floatと同一定義。これらのページには#heroがないため、判定は
   各ページ側のJS(スクロール量400px)で行う。
   ============================================================ */
.totop-float{
  position:fixed; right:24px; bottom:24px; z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.totop-float img{ display:block; width:56px; height:56px; }
.totop-float.is-visible{ opacity:1; pointer-events:auto; }
.totop-float:hover{ opacity:.85; }

@media (max-width:640px){
  .kiyaku-toc-list{ grid-template-columns:1fr; }
  body{ font-size:14px; }

  .site-header-inner{ padding:12px 22px; gap:12px; }
  /* タグライン文字数増(v91:19→24文字)により、狭幅ではCTAボタンと衝突するため、
     ロゴ側を可変縮小可能にしたうえでタグラインを省略記号で切り詰める。 */
  .site-logo{ min-width:0; overflow:hidden; }
  .site-logo-img{ height:19px; flex-shrink:0; }
  .site-logo-sub{ font-size:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .site-header-cta{ padding:8px 16px; font-size:11px; flex-shrink:0; }

  .totop-float{ right:16px; bottom:16px; }
  .totop-float img{ width:46px; height:46px; }

  .tokushoho-table, .tokushoho-table tbody, .tokushoho-table tr,
  .tokushoho-table th, .tokushoho-table td{ display:block; width:auto; }
  .tokushoho-table th{ border-bottom:none; padding-bottom:4px; }
  .tokushoho-table td{ border-top:none; padding-top:0; margin-bottom:4px; }

  .footer-logo{ height:32px; }
  .footer-columns{ grid-template-columns:1fr; gap:24px; }
  .footer-col{ padding:0 !important; border-left:none !important; }
  .footer-meta{ flex-direction:column; align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .footer-hours{ white-space:normal; }
  .footer-hours-break{ display:block; }
  .copyright{ text-align:left; margin-top:22px; }
}

/* ============================================================
   サンクスページ(体験・初回共通・決定記録v86新規)
   thanks-trial.html/thanks-first.htmlが共有する、予約・申込み完了後の
   簡易な案内ページ用スタイル。条文系ページの配色・書体トークンを流用する。
   ============================================================ */
.thanks-main{ max-width:560px; margin:0 auto; padding:90px 24px 120px 24px; }
.thanks-inner{ text-align:center; }
.thanks-heading{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:22px; font-weight:700; color:var(--navy); margin:0 0 24px 0;
}
.thanks-body{ font-size:14px; color:var(--ink); line-height:1.9; margin:0 0 40px 0; text-align:left; }

.thanks-line{
  border:1px solid var(--gray-5); background:var(--gray-7);
  padding:22px 24px; margin:0 0 32px 0;
}
.thanks-line-text{ font-size:12px; color:var(--gray-2); margin:0 0 12px 0; }
.thanks-line-link{ font-size:12.5px; color:var(--navy); text-decoration:underline; }
.thanks-line-link:hover{ text-decoration:none; }

.thanks-contact{ font-size:12.5px; color:var(--gray-2); margin:0 0 40px 0; }
.thanks-contact a{ color:var(--navy); text-decoration:underline; }
.thanks-contact a:hover{ text-decoration:none; }

@media (max-width:640px){
  .thanks-main{ padding:60px 22px 90px 22px; }
  .thanks-heading{ font-size:19px; }
}