/* =========================================================
   大人ページ専用 CSS（otona.css）
   - このファイルは大人ページだけで読み込む
   - レイアウト／配色／ナビ開閉（CSS側）を完結
   - JS は js/otona.js（開閉ロジック＋Heroの軽フェード）
========================================================= */

/* ---------------------------
   0) 基本トークン（カラー/影/余白）
--------------------------- */
:root{
  --bg: #f1e2be;      /* ページ背景（アイボリー） */
  --ink:#222;         /* 本文色 */
  --muted:#5b5b5b;    /* 補助テキスト */
  --ogreen:#86B34C;    /* アクセントの緑 */
  --border:#e2dfd6;   /* セクション区切り */
  --shadow: 0 10px 24px rgba(0,0,0,.06);
  --container: 1100px;
}

/* ---------------------------
   1) ベース（背景/タイポ/コンテナ）
--------------------------- */
html, body{
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  line-height: 1.7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* アクセシビリティ補助（視覚非表示） */
.vh{
  position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;
}


/* 調整つまみ */
:root{
  --otona-bar-w: 30px;   /* ← 線の長さ（ここを大きくすると長くなる） */
  --otona-bar-h: 2px;    /* ← 線の太さ */
  --otona-bar-gap: 6px;  /* ← 線どうしの隙間 */
  --otona-bar-radius: 2px;
  --otona-hit: 44px;     /* ← 触りやすいボタン最小サイズ */
}


/*==========================
2ハンバーガーメニュー
==========================*/



/* ボタン本体 */
.otona-nav__toggle{
  inline-size: var(--otona-hit);
  block-size: var(--otona-hit);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}

/* 3本線のラッパー（中央に固定） */
.otona-nav__toggle > .otona-nav__toggle-bar{
  position: relative;
  inline-size: var(--otona-bar-w);
  block-size: var(--otona-bar-h);
  border-radius: var(--otona-bar-radius);
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
  will-change: transform, opacity;
}
.otona-nav__toggle > .otona-nav__toggle-bar::before,
.otona-nav__toggle > .otona-nav__toggle-bar::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--otona-bar-w);   /* ★ 3本とも同じ“長さ”を保証 */
  block-size: var(--otona-bar-h);
  border-radius: var(--otona-bar-radius);
  background: currentColor;
  transition: inherit;
}
.otona-nav__toggle > .otona-nav__toggle-bar::before{
  transform: translateY(calc(-1 * (var(--otona-bar-gap) + var(--otona-bar-h))));
}
.otona-nav__toggle > .otona-nav__toggle-bar::after{
  transform: translateY(calc(var(--otona-bar-gap) + var(--otona-bar-h)));
}

/* 開閉時のX化。1本目=::before、真ん中=本体、3本目=::after */
.otona-nav__toggle[aria-expanded="true"] > .otona-nav__toggle-bar{
  background: transparent;       /* 真ん中の線は消す */
}
.otona-nav__toggle[aria-expanded="true"] > .otona-nav__toggle-bar::before{
  transform:
    translateY(0)
    rotate(45deg);
}
.otona-nav__toggle[aria-expanded="true"] > .otona-nav__toggle-bar::after{
  transform:
    translateY(0)
    rotate(-45deg);
}

/* 視認性 & モーション控えめ環境 */
@media (prefers-reduced-motion: reduce){
  .otona-nav__toggle > .otona-nav__toggle-bar,
  .otona-nav__toggle > .otona-nav__toggle-bar::before,
  .otona-nav__toggle > .otona-nav__toggle-bar::after{
    transition: none;
  }
}

/* 位置と見た目 */
.otona-header{ position: relative; z-index: 10; }
.otona-drawer{
  position: absolute;
  inset: calc(100% + 4px) 0 auto 0; /* ヘッダーの下にピタッ */
  background: #f7edcf;             /* 好きな色に */
  border: 1px solid #d9cfae;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;             /* 閉じてる間はクリック不可 */
}

/* リストの体裁 */
.otona-drawer__list{
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: grid;
  gap: 12px;
}
.otona-drawer a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #0b0b0b;
  font-weight: 700;
}

/* ボタンで開いたとき */
.otona-nav__toggle[aria-expanded="true"] + #otona-global-nav{
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* ヘッダー色＆寸法 */
.otona-header{
  background: #318334;            /* ← ヘッダー色に近い */
  color: #ffffff;
  height: 64px;                    /* 好きな高さでOK */
  box-shadow: 0 1px 0 rgba(0,0,0,.15); /* 下線っぽい境界 */
}
.otona-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;              /* ★ ボタンabsoluteの基準 */
  padding: 0 16px;
}
.otona-header__logo img{ display:block; height:36px; }

/* ← ここが“保険案”：絶対配置で右上にロック */
.otona-header .otona-nav__toggle{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;                      /* 重なり勝ち */
  margin: 0;                       /* 以前のauto等を無効化 */
}

/* ドロップダウン（開閉UIはそのまま流用OK） */
.otona-drawer{
  background: #F6E7C0;
  border-top: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}
.otona-drawer__list{
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: grid;
  gap: 16px;
}
.otona-drawer a{
  display:block; padding:10px 12px; text-decoration:none; color:#0b0b0b; font-weight:700;
}

/* 開いたとき（JSで data-open を付与） */
.otona-drawer[data-open="true"]{
  max-height: 60vh; /* 中身に応じて伸びる上限 */
  opacity: 1;
}



/* ---------------------------
   3) ヒーロー（画像一枚＋影）
   - 画像はHTML側で <img> を直置き
   - JSが軽いフェードを付与（otona.js）
--------------------------- */
.otona_hero{
  background: var(--bg);
  padding-top: clamp(10px, 2vw, 20px);
}
.otona_hero img{
  display:block; width:100%; height:auto;
  box-shadow: var(--shadow);
  will-change: opacity, transform; /* フェードを滑らかに */
}

/* ---------------------------
   4) ドットライン（区切り）
   - 画像を repeat-x で横方向に伸縮
--------------------------- */
.dot-line{
  height:35px;
  background: url("images/green_tama.png") repeat-x left center / auto 100%;
  opacity:.9;
  margin: clamp(16px, 4vw, 32px) 0;
}

/* ---------------------------
   5) セクション（Office/基礎/応用）
   - 2カラム → スマホで1カラム
--------------------------- */
section.block{
  background: var(--bg);
  padding: clamp(28px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--border);
}

.two-col{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* 画像をやや大きく */
  gap: clamp(16px, 3.2vw, 40px);
  align-items: center;
}
.two-col img{
  width:100%; height:auto; /*background:#fff*/;
  /*border-radius:12px; box-shadow: var(--shadow)*/;
}

/* タイポ */
.block h2{
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing:.02em;
  margin: 0 0 8px;
}
.lead{ color:var(--muted); margin:0 0 24px; }

/* 箇条書き：緑のピン */
.list{ margin:0; padding:0; list-style:none; }
.list li{
  position:relative; padding-left:20px; margin:10px 0;
}
.list li::before{
  content:""; position:absolute; left:.5px; top:.7em;
  width:10px; height:10px; border-radius:50%;
  background: var(--ogreen); transform: translateY(-50%);
  box-shadow:0 0 0 3px rgba(134,179,76,.15);
}

/* スマホで1カラム化 */
@media (max-width: 900px){
  .two-col{ grid-template-columns: 1fr; }
  .two-col img{ order:-1; } /* 画像を上に */
}

/* ---------------------------
   6) フッター
--------------------------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  margin-top: clamp(24px, 6vw, 64px);
}
.footer-otona{
  max-width:var(--container); margin:0 auto; padding:16px 20px; text-align:center;
}
.site-footer__copy{ color:#666; }



/* ▼ ヘッダー内テキストを白に統一 */
.otona-nav__list a {
  color: #fff;              /* 白文字 */
  font-weight: 500;
  text-decoration: none;
  transition: opacity .25s;
}

.otona-nav__list a:hover {
  opacity: .8;
}


/* ヘッダー下に太め2本ライン（くっきり版） */
.otona-header-border{
  /* 調整用トークン */
  --line-h: 12px;        /* 線の太さ */
  --gap: 12px;          /* 1本目と2本目の間隔 */
  --offset-top: 16px;   /* ヘッダーから最初の線までの余白 */
  --offset-bottom: 20px;/* 下側の呼吸スペース */

  position: relative;
  background: var(--bg);        /* アイボリー */
  height: calc(var(--offset-top) + var(--line-h) + var(--gap) + var(--line-h) + var(--offset-bottom));
  margin: 0;                    /* ここは0でOK（内部でスペース作る） */
}

/* 1本目 */
.otona-header-border::before,
.otona-header-border::after{
  content:"";
  position:absolute;
  left:0; right:0;
  background: #86B34C;         /* グリーン */
}

/* 上の線 */
.otona-header-border::before{
  top: var(--offset-top);
  height: var(--line-h);
}

/* 下の線 */
.otona-header-border::after{
  top: calc(var(--offset-top) + var(--line-h) + var(--gap));
  height: var(--line-h);
}



/* ---------------------------
   ヒーロー下の2本ライン（グレーバージョン）
--------------------------- */
.otona-hero-border{
  --line-h: 12px;          /* 線の太さ */
  --gap: 10px;            /* 線と線の間隔 */
  --offset-top: 20px;     /* ヒーロー画像との間隔 */
  --offset-bottom: 30px;  /* 次のセクションとの間隔 */

  position: relative;
  background: var(--bg);  /* アイボリー背景 */
  height: calc(var(--offset-top) + var(--line-h) + var(--gap) + var(--line-h) + var(--offset-bottom));
}

/* 1本目・2本目共通設定 */
.otona-hero-border::before,
.otona-hero-border::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  background: #a99f8f; /* グレー寄りのライン色（柔らかめ） */
}

/* 上の線 */
.otona-hero-border::before{
  top: var(--offset-top);
  height: var(--line-h);
}

/* 下の線 */
.otona-hero-border::after{
  top: calc(var(--offset-top) + var(--line-h) + var(--gap));
  height: var(--line-h);
}


.dot-line-green {
  display: block;
  width: 70%;
  height: 22px;
  /*background: url("../images/green_tama.png") repeat-x center / auto 100%;
  opacity: 0.9;*/
  margin-bottom: 16px; /* タイトルとの余白 */
}

/* リード文（小見出し的な説明文） */
.lead {
  font-weight: 700; /* 通常400、やや強調が600 */
  letter-spacing: 0.02em; /* 少し間を空けて読みやすく */
  line-height: 1.8; /* 読みやすさキープ */
}


/* ======================================================
   緑の玉ライン：画像不使用のピュアCSS版（継ぎ目ゼロ）
   - ピッチ/直径/左右ガターを変数で調整
====================================================== */
.dot-line-green{
  /* 調整トークン */
  --dot-d: 16px;      /* ドット直径（高さもこれに合わせる） */
  --pitch: 64px;      /* ドット間隔（ピッチ） */
  --gutter: 10px;     /* 左右ガター（端の半ドット隠し） */

  height: var(--dot-d);
  position: relative;
  margin: 0 0 12px;
  /* 左右ガターで端の半欠けを隠す */
  -webkit-mask: linear-gradient(90deg,
    transparent 0 var(--gutter),
    #000 var(--gutter) calc(100% - var(--gutter)),
    transparent calc(100% - var(--gutter))
  );
          mask: linear-gradient(90deg,
    transparent 0 var(--gutter),
    #000 var(--gutter) calc(100% - var(--gutter)),
    transparent calc(100% - var(--gutter))
  );

  /* ドットをradial-gradientで1個描き、repeat-xで敷き詰める */
  background-image: radial-gradient(circle,
                      #86B34C 0 calc(var(--dot-d)/2),
                      transparent calc(var(--dot-d)/2 + 1px));
  background-size: var(--pitch) var(--dot-d);
  background-position: left center;
  background-repeat: repeat-x;
  opacity: .9;
}

/* 各講座のセクションの基本スタイル */
.block {
    margin: 40px auto; /* 上下の余白 */
    padding: 20px 0;
    max-width: 900px; /* カード全体の最大幅を設定 */
}

/* 2カラムレイアウトのコンテナ */
.two-col {
    display: flex; /* Flexboxで横並びを実現 */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 30px; /* 画像とテキストの間にスペース */
    padding: 20px;
}

/* 画像（アイコン）のスタイル */
.two-col img {
    /* 画像の幅を固定または制限 */
    width: 200px; 
    height: auto;
    flex-shrink: 0; /* 縮小しないようにする */
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影で浮かせる */
    background-color: rgba(255,255,255,.5);
}

/* テキストコンテンツの領域 */
.text-col {
    flex-grow: 1; /* 残りのスペースを全て使用 */
    position: relative; /* 点線（dot-line-green）の基準にする */
    padding: 10px 0 10px 0;
}

/* タブレット調整 */
@media (max-width: 1024px){
  .dot-line-green{ --dot-d: 14px; --pitch: 56px; --gutter: 12px; }
}

/* スマホ調整（うまくいってた70%相当の縮尺に近づける） */
@media (max-width: 599px){
  .dot-line-green{ --dot-d: 12px; --pitch: 48px; --gutter: 12px; visibility: hidden;}
}

/* PCだけ玉を少し増やす（間隔を詰める） */
@media (min-width: 1025px){
  .dot-line-green{
    --pitch: 50px;  /* 既定64px → 56px に。約12.5%詰め＝玉が増える */
    /* もう1個だけ増やしたいなら 60px、もっと増やすなら 52px など調整 */
  }
}




/* --- モバイル（デフォ）: いまのままハンバーガー --- */
/* ここは既存の .otona-nav__toggle / .otona-drawer のCSSをそのまま活かす */

/* --- タブレット/PC: 768px以上でメニューを横並び表示、トグル消す --- */
@media (min-width: 768px){
  /* ボタン隠す */
  .otona-nav__toggle{ display: none !important; }

  /* ドロワー→通常ナビ化 */
  #otona-global-nav.otona-drawer{
    position: static;              /* ヘッダー内 or 直下に通常配置 */
    transform: none;
    opacity: 1;
    max-height: none;
    pointer-events: auto;
    background: transparent;       /* 背景や枠はPCでは不要なら外す */
    border: 0;
    box-shadow: none;
  }

  /* 横並び */
  .otona-drawer__list{
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* PC用リンク体裁 */
  .otona-drawer a{
    display: block;
    padding: 0;                    /* モバイルのパディングをリセット */
    text-decoration: none;
    font-weight: 700;
    color: #111;
  }

  /* ヘッダー内で左右に配置（ロゴ左／メニュー右） */
  .otona-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

@media (min-width: 768px){
  /* 既存の設定はそのまま */
  .otona-drawer a{
    display: block;
    padding: 0;
    text-decoration: none;
    font-weight: 700;
    color: #fdf9f3;   /* 文字色変更 */
  }

  /* hover時にちょっとだけアクセント付けたい場合 */
  .otona-drawer a:hover{
    opacity: 0.8;  /* 少しトーンダウンで上品に */
  }
}



/* ========== フッター ========== */
.site-footer {
  background: #318334;          /* ← グリーン系（ヘッダーと統一感） */
  color: #fff;                  /* 白文字 */
  text-align: center;
  padding: 24px 0;
  font-size: 0.875rem;
}

.footer-otona {
  max-width: 1100px;
  margin: 0 auto;
}

.site-footer__copy {
  display: inline-block;
  opacity: 0.85;
  letter-spacing: 0.05em;
    color: #fff;                  /* 白文字 */

}


/* タブレット：やや大きく、読みやすく */
@media (min-width: 481px) and (max-width: 1024px){
  .list li {
    font-size: 24px;
    line-height: 1.8;
  }
}

/* タブレット専用の余白ゆったり設定 */
@media (min-width: 481px) and (max-width: 1024px){
  .container.two-col {
    padding-left: 50px;   /* ← 左にゆとり追加 */
    padding-right: 32px;  /* ← ついでに右も合わせる */
    gap: 32px;             /* ← 画像とテキストの間も少し広げる（任意） */
  }
}


/* ===== 画像フェードイン（ヒーロー除外） ===== */
.page-otona .reveal-img{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.page-otona .reveal-img.is-visible{
  opacity: 1;
  transform: none;
}

/* 動きを控える設定の人にはアニメ無しで即表示 */
@media (prefers-reduced-motion: reduce){
  .page-otona .reveal-img{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* =============================
   追従ヘッダー（大人ページ）
============================= */
:root { --otona-header-h: 64px; }

.otona-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #318334;  /* 緑帯 */
  transition: box-shadow .25s ease, backdrop-filter .25s ease;
  backdrop-filter: saturate(1.05) blur(0px);
}

/* 内側配置を一定にする */
.otona-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--otona-header-h);
}

/* スクロール時にふわっと浮かせる */
.otona-header.is-stuck {
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  backdrop-filter: saturate(1.1) blur(4px);
}

/* モバイルナビ位置調整 */
@media (max-width: 767.98px) {
  .otona-drawer {
    top: var(--otona-header-h);
  }
}

/* モバイル初期：ナビはドロワー制御に任せる */
.site-nav { display: none; }  /* ベースを明示しておく */

/* タブレット以上は常時横並びで表示（ここが大事） */
@media (min-width: 768px){
  .site-nav{
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1500; /* 任意：ヘッダーよりは低く */
  }
  .site-nav__toggle{ display: none !important; }
  .site-nav__list{ display: flex; gap: 32px; padding: 0; margin: 0; } /* 念押し */
}