/* =========================
   共通設定
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family:
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
  color: #222;
  background: #f5f5f5;
  line-height: 1.7;
}
img {
  width: 100%;
  display: block;
}
a {
  text-decoration: none;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 50px;
}
.cta-button {
  display: inline-block;
  background: #7CFF59;
  color: #000;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 40px;
  border-radius: 9999px;
  transition: 0.3s;
}
.cta-button:hover {
  opacity: 0.85;
}

/* ==========================
   セクション見出し共通
========================== */
.section-heading {
  text-align: center;
  margin-bottom: 60px;
}
.section-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}
.section-subtitle {
  width: fit-content;
  margin:0 auto;

  text-align: left;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.8;
}
.section-line {
  width: 150px;
  height: 3px;
  background-color: #1f3c68;
  margin: 0 auto 80px;
}

/* =========================
   FV
========================= */
.fv .container {
  padding-left: 0;
  padding-right: 0;
}
.fv {
  padding: 60px 0;
  background: #f5f5f5;
}
.fv-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.fv-text {
  flex: 0 0 45%;
}
.fv-image {
  flex: 0 0 55%;
  display:block;
  justify-content: flex-end;
}
.fv-image img {
  width: 100%;
  height: 650px;
  object-fit: cover;
}
.fv-title {
  margin-bottom: 60px;
}
.fv-title-main {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.03em;
}
.fv-title-sub {
  display: block;
  margin-top: 40px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.5;
}
.fv-subtitle {
  color: #274472;
  font-weight: 700;
  margin-bottom: 32px;
}
.fv-description {
  margin-bottom: 60px;
  font-size: 18px;
}

/* ==========================
   悩みセクション
========================== */
.problem {
  padding: 100px 0;
  background-color: #f5f5f5;
}
.problem .container {
  max-width: 1100px;
  margin: 0 auto;
}
.sp-only {
  display: none;
}
/* ==========================
   悩みリスト
========================== */
.problem-list {
  width: 700px;
  margin: 0 auto 60px;
  padding: 0;
  list-style: none;
}
.problem-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 28px;
  font-size: 24px;
  line-height: 1.8;
}

/* チェックマーク */
.problem-list li::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: 0;

  color: #7be84d;
  font-size: 26px;
  font-weight: bold;
}

/* ==========================
   共感文
========================== */
.problem-text {
  width: 700px;
  margin: 0 auto;
}
.problem-text p {
  margin-bottom: 28px;
  font-size: 24px;
  line-height: 1.8;
}
.problem-highlight {
  font-weight: 700;
}

/* ==========================
   選ばれる理由
========================== */
.reason {
  padding: 100px 0;
  background: #f5f5f5;
}
.reason .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 450px);
  justify-content: center;
  gap: 60px;
}
.reason-card {
  background: #fff;
  border: 1px solid #294c7c;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 4px 4px 0 #294c7c;
}
.reason-card-featured {
  border: 2px solid #1f3c68;

  box-shadow: 8px 8px 0 #1f3c68;
}
.reason-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.reason-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.reason-icon img {
  width: 48px;
  height: 48px;
}
.reason-card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
}
.reason-card p {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ==========================
   Before After セクション
========================== */
.before-after {
  padding: 100px 0;
  background: #f5f5f5;
}
.before-after .container {
  max-width: 1100px;
  margin: 0 auto;
}
  .sp-only {
    display: none;
  }
/* ==========================
   セクション見出し
========================== */
.before-after .section-heading {
  text-align: center;
}
.before-after .section-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
}
.before-after .section-title span {
  color: #1f3a5f;
}
.before-after .section-subtitle {
  margin-top: 40px;
  font-size: 24px;
  line-height: 1.8;
  font-weight: 500;
}

/* ==========================
   カード一覧
========================== */
.before-after-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 80px;
}

/* ==========================
   カード
========================== */
.before-after-card {
  width: 340px;
  padding: 20px;
  background: #fff;
  border: 1px solid #1f3a5f;
  border-radius: 8px;
}

/* ==========================
   Before After画像
========================== */
.before-after-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
.before-box,
.after-box {
  width: 90px;
  height: 90px;
  border: 1px solid #666;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
}
.arrow {
  font-size: 48px;
  font-weight: 700;
}

/* ==========================
   カード情報
========================== */
.before-after-info p {
  margin-bottom: 15px;
  line-height: 1.5;
}
.result {
  font-weight: 400;
  font-size: 16px;
}
.result span {
  font-size: 20px;
  font-weight: 700;
}
.comment {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.5;
}

/* ==========================
   お客様の声セクション
========================== */
.voice {
  padding: 100px 0;
  background: #f5f5f5;
}
.voice .container {
  max-width: 1100px;
  margin: 0 auto;
}
.sp-only {
  display: none;
}
/* ==========================
   口コミ一覧
========================== */
.voice-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 60px;

  margin-top: 80px;
}

/* ==========================
   口コミカード
========================== */
.voice-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #1f3a5f;
  border-radius: 8px;
}

/* ==========================
   カード内テキスト
========================== */
.voice-number {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.voice-profile {
  margin-bottom: 8px;
  font-size: 16px;
}

/* ==========================
   星評価
========================== */
.voice-stars {
  color: #1f3a5f;
  font-size: 20px;
  letter-spacing: 8px;
  margin-bottom: 12px;
}

/* ==========================
   口コミ本文
========================== */
.voice-text {
  line-height: 1.8;
  font-size: 16px;
}

/* ==========================
   料金プラン
========================== */
.plan {
  padding: 100px 0;
  background: #f5f5f5;
}
.plan .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* ==========================
   プラン一覧
========================== */
.plan-grid {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: 80px;
}

/* ==========================
   プランカード
========================== */
.plan-card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border: 1px solid #1f3c68;
  border-radius: 8px;
}
.plan-card:first-child .plan-features li {
  margin-top: 32px;
}
.plan-card-featured .plan-features li {
  margin-bottom: 12px;
}
.plan-card-featured .plan-price {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
.plan-card-featured .plan-name {
  margin-bottom: 16px;
}

/* ==========================
   おすすめプラン
========================== */
.plan-card-featured {
  position: relative;

  box-shadow: 4px 4px 0 #1f3c68;
}

/* ==========================
   おすすめバッジ
========================== */
.plan-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  border: 1px solid #1f3c68;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #1f3c68;
}

/* ==========================
   プラン情報
========================== */
.plan-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
}
.plan-price {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 32px;
}

/* ==========================
   プラン内容
========================== */
.plan-features {
  list-style: none;
}
.plan-features li {
  margin-bottom: 20px;
  font-size: 20px;
}

/* ==========================
   注意書き
========================== */
.plan-notes {
  width: fit-content;
  margin: 60px auto 0;
  text-align: left;
  font-size: 16px;
  line-height: 2;
  color: #666;
}

/* ==========================
   補足メッセージ
========================== */
.plan-message {
  width: fit-content;
  margin: 60px auto 0;
  text-align: left;
  font-size: 20px;
  line-height: 1.8;
}

/* ==========================
   CTA
========================== */
.plan-cta {
  margin-top: 40px;
  text-align: center;
}

/* ==========================
   体験の流れ
========================== */
.flow {
  padding: 100px 0;
  background: #f5f5f5;
}
.flow .container {
  max-width: 1100px;
  margin: 0 auto;
}
.flow-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
.sp-only {
  display: none;
}

/* ==========================
   STEP一覧
========================== */
.flow-list {
  width: 700px;
  margin: 80px auto 0;
}

/* ==========================
   STEP
========================== */
.flow-item {
  display: flex;
  gap: 40px;
  position: relative;
  padding-bottom: 60px;
}

/* 縦線 */
.flow-item::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 30px;
  width: 2px;
  height: calc(100% - 20px);
  background: #d0d0d0;
}
.flow-item-last::after {
  display: none;
}

/* ==========================
   番号
========================== */
.flow-left {
  flex-shrink: 0;
}
.flow-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7CFF59;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* ==========================
   STEP情報
========================== */
.flow-content {
  flex: 1;
}
.flow-step {
  font-size: 20px;
  font-weight: 700;
  color: #888;
  margin-bottom: 20px;
}
.flow-title {
  font-size: 24px;
  font-weight: 700;
}
.flow-text {
  line-height: 1.8;
  font-size: 18px;
}

/* ==========================
   CTAセクション
========================== */
.cta {
  padding: 120px 0;
  background: #1f3c68;
  color: #fff;
}

/* ==========================
   メインコピー
========================== */
.cta .container {
  max-width: 1100px;
  margin: 0 auto;
}
.cta-title {
  text-align: center;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 80px;
}

/* ==========================
   説明文
========================== */
.cta-text {
  width: fit-content;
  margin: 0 auto 80px;
  text-align: left;
}
.cta-text p {
  font-size: 28px;
  line-height: 1.8;
  margin-bottom: 32px;
}

/* ==========================
   チェックリスト
========================== */
.cta-list {
  width: fit-content;
  margin: 0 auto 100px;
  list-style: none;
}
.cta-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 24px;
  font-size: 20px;
}
.cta-list li::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: 0;
  color: #7CFF59;
  font-size: 22px;
}

/* ==========================
   CTAボタン
========================== */
.cta .cta-button {
  padding: 24px 64px;
  font-size: 28px;
}
.cta-button-area {
  text-align: center;

  margin-bottom: 70px;
}

/* ==========================
最後の安心文
========================== */
.cta-note {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}

/* ==========================
   フッター
========================== */
.footer {
  padding: 80px 0;
  background: #1f3c68;
  color: #fff;
}
.footer .container {
  text-align: center;
}

/* ==========================
   店舗名
========================== */
.footer-logo {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 30px;
}

/* ==========================
   店舗情報
========================== */
.footer-info {
  width: fit-content;
  margin: 0 auto 40px;
  text-align: left;
  font-size: 20px;
  line-height: 1.8;
}

/* ==========================
   コピーライト
========================== */
.footer-copy {
  font-size: 20px;
}

/* ==========================
スマホ対応
========================== */
@media (max-width: 768px) {
/* ==========================
   FV
========================== */
.fv{
  padding-top: 0;
}
.fv-content {
    flex-direction: column;
}
.fv-text,
.fv-image {
  flex: none;
  width: 100%;
}
.fv-image {
  order: 1;
}
.fv-text {
  order: 2;
  padding:0 20px;
}
.fv-image img {
  height: auto;
}
.fv-title-main {
  font-size: 22px;
}
.fv-title-sub {
  font-size: 32px;
}
.fv-subtitle,
.fv-description{
  font-size:20px;
}
.fv-button-area {
  text-align: center;
  display:block;
  width:100%;
}
/* ==========================
   悩みセクション
========================== */
.problem-list,
.problem-text {
  width: 100%;
}
.problem .section-title {
  font-size: 34px;
}
.problem-list li{
  font-size: 16px;
}
.problem-list li::before {
  font-size: 20px;
  top: -3px;
}
.problem-text p {
  font-size: 18px;
}
.sp-only {
  display: block;
}
/* ==========================
   選ばれる理由
========================== */
.reason {
  padding: 64px 0;
}
.section-title {
  font-size: 34px;
  margin-bottom: 40px;
}
.reason-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}
.reason-card {
  padding: 20px;
  margin-bottom: 30px;
}
.reason-number {
  font-size: 18px;
}
.reason-card-title {
  font-size: 20px;
  margin-bottom: 32px;
}
.reason-card {
  width: 100%;
  box-sizing: border-box;
}
.reason-card p {
  font-size: 16px;
}
/* ==========================
   Before After セクション
========================== */
.before-after-grid {
  flex-direction: column;
  align-items: center;
}
.before-after-card {
  width: 100%;
  max-width: 340px;
}
.before-after .section-title {
  font-size: 28px;
}
.before-after .section-subtitle {
  font-size: 20px;
}
.before-after-info p {
  font-size: 16px;
}
.sp-only {
  display: block;
}
/* ==========================
   お客様の声セクション
========================== */
.voice-grid {
  grid-template-columns: 1fr;
}
.voice .section-title {
  font-size: 24px;
  text-align: left;
}
.voice .section-subtitle {
  font-size: 20px;
  text-align: left;
}
.voice-card{
  padding: 20px;
}
.voice-text{
  font-size:15px;
}
.sp-only {
  display: block;
}
/* ==========================
   料金プラン
========================== */
.plan-grid {
  flex-direction: column;
  align-items: center;
}
.plan-card {
  width: 100%;
  max-width: 320px;
}
.plan-notes{
  font-size:14px;
}
.plan-message{
  font-size:18px;
}
/* ==========================
   体験の流れ
========================== */
.flow-list {
  width: 100%;
}
.flow-item{
  gap:20px;
}
.flow-item::after{
  left:-10px;
}
.flow-number{
  margin-left:-20px;
}
.flow-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.section-title{
  font-size:24px;
}
.section-subtitle{
  font-size: 18px;
}
.flow-title {
  font-size: 16px;
}
.flow-text{
  font-size: 15px;
}
.flow-step {
  font-size: 18px;
  margin-bottom: 0;
}
.sp-only {
    display: block;
  }
/* ==========================
   CTAセクション
========================== */
.cta-title {
  font-size: 24px;
}
.cta-text p {
  font-size: 18px;
}
.cta-button{
  display:block;
  width:100%;
  box-sizing:border-box;
  white-space:nowrap;
}
.cta .cta-button {
  font-size: 16px;
  padding: 20px 40px;
  display:block;
  width:100%;
}
.cta-list li::before{
  font-size: 16px;
  top: -3px;
}
.cta-list li{
  font-size:16px;
  padding-left: 24px;
}
.cta-note{
  font-size: 16px;
}
/* ==========================
   フッター
========================== */
.footer-logo {
  font-size: 28px;
}
.footer-info {
  font-size: 16px;
}
}