/* ピンズケース ガイド 共通（①トップ／②はじめかた／③ピンズを集める／④調整ガイド）
   色は GotchaPins のロゴの黄と青。黄色の上に白文字は置かない（読めない）。
   動き：出現は .rv（JS が画面に入ったら .in を付ける）。prefers-reduced-motion では動かさない。 */

:root{
  --y:#F5C21B;          /* 黄（ロゴ） */
  --y-deep:#E0A800;     /* 黄の影・押したとき */
  --y-soft:#FFF5CC;     /* 黄の面 */
  --b:#0A9CF0;          /* 青（ロゴ）：大きい文字・面だけ */
  --b-text:#0074C2;     /* 青の文字（白地で読める濃さ） */
  --b-deep:#3080B0;     /* 濃い青（ロゴの影） */
  --b-soft:#E6F5FE;     /* 青の面 */
  --ink:#0E1A2B;        /* 文字（黒寄りの紺） */
  --sub:#566173;        /* 補足の文字 */
  --line:#E3E8EF;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --ok:#16A34A;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --shadow:0 6px 24px rgba(14,26,43,.08);
  --head-h:60px;
  --f-round:"M PLUS Rounded 1c","Noto Sans JP",system-ui,sans-serif;
  --f-body:"Noto Sans JP",system-ui,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--b-text)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 上のバー ---------- */
.gbar{position:sticky;top:0;z-index:50;height:var(--head-h);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:transform .25s ease}
.gbar.hide{transform:translateY(-100%)}
.gbar .wrap{height:100%;display:flex;align-items:center;gap:20px}
.gbar .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.gbar .logo img{height:34px;width:auto}
.gbar .logo span{font-family:var(--f-round);font-weight:800;font-size:15px;white-space:nowrap}
.gbar nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.gbar nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:8px 12px;border-radius:999px;white-space:nowrap}
.gbar nav a:hover{background:var(--bg-soft)}
.gbar nav a[aria-current=page]{background:var(--b-soft);color:var(--b-text)}
.gbar .btn{padding:8px 16px;font-size:14px}
.gbar .menu{display:none;margin-left:auto;background:none;border:0;font:inherit;font-weight:700;padding:8px;cursor:pointer;color:var(--ink)}
@media (max-width:900px){
  .gbar nav{display:none;position:absolute;top:var(--head-h);left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .gbar.open nav{display:flex}
  .gbar .menu{display:block}
  .gbar .logo span{display:none}
}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-round);font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;border-radius:999px;padding:15px 28px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn::after{content:"→";font-family:var(--f-body);font-weight:700}
.btn.no-arrow::after{content:none}
.btn-main{background:var(--y);color:var(--ink);box-shadow:0 4px 0 var(--y-deep)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--y-deep)}
.btn-main:active{transform:translateY(3px);box-shadow:0 1px 0 var(--y-deep)}
.btn-sub{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-sub:hover{background:var(--bg-soft)}
.btn-blue{background:var(--b);color:#fff;box-shadow:0 4px 0 var(--b-deep)}
.btn-blue:active{transform:translateY(3px);box-shadow:0 1px 0 var(--b-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- 見出し ---------- */
.h-hero{font-family:var(--f-round);font-weight:800;font-size:clamp(34px,5.1vw,68px);line-height:1.18;letter-spacing:.01em;margin:0}
.h-sec{font-family:var(--f-round);font-weight:800;font-size:clamp(28px,3.8vw,44px);line-height:1.3;margin:0 0 12px}
.h-sec.center{text-align:center}
.h-card{font-family:var(--f-round);font-weight:800;font-size:20px;line-height:1.4;margin:0 0 6px}
.accent-b{color:var(--b)}
.uline{background:linear-gradient(transparent 70%,var(--y) 70%,var(--y) 92%,transparent 92%);padding:0 .05em}
.lead{font-size:clamp(15px,1.7vw,18px);color:var(--sub);margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-round);font-weight:800;font-size:17px;letter-spacing:.14em;color:var(--b-text);margin-bottom:8px}
.eyebrow::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--y)}
/* 遊び心のしるし（見出しの左右の短い線） */
.spark{position:relative;display:inline-block;padding:0 34px}
.spark::before,.spark::after{content:"";position:absolute;top:50%;width:22px;height:22px;transform:translateY(-60%);
  background:linear-gradient(var(--y),var(--y)) 50% 0/4px 9px no-repeat,linear-gradient(var(--y),var(--y)) 0 60%/9px 4px no-repeat,linear-gradient(var(--y),var(--y)) 100% 60%/9px 4px no-repeat}
.spark::before{left:0;transform:translateY(-60%) rotate(-20deg)}
.spark::after{right:0;transform:translateY(-60%) rotate(20deg)}

/* ---------- セクション ---------- */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec.soft{background:var(--bg-soft)}
.sec.yellow{background:var(--y-soft)}
.sec.blue{background:var(--b-soft)}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head.center{text-align:center}

/* ---------- 告知の帯 ---------- */
.band{display:block;background:var(--y);color:var(--ink);text-decoration:none}
.band .wrap{display:flex;align-items:center;gap:16px;min-height:64px;padding-top:10px;padding-bottom:10px}
.band b{font-family:var(--f-round);font-weight:800;font-size:clamp(17px,2.2vw,24px)}
.band small{font-size:13px;line-height:1.5;margin-left:auto}
.band .go{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700}
.band .tag{flex:none;font-family:var(--f-round);font-weight:800;font-size:12px;background:#fff;color:var(--b-text);border-radius:999px;padding:3px 10px}
@media (max-width:700px){.band small{display:none}.band .go{margin-left:auto}}
/* 告知の帯の動き（2026-10-12 ユーザー：開催中を強調）：光が横切る・🎉 が揺れる・矢印が右へ誘う */
.band{position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:1}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-110%);animation:band-shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes band-shine{0%,50%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}
.band .pop{display:inline-block;transform-origin:50% 85%;animation:band-pop 3.6s ease-in-out infinite}
@keyframes band-pop{0%,58%,100%{transform:none}64%{transform:rotate(-16deg) scale(1.25)}70%{transform:rotate(14deg) scale(1.25)}76%{transform:rotate(-8deg) scale(1.12)}82%{transform:none}}
.band .go{transition:background .2s,color .2s;animation:band-go 1.6s ease-in-out infinite}
@keyframes band-go{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.band:hover .go{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){.band::after{display:none}.band .pop,.band .go{animation:none}}

/* ---------- カード ---------- */
.cards{display:grid;gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none;background:var(--bg-soft)}
.card.y{background:var(--y-soft);box-shadow:none}
.card.b{background:var(--b-soft);box-shadow:none}
.card p{margin:0;color:var(--sub);font-size:15px}
.card.big{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:32px}
.card.big .h-big{font-family:var(--f-round);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:0 0 12px}
.card.b .h-big{color:var(--b-text)}
a.card{text-decoration:none;color:inherit;display:block;transition:transform .15s ease,box-shadow .15s ease}
a.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,26,43,.12)}
a.card .more{display:inline-block;margin-top:12px;font-weight:700;color:var(--b-text);font-size:14px}
@media (max-width:900px){.cards.c4{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:1fr}}
@media (max-width:700px){.cards.c2{grid-template-columns:1fr}.card.big{grid-template-columns:1fr;padding:24px}}
@media (max-width:520px){.cards.c4{grid-template-columns:1fr}}

/* ---------- 番号（青い丸） ---------- */
.num{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--b);color:#fff;font-family:var(--f-round);font-weight:800;font-size:15px;line-height:1}
.num-row{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.num-row h3{margin:0}

/* ---------- 画像・動画（無い間は仮の枠） ---------- */
.media{position:relative;overflow:hidden;background:var(--bg-soft);border-radius:var(--r-m);aspect-ratio:16/10}
.media.r43{aspect-ratio:4/3}
.media.r169{aspect-ratio:16/9}
.media.r11{aspect-ratio:1/1}
.media.tall{aspect-ratio:3/4}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.contain>img{object-fit:contain}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:14px;
  color:var(--sub);font-size:13px;line-height:1.5;border:2px dashed #C9D3E0;border-radius:inherit;
  background:repeating-linear-gradient(45deg,#F7F9FC 0 14px,#EEF2F7 14px 28px)}
.media .ph b{font-family:var(--f-round);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--b-text)}
.media .ph code{font-family:var(--f-mono);font-size:11px;color:#8A94A6}
.media.has-file .ph{display:none}

/* 拡大（クリックで全面表示） */
.media.has-file.zoomable{cursor:zoom-in}
.media.has-file.zoomable::after{content:"⤢";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;font-size:15px;box-shadow:0 2px 8px rgba(14,26,43,.15);opacity:0;transition:opacity .15s ease}
.media.has-file.zoomable:hover::after,.media.has-file.zoomable:focus-visible::after{opacity:1}
dialog.zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible;cursor:zoom-out}
dialog.zoom::backdrop{background:rgba(245,247,250,.94)}
dialog.zoom img{display:block;max-width:min(96vw,1600px);max-height:94vh;width:auto;height:auto;border-radius:var(--r-m);box-shadow:0 20px 60px rgba(14,26,43,.25);background:#fff}
dialog.zoom .zoom-x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(14,26,43,.15)}
@media (hover:none){.media.has-file.zoomable::after{opacity:1}}

/* ---------- ②の手順 ---------- */
.progress{position:sticky;top:var(--head-h);z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.progress .wrap{display:flex;align-items:center;gap:14px;height:48px}
.progress .label{font-family:var(--f-round);font-weight:800;font-size:14px;white-space:nowrap}
.progress .bar{flex:1;height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--b);border-radius:inherit;transition:width .3s ease}
.stepnav{display:flex;gap:6px}
.stepnav a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-round);font-weight:800;font-size:13px;text-decoration:none;color:var(--sub);background:var(--bg-soft)}
.stepnav a.cur{background:var(--b);color:#fff}
.stepnav a.done{background:var(--y);color:var(--ink)}

.step-head{display:flex;align-items:center;gap:14px;margin:0 0 8px}
.step-badge{flex:none;font-family:var(--f-round);font-weight:800;font-size:13px;letter-spacing:.06em;background:var(--y);color:var(--ink);border-radius:999px;padding:4px 12px}
.step-head h2{font-family:var(--f-round);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.3;margin:0}
.op{border-left:4px solid var(--line);padding:4px 0 4px 20px;margin:28px 0}
.op.cur{border-left-color:var(--b)}
.op h3{font-family:var(--f-round);font-weight:800;font-size:19px;margin:0 0 6px;display:flex;gap:10px;align-items:center}
.op p{margin:0 0 12px}
.done-box{display:flex;gap:12px;align-items:flex-start;background:#ECFDF3;border-radius:var(--r-s);padding:12px 14px;margin:12px 0;font-size:15px}
.done-box::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.note{background:var(--b-soft);border-radius:var(--r-s);padding:12px 14px;margin:12px 0;font-size:15px}
.ui{font-family:var(--f-round);font-weight:800;white-space:nowrap}       /* ［ボタン名］ */
kbd,.path{font-family:var(--f-mono);font-size:.88em;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}
@media (max-width:600px){.path{white-space:normal;overflow-wrap:anywhere}}
.copy{font:inherit;font-size:12px;font-weight:700;margin-left:6px;padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--sub);cursor:pointer;vertical-align:1px}
.copy.ok{background:#ECFDF3;color:var(--ok);border-color:#BBF7D0}

/* うまくいかないとき */
details.trouble{border:1px solid var(--line);border-radius:var(--r-s);margin:12px 0;background:#fff}
details.trouble summary{cursor:pointer;list-style:none;padding:10px 14px;font-weight:700;font-size:14px;color:var(--sub);display:flex;gap:8px;align-items:center}
details.trouble summary::-webkit-details-marker{display:none}
details.trouble summary::before{content:"?";width:20px;height:20px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;font-size:12px;color:var(--sub)}
details.trouble[open] summary{border-bottom:1px solid var(--line)}
details.trouble>div{padding:10px 14px 4px;font-size:15px}
details.trouble dl{margin:0}
details.trouble dt{font-weight:700}
details.trouble dd{margin:0 0 10px}

.pager{display:flex;justify-content:space-between;gap:12px;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}

/* ---------- よくある質問 ---------- */
details.qa{border-bottom:1px solid var(--line);padding:18px 0}
details.qa summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;display:flex;gap:12px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::before{content:"Q";flex:none;width:28px;height:28px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-family:var(--f-round);font-weight:800;font-size:14px}
details.qa p{margin:10px 0 0 40px;color:var(--sub)}

/* ---------- 下のフッター ---------- */
.gfoot{background:var(--bg-soft);color:var(--sub);border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px}
.gfoot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.gfoot a{color:var(--ink);text-decoration:none;font-weight:700}
.gfoot small{margin-left:auto;color:#8A94A6}

/* ---------- 出現（画面に入ったら 1 回だけ） ---------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .btn,a.card,.gbar{transition:none}
  html{scroll-behavior:auto}
}

/* お問い合わせへの案内（調整ガイド・はじめかた・トップの FAQ の最後） */
.contact-box{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--line);border-radius:var(--r-l);padding:18px 20px;margin:28px 0 0}
.contact-box .cb-ico{flex:none;width:48px;height:48px;border-radius:50%;background:var(--b-soft);color:var(--b-text);display:grid;place-items:center}
.contact-box .cb-txt{flex:1;min-width:0}
.contact-box .cb-txt b{display:block;font-family:var(--f-round);font-weight:800;font-size:17px;margin-bottom:2px}
.contact-box .cb-txt span{display:block;font-size:14px;color:var(--sub)}
.contact-box .btn{flex:none}
@media (max-width:600px){.contact-box{flex-wrap:wrap}.contact-box .btn{width:100%;justify-content:center}}