/*
Theme Name: クワトロ鍼灸院
Theme URI: https://cuatroshinkyu.com/
Author: umi design
Description: クワトロ鍼灸院のオリジナルテーマ（デザインどおりに表示するためのテーマ）
Version: 1.1.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cuatro
*/
/* クワトロ鍼灸院 テーマ 共通スタイル
   PC＝幅1440基準（中身1080）／スマホ＝幅390基準（左右24）。切り替え 767px */
:root{
  --pink:#F0848A; --pink-btn:#EC7F86; --pink-pale:#FCE4E4; --bg:#FFF7F6;
  --text:#5A4A47; --sub:#8A7B77; --line:#F3DFDD; --needle:#D9B6B6;
  --green:#B8D000; --green-text:#3D4500; --teal:#45BDB4;
  --c1:#F0848A; --c2:#A9BD4E; --c3:#72C2BB; --c4:#F5A9AC;
  --font:"Zen Maru Gothic",sans-serif; --en:"Quicksand","Zen Maru Gothic",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{word-break:keep-all;overflow-wrap:anywhere;margin:0;font-family:var(--font);color:var(--text);background:#fff;font-size:20px;line-height:1.8;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700}
ul{margin:0;padding:0;list-style:none}
.sp,.sp-i{display:none}
.inner{max-width:1080px;margin:0 auto}
.sec{padding:110px 0;position:relative}
.sec--bg{background:var(--bg)}
.sec--top0{padding-top:80px}
[id]{scroll-margin-top:130px}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 40px;border-radius:999px;font-weight:700;font-size:18px;letter-spacing:.08em;white-space:nowrap;transition:opacity .2s}
.btn:hover{opacity:.8}
.btn--main{background:var(--pink-btn);color:#fff}
.btn--sub{background:#fff;color:var(--pink-btn);border:1.5px solid var(--pink-btn)}
.btn--line{background:var(--green);color:#fff}
.btn::after{content:"→";margin-left:1em}
.btn--noarrow::after{content:none}
.btns{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:48px}
.btns--row{flex-direction:row;justify-content:center;gap:20px}
.btn--w320{min-width:320px}

/* ---- 見出し ---- */
.h2{margin-bottom:48px}
.h2__t{font-size:34px;line-height:1.6;letter-spacing:.1em}
.h2__line{display:flex;align-items:center;margin-top:16px}
.h2__line::before{content:"";width:40%;height:4px;border-radius:2px;background:var(--pink-btn)}
.h2__line::after{content:"";flex:1;height:2px;background:var(--needle)}
.lead-pink{color:var(--pink-btn);font-weight:700;font-size:30px;line-height:1.6;letter-spacing:.14em}
.body{font-size:20px;line-height:1.8}
.note{font-size:14px;color:var(--sub)}

/* ページ名（大見出し） */
.ptitle{position:relative;background:#fff}
.ptitle__in{max-width:1080px;margin:0 auto;padding:64px 0 32px;position:relative;z-index:1}
.ptitle__h{display:inline-flex;align-items:center;gap:14px;font-size:46px;color:var(--pink-btn);letter-spacing:.16em;line-height:1.5}
.ptitle__h::before{content:"";width:39px;height:39px;background:url(assets/img/common/heart.png) center/contain no-repeat;flex:none}
.ptitle--photo{height:730px}
.ptitle--photo::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;background:var(--bg)}
.ptitle--photo .phero{position:absolute;top:210px;left:max(24px,calc(50% - 540px));right:0}
.phero img{width:100%;height:480px;object-fit:cover;border-radius:24px 0 0 24px}
.sec--after-title{padding-top:40px}
/* ---- トップバー・ヘッダー ---- */
.topbar{background:var(--pink);color:#fff;font-size:11px;line-height:26px;letter-spacing:.08em}
.topbar .inner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 6px 24px rgba(89,74,71,.14)}
.header__in{max-width:1080px;height:96px;margin:0 auto;display:flex;align-items:center}
.header__logo img{width:170px;height:56px;object-fit:contain}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:13px;font-weight:500;letter-spacing:.06em}
.nav a:hover{color:var(--pink-btn)}
.nav__drop{position:relative}
.nav__drop>a::after{content:"";display:inline-block;margin-left:4px;border:4px solid transparent;border-top:5px solid var(--pink);transform:translateY(3px)}
.dropdown{position:absolute;top:100%;left:-40px;padding-top:24px;display:none}
.nav__drop:hover .dropdown,.nav__drop:focus-within .dropdown,.nav__drop.is-open .dropdown{display:block}
.dropdown__box{width:356px;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(89,74,71,.14);padding:12px 22px}
.dropdown__all{display:block;color:var(--pink-btn);font-weight:700;padding:8px 6px 12px;border-bottom:1px solid var(--line)}
.dropdown__all::after{content:"  →"}
.dropdown li a{display:flex;align-items:center;justify-content:space-between;padding:12px 6px;font-size:15px;font-weight:400}
.dropdown li a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);margin-right:12px}
.dropdown li a span{flex:1}
.dropdown li a::after{content:"›";color:var(--pink)}
.dropdown__sep{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.dropdown__sep a{color:var(--pink-btn);font-weight:700!important}
.ig{display:inline-flex;width:20px;height:20px;margin-left:24px}
.ig svg{width:20px;height:20px}
.hbtns{display:flex;gap:10px;margin-left:24px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;width:118px;height:44px;border-radius:22px;color:#fff;font-weight:700;font-size:14px}
.hbtn--web{background:var(--pink-btn)}.hbtn--line{background:var(--green)}
.menubtn{display:none}

/* スマホのメニュー（開いた状態） */
.spmenu{position:fixed;inset:0;z-index:100;background:#fff;overflow:auto;display:none}
.spmenu.is-open{display:block}
.spmenu__head{height:88px;display:flex;flex-direction:column}
.spmenu__list{padding:8px 24px}
.spmenu__list a{display:flex;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.spmenu__list a::after{content:"›";color:var(--pink)}
.spmenu__list .sub a{padding-left:20px;font-size:14px}
.spmenu__btns{padding:20px 24px 40px;display:flex;flex-direction:column;gap:12px}
.spmenu__btns .btn{width:100%;height:52px}
.spmenu__tel{text-align:center;font-size:13px;color:var(--sub)}
.spmenu__tel b{display:block;font-family:var(--en);font-size:26px;color:var(--text)}
.spmenu__close{margin-left:auto;background:none;border:0;font-size:12px;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.spmenu__close::before{content:"×";font-size:28px;line-height:1;color:var(--pink)}

/* 右端の固定タブ（スマホのみ） */
.fixtab{display:none}

/* ---- トップ：ヒーロー ---- */
.hero{position:relative;height:640px;background:linear-gradient(180deg,#FFF7F6 0%,#fff 100%)}
.hero__img{position:absolute;top:0;right:0;left:max(24px,calc(50% - 540px));height:623px}
.hero__img img{width:100%;height:100%;object-fit:cover;border-bottom-left-radius:120px}
.hero__catch{position:absolute;left:max(0px,calc(50% - 610px));top:300px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero__catch span{display:block;height:70px;padding:0 22px;border-radius:8px;color:#fff;font-weight:700;font-size:38px;line-height:70px;letter-spacing:.12em;box-shadow:0 10px 30px rgba(90,74,71,.10)}
.hero__catch span:nth-child(1){background:#F0848A}.hero__catch span:nth-child(2){background:#F3969A}.hero__catch span:nth-child(3){background:#F5A9AC}

/* 段の飾りの丸 */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px);opacity:.4}
.sec>*:not(.blob){position:relative;z-index:1}

/* 2列（文章＋写真） */
.cols{display:flex;align-items:center;gap:42px}
.cols__txt{flex:1;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.cols__img{width:480px;flex:none}
.cols__img img{width:100%;height:400px;object-fit:cover;border-radius:24px}

/* お悩み */
.concerns{background:center/cover no-repeat;padding:110px 0}
.concerns::before{content:"";position:absolute;inset:0;background:rgba(255,247,246,.3)}
.ccard{position:relative;width:640px;margin:0 auto;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px rgba(153,102,102,.12)}
.ccard__band{background:var(--pink);color:#fff;font-weight:700;font-size:20px;text-align:center;padding:18px 24px}
.ccard__list{padding:36px 40px 40px;display:flex;justify-content:center}
.dots li{display:flex;gap:12px;align-items:flex-start;line-height:1.8}
.dots li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none;margin-top:.75em}
.ccard .dots{display:flex;flex-direction:column;gap:18px}

/* 番号の丸（葉っぱ） */
.leaf{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--en);font-weight:700;font-size:18px;line-height:1;
 -webkit-mask:radial-gradient(circle at 87% 12%,transparent 7px,#000 7.5px);mask:radial-gradient(circle at 87% 12%,transparent 7px,#000 7.5px)}
.leaf--1{background:var(--c1)}.leaf--2{background:var(--c2)}.leaf--3{background:var(--c3)}.leaf--4{background:var(--c4)}
.leaf--teal{background:var(--teal)}

/* 大切にしていること */
.fcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.fcard{position:relative;background:var(--bg);border-radius:20px;padding:44px 14px 32px;text-align:center}
.fcard .leaf{position:absolute;top:-26px;left:50%;transform:translateX(-50%)}
.fcard h3{font-size:21px;letter-spacing:.04em;line-height:1.8}
.fcard p{font-size:16px;color:var(--sub);margin-top:8px}

/* 施術メニュー */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mcard{position:relative;height:200px;border-radius:20px;overflow:hidden;display:flex;align-items:center;padding:0 16px 0 32px;color:#fff}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(62,47,44,.62),rgba(62,47,44,0) 70%);z-index:1}
.mcard span{position:relative;z-index:2;font-size:28px;font-weight:700;letter-spacing:.08em}
.mcard:hover img{transform:scale(1.03);transition:transform .4s}

/* 院内 */
.interior{display:flex;align-items:center;gap:100px;padding:80px 0 0}
.interior__img{width:min(800px,55vw);flex:none}
.interior__img img{width:100%;height:500px;object-fit:cover;border-top-right-radius:120px}
.interior__txt{width:360px}
.interior__txt .h2{margin-bottom:20px}

/* 院長 */
.director{display:flex;gap:80px;align-items:center}
.director__ph{width:358px;height:358px;border:2px solid var(--pink);border-radius:50%;padding:12px;flex:none}
.director__ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top}
.director__txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.director__lead{font-size:26px;color:var(--pink-btn);font-weight:700;letter-spacing:.14em;line-height:1.6}
.director__name{font-size:24px;font-weight:700;letter-spacing:.14em}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:4px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--sub);background:#fff}

/* Q&A */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.qa{background:var(--bg);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.qa--white{background:#fff}
.qa__q,.qa__a{display:flex;gap:14px;align-items:flex-start}
.qa__q b{font-size:20px;line-height:1.8}
.qa__a p{font-size:16px;color:var(--sub);line-height:1.8}
.qa__mark{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-weight:700;font-size:16px}
.qa__q .qa__mark{background:var(--pink);color:#fff}
.qa__a .qa__mark{background:var(--pink-pale);color:var(--pink-btn)}

/* お客様の声 */
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.vcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.vcard b{color:var(--pink-btn);font-size:16px}
.vcard p{font-size:16px}

/* アクセス */
.access{display:flex;gap:40px;align-items:flex-start}
.access__map{width:520px;height:400px;border-radius:16px;overflow:hidden;flex:none}
.access__map iframe{width:100%;height:100%;border:0}
.access__info{flex:1;display:flex;flex-direction:column;gap:16px}
.access__info h3{font-size:28px;letter-spacing:.06em}
.dl{display:flex;gap:16px;font-size:16px}
.dl dt{width:80px;flex:none;color:var(--pink-btn);font-weight:700}
.dl dd{margin:0}
.hours{background:var(--bg);border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700}
.hours table{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:center;padding:4px 0;font-weight:700}
.hours th:first-child,.hours td:first-child{text-align:left;width:130px}
.hours .off{color:var(--sub);font-weight:400}.hours .on{color:var(--pink);font-weight:400}

/* ご予約の段 */
.cta{position:relative;padding:110px 0;background:center/cover no-repeat}
.cta::before{content:"";position:absolute;inset:0;background:rgba(252,228,228,.75)}
.cta__card{position:relative;width:760px;margin:0 auto;background:#fff;border-radius:24px;padding:56px 64px;text-align:center;box-shadow:0 8px 24px rgba(153,102,102,.12);display:flex;flex-direction:column;align-items:center;gap:16px}
.cta__card h2{font-size:32px;color:var(--pink-btn);letter-spacing:.1em}
.cta__tel{font-family:var(--en);font-weight:700;font-size:38px;line-height:1.3;letter-spacing:.06em}
.cta__btns{display:flex;gap:20px}
.cta__btns .btn{width:300px}

/* フッター */
.footer{padding:64px 0 40px}
.footer__in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:40px}
.footer__logo img{width:180px;height:60px;object-fit:contain}
.footer__addr{font-size:14px;color:var(--sub);margin-top:16px;line-height:1.8}
.footer__ig{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--en);font-weight:700;font-size:13px;color:var(--pink-btn)}
.footer__copy{margin-top:16px;font-family:var(--en);font-weight:700;font-size:11.5px;color:var(--sub)}
.fnav{display:flex;gap:48px;font-size:16px}
.fnav ul{display:flex;flex-direction:column;gap:12px}
.fnav a::before{content:"・"}
.fnav a:hover{color:var(--pink-btn)}

/* ---- 下層の共通部品 ---- */
.lead2{display:flex;gap:60px;align-items:flex-start}
.lead2__h{width:420px;flex:none;display:flex;flex-direction:column;gap:32px}
.lead2__h img{width:420px;object-fit:cover;border-radius:20px}
.lead2__b{flex:1}
.sub-h{display:flex;align-items:center;gap:10px;color:var(--pink);font-size:24px;font-weight:700;margin-bottom:16px}
.sub-h::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--pink);flex:none}

/* =========================================================
   スマホ（767px以下）
   ========================================================= */
@media (max-width:767px){
  .pc,.pc-i{display:none!important}.sp{display:block}.sp-i{display:inline}
  .interior{padding-bottom:56px}
  .director__txt{align-items:center;text-align:center}
  .tags{justify-content:center}
  body{font-size:16px;line-height:1.9}
  .inner{padding:0 24px}
  .sec{padding:56px 0}
  [id]{scroll-margin-top:96px}
  .btn{height:54px;font-size:16px;width:100%}
  .btn--w320{min-width:0}
  .btns{margin-top:32px}
  .btns--row{flex-direction:column}
  .h2{margin-bottom:32px}
  .h2__t{font-size:24px}
  .h2__line{margin-top:12px}
  .lead-pink{font-size:22px;line-height:1.8}
  .body{font-size:16px;line-height:1.9}

  .topbar{font-size:10.5px;line-height:24px}
  .header__in{height:64px;padding:0 24px}
  .header__logo img{width:128px;height:44px}
  .nav,.hbtns{display:none}
  .ig{margin-left:auto}
  .menubtn{display:block;position:relative;flex:none;width:24px;height:16px;margin-left:18px;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
  .menubtn span{position:absolute;left:0;width:24px;height:2px;border-radius:1px;background:#F0848A}
  .menubtn span:nth-child(1){top:0}.menubtn span:nth-child(2){top:7px}.menubtn span:nth-child(3){top:14px}

  .fixtab{display:flex;flex-direction:column;gap:8px;position:fixed;right:0;top:140px;z-index:60}
  .fixtab a{width:40px;height:108px;border-radius:12px 0 0 12px;color:#fff;font-weight:700;font-size:13px;writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;justify-content:center;letter-spacing:.1em;box-shadow:0 8px 24px rgba(90,74,71,.12)}
  .fixtab .t-web{background:var(--pink-btn)}.fixtab .t-line{background:var(--green)}

  .hero{height:420px}
  .hero__img{left:72px;height:360px}
  .hero__img img{border-bottom-left-radius:72px}
  .hero__catch{left:24px;top:236px;gap:8px}
  .hero__catch span{height:44px;line-height:44px;font-size:21px;padding:0 14px;border-radius:6px;letter-spacing:.1em}

  .cols{flex-direction:column;gap:24px;text-align:center}
  .cols__txt{align-items:center;text-align:center}
  .cols__img{width:100%}
  .cols__img img{height:260px;border-radius:16px}

  .concerns{padding:56px 0}
  .ccard{width:auto;margin:0 24px}
  .ccard__band{font-size:17px}
  .ccard__list{padding:24px 17px 28px}
  .ccard .dots{gap:14px}

  .fcards{grid-template-columns:1fr;gap:44px;margin-top:22px}
  .fcard{text-align:left;padding:36px 20px 20px}
  .fcard .leaf{width:44px;height:44px;font-size:16px;top:-22px;left:20px;transform:none}
  .fcard h3{font-size:19px}
  .fcard p{font-size:14px}

  .mcards{gap:12px}
  .mcard{height:120px;padding:0 12px 0 16px}
  .mcard span{font-size:16px}

  .interior{flex-direction:column;gap:24px;padding:0 0 56px;align-items:stretch}
  .interior__img{width:100%}
  .interior__img img{height:260px;border-radius:0}
  .interior__txt{width:auto;padding:0 24px}
  .interior__img img{height:280px}

  .director{flex-direction:column;gap:32px}
  .director__ph{width:240px;height:240px;padding:9px}
  .director__lead{font-size:20px}
  .director__name{font-size:20px}
  .director__txt{width:100%}

  .qa-grid,.vcards{grid-template-columns:1fr;gap:16px}
  .qa{padding:20px}
  .qa__q b{font-size:16px}
  .qa__a p{font-size:14px}
  .qa__mark{width:28px;height:28px;font-size:14px}

  .access{flex-direction:column;gap:24px}
  .access__map{width:100%;height:240px}
  .access__info h3{font-size:22px}
  .dl{font-size:14px}.dl dt{width:64px}
  .hours{font-size:13px;padding:10px 12px}
  .hours th:first-child,.hours td:first-child{width:96px}

  .cta{padding:56px 0}
  .cta__card{width:auto;margin:0 24px;padding:36px 20px;gap:12px}
  .cta__card h2{font-size:22px}
  .cta__tel{font-size:26px}
  .cta__btns{flex-direction:column;width:100%;gap:12px}
  .cta__btns .btn{width:100%}

  .footer{padding:40px 24px 100px}
  .footer__in{flex-direction:column;gap:28px}
  .fnav{gap:24px;font-size:14px;flex-wrap:wrap}
  .fnav ul{gap:8px}

  .ptitle__in{padding:30px 24px 16px}
  .ptitle__h{font-size:28px;gap:10px}
  .ptitle__h::before{width:26px;height:26px}
  .ptitle__dots{width:220px}
  .phero{padding-left:24px}
  .phero img{height:230px;border-radius:24px 0 0 24px}
  .lead2{flex-direction:column;gap:20px;text-align:center;align-items:stretch}
  .lead2__h{width:100%;gap:20px}
  .lead2__h img{width:100%;height:256px}
  .sub-h{font-size:19px}
}

/* 写真の入れ物を枠いっぱいに */
picture{display:block}
.hero__img picture,.director__ph picture,.mcard picture{height:100%}
.mcard picture{position:absolute;inset:0}
dl{margin:0}
.footer__ig svg{width:20px;height:20px}

/* ===== 下層ページの部品 ===== */
.teal,.teal-page .cta{--pink:#45BDB4;--pink-btn:#3AAFA6;--bg:#F0F8F7;--pink-pale:#DDF1EF}
.teal-page .cta::before{background:rgba(221,241,239,.75)}
.teal .ptitle__h,.teal .ptitle--photo .ptitle__h{color:#3AAFA6}
.lead-sec{padding:80px 0 90px}
.lead2{display:flex;gap:60px;align-items:flex-start}
.lead2__h{width:440px;flex:none}
.lead2__h--col{display:flex;flex-direction:column;gap:32px;width:420px}
.lead2__h--col .lead-pink{font-size:26px;letter-spacing:.1em}
.lead2__h--col img{width:100%;object-fit:cover;border-radius:20px}
.lead2__b{flex:1}
.text-mt{margin-bottom:48px}
.notes{margin-top:48px}
.sub-h{display:flex;align-items:center;gap:10px;color:var(--pink-btn);font-size:22px;font-weight:700;margin:0}
.sub-h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none}
.stack{display:flex;flex-direction:column;gap:48px}

/* 料金一覧（メニュー・料金） */
.plist{display:flex;flex-direction:column;gap:48px}
.pcard{background:#fff;border-radius:20px;padding:28px 36px 24px}
.pcard__head{display:flex;justify-content:space-between;align-items:center;min-height:60px}
.pcard__desc{font-size:16px;color:var(--sub);margin-top:4px}
.prow{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.pcard__head+.prow,.pcard__desc+.prow{border-top:0}
.prow__name{flex:1;display:flex;flex-direction:column;gap:2px}
.prow__name b{font-size:18px;letter-spacing:.04em}
.prow__name small{font-size:14px;color:var(--pink-btn);letter-spacing:.02em}
.prow__time{font-size:15px;color:var(--sub)}
.price{font-family:var(--en);font-weight:700;color:var(--pink-btn);font-size:24px;line-height:1.2;letter-spacing:.02em}

/* コースのカード（帯つき） */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.ccards--2{grid-template-columns:repeat(2,1fr)}
.ccards--4{grid-template-columns:repeat(4,1fr)}
.course{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:center}
.course--rec{border:2px solid var(--pink)}
.course__band{background:var(--pink-pale);padding:16px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.8}
.course--rec .course__band{background:var(--pink);color:#fff}
.course__band em{font-style:normal;background:#fff;color:var(--pink-btn);font-size:13px;letter-spacing:.04em;padding:2px 12px;border-radius:999px;line-height:1.8}
.course__body{padding:24px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:12px}
.course__target{font-size:14px;font-weight:700;color:var(--pink-btn);line-height:1.8}
.course__price{display:flex;align-items:center;gap:12px}
.course__price span{font-weight:700;font-size:16px;letter-spacing:.02em}
.course__price .price{font-size:30px}
.course__line{width:100%;height:1px;background:var(--line)}
.course__desc{font-size:16px}
.course .dots{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:16px}
.course .dots li::before{width:7px;height:7px;margin-top:.8em}
.course--white{background:#fff}

/* 番号つきカード */
.ncards{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 24px;margin-top:24px}
.ncards--3{grid-template-columns:repeat(3,1fr)}
.ncard{position:relative;background:var(--bg);border-radius:20px;padding:44px 16px 28px;text-align:center}
.ncard--white{background:#fff}
.ncard .leaf{position:absolute;top:-26px;left:50%;transform:translateX(-50%)}
.ncard h3{font-size:18px;letter-spacing:.04em;line-height:1.8}
.ncard--lg h3{font-size:22px}
.ncard p{font-size:16px;color:var(--sub);margin-top:10px}

/* 初めての方へ：メニュー選び */
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gcard{display:flex;background:#fff;border-radius:20px;overflow:hidden;min-height:218px}
.gcard picture{width:200px;flex:none}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard__t{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.gcard__t b{font-size:24px;line-height:1.6;letter-spacing:.06em}
.gcard__t p{font-size:16px;color:var(--sub)}
.gcard__t span{font-size:16px;font-weight:700;color:var(--pink-btn)}
.gcard__t span::after{content:"　→"}
.center{text-align:center}
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wcard{background:#fff;border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:16px}
.wcard b{font-size:24px;line-height:1.6}
.wcard p{font-size:20px;flex:1}
.wcard .btn{height:56px;padding:0 16px;font-size:16px;width:100%;max-width:256px;align-self:center;margin-top:28px}

/* 訪問：健康保険 */
.icard{background:var(--bg);border-radius:20px;overflow:hidden;text-align:center}
.icard__band{background:var(--pink-pale);padding:16px;font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.8}
.icard__body{padding:24px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16px}
.icard__body em{font-style:normal;background:#fff;color:var(--pink-btn);font-weight:700;font-size:13px;padding:3px 14px;border-radius:999px;margin-top:6px}
.ccards--2.icards{align-items:stretch}

/* 訪問：医療・介護関係者へのバナー */
.banner{display:flex;background:#fff;border-radius:24px;overflow:hidden}
.banner picture{width:420px;flex:none}
.banner img{width:100%;height:100%;min-height:325px;object-fit:cover}
.banner__t{padding:32px 40px;display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:flex-start}
.banner__t em{font-style:normal;background:var(--pink);color:#fff;font-weight:700;font-size:13px;padding:4px 14px;border-radius:999px}
.banner__t b{font-size:24px;line-height:1.6;letter-spacing:.06em}
.banner__t p{font-size:16px}

/* 院長紹介 */
.greet{display:flex;gap:60px;align-items:center}
.greet__txt{display:flex;flex-direction:column;gap:20px}
.greet__txt .lead-pink{font-size:26px;letter-spacing:.1em}
.pbox{background:#fff;border-radius:20px;padding:40px 48px;display:flex;flex-direction:column;gap:28px}
.pbox__cols{display:flex;gap:48px;align-items:flex-start}
.pbox__main{flex:1;display:flex;flex-direction:column;gap:10px}
.pbox__exp{width:400px;flex:none;background:var(--bg);border-radius:16px;padding:28px 32px;display:flex;flex-direction:column;gap:10px}
.pbox__name{display:flex;align-items:flex-end;gap:10px;color:var(--pink-btn)}
.pbox__name::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);margin-bottom:15px}
.pbox__name ruby{font-size:22px;font-weight:700;letter-spacing:.06em;ruby-position:over}
.pbox__name rt{font-size:13px;font-weight:400;letter-spacing:.12em}
.pbox__exp .sub-h{color:var(--text);font-size:19px}
.pbox__exp .sub-h::before{background:var(--c4)}
.small-dots li{font-size:16px}
.small-dots li::before{width:6px;height:6px}
.pbox__line{height:1px;background:var(--line)}
.pbox p{font-size:16px}

/* お客様の声（下層） */
.vlist{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.vitem{border:1px solid var(--line);border-radius:20px;padding:20px 20px 28px;display:flex;flex-direction:column;gap:14px}
.vitem img{width:100%;height:260px;object-fit:contain;border-radius:10px;background:#fafafa}
.vitem b{color:var(--pink-btn);font-size:16px}
.vitem p{font-size:16px}

/* よくある質問（下層） */
.anchors{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.anchors a{color:var(--pink-btn);font-weight:700;font-size:15px;letter-spacing:.04em;padding:4px 0}
.anchors i{width:1px;height:14px;background:#F0C4C6}

/* プライバシーポリシー */
.policy{display:flex;flex-direction:column;gap:36px;font-size:16px}
.policy h2{color:var(--pink-btn);font-size:20px;letter-spacing:.04em;margin-bottom:10px}

@media (max-width:767px){
  .ptitle--photo{height:auto}
  .ptitle--photo::before{height:200px}
  .ptitle--photo .phero{position:relative;top:auto;left:auto;margin-left:24px}
  .ptitle--photo .ptitle__in{padding-bottom:16px}
  .phero img{height:230px;border-radius:24px 0 0 24px}
  .sec--after-title{padding-top:16px}
  .lead-sec{padding:32px 0 48px}
  .lead2{flex-direction:column;gap:20px;text-align:center;align-items:center}
  .lead2__h,.lead2__h--col{width:100%}
  .lead2__h--col .lead-pink{font-size:20px}
  .lead2__h--col img{height:256px}
  .lead2--left{text-align:left;align-items:stretch}
  .text-mt{margin-bottom:32px}
  .notes{margin-top:32px}
  .sub-h{font-size:19px}
  .stack{gap:32px}
  .plist{gap:24px}
  .pcard{padding:24px 20px 16px}
  .pcard__head{flex-direction:column;align-items:flex-start;gap:12px}
  .pcard__head .btn{height:44px;font-size:14px}
  .prow{flex-wrap:wrap;gap:4px 12px}
  .prow__name{flex-basis:100%}
  .prow__time{flex:1}
  .price{font-size:20px}
  .ccards,.ccards--2,.ccards--4{grid-template-columns:1fr;gap:16px}
  .course__price .price{font-size:26px}
  .ncards,.ncards--3{grid-template-columns:1fr;gap:44px;margin-top:22px}
  .ncard{text-align:left;padding:36px 20px 20px}
  .ncard .leaf{width:44px;height:44px;font-size:16px;top:-22px;left:20px;transform:none}
  .ncard h3,.ncard--lg h3{font-size:18px}
  .ncard p{font-size:14px;margin-top:6px}
  .gcards,.wcards{grid-template-columns:1fr;gap:16px}
  .gcard{min-height:0}
  .gcard picture{width:110px}
  .gcard__t{padding:16px}
  .gcard__t b{font-size:19px}
  .gcard__t p,.gcard__t span{font-size:14px}
  .wcard{padding:24px 20px}
  .wcard b{font-size:20px}
  .wcard p{font-size:16px}
  .wcard .btn{margin-top:8px;max-width:none}
  .banner{flex-direction:column}
  .banner picture{width:100%}
  .banner img{min-height:0;height:180px}
  .banner__t{padding:24px 20px}
  .banner__t b{font-size:19px}
  .greet{flex-direction:column;gap:32px}
  .greet__txt .lead-pink{font-size:20px;text-align:center}
  .pbox{padding:24px 20px}
  .pbox__cols{flex-direction:column;gap:24px}
  .pbox__exp{width:100%;padding:24px}
  .vlist{grid-template-columns:1fr;gap:16px}
  .vitem img{height:200px}
  .anchors{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .anchors i{display:none}
  .anchors a{font-size:14px}
  .policy{gap:28px;font-size:14px}
  .policy h2{font-size:17px}
}
.teal .ptitle__h::before{background-image:url(assets/img/common/heart-teal.png)}

/* 画像は枠に合わせる（幅・高さの属性を入れたため） */
img{height:auto}

/* ===== 動き（画面に入ったらふわっと表示）=====
   ・動きは「見せたい順番」をつけるためだけ。押せない所にホバーの動きは付けない
   ・「視差効果を減らす」をONにしている人には動かさない */
.js .fx{opacity:0;transform:translateY(12px);transition:opacity 1.2s cubic-bezier(.445,.05,.55,.95),transform 1.2s cubic-bezier(.445,.05,.55,.95);transition-delay:var(--d,0s)}
.js .fx.is-in{opacity:1;transform:none}
.js .hero__catch span{opacity:0;animation:catchIn 1.2s cubic-bezier(.445,.05,.55,.95) .4s forwards}
.js .hero__catch span:nth-child(2){animation-delay:.6s}.js .hero__catch span:nth-child(3){animation-delay:.8s}
@keyframes catchIn{to{opacity:1;transform:none}}
.js .hero__img{animation:heroIn 1.2s ease both}
@keyframes heroIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js .fx,.js .hero__catch span,.js .hero__img{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
