/* ===== 3案共通 あしらい・区切り・動きレイヤー =====
   body[data-deco="a|b|c"] で案ごとの色・形を切り替える。
   動きのルール：ずっと動き続けるものは置かない。区切りは「画面に入ったとき1回だけ」意味のある動きをする。
     A … 音符が ド・ミ・ソ と順に上がって現れる（＝次のステップへ進む）
     B … 五線が中央から引かれ、最後に音符がひとつ置かれる（＝一本の道すじ）
     C … 4つの丸が 1・2・3・4 と拍を打つようにはねる（＝リトミックの拍） */

body[data-deco]{--dk-1:#e2588f;--dk-2:#f5cf5c;--dk-line:#e2588f}
body[data-deco="b"]{--dk-1:#b8964f;--dk-2:#c9527f;--dk-line:#b8964f}
body[data-deco="c"]{--dk-1:#ef6aa3;--dk-2:#ffd24d;--dk-line:#ef6aa3}

/* ---------- 改行のルール ----------
   <wbr>（tools/phrase-wrap.py が文節の切れ目に入れる）と句読点の後でだけ改行する。
   言葉の途中では改行しない。iPhone の Safari でも同じ。 */
body[data-deco]{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.chk,.tag,.badge,.sticker,.btn,.nav a,.course,.yen{word-break:keep-all}
.chk,.tag{white-space:nowrap}

/* ---------- 写真 ---------- */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ph:has(img)::before,.ph:has(img)::after{display:none!important}
.ph .cap,.ph .telop,.ph .since{z-index:2}
.ph:has(img) .cap{font-size:10px;opacity:.85}
.card:hover .ph img,.rcard:hover .ph img,.feat:hover .ph img{transform:scale(1.04)}

/* ---------- 地図（ざっくりの位置。詳しい住所はお問い合わせ時） ---------- */
.map:has(iframe){position:relative;overflow:hidden;padding:0;display:block;background:#eee}
.map iframe{display:block;width:100%;height:100%;min-height:inherit;border:0;filter:saturate(.75)}
.map .map-note{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);font-size:11.5px;line-height:1.5;padding:6px 12px;border-radius:999px;color:#5f5458;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ---------- セクション上端の形（静止。色はセクション背景を自動で拾う） ---------- */
[data-dv]{position:relative}
.dv{position:absolute;left:0;right:0;height:var(--dvh,56px);top:calc(1px - var(--dvh,56px));pointer-events:none;z-index:3}
.dv i{position:absolute;inset:0;background:var(--dvc);-webkit-mask:var(--m1) 0 100%/var(--mw,100%) 100% no-repeat;mask:var(--m1) 0 100%/var(--mw,100%) 100% no-repeat}
.dv i:first-child{display:none}
.dv[data-t="wave"]{--m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C200 6 400 6 600 30 S1000 54 1200 26 V56 H0Z'/%3E%3C/svg%3E")}
.dv[data-t="soft"]{--dvh:40px;--m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C300 4 900 4 1200 28 V40 H0Z'/%3E%3C/svg%3E")}
.dv[data-t="scallop"]{--dvh:28px;--mw:72px;--m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 V18 A18 16 0 0 1 36 18 A18 16 0 0 1 72 18 V28Z'/%3E%3C/svg%3E")}
.dv[data-t="scallop"] i{-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
@media (max-width:760px){.dv{--dvh:32px}.dv[data-t="scallop"]{--dvh:22px;--mw:52px}}

/* ---------- 中央の区切り（画面に入ったとき1回だけ動く） ---------- */
.odiv{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px;position:relative;z-index:2}
.odiv svg.ln{width:min(240px,30vw);height:24px;overflow:visible}
.odiv svg.ln path{fill:none;stroke:var(--dk-line);stroke-width:1.6;stroke-linecap:round}
.odiv .mid{display:flex;gap:8px;align-items:flex-end;height:40px}
.odiv .mid svg{width:16px;height:20px;fill:var(--dk-1)}
/* A：ド・ミ・ソ。左から順に、少しずつ高い位置に */
body[data-deco="a"] .odiv .mid svg:nth-child(2){margin-bottom:8px;fill:var(--dk-2)}
body[data-deco="a"] .odiv .mid svg:nth-child(3){margin-bottom:16px}
/* B：五線の上に音符をひとつ */
body[data-deco="b"] .odiv svg.ln{width:min(300px,32vw);height:28px}
body[data-deco="b"] .odiv svg.ln path{stroke-width:.9}
body[data-deco="b"] .odiv .mid{align-items:center}
/* C：4拍の丸 */
.odiv .beat4{display:flex;gap:10px;align-items:center;height:40px}
.odiv .beat4 i{width:12px;height:12px;border-radius:50%;background:#ef6aa3;display:block}
.odiv .beat4 i:nth-child(2){background:#ffd24d}.odiv .beat4 i:nth-child(3){background:#9fdcca}.odiv .beat4 i:nth-child(4){background:#a9cff7}
.odiv[data-odiv="dots"] svg.ln path{stroke-dasharray:.1 10;stroke-width:4.5}

@media (prefers-reduced-motion:no-preference){
  /* 線は中央から外側へ引かれる（右側は左右反転しているので同じ指定で中央起点になる） */
  .odiv svg.ln{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.3,.6,.2,1)}
  .odiv svg.ln.r{clip-path:inset(0 100% 0 0)}
  .odiv.in svg.ln{clip-path:inset(0 0 0 0)}
  .odiv .mid svg{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.5,1)}
  .odiv.in .mid svg{opacity:1;transform:none}
  .odiv.in .mid svg:nth-child(1){transition-delay:.5s}
  .odiv.in .mid svg:nth-child(2){transition-delay:.75s}
  .odiv.in .mid svg:nth-child(3){transition-delay:1s}
  body[data-deco="b"] .odiv.in .mid svg{transition-delay:1.1s}
  .odiv.in .beat4 i{animation:beat .5s cubic-bezier(.3,.7,.3,1) both}
  .odiv.in .beat4 i:nth-child(1){animation-delay:.4s}
  .odiv.in .beat4 i:nth-child(2){animation-delay:.8s}
  .odiv.in .beat4 i:nth-child(3){animation-delay:1.2s}
  .odiv.in .beat4 i:nth-child(4){animation-delay:1.6s}
}
@keyframes beat{0%{transform:none}40%{transform:translateY(-14px) scale(1.15)}75%{transform:scale(1.1,.85)}100%{transform:none}}

/* ---------- 見出しの下線（画面に入ると左から描かれる） ---------- */
.head h2::after{content:"";display:block;width:148px;height:22px;margin-top:12px;background:var(--hu) 0 50%/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s .25s cubic-bezier(.3,.6,.2,1)}
.head.center h2::after,.head[style*="center"] h2::after,.center h2::after{margin-inline:auto}
.head.in h2::after,.head:not(.rv) h2::after{clip-path:inset(0 0 0 0)}
body[data-deco="a"]{--hu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 22'%3E%3Cpath d='M22 12 q8-8 16 0 t16 0 t16 0 t16 0 t16 0 t16 0' fill='none' stroke='%23e2588f' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M8 5 l1.6 4.4 4.4 1.6-4.4 1.6L8 17l-1.6-4.4L2 11l4.4-1.6z' fill='%23f5cf5c'/%3E%3Cpath d='M138 3 l1.2 3.3 3.3 1.2-3.3 1.2L138 12l-1.2-3.3-3.3-1.2 3.3-1.2z' fill='%23f5cf5c'/%3E%3C/svg%3E")}
body[data-deco="b"]{--hu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 22'%3E%3Cpath d='M0 11 H62 M86 11 H148' stroke='%23b8964f' stroke-width='1'/%3E%3Cpath d='M74 4 l3.5 7-3.5 7-3.5-7z' fill='none' stroke='%23b8964f' stroke-width='1'/%3E%3Ccircle cx='74' cy='11' r='1.4' fill='%23c9527f'/%3E%3C/svg%3E")}
body[data-deco="c"]{--hu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 22'%3E%3Ccircle cx='14' cy='12' r='5' fill='%23ef6aa3'/%3E%3Ccircle cx='44' cy='8' r='5' fill='%23ffd24d'/%3E%3Ccircle cx='74' cy='12' r='5' fill='%23bfe8dc'/%3E%3Ccircle cx='104' cy='8' r='5' fill='%23cfe6ff'/%3E%3Ccircle cx='134' cy='12' r='5' fill='%23ef6aa3'/%3E%3C/svg%3E")}

/* ---------- あしらい画像 ---------- */
.orn{position:absolute;pointer-events:none;z-index:1;mix-blend-mode:multiply;height:auto;translate:0 var(--py,0px)}
@media (prefers-reduced-motion:no-preference){
  /* 枝は風にそよぐ程度。キャラクターはお申し込み枠が見えたときに2回だけはねる */
  .orn.sway{animation:sway 9s ease-in-out infinite;transform-origin:50% 90%}
  .cta.in .orn.hop{animation:hop .7s cubic-bezier(.3,.7,.3,1) .4s 2}
  .cta.in .orn.hop+.orn.hop{animation-delay:.75s}
}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-14px)}75%{transform:scaleY(.94)}}
@media (max-width:760px){.orn{width:calc(var(--w) * .62)!important}.orn.pc{display:none}}

/* ---------- スクロールで出てくる ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms)}
  .rv.in{opacity:1;transform:none}
}

/* ---------- アイコン（Lucide / ISC License https://lucide.dev） ----------
   絵文字は使わない。線のアイコンを currentColor で塗る。 */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-.14em}