:root{
  --bg:#0d1117;
  --code:#58a6ff;
  --text:#ffffff;
  --sub:#dddddd;
  --blur-amount:6px;
  --dim-bright:0.55;
  --veil-opacity:0.55;
  --rise:10px;
  --fade-ms:1000ms;
  --hero-max:48px;
  --sub-max:24px;
  --scroll-speed:20s;
  --accent:#58a6ff;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
html, body { max-width:100%; overflow-x:hidden; }

/* layout */
.container{max-width:1080px;margin:0 auto;padding:20px}
.site-main > .container{padding:48px 20px}
.section-title{margin:0 0 10px;font-size:clamp(22px,3.8vw,32px)}
.lede{color:var(--sub);margin:0 0 20px}

/* ===== 背景コード（奥） ===== */
.bg-code{
  position:fixed; inset:0; padding:20px;
  color:var(--code);
  font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.4; white-space:pre-wrap;
  z-index:0;
  filter: blur(var(--blur-amount)) brightness(var(--dim-bright));
  animation: bg-scroll linear infinite 40s;
  pointer-events:none;
}
@keyframes bg-scroll{ from{transform:translateY(0)} to{transform:translateY(-100%)} }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; background:rgba(13,17,23,.6); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{font-weight:700}
.gnav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.gnav a{color:#fff; text-decoration:none; opacity:.9}
.gnav a:hover{opacity:1; color:var(--accent)}

/* PC/SP 切替 */
.pc-only{display:block}
.sp-only{display:none}
@media (max-width:768px){
  .pc-only{display:none}
  .sp-only{display:block}
  .sp-menu-btn{
    font-size:28px; cursor:pointer; color:#fff; background:none; border:0;
    z-index:1100; position:relative;
  }
}

/* ===== SP全画面メニュー（フェード＋タイプ） ===== */
@media (max-width:768px){
  body.menu-open{ overflow:hidden; }

  .sp-nav{
    position:fixed; inset:0; z-index:1000;
    background:rgba(13,17,23,.95);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s ease;
  }
  .sp-nav.open{ opacity:1; pointer-events:auto; }

  .sp-nav ul{ list-style:none; padding:0; margin:0; text-align:center; }
  .sp-nav li{ margin:20px 0; opacity:0; transform:translateY(20px); transition:all .3s ease; }
  .sp-nav.open li{ opacity:1; transform:translateY(0); }
  .sp-nav.open li:nth-child(1){ transition-delay:.1s }
  .sp-nav.open li:nth-child(2){ transition-delay:.2s }
  .sp-nav.open li:nth-child(3){ transition-delay:.3s }
  .sp-nav.open li:nth-child(4){ transition-delay:.4s }
  .sp-nav.open li:nth-child(5){ transition-delay:.5s }

  .sp-nav a{
    font-size:24px; color:#fff; text-decoration:none;
    font-family:"Fira Code", ui-monospace, Menlo, Consolas, monospace;
    white-space:nowrap;
  }
  /* カーソル風（タイピング中のみ表示） */
  .sp-nav a.typing::after{
    content:"|"; display:inline-block; margin-left:3px;
    animation: blink 1s steps(2, jump-none) infinite;
  }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

  .sp-menu-close{
    position:absolute; top:20px; right:20px; font-size:36px; color:#fff; cursor:pointer;
    background:none; border:0;
  }
}

/* ===== Hero ===== */
.hero{position:relative;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.code-area{
  position:absolute; inset:0; padding:20px 24px; color:var(--code);
  font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.4; white-space:pre-wrap; z-index:1;
  filter: blur(var(--blur-amount)) brightness(var(--dim-bright));
  animation: code-scroll linear infinite var(--scroll-speed);
  pointer-events:none;
}
@keyframes code-scroll{ from{transform:translateY(0)} to{transform:translateY(-100%)} }
.veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--veil-opacity)) 100%);
}
.hero-text{
  position:relative; z-index:3; text-align:center; opacity:0; transform:translateY(var(--rise));
  transition: opacity var(--fade-ms) ease, transform var(--fade-ms) ease; padding:0 10px;
}
.hero-text.visible{ opacity:1; transform:translateY(0); }
.hero-text h1,.hero-text h2{
  letter-spacing:.02em; margin:0 0 10px; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-text h1{ font-size:clamp(28px,5vw,var(--hero-max)); }
.hero-text h2{ font-size:clamp(16px,3vw,var(--sub-max)); font-weight:300; color:var(--sub); text-shadow:0 2px 10px rgba(0,0,0,.5); }

/* typewriter */
.text-char{ display:inline-block; overflow:hidden; vertical-align:top; }
.text-cursor{ display:inline-block; vertical-align:top; margin-left:-5px; animation: blink 1s steps(2,jump-none) infinite; }

/* glitch (青で統一) */
.glitch .text-char{ animation: glitch 1.5s linear infinite; }
@keyframes glitch{
  0%  { text-shadow: 2px 0 0 #58a6ff, -2px 0 0 #58a6ff; }
  25% { text-shadow: -2px 0 0 #58a6ff, 2px 0 0 #58a6ff; }
  50% { text-shadow: 2px 0 0 #58a6ff, -2px 0 0 #58a6ff; }
  75% { text-shadow: -2px 0 0 #58a6ff, 2px 0 0 #58a6ff; }
  100%{ text-shadow: 0 0 0 #58a6ff, 0 0 0 #58a6ff; }
}

/* motion reduce */
@media (prefers-reduced-motion: reduce){
  .code-area,.veil,.hero-text{ transition:none !important; }
  .text-cursor,.glitch .text-char,.bg-code{ animation:none !important; }
}

/* cards / grids */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;
}
.card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:16px;
  background: rgba(255,255,255,.03);
}
.card-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.badge{
  font-size:.8rem; border:1px solid rgba(255,255,255,.2); padding:2px 8px; border-radius:999px; color:var(--sub);
}
.code-preview{ margin:8px 0 }
.code-window{
  border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:10px; background:rgba(0,0,0,.25);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}
.code-line{ margin:0; font-family:"Fira Code",ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:#b9c1d0 }
.code-line.dim{ opacity:.6 }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 2s ease, transform 2s ease; }
.reveal.in{ opacity:1; transform:none; }

/* skills */
.skills-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
}
.skill-header{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.meter{ height:8px; background:rgba(255,255,255,.1); border-radius:999px; overflow:hidden; }
.meter > span{ display:block; width:0; height:100%; background:linear-gradient(90deg, #58a6ff, #58a6ff); transition:width 2.4s ease; }

/* price section */
.price-cards .card{ text-align:center; }
.price-cards .card-header{ justify-content:center; gap:8px; }
.price-cards .price{ font-size:1.5rem; font-weight:700; color:var(--accent); margin-top:10px; }
.price-cards + .note, #price .note{ font-size:.85rem; color:#aaa; margin-top:1rem; text-align:center; }

/* timeline */
.timeline{ list-style:none; padding:0; margin:0; }
.timeline .item{ padding:8px 0; color:var(--sub); }
.timeline time{ color:#fff; font-weight:600; }

/* buttons */
.btn{
  display:inline-block; padding:10px 16px; border:1px solid rgba(255,255,255,.2);
  border-radius:8px; text-decoration:none; color:#fff; transition:transform .15s ease, background .15s ease;
  background:rgba(255,255,255,.04);
}
.btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); }

/* form */
#contact{ position:relative; z-index:10; } /* 背景より前に */
label{ display:block; margin:10px 0; }
input,textarea{
  width:100%; padding:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; color:#fff; outline:none;
}
input:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgb(88 166 255 / .25); }
.hint{ color:#aaa; font-size:.9rem; margin-top:4px; }

/* footer */
footer{ padding:24px 20px; border-top:1px solid rgba(255,255,255,.12); margin-top:40px; }
.foot{ max-width:1080px; margin:0 auto; display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; color:#bdbdbd; font-size:.9rem; }

/* small tweaks */
@media (max-width:768px){
  .hero-text h1{ font-size:clamp(24px,6vw,34px); }
  .hero-text h2{ font-size:clamp(14px,3.8vw,18px); }
}

/* ヘッダーSNS */
.site-header { position: sticky; /* 既存 */ }
.sns-nav { margin-left: auto; display:flex; align-items:center; gap:12px; }
.sns-nav a {
  display:flex; align-items:center; gap:8px;
  color:#bfc7d6; text-decoration:none; opacity:.9;
}
.sns-nav a:hover { color: var(--accent); opacity:1; }
.sns-nav .sns-label { display:none; font-size:.95rem; }

/* スマホではラベル非表示、PC幅で表示してもOK */
@media (min-width: 1024px){
  .sns-nav .sns-label { display:inline; }
}

/* フッターのSNSテキスト */
.foot .sns-text { color:#bfc7d6; text-decoration:none; }
.foot .sns-text:hover { color: var(--accent); }

/* フッターSNSアイコン */
.foot .sns-icon {
  display:inline-flex; align-items:center; justify-content:center;
  color:#bfc7d6; text-decoration:none; opacity:.9;
}
.foot .sns-icon:hover {
  color: var(--accent);
  opacity:1;
  transform: scale(1.1);
  transition: transform .2s ease, color .2s ease;
}

/* ===== モバイルのヘッダー整列（HTML変更なし） ===== */
@media (max-width:768px){
  .site-header{
    display:flex; align-items:center; gap:12px;
  }
  /* PCナビは既に非表示。ロゴの右側を空ける */
  .site-header .logo{ flex: 0 0 auto; }
  .site-header .gnav.pc-only{ display:none; }

  /* 右寄せ：SNSアイコン → ハンバーガー の順に並べる */
  .sns-nav{ margin-left:auto; order:1; display:flex; align-items:center; }
  #sp-menu-btn{ order:2; }

  /* タップしやすい44pxのヒットエリアに */
  .sns-nav a,
  #sp-menu-btn{
    width:44px; height:44px;
    display:grid; place-items:center;
    border-radius:10px;
  }

  /* 視覚フィードバック（うっすら背景） */
  .sns-nav a:hover,
  #sp-menu-btn:hover{
    background: rgba(255,255,255,.06);
  }

  /* アイコンサイズの微調整 */
  .sns-nav svg{ width:22px; height:22px; }

  /* ボタンはテキスト（☰）でもOK。見た目を揃える */
  #sp-menu-btn{
    font-size:22px; line-height:1; color:#fff; border:0; background:none; cursor:pointer;
  }
}

/* === Rainbow Cursor: コア === */
@media (pointer: fine) {
  .cursorfx-active { cursor: none; } /* PCでのみシステムカーソルを隠す */
}

/* === コントロールパネル === */
.cursor-controls{
  position: fixed;
  bottom: 10px; right: 10px;
  background: rgba(0,0,0,.6);
  color:#fff; border-radius: 12px;
  padding: 10px 14px; font-size: 13px;
  backdrop-filter: blur(6px);
  z-index: 999999; width: 180px;
  user-select: none; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: opacity .2s ease, transform .2s ease;
}
.cursor-controls.hidden{ opacity:0; pointer-events:none; transform:translateY(8px); }
.cursor-controls label{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:8px; }
.cursor-controls .val{ opacity:.8; font-variant-numeric: tabular-nums; }
.cursor-controls input[type="range"]{ width:100%; accent-color:#58a6ff; margin-bottom:10px; }

/* ヘッダー（タイトル＋閉じるボタン） */
.cc-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cc-title{ font-weight:600; letter-spacing:.02em; }
.cc-close{
  width:28px; height:28px; display:inline-grid; place-items:center;
  border:0; cursor:pointer; border-radius:8px;
  color:#fff; background:rgba(255,255,255,.08);
}
.cc-close:hover{ background:rgba(255,255,255,.16); }

/* 再表示ボタン（⚙） */
.cursor-toggle{
  position:fixed; bottom:12px; right:12px;
  width:40px; height:40px; border-radius:999px;
  display:none; place-items:center;
  color:#fff; background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  z-index:999999; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.cursor-toggle.show{ display:grid; }

/* スマホ最適化：大きめタップ、パネル幅を広げる */
@media (max-width: 768px){
  .cursor-controls{ left:4%; right:4%; width:auto; bottom:8px; }
  .cc-close{ width:36px; height:36px; border-radius:10px; }
  .cursor-toggle{ width:52px; height:52px; bottom:14px; right:14px; font-size:22px; }
}

/* ===== SNSサービス別カラー発光 ===== */
.sns-nav a i,
.foot .sns-icon i {
  font-size: 20px;
  transition: transform .2s ease, color .3s ease, text-shadow .3s ease;
}

/* 💚 LINE */
.sns-nav a[href*="line.me"] i,
.foot .sns-icon[href*="line.me"] i {
  color: #00c300;
}
.sns-nav a[href*="line.me"]:hover i,
.foot .sns-icon[href*="line.me"]:hover i {
  color: #00ff26;
  text-shadow: 0 0 8px rgba(0,255,38,.8);
  transform: scale(1.2);
}

/* 💜 Instagram（グラデーション擬似効果） */
.sns-nav a[href*="instagram.com"] i,
.foot .sns-icon[href*="instagram.com"] i {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sns-nav a[href*="instagram.com"]:hover i,
.foot .sns-icon[href*="instagram.com"]:hover i {
  background: linear-gradient(45deg, #ffda79, #ff4d97, #9b1fff);
  text-shadow: 0 0 10px rgba(255,150,255,.7);
  transform: scale(1.2);
}

/* 🔵 Facebook */
.sns-nav a[href*="facebook.com"] i,
.foot .sns-icon[href*="facebook.com"] i {
  color: #1877f2;
}
.sns-nav a[href*="facebook.com"]:hover i,
.foot .sns-icon[href*="facebook.com"]:hover i {
  color: #5ab4ff;
  text-shadow: 0 0 10px rgba(24,119,242,.8);
  transform: scale(1.2);
}

/* ✉️ Mail */
.sns-nav a[href^="mailto:"] i,
.foot .sns-icon[href^="mailto:"] i {
  color: #ffffff;
}
.sns-nav a[href^="mailto:"]:hover i,
.foot .sns-icon[href^="mailto:"]:hover i {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
  transform: scale(1.2);
}

/* ===== SNSサービス別カラー発光（SVG対応） ===== */
.sns-nav a svg { width:20px; height:20px; display:block; }
.sns-nav a {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px;
  color:#bfc7d6; text-decoration:none; opacity:.95;
  transition: background .2s ease;
}
.sns-nav a:hover { background: rgba(255,255,255,.06); }

/* 💚 LINE */
.sns-nav a[href*="line.me"] { color:#00c300; }
.sns-nav a[href*="line.me"]:hover {
  color:#00ff26;
  text-shadow: 0 0 8px rgba(0,255,38,.8);
}

/* 💜 Instagram（テキスト塗りグラデ） */
.sns-nav a[href*="instagram.com"] svg {
  /* SVGの塗りを currentColor にしてあるので、グラデは wrapper の疑似要素で表現 */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* Safariズレ対策のダミー */
}
.sns-nav a[href*="instagram.com"] {
  --ig1:#f09433; --ig2:#e6683c; --ig3:#dc2743; --ig4:#cc2366; --ig5:#bc1888;
  color:#fff;
  background: linear-gradient(45deg, var(--ig1), var(--ig2), var(--ig3), var(--ig4), var(--ig5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sns-nav a[href*="instagram.com"]:hover {
  background: linear-gradient(45deg, #ffda79, #ff4d97, #9b1fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,150,255,.7);
}

/* 🔵 Facebook */
.sns-nav a[href*="facebook.com"] { color:#1877f2; }
.sns-nav a[href*="facebook.com"]:hover {
  color:#5ab4ff;
  text-shadow: 0 0 10px rgba(24,119,242,.8);
}

/* ✉️ Mail（白発光） */
.sns-nav a[href^="mailto:"] { color:#ffffff; }
.sns-nav a[href^="mailto:"]:hover {
  color:#ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}

/* フッターでも同じ見た目にしたい場合は .foot 側にも同様のセレクタを追加してOK */

/* ▼SNSアイコン（SVG）共通 */
.sns-nav a { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; }
.sns-nav a:hover { background: rgba(255,255,255,.06); }
.sns-nav a svg { width:20px; height:20px; display:block; }
.sns-nav a svg path { fill: currentColor; }  /* 基本は親のcolorを使う（IGはSVG内グラデなので除外） */

/* ✉️ Mail（白→白発光） */
.sns-nav a[href^="mailto:"] { color:#ffffff; }
.sns-nav a[href^="mailto:"]:hover { color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,.9); }

/* 💚 LINE（緑→黄緑発光） */
.sns-nav a[href*="line.me"] { color:#00c300; }
.sns-nav a[href*="line.me"]:hover { color:#00ff26; text-shadow:0 0 8px rgba(0,255,38,.8); }

/* 🔵 Facebook（青→水色発光） */
.sns-nav a[href*="facebook.com"] { color:#1877f2; }
.sns-nav a[href*="facebook.com"]:hover { color:#5ab4ff; text-shadow:0 0 10px rgba(24,119,242,.8); }

/* 💜 InstagramはSVG内でグラデ塗り。ここでは発光だけ付与 */
.sns-nav a[href*="instagram.com"]:hover svg { filter: drop-shadow(0 0 6px rgba(255,150,255,.7)); }

/* ハンバーガーとSPナビが他要素に負けないように */
.site-header { z-index: 1000; }
.sp-nav { z-index: 2000; } /* 開いたとき最前面 */

/* === SNS固定ボックス（PC=右上） === */
.floating-sns{
  position: fixed;
  top: 16px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1200; /* sp-navが2000ならこれでOK / 最前面にしたいなら99999 */
  padding: 12px;
  background: rgba(13,17,23,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.floating-sns a{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  transition: transform .25s ease, background .25s ease;
  color: #bfc7d6;
}
.floating-sns a:hover{
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,255,255,0.06);
}
.floating-sns svg{
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform .25s ease, filter .25s ease;
}
.floating-sns a:hover svg{
  transform: scale(1.2);
  filter: brightness(1.5);
}

/* サービスカラー発光 */
.sns.mail { color:#fff; }
.sns.mail:hover { box-shadow:0 0 10px #fff; }

.sns.line { color:#06c755; }
.sns.line:hover { box-shadow:0 0 10px #06c755; }

.sns.ig{
  color:#fff;
  /* background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
  /* -webkit-background-clip:text; */
  -webkit-text-fill-color:transparent;
}
.sns.ig:hover { box-shadow:0 0 10px #d6249f; }

.sns.fb { color:#1877f2; }
.sns.fb:hover { box-shadow:0 0 10px #1877f2; }

/* === モバイル：下中央に横並び（親指タップしやすい） === */
@media (max-width:768px){
  .floating-sns{
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    transform: translateX(-50%) !important;

    flex-direction: row !important;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    border-radius: 30px;
  }
  .floating-sns a{
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .floating-sns svg{
    width: 26px !important;
    height: 26px !important;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
  }
}

/* ===== ヘッダー&SPメニュー修正パッチ ===== */
.sp-nav{ display:none; }                 /* PC初期は確実に非表示 */
.site-header{ z-index:1400 !important; } /* フローティングSNS(1200)より前面 */

@media (max-width:768px){
  .sp-nav{ display:flex; }               /* SP幅ではflex（CSSのopen演出を使う） */
}

/* ===== SPメニュー：open 時だけ表示する安全版 ===== */
.sp-nav { display: none; }  /* PC初期は隠す */

@media (max-width:768px){
  .sp-nav{
    position: fixed; inset: 0; z-index: 2000;
    display: none;                 /* ← 初期は出さない */
    align-items: center; justify-content: center;
    background: rgba(13,17,23,.95);
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
  }
  .sp-nav.open{
    display: flex;                 /* ← open で出す */
    opacity: 1; pointer-events: auto;
  }
}

/* 念のため */
.site-header{ z-index:1400 !important; }
.floating-sns{ z-index:1200; }

/* ===== SPメニュー：演出（フェード＋スライド＋タイピングカーソル） ===== */
@media (max-width:768px){
  .sp-nav{ will-change: opacity, transform; }

  .sp-nav ul{
    list-style:none; padding:0; margin:0; text-align:center;
  }
  .sp-nav li{
    opacity:0; transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
  }
  .sp-nav.open li{ opacity:1; transform:none; }
  .sp-nav.open li:nth-child(1){ transition-delay:.05s; }
  .sp-nav.open li:nth-child(2){ transition-delay:.10s; }
  .sp-nav.open li:nth-child(3){ transition-delay:.15s; }
  .sp-nav.open li:nth-child(4){ transition-delay:.20s; }
  .sp-nav.open li:nth-child(5){ transition-delay:.25s; }

  /* タイピング中の縦棒カーソル */
  .sp-nav a.typing::after{
    content:"|"; margin-left:3px; display:inline-block;
    animation: nav-blink 1s steps(2, jump-none) infinite;
  }
  @keyframes nav-blink{ 0%,100%{opacity:1} 50%{opacity:0} }
}

/* ===== アンカーの被り対策（sticky header用の余白） ===== */
[id]{ scroll-margin-top: 80px; }   /* ヘッダー高さに合わせて調整 */
html{ scroll-behavior: smooth; }   /* CSSで基本のスムーススクロール */

/* ==== Seq-typing for SP menu ==== */
@media (max-width:768px){
  /* デフォは非表示 */
  .sp-nav li{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
  }
  /* 既存の一括表示を無効化（後勝ち & !important） */
  .sp-nav.open li{
    opacity: 0 !important;
    transform: translateY(12px) !important;
    transition-delay: 0s !important;  /* nth-child遅延も無効化 */
  }
  /* 順番に .show が付いたものだけ表示 */
  .sp-nav.open li.show{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==== FIX: SPメニュー順次表示の最終上書き ==== */
@media (max-width:768px){
  /* 可視/不可視のベースをここで統一（!importantで後勝ち） */
  .sp-nav{ display:none !important; opacity:0; pointer-events:none; }
  .sp-nav.open{ display:flex !important; opacity:1; pointer-events:auto; }

  /* まず全liは非表示 */
  .sp-nav li{
    opacity:0 !important;
    transform:translateY(12px) !important;
    transition:opacity .45s ease, transform .45s ease !important;
  }
  /* 表示したい行だけ .show を付ける */
  .sp-nav.open li.show{
    opacity:1 !important;
    transform:none !important;
  }
}

/* 視覚的に非表示 */
.vh{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* === Header: PCビジュアル強化 ====================== */
.site-header{
  position: sticky; top: 0; z-index: 1400;
  display: grid; grid-template-columns: 1fr auto auto; /* 左:ロゴ / 中:nav / 右:SNS */
  align-items: center; gap: 18px;
  padding: 14px 24px;
  background: rgba(13,17,23,.6);
  backdrop-filter: blur(10px);
  /* 下端にごく薄いグラデ境界線 */
  border-bottom: 0;
  --line: rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 var(--line);
}
.logo{
  font-weight: 700; letter-spacing: .02em;
  font-variation-settings: "wght" 700;
  opacity: .95;
}
.logo a:hover{ color: var(--accent); }

/* 中央寄せナビ（PCのみ表示） */
.gnav.pc-only{ justify-self: center; }
.gnav ul{
  display: flex; gap: 26px; list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.gnav a{
  position: relative;
  color: #e8edf5; text-decoration: none; opacity: .9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  transition: opacity .2s ease, color .2s ease;
}
.gnav a:hover{ opacity:1; color:#fff; }

/* センター起点アンダーライン */
.gnav a::after{
  content:"";
  position:absolute; left:50%; bottom:-8px; height:2px; width:0;
  background: linear-gradient(90deg, #58a6ff, #58ffa6);
  transform: translateX(-50%);
  transition: width .28s ease;
  border-radius: 999px;
}
.gnav a:hover::after{ width: 70%; }

/* 現在セクション表示（.is-active を付与） */
.gnav a.is-active{
  color:#fff;
}
.gnav a.is-active::before{
  content:""; position:absolute; left:50%; bottom:-14px; width:6px; height:6px;
  transform: translateX(-50%);
  background: #58a6ff; border-radius: 50%; opacity:.9;
}

/* 右側SNS：整列＆発光は控えめに */
.sns-nav.pc-only{ display:flex; gap:10px; align-items:center; justify-self:end; }
.sns-nav a{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; color:#bfc7d6; text-decoration:none; opacity:.95;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.sns-nav a:hover{
  background: rgba(255,255,255,.06); transform: translateY(-1px);
  color:#fff;
}
.sns-nav svg{ width:20px; height:20px; display:block; }

/* スクロールでヘッダーを少し“締める” */
.site-header.is-compact{
  padding: 8px 24px;
  box-shadow:
    inset 0 -1px 0 var(--line),
    0 8px 24px rgba(0,0,0,.28); /* 影追加 */
}

/* 1024px以上=PCのときだけ中央寄せと演出を効かせる */
@media (max-width:1023.98px){
  .site-header{ grid-template-columns: 1fr auto; }
  .gnav.pc-only{ display:none; }
}

/* アンカーずれ対策（ヘッダー高さに合わせて） */
[id]{ scroll-margin-top: 88px; }
.site-header.is-compact ~ main [id]{ scroll-margin-top: 72px; }

/* === SP: ヘッダー整列（ハンバーガー最右） === */
@media (max-width:768px){
  .site-header{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap: nowrap;           /* 折り返し防止 */
  }
  .logo{ order:1; flex:0 0 auto; }

  /* SNSの塊を右側へ押し出す */
  .sns-nav{
    order:2;
    margin-left:auto;            /* ここで右側へ寄せる */
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* ハンバーガーはSNSの更に右（最右） */
  #sp-menu-btn{
    order:3;
    margin-left:8px;
    width:44px; height:44px;     /* タップしやすいサイズ */
    display:grid; place-items:center;
    font-size:22px; line-height:1;
    color:#fff; background:none; border:0; cursor:pointer;
  }

  /* 競合対策（既存指定が強い場合） */
  .gnav.pc-only{ display:none !important; }
}

/* ===== カード：拡大＋発光エフェクト ===== */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  will-change: transform, box-shadow;
}

/* 光のオーラ層（ぼんやり青白く） */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, rgba(88,166,255,0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.card:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

/* 内部テキストを浮き上がらせる */
.card > * {
  position: relative;
  z-index: 1;
}

/* ===== 特別演出：ARXIA Design カードだけ強調 ===== */
.card strong:contains("ARXIA Design") {
  /* 対応ブラウザ限定（Chrome/Safari） */
}

/* 属性セレクタ対応（より確実） */
.card-header strong {
  position: relative;
}

/* "ARXIA Design" を含む strong テキストを検出して親 .card に発光 */
.card-header strong:has-text("ARXIA Design"),
.card-header strong:has(> span:contains("ARXIA Design")) {
  /* このセレクタは一部環境で未対応のため、以下を推奨 */
}

/* ✅ 確実に動作する方法（HTML構造に合わせたクラス指定） */
.card.arxia {
  position: relative;
}
.card.arxia::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, rgba(88,166,255,0.45), rgba(255,255,255,0.12) 60%, transparent 85%);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.card.arxia:hover {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 12px 36px rgba(88,166,255,0.45);
}
.card.arxia:hover::before {
  opacity: 1;
  transform: scale(1.25);
}
.card.arxia > * {
  position: relative;
  z-index: 1;
}

/* ===== Mobile: タップ波紋＆呼吸発光 ===== */
@media (hover: none) and (pointer: coarse) {
  .card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    /* 波紋のカスタムプロパティ（JSで更新） */
    --ripple-x: 50%;
    --ripple-y: 50%;
    --ripple-s: .2;
    --ripple-a: 0;
  }

  /* タップ波紋（radial-gradient） */
  .card::after {
    content: "";
    position: absolute;
    left: var(--ripple-x);
    top:  var(--ripple-y);
    transform: translate(-50%, -50%) scale(var(--ripple-s));
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle,
      rgba(88,166,255, var(--ripple-a)) 0%,
      rgba(88,166,255, 0) 65%);
    opacity: var(--ripple-a);
    pointer-events: none;
    transition: transform .6s ease, opacity .6s ease;
    z-index: 0;
  }
  .card.rippling::after {
    --ripple-a: .35;   /* 明るさ */
    --ripple-s: 1;     /* 拡がり */
    opacity: 0;        /* 拡がりながら消える */
  }

  /* タップ中の軽い縮小で“押した感” */
  .card:active {
    transform: scale(.985);
  }

  /* ビューポート内で淡く呼吸する発光（.touch-glow付与時） */
  @keyframes breathe {
    0%   { box-shadow: 0 0 0 rgba(88,166,255,0.0); }
    50%  { box-shadow: 0 0 28px rgba(88,166,255,0.18); }
    100% { box-shadow: 0 0 0 rgba(88,166,255,0.0); }
  }
  .card.touch-glow {
    animation: breathe 2.6s ease-in-out infinite;
  }

  /* ARXIAだけ少し強めに（Launch感） */
  .card.arxia.touch-glow {
    animation: breathe-strong 2.8s ease-in-out infinite;
  }
  @keyframes breathe-strong {
    0%   { box-shadow: 0 0 0 rgba(88,166,255,0.0); }
    50%  { box-shadow:
            0 0 36px rgba(88,166,255,0.28),
            0 0 80px rgba(88,166,255,0.12); }
    100% { box-shadow: 0 0 0 rgba(88,166,255,0.0); }
  }
}

/* 動きを減らす設定の尊重（全体の既存方針に合わせる） */
@media (prefers-reduced-motion: reduce) {
  .card.touch-glow,
  .card.arxia.touch-glow { animation: none !important; }
}

/* ==== Contactセクション：セレクトの見た目をサイト調に統一 ==== */
#contact select,
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="url"],
#contact textarea{
  background:#0e141c;
  color:#e9f0f6;
  border:1px solid #2a3947;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  line-height:1.4;
  outline: none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* セレクトの“ネイティブ矢印”を消して、カスタム矢印を右側に */
#contact select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:44px; /* 矢印ぶんの余白 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233ccfff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
}

/* hover / focus の控えめなグロー（既存のアクセント #3ccfff を踏襲） */
#contact select:hover,
#contact input:hover,
#contact textarea:hover{
  border-color:#355b74;
}
#contact select:focus-visible,
#contact input:focus-visible,
#contact textarea:focus-visible{
  border-color:#3ccfff;
  box-shadow:0 0 0 3px rgba(60,207,255,.22);
}

/* 無効やエラー時（任意）：色を落として違和感を出さない */
#contact select:disabled{
  opacity:.65; cursor:not-allowed;
}
#contact [aria-invalid="true"],
#contact :invalid{
  border-color:#d66e6e;
  box-shadow:0 0 0 3px rgba(214,110,110,.15);
}

/* セレクトのドロップダウン背景（Firefoxなど） */
#contact select option{
  background:#0e141c;
  color:#e9f0f6;
}

/* プレースホルダーのコントラストを少し下げる */
#contact input::placeholder,
#contact textarea::placeholder{
  color:#8aa0b3;
}

/* 余白の微調整（フォーム全体の行間を少し詰めてスマートに） */
#contact label{
  display:block;
  margin:0 0 14px;
}
#contact .hint{ color:#9fb3c8; }

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  #contact select,
  #contact input,
  #contact textarea{ transition:none; }
}

/* ===== CTA Band ===== */
.cta-band{
  margin-block: 28px 18px;
  padding: 18px 20px;
  border:1px solid #2a3947;
  border-radius:14px;
  background:linear-gradient(180deg,#0e141c 0%, #0b1118 100%);
}
.cta-band__inner{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cta-band__copy{ margin:0; font-size:clamp(16px,2.4vw,18px); color:#e9f0f6 }
.cta-band__copy strong{ color:#3ccfff; font-weight:700 }
.cta-band__actions{ display:flex; gap:10px; flex-wrap:wrap }
.btn.btn--ghost{
  background:transparent; border:1px solid #355b74;
}
.cta-band__note{
  margin:8px 0 0; color:#9fb3c8; font-size:13px
}

/* ===== Steps (3STEP) ===== */
.steps{ margin-block: 40px }
.steps__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:14px 0 0; list-style:none;
}
.step-card{
  border:1px solid #2a3947; border-radius:14px; padding:16px; background:#0e141c;
  display:flex; flex-direction:column; gap:8px; min-height: 100%;
}
.step-card__icon{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; color:#0b1118; background:#3ccfff;
  box-shadow:0 0 18px rgba(60,207,255,.25);
}
.step-card__title{ margin:0; font-size:18px; color:#e9f0f6 }
.step-card__text{ margin:0; color:#b9c8d6; font-size:15px; line-height:1.7 }
.step-card__hint{ color:#9fb3c8; font-size:13px }
.btn.btn--inline{ align-self:flex-start; margin-top:4px }

/* Assure list */
.assure-list{ margin:12px 0 0; padding-left:1.2em; color:#9fb3c8; font-size:14px; line-height:1.8 }
.assure-list li{ margin:0 0 4px }

/* Responsive */
@media (max-width: 900px){
  .steps__grid{ grid-template-columns:1fr; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start }
}
@media (prefers-reduced-motion: reduce){
  .step-card__icon{ box-shadow:none }
}

/* ==== Why Me ==== */
.whyme .lede strong{ color:#3ccfff }
.whyme .whyme-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:12px; padding:0; list-style:none;
}
.why-item{
  border:1px solid #2a3947; border-radius:14px; background:#0e141c; padding:16px; min-height:100%;
}
.why-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:#11202b; color:#3ccfff; font-size:18px; margin-bottom:8px; box-shadow:inset 0 0 0 1px #2a3947;
}
.why-item h3{ margin:0 0 6px; font-size:17px; color:#e9f0f6 }
.why-item p{ margin:0; color:#b9c8d6; font-size:15px; line-height:1.7 }
@media (max-width: 900px){ .whyme .whyme-grid{ grid-template-columns:1fr; } }

/* ==== Case: Before→After ==== */
.card.case .case-body{ display:grid; gap:14px }
.case-shot{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.case-shot figure{ margin:0 }
.case-shot figcaption{ color:#9fb3c8; font-size:13px; margin:0 0 6px }
.shot-box{
  height:160px; border-radius:12px; border:1px solid #2a3947; background:
    linear-gradient(135deg, rgba(60,207,255,.16), rgba(60,207,255,0) 60%),
    radial-gradient(circle at 30% 20%, #0f1620, #0c131b 60%, #0b1118 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.shot-box.dim{ filter:saturate(.65) contrast(.9) opacity(.8) }
.case-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 0 }
.case-metrics dt{ color:#9fb3c8; font-size:13px }
.case-metrics dd{ margin:0; color:#e9f0f6; font-size:15px }
.case-note{ color:#9fb3c8; font-size:13px; margin:2px 0 0 }
@media (max-width: 900px){
  .case-shot{ grid-template-columns:1fr }
  .case-metrics{ grid-template-columns:1fr }
}

/* ==== Trust Badges ==== */
.trust-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; list-style:none; margin-top:8px }
.trust-item{ border:1px solid #2a3947; border-radius:12px; background:#0e141c; padding:12px; color:#b9c8d6; font-size:14px; display:flex; align-items:center; gap:8px }
.t-ico{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#11202b; color:#3ccfff; box-shadow:inset 0 0 0 1px #2a3947 }
@media (max-width: 900px){ .trust-grid{ grid-template-columns:1fr 1fr } }

/* ===== Price v2 ===== */
.price--v2 .price-card{ position:relative; }
.price-card--rec{ outline:2px solid rgba(60,207,255,.25); box-shadow:0 0 24px rgba(60,207,255,.12); }
.price--v2 .list{ margin:0 0 10px; padding-left:1.1em; color:#b9c8d6; line-height:1.8; font-size:15px }
.compare{ margin-top:16px; border:1px solid #2a3947; border-radius:12px; padding:10px; background:#0e141c }
.compare-row{ display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:8px; padding:6px 0; border-bottom:1px dashed #233040 }
.compare-row:last-child{ border-bottom:none }
.compare-row span{ color:#b9c8d6; font-size:14px }
.compare-row span:first-child{ color:#e9f0f6 }

/* ===== Estimator ===== */
.estimate{ margin-top:20px; border:1px solid #2a3947; border-radius:14px; background:#0e141c; padding:16px }
.estimate-title{ margin:0 0 10px; font-size:18px; color:#e9f0f6 }
.est-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.estimate-form label{ display:flex; flex-direction:column; gap:6px; color:#e9f0f6; font-size:14px }
.estimate-form select,
.estimate-form input[type="number"]{
  background:#0e141c; color:#e9f0f6; border:1px solid #2a3947; border-radius:10px; padding:10px 12px;
  -webkit-appearance:none; appearance:none;
}
.est-total{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.est-price span{ color:#9fb3c8; font-size:13px }
.est-price strong{ font-size:22px; letter-spacing:.02em }
@media (max-width: 980px){
  .est-grid{ grid-template-columns:1fr; }
}

/* ===== FAQ ===== */
.faq details{ border:1px solid #2a3947; border-radius:12px; background:#0e141c; padding:10px 12px; margin:8px 0 }
.faq summary{ cursor:pointer; list-style:none; color:#e9f0f6; font-weight:600 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:after{ content:"+"; float:right; color:#3ccfff }
.faq details[open] summary:after{ content:"−" }
.faq .faq-a{ color:#b9c8d6; font-size:15px; line-height:1.8; padding-top:6px; border-top:1px dashed #233040; margin-top:8px }

/* micro */
.btn.btn--ghost{ background:transparent; border:1px solid #355b74; }

/* ==== News slider ==== */
.news-slider{ position:relative; }
.news-viewport{ overflow:auto; scroll-snap-type:x mandatory; }
.news-list{
  display:flex; gap:clamp(16px,2.2vw,24px);
  padding:6px 4px 10px; margin:0;
  list-style:none; scroll-padding:0 12px;
}
.news-list li{
  min-width: clamp(280px, 42vw, 520px); /* PCで2枚弱見える幅 */
  flex:0 0 auto; scroll-snap-align:start;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; /* 角丸不要なら 0 に */
  padding:16px;
}

/* 矢印ボタン（PCのみ表示） */
.news-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.25);
  color:#fff; font-size:24px; line-height:42px; text-align:center;
  cursor:pointer; backdrop-filter: blur(6px);
  display:none; /* Mobile非表示 */
}
.news-prev{ left:-8px; }
.news-next{ right:-8px; }
@media (min-width: 960px){ .news-nav{ display:block; } }
.news-nav:hover{ background:rgba(0,0,0,.4); }