/* =========================================================
   在宅訪問マッサージ たいよう  スタイル
   色を変えるときは :root の値を書き換えるだけで全体に反映されます
========================================================= */
:root{
  --font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;  /* ページ全体の書体 */
  --teal:#3F9486;      /* 緑（ロゴ・ボタン） */
  --teal-deep:#2B6F64;
  --yellow:#F7DC5A;    /* 黄色（帯・ラベル） */
  --orange:#EF9E32;    /* オレンジ（見出し） */
  --red:#E8392B;       /* 料金の数字 */
  --cream:#FCF5E3;     /* 薄いクリーム背景 */
  --ink:#2F3B43;       /* 文字 */
  --ink-soft:#5B6A73;
  --slate:#4F6E7B;     /* 小見出し */
  --line:#E3DCCB;
  --hd-h:64px;
  --bar-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hd-h);overflow-x:clip}
body{overflow-x:clip;margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:17px;line-height:2;letter-spacing:.03em;padding-bottom:var(--bar-h)}
h1,h2,h3,h4{font-family:var(--font);line-height:1.5;margin:0}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
section{padding:72px 20px;position:relative}
section>*{max-width:880px;margin-left:auto;margin-right:auto}
.cream{background:var(--cream)}
.center{text-align:center}
.small{font-size:14px;color:var(--ink-soft)}
.etc{text-align:right;margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* 写真が未登録のときの灰色の枠（main.js が自動で差し替え） */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#E6E9EA 0 14px,#EEF1F2 14px 28px);color:#6B7A82;font-size:14px;line-height:1.5;padding:12px;min-height:180px;border:2px dashed #C3CCD1}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hd-h);z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px}
.hd-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.hd-logo{height:44px;width:auto}
.hd-logo.ph{min-height:0;height:44px;width:90px;font-size:0;padding:0}.hd-logo.ph::before{content:"ロゴ";font-size:12px}
.hd-name{font-family:var(--font);font-size:15px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-badge{border:1.5px solid var(--orange);color:var(--orange);font-size:13px;padding:0 6px;line-height:1.7;white-space:nowrap}
.hd-menu{flex:none;width:52px;height:52px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 8px;cursor:pointer}
.hd-menu span{display:block;height:2px;background:#888;transition:.3s}
.hd-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.hd-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
@media(max-width:560px){.hd-name{display:none}}

.drawer{position:fixed;top:var(--hd-h);right:0;bottom:0;width:min(320px,86vw);z-index:49;background:var(--teal);color:#fff;padding:24px 28px;transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.165,.84,.44,1),visibility 0s .4s;overflow-y:auto}
.drawer.open{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.165,.84,.44,1)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25);text-decoration:none;font-family:var(--font);font-weight:700}
.drawer-tel{display:block;margin-top:24px;font-family:var(--font);font-size:26px;font-weight:900;text-decoration:none}

main{padding-top:var(--hd-h)}

/* ---------- ファーストビュー ---------- */
.fv{min-height:calc(100svh - var(--hd-h));overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;padding:60px 20px 120px;text-align:center}
.fv-bg{position:absolute;inset:-10% 0 -10% 0;max-width:none;margin:0;background-color:#8EC3EA;background-position:center;background-size:cover;background-repeat:no-repeat}
.fv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,#FFF6CF);pointer-events:none}
.fv>*:not(.fv-bg):not(.fv-dawn){position:relative;z-index:2}
.fv-catch{font-weight:700;font-size:clamp(34px,8.5vw,64px);letter-spacing:.14em;color:#2F5B80;text-shadow:0 0 18px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.9)}



.fv-logo{display:flex;flex-direction:column;align-items:center;gap:20px}
.fv-logo-text{width:min(300px,64vw)}
.fv-logo-mark{width:min(340px,70vw)}
.fv-logo .ph{width:min(300px,70vw);min-height:120px}
@keyframes sunGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,60,0))}50%{filter:drop-shadow(0 0 24px rgba(255,190,60,.8))}}
.fadein{opacity:0;animation:fadeIn 2s ease 1.1s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ---------- セカンドビュー ---------- */
.sv{background:url(../images/slider_bg2_v2.jpg) center/auto 100% repeat-x,linear-gradient(#FFF6CF,#F9DD5E 30%,#F6C84A);overflow:hidden;padding:40px 20px 80px}
.sv::before,.sv::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:url(../images/slider_bg1_v2.svg) center/contain no-repeat;pointer-events:none;opacity:.8}
.sv::before{right:-280px;top:-200px;animation:spin 60s linear infinite}
.sv::after{left:-300px;bottom:-280px;animation:spin 80s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.sv-inner{position:relative;max-width:560px;margin:0 auto;height:min(170vw,900px)}
.sv-deco{position:absolute;left:0;top:0;width:36%;aspect-ratio:1;border-radius:50%;object-fit:cover;z-index:1}
.sv-deco.ph{border-radius:50%;min-height:0}
.slider{position:absolute;right:0;top:14%;width:76%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 10px 30px rgba(120,80,0,.18);z-index:2;background:#eee}
.slider>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;transform:scale(1.12)}
.slider>.is-active{opacity:1;animation:kenburns 6s linear forwards}
.slider>.ph{min-height:0;border:0}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.sv-circle{position:absolute;left:4%;bottom:0;width:90%;aspect-ratio:1;border-radius:50%;background:#fff;border:3px solid var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--teal);font-family:var(--font);font-weight:900;text-align:center;line-height:1.6;box-shadow:0 12px 30px rgba(120,80,0,.15);z-index:1;padding-top:14%}
.sv-circle small{font-size:clamp(18px,4.6vw,28px)}
.sv-circle b{font-size:clamp(22px,6.2vw,38px)}
.sv-circle strong{font-size:clamp(28px,7vw,44px)}

/* ---------- 固定背景パララックス ---------- */
/* clip-path + position:fixed の組み合わせで iPhone でも背景が止まって見えます */
.para{position:relative;clip-path:inset(0);padding:0;min-height:70vh;display:flex;align-items:center;justify-content:center}
.para>*{max-width:none}
.para-bg{position:fixed;inset:0;height:100vh;background-color:#8A8F93;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:-1}
.para::before{content:"";position:absolute;inset:0;background:rgba(40,40,40,.45)}
.para-empty{min-height:55vh}
.para-empty::before{background:transparent}
.para-text{position:relative;color:#fff;text-align:center;font-family:var(--font);font-weight:500;font-size:clamp(20px,5vw,32px);line-height:2;padding:60px 20px}
.para-text b{font-weight:900;font-size:1.12em}

/* ---------- 紹介 ---------- */
.intro{padding-top:0}
.intro-box{background:#fff;padding:36px 24px;margin-top:-1px;max-width:820px}
.intro-photo{max-width:none;margin:0 0 0 20px}
.intro-photo img,.intro-photo .ph{width:100%;max-height:520px;object-fit:cover}

/* ---------- 見出し ---------- */
.ttl-bracket{position:relative;text-align:center;color:var(--slate);font-weight:900;font-size:clamp(20px,5.6vw,36px);padding:28px 6px;margin-bottom:48px}
.ttl-bracket::before,.ttl-bracket::after{content:"";position:absolute;width:60px;height:60px;border:2px solid var(--ink)}
.ttl-bracket::before{left:0;top:0;border-right:0;border-bottom:0}
.ttl-bracket::after{right:0;bottom:0;border-left:0;border-top:0}
.ttl-center{text-align:center;margin-bottom:40px}
.ttl-center small{display:block;font-family:var(--font);color:var(--slate);letter-spacing:.12em;font-size:16px}
.ttl-center h2{color:var(--orange);font-weight:900;font-size:clamp(30px,8vw,46px)}
.ttl-center h2::after{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--yellow);margin:14px auto 0}
.ttl-dot{display:inline-block;border:3px dotted var(--orange);padding:4px 36px 4px 36px;background:#fff;font-size:26px;font-weight:900;margin-bottom:12px;position:relative}
.ttl-dot::after{content:"";position:absolute;left:100%;bottom:-3px;width:calc(100vw - 100% - 40px);max-width:600px;border-bottom:3px dotted var(--orange)}
.ttl-slash{text-align:center;color:var(--teal);font-weight:900;font-size:clamp(22px,5.8vw,34px);transform:rotate(-3deg);position:relative;margin-bottom:40px;padding:0 44px}
.ttl-slash::before,.ttl-slash::after{content:"";position:absolute;top:10%;width:4px;height:80%;background:var(--teal);border-radius:2px}
.ttl-slash::before{left:6px;transform:rotate(-30deg)}
.ttl-slash::after{right:6px;transform:rotate(30deg)}
.ttl-sub{text-align:center;color:var(--teal);font-size:28px;font-weight:900;margin:64px auto 28px}

/* ---------- 特長カード ---------- */
.card{background:#fff;border-radius:40px;padding:0 24px 32px;margin-bottom:56px;box-shadow:0 6px 16px rgba(160,130,60,.12);max-width:720px}
.card-ttl{background:var(--teal);color:#fff;text-align:center;font-weight:900;font-size:clamp(20px,5.4vw,30px);padding:10px 12px;margin:0 20px 24px}
.illust{width:100%;margin:0 auto}
.illust.ph{min-height:200px}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- エリア・対象者 ---------- */
.area-map{background:center right/contain no-repeat;margin-bottom:56px}
.dots{padding-left:1.4em;margin:16px 0 0}
.dots li{margin-bottom:6px}
.accent{color:var(--teal);font-family:var(--font);font-weight:900;font-size:clamp(20px,5vw,28px);margin-top:24px}
.note{font-weight:700;margin-top:24px}
.collage{position:relative;height:min(170vw,1100px);margin-top:56px;max-width:720px}
.collage img,.collage .ph{position:absolute;object-fit:cover;box-shadow:16px 16px 0 #D8CFBC}
.collage .c1{left:-20px;top:0;width:80%;height:50%}
.collage .c2{right:-20px;top:38%;width:66%;height:30%;z-index:1}
.collage .c3{left:0;bottom:0;width:72%;height:30%}

/* ---------- 料金 ---------- */
.lead{text-align:center;font-weight:700;font-size:19px}
.price-box{text-align:center;margin:28px auto}
.pill{display:inline-block;background:var(--yellow);border-radius:999px;padding:6px 48px;font-size:22px;font-family:var(--font);font-weight:700}
.amt{font-family:var(--font);font-weight:900;color:var(--red);font-size:clamp(46px,13vw,80px);line-height:1.3;margin:8px 0 0}
.amt small{font-size:.38em;color:var(--ink);margin-right:4px}
.amt .kara{font-size:.5em;color:var(--ink);margin:0 4px}
.kome{list-style:none;padding:0;font-size:16px;line-height:1.8}
.kome li{padding-left:1.2em;text-indent:-1.2em;margin-bottom:12px}
.kome li::before{content:"※"}
.menu{display:grid;gap:56px}
.menu-item img,.menu-item .ph{width:100%;aspect-ratio:4/3;object-fit:cover}
.menu-item h4{text-align:right;color:var(--teal);font-size:28px;font-weight:900;border-left:2px solid var(--teal);border-bottom:3px solid var(--teal);padding:6px 20px 2px;margin:0 0 16px 24px}
.menu-item p{padding:0 12px}
@media(min-width:760px){.menu{grid-template-columns:repeat(3,1fr);gap:28px}.menu-item h4{font-size:22px;margin-left:0}}

/* ---------- ごあいさつ ---------- */
.greeting{background:#EAF4F4 center/cover}
.greeting-box{background:rgba(255,255,255,.93);border-radius:24px;padding:44px 28px}
.greeting-photo{width:100%;margin-bottom:32px}
.greeting-name{font-family:var(--font);font-size:30px;font-weight:700;margin-bottom:16px}
.greeting-name small{display:block;font-size:.55em}
.greeting-cred{background:var(--cream);padding:18px 18px 18px 2.2em;margin:0 0 28px}

/* ---------- 問合せ帯 ---------- */
.cta-band,.contact{background:var(--yellow);text-align:center}
.cta-band p{font-family:var(--font);font-weight:700;font-size:20px}
.bigtel{display:block;font-family:var(--font);font-weight:900;font-size:clamp(38px,10.5vw,60px);text-decoration:none;margin:8px auto 20px;letter-spacing:.02em;text-align:center}
.bigtel::before{content:"☎ ";font-size:.7em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 44px;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;text-decoration:none;font-size:18px;border:0;cursor:pointer;font-family:var(--font);transition:transform .2s,background .2s}
.btn:hover{background:var(--teal-deep);transform:translateY(-2px)}

/* ---------- 求人 ---------- */
.recruit{background:#F5FAF9 center/cover;text-align:center}
.recruit-head{background:rgba(255,255,255,.9);padding:40px 20px;border-radius:24px}
.recruit-kicker{display:inline-block;background:var(--teal);color:#fff;padding:2px 16px;font-weight:700}
.recruit h2{color:var(--slate);font-size:clamp(26px,7vw,40px);font-weight:900;margin-bottom:28px}
.recruit h2>span{color:var(--orange)}
.recruit-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.recruit-photos img,.recruit-photos .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.recruit-head>p:last-child{text-align:left}
.grid-bg{background-color:var(--cream);background-image:linear-gradient(rgba(255,255,255,.7) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.7) 2px,transparent 2px);background-size:48px 48px}
.merit-box{background:#fff;padding:36px 22px}
.merit-item{margin-bottom:48px}
.merit-no{display:inline-block;background:var(--yellow);border-radius:999px;padding:0 18px;font-family:var(--font);font-weight:700;color:var(--slate);font-size:15px}
.merit-no b{font-size:1.5em}
.merit-item h3{color:var(--orange);font-weight:900;font-size:clamp(22px,5.8vw,32px);border-bottom:3px dotted var(--teal);padding-bottom:8px;margin-bottom:18px}
mark{background:linear-gradient(transparent 60%,rgba(251,238,6,.5) 60%);color:inherit}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:0 14px;font-size:15px}
.voice-item{text-align:center;margin-bottom:64px;max-width:640px}
.bubble{background:#fff;border:3px solid var(--teal);border-radius:28px;padding:24px;text-align:left;position:relative;margin-bottom:56px}
.bubble::after{content:"";position:absolute;left:50%;top:100%;height:48px;border-left:8px dotted var(--teal);transform:translateX(-50%)}
.avatar{width:180px;height:180px;border-radius:50%;background:var(--yellow);object-fit:cover;margin:0 auto 12px}
.avatar.ph{min-height:0;font-size:12px}
.who{line-height:1.6}

/* ---------- 表 ---------- */
.job,.company{background:#fff}
.tbl{width:100%;border-collapse:collapse;margin:24px auto 40px;font-size:16px;line-height:1.8}
.tbl th,.tbl td{border-bottom:1px solid #D5D5D5;padding:16px 8px;text-align:left;vertical-align:top}
.tbl th{width:8em;color:var(--teal-deep);white-space:nowrap}
@media(max-width:600px){.tbl th,.tbl td{display:block;width:auto}.tbl th{border-bottom:0;padding-bottom:0}}
.company-photo{width:100%;max-height:420px;object-fit:cover;margin-bottom:28px}
.map{max-width:none;margin:0 -20px -72px}
.map iframe{display:block;width:100%;height:380px;border:0}

/* ---------- フォーム ---------- */
.contact h2{color:var(--slate);font-size:clamp(28px,7.5vw,44px);font-weight:900}
.form{max-width:560px;margin:28px auto 0;display:grid;gap:18px;text-align:left}
.form label{font-weight:700;display:grid;gap:6px}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:12px 14px;border:2px solid #E3C94A;border-radius:12px;background:#fff;width:100%}
.form .btn{justify-self:center}

/* ---------- フッター ---------- */
.ft{background:#F4EEDB center/cover;text-align:center;padding:48px 20px 32px;position:relative}
.ft-logo{height:64px;width:auto;margin:0 auto 16px}
.ft-logo.ph{width:140px;min-height:0}
.pagetop{position:absolute;right:16px;top:-28px;width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;text-decoration:none;font-size:12px;line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center}

/* ---------- 下部固定ボタン ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px);background:#000}
.bar a{display:flex;align-items:center;justify-content:center;gap:12px;height:var(--bar-h);color:#fff;text-decoration:none;font-family:var(--font);font-weight:900;font-size:19px;letter-spacing:.08em}
.bar svg{width:28px;height:28px;fill:#fff}
.bar-tel{background:var(--teal)}

/* =========================================================
   スクロールで出てくる動き
   reveal + up    … 下からふわっと
   reveal + left  … 右から左へスライド
   reveal + right … 左から右へスライド
   reveal + zoom  … 小さい状態から拡大
========================================================= */
.reveal{opacity:0;transition:opacity 1s,transform 1s cubic-bezier(.165,.84,.44,1)}
.reveal.up{transform:translateY(80px)}
.reveal.left{transform:translateX(100px)}
.reveal.right{transform:translateX(-100px)}
.reveal.zoom{transform:scale(.6)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .fadein{opacity:1;animation:none}
  .sv::before,.sv::after,.slider>.is-active{animation:none}
}

/* ---------- パソコン表示 ---------- */
@media(min-width:900px){
  body{padding-bottom:0}
  .bar{left:auto;right:20px;bottom:20px;width:360px;border-radius:999px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2)}
  .sv-inner{height:880px}
  .intro{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
  .intro>*{max-width:none;margin:0}
  .intro-photo{margin:0}
  .feature{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;max-width:none}
  .feature>*{max-width:none;margin-left:0;margin-right:0}
  .feature .ttl-bracket{grid-column:1/-1;max-width:760px;margin:0 auto 48px}
  .collage{height:900px}
}

/* =========================================================
   第2版：文字組み・文字の出し方・イラストの動き
========================================================= */

/* ---------- 文字組み（読みやすさ） ---------- */
body{line-height:1.95;letter-spacing:.04em}
h1,h2,h3,h4{font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase;line-break:strict}
p,li,td{text-wrap:pretty;line-break:strict}
.nw{display:inline-block}                        /* ひとかたまりで改行させたい言葉 */
.lead,.accent,.cta-band p,.recruit-kicker,.dots li,.greeting-cred li,.sv-circle,.area>p,.note,.tags li,.who{word-break:auto-phrase}
.para-text{font-size:clamp(17px,4.5vw,30px);padding:60px 12px}
.para-text b{display:inline-block}
.recruit h2{font-size:clamp(22px,6.2vw,40px)}
.ttl-slash{font-size:clamp(19px,5.2vw,34px);padding:0 38px}
.card p,.intro-box p,.greeting-box>p,.merit-item p{max-width:34em;margin-left:auto;margin-right:auto}
.card p{font-size:16px;line-height:1.95}
.ttl-center small{letter-spacing:.08em}
.amt{font-variant-numeric:tabular-nums}

/* ---------- 見出し：1文字ずつ現れる（class="split"） ---------- */
.split .ch{display:inline-block;opacity:0;transform:translateY(.6em);filter:blur(6px)}
.split.is-in .ch{animation:chIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms)}
.fv-catch.is-in .ch{animation-duration:1.3s;animation-delay:calc(var(--i) * 110ms + .2s)}
@keyframes chIn{to{opacity:1;transform:none;filter:blur(0)}}

/* 見出しの飾りが描かれる */
.ttl-center h2::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) .5s}
.ttl-center h2.is-in::after{transform:none}
.ttl-bracket::before,.ttl-bracket::after{width:0;height:0;opacity:0;transition:width .6s ease .2s,height .6s ease .6s,opacity .2s .2s}
.ttl-bracket.is-in::before,.ttl-bracket.is-in::after{width:60px;height:60px;opacity:1}
.ttl-slash::before,.ttl-slash::after{scale:1 0;transition:scale .5s cubic-bezier(.34,1.56,.64,1) .6s}
.ttl-slash.is-in::before,.ttl-slash.is-in::after{scale:1 1}

/* ---------- 文章：1行ずつ浮かび上がる（class="lines"） ---------- */
.lines .line{display:block;opacity:0;transform:translateY(18px);filter:blur(4px)}
.is-in .lines .line{animation:chIn 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .25s + .1s)}

/* 箇条書き：上から順番に */
.dots li,.tags li,.greeting-cred li{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 70ms + .2s)}
.is-in .dots li,.dots.is-in li,.is-in .tags li,.greeting-cred.is-in li{opacity:1;transform:none}
.greeting-cred{opacity:1}

/* 黄色いマーカーが左から引かれる */
mark{background:linear-gradient(rgba(251,238,6,.55),rgba(251,238,6,.55)) no-repeat 0 88%/0% 40%;transition:background-size 1.4s cubic-bezier(.2,.8,.2,1) .6s;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.is-in mark{background-size:100% 40%}

/* ---------- トップ：ロゴと太陽 ---------- */

.sunrise{opacity:0;transform:translateY(70px) scale(.92);animation:sunUp 2.2s cubic-bezier(.2,.8,.2,1) 2.1s forwards,sunGlow 5s ease-in-out 4.3s infinite}
@keyframes sunUp{to{opacity:1;transform:none}}
.sv-deco{animation:turn 50s linear infinite}
@keyframes turn{to{rotate:360deg}}

/* ---------- 特長のイラスト：ぽんっと出て、ゆらゆら ---------- */
.illust-wrap{position:relative;width:min(340px,80%);margin:0 auto 24px}
.illust-wrap::before{content:"";position:absolute;inset:6% 8%;border-radius:50%;background:radial-gradient(circle,rgba(247,220,90,.5),rgba(247,220,90,0) 70%);transform:scale(0);transition:transform 1.1s cubic-bezier(.34,1.56,.64,1) .2s}
.card.is-in .illust-wrap::before{transform:scale(1)}
.illust{position:relative;opacity:0;transform:scale(.7) rotate(-6deg)}
.card.is-in .illust{animation:pop .9s cubic-bezier(.34,1.56,.64,1) .35s forwards,sway 6s ease-in-out 1.3s infinite}
.card:nth-of-type(2n).is-in .illust{animation-delay:.35s,2.2s}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-7px) rotate(-1.5deg)}75%{transform:translateY(-3px) rotate(1.5deg)}}
.card-ttl{clip-path:inset(0 50% 0 50%);transition:clip-path .8s cubic-bezier(.2,.8,.2,1) .15s}
.card.is-in .card-ttl{clip-path:inset(0)}

/* ---------- スタッフの声：吹き出し→点線→イラストの順に ---------- */
.bubble::after{height:0;transition:height .6s ease .5s}
.bubble.is-in::after{height:48px}
.avatar.reveal.is-in{animation:bounceIn 1s cubic-bezier(.34,1.56,.64,1) .3s both,nod 5s ease-in-out 1.5s infinite}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(30px)}100%{opacity:1;transform:none}}
@keyframes nod{0%,100%{rotate:0deg}30%{rotate:-4deg}60%{rotate:3deg}}

/* ---------- 動きを減らす設定の方には止めた状態で表示 ---------- */
@media(prefers-reduced-motion:reduce){
  .split .ch,.lines .line,.illust,.sunrise,.avatar.reveal.is-in{opacity:1;transform:none;filter:none;animation:none}
  .dots li,.tags li,.greeting-cred li{opacity:1;transform:none;transition:none}
  mark{background-size:100% 40%;transition:none}
  .card-ttl{clip-path:none}
  .ttl-center h2::after{transform:none;transition:none}
  .bubble::after{height:48px;transition:none}
  .ttl-bracket::before,.ttl-bracket::after{width:60px;height:60px;opacity:1}
  .ttl-slash::before,.ttl-slash::after{scale:1 1}
  .sv-deco{animation:none}
}
/* =========================================================
   第3版：トップのロゴと太陽の登場演出
   0.2秒〜  キャッチコピーが1文字ずつ
   1.6秒〜  ロゴが筆で書くように左から現れる → 光が走る
   2.2秒〜  空が朝焼け色から青空へ／太陽が下から弾むように昇る
   3.6秒〜  太陽の後ろで光の筋が回り、光の輪が広がり続ける
========================================================= */

/* 朝焼け → 青空 */
.fv-dawn{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#E9885A 0%,#F7B878 45%,#FFE3B0 100%);opacity:.8;animation:dawn 2.8s ease-in-out 2.2s forwards}
@keyframes dawn{to{opacity:0}}

/* ロゴ：筆で書くように現れる */
.logo-shine{position:relative;display:inline-block;line-height:0}
.fv-logo-text{clip-path:inset(0 100% 0 0);transform:scale(.94);animation:brush 1.1s cubic-bezier(.6,0,.2,1) 1.6s forwards}
@keyframes brush{to{clip-path:inset(0 0 0 0);transform:none}}
/* ロゴの文字の上だけを光が走る（6秒ごと） */
.logo-shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(../images/logo1.png) center/100% 100% no-repeat;mask:url(../images/logo1.png) center/100% 100% no-repeat;
  animation:shine 6s ease-in-out 2.9s infinite}
@keyframes shine{0%{background-position:150% 0}25%,100%{background-position:-60% 0}}

/* 太陽：弾みながら昇り、ふわふわ浮かぶ */
.sun-stage{position:relative;width:min(340px,70vw);margin:0 auto}
.sun-stage .fv-logo-mark{position:relative;z-index:2;width:100%}
.sunrise{opacity:0;transform:translateY(140px) scale(.6);
  animation:sunUp 1.8s cubic-bezier(.25,.9,.3,1.2) 2.2s forwards,sunGlow 4s ease-in-out 4s infinite,floatY 6s ease-in-out 4s infinite}
@keyframes sunUp{0%{opacity:0;transform:translateY(140px) scale(.6)}55%{opacity:1}75%{transform:translateY(-14px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes sunGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,190,60,.4))}50%{filter:drop-shadow(0 0 30px rgba(255,170,40,.95))}}

/* 太陽の後ろで回る光の筋（太陽の中心 ≒ 画像の上から38%） */
.sun-rays{position:absolute;left:50%;top:38%;width:190%;aspect-ratio:1;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,160,.75) 0deg 5deg,rgba(255,236,160,0) 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 12%,transparent 62%);mask:radial-gradient(circle,#000 12%,transparent 62%);
  opacity:0;transform:translate(-50%,-50%) scale(.3);
  animation:raysIn 1.4s ease-out 3.4s forwards,spinRays 40s linear 3.4s infinite}
@keyframes raysIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes spinRays{to{rotate:360deg}}

/* 太陽から広がる光の輪 */
.sun-ring{position:absolute;left:50%;top:38%;width:60%;aspect-ratio:1;z-index:1;border-radius:50%;pointer-events:none;
  border:3px solid rgba(255,200,80,.8);box-shadow:0 0 20px rgba(255,200,80,.6);
  opacity:0;transform:translate(-50%,-50%) scale(.5);animation:ring 3.2s ease-out 3.8s infinite}
.sun-ring.r2{animation-delay:5.4s}
@keyframes ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}

@media(prefers-reduced-motion:reduce){
  .fv-dawn,.sun-ring{display:none}
  .fv-logo-text,.sunrise{clip-path:none;opacity:1;transform:none;animation:none}
  .logo-shine::after{animation:none;display:none}
  .sun-rays{opacity:.6;transform:translate(-50%,-50%);animation:none}
}
/* =========================================================
   第4版：落ち着いたデザイン（イラスト→アイコン・イニシャル）
          ＋パソコン表示の最適化
========================================================= */
:root{--head:#1F4450;--line-soft:#E6E1D3;--mint:#EEF6F4}
.card-no,.merit-no,.ttl-center small,.initial,.bigtel,.hd-tel{font-family:var(--font)}

/* ---------- 見出し ---------- */
.ttl-center small{letter-spacing:.24em;color:var(--teal);font-size:14px;font-weight:500}
.ttl-center h2{color:var(--head);font-size:clamp(26px,6.4vw,40px)}
.ttl-center h2::after{background:var(--orange);width:40px;height:3px;border-radius:2px}
.ttl-dot{display:block;border:0;background:none;padding:0 0 0 16px;border-left:4px solid var(--teal);font-size:24px;color:var(--head);margin:0 0 16px;line-height:1.4}
.ttl-dot::after{display:none}
.ttl-sub{color:var(--head)}
.accent{color:var(--teal-deep)}

/* ---------- 特長カード：番号＋細い線のアイコン ---------- */
.card{border-radius:16px;padding:32px 28px 28px;margin-bottom:24px;border:1px solid var(--line-soft);box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 28px rgba(31,68,80,.06)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.card-no{font-size:48px;line-height:1;color:var(--teal);letter-spacing:.02em;opacity:0;transform:translateX(-16px);transition:opacity .8s .3s,transform .8s cubic-bezier(.2,.8,.2,1) .3s}
.card.is-in .card-no{opacity:1;transform:none}
.card-icon{width:68px;height:68px;border-radius:50%;background:var(--mint);display:grid;place-items:center}
.card-icon svg{width:40px;height:40px;fill:none;stroke:var(--teal-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card-icon svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) .5s}
.card.is-in .card-icon svg *{stroke-dashoffset:0}
.card-ttl{background:none;color:var(--head);text-align:left;padding:0 0 14px;margin:0 0 16px;font-size:clamp(20px,5vw,24px);border-bottom:1px solid var(--line-soft);position:relative;clip-path:none!important}
.card-ttl::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .7s}
.card.is-in .card-ttl::after{transform:none}
.card p{margin:0}

/* ---------- 背景：方眼をやめて落ち着いた無地に ---------- */
.soft-bg{background:#F7F5EE}

/* ---------- 働くメリット ---------- */
.merit-box{background:#fff;border-radius:16px;padding:40px 28px 8px;border:1px solid var(--line-soft)}
.merit-item{margin-bottom:44px}
.merit-no{background:none;border-radius:0;padding:0;color:var(--teal);letter-spacing:.2em;font-size:13px;display:flex;align-items:center;gap:12px}
.merit-no b{font-size:22px;letter-spacing:.04em;font-weight:500}
.merit-no::after{content:"";width:40px;height:1px;background:var(--teal)}
.merit-item h3{color:var(--head);border-bottom:1px solid var(--line-soft);font-size:clamp(20px,5.2vw,25px);padding-bottom:12px;margin:6px 0 16px}
.tags li{background:var(--mint);border-color:#D5E6E1}

/* ---------- スタッフの声：イニシャルの丸マーク ---------- */
.voice-list{display:grid;gap:24px}
.voice-item{margin:0;max-width:none;background:#fff;border-radius:16px;border:1px solid var(--line-soft);padding:40px 28px 24px;text-align:left;position:relative}
.voice-item::before{content:"\201C";position:absolute;top:6px;left:22px;font-family:Georgia,serif;font-size:72px;line-height:1;color:var(--teal);opacity:.22}
.voice-item blockquote{margin:0 0 22px;font-size:16px;line-height:1.95;position:relative}
.voice-item figcaption{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line-soft);padding-top:18px}
.initial{flex:none;width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:17px;letter-spacing:.1em;transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1) .4s,opacity .4s .4s}
.voice-item.is-in .initial{transform:none;opacity:1}
.voice-item .who{font-size:14px;line-height:1.7;color:var(--ink-soft);text-align:left}
.voice-item .who b{color:var(--head);font-size:15px;letter-spacing:.06em}

/* ---------- 電話番号 ---------- */
.bigtel{font-weight:500;letter-spacing:.04em;color:var(--head)}
.bigtel::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.25em;vertical-align:-.02em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- ヘッダー（パソコンではメニューを横に並べる） ---------- */
.hd-nav{display:none}
@media(min-width:1080px){
  .hd{padding:0 32px}
  .hd-nav{display:flex;align-items:center;gap:28px;font-family:var(--font);font-weight:700;font-size:15px}
  .hd-nav a{text-decoration:none;color:var(--head);position:relative}
  .hd-nav a:not(.hd-tel)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .3s}
  .hd-nav a:not(.hd-tel):hover::after{transform:none}
  .hd-tel{background:var(--teal);color:#fff!important;padding:6px 20px;border-radius:999px;letter-spacing:.06em;font-weight:500;font-size:16px}
  .hd-menu,.drawer{display:none}
}

/* ---------- パソコン表示（幅900px以上） ---------- */
@media(min-width:900px){
  section{padding:112px 40px}
  section>*{max-width:1040px}
  .ttl-center{margin-bottom:56px}

  /* 丸い写真と求人の丸を左右に並べる */
  .sv{padding:72px 40px 96px}
  .sv-inner{max-width:1040px;height:600px}
  .sv-deco{width:16%;left:0;top:0}
  .slider{left:7%;right:auto;top:8%;width:48%}
  .sv-circle{left:auto;right:1%;top:12%;bottom:auto;width:44%;padding-top:0}

  .intro-box{padding:56px}

  /* 特長：2列 */
  .feature{grid-template-columns:repeat(2,minmax(0,500px));justify-content:center;gap:28px}
  .feature>.ttl-center{grid-column:1/-1;margin:0 auto 28px}
  .card{margin:0;max-width:none}

  /* 訪問エリア（左）と対象者（右） */
  .area{display:grid;grid-template-columns:repeat(2,minmax(0,500px));justify-content:center;column-gap:64px;align-items:start}
  .area>*{max-width:none;margin-left:0;margin-right:0}
  .area-map{grid-column:1;margin:0;background-size:80% auto;background-position:right bottom}
  .area-target{grid-column:2}
  .collage{grid-column:1/-1;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:80px}
  .collage .c1,.collage .c2,.collage .c3{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;box-shadow:12px 12px 0 #E6DECB}

  /* 料金 */
  .lead,.kome{max-width:780px}

  /* ごあいさつ：写真（左）と文章（右） */
  .greeting-box{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:56px;padding:64px}
  .greeting-box>*{grid-column:2;max-width:none;margin-left:0;margin-right:0}
  .greeting-box>.ttl-center{grid-column:1/-1}
  .greeting-photo{grid-column:1;grid-row:2/span 6;align-self:start;margin:0}

  /* 求人 */
  .recruit-head{padding:64px}
  .recruit-photos{max-width:520px;margin:0 auto 32px}
  .recruit-head>p:last-child{max-width:720px;margin:0 auto}
  .merit-box{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;padding:56px 56px 12px}
  .voice-list{grid-template-columns:1fr 1fr}
  .job .tbl,.company .tbl{max-width:880px}
  .company-photo{max-width:460px;margin:0 auto 40px}
  .company>p{max-width:780px}
}

@media(prefers-reduced-motion:reduce){
  .card-no,.initial{opacity:1;transform:none;transition:none}
  .card-icon svg *{stroke-dashoffset:0;transition:none}
  .card-ttl::after{transform:none;transition:none}
}
/* =========================================================
   第5版：お問い合わせの整理 ／ トップの演出を明るく華やかに
========================================================= */

/* ---------- トップ：光の中から太陽が現れる ---------- */
/* はじめは白〜淡い金色の光に包まれ、太陽が昇るとともに青空が現れる */
.fv-dawn{background:radial-gradient(ellipse at 50% 68%,#FFFFFF 0%,#FFFBEA 28%,rgba(255,240,190,.92) 55%,rgba(255,255,255,.8) 100%);opacity:1;animation:dawn 2.4s cubic-bezier(.4,0,.2,1) 2.3s forwards}

/* 太陽が昇りきった瞬間の、ふわっと広がる光 */
.sun-bloom{position:absolute;left:50%;top:38%;width:140%;aspect-ratio:1;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,236,170,.7) 25%,rgba(255,220,120,0) 60%);
  opacity:0;transform:translate(-50%,-50%) scale(.3);animation:bloom 2.2s ease-out 3.2s forwards}
@keyframes bloom{40%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:.45;transform:translate(-50%,-50%) scale(1)}}

/* 太陽を横切る光の帯（レンズフレア） */
.sun-flare{position:absolute;left:50%;top:38%;width:300%;height:4px;z-index:3;pointer-events:none;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,230,160,.6) 30%,#fff 50%,rgba(255,230,160,.6) 70%,transparent);
  box-shadow:0 0 18px 4px rgba(255,236,170,.8);
  opacity:0;transform:translate(-50%,-50%) scaleX(0);animation:flare 1.8s cubic-bezier(.2,.8,.2,1) 3.3s forwards}
@keyframes flare{0%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}25%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.15)}}

/* 金色の光の筋 */
.sun-rays{background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.85) 0deg 4deg,rgba(255,255,255,0) 4deg 12deg)}
.sun-ring{border-color:rgba(255,215,110,.85);box-shadow:0 0 24px rgba(255,220,130,.7)}

/* きらめく金色の光の粒（位置は HTML の --x / --y で調整） */
.sparkles{position:absolute;inset:0;z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,210,100,.95)) drop-shadow(0 0 2px rgba(255,190,60,.9))}
.sparkles i{position:absolute;left:var(--x);top:var(--y);width:calc(30px * var(--s));aspect-ratio:1;
  background:radial-gradient(circle,#fff 0 20%,#FFE39A 45%,#F5C55A 80%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  opacity:0;animation:twinkle 2.8s ease-in-out calc(3.8s + var(--d)) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ---------- お問い合わせ ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact{text-align:left}
.contact-wrap{display:grid;gap:40px;max-width:1040px}
.contact-info{text-align:center}
.contact .ttl-center{margin-bottom:24px}
.contact-tel{background:rgba(255,255,255,.6);border-radius:16px;padding:24px 20px;margin-top:24px;text-align:center}
.contact-tel-label{font-weight:700;color:var(--head);margin:0}
.contact-tel .bigtel{margin:4px auto 8px}
.contact-tel .small{margin:0}
.form{background:#fff;border-radius:16px;padding:32px 22px;box-shadow:0 10px 30px rgba(120,90,0,.12);margin:0;max-width:none}
.form label{font-size:15px;color:var(--head)}
.form em{font-style:normal;font-size:12px;background:var(--orange);color:#fff;border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:2px;font-weight:700}
.form input,.form select,.form textarea{border:1.5px solid #D9D3C3;background:#FDFCF8;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,148,134,.18)}
.form-row{display:grid;gap:18px}
.form-hint{font-size:13px;color:var(--ink-soft);margin:-8px 0 0;line-height:1.6}
.form-note{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.7}
.form .btn{width:100%;justify-self:stretch}
.form .btn:disabled{opacity:.6;cursor:wait;transform:none}
.form-msg{margin:0;padding:12px 16px;border-radius:10px;font-size:15px;line-height:1.7}
.form-msg.is-ok{background:#E8F4F1;color:var(--teal-deep)}
.form-msg.is-ng{background:#FDEDEA;color:#B23B2B}
/* 求人欄の応募案内 */
.apply{text-align:center;background:var(--cream);border-radius:16px;padding:32px 20px;max-width:780px}
.apply p{margin:0}
.apply .bigtel{margin:8px auto 16px}

@media(min-width:900px){
  .contact-wrap{grid-template-columns:minmax(0,420px) minmax(0,560px);justify-content:center;column-gap:64px;align-items:center}
  .contact-info,.contact-info .ttl-center{text-align:left}
  .contact-info .ttl-center h2::after{margin-left:0}
  .form-row{grid-template-columns:1fr 1fr}
  .form{padding:40px}
}

@media(prefers-reduced-motion:reduce){
  .sparkles,.sun-flare{display:none}
  .sun-bloom{opacity:.45;transform:translate(-50%,-50%);animation:none}
}
.bigtel{white-space:nowrap}
.contact-tel .bigtel{font-size:clamp(32px,8.5vw,42px)}
/* =========================================================
   第6版：トップを上品に（明朝体・静かなフェード）
          訪問エリアをカード形式に
========================================================= */

/* ---------- トップ ---------- */
.hero{justify-content:center;padding:48px 20px 96px}
.hero .fv-bg{animation:skyZoom 26s ease-out forwards}          /* 空がゆっくり引いていく */
@keyframes skyZoom{from{scale:1.1}to{scale:1}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 100%)}
.hero-inner{width:100%;max-width:1100px;display:grid;gap:28px;justify-items:center;text-align:center}
.hero-text{display:grid;justify-items:center}
.hero-eyebrow{font-family:var(--font);letter-spacing:.32em;font-size:12px;color:#2B5A74;margin:0 0 20px;opacity:0;animation:heroIn 1.4s ease .3s forwards}
.hero-catch{font-family:var(--font);font-weight:600;color:#17344A;
  font-size:clamp(34px,9.2vw,66px);letter-spacing:.16em;line-height:1.55;text-shadow:0 2px 24px rgba(255,255,255,.55)}
.hero-catch .hl{display:block;opacity:0;transform:translateY(14px);animation:heroIn 1.8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-catch .hl:nth-child(1){animation-delay:.6s}
.hero-catch .hl:nth-child(2){animation-delay:1.1s}
.hero-line{display:block;width:64px;height:1px;background:#B8923A;margin:26px 0;transform:scaleX(0);animation:lineIn 1.2s cubic-bezier(.6,0,.2,1) 1.9s forwards}
.hero-lead{font-size:15px;color:#1F3F55;line-height:2.1;margin:0;opacity:0;animation:heroIn 1.4s ease 2.2s forwards;word-break:auto-phrase}
@keyframes heroIn{to{opacity:1;transform:none}}
@keyframes lineIn{to{transform:none}}

.hero-mark{position:relative;display:grid;justify-items:center;gap:14px}
.hero-halo{position:absolute;left:50%;top:34%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,246,220,.55) 32%,rgba(255,255,255,0) 64%);
  opacity:0;animation:heroIn 2.6s ease 1.3s forwards,breathe 8s ease-in-out 4s infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.65}}
.hero-sun{position:relative;width:min(190px,44vw);opacity:0;transform:translateY(18px);animation:heroIn 2.2s cubic-bezier(.2,.7,.2,1) 1.3s forwards}
.hero-logo{position:relative;width:min(170px,40vw);opacity:0;animation:heroIn 1.6s ease 2s forwards}
.hero-mark .ph{position:relative;width:200px;min-height:120px}

@media(min-width:900px){
  .hero{padding:64px 48px}
  .hero-inner{grid-template-columns:1.15fr .85fr;align-items:center;gap:48px;text-align:left}
  .hero-text{justify-items:start}
  .hero-lead{font-size:16px}
  .hero-sun{width:min(300px,26vw)}
  .hero-logo{width:min(240px,20vw)}
}
@media(prefers-reduced-motion:reduce){
  .hero .fv-bg,.hero-eyebrow,.hero-catch .hl,.hero-line,.hero-lead,.hero-halo,.hero-sun,.hero-logo{animation:none;opacity:1;transform:none}
  .hero-halo{transform:translate(-50%,-50%)}
}

/* ---------- 訪問エリア：カード形式 ---------- */
.area-box{margin-bottom:56px}
.area-cards{display:grid;gap:16px;margin-top:20px}
.area-card{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:20px 20px 16px;box-shadow:0 6px 18px rgba(31,68,80,.05)}
.area-pref{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font);font-weight:700;font-size:18px;color:var(--head);line-height:1.4}
.area-pref svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round}
.area-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.area-tags li{background:var(--mint);border:1px solid #D5E6E1;color:var(--teal-deep);border-radius:6px;padding:4px 12px;font-size:15px;line-height:1.6;
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i) * 60ms + .25s)}
.is-in .area-tags li{opacity:1;transform:none}
.area-note{margin:18px 0 0;padding:14px 18px;background:#fff;border-left:3px solid var(--orange);border-radius:0 10px 10px 0;font-weight:700;color:var(--head);font-size:15px}
@media(min-width:900px){
  .area-box{grid-column:1;margin:0}
}
@media(prefers-reduced-motion:reduce){.area-tags li{opacity:1;transform:none;transition:none}}
/* =========================================================
   第7版：給与・勤務パターン（4パターン）
========================================================= */
.plans-wrap{max-width:880px;margin:0 auto 72px}
.plans-wrap .ttl-sub{margin-top:0}
.plans-lead{text-align:center;margin:0 0 24px}
.plan-tabs{display:grid;grid-template-columns:1fr 1fr;max-width:480px;margin:0 auto 28px;background:#EEF2F1;border-radius:999px;padding:4px}
.plan-tabs button{border:0;background:none;border-radius:999px;padding:10px 8px;font:inherit;font-weight:700;color:var(--ink-soft);cursor:pointer;line-height:1.35;transition:background .3s,color .3s,box-shadow .3s}
.plan-tabs button small{display:block;font-size:11px;font-weight:400}
.plan-tabs button[aria-selected="true"]{background:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(63,148,134,.3)}
.plans{display:grid;gap:20px}
.plan{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:0 0 22px;overflow:hidden;box-shadow:0 10px 28px rgba(31,68,80,.07)}
.plan[hidden]{display:none}
.plan-head{display:flex;justify-content:space-between;align-items:center;background:var(--head);color:#fff;padding:14px 22px}
.plan-days{font-family:var(--font);font-weight:700;font-size:18px}
.plan-type{font-size:12px;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:2px 12px}
.plan-pay{font-family:var(--font);font-size:46px;font-weight:500;color:var(--head);text-align:center;margin:22px 0 0;line-height:1.2;letter-spacing:.02em}
.plan-pay small{font-family:var(--font);font-size:15px;margin:0 6px;color:var(--ink-soft);font-weight:700}
.plan-sub{text-align:center;font-size:12px;color:var(--ink-soft);margin:4px 0 16px}
.plan-spec{margin:0 22px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft)}
.plan-spec div{padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.plan-spec dt{font-size:12px;color:var(--ink-soft);line-height:1.5}
.plan-spec dd{margin:0;font-weight:700;color:var(--head);font-size:16px;line-height:1.5}
.plan-inc{margin:14px 22px 0;padding:10px 14px;background:#FFF6E0;border-radius:10px;font-size:13px;font-weight:700;color:#80540E;line-height:1.6}
.plan-detail{margin:14px 22px 0}
.plan-detail summary{cursor:pointer;font-size:14px;color:var(--teal-deep);font-weight:700;list-style:none;display:flex;align-items:center;gap:8px}
.plan-detail summary::-webkit-details-marker{display:none}
.plan-detail summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint);font-size:15px;line-height:1}
.plan-detail[open] summary::before{content:"−"}
.plan-detail ul{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.plan-detail li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.plan-detail li span:last-child{white-space:nowrap;font-weight:700;color:var(--head)}
.plan-notes{font-size:13px;color:var(--ink-soft);margin:22px 0 0;padding-left:1.2em;line-height:1.8}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
/* 第8版：固定残業代の時間表記・パート */
.plan-spec dd small{font-size:12px;font-weight:400;color:var(--ink-soft);margin-left:2px;white-space:nowrap;display:inline-block}
.plan-part{margin-top:24px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:18px 22px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;box-shadow:0 6px 18px rgba(31,68,80,.05)}
.plan-part p{margin:0}
.plan-part-ttl{grid-row:span 2;background:var(--teal);color:#fff;font-weight:700;border-radius:999px;padding:4px 16px;font-size:14px}
.plan-part-pay{font-weight:700;color:var(--head)}
.plan-part-pay b{font-family:var(--font);font-size:30px;font-weight:500;margin:0 2px;letter-spacing:.02em}
.plan-part-note{font-size:13px;color:var(--ink-soft);line-height:1.6}
/* =========================================================
   第9版：書体を Zen Kaku Gothic New に統一
========================================================= */
body{letter-spacing:.05em}
h1,h2,h3,h4{font-weight:700;font-feature-settings:"palt"}
.hero-catch{font-weight:500;letter-spacing:.14em;line-height:1.6}
.hero-eyebrow,.ttl-center small,.merit-no{font-weight:500}
.card-no,.plan-pay,.bigtel,.plan-part-pay b{font-weight:500;letter-spacing:.02em}
.plan-pay small,.plan-part-pay{font-weight:700}
/* =========================================================
   第10版：求人ページの分離（トップの求人案内・パンくず）
========================================================= */
.recruit-teaser{background:linear-gradient(135deg,#EAF4F2,#F7F5EE)}
.rt-inner{display:grid;gap:24px;max-width:1040px;background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 10px 30px rgba(31,68,80,.08)}
.rt-photo{width:100%;aspect-ratio:16/10;object-fit:cover}
.rt-text{padding:0 24px 32px}
.rt-label{font-size:13px;letter-spacing:.24em;color:var(--teal);margin:0 0 6px}
.rt-text h2{color:var(--head);font-size:clamp(24px,6.4vw,34px);margin-bottom:16px}
.rt-text p{font-size:15px;line-height:1.9}
@media(min-width:900px){
  .rt-inner{grid-template-columns:1fr 1fr;align-items:center;gap:48px}
  .rt-photo{height:100%;aspect-ratio:auto;min-height:360px}
  .rt-text{padding:40px 48px 40px 0}
}
.crumb{max-width:1040px;margin:0 auto;padding:14px 20px;font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:center}
.crumb a{color:var(--teal-deep)}
.page-recruit .recruit{padding-top:48px}
.recruit-head h1{color:var(--head);font-size:clamp(24px,6.4vw,40px);font-weight:900;margin-bottom:28px;line-height:1.5}
.recruit-head h1>span{color:var(--orange)}
.recruit-head h1>span.nw{color:var(--head)}

/* =========================================================
   第11版：ご利用の流れ・よくある質問
========================================================= */
.hero-eyebrow{letter-spacing:.24em;font-size:13px}

/* ご利用の流れ */
.flow-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:18px;max-width:1040px;counter-reset:none}
.flow-step{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:24px 24px 22px;box-shadow:0 6px 18px rgba(31,68,80,.05)}
.flow-step+.flow-step::before{content:"";position:absolute;left:50%;top:-18px;width:2px;height:18px;background:var(--teal);opacity:.4}
.flow-no{display:inline-block;font-size:12px;letter-spacing:.2em;color:#fff;background:var(--teal);border-radius:999px;padding:2px 12px;font-weight:500}
.flow-step h3{color:var(--head);font-size:20px;margin:12px 0 8px}
.flow-step p{margin:0;font-size:15px;line-height:1.85}
@media(min-width:900px){
  .flow-list{grid-template-columns:repeat(4,1fr);gap:28px}
  .flow-step+.flow-step::before{left:-28px;top:50%;width:28px;height:2px}
}

/* よくある質問 */
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:18px 48px 18px 18px;position:relative;font-weight:700;color:var(--head);line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:20px;top:26px;width:10px;height:10px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(-135deg);top:30px}
.faq-q,.faq-mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px}
.faq-q{background:var(--teal);color:#fff}
.faq-a{display:flex;gap:14px;padding:0 20px 20px 18px}
.faq-mark{background:#FFF1D6;color:#B06F10}
.faq-a p{margin:0;font-size:15px;line-height:1.9;padding-top:2px}
/* =========================================================
   第12版：セカンドビュー（写真＋求人カード）
========================================================= */
.sv2{background:linear-gradient(180deg,#FFF9EC 0%,#FCF5E3 100%);padding:56px 20px 64px;overflow:hidden}
.sv2::before,.sv2::after{display:none}
.sv2-inner{max-width:1080px;margin:0 auto;display:grid;gap:20px}
.sv2-photo{position:relative}
.sv2 .slider{position:relative;inset:auto;left:auto;right:auto;top:auto;width:100%;aspect-ratio:4/3;border-radius:18px;border:0;box-shadow:0 18px 40px rgba(31,68,80,.14)}
.slider-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.slider-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .4s,background .4s}
.slider-dots span.on{width:24px;border-radius:4px;background:#fff}
.sv2-card{display:grid;gap:10px;text-decoration:none;background:#fff;border-radius:18px;padding:26px 24px;border:1px solid var(--line-soft);box-shadow:0 10px 28px rgba(31,68,80,.08);border-top:4px solid var(--teal);transition:transform .3s,box-shadow .3s}
.sv2-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(31,68,80,.14)}
.sv2-tag{justify-self:start;font-size:13px;font-weight:700;color:var(--teal-deep);background:var(--mint);border-radius:999px;padding:3px 14px}
.sv2-title{font-size:clamp(22px,5.8vw,30px);font-weight:700;color:var(--head);line-height:1.45}
.sv2-title b{color:var(--orange);font-weight:900}
.sv2-sub{font-size:14px;color:var(--ink-soft)}
.sv2-more{justify-self:start;margin-top:6px;display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:#fff;font-weight:700;border-radius:999px;padding:10px 22px;font-size:15px}
.sv2-more i{font-style:normal;transition:transform .3s}
.sv2-card:hover .sv2-more i{transform:translateX(4px)}
@media(min-width:900px){
  .sv2{padding:88px 40px}
  .sv2-inner{grid-template-columns:1.45fr 1fr;align-items:center;gap:0}
  .sv2 .slider{aspect-ratio:16/10}
  .sv2-card{margin-left:-56px;position:relative;z-index:3;padding:40px 36px}
}.slider-dots{z-index:3}

/* =========================================================
   第13版：写真の寄りすぎを修正／背景を奥行きのある配色に
========================================================= */

/* ---------- 写真スライダー：寄りを弱め、顔が切れないよう上寄りに ---------- */
.sv2 .slider>*{object-position:50% 30%;transform:scale(1.03)}
.sv2 .slider>.is-active{animation:kenburnsSoft 7s ease-out forwards}
@keyframes kenburnsSoft{from{transform:scale(1.03)}to{transform:scale(1)}}
@media(min-width:900px){.sv2 .slider{aspect-ratio:3/2}}

/* ---------- 背景の基本色 ---------- */
:root{
  --bg-soft:#F8F6F1;
  --glow-teal:rgba(63,148,134,.10);
  --glow-sun:rgba(245,178,70,.12);
}
/* 明るい面：無地をやめ、緑と太陽色のやわらかい光をにじませる */
.cream,.soft-bg,.sv2,.greeting,.recruit-teaser{
  background-color:var(--bg-soft)!important;
  background-image:
    radial-gradient(ellipse 60% 50% at 8% 0%,var(--glow-teal),transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 100%,var(--glow-sun),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg-soft) 100%)!important;
}
.sv2{background-image:
    radial-gradient(ellipse 50% 60% at 100% 0%,rgba(255,214,130,.22),transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%,var(--glow-teal),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg-soft) 100%)!important}
/* 白い面との境目をなめらかに */
.price,.job,.company{background:#fff}

/* ---------- 濃い面：お問い合わせの帯を深い緑紺のグラデーションに ---------- */
.cta-band,.contact{
  background-color:#1F4450!important;
  background-image:
    radial-gradient(ellipse 60% 70% at 85% 10%,rgba(255,214,130,.20),transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 100%,rgba(63,148,134,.45),transparent 70%),
    linear-gradient(135deg,#1B3C47 0%,#24505A 55%,#2B6F64 100%)!important;
  color:#fff;
}
.cta-band p,.contact-info p{color:rgba(255,255,255,.9)}
.cta-band .bigtel,.contact .bigtel{color:#fff}
.cta-band .btn{background:#fff;color:var(--teal-deep)}
.cta-band .btn:hover{background:#F2F7F6}
.contact .ttl-center small{color:#9ED6CC}
.contact .ttl-center h2{color:#fff}
.contact-tel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(2px)}
.contact-tel-label{color:#fff}
.contact-tel .small,.contact-info .small{color:rgba(255,255,255,.75)}
.form{box-shadow:0 20px 50px rgba(0,0,0,.25)}

/* ---------- フッター ---------- */
.ft{background:#16303A!important;background-image:none!important;color:rgba(255,255,255,.8)}
.ft-logo{filter:brightness(0) invert(1);opacity:.9}
/* =========================================================
   第14版：手のひらと太陽の写真の上下をフェードさせる
========================================================= */
.para-empty{min-height:72vh}
/* 上：特長の背景色から、下：訪問エリアの背景色へ、なめらかにつなぐ */
.para-empty::before,.para-empty::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;background:none}
.para-empty::before{top:0;height:32%;background:linear-gradient(180deg,var(--bg-soft) 0%,rgba(248,246,241,.85) 25%,rgba(248,246,241,0) 100%)}
.para-empty::after{bottom:0;height:32%;background:linear-gradient(0deg,#FFFFFF 0%,rgba(255,255,255,.85) 25%,rgba(255,255,255,0) 100%)}
/* 写真そのものも少しだけ明るく、やわらかく */
.para-empty .para-bg{filter:saturate(.9) brightness(1.04)}/* 前後のセクションの端の色をそろえ、継ぎ目の細い線を消す */
#feature{background-image:
    radial-gradient(ellipse 60% 40% at 8% 0%,var(--glow-teal),transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 20%,var(--glow-sun),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg-soft) 40%)!important}
#area{background-image:
    radial-gradient(ellipse 55% 45% at 95% 100%,var(--glow-sun),transparent 70%),
    radial-gradient(ellipse 60% 40% at 8% 70%,var(--glow-teal),transparent 70%),
    linear-gradient(180deg,var(--bg-soft) 0%,#FFFFFF 60%,var(--bg-soft) 100%)!important}
.para-empty{margin:-2px 0}
.para-empty::after{background:linear-gradient(0deg,var(--bg-soft) 0%,rgba(248,246,241,.85) 25%,rgba(248,246,241,0) 100%)}.para-empty::before{top:-2px}
.para-empty::after{bottom:-2px}
.feature,#area{position:relative;z-index:1}

/* =========================================================
   第15版：写真の演出・お問い合わせボタン・開いた瞬間の演出
========================================================= */

/* ---------- 幕が開くように写真が現れる（class="reveal wipe"） ---------- */
.reveal.wipe{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.reveal.wipe.is-in{clip-path:inset(0 0 0 0)}
.menu-item:nth-child(2) .reveal.wipe,.collage .c2{transition-delay:.15s}
.menu-item:nth-child(3) .reveal.wipe,.collage .c3{transition-delay:.3s}

/* ---------- スクロールに合わせたゆっくりズーム（data-zoom） ---------- */
.intro-photo{overflow:hidden}
[data-zoom]{will-change:transform;transform-origin:50% 50%}

/* ---------- ごあいさつ：写真を止めたまま文章が流れる ---------- */
.greeting-photo{border-radius:14px}
@media(min-width:900px){
  .greeting-box{align-items:start}
  .greeting-photo{position:sticky;top:96px;grid-row:2/span 1}
  .greeting-text{grid-column:2;grid-row:2}
}
@media(max-width:899px){
  /* スマホ：写真が止まり、その上を文章のカードが通り過ぎる */
  .greeting-photo{position:sticky;top:76px;z-index:0;margin-bottom:0}
  .greeting-text{position:relative;z-index:1;background:#fff;border-radius:16px;padding:24px 20px 8px;margin:-40px 8px 0;box-shadow:0 -10px 30px rgba(31,68,80,.12)}
}

/* ---------- お問い合わせボタン：必要なときだけ表示・スマホは細め ---------- */
:root{--bar-h:54px}
.bar{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.bar a{font-size:16px}
.bar svg{width:22px;height:22px}
.bar.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none}
@media(min-width:900px){
  .bar{width:300px}
  .bar a{height:50px;font-size:15px}
  .bar.is-hidden{transform:translateY(160%)}
}

/* ---------- 読んだところまでの線 ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--teal),var(--orange));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- 開いた瞬間の演出 ---------- */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#FBF7EC 60%,#F3EEE2 100%);transition:opacity .7s ease,visibility 0s .7s}
.loader img{width:min(150px,36vw);opacity:0;transform:scale(.9);animation:loaderIn 1s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes loaderIn{to{opacity:1;transform:none}}
.loader.is-done{opacity:0;visibility:hidden}
.no-loader .loader{display:none}
/* JSが動かない場合も必ず消える */
.loader{animation:loaderAuto 0s 3s forwards}
@keyframes loaderAuto{to{opacity:0;visibility:hidden}}
/* 演出中はトップの登場アニメーションを待たせる */
.js:not(.no-loader) .is-loading .hero *{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .reveal.wipe{clip-path:none;transition:none}
  .loader{display:none}
  [data-zoom]{transform:none!important}
}.reveal.wipe{clip-path:inset(0 -40px 100% 0)}
.reveal.wipe.is-in{clip-path:inset(0 -40px -40px 0)}

/* 第16版：スマホで手と太陽が中央に来るように */
@media(max-width:899px){.para-empty .para-bg{background-size:auto 62vh;background-position:72% 50%;background-color:var(--bg-soft)}}
@media(max-width:899px){.para-empty .para-bg{background-size:auto 78vh;background-position:64% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 24%,#000 76%,transparent 90%);mask-image:linear-gradient(180deg,transparent 10%,#000 24%,#000 76%,transparent 90%)}}

/* =========================================================
   第17版：緑とゴールドの配色（ベージュ基調をやめる）
========================================================= */
:root{
  --bg-soft:#F2F7F4;                    /* ほんのり緑がかった白 */
  --cream:#EAF3EF;                      /* 薄い緑（枠の中の背景） */
  --glow-teal:rgba(47,125,105,.12);
  --glow-sun:rgba(201,162,74,.12);      /* 金色のにじみ */
  --gold:#B8923A;
  --gold-light:#E2C77E;
  --green-deep:#123A33;
  --line-soft:#DCE7E2;
}
/* 見出しの下線・飾り線をゴールドに */
.ttl-center h2::after{background:linear-gradient(90deg,var(--gold),var(--gold-light));height:2px;width:56px}
.ttl-center small{color:var(--gold)}
.merit-no,.flow-no{letter-spacing:.2em}
.merit-no{color:var(--gold)}
.merit-no::after{background:var(--gold)}
.flow-no{background:var(--green-deep);color:var(--gold-light)}
.card-no{color:var(--gold)}
.card-ttl::after{background:var(--gold)}
.area-note{border-left-color:var(--gold)}
.plan-head{background:linear-gradient(135deg,var(--green-deep),#1F5A4F);border-bottom:2px solid var(--gold)}
.plan-type{border-color:rgba(226,199,126,.7);color:var(--gold-light)}
.plan-inc{background:#F6F0DF;color:#7A5A12}
.faq-mark{background:#F6F0DF;color:#9A7420}
.sv2-card{border-top-color:var(--gold)}
.form input,.form select,.form textarea{border-color:#CFDDD6;background:#FAFCFB}
mark{background-image:linear-gradient(rgba(226,199,126,.55),rgba(226,199,126,.55))}
.para-empty::before{background:linear-gradient(180deg,var(--bg-soft) 0%,rgba(242,247,244,.85) 25%,rgba(242,247,244,0) 100%)}
.para-empty::after{background:linear-gradient(0deg,var(--bg-soft) 0%,rgba(242,247,244,.85) 25%,rgba(242,247,244,0) 100%)}

/* 濃い面：深い緑＋金色の光 */
.cta-band,.contact{
  background-color:var(--green-deep)!important;
  background-image:
    radial-gradient(ellipse 55% 60% at 85% 0%,rgba(226,199,126,.22),transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%,rgba(63,148,134,.35),transparent 70%),
    linear-gradient(135deg,#0F302B 0%,#16443C 55%,#1F5A4F 100%)!important;
  position:relative;overflow:hidden;
}
.cta-band::before,.contact::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:.8}
.contact .ttl-center small{color:var(--gold-light)}
.cta-band .btn{background:linear-gradient(135deg,#D9BB6E,#B8923A);color:#fff}
.cta-band .btn:hover{background:linear-gradient(135deg,#E2C77E,#C49D45)}
.cta-band>*,.contact>*{position:relative;z-index:1}
.ft{background:#0E2A25!important}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}
.progress{background:linear-gradient(90deg,var(--teal),var(--gold))}

/* 金の粒がゆっくりまたたく（js で自動配置） */
.gold-dust{position:absolute;inset:0;z-index:0!important;pointer-events:none;overflow:hidden}
.gold-dust i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#FFF4CF 0%,#E2C77E 45%,rgba(226,199,126,0) 72%);
  opacity:0;animation:dust var(--t) ease-in-out var(--d) infinite}
@keyframes dust{0%,100%{opacity:0;transform:translateY(0) scale(.6)}50%{opacity:.9;transform:translateY(-10px) scale(1)}}
@media(prefers-reduced-motion:reduce){.gold-dust{display:none}}
/* アイコンの線描きを確実に動かす */
.card-icon svg *{transition:none}
.card.is-in .card-icon svg *{animation:iconDraw 1.8s cubic-bezier(.6,0,.2,1) .5s both}
@keyframes iconDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.card-icon svg *{stroke-dashoffset:0!important;animation:none!important}}

/* 第18版：スマホのごあいさつは写真と文章を重ねない */
@media(max-width:899px){.greeting-photo{position:static;margin-bottom:24px}.greeting-text{position:static;background:none;border-radius:0;padding:0;margin:0;box-shadow:none}}

/* =========================================================
   第19版：ごあいさつ（見出し・署名・歩み）／上品なきらめき
========================================================= */
.greeting-lead{font-size:clamp(24px,6.4vw,34px);font-weight:700;color:var(--head);line-height:1.55;letter-spacing:.1em;margin:0 0 20px;padding-left:18px;border-left:3px solid var(--gold)}
.greeting-sign{text-align:right;font-size:22px;font-weight:700;color:var(--head);letter-spacing:.2em;margin:28px 0 32px}
.greeting-sign small{display:block;font-size:12px;letter-spacing:.12em;color:var(--ink-soft);font-weight:500;margin-bottom:2px}
.history{list-style:none;margin:0 0 8px;padding:20px 20px 8px;background:var(--cream);border-radius:12px;position:relative}
.history li{position:relative;padding:0 0 16px 22px;font-size:15px;line-height:1.7}
.history li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(184,146,58,.2)}
.history li:not(:last-child)::after{content:"";position:absolute;left:4px;top:1.2em;bottom:-.2em;width:1px;background:rgba(184,146,58,.45)}
.history b{display:block;color:var(--gold);font-size:13px;letter-spacing:.1em}
.greeting-cred{margin-bottom:28px}

/* ---------- きらめき①：ボタンに光が走る ---------- */
.btn,.sv2-more,.hd-tel{position:relative;overflow:hidden;isolation:isolate}
.btn::after,.sv2-more::after,.hd-tel::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:btnShine 5s ease-in-out infinite}
.sv2-more::after{animation-delay:1.5s}
.hd-tel::after{animation-delay:2.5s}
@keyframes btnShine{0%,70%{left:-60%}100%{left:130%}}

/* ---------- きらめき②：見出しの金の線に光が流れる ---------- */
.ttl-center h2::after{background:linear-gradient(90deg,#B8923A 0%,#E2C77E 35%,#FFF3C9 50%,#E2C77E 65%,#B8923A 100%);background-size:220% 100%;animation:lineShine 4s linear infinite}
@keyframes lineShine{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- きらめき③：給与カードの金の縁取り ---------- */
.plan{position:relative}
.plan::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(184,146,58,.0) 20%,#E2C77E 45%,#FFF3C9 50%,#E2C77E 55%,rgba(184,146,58,0) 80%);background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:frameShine 6s ease-in-out infinite}
@keyframes frameShine{0%{background-position:100% 100%}100%{background-position:0% 0%}}
.plan-pay{background:linear-gradient(90deg,var(--head) 0%,var(--head) 40%,#B8923A 50%,var(--head) 60%,var(--head) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:payShine 6s ease-in-out infinite}
.plan-pay small{-webkit-text-fill-color:var(--ink-soft)}
@keyframes payShine{0%,60%{background-position:100% 0}100%{background-position:0 0}}

@media(prefers-reduced-motion:reduce){
  .btn::after,.sv2-more::after,.hd-tel::after{display:none}
  .ttl-center h2::after,.plan::before,.plan-pay{animation:none}
  .plan-pay{color:var(--head);background:none}
}
/* =========================================================
   第20版：スクロールすると出てくる「求人情報」ボタン
========================================================= */
.float-recruit{position:fixed;right:12px;bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom,0px));z-index:41;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;text-decoration:none;
  background:linear-gradient(135deg,#123A33,#1F5A4F);color:#fff;border:1px solid rgba(226,199,126,.7);
  border-radius:14px;padding:9px 38px 9px 16px;font-weight:700;font-size:14px;line-height:1.4;
  box-shadow:0 10px 26px rgba(10,40,34,.3);overflow:hidden;isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.float-recruit small{font-size:10px;font-weight:500;color:var(--gold-light);letter-spacing:.06em}
.float-recruit i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--gold-light);transition:right .3s}
.float-recruit:hover i{right:10px}
.float-recruit::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,243,201,.35),transparent);transform:skewX(-20deg);animation:btnShine 5s ease-in-out 1s infinite}
.float-recruit.is-hidden{transform:translateX(130%);opacity:0;pointer-events:none}
@media(min-width:900px){.float-recruit{right:20px;bottom:84px;font-size:15px;padding:11px 44px 11px 20px}}
@media(prefers-reduced-motion:reduce){.float-recruit::after{display:none}}
/* 第21版：JSで位置補正するため、CSSのなめらかスクロールは使わない */
html{scroll-behavior:auto}

/* =========================================================
   第22版：求人ページ（見出しのきらめき・目次・分かりやすいタブ）
========================================================= */
/* 求人情報の見出し：金色に光が流れ、周りで金の粒がきらめく */
.recruit-head{position:relative;overflow:hidden}
.rh-gold{display:inline-block;font-size:1.25em;letter-spacing:.12em;
  background:linear-gradient(100deg,#B8923A 0%,#E2C77E 30%,#FFF6D6 45%,#E2C77E 60%,#B8923A 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:goldText 3.5s linear infinite;
  filter:drop-shadow(0 2px 6px rgba(184,146,58,.25))}
@keyframes goldText{from{background-position:130% 0}to{background-position:-130% 0}}
.recruit-head .gold-dust{z-index:0!important}
.recruit-head>*{position:relative;z-index:1}

/* ページ内の目次 */
.rnav{max-width:1040px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rnav a{text-decoration:none;font-size:14px;font-weight:700;color:var(--teal-deep);background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:8px 16px;box-shadow:0 3px 10px rgba(31,68,80,.06)}
.rnav a.rnav-main{flex-basis:100%;max-width:420px;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,#123A33,#1F5A4F);color:#fff;border:1px solid var(--gold-light);font-size:16px;padding:12px 22px;position:relative;overflow:hidden;isolation:isolate}
.rnav a.rnav-main i{font-style:normal;color:var(--gold-light);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.rnav a.rnav-main::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,243,201,.35),transparent);transform:skewX(-20deg);animation:btnShine 4s ease-in-out infinite}

/* 給与のセクション */
.salary{background:#fff;padding-top:56px}
.salary .plans-wrap{margin-bottom:0}

/* タブ：切り替えられることが一目で分かるように */
.plan-tabs-hint{text-align:center;font-size:13px;font-weight:700;color:var(--gold);margin:0 0 8px;letter-spacing:.06em}
.plan-tabs-hint span{display:inline-block;animation:tapHint 1.8s ease-in-out infinite}
@keyframes tapHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.plan-tabs{background:#F4EFE2;border:2px solid var(--gold);padding:5px;box-shadow:0 6px 16px rgba(184,146,58,.18)}
.plan-tabs button{color:#7A6331;font-size:17px;padding:12px 8px;position:relative}
.plan-tabs button small{font-size:11px;opacity:.85}
.plan-tabs button[aria-selected="false"]:hover{background:rgba(255,255,255,.7)}
.plan-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#B8923A,#D9BB6E);color:#fff;box-shadow:0 4px 12px rgba(184,146,58,.4)}
.plan-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);border:7px solid transparent;border-top-color:#C9A452}
/* 選んでいない方に「ここも押せる」合図 */
.plan-tabs button[aria-selected="false"]::before{content:"";position:absolute;inset:4px;border-radius:999px;border:1.5px dashed rgba(184,146,58,.55);pointer-events:none}

@media(prefers-reduced-motion:reduce){.rh-gold,.rnav a.rnav-main i,.plan-tabs-hint span{animation:none}.rh-gold{color:#B8923A;background:none}.rnav a.rnav-main::after{display:none}}.recruit-head h1>span.rh-gold{color:transparent;-webkit-text-fill-color:transparent}

/* =========================================================
   第23版：月給の「キラーン」を早く／料金確定時の金の粒
========================================================= */
/* 月給：カードが出て約1秒でキラーンと光り、その後は5秒ごと */
.plan-pay{animation:none;position:relative}
.plan.is-in .plan-pay{animation:payFlash 5s ease-out 1s infinite}
@keyframes payFlash{0%{background-position:100% 0}18%{background-position:0 0}100%{background-position:0 0}}
.plan-pay::after{content:"";position:absolute;right:14%;top:8%;width:18px;height:18px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,#FFE9A8 40%,rgba(226,199,126,0) 72%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.plan.is-in .plan-pay::after{animation:twinkleOnce 5s ease-out 1.5s infinite}
@keyframes twinkleOnce{0%{opacity:0;transform:scale(.2) rotate(0)}6%{opacity:1;transform:scale(1.3) rotate(45deg)}14%,100%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* 料金：数字が決まった瞬間に金の丸がはじける */
.price-box{position:relative}
.amt{position:relative;display:inline-block}
.gold-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:2}
.gold-burst i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF6D6 0%,#E8CD84 35%,#B8923A 80%);box-shadow:0 0 8px rgba(226,199,126,.7);
  animation:burst 1.4s cubic-bezier(.15,.8,.3,1) forwards}
.gold-burst i.ring{background:none;border:2px solid #D9BB6E;box-shadow:none}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
.amt.pop{animation:amtPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes amtPop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.plan.is-in .plan-pay,.plan.is-in .plan-pay::after{animation:none}.gold-burst{display:none}}
/* =========================================================
   第24版：ヘッダーのメニューがはみ出さないように
========================================================= */
.hd-nav a{white-space:nowrap}
.hd-brand{flex-shrink:1;min-width:0}
/* 横並びメニューは幅1240px以上のときだけ。それより狭い画面は三本線のメニュー */
@media(min-width:1080px) and (max-width:1239px){
  .hd-nav{display:none!important}
  .hd-menu{display:flex!important}
  .drawer{display:block!important}
}
/* 1240〜1399px：店名の文字を隠して間隔を詰める */
@media(min-width:1240px) and (max-width:1399px){
  .hd-name{display:none}
  .hd-nav{gap:20px}
}
/* =========================================================
   第25版：募集内容を青系＋きらめき／スタッフのイラスト
========================================================= */
/* 募集内容：深い青のグラデーション＋金の粒 */
#job{position:relative;overflow:hidden;color:#fff;
  background-color:#0F2A4A!important;
  background-image:
    radial-gradient(ellipse 55% 45% at 90% 0%,rgba(226,199,126,.18),transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%,rgba(80,150,220,.28),transparent 70%),
    linear-gradient(160deg,#0C2240 0%,#12345C 55%,#1A4A78 100%)!important}
#job::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}
#job>*{position:relative;z-index:1}
#job .ttl-center small{color:var(--gold-light)}
#job .ttl-center h2{color:#fff}
#job .tbl{background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden;backdrop-filter:blur(2px)}
#job .tbl th,#job .tbl td{border-bottom:1px solid rgba(255,255,255,.14)}
#job .tbl th{color:var(--gold-light)}
#job .tbl td{color:rgba(255,255,255,.92)}
#job .tbl td small{color:rgba(255,255,255,.7)}
#job .tbl a{color:#fff}
#job .apply{background:rgba(255,255,255,.08);border:1px solid rgba(226,199,126,.45)}
#job .apply p,#job .apply .small{color:rgba(255,255,255,.9)}
#job .apply .bigtel{color:#fff}
#job .apply .btn{background:linear-gradient(135deg,#D9BB6E,#B8923A);color:#fff}

/* スタッフのイラスト */
.illust-face{background:none!important;width:64px!important;height:64px!important;padding:0;overflow:hidden;box-shadow:0 0 0 2px var(--gold-light),0 4px 12px rgba(31,68,80,.15)}
.illust-face svg{width:100%;height:100%;display:block}
/* 第25版b：紹介文の写真が画面からはみ出さないように／下のボタンの文字を収める */
@media(max-width:899px){.intro-photo{margin:0 0 0 20px;width:calc(100% - 20px)}}
.bar a{font-size:15px;letter-spacing:.04em;gap:8px}

/* =========================================================
   第26版：求人ページ上部の背景／スタッフの経験年数バッジ／微調整
========================================================= */
/* 求人ページ上部：深い緑〜青のグラデーション＋金の光 */
.page-recruit .recruit{position:relative;overflow:hidden;
  background-color:#0F2F36!important;
  background-image:
    radial-gradient(ellipse 50% 45% at 88% 0%,rgba(226,199,126,.22),transparent 60%),
    radial-gradient(ellipse 60% 55% at 0% 100%,rgba(70,150,200,.25),transparent 70%),
    linear-gradient(160deg,#0E2B30 0%,#123F45 45%,#15405F 100%)!important}
.page-recruit .recruit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}
.page-recruit .recruit-head{background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(0,0,0,.28);border:1px solid rgba(226,199,126,.5)}
.page-recruit .rnav a:not(.rnav-main){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}
.page-recruit .rnav a:not(.rnav-main):hover{background:rgba(255,255,255,.2)}
.page-recruit .crumb{background:#0E2B30;color:rgba(255,255,255,.7);max-width:none;padding-left:max(20px,calc((100% - 1040px)/2))}
.page-recruit .crumb a{color:var(--gold-light)}
.recruit-kicker{background:none;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:4px 18px;font-size:14px}
/* 丸く切り抜いた写真をやめて角丸に */
.recruit-photos img,.recruit-photos .ph{border-radius:14px;aspect-ratio:4/3}

/* スタッフの声：経験年数のバッジ */
.exp-badge{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:14px;
  background:radial-gradient(circle at 35% 30%,#1F5A4F,#123A33);color:#fff;box-shadow:0 0 0 2px var(--gold-light),0 6px 14px rgba(18,58,51,.25)}
.exp-badge b{font-size:24px;font-weight:700;color:var(--gold-light);line-height:1;margin:0 1px}
.exp-badge small{font-size:10px;color:rgba(255,255,255,.85)}.rh-gold{background-image:linear-gradient(100deg,#9C7524 0%,#C9A03F 30%,#F3DC96 45%,#C9A03F 60%,#9C7524 100%);filter:none;text-shadow:none}
.voice-item .who .nw{white-space:nowrap}

/* =========================================================
   第27版：施術写真のスライドイン／流れ星／背景の切り替わりをフェードに
========================================================= */
/* 施術内容の写真：横からスライドして入る（奥行きのある動き） */
.reveal.slide-l,.reveal.slide-r{opacity:0;transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.reveal.slide-l{transform:translateX(-110px) rotate(-2deg)}
.reveal.slide-r{transform:translateX(110px) rotate(2deg)}
.reveal.slide-l.is-in,.reveal.slide-r.is-in{opacity:1;transform:none}
@media(min-width:760px){
  .reveal.slide-r{transform:translateX(-110px) rotate(-2deg)}          /* パソコンは3枚とも左から順番に */
  .menu-item:nth-child(2) .reveal{transition-delay:.18s}
  .menu-item:nth-child(3) .reveal{transition-delay:.36s}
}
.menu-item{overflow:visible}

/* 流れ星（js で自動配置） */
.shoot{position:absolute;z-index:0;top:var(--y);left:var(--x);width:110px;height:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,244,207,0),rgba(255,244,207,.9) 70%,#fff);border-radius:2px;
  transform:rotate(-28deg);filter:drop-shadow(0 0 4px rgba(255,236,170,.9));animation:shoot var(--t) ease-in var(--d) infinite}
.shoot::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,236,170,.9)}
@keyframes shoot{0%{opacity:0;translate:0 0}4%{opacity:1}14%{opacity:0;translate:-260px 140px}100%{opacity:0;translate:-260px 140px}}

/* ---------- 背景の切り替わりをなめらかに ---------- */
body{background:var(--bg-soft)}
/* 白い面は上下を背景色へぼかす */
.price,.company,.salary,.job:not(#job){background:linear-gradient(180deg,var(--bg-soft) 0,#fff 140px,#fff calc(100% - 140px),var(--bg-soft) 100%)!important}
/* 濃い面は上下の端を透明にして、前後の色へ溶け込ませる */
.cta-band,.para:not(.para-empty){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}
.contact{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px);padding-top:130px}
#job{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px);padding-top:140px}
.page-recruit .recruit{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 100px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 100px),transparent 100%);padding-bottom:130px}
.cta-band{padding-top:120px;padding-bottom:120px}
/* 求人ページ：青い募集内容 → 緑のお問い合わせ は色をグラデーションでつなぐ */
.page-recruit #job{padding-bottom:40px}
.page-recruit .contact{-webkit-mask-image:none;mask-image:none;padding-top:120px;
  background-image:linear-gradient(180deg,#1A4A78 0,#16443C 220px,transparent 221px),
    radial-gradient(ellipse 55% 60% at 85% 20%,rgba(226,199,126,.22),transparent 60%),
    linear-gradient(135deg,#0F302B 0%,#16443C 55%,#1F5A4F 100%)!important}
/* 見えなくなる金の線は外す */
.cta-band::before,.contact::before,#job::before,.page-recruit .recruit::after{display:none}
/* お問い合わせの下とフッターは同じ色でつなぐ */
.ft{margin-top:-1px}
@media(prefers-reduced-motion:reduce){.shoot{display:none}.reveal.slide-l,.reveal.slide-r{opacity:1;transform:none;transition:none}}/* 明るい面：上下の端を必ず同じ色（--bg-soft）にし、光のにじみは中ほどに置く */
.cream,.soft-bg,.sv2,.greeting,.recruit-teaser,#feature,#area,.flow,.faq,.merit,.voice{
  background-color:var(--bg-soft)!important;
  background-image:
    radial-gradient(ellipse 55% 30% at 6% 30%,var(--glow-teal),transparent 70%),
    radial-gradient(ellipse 50% 30% at 96% 70%,var(--glow-sun),transparent 70%),
    linear-gradient(180deg,var(--bg-soft) 0%,#FCFDFC 45%,var(--bg-soft) 100%)!important}
/* 求人ページ：青い募集内容 → 緑のお問い合わせ をなめらかに */
.page-recruit .contact{background-image:
    linear-gradient(180deg,#1A4A78 0,rgba(26,74,120,.6) 120px,rgba(26,74,120,0) 300px),
    radial-gradient(ellipse 55% 60% at 85% 30%,rgba(226,199,126,.2),transparent 60%),
    linear-gradient(180deg,#16443C 0%,#16443C 30%,#1F5A4F 100%)!important}.para:not(.para-empty)::after{content:"";position:absolute;inset:-1px 0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-soft) 0,rgba(242,247,244,.7) 50px,rgba(242,247,244,0) 150px,rgba(242,247,244,0) calc(100% - 150px),rgba(242,247,244,.7) calc(100% - 50px),var(--bg-soft) 100%)}
.para:not(.para-empty) .para-text{z-index:2}
.page-recruit #job{background-image:
    linear-gradient(180deg,rgba(26,74,120,0) 70%,#1A4A78 100%),
    radial-gradient(ellipse 55% 45% at 90% 10%,rgba(226,199,126,.18),transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 60%,rgba(80,150,220,.25),transparent 70%),
    linear-gradient(160deg,#0C2240 0%,#12345C 55%,#1A4A78 100%)!important}
/* =========================================================
   第28版：求人ページ上部を「夕日」に
========================================================= */
.page-recruit .recruit{
  background-color:#3A1F4F!important;
  background-image:
    radial-gradient(circle at 50% 108%,rgba(255,236,170,.95) 0,rgba(255,196,110,.75) 10%,rgba(255,150,90,.35) 26%,transparent 46%),
    linear-gradient(180deg,#2B1745 0%,#5B2A6E 22%,#B9467A 45%,#F07A5A 68%,#FFB35C 86%,#FFD58A 100%)!important}
/* 夕日のまわりの光の筋（ゆっくり回る） */
.page-recruit .recruit::before{content:"";position:absolute;left:50%;bottom:-40%;width:170%;aspect-ratio:1;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,200,.16) 0deg 5deg,rgba(255,240,200,0) 5deg 14deg);
  -webkit-mask:radial-gradient(circle,#000 5%,transparent 55%);mask:radial-gradient(circle,#000 5%,transparent 55%);
  animation:spinRays 90s linear infinite}
/* ゆらめく光（上へふわっと昇る光の粒） */
.page-recruit .recruit .gold-dust i{background:radial-gradient(circle,#FFF8E0 0%,#FFD98A 45%,rgba(255,200,120,0) 72%)}
.page-recruit .recruit .gold-dust i:nth-child(3n){animation-name:rise;animation-duration:9s}
@keyframes rise{0%{opacity:0;transform:translateY(40px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1)}}
.page-recruit .crumb{background:#2B1745}
.page-recruit .rnav a:not(.rnav-main){background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.page-recruit .rnav a.rnav-main{background:linear-gradient(135deg,#123A33,#1F5A4F)}
@media(prefers-reduced-motion:reduce){.page-recruit .recruit::before{animation:none}}.page-recruit .rnav a:not(.rnav-main){background:rgba(60,22,70,.42);border-color:rgba(255,230,190,.55);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.page-recruit .rnav a:not(.rnav-main):hover{background:rgba(60,22,70,.6)}

/* =========================================================
   第29版：開いた瞬間の演出を知的に／トップの空の下をなめらかに
========================================================= */
.loader{background:linear-gradient(180deg,#FFFFFF 0%,#F2F7F4 100%)}
.loader img{display:none}
.loader-in{text-align:center;display:grid;justify-items:center;gap:14px}
.loader-sub{margin:0;font-size:11px;letter-spacing:.42em;color:var(--gold);opacity:0;animation:ldFade .8s ease .15s forwards}
.loader-line{display:block;width:160px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);transform:scaleX(0);animation:ldLine .9s cubic-bezier(.6,0,.2,1) .25s forwards}
.loader-name{margin:0;font-size:17px;letter-spacing:.3em;color:var(--head);font-weight:500;opacity:0;transform:translateY(6px);animation:ldFade .8s ease .55s forwards}
@keyframes ldLine{to{transform:scaleX(1)}}
@keyframes ldFade{to{opacity:1;transform:none}}

/* トップ：空の下側を次の背景色へなめらかにつなぐ */
.fv::after{height:38%;z-index:1;background:linear-gradient(180deg,rgba(242,247,244,0) 0%,rgba(242,247,244,.55) 45%,rgba(242,247,244,.9) 75%,var(--bg-soft) 100%)}
.hero::before{background:none}
.hero-inner{position:relative;z-index:2}
/* =========================================================
   第30版：求人ページ上部のバランス（明るい夕焼け・ガラスの枠・写真3枚）
========================================================= */
/* 夕焼け：上を暗くしすぎない */
.page-recruit .recruit{background-color:#8A5A9A!important;
  background-image:
    radial-gradient(circle at 50% 108%,rgba(255,238,180,.95) 0,rgba(255,200,120,.7) 12%,rgba(255,160,100,.3) 30%,transparent 50%),
    linear-gradient(180deg,#8B6BB0 0%,#B06A9E 24%,#E27D86 48%,#F59A6A 70%,#FFBE6E 88%,#FFDB94 100%)!important}
.page-recruit .crumb{background:#8B6BB0;color:rgba(255,255,255,.85)}
.page-recruit .crumb a{color:#FFF2C8}
/* 白い枠 → 夕焼けが透ける半透明のガラス */
.page-recruit .recruit-head{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(90,40,90,.25)}
.page-recruit .recruit-head h1{color:#fff;text-shadow:0 2px 12px rgba(90,40,90,.35)}
.page-recruit .recruit-head h1>span.nw{color:#fff}
.page-recruit .rh-gold{background-image:linear-gradient(100deg,#FFE6A6 0%,#FFF8E1 40%,#FFD27A 60%,#FFE6A6 100%);filter:drop-shadow(0 2px 8px rgba(120,60,40,.35))}
.page-recruit .recruit-kicker{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.page-recruit .recruit-head>p:last-child{color:#fff;text-shadow:0 1px 6px rgba(90,40,90,.35)}
.page-recruit .recruit-head .gold-dust i{background:radial-gradient(circle,#fff 0%,#FFF1C8 45%,rgba(255,240,200,0) 72%)}

/* 写真3枚：大きく、時間差でふわっと現れる */
.page-recruit .recruit-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:none;margin:8px 0 28px}
.page-recruit .rp{width:100%;height:100%;object-fit:cover;border-radius:16px;aspect-ratio:auto;box-shadow:0 12px 28px rgba(90,40,90,.3);border:2px solid rgba(255,255,255,.6)}
.page-recruit .rp1{grid-column:1/-1;aspect-ratio:16/10}
.page-recruit .rp2,.page-recruit .rp3{aspect-ratio:1}
.page-recruit .rp.reveal{opacity:0;transform:translateY(30px) scale(.96);filter:blur(6px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s ease}
.page-recruit .rp.reveal.is-in{opacity:1;transform:none;filter:none}
.page-recruit .rp2.reveal{transition-delay:.2s}
.page-recruit .rp3.reveal{transition-delay:.4s}
@media(min-width:900px){
  .page-recruit .recruit-photos{grid-template-columns:1.5fr 1fr 1fr;max-width:900px;margin:12px auto 36px}
  .page-recruit .rp1{grid-column:auto;aspect-ratio:4/3}
  .page-recruit .rp2,.page-recruit .rp3{aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){.page-recruit .rp.reveal{opacity:1;transform:none;filter:none;transition:none}}.page-recruit .rh-gold,.page-recruit .recruit-head h1>span.rh-gold{background:none!important;color:#FFF0C2!important;-webkit-text-fill-color:#FFF0C2!important;filter:none;animation:glowText 3.5s ease-in-out infinite;text-shadow:0 0 10px rgba(255,210,120,.7),0 2px 10px rgba(120,50,60,.35)}
@keyframes glowText{0%,100%{text-shadow:0 0 8px rgba(255,210,120,.55),0 2px 10px rgba(120,50,60,.35)}50%{text-shadow:0 0 22px rgba(255,225,150,1),0 0 40px rgba(255,200,110,.6),0 2px 10px rgba(120,50,60,.35)}}
@media(prefers-reduced-motion:reduce){.page-recruit .rh-gold{animation:none}}

/* =========================================================
   第31版：「あん摩マッサージ指圧師が〜」の写真を明るく戻す
========================================================= */
.para:not(.para-empty)::before{background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(20,40,45,.38),rgba(20,40,45,0) 75%)}   /* 文字のまわりだけ少し落とす */
.para:not(.para-empty) .para-bg{filter:brightness(1.75) contrast(.92) saturate(1.05)}
.para:not(.para-empty) .para-text{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}
/* =========================================================
   第32版：求人ページの目次をやめ「応募する」ボタンのみに
========================================================= */
.rnav{justify-content:center}
.rnav-apply{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:18px;min-width:min(340px,100%);
  text-decoration:none;color:#fff;background:linear-gradient(135deg,#123A33,#1F5A4F);border:1.5px solid var(--gold-light);border-radius:10px;
  padding:14px 24px;box-shadow:0 10px 26px rgba(60,20,50,.3),inset 0 0 0 4px rgba(226,199,126,.12);overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s}
.rnav-apply:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(60,20,50,.35),inset 0 0 0 4px rgba(226,199,126,.18)}
.ra-sub{grid-column:1;font-size:11px;letter-spacing:.1em;color:var(--gold-light)}
.ra-main{grid-column:1;font-size:20px;font-weight:700;letter-spacing:.3em}
.rnav-apply i{grid-column:2;grid-row:1/span 2;font-style:normal;font-size:20px;color:var(--gold-light);transition:transform .3s}
.rnav-apply:hover i{transform:translateX(4px)}
.rnav-apply::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,243,201,.3),transparent);transform:skewX(-20deg);animation:btnShine 4.5s ease-in-out infinite}.page-recruit .rnav a.rnav-apply{border-radius:10px!important;background:linear-gradient(135deg,#123A33,#1F5A4F)!important;border:1.5px solid #E2C77E!important;color:#fff!important;padding:14px 26px!important;text-shadow:none!important;flex-basis:auto;max-width:none}

/* =========================================================
   第33版：確認係の指摘の直し（2026年9月29日）
   ・スマホでは右下の「求人情報を見る」を出さない（料金の注意書きや住所の文字を隠していたため）
   ・求人ページの応募ボタンを見出しのすぐ下へ移したので、上下の間をととのえる
   ========================================================= */
@media(max-width:899px){.float-recruit{display:none!important}}
.recruit-head .rnav{margin:14px auto 22px}
.menu-item h4 .h4-sub{font-size:.72em;font-weight:500;letter-spacing:0}

/* =========================================================
   第34版：最初の画面の案内と、読みやすい文字の大きさ（2026年9月29日）
   ・キャッチコピーの下に「医療保険が使えます／1割負担で1回277円〜」と、電話・お問い合わせのボタン
   ・ご高齢の方にも読みやすいよう、小さい文字を大きく、うすい文字を少し濃く
   ========================================================= */
:root{--ink-soft:#4A5860}
.hero-eyebrow{font-size:15px;letter-spacing:.16em}
.hero-lead{font-size:17px}
@media(min-width:900px){.hero-lead{font-size:18px}}
.hero-info{margin-top:22px;display:grid;gap:14px;justify-items:center;opacity:0;transform:translateY(10px);animation:heroIn 1.4s ease 2.6s forwards}
@media(min-width:900px){.hero-info{justify-items:start}}
.hero-info-main{margin:0;font-size:17px;font-weight:700;color:#1F3F55;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center}
@media(min-width:900px){.hero-info-main{justify-content:flex-start}}
.hero-info-main b{font-size:1.55em;color:var(--red);margin:0 .08em;letter-spacing:.02em}
.hero-pill{background:var(--teal-deep);color:#fff;font-size:15px;padding:5px 14px;border-radius:999px;letter-spacing:.06em}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media(min-width:900px){.hero-cta{justify-content:flex-start}}
.hero-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:158px;padding:9px 20px;border-radius:999px;font-weight:700;font-size:17px;line-height:1.35;text-decoration:none;box-shadow:0 6px 16px rgba(20,60,70,.18);transition:transform .25s,box-shadow .25s}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,60,70,.24)}
.hero-btn small{font-size:11.5px;font-weight:500;letter-spacing:.02em;opacity:.95}
.hero-btn-tel{background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff}
.hero-btn-mail{background:rgba(255,255,255,.92);color:var(--teal-deep);border:1.5px solid var(--teal)}
@media(prefers-reduced-motion:reduce){.hero-info{animation:none;opacity:1;transform:none}}
.small{font-size:15px}
.form-hint,.form-note{font-size:15px}
.plan-spec dt{font-size:14px}
.plan-notes{font-size:15px}
.float-recruit small{font-size:12px}
@media(max-width:899px){.hero-info-main{flex-direction:column;gap:8px}.hero-cta{flex-wrap:nowrap;width:100%;max-width:340px}.hero-btn{flex:1 1 0;min-width:0;padding:9px 8px;font-size:15.5px}.hero-btn small{font-size:10.5px}}
@media(max-width:899px){.hero-info{justify-items:stretch;width:100%;max-width:340px;margin-left:auto;margin-right:auto}.hero-cta{max-width:none}}
.hero-info-note{margin:-6px 0 0;font-size:13.5px;color:#1F3F55}
.hero-info-note a{color:var(--teal-deep);font-weight:700}
.salary p,.salary li,.salary dd,.salary dt,.plan-notes li{word-break:auto-phrase}
@media(max-width:899px){.hero-btn small{font-size:11px}}
.hero-info-note{word-break:auto-phrase}
/* =========================================================
   第35版：「ケアマネジャー様・施設の方へ」の欄と、報告書の見本（2026年9月29日）
   ========================================================= */
.cm{background:#fff}
.cm-lead{max-width:760px;margin:-12px auto 32px;text-align:center;font-size:16px;line-height:2}
.cm-grid{display:grid;gap:16px;max-width:1040px;margin:0 auto}
@media(min-width:900px){.cm-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.cm-card{background:var(--bg-soft,#F2F7F4);border:1px solid var(--line-soft,#E3DCCB);border-radius:16px;padding:22px 22px 18px}
.cm-card h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:19px;color:var(--teal-deep)}
.cm-no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-size:15px;flex:none}
.cm-card ul{margin:0;padding-left:1.2em;font-size:15.5px;line-height:1.85}
.cm-card li+li{margin-top:6px}
.cm-card small,.cm-small{font-size:14px;color:var(--ink-soft)}
.cm-small{margin:10px 0 0}
.cm-card a{color:var(--teal-deep);font-weight:700}
.cm-report{position:relative;max-width:760px;margin:36px auto 0;background:#fff;border:1px solid #D9D2C0;border-radius:6px;padding:26px 22px 18px;
  box-shadow:0 14px 34px rgba(40,50,40,.12),0 2px 0 #EFEADF;background-image:linear-gradient(transparent 0 0)}
.cm-stamp{position:absolute;top:14px;right:14px;border:2px solid var(--red);color:var(--red);font-weight:900;font-size:15px;letter-spacing:.3em;padding:2px 6px 2px 10px;border-radius:4px;transform:rotate(-8deg);opacity:.85}
.cm-report-head{border-bottom:2px solid var(--teal);padding-bottom:10px;margin-bottom:14px}
.cm-report-ttl{margin:0;font-size:18px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.cm-report-to{margin:4px 0 0;font-size:14px;color:var(--ink-soft)}
.cm-report-tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.8}
.cm-report-tbl th{width:7.2em;text-align:left;vertical-align:top;color:var(--teal-deep);font-weight:700;padding:8px 10px 8px 0;border-bottom:1px dashed #E3DCCB}
.cm-report-tbl td{padding:8px 0;border-bottom:1px dashed #E3DCCB}
@media(max-width:560px){.cm-report-tbl th,.cm-report-tbl td{display:block;width:auto;border:0;padding:0}.cm-report-tbl th{margin-top:10px}.cm-report-tbl tr{display:block;border-bottom:1px dashed #E3DCCB;padding-bottom:8px}}
.cm-report figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-soft)}
.cm-cta{text-align:center;margin-top:28px}
.cm-report-head{padding-right:64px}
.cm-lead,.cm-card li,.cm-report-tbl td{word-break:auto-phrase}
.tbl td{word-break:auto-phrase}
@media(max-width:560px){.cm-report-ttl{font-size:16.5px}}
/* =========================================================
   第36版：地域ページ（area-ota.html など）の見た目（2026年9月29日）
   ========================================================= */
.page-area .crumb{max-width:1040px;margin:0 auto;padding:12px 20px 0;font-size:13px}
.ap-head{text-align:center;padding-top:28px;background:linear-gradient(180deg,#EAF4F8,#fff)}
.ap-kicker{margin:0 0 8px;font-size:14px;letter-spacing:.24em;color:var(--teal-deep);font-weight:700}
.ap-head h1{margin:0;font-size:clamp(26px,6vw,40px);color:#1F3F55;line-height:1.4}
.ap-lead{margin:16px auto 22px;max-width:640px;font-size:16.5px;line-height:2;color:#1F3F55;word-break:auto-phrase}
.ap-cta{justify-content:center;max-width:360px;margin:0 auto;flex-wrap:nowrap}
.ap-cta .hero-btn{flex:1 1 0;min-width:0;padding:9px 8px;font-size:15.5px}
.ap-cta .hero-btn small{font-size:11px}
.ap-box{max-width:760px;margin:0 auto 24px;font-size:16px;line-height:2;word-break:auto-phrase}
.ap-box p{margin:0 0 12px}
.ap-grid{display:grid;gap:16px;max-width:1040px;margin:0 auto}
@media(min-width:900px){.ap-grid{grid-template-columns:1fr 1fr;gap:20px}}
.ap-card{background:#fff;border:1px solid var(--line-soft,#E3DCCB);border-radius:16px;padding:22px 22px 18px;font-size:15.5px;line-height:1.9;word-break:auto-phrase}
.ap-card h3{margin:0 0 10px;font-size:19px;color:var(--teal-deep)}
.ap-card p{margin:0 0 8px}
.ap-card .area-tags{margin:6px 0 8px}
.ap-note{font-size:14px;color:var(--ink-soft)}
.ap-list{margin:0;padding-left:1.2em}
.ap-list li+li{margin-top:8px}
.ap-list small{color:var(--ink-soft);font-size:14px}
.ap-price{font-size:19px;color:var(--red)}
.ap-more{display:inline-block;margin-top:6px;color:var(--teal-deep);font-weight:700}
.ap-center{text-align:center;margin-top:18px}
.ap-steps{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:12px}
.ap-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;background:#fff;border:1px solid var(--line-soft,#E3DCCB);border-radius:14px;padding:14px 18px;font-weight:700;font-size:17px;color:#1F3F55}
.ap-steps li span{grid-row:1/span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;font-size:15px}
.ap-steps li small{font-weight:500;font-size:14.5px;color:var(--ink-soft);word-break:auto-phrase}
.area-tags a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ap-kicker{margin:0 auto 8px}.ap-head h1{margin:0 auto}
.ap-head{background:linear-gradient(180deg,var(--bg-soft) 0,#EAF4F8 25%,#fff 70%,var(--bg-soft) 100%)}
.faq-item summary,.contact-info p{word-break:auto-phrase}
.page-area .crumb{padding-left:0;padding-right:0;max-width:1000px}
@media(max-width:1040px){.page-area .crumb{padding-left:20px;padding-right:20px}}
.ap-basic{padding-top:24px}
.ap-head{padding-bottom:40px}

/* =========================================================
   第37版：写真の縁「太陽の光がにじむ」（2026年9月29日・砂川さんが案Eを選択）
   ・写真のまわりに白い細い縁と、太陽のような金色の光をうっすらにじませる
   ・スライダー（流れる写真）と、3枚が重なって並ぶ写真（.collage）は今のまま
   ========================================================= */
.intro-photo img,.menu-item img,.greeting-photo,.rt-photo,.company-photo{
  border-radius:18px;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 34px 8px rgba(245,178,70,.30),0 10px 24px rgba(150,105,30,.16)}
.menu-item img{margin-bottom:14px}
@media(prefers-reduced-motion:no-preference){
  .intro-photo img,.menu-item img,.greeting-photo,.rt-photo,.company-photo{transition:box-shadow .5s}
  .menu-item:hover img{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 44px 12px rgba(245,178,70,.40),0 12px 28px rgba(150,105,30,.2)}}
.intro-photo{border-radius:18px;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 34px 8px rgba(245,178,70,.30),0 10px 24px rgba(150,105,30,.16)}
.intro-photo img{box-shadow:none;border-radius:0}
.rt-photo{border-radius:0;box-shadow:none}

/* 第41版：止まって見える背景（施術の手元の写真）が白く飛ばないように、明るくする指定を外し、文字の後ろを少し暗くする */
.para:not(.para-empty) .para-bg{filter:none!important}
.para:not(.para-empty)::before{background:rgba(20,40,45,.5)}