@charset "UTF-8";
/* =========================================================
   Base Settings (Color Palette & Senior-Friendly Typography)
========================================================= */
:root {
  --color-primary: #388c84;
  --color-secondary: #eef5f3;
  --color-accent: #4b928f;
  --color-text: #333333;
  --color-text-light: #5c736b;
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --border-radius: 8px;
  --bg-light: #fcfbf9;
}

body {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--color-text);
  background-color: var(--bg-light);
  /* 全体の基本文字サイズを大きめ（18px）に設定。行間も広めに。 */
  font-size: 18px; 
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.8;
}
.inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.section-title {
  text-align: center;
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 40px;
  color: var(--color-primary);
  font-weight: bold;
}

/* =========================================================
   Screen 1: First View
========================================================= */
.fv-section {
  background-color: var(--color-secondary);
  padding: 60px 20px;
}
.fv-container {
  max-width: 1100px;
  margin: 0 auto;
}
.fv-columns {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.fv-content {
  flex: 1.2;
}
.fv-sub {
  font-size: 18px; /* 16px -> 18px に拡大 */
  font-weight: bold;
  color: var(--color-text-light);
  margin-bottom: 10px;
}
.fv-title {
  font-size: clamp(26px, 5vw, 42px);
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--color-primary);
  word-break: keep-all;
}
.fv-title span {
  font-size: 0.6em;
  display: block;
  margin-bottom: 5px;
}
.fv-catch {
  font-size: 20px; /* 18px -> 20px に拡大 */
  margin-bottom: 0;
}
.fv-image {
  flex: 1;
}
.fv-image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fv-cta-wrapper {
  text-align: center;
}
.btn-primary {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 18px 32px;
  font-size: 20px; /* ボタン文字もハッキリと */
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(75, 146, 143, 0.3);
}
.btn-primary i {
  margin-right: 6px;
}

/* =========================================================
   Screen 2: Intro (3カラム・中央幅広レイアウト)
========================================================= */
.intro-section {
  padding: 80px 0;
  background-color: var(--color-bg);
}

.message-boxes {
  display: flex;
  flex-direction: row; /* 縦並びから横並びに変更 */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch; /* 全ての箱の高さを揃える */
}

.message-box {
  background: var(--color-white);
  padding: 32px 24px; /* 横並びで窮屈にならないよう左右の余白を調整 */
  border-radius: var(--border-radius);
  border: 1px solid #e1ebe8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  justify-content: center; /* 両端の短いテキストが縦方向の中央にくるように配置 */
}
.message-box img{
width: 100%;
height: auto;
border-radius: var(--border-radius);
margin: 10px 0;
}

/* 両端の箱（1つ目と3つ目） */
.message-box:nth-child(1),
.message-box:nth-child(3) {
  flex: 1; /* 基本幅 */
}

/* 中央の箱（情報量が多いため、両端より少し幅広にする） */
.message-box:nth-child(2) {
  flex: 1.6; /* 1 : 1.6 : 1 の比率 */
}

.message-box p {
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.8;
}

/* 1つ目と3つ目の箱（短いメッセージ）の装飾 */
.message-box:nth-child(1) p,
.message-box:nth-child(3) p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primary);
  margin: 0;
}

.message-box p:last-child,
.message-box .chips:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   スマホ・タブレット向けレスポンシブ対応
--------------------------------------------------------- */
@media (max-width: 820px) {
  .message-boxes {
    flex-direction: column; /* 画面幅が狭い時は縦並びにフォールバック */
  }
  
  .message-box {
    padding: 40px; /* 縦並び時は元のゆったりした余白に戻す */
  }
}
/* =========================================================
   Features (②＋③＋② レイアウト)
========================================================= */
.features-section {
  padding: 80px 0;
  background-color: #d5efee;
}

/* 2列と3列を同じグリッド内で美しく混在させるため、最小公倍数である「6分割（6カラム）」をベースにします */
.card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); 
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.feature-card {
  background: var(--color-white);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--color-primary);
}

/* ▼ 1行目(①,②) と 3行目(⑥,⑦) は、6分割のうち「3つ分(＝50%)」を使って2列にする */
.feature-card:nth-child(1),
.feature-card:nth-child(2),
.feature-card:nth-child(6),
.feature-card:nth-child(7) {
  grid-column: span 3;
}

/* ▼ 2行目(③,④,⑤) は、6分割のうち「2つ分(＝約33%)」を使って3列にする */
.feature-card:nth-child(3),
.feature-card:nth-child(4),
.feature-card:nth-child(5) {
  grid-column: span 2;
}

/* =========================================================
   カード内部の装飾（変更なし）
========================================================= */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.card-num {
  font-size: 26px;
  font-weight: bold;
  color: var(--color-accent);
  margin-right: 10px;
}
.card-title {
  font-size: 22px;
  margin: 0;
  color: var(--color-primary);
}
.card-title small {
  font-size: 15px;
  color: var(--color-text-light);
  display: block;
}
.card-catch {
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #b8cec7;
}
.card-text {
  font-size: 16px;
  margin-bottom: 20px;
  flex-grow: 1;
}
.chips {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.chips li {
  position: relative;
  font-size: 16px;
  margin-bottom: 8px;
  background: #f0f6f4;
  padding: 10px 14px 10px 36px;
  border-radius: 4px;
  color: #3b574f;
  line-height: 1.5;
}
.chips li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 10px;
  color: var(--color-accent);
}
.card-link {
  display: block;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
}
a.card-link{
font-weight: bold;
}
.card-link i {
  margin-left: 4px;
}
.multi-links {
  display: flex;
  gap: 10px;
}
.multi-links .card-link {
  flex: 1;
}

/* =========================================================
   レスポンシブ対応
========================================================= */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr; /* スマホでは完全に1カラム */
  }
  .feature-card:nth-child(n) {
    grid-column: auto; /* 上で設定したspan（結合）を全て解除 */
  }
}
/* メンタルパフォーマンス解説セクションのスタイル */
.shuraku-mental-performance {
  background-color: #f7f9fa; /* 落ち着いた薄いグレー/ブルー系 */
  border-radius: 8px;
  padding: 3rem 2rem;
  margin: 3rem auto 0;
  max-width: 1060px;
  box-sizing: border-box;
}

.smp-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.smp-title {
  font-size: 1.6rem;
  color: #2c3e50;
  text-align: center;
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dcdde1;
  letter-spacing: 0.05em;
}

.smp-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.smp-lead {
  font-size: 1.2rem;
  font-weight: bold;
  color: #34495e;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.smp-text {
  line-height: 1.8;
  color: #333;
  margin: 0;
  text-align: justify; /* 文字の端を揃えて美しい読み心地に */
}

.smp-text strong {
  color: #2c3e50;
  background: linear-gradient(transparent 70%, #d1e8ff 70%); /* 控えめなマーカー風装飾 */
}

/* スマートフォン表示用の調整 */
@media screen and (max-width: 600px) {
  .shuraku-mental-performance {
    padding: 2rem 1.5rem;
  }
  
  .smp-title {
    font-size: 1.1rem;
  }
  
  .smp-lead {
    font-size: 1rem;
    text-align: left; /* スマホでは左揃えの方が見やすい場合があります */
  }
}
/* =========================================================
   Screen 4: Platforms
========================================================= */
.platforms-section {
padding: 80px 0;
}
.banner-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}
.platform-banner {
  flex: 1;
  background: #fff;
  color: #388c84;
  padding: 20px;
  text-align: center;
  border-radius: var(--border-radius);
  display: block;
  transition: transform 0.3s ease;
border: 1px solid #e1ebe8;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.platform-banner:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}
.banner-grid img{
width: 100%;
height: auto;
border-radius: var(--border-radius);
}
.banner-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.platform-banner p {
  font-size: 17px; /* 14px -> 16px に拡大 */
  margin: 0;
}
.bible-box {
  background: #fff;
  border: 2px solid var(--color-accent);
  padding: 40px;
  text-align: center;
  border-radius: var(--border-radius);
}
.bible-box p {
  font-size: 20px; /* 18px -> 20px に拡大 */
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--color-primary);
}
.btn-secondary {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 16px 30px;
  border-radius: 50px;
  font-size: 18px; /* 追加：ボタン文字サイズ指定 */
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(75, 146, 143, 0.2);
}
.btn-secondary i {
  margin-right: 6px;
}
small.red{
color: #DB0003;
}
/* =========================================================
   Screen 5: Consultation
========================================================= */
.consultation-section {
  padding: 80px 0;
  background-color: #d5efee;
}

.consult-heading {
  text-align: center;
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: var(--color-primary);
}

.consult-text-box {
  background: var(--color-white);
  padding: 50px;
  border-radius: var(--border-radius);
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* ストーリー部分 */
.consult-story h3 {
  font-size: 22px;
  margin: 0 0 20px 0;
  color: var(--color-primary);
  border-bottom: 2px solid #e1ebe8;
  padding-bottom: 10px;
}

.consult-story p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}

.consult-story p:last-child {
  margin-bottom: 0;
}

/* ノート販売部分（独立した囲み枠として強調） */
.note-box {
  background-color: #f0f6f4;
  border: 1px solid #dbeae6;
  border-radius: var(--border-radius);
  padding: 40px;
  margin-top: 40px;
}

/* ★画像を文章の横に並べる設定 */
.note-grid {
  display: flex;
  align-items: center; /* 画像とテキストを垂直中央で揃える。上に揃えたい場合は flex-start に変更 */
  gap: 40px; /* テキストと画像の隙間 */
}

.note-info {
  flex: 1; /* 余ったスペースをテキストエリアが埋める */
}

.note-title {
  font-size: 20px;
  margin: 0 0 15px 0;
  color: #3b574f; 
}

.note-info p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* ★画像エリアのサイズを300pxに固定 */
.note-image {
  flex: 0 0 300px; /* 幅を300pxに固定して横に配置 */
}

.note-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

/* ボタンと注意書きエリア */
.note-action {
  text-align: center; /* 中央揃えから左揃えに変更 */
  margin-top: 30px;
}

.btn-note {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 16px 30px; /* 幅を取りすぎないよう左右のpaddingを少し調整 */
  border-radius: 30px;
  font-size: 16px; /* 18pxだと長すぎる場合は16px推奨 */
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.btn-note:hover {
  opacity: 0.8;
}

.btn-note i {
  margin-right: 5px;
}

p.note-warning {
  margin: 1px 0 0 0;
  font-size: 13px; /* 少し小さくして控えめに */
  color: var(--color-text-light); 
padding-top: 7px;
text-align: left;
}
p.note-warning a{
text-decoration: underline;
}
p.note-warning a:hover{
text-decoration: none;
}

/* =========================================================
   レスポンシブ（スマホ対応）
========================================================= */
@media (max-width: 768px) {
  .consult-text-box {
    padding: 30px 20px;
  }
  
  .note-box {
    padding: 25px 20px;
  }

  .note-grid {
    flex-direction: column-reverse; /* スマホでは画像が上、テキスト・ボタンが下 */
    gap: 20px;
  }

  .note-image {
    flex: auto;
    width: 100%;
    max-width: 250px; /* スマホ時は少し小さめが良いかも */
    margin: 0 auto;
  }

  .note-action {
    text-align: center; /* スマホではボタンを中央揃えに */
  }

  .btn-note {
    display: block;
    width: 100%; 
    padding: 15px 10px;
    font-size: 15px;
  }
}
/* =========================================================
   Screen 6: CTA / Contact
========================================================= */
.cta-section {
  padding: 60px 0;
  background-color: var(--color-primary);
}
.cta-buttons {
  display: flex;
  gap: 30px;
  justify-content: center;
}
.btn-cta {
  flex: 1;
  max-width: 450px;
  display: flex;
  align-items: center;
  background: var(--color-white);
  padding: 24px 20px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.btn-cta .icon {
  font-size: 40px; 
  margin-right: 20px;
}
.btn-cta .small {
  display: block;
  font-size: 16px; /* 14px -> 16px に拡大 */
  font-weight: bold;
}
.btn-cta .big {
  display: block;
  font-size: clamp(18px, 2.5vw, 24px); /* 少し拡大 */
  font-weight: bold;
}

/* =========================================================
   Media Queries (Mobile)
========================================================= */
@media (max-width: 768px) {
  .fv-columns {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .fv-title {
    font-size: 28px;
  }
  .message-boxes {
    flex-direction: column;
  }
  .banner-grid {
    flex-direction: column;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .btn-cta {
    width: 100%;
  }
}