/* 自動生成: reskin.py（site.css の共通パーツ + pages-overrides.css） */
/* ==========================================================================
   Golph.club Suminoe — リデザイン共通スタイル（Apple JP トーン）
   ブランド色は現行を踏襲: navy #1a1a3e / teal #47d6d4 / orange #e85d2c
   ========================================================================== */
:root{
  --navy:#1a1a3e; --navy-2:#23234f; --navy-deep:#101030;
  --teal:#47d6d4; --teal-2:#2ab8b6; --teal-ink:#118f8d;
  --orange:#e85d2c;
  --bg:#ffffff; --bg-2:#f5f5f7; --bg-3:#ededf1;
  --ink:#1a1a3e; --ink-2:rgba(26,26,62,.66); --ink-3:rgba(26,26,62,.46); --line:rgba(26,26,62,.10);
  --on-dark:#f5f5f7; --on-dark-2:rgba(245,245,247,.68); --on-dark-3:rgba(245,245,247,.42); --line-dark:rgba(255,255,255,.12);
  --r:18px; --r-lg:28px; --pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro JP","SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:64px; --gutter:clamp(20px,5vw,80px); --max:1280px; --max-text:760px;
  --shadow:0 20px 60px -24px rgba(26,26,62,.35);
}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 26px;border-radius:var(--pill);font-weight:700;font-size:1rem;line-height:1;white-space:nowrap;transition:transform .35s var(--ease),background .25s,color .25s,box-shadow .35s var(--ease),border-color .25s;will-change:transform}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:var(--navy);box-shadow:0 10px 30px -10px rgba(71,214,212,.7)}
.btn-primary:hover{background:#5ee3e1;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(71,214,212,.85)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:rgba(26,26,62,.06);transform:translateY(-2px)}
.btn-line{background:#06c755;color:#fff;box-shadow:0 10px 30px -10px rgba(6,199,85,.6)}
.btn-line:hover{background:#05b34c;transform:translateY(-2px)}
.btn-lg{min-height:56px;padding:0 34px;font-size:1.08rem}
.btn i{font-size:1.15em;line-height:0}
.link{display:inline-flex;align-items:center;gap:.3em;color:var(--teal-ink);font-weight:600}
.link i{transition:transform .3s var(--ease)}
.link:hover i{transform:translateX(4px)}
.dark .link{color:var(--teal)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);transition:background .4s,color .4s,box-shadow .4s;color:#fff;background:rgba(26,26,62,.35);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav.solid{background:rgba(255,255,255,.78);color:var(--navy);box-shadow:0 1px 0 rgba(26,26,62,.08)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100% - 2*var(--gutter),1240px);margin-inline:auto}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo img{height:40px;width:auto;transition:filter .4s}
.nav-logo .sub{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85;border-left:1px solid currentColor;padding-left:12px;line-height:1.3}
.nav-logo .sub small{display:block;font-size:.62rem;letter-spacing:.1em;opacity:.8;text-transform:none}
.nav:not(.solid) .nav-logo img{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);font-size:13px;font-weight:500;letter-spacing:.01em}
.nav-links a{opacity:.82;transition:opacity .2s;white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav-cta{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:var(--pill);background:var(--teal);color:var(--navy);font-size:12.5px;font-weight:700;white-space:nowrap;transition:transform .3s var(--ease),background .2s}
.nav-cta:hover{background:#5ee3e1;transform:translateY(-1px)}
.nav-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;font-size:22px}
.nav-menu{display:none}
@media (max-width:1023px){
  :root{--nav-h:60px}
  .nav-logo img{height:34px}
  .nav-logo .sub{display:none}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:inline-flex}
  .nav-menu{display:block;position:fixed;inset:var(--nav-h) 0 0;z-index:99;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:24px var(--gutter) 40px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease);overflow:auto}
  .nav-menu.open{opacity:1;transform:none;pointer-events:auto}
  .nav-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.25rem;font-weight:600;color:var(--navy)}
  .nav-menu a.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 26px;border-bottom:0;min-height:54px;font-size:1.05rem;font-weight:700;margin-top:22px;width:100%}
  .nav-menu a.btn+a.btn{margin-top:12px}
  .nav-menu a.btn-outline{color:var(--navy)}
  body.menu-open{overflow:hidden}
}

/* ---------- フッター ---------- */
.footer{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--navy-deep);color:var(--on-dark-2);padding:clamp(48px,7vw,88px) 0 0}
.footer-bg{position:absolute;inset:0;z-index:-1}
.footer-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:.85}
.footer-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy-deep) 30%,rgba(16,16,48,.8) 58%,rgba(16,16,48,.35) 82%,rgba(16,16,48,.15) 100%)}
.footer-mark{width:min(100% - 2*var(--gutter),var(--max));margin:clamp(36px,5vw,72px) auto 0;aspect-ratio:1359/425;overflow:hidden;overflow:clip;display:flex;justify-content:center;align-items:flex-start}
.footer-mark{position:relative}
.footer-mark img{width:100%;height:auto;filter:brightness(0) invert(1);opacity:.5;will-change:transform}
.footer-mark::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.95) 50%,rgba(71,214,212,.9) 54%,transparent 68%) no-repeat;background-size:60% 100%;background-position:-80% 0;-webkit-mask:url(/img/ext/logo.png) center top/100% auto no-repeat;mask:url(/img/ext/logo.png) center top/100% auto no-repeat;opacity:0}
@media (max-width:1023px){.footer-mark{padding-bottom:0}.footer{padding-bottom:0}}
.footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(28px,4vw,56px);padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.footer img.logo{height:44px;width:auto;filter:brightness(0) invert(1)}
.footer .brand-name{margin-top:14px;font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:.02em}
.footer .brand-name small{display:block;font-size:.82rem;font-weight:600;color:var(--teal);letter-spacing:.06em;margin-top:2px}
.footer .desc{margin-top:18px;font-size:.9rem;line-height:1.75;color:var(--on-dark-3);max-width:34ch}
.footer .sns{display:inline-flex;margin-top:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);align-items:center;justify-content:center;color:#fff;transition:background .25s}
.footer .sns:hover{background:var(--teal);color:var(--navy);border-color:transparent}
.footer h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:14px;font-weight:700}
.footer ul li{margin-bottom:10px;font-size:.93rem}
.footer ul a:hover{color:var(--teal)}
.footer .ctas{display:flex;flex-direction:column;gap:10px;min-width:220px}
.footer .cloud{display:flex;flex-wrap:wrap;gap:8px 18px;padding:28px 0;border-bottom:1px solid var(--line-dark);font-size:.83rem;color:var(--on-dark-3)}
.footer .cloud a:hover{color:var(--teal)}
.footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:.8rem;color:var(--on-dark-3)}
.footer .legal a:hover{color:#fff}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer .ctas{grid-column:1/-1}}
@media (max-width:640px){.footer-top{grid-template-columns:1fr}}
.footer-note{margin-top:18px;font-size:.78rem;color:var(--on-dark-3)}

/* モバイル固定 CTA（現行踏襲） */
.sp-cta{display:none}
@media (max-width:1023px){
  .sp-cta{position:fixed;inset:auto 0 0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .sp-cta a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;font-weight:800;font-size:1rem}
  .sp-cta .a{background:var(--teal);color:var(--navy)}
  .sp-cta .b{background:var(--navy);color:#fff}
  body{padding-bottom:56px}
}


/* ==========================================================================
   下層ページ用の上書き（LP・learn・各案内ページ = Tailwind / マニュアル下層 = manual-v2.css）
   原稿と構造はそのまま。フォント・余白・角丸・ボタン色を新デザインに寄せる
   ========================================================================== */
body.reskin{padding-top:var(--nav-h);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;background:#fff;color:var(--ink)}
body.reskin *:not(i):not([class*="ri-"]):not(kbd):not(code):not(pre){font-family:var(--font)}
body.reskin .serif,body.reskin .font-serif,body.reskin [style*="Noto Serif"]{font-family:var(--font)!important;letter-spacing:-.025em}
body.reskin h1,body.reskin h2,body.reskin h3{letter-spacing:-.02em;text-wrap:balance;word-break:auto-phrase}
body.reskin h1{letter-spacing:-.03em}
body.reskin p,body.reskin li{text-wrap:pretty}
body.reskin .nav-logo .sub small{text-transform:none;letter-spacing:.04em;max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Tailwind 系（LP・learn・apps・案内ページ） --- */
body.reskin .hero-bg{background:radial-gradient(900px 500px at 85% 0%,rgba(71,214,212,.22),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(232,93,44,.14),transparent 60%),var(--navy)}
body.reskin .hero-bg::before{display:none}
body.reskin .hero-bg h1{font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.12}
body.reskin .hero-bg p{font-size:clamp(1rem,1.5vw,1.2rem)}
body.reskin .feature-card{border-radius:var(--r);border-color:var(--line);transition:translate .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
body.reskin .feature-card:hover{translate:0 -4px;box-shadow:var(--shadow);border-color:rgba(71,214,212,.5)}
body.reskin .cta-btn{color:var(--navy);min-height:52px;font-size:1.02rem;box-shadow:0 10px 30px -10px rgba(71,214,212,.7);transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
body.reskin .cta-btn:hover{background:#5ee3e1;transform:translateY(-2px)}
body.reskin .cta-btn-line,body.reskin .cta-btn-line:hover{color:#fff}
body.reskin .cta-outline{min-height:52px;border-width:1.5px}
body.reskin .rounded-2xl{border-radius:var(--r)}
body.reskin .rounded-xl{border-radius:14px}
body.reskin .shadow-sm,body.reskin .shadow{box-shadow:0 1px 0 var(--line),0 12px 32px -22px rgba(26,26,62,.4)}
body.reskin section[class*="py-16"]{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
body.reskin .bg-\[\#fafafa\],body.reskin .bg-gray-50{background:var(--bg-2)}
body.reskin table{font-variant-numeric:tabular-nums}

/* --- マニュアル下層の本文スタイルは tools/manual.css（/css/manual.css）へ --- */
body.reskin #scrollTopBtn{background:var(--navy)!important;box-shadow:var(--shadow)!important}
@media (max-width:1023px){body.reskin #scrollTopBtn{bottom:72px!important}}

/* --- スクロール連動（PC・対応ブラウザ）: 下層ページの出現・視差・フッター。印は site.js が付ける --- */
@supports (animation-timeline: view()){
  @media (min-width:901px){
    body.reskin .sda-rise{animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% entry 200px}
    body.reskin .sda-rise[data-sda="1"]{animation-name:rvInL}
    body.reskin .sda-rise[data-sda="2"]{animation-name:rvInR}
    body.reskin .sda-kid{animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% entry 170px}
    body.reskin .sda-kid[data-sda="1"]{animation-range:entry 40px entry 210px}
    body.reskin .sda-kid[data-sda="2"]{animation-range:entry 80px entry 250px}
    body.reskin .sda-kid[data-sda="3"]{animation-range:entry 120px entry 290px}
    body.reskin .hero-bg > *{animation:heroBodyScroll linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    body.manual-sub .m-hero-media{animation:mHeroPara linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    body.manual-sub .m-hero-body{animation:heroBodyScroll linear both;animation-timeline:scroll(root);animation-range:0 60vh}
    .footer-bg img{animation:footerBg linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .footer-top,.footer .cloud,.footer .legal{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .footer-mark img{animation:markUp linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .footer-mark::after{animation:markShine linear both;animation-timeline:view();animation-range:entry 20% entry 100%}
    .sda-off{animation:none!important}
  }
}
@keyframes rvIn{from{opacity:0;transform:translateY(56px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rvInL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes rvInR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
@keyframes heroBodyScroll{to{transform:translateY(-14vh) scale(.94);opacity:0;filter:blur(6px)}}
@keyframes mHeroPara{to{transform:translateY(22vh) scale(1.12);filter:brightness(.45) blur(8px)}}
@keyframes footerBg{from{transform:scale(1.25) translateY(-6%);filter:brightness(.5)}to{transform:none;filter:none}}
@keyframes markUp{from{transform:translateY(60%) scale(1.3);opacity:0;filter:brightness(0) invert(1)}55%{opacity:.5}85%{transform:translateY(-3%) scale(.99)}to{transform:none;opacity:.5;filter:brightness(0) invert(1)}}
@keyframes markShine{from{opacity:1;background-position:-80% 0}to{opacity:1;background-position:190% 0}}
@media (prefers-reduced-motion:reduce){
  body.reskin .sda-rise,body.reskin .sda-kid,body.reskin .hero-bg > *,body.manual-sub .m-hero-media,body.manual-sub .m-hero-body,.footer-bg img,.footer-top,.footer .cloud,.footer .legal,.footer-mark img{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .footer-mark img{filter:brightness(0) invert(1)!important;opacity:.5!important}
  .footer-mark::after{display:none}
}

/* --- ニュース一覧（本番から取り込んだ /news/。固定ヘッダー分の余白は新ナビに合わせる） --- */
body.reskin main.pt-24{padding-top:1.5rem}
body.reskin main.pt-24 > .bg-\[\#1a1a3e\]{border-radius:0 0 var(--r-lg) var(--r-lg)}