/* =====================================================================
   スグやるゾウ ホームページ  css/style.css
   見た目（色・文字・余白・動き）。index.html から読み込みます。
   ===================================================================== */

/* ===== 色・フォント（ここを変えると全体が変わります） ===== */
:root{
  --sy-mint:#8DCDB0; --sy-peach:#F4D9C6; --sy-blue:#C9D8E3;
  --sy-ink:#2B2D2F; --sy-paper:#FAFAF6; --sy-muted:#55595C; --sy-line:#C8CDCB;
  --sy-en:'Outfit', system-ui, sans-serif;
  /* Bootstrap の基本設定を上書き */
  --bs-body-font-family:'Zen Kaku Gothic New', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  --bs-body-color:var(--sy-ink); --bs-body-bg:var(--sy-paper); --bs-body-font-weight:500;
  --bs-link-color-rgb:43,45,47; --bs-link-hover-color-rgb:31,74,60; --bs-border-color:var(--sy-line);
}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{-webkit-font-smoothing:antialiased;line-height:1.8}
.en{font-family:var(--sy-en)}
.fw-black{font-weight:900!important}
.text-muted-sy{color:var(--sy-muted)!important}
.bg-mint{background:var(--sy-mint)!important}.bg-peach{background:var(--sy-peach)!important}
.bg-blue{background:var(--sy-blue)!important}.bg-ink{background:var(--sy-ink)!important;color:var(--sy-paper)}
.bd-ink{border:2px solid var(--sy-ink)!important}
.rounded-xl{border-radius:24px!important}
img{max-width:100%}

/* ボタン（Bootstrapの .btn をブランド色に） */
.btn{--bs-btn-font-weight:900;white-space:nowrap;border-radius:40px;border-width:2px;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--sy-ink)}
.btn-ink{--bs-btn-color:var(--sy-paper);--bs-btn-bg:var(--sy-ink);--bs-btn-border-color:var(--sy-ink);--bs-btn-hover-color:var(--sy-paper);--bs-btn-hover-bg:#1F2123;--bs-btn-hover-border-color:#1F2123;--bs-btn-active-bg:#1F2123;--bs-btn-active-color:var(--sy-paper)}
.btn-paper{--bs-btn-color:var(--sy-ink);--bs-btn-bg:var(--sy-paper);--bs-btn-border-color:var(--sy-ink);--bs-btn-hover-color:var(--sy-ink);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:var(--sy-ink);--bs-btn-active-bg:#fff}
.btn-main{font-size:1.06rem;padding:1rem 1.8rem;box-shadow:0 5px 0 #1A1B1C}
.btn-main:hover{box-shadow:5px 9px 0 #1A1B1C}
.pr{font-size:11px;font-weight:900;border:1.5px solid currentColor;border-radius:4px;padding:0 6px;line-height:1.5}

/* ヘッダー・ジャンル帯 */
.site-header{background:var(--sy-paper);border-bottom:2px solid var(--sy-ink)}
.brand-logo{width:40px;height:40px;border-radius:50%;border:2px solid var(--sy-ink);object-fit:cover}
.brand-name{font-size:clamp(16px,4.4vw,20px);white-space:nowrap}
.site-header .brand-link{flex:none}
.hdr-top{height:56px}
.hdr-right{position:absolute;top:0;right:12px;height:56px}
@media (min-width:992px){.hdr-right{right:24px}}
/* ヘッダー右上：プロフィール・リクエスト・メニュー（幅が狭いスマホではメニューの中に入ります） */
.hdr-link{display:none;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.hdr-link:hover{text-decoration:underline;text-underline-offset:5px}
@media (min-width:430px){.hdr-link{display:inline}}
/* 狭い画面ではメニューボタンを丸いアイコンだけにする */
.menu-btn{flex:none}
@media (max-width:575.98px){.menu-btn{width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%}.menu-btn .menu-label{display:none}}
@media (min-width:768px){.hdr-link{font-size:15px}}
.genre-bar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.genre-bar::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-block;text-decoration:none;font-weight:700;font-size:14px;padding:7px 16px;border-radius:22px;border:1.5px solid var(--sy-ink);color:var(--sy-ink);white-space:nowrap}
.chip:hover{background:#fff}
.chip.is-main{background:var(--sy-ink);color:var(--sy-paper)}
.chip.is-soon{border-style:dashed;color:var(--sy-muted);border-color:var(--sy-muted)}
.icon-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--sy-ink);background:var(--sy-paper);color:var(--sy-ink);display:inline-flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s}
.icon-btn:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--sy-ink);color:var(--sy-ink)}
.icon-btn svg{width:20px;height:20px;fill:currentColor}

/* ファーストビュー */
.hero{background:var(--sy-mint)}
.news-pill{display:flex;align-items:center;gap:8px;background:rgba(250,250,246,.78);border-radius:14px;padding:8px 14px;text-decoration:none;font-size:14px;max-width:100%}
.news-pill .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-new{flex:none;font-weight:900;font-size:11px;background:var(--sy-ink);color:var(--sy-paper);border-radius:20px;padding:1px 9px}
.catch{font-weight:900;font-size:clamp(26px,7.9vw,50px);line-height:1.4;margin:0}
.catch .nw{white-space:nowrap}
/* キャッチコピーは左の列の幅に合わせて自動で縮む（画像と重ならないように） */
.hero-text{container-type:inline-size}
@supports (font-size:1cqi){.catch{font-size:min(50px,8.8cqi)}}
.mk-w{background:linear-gradient(transparent 58%,var(--sy-paper) 58%,var(--sy-paper) 92%,transparent 92%)}
.mk-p{background:linear-gradient(transparent 58%,var(--sy-peach) 58%,var(--sy-peach) 92%,transparent 92%)}
.hero h1{font-size:clamp(14px,1.5vw,18px);font-weight:700}
.stack{position:relative;height:310px;max-width:500px;margin:0 auto}
.stack img{position:absolute;height:auto;aspect-ratio:1/1;object-fit:contain;border:2px solid var(--sy-ink);padding:4%;animation:bob 5s ease-in-out infinite}
.stack .s1{left:0;top:0;width:56%;background:var(--sy-paper);border-radius:24px;--r:-4deg}
.stack .s2{right:0;top:0;width:40%;background:var(--sy-peach);border-radius:22px;--r:5deg;animation-delay:-1.6s}
.stack .s3{left:37.5%;bottom:0;width:33%;background:var(--sy-blue);border-radius:20px;--r:-6deg;animation-delay:-3s}
.stack .label{position:absolute;left:0;bottom:6px;max-width:58%;background:var(--sy-ink);color:var(--sy-paper);border-radius:14px;padding:7px 12px;line-height:1.45}
.stack .label .fw-black{font-size:14px}
.stack .label small{font-size:12px}
.hero-label{flex:0 1 auto;min-width:0;background:var(--sy-ink);color:var(--sy-paper);border-radius:14px;padding:7px 12px;line-height:1.45}
.hero-cta .btn-main{flex-shrink:0}
.hero-label{word-break:auto-phrase;text-wrap:balance;overflow-wrap:anywhere}
/* 左の列がせまいときは、ボタンを少しコンパクトにして、ラベルが右に収まるようにする */
@container (max-width:520px){
  .hero-cta{gap:.5rem}
  .hero-cta .btn-main{font-size:.95rem;padding:.85rem 1.1rem}
  .hero-label{padding:6px 10px}
  .hero-label .fw-black{font-size:13px}
  .hero-label small{font-size:11px}
}
.hero-label .fw-black{font-size:14px}
.hero-label small{font-size:12px;color:var(--sy-mint)}
@media (min-width:992px){.stack{height:470px}}
/* スマホ・タブレット：ラベルをスタンプの下の余白に出して、重ならないようにする */
@media (max-width:991.98px){
  .stack{margin-bottom:76px;height:auto;aspect-ratio:1/.96}   /* 幅に合わせて高さを決め、上2枚と下1枚が重ならないようにする */
  .stack .label{bottom:auto;top:calc(100% + 14px);right:0;max-width:100%;border-radius:12px}
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}

/* セクション見出し */
.sec{padding-top:72px}
.eyebrow{font-family:var(--sy-en);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--sy-muted)}
h2{text-wrap:balance;word-break:auto-phrase}h3{word-break:auto-phrase}
.sec-title{font-weight:900;font-size:clamp(22px,2.6vw,34px);line-height:1.4;margin:0}

/* カード共通 */
.card-sy{border:2px solid var(--sy-ink);border-radius:24px;transition:transform .35s,box-shadow .35s}
a.card-sy{text-decoration:none;color:var(--sy-ink)}
a.card-sy:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:8px 10px 0 var(--sy-ink)}
.stamp-img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--sy-paper);border:2px solid var(--sy-ink);border-radius:18px;padding:6%}
.badge-sy{display:inline-block;font-weight:700;font-size:12px;padding:2px 10px;border-radius:20px;border:1.5px solid var(--sy-ink);background:var(--sy-paper)}
.badge-sy.dark{background:var(--sy-ink);color:var(--sy-paper)}
.note-band{background:var(--sy-ink);color:var(--sy-paper);margin-top:72px;padding:64px 0}
.note-card{background:var(--sy-paper);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--sy-ink);display:flex;flex-direction:column;height:100%;transition:transform .35s,box-shadow .35s}
.note-card:hover{transform:translateY(-6px);box-shadow:8px 10px 0 var(--sy-mint);color:var(--sy-ink)}
.note-card .thumb{aspect-ratio:1.91/1;object-fit:cover;width:100%;background:var(--sy-mint)}
.soon-card{border:2px dashed #8E9693;border-radius:20px}

/* 動き（スクロールで表示） */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* フッター */
.site-footer{background:var(--sy-ink);color:var(--sy-line);margin-top:80px}
.site-footer a{color:var(--sy-paper)}
.foot-logo{font-family:var(--sy-en);font-weight:600;font-size:clamp(40px,7vw,84px);color:var(--sy-mint);letter-spacing:.04em;line-height:1.05}
.site-footer .icon-btn{background:transparent;color:var(--sy-paper);border-color:var(--sy-paper)}
.site-footer .icon-btn:hover{box-shadow:4px 4px 0 var(--sy-mint)}