@charset "UTF-8";

/*
  Section-ordered CSS rebuild
  Source: index.html + script.js + style_final_minified_preserve.css
  Note: Reordered for maintainability. Cascade may differ from original.
*/

/* ========================================================================
   BASE / RESET / TOKENS
======================================================================== */



:root{ 
    --blue: #5d7ea3; 
    --gold-gradient: linear-gradient(135deg, #f7ce68 0%, #fbab7e 100%);
    --card-blue: rgba(93, 126, 163, 0.7); 
    --card-bronze: rgba(145, 106, 76, 0.8);
}

*{ margin: 0; padding: 0; box-sizing: border-box; }

body{   
  font-family: "Noto Serif JP", serif;
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
  line-height: 1.6;
}


/* ========================================================================
   OPENING VIDEO
======================================================================== */

/* オープニング動画のレイヤー */
#opening-video-layer{
   position:fixed;
   top:0;
   left:0;
   width:100vw;
   height:100vh;
   background:#000;
   display:flex;
   justify-content:center;
   align-items:center;
   z-index:9999;
   overflow:hidden;
}

#opening-video{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}

/* スキップボタン */
#video-skip-btn{
    position: absolute;
    top: 20px;             /* bottom: 20px; から変更 */
    right: 20px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

#video-skip-btn:hover{
    background: rgba(103, 181, 183, 1); /* 不透明度を100%に */
    transform: scale(1.05); /* 少し大きく */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#video-mute-btn{
    position: absolute;
    top: 20px;            /* bottom: 20px; から変更 */
    right: 220px;         /* スキップボタン(right: 20px)と重ならないよう左に寄せる */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid white;
    border-radius: 50%;   /* 丸いボタンにする場合 */
    cursor: pointer;
    z-index: 10;
}

#video-mute-btn:hover{
    background: rgba(103, 181, 183, 1);
    transform: scale(1.05);
}

/* 動画が消えるときのアニメーション */
.video-fade-out{
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}




/* ========================================================================
   BACKGROUND / AMBIENT
======================================================================== */

/* 背景 */
.background-layer{
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url("img/background.webp") center/cover no-repeat;
    z-index: 0;
}

.background-layer::after{
    content: "";
    position: absolute;
    top: 20%; left: 10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(247, 206, 104, 0.15) 0%, transparent 70%);
    filter: blur(50px);
    z-index: -1;
}

#ambient-background{   position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none; }

#fairy-light-container{ position: fixed; inset: 0; pointer-events: none; z-index: -10; }


/* ========================================================================
   HERO
======================================================================== */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: radial-gradient(
circle at center,
    rgba(255,255,255,0.14),
    rgba(0,0,0,0.18)
  );}

/* 左右ブロック */
.hero-left, .hero-right{
  flex: 0 0 42%;
  padding-top: 0;
  margin-top: 0;
  text-align: left;
  position: relative;
  text-align: left;
}

.hero-left{
  flex: 0 0 44%;
  padding-top: 30px;
  padding-bottom:30px;
}

.hero-right{
  flex: 0 0 42%;
  padding-top: 0;
  margin-top: 0;
  text-align: left;
  position: relative;
  transform: translate(30px, 390px); 
 }

.hero-copy-box{
  display: inline-block;
  padding: 22px 26px;
  border-radius: 22px;
  background: rgba(0,0,0,0.3);
  rgba(15, 22, 19, 0.55) 0%,
  rgba(15, 22, 19, 0.40) 45%,
  rgba(15, 22, 19, 0.18) 100%
);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: none;
  background: linear-gradient(
    135deg,
    rgba(15,22,19,0.42) 0%,
    rgba(15,22,19,0.26) 45%,
    rgba(15,22,19,0.10) 100%
  );
}

.hero-first{
  margin-top: 380px;
  margin-left: 110px;
 }

.hero-brand{
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
 max-width: 400px;
  border-radius: 0;
  margin-top: -60px;
  margin-left:40px;
}

.hero-brand-main{
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #27352a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-shadow:
  0 1px 0 rgba(255,255,255,0.35),
  0 2px 10px rgba(255,255,255,0.18);
  white-space: nowrap;
  max-width:650px;
}

.hero-brand-main::after{
content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 38%;
  height: 210%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  animation: heroBrandShine 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* スマホ */


.hero-trust{
background:rgba(255,255,255,0.65);
padding:8px 12px;
border-radius:6px;
line-height:1.6;
font-weight:600;
color:#2f3a33;
font-size:15px;
}

/* はじめての方はこちらセクション */
/* =========================
   はじめての方へボタン
========================= */
.first-guide-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transition: transform .3s ease, box-shadow .3s ease;
  white-space: nowrap;
  min-width: 460px;
}

.first-guide-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  background: rgba(255,255,255,1);
}


/* ========================================================================
   FIRST GUIDE MODAL
======================================================================== */

/* =========================
   モーダル全体
========================= */
.guide-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 99999;
}

/* =========================
   モーダル本体
========================= */
.guide-modal-content{
 position: relative;
  width: min(1100px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,246,239,0.92));
  box-shadow: 0 25px 80px rgba(0,0,0,0.28);
}

/* =========================
   ふわっとした背景演出
========================= */
.guide-soft-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(185, 205, 180, 0.28), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(210, 226, 206, 0.35), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(230, 236, 224, 0.45), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(245,243,236,0.55));
  pointer-events: none;
  z-index: 1;
}

/* =========================
   レイアウト
========================= */
.guide-modal-grid{
    position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  padding: 48px 42px 40px;
  align-items: start;
}

/* =========================
   テキスト側
========================= */
.guide-modal-text{
  text-align: left !important;
  justify-self: start;
  align-self: start;
}

.guide-modal-text *{
  text-align: left !important;
}

.guide-modal-text h2{
  margin: 0 0 14px;
  font-size: 54px;
  line-height: 1.15;
  color: #6d7157;
  letter-spacing: 0.04em;
}

.guide-modal-text p, .guide-modal-text h2, .guide-modal-text h3, .guide-modal-text li, .guide-lead{
  text-align: left;
}

.guide-mini{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #9b9a84;
  font-weight: 700;
}

.guide-lead{
  color: #6b665c;
  font-size: 16px;
  line-height: 2;
  max-width: 540px;
  margin: 0 0 24px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.guide-booking-box{
  margin-top: 40px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.88),
    rgba(247,243,234,0.92)
  );
  box-shadow:
    0 12px 28px rgba(90,75,50,0.08),
    inset 0 0 0 1px rgba(190,170,130,0.12);
}

.guide-booking-label{
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #a79262;
  font-weight: 700;
}

.guide-booking-title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  color: #5f533c;
  font-weight: 700;
}

.guide-booking-text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #746c5f;
}

.guide-calendar-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #c8a96b, #a88445);
  box-shadow:
    0 10px 24px rgba(168,132,69,0.28),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.guide-calendar-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(168,132,69,0.34),
    inset 0 1px 0 rgba(255,255,255,0.25);
  opacity: .98;
}

.guide-calendar-arrow{
  font-size: 18px;
  line-height: 1;
}

/* ステップカード */
.guide-step-card{
  padding: 24px 26px;
  border-radius: 26px;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(130,130,130,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.guide-step-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.guide-step-item + .guide-step-item{
  margin-top: 22px;
}

.guide-step-num{
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d2c09a, #b39a69);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.guide-step-item h3{
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 1.3;
  color: #66593d;
}

.guide-step-item p{
  margin: 0;
  font-size: 19px;
  line-height: 1.9;
  color: #5d5b54;
}

/* 写真側 */
.guide-modal-visual{
  position: relative;
}

.guide-photo-wrap{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.16);
}

.guide-photo-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.35), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
  pointer-events: none;
  z-index: 2;
}

.guide-photo{
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.guide-close{
  position: absolute;
  top: 18px;
  right: 20px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: #8c8a7d;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  transition: background .3s ease, transform .3s ease;
}

.guide-close:hover{
  background: #fff;
  transform: rotate(90deg);
}

@media  (max-width: 900px){
  .guide-booking-box{
    margin-top: 22px;
    padding: 18px 16px;
    border-radius: 18px;
  }

  .guide-booking-title{
    font-size: 16px;
  }

  .guide-booking-text{
    font-size: 13px;
  }

  .guide-calendar-btn{
    padding: 15px 18px;
    font-size: 15px;
  }

  .guide-modal{
    padding: 14px;
    align-items: center;
  }

  .guide-modal-content{
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 22px;
  }

  .guide-modal-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 20px 26px;
  }

  .guide-modal-text h2{
    font-size: 36px;
  }

  .guide-lead{
    font-size: 18px;
    line-height: 1.8;
  }

  .guide-step-card{
    padding: 18px 16px;
    border-radius: 20px;
  }

  .guide-step-item{
    gap: 12px;
  }

  .guide-step-num{
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .guide-step-item h3{
    font-size: 24px;
  }

  .guide-step-item p{
    font-size: 16px;
    line-height: 1.8;
  }

  .guide-photo{
    height: 300px;
  }

  .guide-close{
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 28px;
  }
}

/* はじめての方モーダルを開いた時だけ神経ボックスを光らせる */
.nerve-message{
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 20px;
  position: relative;
  overflow:visible;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.85),
    rgba(246,242,233,0.90)
  );
  box-shadow:
    0 12px 28px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(180,160,120,0.12);
  transition: background .3s ease, box-shadow .3s ease, filter .3s ease;
}

.nerve-message h3{
  font-size: 22px;
  margin-bottom: 12px;
  color: #5f533c;
  font-weight: 700;
}

.nerve-message p{
  font-size: 15px;
  line-height: 1.9;
  color: #6d675c;
  margin-bottom: 10px;
}

.nerve-message strong{
  color: #a88445;
  font-weight: 700;
}

.flash-nerve{
  animation: nerveGlowInside 0.7s ease-out 1;
}

/* --- 1. 予約ボタン周りの整理 --- */
.guide-text{
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* --- 予約ボタンをさらに目立たせる設定 --- */
/* 1. ボタン本体をパワーアップ */
/* 2. 脈動アニメーションの定義（これを追加！） */
/* 3. ガイドテキスト（ボタンの上の文字）も目立たせる */
.guide-text{
    font-size: 1.1rem;
    color: #f7ce68; /* 金色にしてボタンとセットにする */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}


/* ========================================================================
   LIFE CHANGE SECTION
======================================================================== */

/* なぜ、あなたの症状は何度もセクション */
.life-change-section{
  width: 100%;
  text-align:center;
}

.intro-special-zone{
  width: 100%;
  text-align: center;
}

.intro-massive-wrap{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

#FORCE-BIG-TITLE{
  font-size: 3.2rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 24px;
  text-align: center;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

#FORCE-BIG-TITLE::after{
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: #f7ce68;
  margin: 15px auto 0;
}

.frame-question-container{
  max-width: 1100px;
  margin: 56px auto 0;
  text-align: center;
}

.frame-inner-border{
  display: inline-block;
  padding: 30px 40px;
  border: 1px solid rgba(247, 206, 104, 0.6);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.frame-text{
  font-size: 1.6rem;
  line-height: 1.8;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}

@media  (max-width: 850px) {
  #FORCE-BIG-TITLE{
    font-size: 1.8rem;
    letter-spacing: 0.08em;
  }

  .frame-text{
    font-size: 1.1rem;
  }

  .frame-inner-border{
    padding: 20px 24px;
  }
}

/* 巨大な右斜めメッセージ */
.message-reveal-area{ margin: 20px 0 10px; }

.reveal-text-tilt{
    margin-bottom:0;
    font-size: 3rem; line-height: 1.4; font-weight: bold; transform: rotate(-4deg); display: inline-block;
    background: linear-gradient(135deg, #fff5e1 0%, #f7ce68 50%, #fff5e1 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
　　}

.reveal-text-tilt .main-msg{ font-size: 1.2em; display: block; margin-top: 10px;}

.reveal-text-tilt.js-reveal{
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
  align-self: center;
}

.section-title-main{ font-size: 1.6rem; margin: 10px 0 30px;width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
  align-self: center;
 }

.cards-container{
    display: flex;
    justify-content: center;
    gap: 10px; /* 扇形にするため少し狭めて重ねる */
    width: 95%;
    max-width: 1000px;
    margin: 50px auto;
    perspective: 1500px; /* 奥行きを強調 */
}

.life-card{
    flex: 1;
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: var(--card-blue);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    /* 回転の軸を下端中央に設定（扇の要） */
    transform-origin: center bottom; 
}

/* ホバー時は正面を向いて飛び出す */
.life-card:hover{
    transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px) scale(1.1) !important;
    z-index: 100;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    filter: brightness(1.1);
}

.card-bronze{ background: var(--card-bronze); }


.sp-first-cta {
  display: none !important;
}


/* ========================================================================
   PROBLEMS SECTION
======================================================================== */

/* こんな悩みありませんか？セクション */
.problems-section{
  background: transparent;
  padding: 10px 20px 20px;
}

.problems-container{
  max-width: 1100px;
  margin: 0 auto;
}

.section-head{
   text-align: center;
  margin-bottom: 28px;
}

.section-label{
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f7ce68;
  border-bottom: 2px solid rgba(247, 206, 104, 0.7);
  padding-bottom: 4px;
}

.section-head h2{
 margin: 0 0 14px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.section-subtext{
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.problems-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.problem-card{
   min-height: 210px;
  background: rgba(10, 16, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 3px solid rgba(247, 206, 104, 0.85);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.problem-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.problem-icon{
 width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #c9a84f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 0 18px;
}

.problem-card h3{
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.5;
  color: #ffffff;
}

.problem-card p{
 margin: 0;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.86);
}



@media  (max-width: 600px) {
  .problems-section{
     padding: 42px 16px 16px;
  }

  .problems-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .section-head{
    margin-bottom: 36px;
  }

  .section-head h2{
    font-size: 26px;
  }

  .section-subtext{
    font-size: 15px;
  }

  .problem-card{
    min-height: auto;
    padding: 22px 18px;
  }

  .problem-card h3{
    font-size: 18px;
  }
}

.section-heading{
  text-align: center;
  margin-bottom: 50px;
}

.section-label{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #2f7ddf;
}

.section-heading h2{
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3;
  color: #17324d;
}

@media  (max-width: 767px) {
  .course-section{
    padding: 70px 16px;
  }

  .section-heading{
    margin-bottom: 36px;
  }

  .course-card-head{
    padding: 28px 18px 84px;
  }

  .course-card-head h3{
    font-size: 1.7rem;
  }

  .course-card-head p, .course-sub{
    font-size: 0.98rem;
  }

  .course-card-body{
    padding: 0 18px 24px;
  }

  .course-price{
    font-size: 3rem;
  }

  .course-price span{
    font-size: 1.2rem;
  }

  .course-image img{
    height: 190px;
  }

  .course-list li{
    font-size: 1rem;
    padding-left: 38px;
  }

  .course-btn{
    min-width: 100%;
    font-size: 1.1rem;
  }

  .popular-badge{
    width: 74px;
    height: 74px;
    font-size: 0.8rem;
  }

  .recommend-badge{
    font-size: 0.82rem;
    padding: 8px 14px;
  }
}


/* ========================================================================
   COMPARISON SECTION
======================================================================== */

/* 写真を光らせ、背景に溶け込ませる演出 */
/* 上下をふわっと暗闇に溶け込ませるマスク */
/* 写真の背後から溢れる光の演出 */
/* 比較セクション全体のスタイル */
.comparison-section{
    width: 95%;
  max-width: 950px;
  margin: 70px auto 90px;
}

.comparison-container{
   display:flex;
    gap:30px;
    justify-content:center;
    align-items:stretch;
}

.comparison-card{
    flex:1;
    padding:40px 30px;
    border-radius:24px;
    position:relative;
    backdrop-filter:blur(10px);
    transition:all .35s ease;
}

/* 左側：従来の施術（少し抑えめ） */
.card-off{
   background:linear-gradient(
180deg,
rgba(40,40,40,0.9),
rgba(20,20,20,0.9)
);

border:1px solid rgba(255,255,255,0.08);
}

/* 右側：当院の施術（目立たせる） */
.card-on{
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(247,206,104,0.6);
    box-shadow:0 0 35px rgba(247,206,104,.35);
    transform:scale(1.08);
    transform: scale(1.03);
}

.comparison-list{
  list-style: none;
  text-align: left;
  display: block;
  margin-top: 10px;
}

.comparison-list li{
  font-size:1.15rem;
  margin-bottom:14px;
  line-height:1.7;
}

/* チェックマークの装飾 */
.comparison-list li::before{
   color:#f7ce68;
    font-size:1.1rem;
}

/* スマホ対応 */


/* スマホ対応 */



/* ========================================================================
   REASON LEAD SECTION
======================================================================== */

/* ===============================
   なぜよりそい整体院Ⅰありがとうは驚きの結果
=============================== */
.reason-lead-section{
    width: 92%;
    max-width: 1080px;
    margin: 80px auto 40px;
    padding: 0 20px;
    position: relative;
}

.reason-lead-frame{
    position: relative;
    padding: 58px 40px 54px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        linear-gradient(180deg, rgba(14,14,14,0.88), rgba(6,6,6,0.96));
    border: 1px solid rgba(247, 206, 104, 0.28);
    box-shadow:
        0 18px 50px rgba(0,0,0,0.45),
        0 0 40px rgba(247, 206, 104, 0.10);
    text-align: center;
}

.reason-lead-frame::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 0%, rgba(247,206,104,0.18), transparent 45%),
        radial-gradient(circle at 10% 100%, rgba(93,126,163,0.10), transparent 35%);
    pointer-events:none;
}

.reason-lead-frame::after{
    content:"";
    position:absolute;
    left:50%;
    top:22px;
    transform:translateX(-50%);
    width:120px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(247,206,104,0.9), transparent);
}

.reason-lead-en{
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    font-size: 0.85rem;
    letter-spacing: 0.38em;
    color: rgba(247, 206, 104, 0.88);
    font-weight: 700;
}

.reason-lead-title{
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

.reason-lead-title span{
    display: inline-block;
    margin: 0 0.15em;
    background: linear-gradient(135deg, #fff5e1 0%, #f7ce68 45%, #fff5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.reason-lead-sub{
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 20px auto 0;
    font-size: 1rem;
    line-height: 2;
    color: rgba(255,255,255,0.82);
    text-align:center;
}

/* スマホ */



/* ========================================================================
   METHOD SECTION
======================================================================== */

.method-bridge{
text-align:center;
margin:35px auto 20px;
font-size:1.2rem;
letter-spacing:.1em;
background:linear-gradient(
135deg,
#fff5e1,
#f7ce68,
#fff5e1
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* --- 3連ボックス：上下黒帯フレーム構成 --- */
.synapse-container{
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 15px;
    flex-wrap: wrap;
}

.synapse-item{
    flex: 1;
    min-width: 300px;
}

/* 上下の帯と画像をまとめるラッパー */
.synapse-box-wrapper{
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* 全体を角丸にする */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7);
}

/* 上下の黒帯共通スタイル */
.synapse-label-bar{
    background: rgba(0, 0, 0, 0.9); /* 濃い黒 */
    color: #fff;
    padding: 12px 0;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative;
    z-index: 30; /* 説明文より前に出す */
}

/* 下の文字は金文字で強調 */
/* 画像エリア（ここだけがホバーに反応する） */
.synapse-image-area{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #000;
}

.synapse-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ホバー時の説明文（画像エリア内だけで展開） */
.synapse-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 20;
}

.synapse-description{
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ホバー挙動 */
.synapse-image-area:hover .synapse-overlay{
    opacity: 1;
}

.synapse-box-wrapper:hover .synapse-img{
    transform: scale(1.1);
}

/* --- 3連ボックス：下部集約デザイン --- */
.synapse-container{
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 15px;
    flex-wrap: wrap;
}

.synapse-item{
    flex: 1;
    min-width: 300px;
}

.synapse-box-wrapper{
    background: rgba(0, 0, 0, 0.8); /* ボックス全体の背景 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* 画像エリア */
.synapse-image-area{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.synapse-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* 常時表示される下部エリア */
/* 目的（身体バランスを整える等） */
/* 施術名（① QTEメソッド等） */
/* ホバー時の説明文（画像部分のみに被る） */
.synapse-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
}

.synapse-description{
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ホバー挙動 */
.synapse-image-area:hover .synapse-overlay{
    opacity: 1;
}

.synapse-box-wrapper:hover .synapse-img{
    transform: scale(1.1);
}


/* ========================================================================
   TREATMENT DETAIL AREA
======================================================================== */

.detail-flex-container{
    display: flex;       /* これが横並びの魔法です */
    align-items: center;
    gap: 40px;
}

@media  (max-width: 850px) {
    .detail-flex-container{
        flex-direction: column-reverse; /* スマホでは縦に並ぶ */
    }
}

/* --- 検査ブロックのバランス調整 --- */
.treatment-detail-area{
    width: 95%;
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 30px;
    border: 1px solid rgba(247, 206, 104, 0.2);
    display: block; /* セクション自体はブロック */
}

.detail-flex-container{
    display: flex !important; /* 強制的に横並び */
    align-items: center;      /* 上下中央 */
    justify-content: space-between;
    gap: 40px;
}

/* 左側：説明文（幅を55%に固定） */
.detail-text-side{
    flex: 1.2;
    text-align: left;
}

/* 右側：画像エリア（幅を40%に固定） */
.detail-image-side{
    flex: 0 0 40%;
    text-align: center;
}

/* スマホ表示の時は縦に並べて画像を小さくする */
@media  (max-width: 850px) {
    .detail-flex-container{
        flex-direction: column !important; /* 文章が上、画像が下 */
    }
    .detail-text-side, .detail-image-side{
        flex: 0 0 100%;
        width: 100%;
    }
    .detail-image-side{
        order: -1; /* スマホでは画像を先に（上に）見せる場合はこれ、不要なら削除 */
    }
}

/* --- 検査詳細セクションのレイアウト調整 --- */
.treatment-detail-area{
 width: 95%;
    max-width: 1050px;
    margin: 80px auto;
    padding: 60px 40px;
    background: rgba(15, 20, 25, 0.75); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px; 
    border: 1px solid rgba(247, 206, 104, 0.2); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.detail-flex-container{
    display: flex;
    align-items: center;    /* 上下中央揃え */
    justify-content: space-between;
    gap: 50px;              /* 説明と画像の間隔 */
}

/* 左側：説明文（全体の約55%） */
.detail-text-side{
    flex: 1.3;
    text-align: left;
    /* 背景が暗いので、少し文字に厚みを持たせる */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
}

.detail-title{
   font-size: 1.8rem;
    color: #f7ce68;
    border-left: 6px solid #f7ce68;
    padding-left: 20px;
    margin-bottom: 30px;
    /* 文字に少しだけ光（グロー）を入れると背景に負けません */
    text-shadow: 0 0 12px rgba(247, 206, 104, 0.4);
}

.detail-desc{
    color: #f0f0f0; 
    line-height: 2.2; 
    font-size: 1.1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* 右側：画像エリア（全体の約40%に抑える） */
.detail-image-side{
    flex: 1;
    max-width: 400px; /* ★ここが重要：画像の最大幅を制限 */
    text-align: center;
}

/* スマホ対応：画面が狭いときは縦並び */
@media  (max-width: 850px) {
    .detail-title{
        font-size: 1.5rem;
    }
    .detail-desc{
        font-size: 1rem;
        line-height: 2.0;
    }
}


/* ========================================================================
   METHOD IMPACT SECTION
======================================================================== */

/* --- 2. インパクトメッセージ本体（パソコン用） --- */
.impact-message-area{
    margin-top: -60px;   /* 予約ボタンとの間隔をギュッと詰める */
    margin-bottom: 40px;
    text-align: center;
    z-index: 50;
    position: relative;
}

.impact-title{
   font-size: 3.5rem; 
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #fff5e1 0%, #f7ce68 50%, #fff5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    display: block;
    text-align: center;
}

.impact-sub{
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- 4. スマホ用の調整（最後に1つだけ置く） --- */
@media  (max-width: 850px) {
    .impact-message-area{
        margin-top: -20px;
    }
    .impact-title{
        font-size: 2.0rem; /* スマホでは読みやすいサイズに */
    }
    .impact-sub{
        font-size: 1.0rem;
    }
    }

/* ===============================
施術インパクトメッセージ
=============================== */
.method-impact-section{

max-width:900px;
margin:90px auto 70px;
text-align:center;
padding:40px 30px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(247,206,104,0.35);
border-radius:28px;

backdrop-filter:blur(8px);

box-shadow:
0 0 40px rgba(247,206,104,0.15),
0 20px 60px rgba(0,0,0,0.6);

}

/* メインタイトル */
.method-impact-title{

font-size:2.3rem;
font-weight:700;
line-height:1.6;
letter-spacing:.08em;
margin-bottom:20px;
background:linear-gradient(
135deg,
#ffffff,
#fff5e1,
#f7ce68,
#fff5e1
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0 4px 20px rgba(0,0,0,.4);
}

/* サブコピー */
.method-impact-sub{

font-size:1.1rem;
line-height:2;
color:rgba(255,255,255,.85);

}

/* 強調文字 */
.method-impact-sub span{

font-size:1.35rem;
font-weight:700;

background:linear-gradient(
135deg,
#fff5e1,
#f7ce68,
#fff5e1
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* スマホ */



/* ========================================================================
   FIT SECTION
======================================================================== */

.speech-bubble-mini{ background: #fff; color: #333; padding: 4px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: bold; margin-bottom: 12px; width: fit-content; }

/* 向いている人、向いていない人 セクション */
.fit-section{
  width: 95%;
  max-width: 1100px;
  margin: 90px auto 70px;
  padding: 20px 0;
  position: relative;
}

.fit-section-inner{
  text-align: center;
}

.fit-section-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #f7ce68;
  font-weight: 700;
}

.fit-section-title{
  font-size: 2.6rem;
  line-height: 1.4;
  color: #2f2a24;
  margin-bottom: 18px;
  text-shadow: 0 2px 8px rgba(255,255,255,0.35);
}

.fit-section-title::after{
  content: "";
  display: block;
  width: 180px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 159, 70, 0.8),
    transparent
  );
}

.fit-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 42px;
}

/* 左カード */
.fit-card-good{
  background:
    linear-gradient(180deg, rgba(235, 244, 225, 0.72), rgba(255, 255, 255, 0.55)),
    radial-gradient(circle at 10% 100%, rgba(196, 212, 160, 0.28), transparent 40%);
}

/* 右カード */
.fit-card-bad{
  background:
    linear-gradient(180deg, rgba(238, 238, 238, 0.72), rgba(255, 255, 255, 0.55)),
    radial-gradient(circle at 90% 100%, rgba(180, 180, 180, 0.18), transparent 40%);
}

.fit-card-head{
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}

.fit-icon{
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.fit-icon-good{
  background: #93b37b;
  color: #ffffff;
}

.fit-icon-bad{
  background: #b8b8b8;
  color: #ffffff;
}

.fit-head-sub{
  font-size: 1rem;
  color: rgba(60, 52, 45, 0.85);
  margin-bottom: 4px;
}

.fit-head-text h3{
  font-size: 2.4rem;
  line-height: 1.25;
  color: #2f2a24;
  font-weight: 500;
}

.fit-divider{
  position: relative;
  height: 1px;
  margin: 10px 0 24px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 159, 70, 0.55),
    transparent
  );
}

.fit-divider::after{
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%);
  font-size: 14px;
  color: #c59f46;
  background: rgba(255,255,255,0.35);
  padding: 0 8px;
}

.fit-list{
  list-style: none;
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.fit-list li{
  position: relative;
  padding-left: 42px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #2f2a24;
}

.fit-list li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(147, 179, 123, 0.88);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.fit-list-bad li::before{
  content: "✕";
  background: rgba(160, 160, 160, 0.95);
}

@media  (max-width: 900px) {
  .fit-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fit-card{
    padding: 28px 22px 24px;
  }

  .fit-head-text h3{
    font-size: 2rem;
  }

  .fit-section-title{
    font-size: 2rem;
  }
}

@media  (max-width: 600px) {
  .fit-card-head{
    gap: 16px;
    margin-bottom: 20px;
  }

  .fit-icon{
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    font-size: 34px;
  }

  .fit-head-text h3{
    font-size: 1.6rem;
  }

  .fit-list li{
    font-size: 1rem;
    padding-left: 38px;
  }

  .fit-section-title{
    font-size: 1.7rem;
  }
}


/* ========================================================================
   BELIEF SECTION
======================================================================== */

.belief-section{
  position: relative;
  padding: 40px 20px;
  background:
    radial-gradient(circle at top left, rgba(214, 192, 148, 0.25), transparent 35%),
    radial-gradient(circle at bottom right, rgba(214, 192, 148, 0.18), transparent 35%),
    linear-gradient(180deg, #fbf8f1 0%, #f3ecdf 100%);
  overflow: hidden;
}

.belief-container{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.belief-heading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 60px;
}

.belief-heading h2{
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.3;
  color: #5b4032;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.belief-line{
  width: 140px;
  height: 1px;
  background: rgba(91, 64, 50, 0.25);
}

.belief-content{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 55px;
  align-items: start;
}

.belief-main-image{
  position: relative;
}

.belief-main-image img{
  width: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 20px 45px rgba(91, 64, 50, 0.10);
  position: relative;
  z-index: 2;
}

.belief-main-image::after{
  content: "";
  position: absolute;
  inset: auto 0 -30px 0;
  height: 120px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 75%);
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

.belief-text-area{
  position: relative;
  padding-top: 6px;
}

.belief-text-block{
  padding: 10px 0;
  border-bottom: 1px solid rgba(91, 64, 50, 0.12);
}

.belief-text-block:first-child{
  padding-top: 0;
}

.belief-text-block p{
  margin: 0;
  font-size: 1.45rem;
  line-height:1.6;
  color: #3f342d;
  font-weight: 500;
}

.belief-text-block .highlight{
  color: #b27b1b;
  font-weight: 700;
}

.belief-sub-image{
  width: 320px;
  margin: 34px 0 0 auto;
  transform: rotate(3deg);
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(91, 64, 50, 0.14);
}

.belief-sub-image img{
  width: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.belief-footer{
  max-width: 720px;
  margin: 20px auto 0;
  padding-top: 38px;
  border-top: 1px solid rgba(91, 64, 50, 0.14);
  position: relative;
  z-index: 2;
}

.belief-footer p{
  margin: 0;
  font-size: 2rem;
  line-height: 1.9;
  color: #3d312b;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.belief-decoration{
  position: absolute;
  right: -20px;
  bottom: -10px;
  width: 260px;
  opacity: 0.95;
  pointer-events: none;
}

.belief-decoration img{
  width: 100%;
  display: block;
}

/* タブレット */
@media  (max-width: 991px) {
  .belief-section{
    padding: 80px 20px;
  }

  .belief-content{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .belief-main-image{
    max-width: 760px;
    margin: 0 auto;
  }

  .belief-text-area{
    max-width: 760px;
    margin: 0 auto;
  }

  .belief-sub-image{
    width: 280px;
  }

  .belief-footer{
    margin-top: 55px;
    padding-top: 30px;
  }

  .belief-footer p{
    font-size: 1.7rem;
  }

  .belief-decoration{
    width: 190px;
    right: -10px;
    bottom: -10px;
  }
}

/* スマホ */
@media  (max-width: 767px) {
  .belief-section{
    padding: 65px 16px;
  }

  .belief-heading{
    gap: 14px;
    margin-bottom: 25px;
  }

  .belief-heading h2{
    font-size: 2rem;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.05em;
  }

  .belief-line{
    width: 40px;
  }

  .belief-content{
    gap: 28px;
  }

  .belief-main-image img{
    border-radius: 14px;
  }

  .belief-text-block{
    padding: 16px 0;
  }

  .belief-text-block p{
    font-size: 1rem;
    line-height: 1.95;
  }

  .belief-sub-image{
    width: 72%;
    max-width: 25
0px;
    margin: 22px 0 0 auto;
    padding: 7px;
  }

  .belief-footer{
    margin-top: 38px;
    padding-top: 22px;
  }

  .belief-footer p{
    font-size: 1.15rem;
    line-height: 1.9;
  }

  .belief-decoration{
    width: 120px;
    right: -18px;
    bottom: -4px;
    opacity: 0.7;
  }
}


/* ========================================================================
   FLOW SECTION
======================================================================== */

.flow-section{
  padding:80px 20px 140px;
  background:transparnet;
  position:relative;
}

.flow-section::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:120px;
background:linear-gradient(
to bottom,
rgba(0,0,0,0),
#ffffff
);
}

.flow-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.flow-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

.flow-image-wrap{
  position: relative;
}

.flow-image-wrap img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.flow-step{
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9fe7ef, #7cced7);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(124, 206, 215, 0.35);
}

.flow-card h3{
  margin: 42px 0 16px;
  font-size: 26px;
  line-height: 1.5;
  color: #2f3b44;
  text-align: center;
}

.flow-card p{
  text-align: left;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
  color: #555;
}

.flow-card, .flow-card *{
  text-align: left;
}

@media  (max-width: 991px) {
  .flow-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media  (max-width: 767px) {
  .flow-section{
    padding: 60px 16px;
  }

  .flow-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top:-60px;
  }

  .flow-card{
    padding: 0 20px 24px;
    border-radius: 16px;
  }

  .flow-image-wrap img{
    height: 220px;
  }

  .flow-step{
    width: 52px;
    height: 52px;
    font-size: 18px;
    bottom: -20px;
  }

  .flow-card h3{
    font-size: 20px;
    margin: 36px 0 14px;
  }

  .flow-card p{
    font-size: 16px;
    line-height: 1.8;
  }
}

.flow-lead{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 70px;
  padding: 0 20px;
  text-align: center;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.9;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 20px auto 80px;
}


/* ========================================================================
   COURSE SECTION
======================================================================== */

/* コース紹介セクション */
.course-section{
  padding: 100px 20px;
  background:
    radial-gradient(circle at top, rgba(120, 190, 255, 0.10), transparent 35%),
    linear-gradient(180deg, #f8fcff 0%, #eef6fb 100%);
}

.course-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.course-card{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:
    0 18px 40px rgba(22, 48, 80, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.course-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 26px 54px rgba(22, 48, 80, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.course-card-head{
  position: relative;
  padding: 34px 24px 92px;
  text-align: center;
  color: #fff;
}

.course-card-head::after{
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -52px;
  height: 100px;
  background: rgba(255,255,255,0.94);
  border-radius: 0 0 50% 50%;
}

.course-card-head h3{
  margin: 0 0 14px;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 800;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}

.course-card-head p{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  opacity: 0.98;
}

.course-sub{
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.96);
}

.course-card-body{
  position: relative;
  z-index: 2;
  padding: 0 26px 30px;
}

.course-price{
  margin: 0 0 22px;
  text-align: center;
  font-size: 3.6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.course-price span{
  font-size: 1.5rem;
  margin-left: 6px;
  font-weight: 700;
}

.course-image{
  margin-bottom: 24px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
}

.course-image img{
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.course-list{
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.course-list li{
  position: relative;
  padding: 16px 0 16px 42px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #24384d;
  border-bottom: 1px solid rgba(30, 60, 90, 0.08);
}

.course-list li::before{
  content: "✓";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 800;
}

.course-btn{
  display: block;
  width: fit-content;
  min-width: 220px;
  margin: 0 auto;
  padding: 16px 28px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 10px 20px rgba(0,0,0,0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.course-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 14px 24px rgba(0,0,0,0.18);
  opacity: 0.96;
}

/* カラー */
.course-card.blue .course-card-head{
  background: linear-gradient(135deg, #72c8ff 0%, #2f7de5 100%);
}

.course-card.blue .course-price, .course-card.blue .course-list li::before{
  color: #2572d8;
}

.course-card.blue .course-btn{
  background: linear-gradient(180deg, #4aa5ff 0%, #1f63d1 100%);
}

.course-card.green .course-card-head{
  background: linear-gradient(135deg, #88db5e 0%, #2eaa38 100%);
}

.course-card.green .course-price, .course-card.green .course-list li::before{
  color: #36a23d;
}

.course-card.green .course-btn{
  background: linear-gradient(180deg, #38c95f 0%, #1a8d34 100%);
}

.course-card.orange .course-card-head{
  background: linear-gradient(135deg, #ffbf57 0%, #f08b10 100%);
}

.course-card.orange .course-price, .course-card.orange .course-list li::before{
  color: #d97c06;
}

.course-card.orange .course-btn{
  background: linear-gradient(180deg, #ffab22 0%, #e07b00 100%);
}

/* おすすめ中央 */
.course-card.featured{
  transform: translateY(-10px);
  box-shadow:
    0 30px 60px rgba(38, 122, 45, 0.22),
    0 0 0 2px rgba(102, 214, 90, 0.18);
}

.course-card.featured:hover{
  transform: translateY(-16px);
}

/* レスポンシブ */
@media  (max-width: 1024px) {
  .course-grid{
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .course-card.featured{
    order: -1;
    transform: translateY(0);
  }

  .course-card.featured:hover{
    transform: translateY(-8px);
  }
}


/* ========================================================================
   48-HOUR RULE SECTION
======================================================================== */

/* 48時間ルール */
.rule48-section{
  padding: 90px 20px 40px;
}

.rule48-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.rule48-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 46px;
}

.rule48-label{
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #5f8fd8;
}

.rule48-header h2{
  margin: 0 0 20px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.35;
  color: #1e2f45;
}

.rule48-lead{
  margin: 0;
  font-size: 1rem;
  line-height: 2;
  color: #5d6c7c;
}

.rule48-main-card{
  padding: 42px 34px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  box-shadow:
    0 20px 50px rgba(22, 48, 80, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.65);
}

.rule48-main-text{
  max-width: 860px;
  margin: 0 auto 34px;
  text-align: center;
}

.rule48-main-text p{
  margin: 0;
  font-size: 1.08rem;
  line-height: 2;
  color: #314255;
}

.rule48-main-text strong{
  color: #1f5fc4;
  font-weight: 800;
}

.rule48-points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.rule48-point{
  padding: 28px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,250,255,0.92) 100%);
  box-shadow: 0 12px 28px rgba(31, 77, 138, 0.08);
  text-align: center;
}

.rule48-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #89d8ff 0%, #4f87ff 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 20px rgba(79, 135, 255, 0.28);
}

.rule48-point h3{
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #22354a;
}

.rule48-point p{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
  color: #5c6b79;
}

/* タブレット */
@media  (max-width: 991px) {
  .rule48-points{
    grid-template-columns: 1fr;
  }

  .rule48-main-card{
    padding: 36px 24px;
  }
}

/* スマホ */
@media  (max-width: 767px) {
  .rule48-section{
    padding: 70px 16px 30px;
  }

  .rule48-header{
    margin-bottom: 32px;
  }

  .rule48-header h2{
    font-size: 2rem;
  }

  .rule48-lead{
    font-size: 0.96rem;
    line-height: 1.9;
  }

  .rule48-main-card{
    padding: 28px 18px;
    border-radius: 20px;
  }

  .rule48-main-text{
    margin-bottom: 24px;
  }

  .rule48-main-text p{
    font-size: 0.98rem;
    line-height: 1.9;
  }

  .rule48-point{
    padding: 24px 18px;
    border-radius: 18px;
  }

  .rule48-step{
    width: 52px;
    height: 52px;
    font-size: 0.95rem;
    margin-bottom: 14px;
  }

  .rule48-point h3{
    font-size: 1.1rem;
  }

  .rule48-point p{
    font-size: 0.95rem;
    line-height: 1.8;
  }
}


/* ========================================================================
   TRAVEL / ACCESS SECTION
======================================================================== */

/* 交通費セクション */
.travel-section{
  padding: 100px 20px;
  background: linear-gradient(180deg, #0f1115 0%, #181d25 100%);
  color: #fff;
}

.travel-container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 50px;
  align-items: center;
}

.travel-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.travel-content{
  text-align: left;
}

.travel-subtitle{
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  margin-bottom: 14px;
}

.travel-title{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 18px;
  color: #fff;
}

.travel-lead{
  font-size: 1rem;
  line-height: 2;
  color: rgba(255,255,255,0.85);
  margin-bottom: 32px;
}

.travel-fee-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.travel-fee-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.travel-fee-item .area{
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

.travel-fee-item .price{
  font-size: 1rem;
  font-weight: 700;
  color: #9fe7c4;
  white-space: nowrap;
}

.travel-note{
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
}

/* タブレット・スマホ */
@media  (max-width: 900px) {
  .travel-container{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .travel-image{
    order: 1;
  }

  .travel-content{
    order: 2;
  }
}

@media  (max-width: 600px) {
  .travel-section{
    padding: 70px 16px;
  }

  .travel-fee-item{
    flex-direction: column;
    align-items: flex-start;
  }

  .travel-fee-item .price{
    white-space: normal;
  }
}


/* ========================================================================
   CASE LEAD SECTION
======================================================================== */

.case-lead-title{
text-align:center;
font-size:2.6rem;
font-weight:700;
letter-spacing:.08em;
color:#b4892d;
text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.case-lead-sub{
text-align:center;
margin-top:15px;
font-size:1rem;
color:#5e5548;
}

/* ===============================
   改善事例カード
=============================== */
.case-cards-section{
  padding: 10px 20px 70px;
}

.case-cards-inner{
  max-width: 1180px;
  margin: 0 auto;
}

.case-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.case-compare{
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 8px;
  align-items: center;
  padding: 20px 20px 0;
}

.case-side{
  position: relative;
}

.case-badge{
  display: inline-block;
  margin-bottom: 10px;
  color: #f7ce68;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

.case-image{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.case-arrow{
  color: #f7ce68;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.case-mark{
  position: absolute;
  top: 40px;
  right: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.92);
  font-size: 20px;
  font-weight: 700;
}

.case-mark.ng{ color: #c05f5f; }

.case-mark.ok{ color: #6ea86b; }

.case-body{
  padding: 24px 22px 30px;
}

.case-person{
  margin: 0 0 16px;
  color: #f7ce68;
  font-size: 28px;
  line-height: 1.5;
}

.case-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(247,206,104,0.20);
}

.case-list li{
  padding: 12px 0;
  border-bottom: 1px solid rgba(247,206,104,0.15);
  color: rgba(255,255,255,0.92);
  font-size: 17px;
  line-height: 1.8;
}

.case-list li span{
  display: inline-block;
  min-width: 56px;
  margin-right: 10px;
  color: #f7ce68;
  font-weight: 700;
}

.case-comment{
  margin: 16px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 1.8;
}

@media  (max-width: 991px){
  .case-grid{
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
}

@media  (max-width: 767px){
  .case-cards-section{
    padding: 0 16px 50px;
  }

  .case-compare{
    grid-template-columns: 1fr 26px 1fr;
    padding: 16px 16px 0;
  }

  .case-image{
    height: 150px;
  }

  .case-arrow{
    font-size: 18px;
  }

  .case-mark{
    top: 34px;
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .case-body{
    padding: 16px 16px 20px;
  }

  .case-person{
    font-size: 21px;
  }

  .case-list li{
    font-size: 15px;
  }

  .case-comment{
    font-size: 14px;
  }
}


/* ========================================================================
   TRUST SECTION
======================================================================== */

/* 患者様との写真一覧 */
.trust-section{
  width: 95%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 36px 32px;
  border-radius: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(247, 206, 104, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trust-flex-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trust-text-area{
  flex: 0 0 42%;
  text-align: left;
  padding-left: 10px;
}

.trust-title{
  color: #2f3b2f;
  text-shadow: 0 2px 8px rgba(255,255,255,0.35);
}

.trust-desc{
 color: #3e3a32;
  text-shadow: 0 1px 6px rgba(255,255,255,0.25);
}

/* 右の置き場 */
/* 少し斜めに置く */
/* 写真フレーム本体 */
.trust-photo-wrap{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  transform: rotate(5deg);
}

.trust-photo-slider{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(247,206,104,0.28);
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.28),
    0 10px 24px rgba(0,0,0,0.14);
}

/* 斜めの光 */
/* 画像の切り替え */
/* 光ワイプ */
/* 少し浮く感じ */
/* スマホ */



/* ========================================================================
   VIDEO IMPROVEMENT SECTION
======================================================================== */

/* 青色の目立つボタン */
.athlete-toggle-btn{
    background: linear-gradient(135deg, #1d5eff 0%, #0a47c5 100%);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(10, 71, 197, 0.25);
    transition: all 0.3s;
}

.athlete-toggle-btn:hover{
    background: linear-gradient(135deg, #0a47c5 0%, #083996 100%);
    transform: translateY(-2px);
}

.video-card{ flex: 1; min-width: 300px; max-width: 500px; }

/* 動画カード全体の調整 */
.video-card{
    background: transparent;
    padding: 0;
}

/* 青色の目立つボタン */
.athlete-toggle-btn{
    background: linear-gradient(135deg, #1d5eff 0%, #0a47c5 100%);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(10, 71, 197, 0.25);
    transition: 0.3s;
}

.athlete-toggle-btn:hover{
    background: linear-gradient(135deg, #0a47c5 0%, #083996 100%);
}

/* ★ 動画下の黒帯背景と白文字 */
.video-caption-bar{
    background: rgba(8,10,16,0.92);
    color: #fff;
    padding: 12px 10px;
    text-align: center;
}

.video-caption-bar p{
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/* ========================================================================
   VOICE SECTION
======================================================================== */

/* --- 患者様の声セクション --- */
.voice-section{
text-align:center;
padding:60px 20px;
max-width:1200px;
margin:auto;
color:white;
margin-bottom:40px;
}

/* タイトル */
.voice-sub{
letter-spacing:6px;
color:#d6b46b;
font-size:14px;
}

.voice-title{

font-size:42px;
margin:10px 0 20px;
color:#f6e2b5;

}

/* 口コミ */
.voice-main{
display:grid;
  grid-template-columns: 280px 560px 280px;
  gap:34px;
  align-items:center;
  justify-content:center;
  margin:80px auto 60px;
}

.review-card{
background:rgba(12,12,16,0.62);
  padding:28px 24px;
  border-radius:22px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.35),
    0 0 18px rgba(255,210,120,0.10);
  text-align:center;}

.review-card:nth-child(3){
transform:rotate(2deg);
}

.voice-left{
  transform:rotate(-7deg);
}

.voice-right{
  transform:rotate(7deg);
}

.review-card:hover{
transform:scale(1.05);
box-shadow:0 0 50px rgba(255,220,120,0.8);
}

.review-stars{
 color:#ffd86b;
  font-size:30px;
  letter-spacing:4px;
  margin-bottom:14px;
  text-shadow:
    0 0 8px rgba(255,215,120,0.85),
    0 0 18px rgba(255,215,120,0.35);
}

.voice-video-wrap{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding-top:24px;
}

.voice-video{
   display:block;
  width:100%;
  height:315px;
  border-radius:18px;
  background:#000;
}

.voice-video iframe{
width:100%;
height:240px;
display:block;
}

.voice-video:hover{
transform:translateY(-6px);
transition:0.4s;
}

.voice-message{

font-size:22px;

margin:80px auto;

max-width:700px;

line-height:1.7;

}

/* 施術画像 */
.voice-photo{
position:relative;
max-width:900px;
margin:100px auto;
}

.voice-photo img{
width:100%;
max-height:420px;
object-fit:cover;
border-radius:20px;
box-shadow:
0 20px 60px rgba(0,0,0,0.6);
}

.voice-bottom{
margin-top:50px;
font-size:20px;
line-height:1.6;
color:#F36C21;
}

/* 一般・アスリートの口コミ切り替え */
.voice-mode{
  display: none;
}


/* ========================================================================
   PROFILE SECTION
======================================================================== */

/* 院長紹介（崩れ修正） */
.profile-custom-section{ width: 95%;
    max-width: 1000px;
    margin: 80px auto; }

.profile-combined-layout{ display: flex;
    align-items: stretch;
    position: relative;
    gap: 0; }

.profile-photo-area{ flex: 0.8;
    z-index: 10;
    transform: translateX(40px);
    display: flex;
    align-items: center; }

.profile-career-box{
    flex: 1.2;
    display: flex;
}

.profile-img-main{ width: 100%;
    border-radius: 12px;
    display: block; }

.profile-combined-board{ 
    background: #fff;
    border-radius: 30px;
    padding: 50px 40px 40px 80px; 
    color: #333;
    text-align: left;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.profile-divider{ height: 1px;
    background: #eee;
    margin: 25px 0; }

.profile-bottom-flex{ display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 15px; }

@media  (max-width: 850px) {
    .profile-combined-layout{
        flex-direction: column;
        align-items: center;
    }

.profile-photo-area{
        transform: none;
        width: 80%;
        margin-bottom: -40px;
    }

.profile-combined-board{
        padding: 60px 30px 30px 30px;
    }

.profile-bottom-flex{
        flex-direction: column;
    }
}


/* ========================================================================
   BLOG SECTION
======================================================================== */

/* ブログ（横並び修正） */
.blog-custom-section{ width: 95%; max-width: 1050px; margin: 60px auto; }

.blog-layout-flex{ display: flex; gap: 30px; text-align: left; }

.blog-banner-side{ flex: 1.1; }

.blog-card-bg{ width: 100%; height: 100%; object-fit: cover; }

.blog-card-inner{ position: absolute; inset: 0; background: rgba(0,0,0,0.4); padding: 30px; display: flex; flex-direction: column; justify-content: flex-start;padding-top: 120px; }

.blog-chips{ display: flex; gap: 6px; margin-bottom: 15px; }

.blog-chips span{ background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; border: 1px solid rgba(255,255,255,0.2); }

.blog-portal-btn{ background: var(--gold-gradient); color: #fff; padding: 12px 20px; border-radius: 10px; text-decoration: none; font-weight: bold; }

.blog-list-side{ flex: 0.9; }

/* --- ブログセクション前後の調整 --- */
/* ブログの「上のメッセージ」の余白 */
.blog-custom-section{
    margin-top: 60px; /* メッセージとの間にゆとりを持たせる */
}

/* ブログの「下の予約ボタン」の余白 */
/* 画面の一番下にある固定バーと重なりすぎないように調整 */
.blog-custom-section + .reservation-hybrid-area{
    margin-top: 40px;
    margin-bottom: 40px; /* スマホの予約バーに隠れないよう広めに設定 */
}

/* スマホ用の微調整 */
@media  (max-width: 850px) {
    .blog-custom-section + .reservation-hybrid-area{
        margin-bottom: 140px; /* スマホはさらに余白を確保 */
    }
}


/* ========================================================================
   FAQ SECTION
======================================================================== */

/* =========================
   FAQ
========================= */
.faq-section{
  width: 100%;
  padding: 55px 20px 220px;
}

.faq-container{
  max-width: 980px;
  margin: 0 auto;
}

.faq-head{
  text-align: center;
  margin-bottom: 34px;
}

.faq-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f7ce68;
  border-bottom: 1px solid rgba(247,206,104,0.7);
  padding-bottom: 4px;
}

.faq-title{
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

.faq-subtext{
  margin: 0 auto;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.86);
}

.faq-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.30);
  border-color: rgba(247,206,104,0.30);
}

.faq-item.active .faq-answer{
  max-height: 1000px;
}

.faq-question{
  width: 100%;
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.faq-icon{
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  color: #f7ce68;
  transition: transform .25s ease;
}

.faq-answer p{
  padding: 0 26px 24px;
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(255,255,255,0.84);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 18px;
}

.faq-bottom-cta{
  margin-top: 34px;
  padding: 34px 24px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );
  border: 1px solid rgba(247,206,104,0.16);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.faq-bottom-text{
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
}

.faq-bottom-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 16px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #c8a96b, #a88445);
  box-shadow:
    0 10px 24px rgba(168,132,69,0.28),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.faq-bottom-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(168,132,69,0.34),
    inset 0 1px 0 rgba(255,255,255,0.25);
  opacity: .98;
}

.faq-bottom-text.main-copy{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.faq-bottom-sub{
  margin: 0 0 18px;
  font-size: 15px;
  color: rgba(255,255,255,0.75);
}




/* ========================================================================
   RESERVATION BAR / CTA
======================================================================== */

/* 予約バー */
.reservation-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1000;
  width: auto;
  flex-wrap: nowrap;
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 880px;
  opacity: 0;
}

.reservation-bar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.reservation-catch{
  margin: 0 10px 0 0;
  width: auto;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: pre-line;
}

/* ボタンの親要素：中央揃えと余白の調整 */
.cta-center{
    text-align: center;
    margin-top: 20px;
    padding-bottom: 40px;
}

/* ご予約はこちらボタン：基本デザイン */
.btn-reservation-gold{
    display: inline-block;
    padding: 22px 60px;   /* ← ここでサイズUP */
    font-size: 1.2rem;    /* ← 文字も少し大きく */
    background: linear-gradient(135deg, #ffb347, #ff8c00);
    color: white;
    text-decoration: none;
    border-radius: 60px;
    font-weight: bold;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    position: relative;
}

/* マウスオーバー時の動き：ふわっと浮き上がる */
.btn-reservation-gold:hover{
transform: translateY(-6px) scale(1.05);
    box-shadow:
        0 15px 35px rgba(0,0,0,0.35),
        0 0 25px rgba(255,140,0,0.8);  /* ← 発光 */
}

/* 光る演出（キラッと走る光） */
.btn-reservation-gold::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 60px;
    background: radial-gradient(circle at center,
                rgba(255,255,255,0.4) 0%,
                transparent 70%);
    opacity: 0.3;
    pointer-events: none;
}

/* マウスを載せた瞬間に光が左から右へ走る */
.btn-reservation-gold:hover::after{
    left: 120%;
    transition: all 0.7s inset;
}

.reservation-hybrid-area .preview-title{
  text-align: center;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 24px;
}

/* レスポンシブ：スマホは縦並び */


.reservation-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.reservation-actions-lead{
 margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.reservation-buttons{
  display: flex;
  align-items: center;
  gap: 14px;
}




/* ========================================================================
   UTILITIES / JS STATES
======================================================================== */

/* ヘッダー画像 */
.hero{
  position: relative;
  width: min(1180px, 92%);
  margin: 0 auto;
  height: auto;
  min-height: 690px;
  padding: 70px 58px 20px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px;
  background-image: url("img/header.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: transparent;
}

.guide-modal.active{
  opacity: 1;
  visibility: visible;
}

.guide-modal.active .guide-modal-content{
  animation: modalGlow 1.15s ease-out;
}

.card-img-frame{ height: 160px; overflow: hidden; border-radius: 12px; margin-top: 10px; }

.hospital-frame{ border: 3px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px; }

.blog-main-card{ position: relative; border-radius: 30px; overflow: hidden; height: 380px; }

/* ブログ記事リンク色固定 */
/* スクロールアニメーション用 */
.js-reveal{
    opacity: 0;
    filter: blur(10px); 
    transform: translateY(40px) scale(0.98); 
    transition: 
    opacity 2.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.0s cubic-bezier(0.22, 1, 0.36, 1),
    filter 2.5s ease; 
}

.js-reveal.active{
    opacity: 1;
    transform: translateY(0);
}

.js-reveal.is-visible{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.btn{ 
    position: relative;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 0.95rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3); }

.faq-item{
  border-radius: 20px;
  background: rgba(10,16,24,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.faq-item.active{
  border-color: rgba(247,206,104,0.36);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    0 0 24px rgba(247,206,104,0.08);
}

.faq-item.active .faq-icon{
  transform: rotate(45deg);
}

/* --- 3. 拡大アニメーションの設定 --- */
.js-zoom{
    transform: scale(0.3); /* 最初はかなり小さくしておく */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.17, 0.84, 0.44, 1), opacity 1.2s ease-out;
}

.js-zoom.is-visible{
    transform: scale(1);   /* 標準サイズに拡大 */
    opacity: 1;
}

.case-card{
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(16,16,16,0.94), rgba(8,8,8,0.98));
  border: 1px solid rgba(247,206,104,0.45);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.30),
    0 0 20px rgba(247,206,104,0.10);
}

.sports-proof-card{
  max-width: 1050px;
  margin: 0 auto;
  padding: 26px 26px 34px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(19,19,19,0.93), rgba(10,10,10,0.97));
  border: 1px solid rgba(247,206,104,0.40);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.34),
    0 0 26px rgba(247,206,104,0.12);
  position: relative;
  overflow: hidden;
}

.sports-proof-photo-wrap{
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(247,206,104,0.35);
  box-shadow: 0 16px 34px rgba(0,0,0,0.26);
}

.flow-card{
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 0 24px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fit-card{
  position: relative;
  overflow: hidden;
  text-align: left;
  border-radius: 24px;
  padding: 34px 34px 30px;
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.42);
}

.image-frame{
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(247, 206, 104, 0.3);
}

.image-frame{
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(247, 206, 104, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: #000;
}

.slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  animation: trustSlideShow 25s infinite;
}

.voice-mode.active{
  display: block;
}

/* 動画とキャプションを包む枠 */
.video-inner-box{
    overflow: hidden;
    border-radius: 10px; /* 角丸にする場合 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}


/* ========================================================================
   ANIMATIONS / KEYFRAMES
======================================================================== */

@keyframes heroBrandShine{
  0%{
    left: -70%;
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  35%{
    left: 120%;
    opacity: 0;
  }
  100%{
    left: 120%;
    opacity: 0;
  }
}

@keyframes modalGlow{
  0%{
    transform: scale(0.92);
    opacity: 0;
    box-shadow:
      0 0 0 rgba(247,206,104,0),
      0 0 0 rgba(255,255,255,0);
    filter: brightness(1);
  }

  45%{
    transform: scale(1.03);
    opacity: 1;
    box-shadow:
      0 0 40px rgba(247,206,104,0.95),
      0 0 110px rgba(247,206,104,0.55),
      0 0 180px rgba(255,255,255,0.35);
    filter: brightness(1.08);
  }

  100%{
    transform: scale(1);
    opacity: 1;
    box-shadow:
      0 0 0 rgba(247,206,104,0),
      0 0 0 rgba(255,255,255,0);
    filter: brightness(1);
  }
}

@keyframes nerveGlowInside{
  0%{
    transform: scale(1);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.08),
      0 0 0 rgba(247,206,104,0);
  }
  45%{
    transform: scale(1.02);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.10),
      0 0 24px rgba(247,206,104,0.75),
      0 0 56px rgba(247,206,104,0.42),
      0 0 90px rgba(247,206,104,0.24);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.08),
      0 0 0 rgba(247,206,104,0);
  }
}

@keyframes trustSlideShow{
  0%{
    opacity: 0;
    transform: scale(1.08) translateX(20px);
  }
  4%{
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  16%{
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  20%{
    opacity: 0;
    transform: scale(1.04) translateX(-20px);
  }
  100%{
    opacity: 0;
    transform: scale(1.04) translateX(-20px);
  }
}

@keyframes pulse-tel {
    0%,100% { box-shadow: 0 0 15px rgba(93,126,163,0.6), 0 0 25px rgba(93,126,163,0.4), 0 0 35px rgba(93,126,163,0.2); }
    50% { box-shadow: 0 0 25px rgba(93,126,163,0.8), 0 0 35px rgba(93,126,163,0.6), 0 0 45px rgba(93,126,163,0.3); }
}

@keyframes pulse-line {
    0%,100% { box-shadow: 0 0 15px rgba(6,199,85,0.6), 0 0 25px rgba(6,199,85,0.4), 0 0 35px rgba(6,199,85,0.2); }
    50% { box-shadow: 0 0 25px rgba(6,199,85,0.8), 0 0 35px rgba(6,199,85,0.6), 0 0 45px rgba(6,199,85,0.3); }
}


/* ========================================================================
   RESPONSIVE / MISC
======================================================================== */

#main-content{
    position: relative;
    z-index: 2;
}

#main-content{  position: relative;z-index: 2; }

.tilt-left{ transform: rotateZ(-10deg) rotateY(20deg) translateZ(-20px); }

.tilt-center{ transform: rotateX(5deg) translateZ(10px); }

.tilt-right{ transform: rotateZ(10deg) rotateY(-20deg) translateZ(-20px); }

.card-img{ width: 100%; height: 100%; object-fit: cover; }

.photo-frame-main{ background: #fff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%; }

.box-label{
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 4px 15px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.qualifications-side{
    flex: 1;
}

.q-list-new{ list-style: none;
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 2; }

.hospital-photo-side{ width: 140px;
    text-align: center; }

.hospital-img{ width: 100%;
    height: 90px;
    object-fit: cover;
    display: block; }

.photo-caption-small{
    font-size: 0.7rem;
    color: #666;
    font-weight: bold;
}

.post-group-title{ font-size: 1rem; border-left: 4px solid var(--blue); padding-left: 10px; margin-bottom: 15px; }

.mt-20{ margin-top: 20px; }

.btn::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
    transform: rotate(45deg);
    transition: all 0.7s;
}

.btn:hover{
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.btn.tel{ background: linear-gradient(135deg, #5d7ea3, #3b5a8c);
    box-shadow: 0 0 15px rgba(93,126,163,0.6), 0 0 25px rgba(93,126,163,0.4), 0 0 35px rgba(93,126,163,0.2);
    animation: pulse-tel 2s infinite; }

.btn.line{  background: linear-gradient(135deg, #06c755, #04a647);
    box-shadow: 0 0 15px rgba(6,199,85,0.6), 0 0 25px rgba(6,199,85,0.4), 0 0 35px rgba(6,199,85,0.2);
    animation: pulse-line 2s infinite; }

.calendar-viewer-box{
  margin-top: 0;
}

.calendar-viewer-box{
  margin-top: 0;
}

.card-status{
  font-size:0.95rem;
    padding:6px 18px;
    border-radius:40px;
    margin-bottom:15px;
    font-weight:bold;
}

.status-gold{
  background:linear-gradient(135deg,#f7ce68,#f5d48f);
  color:#4b3b1f;
  font-size:1.05rem;
}

.card-focus{
    font-size:1.9rem;
    margin-bottom:22px;
    letter-spacing:.05em;
}

/* =========================================
   追加：施術イメージ案内エリアのスタイル
========================================= */
/* 1. 全体の枠：リストとの間に区切り線を入れ、余白をとる */
/* 2. 左側のテキストエリア */
/* 小見出し */
/* 説明文 */
/* 3. 右側の画像エリア */
/* GIF画像の装飾 */
/* 4. スマホ対応：画面が狭いときは縦並びにする */
/* --- 左側カード内の解説テキスト --- */
/* --- 右側カード内の大きな画像エリア --- */
.visual-caption{
    font-size: 0.85rem;
    color: #f7ce68;
    margin-bottom: 10px;
    font-weight: bold;
}

/* ===============================
   スポーツ実績セクション
=============================== */
.sports-proof-section{
  width: 100%;
  padding: 90px 20px 90px;
  position: relative;
}

.sports-proof-inner{
  max-width: 1180px;
  margin: 0 auto;
}

.sports-proof-head{
  text-align: center;
  margin-bottom: 38px;
}

.sports-proof-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #b4892d;
  font-weight: 700;
}

.sports-proof-title{
  margin: 0 0 16px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.3;
  color: #b4892d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

.sports-proof-sub{
  margin: 0 auto;
  max-width: 860px;
  font-size: 22px;
  line-height: 1.9;
  color: #4e473e;
  text-shadow: none;
}

.sports-proof-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(247,206,104,0.10), transparent 38%);
  pointer-events: none;
}

.sports-proof-photo{
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.sports-proof-category-row{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 26px;
  margin-bottom: 26px;
}

.sports-proof-category{
  text-align: center;
}

.sports-proof-icon{
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

.sports-proof-category p{
  margin: 0;
  font-size: 34px;
  line-height: 1.4;
  color: #b4892d;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sports-proof-divider{
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(247,206,104,0.78),
    transparent
  );
}

.sports-proof-text{
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 30px;
  line-height: 1.8;
  color: #3f3a33;
  font-weight: 700;
  text-shadow: none;
}

/* タブレット */
@media  (max-width: 991px){
  .sports-proof-section{
    padding: 70px 20px 70px;
  }

  .sports-proof-sub{
    font-size: 18px;
    line-height: 1.8;
  }

  .sports-proof-photo{
    height: 360px;
  }

  .sports-proof-category p{
    font-size: 26px;
  }

  .sports-proof-text{
    font-size: 22px;
  }
}

/* スマホ */
@media  (max-width: 767px){
  .sports-proof-section{
    padding: 56px 16px 56px;
  }

  .sports-proof-head{
    margin-bottom: 28px;
  }

  .sports-proof-title{
    font-size: 34px;
  }

  .sports-proof-sub{
    font-size: 15px;
    line-height: 1.8;
  }

  .sports-proof-card{
    padding: 16px 16px 24px;
    border-radius: 20px;
  }

  .sports-proof-photo-wrap{
    border-radius: 14px;
  }

  .sports-proof-photo{
    height: 220px;
  }

  .sports-proof-category-row{
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .sports-proof-divider{
    display: none;
  }

  .sports-proof-icon{
    font-size: 28px;
    margin-bottom: 6px;
  }

  .sports-proof-category p{
    font-size: 22px;
  }

  .sports-proof-text{
    font-size: 16px;
    line-height: 1.9;
  }
}

.section-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.section-text{
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.9;
  color: #52657a;
}

.recommend-badge{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  padding: 10px 18px;
  background: linear-gradient(180deg, #ffd84d 0%, #f0bf14 100%);
  color: #6b4a00;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 10px 0 10px 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.popular-badge{
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 5;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background: radial-gradient(circle at 30% 30%, #ffe89a 0%, #ffc928 65%, #f0ac00 100%);
  color: #704a00;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.14);
}

/* 画像そのもののサイズを枠内に収める */
.kensagazou-standalone{
    width: 100%;       /* 親要素（40%）の幅いっぱいにする */
    max-width: 400px;  /* それ以上は大きくしない */
    height: auto;
    display: block;
    border-radius: 15px;
}

/* チェックリスト項目 */
.point-item{
 background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 22px;
    transition: all 0.3s ease;
}

.point-txt{
   color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500; /* 少しだけ太く */
}

.point-item:hover{
    background: rgba(247, 206, 104, 0.1);
    border-color: rgba(247, 206, 104, 0.3);
}

.point-txt{
  font-size: 1.05rem;
    color: #ffffff;
    line-height: 1.7;
}

.point-mark{
   color: #f7ce68;
    font-size: 1.4rem;
}

.kensagazou-standalone{
    width: 100%;      /* 枠いっぱいに表示 */
    height: auto;
    display: block;
}

/* 星 */
/* Google */
.google-rating{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 20px;

border-radius:40px;

background:rgba(0,0,0,0.6);

border:1px solid rgba(255,210,120,0.5);

box-shadow:
0 0 20px rgba(255,210,120,0.4);

}

.google-g{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #2b2a27;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
}

.video-title{
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  padding:9px 26px;
  border-radius:999px;
  background:linear-gradient(135deg,#d4a74c,#ffe08a);
  color:#2b1b08;
  font-size:15px;
  font-weight:700;
  box-shadow:
    0 0 14px rgba(255,215,120,0.35),
    0 8px 18px rgba(0,0,0,0.22);
  white-space:nowrap;
}

.video-ring{
 position:absolute;
  inset:8px -12px -12px -12px;
  border-radius:34px;
  background:radial-gradient(
    circle,
    rgba(255,230,150,0.24) 0%,
    rgba(255,220,120,0.12) 40%,
    rgba(255,200,80,0.05) 62%,
    transparent 75%
  );
  filter:blur(28px);
  z-index:1;
  pointer-events:none;
}

/* 画像口コミ */
.photo-review{
position:absolute;
top:40px;
left:40px;
background:rgba(0,0,0,0.6);
padding:20px 25px;
border-radius:15px;
backdrop-filter:blur(6px);
}

/* 5枚用の遅延 */
.slide-img:nth-child(1){ animation-delay: 0s; }

.slide-img:nth-child(2){ animation-delay: 5s; }

.slide-img:nth-child(3){ animation-delay: 10s; }

.slide-img:nth-child(4){ animation-delay: 15s; }

.slide-img:nth-child(5){ animation-delay: 20s; }

/* 内側に金っぽい細いライン */
/* スライド画像 */
/* 切り替えタイミング */
.slide-img:nth-of-type(1){
  animation-delay: 0s;
}

.slide-img:nth-of-type(2){
  animation-delay: 6s;
}

.slide-img:nth-of-type(3){
  animation-delay: 12s;
}

.slide-img:nth-child(1){
  animation-delay:0s;
}

.slide-img:nth-child(2){
  animation-delay:5s;
}

.slide-img:nth-child(3){
  animation-delay:10s;
}

.top-bar{ border-bottom: 1px solid #333; }

.bottom-bar{ border-top: 1px solid #333; color: #f7ce68; }

/* --- 動画セクション：タイトルとボタンの横並び --- */
.video-header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* 動画のレイアウト */
.video-grid{ display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

.video-container{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 動画セクションのレイアウト調整 */
.video-header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* YouTubeのレスポンシブ対応 */
.video-container{
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
}

.video-container iframe{
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: none;
}



/* =========================
   readable color overrides / webp fix
========================= */
.background-layer{background:linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url("img/background.webp") center/cover no-repeat;}
.hero{background-image:url("img/header.webp");}
.case-lead-title, .sports-proof-title{color:#b4892d !important;-webkit-text-fill-color:initial;text-shadow:0 1px 0 rgba(255,255,255,0.65);}
.case-lead-sub, .sports-proof-sub{color:#5a5248 !important;text-shadow:none;}
.sports-proof-label, .sports-proof-category p{color:#b4892d !important;}
.sports-proof-text{color:#3f3a33 !important;text-shadow:none;}
.athlete-toggle-btn{background:linear-gradient(135deg,#1d5eff 0%,#0a47c5 100%) !important;border:1px solid rgba(255,255,255,0.18);border-radius:10px;box-shadow:0 10px 24px rgba(10,71,197,0.25);}
.athlete-toggle-btn:hover{background:linear-gradient(135deg,#0a47c5 0%,#083996 100%) !important;}
.video-caption-bar{background:rgba(8,10,16,0.92) !important;color:#fff !important;}


/* =========================
   final readability polish
========================= */
/* 白背景上の見出しと導入文をしっかり読めるようにする */
.case-lead-title,
.sports-proof-title,
.voice-title{
  color:#a9791e !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
}

.voice-sub,
.sports-proof-label{
  color:#b68424 !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
  font-weight:700;
}

.case-lead-sub,
.sports-proof-sub,
.voice-message,
.voice-bottom,
.method-bridge{
  color:#4f473d !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:none !important;
}

.method-bridge{
  background:none !important;
  font-weight:700;
}

/* 患者様の声の白背景エリア */
.voice-section{
  color:#3f392f !important;
}

.voice-stars{
  color:#c79b32 !important;
  text-shadow:none !important;
}

.google-rating{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #2b2a27;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.google-score{
  color: #d4a62a; 
  font-weight: 800;
}

/* 口コミカードの文字をくっきり */
.review-card{
  background:rgba(10,10,14,0.82) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
}

.review-card p,
.review-card span,
.photo-review p,
.photo-review span{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
}

.photo-review{
  background:rgba(10,10,14,0.82) !important;
}

/* スポーツ実績カード内は黒地なので明るめに戻す */
.sports-proof-card .sports-proof-category p{
  color:#e0b24f !important;
  text-shadow:0 0 12px rgba(224,178,79,0.18);
}

.sports-proof-card .sports-proof-icon{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.sports-proof-card .sports-proof-divider{
  background:linear-gradient(90deg, transparent, rgba(224,178,79,0.9), transparent) !important;
}

.sports-proof-card .sports-proof-text{
  color:#f3ecdf !important;
  text-shadow:0 2px 12px rgba(0,0,0,0.38) !important;
}

/* 動画まわりの黒帯とタイトルも少し締める */
.video-title{
  background:linear-gradient(135deg,#c9962d,#f0c76c) !important;
  color:#2b1b08 !important;
}

.video-caption-bar,
.cta-final-mode,
.reservation-bar.cta-final-mode,
.reservation-bar{
  background:rgba(8,10,16,0.92);
}


/* ===== CTA safe override ===== */
.reservation-bar{
  left:50%;
  transform:translateX(-50%) translateY(50px);
  opacity:0;
  width:min(980px, calc(100% - 40px));
  justify-content:space-between;
}
.reservation-catch{
  flex:1;
  margin:0 16px 0 0;
  text-align:left;
}
.reservation-actions{
  flex-direction:column;
  align-items:center;
}
@media (min-width: 769px){
  .reservation-buttons{display:flex; gap:14px;}
}


/* =========================
   desktop hero image separation patch
========================= */
.hero-img-sp{
  display:none !important;
}

@media (min-width: 769px){
  .hero{
    background-image:url("img/header.webp") !important;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
  }
}


/* === glass trouble section rebuilt / PC === */
.glass-trouble-section{
  padding: 34px 20px 42px;
  background: transparent;
}

.glass-trouble-shell{
  max-width: 1320px;
  margin: 0 auto;
}

.glass-trouble-head{
  max-width: 980px;
  margin: 0 auto 30px;
  text-align: center;
}

.trouble-label{
  margin: 0 0 12px;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f7ce68;
  font-weight: 700;
}

.glass-trouble-title{
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.glass-trouble-text{
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 1.04rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.9);
}

.glass-trouble-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 32px;
}

.glass-trouble-item{
  min-height: 310px;
  padding: 34px 30px 28px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(31, 38, 51, 0.86) 0%, rgba(39, 45, 56, 0.78) 100%);
  border: 2px solid rgba(247, 206, 104, 0.84);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.glass-trouble-item:hover{
  transform: translateY(-6px);
  box-shadow:
    0 24px 52px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.10);
  border-color: rgba(247, 206, 104, 0.96);
}

.glass-trouble-icon{
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.glass-trouble-icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c9a84f;
  transform: translate(-50%, -50%);
}

.glass-trouble-item h3{
  margin: 0 0 18px;
  font-size: 1.9rem;
  line-height: 1.45;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.glass-trouble-item p{
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.88);
}

.glass-trouble-note{
  margin: 26px 0 0;
  text-align: center;
  color: rgba(255,255,255,0.94);
  font-size: 1rem;
}

.glass-trouble-cta{
  margin-top: 22px;
  text-align: center;
}

.glass-trouble-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 54px;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,#29b6ff,#2f80ff);
  box-shadow: 0 10px 24px rgba(47,128,255,0.28);
}

.sp-only,
.nayami-sp-image{
  display:none !important;
}


#opening-video-layer{
  z-index:99999 !important;
}


/* =========================
   FIXED: 悩みセクション PC 6 cards
========================= */
.glass-trouble-section{
  padding: 34px 20px 42px;
  background: transparent;
}

.glass-trouble-shell{
  max-width: 1380px;
  margin: 0 auto;
}

.glass-trouble-head{
  max-width: 980px;
  margin: 0 auto 30px;
  text-align: center;
}

.trouble-label{
  margin: 0 0 12px;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f7ce68;
  font-weight: 700;
}

.glass-trouble-title{
  margin: 0;
  font-size: 2.9rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.glass-trouble-text{
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 1.18rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.9);
}

.glass-trouble-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 32px;
}

.glass-trouble-item{
  min-height: 300px;
  padding: 34px 30px 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(31, 38, 51, 0.88) 0%, rgba(39, 45, 56, 0.80) 100%);
  border: 2px solid rgba(247, 206, 104, 0.84);
  box-shadow: 0 18px 42px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.glass-trouble-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
  border-color: rgba(247, 206, 104, 0.96);
}

.glass-trouble-icon{
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.glass-trouble-icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c9a84f;
  transform: translate(-50%, -50%);
}

.glass-trouble-item h3{
  margin: 0 0 18px;
  font-size: 2rem;
  line-height: 1.45;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.glass-trouble-item p{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.88);
}

.glass-trouble-note{
  margin: 26px 0 0;
  text-align: center;
  color: rgba(255,255,255,0.94);
  font-size: 1rem;
}

.glass-trouble-cta{
  margin-top: 22px;
  text-align: center;
}

.glass-trouble-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 54px;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,#29b6ff,#2f80ff);
  box-shadow: 0 10px 24px rgba(47,128,255,0.28);
}



/* =========================
   FINAL OVERRIDE / PC trouble cards + mobile image hidden
========================= */
@media (min-width: 769px){
  .sp-only,
  .nayami-sp-image{
    display:none !important;
  }

  .glass-trouble-section{
    padding: 34px 20px 42px !important;
    background: transparent !important;
  }

  .glass-trouble-shell{
    max-width: 1320px !important;
    margin: 0 auto !important;
  }

  .glass-trouble-head{
    max-width: 980px !important;
    margin: 0 auto 30px !important;
    text-align: center !important;
  }

  .trouble-label{
    margin: 0 0 12px !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #f7ce68 !important;
    font-weight: 700 !important;
  }

  .glass-trouble-title{
    margin: 0 !important;
    font-size: 2.5rem !important;
    line-height: 1.35 !important;
    color: #fff !important;
    text-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  }

  .glass-trouble-text{
    margin: 16px auto 0 !important;
    max-width: 760px !important;
    font-size: 1.04rem !important;
    line-height: 1.95 !important;
    color: rgba(255,255,255,0.9) !important;
  }

  .glass-trouble-list,
  .glass-trouble-card{
    display:none !important;
  }

  .glass-trouble-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px 32px !important;
  }

  .glass-trouble-item{
    display:block !important;
    min-height: 310px !important;
    padding: 34px 30px 28px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(31, 38, 51, 0.86) 0%, rgba(39, 45, 56, 0.78) 100%) !important;
    border: 2px solid rgba(247, 206, 104, 0.84) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    text-align: left !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  }

  .glass-trouble-item:hover{
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 52px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    border-color: rgba(247, 206, 104, 0.96) !important;
  }

  .glass-trouble-icon{
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 28px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14) !important;
  }

  .glass-trouble-icon::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #c9a84f !important;
    transform: translate(-50%, -50%) !important;
  }

  .glass-trouble-item h3{
    margin: 0 0 18px !important;
    font-size: 1.9rem !important;
    line-height: 1.45 !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }

  .glass-trouble-item p{
    margin: 0 !important;
    font-size: 1.04rem !important;
    line-height: 1.95 !important;
    color: rgba(255,255,255,0.88) !important;
  }

  .glass-trouble-note{
    margin: 28px 0 0 !important;
    text-align: center !important;
    color: rgba(255,255,255,0.94) !important;
    font-size: 1rem !important;
  }

  .glass-trouble-cta{
    margin-top: 20px !important;
    text-align: center !important;
  }

  .glass-trouble-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 280px !important;
    padding: 15px 28px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg,#29b6ff,#2f80ff) !important;
    box-shadow: 0 10px 24px rgba(47,128,255,0.28) !important;
  }
}



.sp-line-wrap {
  margin: 20px 0 30px;
  text-align: center;
}

.sp-line-img {
  width: 92%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}


.sp-line-cta,
.sp-only {
  display: none !important;
}

/* ========================================================================
   MOBILE FLOW IMAGE SECTIONS HIDE ON PC
======================================================================== */
.sp-why-visual-section,
.sp-why-detail-section,
.sp-why-bridge,
.sp-solution-bridge {
  display: none !important;
}


/* =========================================================
   VISIBILITY FIX v2002
   - pc: hide mobile-only flow
   - show desktop deep sections
========================================================= */
.sp-only,
.mobile-only-flow,
.sp-catch-video,
.between-message,
.sp-why-follow-text,
.sp-gold-frame-img {
  display: none !important;
}

.pc-only,
.desktop-deep-sections {
  display: block !important;
}

@media screen and (max-width: 768px) {
  .pc-only,
  .desktop-deep-sections { display: none !important; }
  .sp-only,
  .mobile-only-flow { display: block !important; }
}




/* =========================================================
   VISIBILITY HELPERS v5001
   smartphone / desktop display control
   .sp-only : hide on desktop
   .pc-only : show only on desktop
   .sp-hide : show on desktop
   .pc-hide : hide on desktop
========================================================= */
.sp-only { display: none !important; }
.pc-only { display: block !important; }
.sp-hide { display: block !important; }
.pc-hide { display: none !important; }