/* ============================================================
   Penguin-LAB 公式サイト 2026-10 リデザイン「宇宙」トンマナ（共通部分）
   参考：住友金属鉱山「絶滅危惧野菜を救え」（https://endangeredveggies.smm.co.jp/）
   ・暗い宇宙の地に、実物のモチーフ（写真）が浮かぶ。スクロールで粒子に崩れて形を変える
   ・読ませる面はクリーム色。差し色はおじペンの眉の黄緑1色だけ
   ・見出しは太いゴシックを字間広めで。英字ラベルは Outfit
   下層ページでは site.css の後に読む（site.css のクラスを上書きする）。トップは単独で読む
   ============================================================ */
:root{
  --sp-bg:#0C0F17;      /* 宇宙の地 */
  --sp-bg2:#141925;     /* 宇宙の地（少し明るい面） */
  --sp-cream:#F2EFE7;   /* 読ませる面 */
  --sp-cream2:#E6E1D3;  /* 読ませる面の罫・沈んだ面 */
  --sp-ink:#15171D;     /* クリーム面の文字 */
  --sp-mute:#5E626D;    /* クリーム面の補助文字 */
  --sp-line:rgba(21,23,29,.14);
  --sp-w:#fff;
  --sp-wm:rgba(255,255,255,.68);   /* 宇宙面の補助文字 */
  --sp-wl:rgba(255,255,255,.18);   /* 宇宙面の罫 */
  --sp-acc:#D4E23F;     /* 差し色：おじペンの眉の黄緑 */
  --sp-acc-ink:#15171D;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en:"Outfit","Noto Sans JP",sans-serif;
  --hd-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.sp{background:var(--sp-bg);color:var(--sp-w);font-family:var(--jp);font-size:15px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:clip}
.sp img{max-width:100%;height:auto;display:block}
.sp a{color:inherit;text-decoration:none}
.sp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sp .en{font-family:var(--en);letter-spacing:.08em}
.sp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp :focus-visible{outline:2px solid var(--sp-acc);outline-offset:3px}

/* ---------- ヘッダー：宇宙の上では白、クリーム面の上では墨（data-mode を JS で切り替え） ---------- */
.sp .hd{position:fixed;inset:0 0 auto 0;height:var(--hd-h);z-index:50;display:flex;align-items:center;gap:20px;padding:0 16px 0 18px;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--sp-w);transition:color .35s,background .35s}
.sp .hd::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(to bottom,rgba(12,15,23,.82),rgba(12,15,23,0))}
.sp .hd.scrolled::before{opacity:1}
.sp .hd[data-mode="light"]{color:var(--sp-ink)}
.sp .hd[data-mode="light"]::before{background:linear-gradient(to bottom,rgba(242,239,231,.92),rgba(242,239,231,0))}
.sp .hd-h1{margin:0;font-size:0;line-height:0}
.sp .hd-logo img{height:44px;width:auto;filter:brightness(0) invert(1);transition:filter .35s}
.sp .hd[data-mode="light"] .hd-logo img{filter:none}
.sp .hd-nav{display:none;gap:26px;margin:0 auto;font-size:12px;font-weight:500;letter-spacing:.08em}
.sp .hd-nav a{position:relative;padding:6px 0;opacity:.88}
.sp .hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;border-radius:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sp .hd-nav a:hover{opacity:1}
.sp .hd-nav a:hover::after,.sp .hd-nav a[aria-current]::after{transform:scaleX(1)}
.sp .hd-nav a[aria-current]{opacity:1;font-weight:700}
/* 右上の丸いボタン（参考サイトの「パートナーになる」の位置）。PCではナビの同じ項目を隠す */
.sp .hd-cta{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:12px;height:38px;padding:0 16px 0 18px;border:1px solid currentColor;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.sp .hd-cta::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sp-acc);box-shadow:0 0 0 3px rgba(212,226,63,.22)}
.sp .hd-cta:hover{background:var(--sp-acc);color:var(--sp-acc-ink);border-color:var(--sp-acc)}
.sp .hd-cta:hover::after{background:var(--sp-acc-ink);box-shadow:none}
.sp .hd-menu{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:999px;background:var(--sp-acc);color:var(--sp-acc-ink);
  font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.16em}
.sp .hd-menu i{width:14px;height:8px;position:relative;display:block}
.sp .hd-menu i::before,.sp .hd-menu i::after{content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:0;background:var(--sp-acc-ink);transition:.3s}
.sp .hd-menu i::before{top:0}.sp .hd-menu i::after{bottom:0}
body.sp.menu-open .hd-menu i::before{top:3px;transform:rotate(45deg)}
body.sp.menu-open .hd-menu i::after{bottom:3px;transform:rotate(-45deg)}
@media(min-width:1000px){
  .sp .hd{padding:0 28px 0 34px}
  .sp .hd-nav{display:flex}
  .sp .hd-nav{margin-right:0}
  .sp .hd-menu{display:none}
}
@media(max-width:999px){.sp .hd-menu{margin-left:auto}}

/* ---------- 全画面メニュー（宇宙の面） ---------- */
.sp .menu{position:fixed;inset:0;z-index:45;background:rgba(12,15,23,.97);color:var(--sp-w);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hd-h) + 20px) 28px 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow:hidden}
.sp .menu::before,.sp .menu::after{display:none}
body.sp.menu-open .menu{opacity:1;visibility:visible}
body.sp.menu-open .hd{color:var(--sp-w)}
body.sp.menu-open .hd .hd-logo img{filter:brightness(0) invert(1)}
.sp .menu ul{list-style:none;display:grid;gap:4px}
.sp .menu li a{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--sp-wl);font-size:20px;font-weight:700;letter-spacing:.1em;transition:.25s}
.sp .menu li a::before{content:"";width:7px;height:7px;background:var(--sp-acc);flex:none}
.sp .menu li a:hover{color:var(--sp-acc);padding-left:6px}
.sp .menu li.sub a{font-size:15px;padding:10px 0 12px 22px}
.sp .menu li.sub a::before{width:10px;height:1px}
.sp .menu .menu-foot{margin-top:30px;font-size:11px;color:var(--sp-wm);letter-spacing:.1em}

/* ---------- 左下のメスシリンダー（スクロール位置で液が満ちる）。PCのみ ---------- */
.sp-scale{position:fixed;left:22px;bottom:30px;width:12px;height:min(34vh,300px);z-index:30;pointer-events:none;display:none;color:var(--sp-w);transition:color .35s;
  border:1px solid currentColor;border-top:0;border-radius:0 0 6px 6px;opacity:.75}
.sp-scale.light{color:var(--sp-ink)}
/* 口の縁と、右の目盛り（大きい目盛り4つ・小さい目盛り） */
.sp-scale::before{content:"";position:absolute;left:-4px;right:-4px;top:0;height:1px;background:currentColor}
.sp-scale::after{content:"";position:absolute;left:calc(100% + 3px);top:8%;bottom:6px;width:7px;
  background:repeating-linear-gradient(to top,currentColor 0 1px,transparent 1px 25%) left/7px 100% no-repeat,
             repeating-linear-gradient(to top,currentColor 0 1px,transparent 1px 5%) left/4px 100% no-repeat;opacity:.7}
.sp-scale i{position:absolute;left:2px;right:2px;bottom:2px;height:calc(var(--p,0) * (100% - 12px));border-radius:0 0 4px 4px;
  background:linear-gradient(to top,rgba(212,226,63,.95),rgba(212,226,63,.7));box-shadow:0 0 10px rgba(212,226,63,.45);transition:height .15s linear}
.sp-scale i::before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;border-radius:50%;background:#EEF59A}
@media(min-width:1000px){.sp-scale{display:block}}

/* ---------- 丸いボタン（差し色） ---------- */
.sp .pill{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:0 22px 0 26px;border-radius:999px;
  background:var(--sp-acc);color:var(--sp-acc-ink);font-size:14px;font-weight:700;letter-spacing:.08em;transition:transform .3s,box-shadow .3s}
.sp .pill::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);flex:none}
.sp .pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,226,63,.25)}
.sp .pill.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.sp .pill.line::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sp-acc);order:2;margin-left:auto}
.sp .pill.line::after{order:3}
.sp .pill.line:hover{background:var(--sp-acc);color:var(--sp-acc-ink);box-shadow:none}

/* ---------- 英字の小ラベル＋見出し ---------- */
.sp .kicker{display:flex;align-items:center;gap:10px;font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.16em}
.sp .kicker::before{content:"";width:7px;height:7px;background:var(--sp-acc);flex:none}
.sp .ttl{font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.55;letter-spacing:.14em}

/* ---------- フッター（宇宙の面・小さく） ---------- */
.sp .ft{position:relative;overflow:hidden;background:var(--sp-bg);color:var(--sp-w);padding:64px 20px 28px;-webkit-mask:none;mask:none}
.sp .ft::after{display:none}
.sp .ft-in{max-width:1180px;margin:0 auto;display:grid;gap:32px;position:relative;z-index:1}
.sp .ft-logo img{height:52px;width:auto;filter:brightness(0) invert(1)}
.sp .ft-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;font-size:12px;font-weight:500;letter-spacing:.08em}
.sp .ft-nav a{display:flex;align-items:center;gap:10px;opacity:.85}
.sp .ft-nav a::before{content:"";width:5px;height:5px;background:var(--sp-acc);flex:none}
.sp .ft-nav a:hover{opacity:1;color:var(--sp-acc)}
.sp .ft-copy{font-family:var(--en);font-size:10px;letter-spacing:.14em;color:var(--sp-wm);border-top:1px solid var(--sp-wl);padding-top:18px}
@media(min-width:900px){.sp .ft{padding:88px 48px 32px}.sp .ft-in{grid-template-columns:1fr 2fr}.sp .ft-nav{grid-template-columns:repeat(3,1fr)}.sp .ft-copy{grid-column:1/-1}}

/* ---------- 出てくるときの動き ---------- */
.sp .rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.sp .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.sp .rv{opacity:1;transform:none;transition:none}}