@charset "utf-8";
/* ==========================================================================
   トップページ トーン変更案（2026-08-05 / 打合せ議事録 反映）

   方針：「かっこいい・ストイック」→「上品・安心感・やわらかい・入りやすい」
        初心者・女性でも入りやすい明るさへ。ただしポップにしすぎず上品さは維持。

   ・このファイルは差分のみを持つ上書き用CSS。
     元の top.css / common.css は変更していないため、
     header-preview.php の読み込み1行を消せば完全に元の配色へ戻せる。
   ・本番 css/ ではなく css-preview/ 配下のため、本番サイトには影響しない。
   ========================================================================== */

:root{
  --tone-bg:       #eafdfc; /* 背景地：ごく薄いミントシアン       */
  --tone-band:     #d4f9f7; /* セクション帯：一段濃い地色         */
  --tone-accent:   #2ff8f2; /* アクセント：ご指定色（ボタン・罫線）*/
  --tone-main:     #5fb8cf; /* メイン：明るいターコイズ           */
  --tone-dark:     #2e7d92; /* 見出し・締め色：濃いターコイズ     */
  --tone-text:     #2b4a52; /* 本文：ターコイズ寄りの濃色         */
  --tone-text-sub: #6f8f97; /* 補助文：中間色                     */
  --tone-line:     #b9e9ec; /* 罫線・区切り                       */
}

/* --------------------------------------------------------------
   1. ページ全体の地色（黒 → 明るいミントシアン）
   -------------------------------------------------------------- */
body,
main.top{
  background-color: var(--tone-bg);
}

/* --------------------------------------------------------------
   2. 各セクションの背景（#302f2e / #1e1e1f / #424140 の黒系を置換）
      濃淡を交互にして、明るい中でもセクションの切れ目が分かるようにする
   -------------------------------------------------------------- */
.top .sec02{           background-color: var(--tone-bg); }
.top .sec02-img{       background-color: var(--tone-band); }
.top .sec03{           background-color: var(--tone-band); }
.top .campaign-sec{    background-color: var(--tone-bg); }
.top .join{            background-color: var(--tone-band); }
.top .archive{         background-color: var(--tone-bg); }
.top .event{           background-color: var(--tone-bg); }

/* 白カードは地色が明るくなったため、輪郭が出るよう淡い枠と影を足す */
.top .sec02-wrap-col-txt,
.top .join-wrap-txt{
  background-color: #fff;
  border: 1px solid var(--tone-line);
  box-shadow: 0 2px 12px rgba(46,125,146,.06);
}

/* --------------------------------------------------------------
   3. 文字色（黒背景前提の白・淡色 → 明るい背景で読める濃色へ）
   -------------------------------------------------------------- */
.top .sec01-txt-desc{      color: var(--tone-dark); }
.top .sec02-wrap-col-p{    color: var(--tone-text); }

.top .sec02-wrap-col-img-left-tate p,
.top .sec02-wrap-col-img-right-tate p{
  color: var(--tone-text-sub);
}
/* 縦組みテキストの装飾ライン（ゴールド → ターコイズ） */
.top .sec02-wrap-col-img-left-tate p:before,
.top .sec02-wrap-col-img-right-tate p:before{
  background-color: var(--tone-main);
}

/* --------------------------------------------------------------
   4. 共通見出し（common.css のゴールド系見出しをターコイズへ）
      ゴールドは黒背景でこそ映える色のため、明るい地では可読性が落ちる
   -------------------------------------------------------------- */
.com-h2--gold h2,
.com-h2--gold--center h2,
.com-h2--left h2,
.com-h2--black h2{
  color: var(--tone-dark);
}
.com-h2--gold h2 span,
.com-h2--gold--center h2 span,
.com-h2--left h2 span,
.com-h2--black h2 span{
  color: var(--tone-main);
}
.top .archive .com-h2--black .mask_inner::after{
  background: var(--tone-dark) !important;
}

/* --------------------------------------------------------------
   5. ボタン（READ MORE 等）
      アクセント色 #2ff8f2 は明度が高く文字色には向かないため、
      下線・ホバー面など「面と線」で使い、文字は濃色にして可読性を確保する
   -------------------------------------------------------------- */
.com-btn--gold a,
.com-h2--left .com-btn--rigth a{
  color: var(--tone-dark);
}
.com-btn--gold a::after,
.com-h2--left .com-btn--rigth a::after{
  background-color: var(--tone-accent);
}
.com-btn--gold a:hover,
.com-h2--left .com-btn--rigth a:hover{
  color: var(--tone-main);
}

/* --------------------------------------------------------------
   6. ヘッダー／ドロワー
   -------------------------------------------------------------- */
.header-content,
.header-sub .header-content,
.header #drawer-icon{
  background-color: var(--tone-main);
}
.header #drawer-content{
  background: var(--tone-dark);
}

/* --------------------------------------------------------------
   7. フッター（黒 → 濃いターコイズ。明るい本文からの締めとして残す）
   -------------------------------------------------------------- */
.footer-wrap{ background-color: var(--tone-dark); }
.footer-nav{  background-color: #25697c; }
.footer-nav-list li a{  color: #eafdfc; }
.footer-nav-link li a,
.footer-nav-content p,
.footer-wrap-row-txt li,
.footer-wrap-row-txt a{ color: #bfe4ea; }

/* --------------------------------------------------------------
   8. 記事カテゴリタグ・日付など細部
   -------------------------------------------------------------- */
.top .event-wrap-col-img-cat .cat-event{  background-color: var(--tone-main); }
.top .event-wrap-col-img-cat .cat-topics{ background-color: var(--tone-dark); }
.top .archive-wrap-item-time time{        color: var(--tone-main); }
.top .sec02-img a p{                      background-color: var(--tone-main); }