/* ============================================================
   common.css  |  biid × Mecha-Tok 共通スタイル
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600&display=swap');

/* BASE */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;color:#0d1b2a;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* HEADER */
.hdr{background:#fff;padding:0 24px;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:56px;border-bottom:2px solid #0d1b2a;box-shadow:0 1px 8px rgba(0,0,0,.08);}
.hdr-l{display:flex;align-items:center;gap:10px;}
.logo img{height:28px;width:auto;}
.hdr-label{font-size:clamp(0.6875rem, 1vw, 1rem);color:#6c757d;border-left:1px solid #ddd;padding-left:10px;}
.hdr-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 16px;border-radius:4px;font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;color:#fff;background:#0d1b2a;white-space:nowrap;transition:background .2s;border:none;}
.hdr-btn:hover{background:#1e3a5f;}

/* HERO共通 */
.hero{position:relative;height:52vh;min-height:300px;max-height:460px;overflow:hidden;display:flex;align-items:flex-end;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:kzoom 22s ease-in-out infinite alternate;}
@keyframes kzoom{from{transform:scale(1.05);}to{transform:scale(1.12);}}
.hero-ov{position:absolute;inset:0;}
.hero-body{position:relative;z-index:1;padding:0 20px 28px;width:100%;}
.hero-ey{display:inline-block;font-size:clamp(0.625rem, 0.9vw, 0.875rem);font-weight:700;letter-spacing:.1em;padding:3px 10px;border-radius:20px;margin-bottom:10px;}
.hero h1{font-size:clamp(22px,5.5vw,44px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:7px;}
.hero-sub{font-size:clamp(1rem, 1.2vw, 1.25rem);color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:16px;}
.hero-sub strong{color:#fff;}
.hero-disc-wrap{position:absolute;top:18px;right:18px;z-index:2;}
.hero-disc{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:125px;height:125px;border:3px solid rgba(255,255,255,.3);animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.hd-num{font-family:'Bebas Neue',cursive;font-size:clamp(3rem, 4vw, 4.5rem);line-height:1;color:#fff;}
.hd-label{font-size:clamp(0.8125rem, 1.1vw, 1.125rem);font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.05em;margin-top:-3px;}
.hd-top{font-size:0.75rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.05em;margin-bottom:-2px;}
.hd-tag{font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.03em;margin-top:1px;}

/* COUPON */
.coupon{padding:14px 20px;max-width:min(720px, 90vw);margin:14px auto 0;}
.coupon-box{background:#0d1b2a;border:1.5px solid #f26b1d;border-radius:10px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.coupon-box>div{flex:1;min-width:0;}
.c-label{font-size:clamp(0.625rem, 0.9vw, 0.875rem);color:#f26b1d;font-weight:700;margin-bottom:2px;}
.c-ttl{font-size:clamp(0.8125rem, 1.1vw, 1.125rem);color:#fff;font-weight:700;}
.c-note{font-size:clamp(0.625rem, 0.9vw, 0.875rem);color:rgba(255,255,255,.35);margin-top:2px;}
.c-code-box{background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.22);border-radius:6px;padding:7px 16px;text-align:center;flex-shrink:0;}
.c-code{font-family:'JetBrains Mono',monospace;font-size:clamp(1.375rem, 1.6vw, 1.75rem);color:#c9a84c;letter-spacing:4px;}
.c-hint{font-size:clamp(0.5625rem, 0.8vw, 0.75rem);color:rgba(255,255,255,.3);margin-top:1px;}
@media(max-width:540px){.coupon-box{flex-direction:column;align-items:stretch;}.c-code-box{text-align:center;}}

/* CARDS共通 */
.sec{padding:20px 20px 16px;max-width:min(1400px, 90vw);margin:0 auto;}
.pb20{padding-bottom:20px!important;}
.sec-ttl{font-size:clamp(0.8125rem, 1.1vw, 1.125rem);font-weight:900;color:#0d1b2a;margin-bottom:12px;padding-bottom:7px;border-bottom:2px solid #e9ecef;display:flex;align-items:center;justify-content:space-between;}
.sec-ttl small{font-size:clamp(0.9rem, 1vw, 1rem);font-weight:700;}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:768px){.cards{grid-template-columns:1fr;}}
.card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e9ecef;display:flex;transition:transform .2s,box-shadow .2s;cursor:pointer;color:inherit;}
.card:hover{transform:translateY(-2px);box-shadow:0 5px 18px rgba(0,0,0,.1);}
.card-img{width:120px;flex-shrink:0;object-fit:cover;}
.card-body{padding:11px 13px;flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.card-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.tag{font-size:clamp(0.5625rem, 0.8vw, 0.75rem);font-weight:700;padding:2px 6px;border-radius:3px;}
.loc{color:#6c757d;font-size:clamp(0.625rem, 0.9vw, 0.875rem);}
.card-name{font-size:clamp(0.8125rem, 1.1vw, 1.125rem);font-weight:900;color:#0d1b2a;margin-bottom:5px;}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.chip{border:1px solid #e9ecef;font-size:clamp(0.625rem, 0.9vw, 0.875rem);padding:2px 7px;border-radius:12px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.disc{font-family:'Bebas Neue',cursive;font-size:clamp(1.125rem, 1.4vw, 1.5rem);color:#f26b1d;line-height:1;}
.cbtn{display:inline-flex;align-items:center;gap:4px;font-size:clamp(0.625rem, 0.9vw, 0.875rem);font-weight:700;padding:5px 11px;border-radius:20px;color:#fff;white-space:nowrap;transition:opacity .2s;}
.cbtn:hover{opacity:.82;}

/* HOW TO */
.how{background:#fff;padding:28px 20px;border-top:2px solid #e9ecef;border-bottom:2px solid #e9ecef;}
.how-inner{max-width:min(720px, 90vw);margin:0 auto;}
.how-label{text-align:center;font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#6c757d;margin-bottom:18px;}
.steps{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.step{flex:1;min-width:130px;border:1.5px solid #e9ecef;border-radius:12px;padding:16px 12px;text-align:center;}
.step-icon{font-size:clamp(1.75rem, 2vw, 2.25rem);margin-bottom:8px;display:block;}
.step-n{font-family:'Bebas Neue',cursive;font-size:clamp(0.8125rem, 1.1vw, 1.125rem);color:#f26b1d;line-height:1;margin-bottom:6px;letter-spacing:.08em;}
.step-t{font-size:clamp(0.6875rem, 1vw, 1rem);color:#6c757d;line-height:1.5;}
.step-t strong{color:#0d1b2a;display:block;font-size:clamp(0.8125rem, 1.1vw, 1.125rem);font-weight:900;margin-bottom:3px;}

/* CATEGORY NAV */
.cat-nav{padding:24px 20px;border-bottom:2px solid #e9ecef;}
.cat-nav-inner{max-width:min(1280px, 90vw);margin:0 auto;}
.cat-nav-label{font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;color:#6c757d;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;text-align:center;}
.cat-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.cat-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;background:#fff;border:1.5px solid #e9ecef;border-radius:10px;font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;color:#0d1b2a;text-align:center;line-height:1.3;transition:border-color .2s,box-shadow .2s,transform .2s;}
.cat-nav-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-2px);}
.cat-nav-btn .cat-ico{font-size:clamp(1.25rem, 1.5vw, 1.75rem);}

/* NOTICE / BACK */
.notice{padding:8px 20px 22px;max-width:min(1200px, 90vw);margin:0 auto;}
.nbox{background:#fff8e1;border-left:3px solid #c9a84c;border-radius:0 6px 6px 0;padding:11px 14px;}
.n-ttl{font-size:clamp(0.6875rem, 1vw, 1rem);font-weight:700;color:#7d5a00;margin-bottom:8px;}
.n-scroll{max-height:160px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:#c9a84c #fff3cd;}
.n-scroll::-webkit-scrollbar{width:4px;}
.n-scroll::-webkit-scrollbar-track{background:#fff3cd;border-radius:2px;}
.n-scroll::-webkit-scrollbar-thumb{background:#c9a84c;border-radius:2px;}
.n-list{list-style:none;font-size:clamp(0.625rem, 0.9vw, 0.875rem);color:#5a4000;line-height:1.7;margin:0;padding:0;}
.n-list li{padding:4px 0;border-bottom:1px solid rgba(201,168,76,.2);}
.n-list li:last-child{border-bottom:none;}
.n-list li::before{content:none;}
.n-item-ttl{display:inline-block;font-weight:700;color:#7d5a00;margin-right:0.4em;}
.n-item-ttl::before{content:'・';}
.n-scroll-hint{text-align:center;font-size:0.625rem;color:#a08030;margin-top:5px;opacity:.7;}
.back{padding:4px 20px 8px;max-width:min(1200px, 90vw);margin:0 auto;}
.back a{font-size:clamp(0.6875rem, 1vw, 1rem);color:#6c757d;display:inline-flex;align-items:center;gap:4px;}

/* FOOTER */
.ftr{background:#f5f5f5;border-top:2px solid #0d1b2a;padding:24px 20px 16px;}
.ftr-inner{max-width:min(720px, 90vw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;}
.ftr-logo img{height:24px;width:auto;}
.ftr-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.ftr-links a{font-size:clamp(0.6875rem, 1vw, 1rem);color:#0d1b2a;text-decoration:underline;text-underline-offset:2px;}
.ftr-copy{font-size:clamp(0.625rem, 0.9vw, 0.875rem);color:#888;text-align:center;}
.ico{display:inline-block;vertical-align:middle;}

/* HAMBURGER MENU */
.ham-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;cursor:pointer;background:none;border:none;padding:4px;border-radius:6px;transition:background .2s;flex-shrink:0;}
.ham-btn:hover{background:rgba(0,0,0,.06);}
.ham-btn span{display:block;width:22px;height:2px;background:#0d1b2a;border-radius:2px;transition:transform .3s,opacity .3s;}
.ham-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham-btn.open span:nth-child(2){opacity:0;}
.ham-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;}
.nav-overlay.open{display:block;}
.nav-drawer{position:fixed;top:0;right:-320px;width:300px;height:100%;background:#fff;z-index:201;box-shadow:-4px 0 24px rgba(0,0,0,.15);transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column;}
.nav-drawer.open{right:0;}
.nav-drawer-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:2px solid #0d1b2a;}
.nav-drawer-logo img{height:22px;width:auto;}
.nav-close{background:none;border:none;font-size:clamp(1.375rem, 1.6vw, 1.75rem);cursor:pointer;color:#0d1b2a;line-height:1;padding:4px;}
.nav-drawer-body{padding:16px 0;flex:1;}
.nav-section-label{font-size:clamp(0.625rem, 0.9vw, 0.875rem);font-weight:700;color:#aaa;letter-spacing:.12em;text-transform:uppercase;padding:8px 20px 4px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:clamp(0.8125rem, 1.1vw, 1.125rem);font-weight:700;color:#0d1b2a;text-decoration:none;transition:background .2s;}
.nav-item:hover{background:#f5f8fc;}
.nav-item.active{color:#0077b6;background:#e8f4fd;}
.nav-item-ico{font-size:clamp(1.125rem, 1.4vw, 1.5rem);width:24px;text-align:center;flex-shrink:0;}
.nav-divider{height:1px;background:#e9ecef;margin:8px 20px;}
.nav-drawer-ftr{padding:16px 20px;border-top:1px solid #e9ecef;font-size:clamp(0.625rem, 0.9vw, 0.875rem);color:#aaa;text-align:center;}

/* PAGE TOP BUTTON */
.page-top{position:fixed;bottom:24px;right:20px;width:48px;height:48px;background:#0d1b2a;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .2s;z-index:190;}
.page-top.visible{opacity:1;visibility:visible;}
.page-top:hover{transform:translateY(-3px);background:#1e3a5f;}
.page-top svg{display:block;pointer-events:none;}

@media(max-width:768px){
  .hdr-label{font-size:0.6875rem;}
  .hdr-btn{font-size:0.6875rem;}
  .hero-ey{font-size:0.625rem;}
  .hero-sub{font-size:1rem;}
  .hd-num{font-size:3rem;}
  .hd-label{font-size:0.8125rem;}
  .hd-top{font-size:0.75rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.05em;margin-bottom:-2px;}
.hd-tag{font-size:0.6875rem;}
  .c-label{font-size:0.625rem;}
  .c-ttl{font-size:0.8125rem;}
  .c-note{font-size:0.625rem;}
  .c-code{font-size:1.375rem;}
  .c-hint{font-size:0.5625rem;}
  .sec-ttl{font-size:0.8125rem;}
  .sec-ttl small{font-size:0.6875rem;}
  .tag{font-size:0.5625rem;}
  .loc{font-size:0.625rem;}
  .card-name{font-size:0.8125rem;}
  .chip{font-size:0.625rem;}
  .disc{font-size:1.125rem;}
  .cbtn{font-size:0.625rem;}
  .how-label{font-size:0.6875rem;}
  .step-icon{font-size:1.75rem;}
  .step-n{font-size:0.8125rem;}
  .step-t{font-size:0.6875rem;}
  .step-t strong{font-size:0.8125rem;}
  .cat-nav-label{font-size:0.6875rem;}
  .cat-nav-btn{font-size:0.6875rem;}
  .cat-nav-btn .cat-ico{font-size:1.25rem;}
  .n-ttl{font-size:0.6875rem;}
  .n-list{font-size:0.625rem;}
  .back a{font-size:0.6875rem;}
  .ftr-links a{font-size:0.6875rem;}
  .ftr-copy{font-size:0.625rem;}
  .nav-close{font-size:1.375rem;}
  .nav-section-label{font-size:0.625rem;}
  .nav-item{font-size:0.8125rem;}
  .nav-item-ico{font-size:1.125rem;}
  .nav-drawer-ftr{font-size:0.625rem;}
}