/* ====================================================================== AsobuzZ 公式サイト 共通スタイル - 全ページがこの1枚を読む。色・余白・見出し・ボタンはここだけを直せば全ページに効く。 - 重い表現（全画面の filter / backdrop-filter）は使わない。 スマホのGPUで1フレームを丸ごと持っていくため（ゲーム側で実測した知見）。 ====================================================================== */ :root{ /* ロゴの七色＝会社の色 */ --r:#c70025; --o:#ee781f; --y:#fabe00; --g:#22ac38; --b:#1bb8ce; --p:#f19ec2; --v:#915da3; /* 下地 */ --ink:#191714; --paper:#fbfaf7; --paper2:#f4f0e7; --sub:#6f675d; --line:#e6e0d5; --gold:#b8904a; --dark:#17140f; --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif; --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --disp:"Cinzel",serif; --maxw:1140px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.9; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------- ヘッダー ---------- */ header.site{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between; padding:16px 30px;transition:background .4s,box-shadow .4s} header.site.solid{background:rgba(251,250,247,.97);box-shadow:0 1px 0 var(--line)} header.site .hlogo{height:26px;opacity:0;transition:opacity .4s} header.site.solid .hlogo{opacity:1} header.site.always .hlogo{opacity:1} header.site nav{display:flex;gap:24px;font-size:13px;letter-spacing:.06em} header.site.on-dark{color:#fff} header.site.on-dark.solid{color:var(--ink)} @media(max-width:900px){header.site nav{display:none}} /* ---------- 見出し ---------- */ .eyebrow{font-family:var(--disp);letter-spacing:.3em;font-size:12px;color:var(--gold)} h2.title{font-family:var(--serif);font-weight:300;letter-spacing:.14em; font-size:clamp(22px,3.2vw,36px);margin:.4em 0 .3em} h3.sub-title{font-family:var(--serif);font-weight:300;letter-spacing:.1em;font-size:clamp(18px,2.4vw,25px);margin:.2em 0} .lead{color:var(--sub);font-size:14.5px} .center{text-align:center} section{position:relative} .pad{padding:13vh 0} .pad-s{padding:8vh 0} /* ---------- 出現アニメーション ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- ボタン ---------- */ .btn{display:inline-block;border:1px solid var(--ink);border-radius:2px;padding:11px 24px; font-size:13px;letter-spacing:.12em;transition:background .35s,color .35s} .btn:hover{background:var(--ink);color:var(--paper)} .btn.fill{background:var(--ink);color:var(--paper)} .btn.fill:hover{background:transparent;color:var(--ink)} .btn.on-dark{border-color:#fff;color:#fff} .btn.on-dark:hover{background:#fff;color:var(--dark)} /* 受付の終わった入口。ボタンの形は保ちつつ、押せないことが見て分かるようにする。 ではなく で書いてあるので、そもそも押せない。 */ .btn.is-closed{border-style:dashed;border-color:#b9b2a4;color:#8a8275;background:transparent;cursor:default; pointer-events:none;text-align:center} .btn.is-closed small{display:block;margin-top:3px;font-size:.78em;opacity:.85;font-weight:400} /* ボタンが4つ以上並ぶとき。折り返しで段がばらけないよう、等幅のます目に畳む */ .linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5em,1fr));gap:10px; max-width:46em;margin:26px auto 0} .linkgrid .btn{display:flex;align-items:center;justify-content:center;width:100%; padding:11px 12px;text-align:center;line-height:1.5} @media(max-width:420px){.linkgrid{grid-template-columns:1fr 1fr}} /* ---------- 七色の帯 ---------- */ .band{display:flex;height:6px} .band i{flex:1} /* ---------- 数字 ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:6px;overflow:hidden} @media(max-width:760px){.stats{grid-template-columns:1fr 1fr} /* 3つしかないときは3列にする。2列だと右下が1つ空いて落ち着かないため */ .stats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .stats:has(> :nth-child(3):last-child) .stat{padding:22px 6px}} .stat{background:var(--paper);padding:26px 14px;text-align:center} .stat b{display:block;font-family:var(--disp);font-size:clamp(22px,3vw,32px);color:var(--gold);line-height:1.2} .stat span{font-size:12px;color:var(--sub)} /* ---------- カード並び ---------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}} /* 写真の上に文字を載せるカード */ .photocard{position:relative;border-radius:8px;overflow:hidden;min-height:260px;display:flex; flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;isolation:isolate;transition:transform .5s} .photocard:hover{transform:translateY(-5px)} .photocard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(10,9,8,.88),rgba(10,9,8,.3) 60%,rgba(10,9,8,.12))} .photocard img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s} .photocard:hover img{transform:scale(1.05)} .photocard .k{font-family:var(--disp);font-size:12px;letter-spacing:.2em;opacity:.9} .photocard h3{margin:6px 0 4px;font-size:21px;font-weight:500;letter-spacing:.06em} .photocard p{margin:0;font-size:13.5px;opacity:.92} /* 枠線のカード */ .plaincard{border:1px solid var(--line);border-radius:6px;padding:28px;background:#fff; display:flex;flex-direction:column;gap:8px;transition:transform .5s,box-shadow .5s} .plaincard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(60,45,20,.6)} .plaincard .k{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--gold)} .plaincard h3{margin:0;font-size:19px;font-weight:500;letter-spacing:.06em} .plaincard p{margin:0;color:var(--sub);font-size:14px} /* 交互に組む紹介ブロック */ .alt{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:46px 0;border-top:1px solid var(--line)} .alt:nth-of-type(even){grid-template-columns:.95fr 1.05fr} .alt:nth-of-type(even) .thumb{order:2} @media(max-width:860px){.alt,.alt:nth-of-type(even){grid-template-columns:1fr;gap:20px}.alt:nth-of-type(even) .thumb{order:0}} .thumb{border-radius:6px;overflow:hidden;box-shadow:0 26px 50px -38px rgba(60,45,20,.9)} .thumb img{aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s} .alt:hover .thumb img{transform:scale(1.04)} /* ---------- お知らせ ---------- */ .newslist{list-style:none;margin:24px 0 0;padding:0} .newslist li{display:flex;gap:22px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:14px;transition:background .3s} .newslist li:hover{background:var(--paper2)} .newslist time{color:var(--sub);white-space:nowrap;font-size:13px} @media(max-width:620px){.newslist li{flex-direction:column;gap:4px}} /* ---------- 表 ---------- */ .table{width:100%;border-collapse:collapse;font-size:14.5px} .table th,.table td{text-align:left;padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:top} .table th{width:11em;color:var(--sub);font-weight:500} @media(max-width:620px){.table th,.table td{display:block;width:auto;border:0;padding:4px 0} .table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}} /* ---------- 沿革 ---------- */ .history{list-style:none;margin:30px 0 0;padding:0;position:relative} .history::before{content:"";position:absolute;left:7.6em;top:6px;bottom:6px;width:1px;background:var(--line)} .history li{display:grid;grid-template-columns:7.6em 1fr;gap:26px;padding:10px 0;position:relative} .history time{font-family:var(--disp);font-size:13px;color:var(--gold);padding-top:2px} .history li::before{content:"";position:absolute;left:calc(7.6em - 3px);top:14px;width:7px;height:7px;border-radius:50%; background:var(--gold)} .history p{margin:0;font-size:14px} .history small{color:var(--sub)} @media(max-width:620px){.history::before,.history li::before{display:none} .history li{grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}} /* ---------- フッター ---------- */ footer.site{background:var(--dark);color:#cfc6b6;padding:58px 0 70px;text-align:center;font-size:13px} footer.site .flogo{width:200px;margin:0 auto 20px} footer.site a{opacity:.86} footer.site a:hover{opacity:1} footer.site nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- スマホのメニュー ---------- 横幅900px以下ではヘッダーの並びが入りきらないので、 三本線のボタン＋全画面のメニューに切り替える。 ボタン・項目は指で押せる大きさ（44px以上）を確保する。 HTML側には何も足さない：site.js が header の