:root{
  --bg-beige:#F1EADD;
  --green:#B7D9CF;
  --g-777:#777777;
  --g-555:#555555;
  --line:#EAEAEA;
  --white:#FFFFFF;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --container:min(1120px,92vw);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--g-555);
  background:var(--white);
  line-height:1.8;
}

/* スマホのときは下に固定バーぶんの余白 */
@media (max-width:959px){
  body{padding-bottom:70px;}
}

/* utilities */
.container{width:var(--container);margin-inline:auto;}
.sp-only{display:inline;}
@media (min-width:768px){.sp-only{display:none;}}
.center{text-align:center;}
.muted{color:#8a8a8a;}
.small{font-size:.85rem;}
.inline-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* ========== header ========== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--green);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.logo-drop{
  width:28px;height:36px;
  background:#fff;
  border-radius:20px 20px 24px 24px;
  opacity:.92;
  mask:radial-gradient(60% 70% at 50% 0,#000 98%,transparent 100%);
}
.brand-text{font-weight:600; text-align:center;}
.brand-sub{
  display:block;
  font-size:.78rem;
  letter-spacing:.16em;
  margin-top:-3px;
  opacity:.9;
}

.nav-toggle{
  background:none;
  border:0;
  display:grid;
  gap:4px;
  padding:8px;
  cursor:pointer;
}
.nav-toggle .bar{
  width:26px;height:2px;
  background:#fff;
  border-radius:2px;
  display:block;
}

/* モバイルナビ */
.site-nav{
  position:fixed;
  inset:64px 0 auto 0;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--line);
  transform:translateY(-120%);
  opacity:0;
  pointer-events:none;
  transition:transform .5s ease, opacity .5s ease;
  z-index:45;
}
.site-nav.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:14px 20px;
  display:grid;
  gap:6px;
}
.site-nav a{
  display:block;
  padding:10px;
  border-radius:10px;
  color:var(--g-555);
  text-decoration:none;
}
.site-nav a:hover{background:#f7f5f0;}

/* 背景レイヤー */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
  z-index:40;
}
.nav-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* PCナビ */
@media (min-width:960px){
  .nav-toggle{display:none;}
  .site-nav{
    position:static;
    inset:auto;
    background:transparent;
    backdrop-filter:none;
    transform:none;
    opacity:1;
    pointer-events:auto;
    border:0;
  }
  .site-nav ul{
    display:flex;
    gap:14px;
    align-items:center;
    padding:0;
  }
  .site-nav a{
    padding:8px 12px;
    color:#fff;
  }
  .nav-overlay{display:none;}
}

/* ========== hero ========== */
.hero{
  background:var(--bg-beige);
  position:relative;
  padding:28px 0 36px;
}
.hero-inner{
  display:grid;
  gap:22px;
  align-items:center;
}
.hero-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:22px;
  box-shadow:var(--shadow);
}
.hero-copy h1{
  font-family:'Shippori Mincho', serif;
  margin:0 0 8px;
  font-weight:500;
  color:#646b6a;
  letter-spacing:.0.03em;
}
.hero-copy .lead{
  margin:0 0 14px;
  color:#6f6f6f;
  text-align:left;
}
.wave{
  height:18px;
  background:radial-gradient(60px 12px at 10% 0, rgba(255,255,255,.8) 40%, transparent 41%) repeat-x;
  opacity:.4;
  margin-top:20px;
}
@media (min-width:960px){
  .hero-inner{grid-template-columns:1.2fr 1fr;}
  .hero{padding:48px 0 64px;}
}

/* ========== section base ========== */
.section{padding:56px 0;border-top:1px solid var(--line);}
.section-plain{background:var(--white);}
.section-tint{background:var(--bg-beige);}
.section h2{margin:0 0 10px;text-align:center;color:#6a6a6a;}
.section-lead{
  margin:0 0 24px;
  color:#7a7a7a;
  padding:5%;
  text-align: left;
}
.split{display:grid;gap:22px;align-items:center;}
@media (min-width:880px){
  .split{grid-template-columns:1.1fr 1fr;}
}

/* ごあいさつ丸写真（他ページ共通用） */
.circle-photo img{
  width:220px;height:220px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:var(--shadow);
  display:block;
  margin:0 auto;
}
@media (min-width:960px){
  .circle-photo img{width:280px;height:280px;}
}

/* ========== cards（トップ共通） ========== */
.cards{display:grid;gap:18px;}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.card-body{padding:16px;}
.card h3{margin:0 0 6px;text-align:center;color:#596362;}
.mini-list{margin:8px 0 14px;padding-left:18px;color:#777;}
@media (min-width:880px){
  .cards{grid-template-columns:repeat(3,1fr);}
}

/* ========== buttons ========== */
.btn{
  display:inline-block;
  border:1px solid transparent;
  border-radius:999px;
  text-decoration:none;
  transition:transform .03s ease, box-shadow .2s ease;
  padding:.8rem 1.4rem;
  font-size:1rem;
  letter-spacing:.03em;
  line-height:1.4;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}
.btn-primary:hover{
  box-shadow:0 6px 18px rgba(183,217,207,.5);
}
.btn-outline{
  background:#fff;
  color:#56605f;
  border:1.5px solid #9cbab2;
  border-radius:999px;
  font-size:1rem;
  letter-spacing:.03em;
  line-height:1.4;
  transition:all .25s ease;
}
.btn-outline:hover{
  background:#f8fbfa;
  box-shadow:0 6px 18px rgba(183,217,207,.25);
  transform:translateY(-1px);
}

/* カード内ボタン */
.card-body .btn{
  display:block;
  margin:14px auto 10px;
  width:80%;
  max-width:240px;
  text-align:center;
  padding:.9rem 0;
}

/* ========== 治療実績（index） ========== */
.results .result-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:14px 0 22px;
}
.results .result-tags span{
  background:rgba(183,217,207,.25);
  border:1px solid rgba(183,217,207,.6);
  border-radius:999px;
  padding:5px 12px;
  font-size:.8rem;
  color:#596362;
}
.result-accordion{
  max-width:760px;
  margin:0 auto;
}
.result-accordion details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 14px 8px;
  margin-bottom:10px;
  transition:box-shadow .2s ease;
}
.result-accordion summary{
  text-align: center;
  cursor:pointer;
  font-weight:600;
  color:#586160;
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.result-accordion summary::-webkit-details-marker{display:none;}
.result-accordion details[open]{box-shadow:0 6px 20px rgba(0,0,0,.03);}
.result-accordion ul{
  margin:8px 0 0;
  padding-left:18px;
  color:#666;
}
.result-accordion li{margin-bottom:4px;}
.result-accordion .note{
  margin-top:6px;
  font-size:.78rem;
  color:#8a8a8a;
}

/* ========== access ========== */
.map-embed iframe{
  width:100%;
  height:260px;
  border:0;
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* ========== footer ========== */
.site-footer{
  background:#f7f7f7;
  border-top:1px solid var(--line);
  color:#6f6f6f;
  text-align:center;
}
.footer-inner{
  display:grid;
  gap:10px;
  align-items:center;
  padding:18px 0;
}

/* ========== mobile CTA ========== */
.mobile-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  display:flex;
  gap:2px;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(6px);
  border-top:1px solid var(--line);
  z-index:40;
}
.mobile-cta a{
  flex:1;
  text-align:center;
  padding:12px 10px;
  text-decoration:none;
  color:#fff;
  background:var(--green);
  font-weight:600;
}
@media (min-width:960px){
  .mobile-cta{display:none;}
}

/* ナビ開いているときスクロール止める */
.no-scroll{overflow:hidden;}

/* ========================================= */
/* ======== コースページ共通レイアウト ===== */
/* ========================================= */
.course-hero,
.course-hero-has-photo{
  background:var(--bg-beige);
  padding:48px 0 40px;
}
.course-tag{
  display:inline-block;
  background:rgba(255,255,255,.7);
  padding:4px 16px;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.18em;
  color:#6a7a75;
  margin-bottom:14px;
}
.course-hero h1{
  margin:0 0 10px;
  color:#586160;
}
.course-hero .lead{
  max-width:640px;
  margin:0 auto;
  color:#6f6f6f;
  line-height:1.7;
  text-align:left;
}

/* ヒーロー2カラム */
.hero-flex{
  display:grid;
  gap:20px;
  align-items:center;
}
.hero-text{text-align:left;}
.hero-photo img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
  box-shadow:var(--shadow);
}
@media (min-width:880px){
  .hero-flex{grid-template-columns:1.05fr 0.95fr;}
}
@media (max-width:879px){
  .course-hero h1,
  .course-hero .lead{ text-align:left; }
  .hero-text{text-align:left;}
  .hero-photo img{max-width:420px;margin:0 auto;}
}

/* 細めのコンテナ */
.container.narrow{
  width:min(760px,92vw);
  margin-inline:auto;
}

/* flow（施術の流れ） */
.flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.flow h3{margin:0 0 4px;color:#596362;}
.flow p{margin:0;color:#6f6f6f;}

/* 特徴ブロック */
.feature-block{
  padding-top:50px;
  padding-bottom:50px;
}
.feature-inner{
  display:grid;
  gap:26px;
  align-items:center;
}
.feature-img img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
  box-shadow:var(--shadow);
}
.feature-body h2{
  margin:0 0 10px;
  color:#596362;
}
.feature-lead{
  margin:0 0 14px;
  color:#666;
}
.feature-list{
  list-style:none;
  padding:0;
  margin:5% 0 14px;
  display:grid;
  gap:8px;
}
.feature-list li{
  background:#fff;
  border:1px solid rgba(0,0,0,0.03);
  border-radius:14px;
  padding:8px 12px 10px;
  margin-bottom: 3%;
}
.feature-list strong{
  display:block;
  margin-bottom:2px;
}
.feature-block.calm .feature-list li{background:#fdfcf9;}
.feature-block.gentle .feature-list li{background:rgba(247,244,238,.9);}
.feature-block.focus .feature-list li{background:#fff;}
@media (max-width:879px){
  .feature-inner{grid-template-columns:1fr;}
  .feature-body{text-align:left;}
}

/* ピル型リスト */
.pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding:0;
  list-style:none;
}
.pill-list li{
  background:#fff;
  border:1px solid rgba(183,217,207,.6);
  border-radius:999px;
  padding:5px 12px;
  font-size:.85rem;
  color:#586160;
}

/* 注意ボックス */
.notice{
  background:#fff;
  border:1px dashed rgba(183,217,207,.8);
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0 10px;
  color:#596362;
}

/* 料金テーブル */
.price-table{
  display:grid;
  gap:8px;
  margin:10px 0 14px;
}
.price-table > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.price-table span{color:#6a6a6a;}
.price-table strong{font-size:1.15rem;color:#4f5856;}

/* FAQ */
.faq details{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
}
.faq summary{
  cursor:pointer;
  font-weight:600;
  color:#596362;
}
.faq p{
  margin:8px 0 0;
  color:#666;
}

/* ギャラリー */
.gallery{
  padding-top:40px;
  padding-bottom:50px;
}
.gallery-grid{
  display:grid;
  gap:16px;
  margin-top:20px;
  padding:2%;
}
.gallery-grid figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}
.gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width:880px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:879px){
  .gallery-grid img{max-height:230px;}
}

/* ========= お問い合わせフォーム（共通） ========= */
form{
  max-width:520px;
  margin:0 auto;
}
.form-group{margin-bottom:16px;}
.form-group label{
  display:block;
  margin-bottom:4px;
  font-size:.95rem;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:inherit;
  font-size:.95rem;
  box-sizing:border-box;
}
.form-group textarea{
  min-height:140px;
  resize:vertical;
}
.required{
  display:inline-block;
  margin-left:6px;
  padding:1px 8px;
  border-radius:999px;
  background:#e9a2a2;
  color:#fff;
  font-size:.75rem;
  vertical-align:middle;
}

/* ========= 成長サポート「こんなお子さまに」 ========= */
.support-issues {text-align:center;}

.issue-grid{
  display:grid;
  gap:18px;
}
@media (min-width:960px){
  .issue-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.issue-card{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.issue-card summary{
  list-style:none;
  padding:14px 16px 12px;
  margin:0;
  font-weight:600;
  font-size:.98rem;
  color:#596362;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.issue-card summary::-webkit-details-marker{display:none;}
.issue-card summary::after{
  content:"＋";
  font-size:1.1rem;
  line-height:1;
  margin-left:6px;
  color:#8aa79e;
}
.issue-card[open] summary::after{content:"－";}
.issue-card[open] summary{
  border-bottom:1px solid #f1ece2;
}

.issue-body{
  padding:12px 16px 16px;
  font-size:.9rem;
  color:#666;
  line-height:1.8;
}
.issue-body figure{
  margin:0 0 10px;
  border-radius:14px;
  overflow:hidden;
  background:#f7f5f0;
}

/* 画像の共通スタイル */
.issue-body img{
  width:100%;
  display:block;
  object-fit:cover;
}

/* 高さをそろえる専用クラス */
.issue-img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

@media (max-width:767px){
  .issue-body{font-size:.9rem;}
}

/* ========= 成長サポート モーダル ========= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px) saturate(160%);
  z-index:999;
  animation:fadeIn .4s ease;
}
.modal.show{
  display:flex;
  justify-content:center;
  align-items:center;
}
.modal-content{
  background:#fff;
  padding:24px;
  width:min(90%,480px);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  animation:popIn .35s ease;
  text-align:center;
}
.modal-photo{
  width:100%;
  border-radius:14px;
  margin-bottom:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
  object-fit:cover;
}
.modal-close{
  float:right;
  font-size:28px;
  cursor:pointer;
  color:#777;
}
.modal-open-btn{
  padding:10px 20px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-size:1rem;
  margin:10px auto;
  display:block;
}
.modal-open-btn:hover{
  box-shadow:0 4px 12px rgba(183,217,207,.5);
}

/* アニメーション */
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes popIn{
  0%{transform:scale(.85);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}

/* ===============================
   治療実績ページ用 ちょい足しCSS
   =============================== */

/* ヒーローエリア（治療実績） */
.results-hero{
  background: var(--bg-beige);
  padding: 48px 0 40px;
}
.results-hero .course-tag{
  display: inline-block;
  margin-bottom: 10px;
}
.results-hero h1{
  margin: 0 0 12px;
  text-align: center;
  color: #586160;
  font-weight: 400;
}
.results-hero .lead{
  max-width: 760px;
  margin: 0 auto;
  color: #6f6f6f;
  line-height: 1.9;
  text-align: left;
}
@media (min-width: 768px){
  .results-hero .lead{
    text-align: center;
  }
}

/* タグの行（すでに .results .result-tags があるので流用OK） */
/* レイアウトは既存の .results .result-tags をそのまま使う前提 */

/* ========================================= */
/*      治療実績ページ（features.html）用     */
/* ========================================= */

/* ヒーローまわり（上の淡いベージュゾーン） */
.results-hero {
  background: var(--bg-beige);
}

.results-hero .hero-text {
  text-align: left;
}

.results-hero .lead {
  text-align: left;
}

/* 子ども・大人の症例カード */
.case-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 880px) {
  .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.case-card figure {
  margin: 0 0 10px;
  border-radius: 14px;
  overflow: hidden;
  background: #f7f5f0;
}

.case-card img {
  width: 100%;
  height: 220px;          /* 写真の高さをそろえる */
  object-fit: cover;
  display: block;
}

.case-card h3 {
  margin: 4px 0 6px;
  font-size: 1rem;
  color: #596362;
  text-align: center;
}

.case-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.8;
}

/* 既存の .results タグを使ったアコーディオンは
   そのまま今までのCSSでOK（変更不要） */

   h1, h2, h3 { 
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #586160; /* しずく堂カラーに合わせた上品な濃緑 */
   }