/* ============================================
   common.css - Motion Lite 全ページ共通
   ============================================ */

/* RESET & VARIABLES */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --grad:linear-gradient(135deg,#9b59b6 0%,#e74c6f 50%,#f39c12 100%);
  --grad-btn:linear-gradient(135deg,#c0392b 0%,#e67e22 100%);
  --grad-ft:linear-gradient(135deg,#8e44ad 0%,#d94577 50%,#e8873a 100%);
  --txt:#333;--sub:#666;--bg:#f5f5f5;--bdr:#e0e0e0;
  --jp:'Noto Sans JP','Hiragino Sans',sans-serif;
  --en:'Gotham','Poppins',sans-serif;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--jp);color:var(--txt);background:#f0f0f0;-webkit-font-smoothing:antialiased}
.wrap{max-width:780px;margin:0 auto;background:#fff}
img{max-width:100%;height:auto;display:block}

/* NAV MENU */
.nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:100}
.nav-overlay.open{opacity:1;visibility:visible}
.nav-menu{position:fixed;top:0;right:0;width:85%;max-width:380px;height:100%;background:linear-gradient(160deg,#7b3fa0 0%,#c0547a 40%,#e08850 80%,#e8a040 100%);z-index:101;transform:translateX(100%);visibility:hidden;transition:transform .35s ease,visibility .35s;overflow-y:auto;display:flex;flex-direction:column;padding:28px 28px 40px}
.nav-menu.open{transform:translateX(0);visibility:visible}
.nav-close {
  position: fixed;
  top: 24px;
  right: 24px;
  display: none;  /* 初期非表示 */
  line-height: 0;
  cursor: pointer;
  z-index: 202;
    pointer-events: all;  /* 追加 */
}

.nav-close img {
  display: block;
  width: 36px;
  height: 25px;
}

/* メニューが開いた時だけ表示 */
.nav-menu.open ~ .nav-close {
  display: block;
}
.nav-menu-logo{margin-top:48px;line-height:0}
.nav-logo-img{height:32px;width:auto}
.nav-links{list-style:none;padding:8px 0}
.nav-links li{border:none}
.nav-links a{display:flex;align-items:center;gap:8px;padding:12px 0;font-size:14px;font-weight:500;color:#fff;text-decoration:none;letter-spacing:.02em}
.nav-links a:hover{opacity:.8}
.nav-dash{color:rgba(255,255,255,.7);font-size:14px;flex-shrink:0}
.nav-angle{color:rgba(255,255,255,.6);font-size:11px;flex-shrink:0}
.nav-links-sub{padding-top:8px;margin-top:4px}
.nav-links-sub a{font-size:13px;color:rgba(255,255,255,.85);padding:8px 0}
.nav-btns{padding:0;margin-top:auto;display:flex;flex-direction:column;gap:12px}
.nav-btn-apply{display:block;text-align:center;padding:16px;border-radius:32px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.05em;background:#fff;position:relative;border:none;overflow:hidden}
.nav-btn-apply span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-btn-contact{display:block;text-align:center;padding:16px;border-radius:32px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.08em;background:#333;color:#fff;font-family:var(--en);transition:opacity .2s}
.nav-btn-contact:hover{opacity:.85}

/* HAMBURGER (white default for hero) */
.hamburger{width:32px;height:24px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:none;border:none;z-index:102;position:relative}
.hamburger span{display:block;height:2px;background:#fff;border-radius:1px}
.hamburger.active {
  opacity: 0;
  pointer-events: none;
}
.hero-nav {
 position: fixed;  /* 最初からfixedに */
  top: 24px;
  right: 24px;
  z-index: 102;
}

.hero-nav.fixed {
  position: fixed;
  top: 24px;
  right: 30px;
}

.hero-nav.fixed .hamburger span {
  background: linear-gradient(135deg, #9b59b6 0%, #e74c6f 50%, #f39c12 100%);
}

@media(min-width:780px){
  .hero-nav { top: 24px; right: 36px; }
  .hero-nav.fixed { top: 32px; right: 28px; }
}


/* FOOTER */
.ft{background:var(--grad-ft);color:#fff;padding:56px 40px 40px}
.ft-co{font-family:var(--en);font-size:28px;font-weight:700}
.ft-info{margin-top:16px;font-size:13px;line-height:1.9}
.ft-info .b{font-weight:700}
.ft-links{margin-top:28px;list-style:none}
.ft-links li{padding:0}
.ft-links a{color:#fff;text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.ft-links a::before{content:'〉';font-size:11px}
.ft-links .ext{font-size:10px;opacity:.7}
.ft-cp{margin-top:28px;font-size:11px;opacity:.6;font-family:var(--en)}
.ft-links .ext {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 2px;
  position: relative;
  vertical-align: middle;
  margin-left: 2px;
}

.ft-links .ext::before {
  content: '↗';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  line-height: 1;
}

/* LIGHTBOX */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;cursor:zoom-out;padding:32px}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90%;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);animation:lbFadeIn .3s ease}
@keyframes lbFadeIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* EN LABEL (shared) */
.en-label{font-family:var(--en);font-size:16px;font-weight:600;letter-spacing:.08em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.en-label.left{text-align:left}

/* COMMON RESPONSIVE */
@media(max-width:779px){
  .ft{padding:40px 24px 32px}
}
@media(min-width:780px){
  .wrap{max-width:1440px}
  .inner{max-width:950px;margin:0 auto}
  .ft{padding:60px 60px 48px}
  .ft-inner{display:flex;flex-wrap:wrap;align-items:flex-start;gap:80px;justify-content:flex-start}
  .ft-left{flex:0 0 auto;min-width:200px}  /* flex:1 → flex:0 0 auto */
  .ft-links{margin-top:0;display:flex;flex-direction:column;gap:0px}
  .ft-cp{width:100%;margin-top:32px}
}