@charset "utf-8";
/* ==========================================================================
   トップページ トーン変更案：白基調＋ピンク差し色（2026-08-10）

   議事録の方針（上品・安心感・やわらかい・入りやすい／初心者・女性）に対して、
   地を白で保ちつつ、帯・罫線・ボタンに薄いピンクを差す構成。

   ・tone.css（黒基調→明るい基調への置き換え）の後に読み込み、
     配色変数と、tone.css 側で色を直接指定している箇所を上書きする。
   ・ヘッダーの header-wrap のみ #2ff8f2（ご指定により維持）。
   ========================================================================== */

:root{
  --tone-bg:       #ffffff; /* 背景地：白                        */
  --tone-band:     #fdf4f5; /* セクション帯：ごく薄いピンク      */
  --tone-accent:   #f6c9d2; /* アクセント：罫線・帯              */
  --tone-main:     #e3899a; /* メイン：くすみピンク              */
  --tone-dark:     #8a4a58; /* 見出し・締め色：濃いローズ        */
  --tone-text:     #4a3238; /* 本文：ローズ寄りの濃色            */
  --tone-text-sub: #7d626a; /* 補助文（白地でも読める濃さ）      */
  --tone-line:     #f0dade; /* 罫線                              */
}

/* --------------------------------------------------------------
   ★ ヘッダー：header-wrap の領域だけ #2ff8f2（ご指定により維持）
      親の .header-content はピンク系（--tone-main）になる
   -------------------------------------------------------------- */
.header .header-wrap{
  background-color: #2ff8f2;
}

/* --------------------------------------------------------------
   フッター：tone.css が濃いターコイズを直接指定しているためローズ系に置換
   -------------------------------------------------------------- */
.footer-wrap{ background-color: var(--tone-dark); }
.footer-nav{  background-color: #6e3a46; }
.footer-nav-list li a{  color: #fdf2f4; }
.footer-nav-link li a,
.footer-nav-content p,
.footer-wrap-row-txt li,
.footer-wrap-row-txt a{ color: #dcbdc4; }

/* --------------------------------------------------------------
   白地ではカードが溶けるため、輪郭を淡いピンクの枠と影で作る
   -------------------------------------------------------------- */
.top .sec02-wrap-col-txt,
.top .join-wrap-txt,
.prev-visit__points li,
.prev-voice__item{
  background: #fff;
  border: 1px solid var(--tone-line);
  box-shadow: 0 4px 18px rgba(138, 74, 88, .07);
}

/* --------------------------------------------------------------
   ボタン・リンクの下線
   アクセント(#f6c9d2)は淡すぎて線が見えないため、線はメインカラーで引く
   -------------------------------------------------------------- */
.com-btn--gold a::after,
.com-h2--left .com-btn--rigth a::after{
  background-color: var(--tone-main);
}
/* メインのピンク(#e3899a)に白文字はコントラスト比2.53で不足するため、
   白文字を載せる面は濃いローズ(--tone-dark 比6.56)にする */
.prev-visit__btn a{
  background: var(--tone-dark);
  color: #fff;
}
.prev-visit__btn a:hover{ background: var(--tone-main); color: #4a3238; }
.prev-visit__points-num{
  background: var(--tone-dark);
  color: #fff;
}

/* カード上端のアクセントライン（白地の中で帯の役割を持たせる） */
.prev-visit__points li{
  border-top: 3px solid var(--tone-accent);
}
.prev-voice__item-who{
  border-top-color: var(--tone-accent);
  /* メインのピンク(#e3899a)は白地でコントラスト不足だったため濃いローズに */
  color: var(--tone-dark);
}
.prev-voice__item::before{ color: var(--tone-accent); }

/* --------------------------------------------------------------
   写真・動画：白地で沈まないよう、やわらかい影で輪郭を出す
   -------------------------------------------------------------- */
.prev-support__photo img,
.prev-visit__photo img,
.prev-voice__photo img,
.prev-support__movies video{
  box-shadow: 0 6px 22px rgba(138, 74, 88, .12);
}

/* 記事カテゴリタグ・日付 */
.top .event-wrap-col-img-cat .cat-event{  background-color: var(--tone-dark); }
.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-dark); }