@charset "utf-8";
/* ==========================================================================
   トップページ トーン変更案：白ベース版（2026-08-06）

   背景を白にし、ターコイズを差し色として使う案。
   tone.css の後に読み込み、配色変数と一部の固定色を上書きする。

   ・地が白になるぶん、いただいた写真・動画が主役になる。
   ・#2ff8f2（ご指定色）はボタンや罫線のアクセントとして部分的に効かせる。
   ・白地では淡い文字が読みづらくなるため、補助文の濃度を上げている。
   ========================================================================== */

:root{
  --tone-bg:       #ffffff; /* 背景地：白                          */
  --tone-band:     #f4fbfd; /* セクション帯：ごく薄い水色          */
  --tone-accent:   #2ff8f2; /* アクセント：ご指定色（罫線・下線）  */
  --tone-main:     #5fb8cf; /* メイン：ターコイズ                  */
  --tone-dark:     #2e7d92; /* 見出し・締め色                      */
  --tone-text:     #2b4a52; /* 本文                                */
  --tone-text-sub: #5a7d85; /* 補助文（白地でも読める濃さに調整）  */
  --tone-line:     #d3ecf3; /* 罫線                                */
}

/* --------------------------------------------------------------
   白地ではカードが背景に溶けるため、輪郭を影で作る
   -------------------------------------------------------------- */
.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(46, 125, 146, .07);
}

/* --------------------------------------------------------------
   セクションの敷き分け
   白が続くと切れ目が消えるため、帯セクションを薄い水色にして交互にする
   -------------------------------------------------------------- */
.prev-support{ background-color: var(--tone-bg); }
.prev-visit  { background-color: var(--tone-band); }
.prev-voice  { background-color: var(--tone-band); }

.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 .event{        background-color: var(--tone-bg); }
.top .archive{      background-color: var(--tone-bg); }

/* --------------------------------------------------------------
   アクセント：ご指定の #2ff8f2 を「線」で効かせる
   （面で使うと白地から浮くため、細い線と下線に限定する）
   -------------------------------------------------------------- */
.prev-visit__points li{
  border-top: 3px solid var(--tone-accent);
}
.com-btn--gold a::after,
.com-h2--left .com-btn--rigth a::after{
  background-color: var(--tone-accent);
}
.prev-voice__item-who{
  border-top-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(46, 125, 146, .12);
}