/* gx-erina: えりな専用の動き（おでかけスタンプ帳・クレヨン・風船） 2026-10-16 */
.ma-hero{position:relative}
.ma-hero>.wrap{position:relative;z-index:1}
.gx-balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gx-bl{position:absolute;bottom:-140px;width:44px;height:56px;border-radius:50%/46% 46% 54% 54%;opacity:.9;will-change:transform;transform:translateY(var(--gy,0px)) rotate(var(--gr,0deg));box-shadow:inset -6px -8px 0 rgba(0,0,0,.06)}
.gx-bl::before{content:"";position:absolute;left:50%;top:calc(100% - 4px);width:9px;height:9px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.gx-bl::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:78px;background:rgba(20,21,19,.22);transform:translateX(-50%)}
.gx-bl.c1{background:#e4f3e9}.gx-bl.c2{background:#d3ecdb}.gx-bl.c3{background:#bfe8cf}.gx-bl.c4{background:#c4e4cd}.gx-bl.c5{background:#a9d9b4}
@media(max-width:640px){.gx-bl{width:30px;height:38px}.gx-bl::after{height:50px}}

/* クレヨンの下線 */
.ma-chead .sec-jp{position:relative}
.gx-crayon{position:absolute;left:0;bottom:-.42em;width:min(44%,230px);height:12px;pointer-events:none;overflow:visible}
.gx-crayon path{fill:none;stroke:#389b5a;stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:.9;mix-blend-mode:multiply;transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1) .35s}
.ma-chead.gx-in .gx-crayon path{stroke-dashoffset:0}

/* おでかけメモのスタンプ */
.ma-chead{position:relative}
.ma-chead .sec-en{position:relative;display:inline-block}
.gx-stamp{position:absolute;left:100%;margin-left:18px;top:-42px;width:68px;height:68px;opacity:0;transform:rotate(-12deg) scale(1.9);pointer-events:none;mix-blend-mode:multiply;z-index:3}
.ma-chead.gx-in .gx-stamp{animation:gxStampIn .55s cubic-bezier(.2,1.45,.35,1) .25s forwards}
@keyframes gxStampIn{0%{opacity:0;transform:rotate(-12deg) scale(1.9)}70%{opacity:1;transform:rotate(-12deg) scale(.94)}100%{opacity:.92;transform:rotate(-12deg) scale(1)}}
@media(max-width:640px){.gx-stamp{width:56px;height:56px;top:-36px;margin-left:12px}}

/* 行く前チェックの✓ */
.er-check .ma-card h3{display:flex;align-items:center;gap:8px}
.gx-tick{flex:0 0 22px;width:22px;height:22px;border:2px solid #2c7d48;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:background .3s}
.gx-tick svg{width:14px;height:14px}
.gx-tick path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .45s ease .1s}
.er-check.gx-in .ma-card:nth-child(1) .gx-tick{transition-delay:.1s}.er-check.gx-in .ma-card:nth-child(2) .gx-tick{transition-delay:.35s}.er-check.gx-in .ma-card:nth-child(3) .gx-tick{transition-delay:.6s}.er-check.gx-in .ma-card:nth-child(4) .gx-tick{transition-delay:.85s}
.er-check.gx-in .ma-card:nth-child(1) .gx-tick path{transition-delay:.2s}.er-check.gx-in .ma-card:nth-child(2) .gx-tick path{transition-delay:.45s}.er-check.gx-in .ma-card:nth-child(3) .gx-tick path{transition-delay:.7s}.er-check.gx-in .ma-card:nth-child(4) .gx-tick path{transition-delay:.95s}
.er-check.gx-in .gx-tick{background:#2c7d48}
.er-check.gx-in .gx-tick path{stroke-dashoffset:0}

/* 写真（ポラロイド）を手に取る */
html.gx-js .ma-snap{transition:transform .4s cubic-bezier(.2,.9,.3,1.2),box-shadow .4s}
html.gx-js .ma-snap:hover,html.gx-js .ma-snap.gx-tap{transform:rotate(0deg) translateY(-8px) scale(1.035);box-shadow:0 24px 40px -22px rgba(20,21,19,.45);z-index:3}

/* 週末プラン4ステップ */
html.gx-js .er-flow4 li{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s,transform .55s cubic-bezier(.2,1.2,.3,1)}
html.gx-js .er-flow4.gx-in li{opacity:1;transform:none}
.er-flow4.gx-in li:nth-child(2){transition-delay:.18s}.er-flow4.gx-in li:nth-child(3){transition-delay:.36s}.er-flow4.gx-in li:nth-child(4){transition-delay:.54s}
.er-flow4 .tb-fn{position:relative}
.er-flow4.gx-in li .tb-fn::after{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:100%;background:#bfe8cf;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);animation:gxLine .5s ease-out forwards}
.er-flow4.gx-in li:nth-child(1) .tb-fn::after{animation-delay:.35s}.er-flow4.gx-in li:nth-child(2) .tb-fn::after{animation-delay:.55s}.er-flow4.gx-in li:nth-child(3) .tb-fn::after{animation-delay:.75s}.er-flow4.gx-in li:nth-child(4) .tb-fn::after{animation-delay:.95s}
@keyframes gxLine{to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){.gx-balloons{display:none}.gx-crayon path{stroke-dashoffset:0;transition:none}.gx-stamp{opacity:.92;transform:rotate(-12deg);animation:none}.gx-tick{background:#2c7d48}.gx-tick path{stroke-dashoffset:0}html.gx-js .er-flow4 li{opacity:1;transform:none}}

/* 2026-10-18 重なり防止：見出しの線はテンプレートの緑の線だけにする／スタンプは数字の上に置き、文字に重ねない */
.ma-chead .gx-crayon{display:none!important}
.ma-chead .sec-en{position:static!important}
.ma-chead .gx-stamp{left:30px!important;margin-left:0!important;top:-60px!important}
@media(max-width:959px){.ma-chead .gx-stamp{left:auto!important;right:0!important;top:-4px!important;width:58px!important;height:58px!important}}