@charset "utf-8";
/* ==========================================================================
   トップページ 追加セクション用CSS（2026-08-05）
   ・SUPPORT（マンツーマンサポート訴求）
   ・VISIT  （見学・体験／初心者の安心要素）
   ・VOICE  （会員さまの声）

   tone.css で定義した配色変数（--tone-*）を使用する。
   このファイルは追加セクション専用。既存セクションには影響しない。
   ========================================================================== */

/* 共通：セクションの余白と地色（帯の濃淡を交互にして区切りを作る） */
.prev-support,
.prev-visit,
.prev-voice{
  padding: 90px 0;
}
.prev-support{ background-color: var(--tone-bg); }
.prev-visit  { background-color: var(--tone-band); }
.prev-voice  { background-color: var(--tone-band); }

/* --------------------------------------------------------------
   SUPPORT：マンツーマンサポート
   -------------------------------------------------------------- */
.prev-support__lead{
  text-align: center;
  margin: 40px auto 56px;
}
.prev-support__lead-catch{
  font-size: 30px;
  line-height: 1.6;
  color: var(--tone-dark);
  letter-spacing: .06em;
  margin-bottom: 24px;
}
.prev-support__lead-txt{
  font-size: 15px;
  line-height: 2.2;
  color: var(--tone-text);
}

/* 指導風景の写真（2枚横並び） */
.prev-support__photos{
  display: flex;
  gap: 28px;
  margin-bottom: 64px;
}
.prev-support__photo{
  flex: 1 1 0;
  margin: 0;
}
.prev-support__photo img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.prev-support__photo figcaption{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--tone-text-sub);
  text-align: center;
}

/* 指導風景の動画（縦型 720x1280 をそのままの比率で4本並べる） */
.prev-support__movie-title{
  text-align: center;
  font-size: 17px;
  letter-spacing: .1em;
  color: var(--tone-dark);
  margin-bottom: 24px;
}
.prev-support__movies{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.prev-support__movies li{ margin: 0; }
.prev-support__movies video{
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
  display: block;
}

/* --------------------------------------------------------------
   VISIT：見学・体験
   -------------------------------------------------------------- */
.prev-visit__catch{
  text-align: center;
  font-size: 28px;
  color: var(--tone-dark);
  letter-spacing: .06em;
  margin: 40px 0 48px;
}
.prev-visit__points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
}
.prev-visit__points li{
  background: #fff;
  border-radius: 10px;
  padding: 36px 28px 32px;
  text-align: center;
  position: relative;
  border: 1px solid var(--tone-line);
}
.prev-visit__points-num{
  display: inline-block;
  font-size: 13px;
  letter-spacing: .18em;
  color: #fff;
  background: var(--tone-main);
  border-radius: 999px;
  padding: 5px 16px;
  margin-bottom: 18px;
}
.prev-visit__points-ttl{
  font-size: 18px;
  color: var(--tone-dark);
  margin-bottom: 14px;
  line-height: 1.6;
}
.prev-visit__points-txt{
  font-size: 14px;
  line-height: 2;
  color: var(--tone-text);
  text-align: left;
}
.prev-visit__photo img{
  width: 100%;
  /* スタッフ写真（横長1600x1200）で頭が切れないよう、枠を高くし表示位置を上寄りに */
  height: 460px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 10px;
  display: block;
  margin-bottom: 44px;
}
.prev-visit__btn{ text-align: center; }
.prev-visit__btn a{
  display: inline-block;
  min-width: 340px;
  padding: 20px 40px;
  background: var(--tone-main);
  color: #fff;
  font-size: 16px;
  letter-spacing: .08em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .3s;
}
.prev-visit__btn a:hover{ background: var(--tone-dark); }

/* --------------------------------------------------------------
   VOICE：会員さまの声（3列×2行のカード）
   -------------------------------------------------------------- */
.prev-voice__catch{
  text-align: center;
  font-size: 24px;
  color: var(--tone-dark);
  letter-spacing: .06em;
  margin: 40px 0 48px;
}
.prev-voice__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
}
.prev-voice__item{
  background: #fff;
  border-radius: 10px;
  padding: 34px 30px 28px;
  border: 1px solid var(--tone-line);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 引用符の装飾 */
.prev-voice__item::before{
  content: "“";
  position: absolute;
  top: 6px;
  left: 18px;
  font-size: 52px;
  line-height: 1;
  color: var(--tone-line);
  font-family: Georgia, serif;
}
.prev-voice__item-txt{
  font-size: 14px;
  line-height: 2.1;
  color: var(--tone-text);
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.prev-voice__item-who{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tone-line);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--tone-main);
  text-align: right;
}
.prev-voice__photo img{
  width: 100%;
  /* スタッフ写真（横長1600x1200）は高さ340pxだと頭が切れるため、
     枠を高くし、表示位置を上寄りにして顔が入るようにしている */
  height: 460px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 10px;
  display: block;
}

/* --------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------- */
@media screen and (max-width: 768px){
  .prev-support,
  .prev-visit,
  .prev-voice{ padding: 60px 0; }

  .prev-support__lead-catch{ font-size: 22px; }
  .prev-support__lead-txt{ font-size: 14px; line-height: 2; text-align: left; }
  .prev-support__lead-txt br{ display: none; }

  .prev-support__photos{ flex-direction: column; gap: 24px; }
  .prev-support__photo img{ height: 240px; }

  /* 動画は2列。4本を縦に並べると長くなりすぎるため */
  .prev-support__movies{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .prev-visit__catch{ font-size: 20px; }
  .prev-visit__points{ grid-template-columns: 1fr; gap: 16px; }
  .prev-visit__points li{ padding: 28px 22px 24px; }
  .prev-visit__photo img{ height: 230px; object-position: center 20%; }
  .prev-visit__btn a{ min-width: 0; width: 100%; padding: 18px 20px; font-size: 15px; }

  .prev-voice__catch{ font-size: 18px; }
  .prev-voice__list{ grid-template-columns: 1fr; gap: 16px; }
  .prev-voice__photo img{ height: 230px; object-position: center 20%; }
}