/* NFCタグのページ(/nfc/)だけの見た目 */
.nfc-page main{position:relative;z-index:1}
.nfc-phrase,.nfc-line{display:inline-block}
.nfc-line{display:block;word-break:keep-all}

/* フェードイン(JSが使えないときは最初から表示) */
.has-reveal [data-reveal]{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1.6s var(--ease-out) var(--d,0s),transform 1.6s var(--ease-out) var(--d,0s),filter 1.6s var(--ease-out) var(--d,0s)}
.has-reveal [data-reveal].is-shown{opacity:1;transform:none;filter:none}

/* 1. 最初の画面 */
.nfc-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:calc(var(--header-h) + 40px) var(--gutter) 80px;max-width:1240px;margin:0 auto;box-sizing:border-box}
.nfc-hero__text{display:grid;gap:clamp(1.6rem,3.6vh,2.4rem);text-shadow:0 0 18px rgba(5,7,15,.9)}
.nfc-hero__text>*{margin:0}
.nfc-hero__en{font-family:var(--font-en);font-weight:300;font-size:.8rem;letter-spacing:.5em;color:var(--color-glow);opacity:.85}
.nfc-hero__copy{font-family:var(--font-mincho);font-weight:500;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.5;letter-spacing:.14em;text-shadow:0 0 40px rgba(124,196,255,.15)}
.nfc-hero__lead{display:grid;gap:.4em;font-size:clamp(.9rem,1.2vw,1.02rem);line-height:2.2;letter-spacing:.08em;color:var(--color-text-sub)}

/* かざす演出:スマートフォンが降りてきて、タグから青い光の輪が広がる */
.nfc-tap{--loop:5.6s;position:relative;width:min(100%,340px);aspect-ratio:34/40;justify-self:center}
.nfc-tap__tag{position:absolute;left:50%;bottom:8%;width:58%;aspect-ratio:1.6;transform:translateX(-50%);border-radius:14px;border:1px solid rgba(124,196,255,.35);background:linear-gradient(150deg,rgba(124,196,255,.12),rgba(124,196,255,.03) 60%);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.5);display:grid;place-items:center;animation:nfc-tag var(--loop) var(--ease-out) infinite}
.nfc-tap__tag svg{width:26%;fill:none;stroke:var(--color-glow);stroke-width:1.2;stroke-linecap:round;opacity:.75}
.nfc-tap__rings{position:absolute;left:50%;bottom:calc(8% + 18%);width:0;height:0}
.nfc-tap__ring{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(124,196,255,.7);box-shadow:0 0 18px rgba(124,196,255,.35),inset 0 0 18px rgba(124,196,255,.2);opacity:0;transform:scale(.2);animation:nfc-ring var(--loop) cubic-bezier(.2,.7,.3,1) infinite}
.nfc-tap__ring:nth-child(2){animation-delay:.38s}
.nfc-tap__ring:nth-child(3){animation-delay:.76s}
.nfc-tap__phone{position:absolute;left:50%;top:4%;width:36%;aspect-ratio:9/18.5;margin-left:-18%;border-radius:22px;border:1px solid rgba(232,238,247,.32);background:linear-gradient(160deg,rgba(20,30,52,.85),rgba(8,12,24,.9));box-shadow:inset 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:nfc-phone var(--loop) var(--ease-out) infinite;z-index:2}
.nfc-tap__notch{position:absolute;top:6px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:3px;background:rgba(232,238,247,.14)}
.nfc-tap__screen{position:absolute;inset:18px 7px 10px;border-radius:14px;display:grid;align-content:start;gap:8px;padding:14% 12%;background:radial-gradient(ellipse 90% 60% at 50% 30%,rgba(124,196,255,.4),rgba(124,196,255,.05) 70%);opacity:.08;animation:nfc-screen var(--loop) ease-in-out infinite}
.nfc-tap__screen i{display:block;height:5px;border-radius:3px;background:rgba(232,238,247,.6)}
.nfc-tap__screen i:first-child{height:34px;margin-bottom:6px;background:rgba(124,196,255,.45)}
.nfc-tap__screen i:nth-child(3){width:70%}
.nfc-tap__screen i:nth-child(4){width:45%}
@keyframes nfc-phone{0%,8%{transform:translateY(-34px) rotate(-6deg)}30%,62%{transform:translateY(8%) rotate(0)}88%,100%{transform:translateY(-34px) rotate(-6deg)}}
@keyframes nfc-ring{0%,28%{opacity:0;transform:scale(.2)}32%{opacity:.9}72%,100%{opacity:0;transform:scale(1.9)}}
@keyframes nfc-screen{0%,30%{opacity:.08}40%,66%{opacity:1}86%,100%{opacity:.08}}
@keyframes nfc-tag{0%,26%{border-color:rgba(124,196,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.5)}34%{border-color:rgba(124,196,255,.85);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 40px rgba(124,196,255,.35),0 20px 50px rgba(0,0,0,.5)}70%,100%{border-color:rgba(124,196,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.5)}}

/* 区切り共通 */
.nfc-section{position:relative;display:grid;justify-items:center;gap:clamp(2.6rem,6vh,3.6rem);padding:clamp(80px,13vh,150px) var(--gutter)}

/* 2. 三つの使い方 */
.nfc-cards{width:100%;max-width:1080px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.nfc-card{position:relative;display:grid;align-content:start;justify-items:center;gap:.7rem;padding:clamp(2.2rem,4vw,3rem) clamp(1.4rem,2.4vw,2rem);border:1px solid rgba(124,196,255,.2);border-radius:18px;background:linear-gradient(170deg,rgba(124,196,255,.07),rgba(124,196,255,.015) 55%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px rgba(255,255,255,.06);text-align:center;transition:border-color .8s var(--ease-out),box-shadow .8s var(--ease-out)}
.nfc-card:hover{border-color:rgba(124,196,255,.42);box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 40px rgba(124,196,255,.1)}
.nfc-card>*{margin:0}
.nfc-card__kanji{font-family:var(--font-mincho);font-weight:500;font-size:clamp(2.8rem,4.6vw,3.6rem);line-height:1;text-shadow:0 0 30px rgba(124,196,255,.25)}
.nfc-card__mark{font-size:.6em;margin-left:.04em}
.nfc-card__en{font-family:var(--font-en);font-weight:300;font-size:.72rem;letter-spacing:.45em;margin-right:-.45em;color:var(--color-glow);opacity:.8}
.nfc-card__title{margin-top:1rem;font-family:var(--font-mincho);font-weight:500;font-size:clamp(1.02rem,1.4vw,1.15rem);letter-spacing:.14em;line-height:1.8}
.nfc-card__text{font-size:clamp(.86rem,1.05vw,.94rem);line-height:2.1;letter-spacing:.06em;color:rgba(232,238,247,.74);word-break:keep-all}
.nfc-card__note{margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--color-line);font-size:.76rem;line-height:1.9;letter-spacing:.08em;color:var(--color-text-faint);word-break:keep-all}

/* 3. 料金とかたち */
.nfc-price__main{margin:0;display:flex;align-items:baseline;gap:.5em;text-shadow:0 0 30px rgba(124,196,255,.18)}
.nfc-price__pre{font-size:.86rem;letter-spacing:.2em;color:var(--color-text-sub)}
.nfc-price__num{font-family:var(--font-en);font-weight:200;font-size:clamp(2.8rem,6vw,4rem);letter-spacing:.04em;line-height:1}
.nfc-price__unit{font-size:.86rem;letter-spacing:.12em;color:var(--color-text-sub)}
.nfc-forms{display:grid;justify-items:center;gap:1.2rem}
.nfc-forms__list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.nfc-forms__list li{padding:.55em 1.4em;border:1px solid rgba(124,196,255,.28);border-radius:999px;font-size:.86rem;letter-spacing:.16em;background:rgba(124,196,255,.04)}
.nfc-forms__text{margin:0;font-size:.88rem;letter-spacing:.1em;color:var(--color-text-sub);word-break:keep-all}

/* スマホ:縦に並べる */
@media (max-width:820px){
  .nfc-hero{grid-template-columns:1fr;text-align:center;padding-top:calc(var(--header-h) + 24px);gap:2.4rem}
  .nfc-hero__text{justify-items:center}
  .nfc-hero__en{margin-right:-.5em}
  .nfc-tap{width:min(78%,300px)}
  .nfc-cards{grid-template-columns:1fr;max-width:440px}
}
@media (max-width:600px){
  .nfc-hero__copy{font-size:clamp(1.9rem,9vw,2.4rem);letter-spacing:.12em}
  .nfc-hero__lead{text-align:left}
}

/* 動きを減らす設定:光の輪は広がった状態で静かに表示 */
@media (prefers-reduced-motion:reduce){
  .nfc-tap__phone,.nfc-tap__ring,.nfc-tap__screen,.nfc-tap__tag{animation:none}
  .nfc-tap__phone{transform:translateY(8%)}
  .nfc-tap__screen{opacity:1}
  .nfc-tap__ring{opacity:.5;transform:scale(.7)}
  .nfc-tap__ring:nth-child(2){opacity:.3;transform:scale(1.15)}
  .nfc-tap__ring:nth-child(3){opacity:.15;transform:scale(1.6)}
}

/* 姿・響・凪の各ページ:「プランと料金」の下の一行 */
.nfc-option{position:relative;z-index:1;display:flex;justify-content:center;padding:0 var(--gutter) clamp(40px,8vh,80px)}
.nfc-option__link{display:inline-flex;align-items:center;gap:.9em;padding:.9em 1.8em;border:1px solid rgba(124,196,255,.24);border-radius:999px;background:rgba(124,196,255,.04);font-size:.84rem;letter-spacing:.12em;line-height:1.7;color:var(--color-text);text-decoration:none;text-align:center;transition:border-color .6s var(--ease-out),background-color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.nfc-option__link:hover,.nfc-option__link:focus-visible{border-color:rgba(124,196,255,.6);background:rgba(124,196,255,.08);box-shadow:0 0 30px rgba(124,196,255,.15)}
.nfc-option__label{color:var(--color-glow)}
.nfc-option__arrow{flex:none;width:22px;height:1px;background:currentColor;opacity:.6}
@media (max-width:820px),(pointer:coarse){.has-reveal [data-reveal]{filter:none}}

/* トップページ:締めの言葉の下の、NFCタグへの入口 */
.finale-nfc{position:absolute;left:0;right:0;bottom:clamp(18px,5vh,56px);width:max-content;max-width:calc(100% - 2 * var(--gutter));margin:0 auto;font-size:.78rem}
@media (max-width:600px){.finale-nfc{font-size:.74rem;padding:.75em 1.3em}}

/* 3つの使い方(姿・響・凪):「。」を付けず、カードの中の言葉を1本の縦の軸で真ん中にそろえる */
.nfc-card__mark{display:none}
.nfc-card__title{margin-right:-.14em}

/* 姿・響のページの「あわせて使える」:1行に詰めず、意味のまとまりごとに行を分けて読みやすく
   1行目 あわせて使える(青・小さめ)/2行目 何ができるか/3行目 NFCタグと料金 */
.nfc-option__link--stack{gap:1.4em;padding:1.3em 1.6em 1.3em 2em;border-radius:20px;letter-spacing:.1em}
.nfc-option__body{display:grid;justify-items:center;gap:.35rem}
.nfc-option__link--stack .nfc-option__label{font-size:.72rem;letter-spacing:.3em;margin-right:-.3em}
.nfc-option__title{font-family:var(--font-mincho);font-weight:500;font-size:1rem;letter-spacing:.12em;line-height:1.7}
.nfc-option__title .nfc-phrase{display:inline-block}
.nfc-option__price{font-size:.8rem;letter-spacing:.1em;color:var(--color-text-sub)}
/* スマホでは、右の矢印で文字が左に寄らないよう、矢印を料金の下に置いて全部を真ん中にそろえる */
@media(max-width:600px){.nfc-option__link--stack{flex-direction:column;gap:.9rem;padding:1.3em 1.4em}}

/* 「かざすだけでひらく。」:最後の「。」は左半分にしか形がなく、右に空きができて左に寄って見えるので、その分を右から引く */
.nfc-hero__copy .nfc-phrase:last-child{margin-right:-.5em}
/* 行の最後の字のうしろにも字間が付くので、その分を右から引いて真ん中を合わせる */
.nfc-hero__copy{margin-right:-.14em}
@media(max-width:600px){.nfc-hero__copy{margin-right:-.12em}}