@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap'); /* ========================================================= COLOR / FONT SETTINGS 基本的な色と書体は、この :root 内を変更してください。 ========================================================= */ :root{ --text-main:#302936; /* 基本文字色 */ --bg-base:#f7f2ea; /* ページ全体の背景 */ --accent:#c95662; /* ボタン・ローディングなどの差し色 */ --menu-bg:#d95c66; /* PC左メニューの背景 */ --menu-panel-bg:#f8f4ee; /* 左メニュー内側の明るい面 */ --news-bg:#f7f2ea; /* NEWS */ --contact-bg:#2e1c11; /* CONTACT（濃い藤色→2026-08-21、KV「京師篇」パターン1に合わせ深い焦げ茶色に変更） */ --lavender:#875f28; /* 薄藤色のアクセント文字色（2026-08-21、KV「京師篇」パターン1に合わせ琥珀ブラウンに変更） */ --border-soft:rgba(48,41,54,.22); --pad:clamp(24px,5vw,80px); --ease-standard:cubic-bezier(.22,1,.36,1); --font-ja:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif; --font-en:'Cormorant Garamond','Times New Roman',serif; /* PC左メニューのサイズ設定：ここだけ変更すれば調整できます */ --sidebar-width:clamp(300px,21.5vw,460px); /* メニュー全体の幅。広い画面では余白分も拡張 */ --menu-font-size:clamp(18px,1.45vw,23px); /* NEWS等の文字サイズ */ --menu-number-size:clamp(11px,.85vw,14px); /* 01等の番号サイズ */ --menu-item-gap:18px; /* 番号と文字の間隔 */ } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text-main);background:var(--bg-base);font-family:var(--font-ja);line-height:1.75}img{display:block;width:100%;height:auto}a{color:inherit;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .intro-loader{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;gap:24px;background:#191919;color:#fff;transition:opacity .7s var(--ease-standard),visibility .7s}.intro-loader.is-hidden{opacity:0;visibility:hidden}.intro-loader__mark{font:800 clamp(42px,7vw,100px)/1 var(--font-en);letter-spacing:-.08em}.intro-loader__bar{width:180px;height:2px;background:#555;overflow:hidden}.intro-loader__bar span{display:block;width:100%;height:100%;background:var(--accent);transform:translateX(-100%);animation:load 1.15s var(--ease-standard) forwards}@keyframes load{to{transform:none}} .mobile-bar{display:none}.kv-layout{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);align-items:stretch;background:#d8d8d8}.site-menu{position:relative;background:var(--menu-bg);border-right:1px solid var(--text-main);min-width:0}.site-menu__inner{position:sticky;top:0;min-height:100%;padding:clamp(28px,3.4vw,56px) clamp(22px,2.6vw,42px);display:flex;flex-direction:column}.site-logo img{width:100%;max-width:180px}.site-logo__note{font:600 10px/1.5 var(--font-en);letter-spacing:.15em;margin:18px 0 clamp(36px,5vw,76px)}.site-menu__list{list-style:none;padding:0;margin:0}.site-menu__list a{position:relative;display:flex;align-items:center;gap:13px;padding:11px 0;font:700 clamp(13px,1vw,16px)/1 var(--font-en);letter-spacing:.08em}.site-menu__list a span{font-size:9px;font-weight:500;opacity:.55}.site-menu__list a:after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;background:currentColor;transition:width .45s var(--ease-standard)}.site-menu__list a:hover:after{width:100%}.site-menu__footer{margin-top:auto;padding-top:40px}.socials{display:flex;justify-content:center;gap:10px;margin-top:clamp(22px,2.8vw,40px);margin-bottom:0}.socials a{display:grid;place-items:center;width:30px;height:30px;border:1px solid;border-radius:50%;font-size:10px}.site-menu small{font-size:9px;letter-spacing:.08em}.kv-image{position:relative;overflow:hidden;min-width:0;aspect-ratio:2480/3508;background:#ccc}.kv-image picture,.kv-image picture img{width:100%;height:100%}.kv-image img{object-fit:contain;object-position:center top;transform:scale(1);animation:heroIn 1.8s .5s var(--ease-standard) both}@keyframes heroIn{from{transform:scale(1.025);filter:brightness(.7)}to{transform:scale(1);filter:none}}.kv-image__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.3),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.28),transparent 38%)}.kv-scroll{position:absolute;right:22px;bottom:28px;margin:0;color:#fff;writing-mode:vertical-rl;font:600 9px/1 var(--font-en);letter-spacing:.18em}.kv-scroll span{display:inline-block;width:1px;height:46px;margin-top:12px;background:#fff;animation:scrollLine 1.8s ease-in-out infinite}@keyframes scrollLine{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}} .section{padding:clamp(80px,11vw,170px) var(--pad)}.sec-head{display:grid;grid-template-columns:70px 1fr;align-items:start;margin-bottom:clamp(40px,6vw,90px)}.sec-head__no{margin:5px 0 0;font:600 11px/1 var(--font-en)}.sec-head__label{margin:0 0 8px;font:600 10px/1 var(--font-en);letter-spacing:.2em}.section h2{margin:0;font:700 clamp(48px,8vw,126px)/.9 var(--font-en);letter-spacing:-.07em}.news{background:var(--news-bg)}.news-list{border-top:1px solid var(--text-main)}.news-list a{display:grid;grid-template-columns:130px 70px 1fr 25px;align-items:center;gap:20px;padding:25px 4px;border-bottom:1px solid var(--border-soft);transition:padding .35s var(--ease-standard),background .35s}.news-list a:hover{padding-left:18px;background:rgba(201,86,98,.09)}.news-list time,.news-list span{font:600 11px/1 var(--font-en)}.news-list span{display:inline-grid;place-items:center;border:1px solid;border-radius:999px;padding:6px}.news-list p{margin:0}.news-list b{font-weight:400;font-size:18px} .link-more{display:inline-flex;gap:35px;align-items:center;margin-top:28px;padding-bottom:6px;border-bottom:1px solid;font:600 12px/1 var(--font-en);letter-spacing:.12em}.link-more span{transition:transform .3s}.link-more:hover span{transform:translateX(7px)} .contact{background:var(--contact-bg);color:#fff}.contact__inner{max-width:1250px;margin:0 auto}.contact h2{margin:20px 0 50px;font-size:clamp(44px,8vw,120px)}.contact a{display:flex;justify-content:space-between;border-bottom:1px solid #777;padding:18px 0;font-size:clamp(18px,2vw,28px)}.site-footer{display:grid;grid-template-columns:1fr 2fr auto;gap:30px;align-items:end;padding:40px var(--pad);background:var(--contact-bg);color:#cfc5d3;border-top:1px solid #333}.site-footer p{margin:0;color:#fff;font:700 16px/1 var(--font-en)}.site-footer small{font-size:9px}.site-footer a{font:600 10px/1 var(--font-en);letter-spacing:.12em}.fade-in{opacity:0;transform:translateY(45px);transition:opacity .9s var(--ease-standard),transform .9s var(--ease-standard)}.fade-in.is-visible{opacity:1;transform:none} /* ========================================================= COMING SOON — NEWS・STORY・STREAMINGなど、一覧を一時的に コメントアウトして代わりに表示する大きめの「Coming Soon」表示。 色・サイズは下の2行だけで調整できます。 ========================================================= */ .coming-soon{ margin:0 auto; padding:clamp(60px,10vw,140px) 20px; max-width:1180px; text-align:center; font:700 clamp(38px,7vw,92px)/1 var(--font-en); letter-spacing:.03em; background-image:linear-gradient(100deg, var(--text-main) 0%, var(--text-main) 35%, var(--lavender) 50%, var(--text-main) 65%, var(--text-main) 100%); background-size:260% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.5; animation:comingSoonShimmer 6s ease-in-out infinite, comingSoonBreathe 3.6s ease-in-out infinite; } @keyframes comingSoonShimmer{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:200% 50%} } @keyframes comingSoonBreathe{ 0%,100%{opacity:.42;letter-spacing:.03em} 50%{opacity:.6;letter-spacing:.06em} } @media(max-width:900px) and (min-width:769px){.kv-layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}} @media(max-width:768px){body{padding-top:62px}.mobile-bar{position:fixed;z-index:100;top:0;left:0;right:0;height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(247,242,234,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)}.mobile-bar__logo{font:700 13px/1 var(--font-en);letter-spacing:.08em}.menu-btn{position:relative;width:42px;height:42px;border:0;background:none}.menu-btn span:not(.sr-only){position:absolute;left:9px;width:24px;height:1px;background:#111;transition:.4s var(--ease-standard)}.menu-btn span:first-child{top:16px}.menu-btn span:nth-child(2){top:25px}.menu-btn[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}.menu-btn[aria-expanded=true] span:nth-child(2){top:21px;transform:rotate(-45deg)}.kv-layout{display:block}.site-menu{position:fixed;z-index:90;inset:62px 0 0;background:var(--menu-bg);border:0;transform:translateX(-100%);transition:transform .65s var(--ease-standard)}.site-menu.is-open{transform:none}.site-menu__inner{position:static;height:100%;min-height:100%;padding:35px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch}.site-logo{display:none}.site-logo__note{margin:0 0 35px}.site-menu__list a{font-size:26px;padding:12px 0}.kv-image{aspect-ratio:2480/3508;background:var(--bg-base)}.kv-image img{object-fit:contain;object-position:center top}.kv-scroll{display:none}.section{padding:85px 22px}.sec-head{grid-template-columns:40px 1fr}.news-list a{grid-template-columns:1fr 65px 20px;gap:12px;padding:20px 0}.news-list time{grid-column:1}.news-list span{grid-column:2}.news-list p{grid-column:1/3}.news-list b{grid-column:3;grid-row:1/3}.site-footer{grid-template-columns:1fr;align-items:start}.site-footer a{margin-top:20px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fade-in{opacity:1;transform:none}} /* ========================================================= JAPANESE ANIME / PERIOD-STYLE THEME 差し替えた縦長KVに合わせた調整です。 ========================================================= */ body{letter-spacing:.015em} .intro-loader{background:var(--contact-bg)} .intro-loader__mark{font-family:var(--font-en);font-weight:600;letter-spacing:.08em} .kv-layout{background:var(--bg-base)} .site-menu{padding:clamp(28px,3vw,52px) clamp(18px,2.2vw,34px)} .site-menu__inner{ background:var(--menu-panel-bg); border:8px solid rgba(135,95,40,.18); /* 2026-08-21：新--lavenderと同系色に変更（V35。デスクトップ／スマホとも後続ルールで透明化されるため見た目には影響なし） */ border-radius:28px; padding:clamp(28px,3vw,48px) clamp(24px,2.5vw,38px); } .site-logo img{filter:grayscale(1) contrast(1.3);max-width:190px;margin-inline:auto} .site-logo__note{text-align:center;color:var(--lavender);font-family:var(--font-en);font-size:11px;letter-spacing:.18em} .site-menu__list a{ font-family:var(--font-en); font-size:clamp(20px,1.65vw,29px); font-weight:600; letter-spacing:.02em; line-height:1.05; } .site-menu__list a span{font-family:var(--font-en);color:var(--accent);opacity:1} .site-menu__list a:after{background:var(--accent)} .socials a{border-color:var(--lavender);color:var(--lavender)} .site-menu small{color:var(--lavender)} /* KV画像内にタイトルが含まれるため、上乗せ文字と暗いベールを非表示 */ .kv-image__veil{display:none} .kv-scroll{color:var(--lavender);right:18px} .kv-scroll span{background:var(--lavender)} .sec-head__no,.sec-head__label{color:var(--accent)} .sec-head__no{font-family:var(--font-en);font-size:14px} .sec-head__label{font-family:var(--font-en);font-size:13px;letter-spacing:.14em} .section h2,.contact h2{ font-family:var(--font-en); font-weight:600; letter-spacing:-.035em; } .news-list time,.news-list span, .link-more,.site-footer a{ font-family:var(--font-en); } .news-list p{font-family:var(--font-ja)} .news-list span{color:var(--accent);border-color:var(--accent)} .link-more{color:var(--accent)} .contact .sec-head__no,.contact .sec-head__label{color:#e7a8af} .contact a{border-color:rgba(255,255,255,.35)} .site-footer{border-top-color:rgba(255,255,255,.15)} @media(max-width:768px){ .site-menu{padding:20px;background:var(--menu-bg)} .site-menu__inner{border-radius:20px;border-width:6px;padding:30px 25px} .site-menu__list a{font-size:30px} .kv-scroll{display:none} } /* ========================================================= MENU LAYOUT RESTORE 元の左メニューの構造・余白・文字サイズへ戻し、 色とフォントのみ和風テーマを適用します。 ========================================================= */ @media (min-width:769px){ .site-menu{ padding:0; background:var(--menu-bg); border-right:1px solid var(--text-main); } .site-menu__inner{ position:sticky; top:0; min-height:100%; padding:clamp(28px,3.4vw,56px) clamp(22px,2.6vw,42px); display:flex; flex-direction:column; background:transparent; border:0; border-radius:0; } .site-logo img{ width:100%; max-width:180px; margin:0; filter:none; } .site-logo__note{ margin:18px 0 clamp(36px,5vw,76px); text-align:left; color:var(--text-main); font:600 10px/1.5 var(--font-en); letter-spacing:.15em; } .site-menu__list a{ gap:13px; padding:11px 0; font:700 clamp(13px,1vw,16px)/1 var(--font-en); letter-spacing:.08em; } .site-menu__list a span{ font-size:9px; font-weight:500; color:var(--accent); opacity:.75; } .site-menu__footer{margin-top:auto;padding-top:40px} .socials a{color:var(--text-main);border-color:var(--text-main)} .site-menu small{color:var(--text-main)} } @media(max-width:768px){ .site-menu{padding:0;background:var(--menu-bg)} .site-menu__inner{ position:static; min-height:100%; padding:35px 30px; background:transparent; border:0; border-radius:0; } .site-logo__note{text-align:left;color:var(--text-main);margin:0 0 35px} .site-menu__list a{font-size:26px;padding:12px 0} } /* ========================================================= SIDEBAR CONTRAST FIX 01番号と選択中の下線がローズ背景上でも明瞭に見える配色。 ========================================================= */ :root{ --menu-bg:#c95f6b; --nav-text:#fffaf3; --nav-muted:#f5dfb0; --nav-line:rgba(255,250,243,.72); } .site-menu, .site-menu__inner{ color:var(--nav-text); } .site-menu{border-right-color:rgba(65,38,47,.35)} .site-logo__note, .site-menu small{ color:var(--nav-text) !important; } .site-menu__list a{ color:var(--nav-text); } .site-menu__list a span{ color:var(--nav-muted) !important; opacity:1 !important; font-weight:600 !important; } .site-menu__list a::after{ background:var(--nav-line) !important; height:1px; bottom:3px; } .site-menu__list a:hover::after{ width:100%; } .socials a{ color:var(--nav-text) !important; border-color:rgba(255,250,243,.82) !important; } .socials a:hover{ background:var(--nav-text); color:var(--menu-bg) !important; } /* ========================================================= EDITABLE SIDEBAR SIZE PCメニューの幅・文字サイズ・番号サイズは :root の --sidebar-width / --menu-font-size / --menu-number-size で変更。 ========================================================= */ @media (min-width:769px){ .kv-layout{ grid-template-columns:var(--sidebar-width) minmax(0,1fr); } .site-menu__inner{ /* 幅が広がった分、参考画像に近い余白へ */ padding:clamp(42px,4vw,68px) clamp(34px,3.1vw,52px); } .site-logo__note{ margin-bottom:clamp(72px,8vw,120px); } .site-menu__list a{ gap:var(--menu-item-gap); padding:14px 0; font-size:var(--menu-font-size); line-height:1; letter-spacing:.055em; } .site-menu__list a span{ flex:0 0 24px; font-size:var(--menu-number-size); line-height:1; } .site-menu__list a::after{ bottom:5px; } } /* ========================================================= FULL-BLEED HERO / EXPANDING SIDEBAR 画面が1600pxを超えても左右に余白を作らず、 広がった分を左メニューにも配分します。 ========================================================= */ @media (min-width:769px){ .kv-layout{ width:100%; max-width:none; margin:0; grid-template-columns:var(--sidebar-width) minmax(0,1fr); } .kv-image{ justify-self:stretch; width:100%; } .kv-image img{ object-position:left top; } } /* ========================================================= CHARACTER / MEMBER SLIDER 参照サイトの人物切り替え演出を、現行テーマ向けに再構成。 画像の出現は clip-path / transform / opacity のCSS演出です。 ========================================================= */ :root{ --character-bg:var(--news-bg); /* 2026-08-22：v39でINTRODUCTIONと同じ色に変更したが、ご指定間違いとのご訂正により元のNEWS/STORY/STAFF・CASTと同じ色に差し戻し（v40） */ --character-panel:#f8f3eb; --character-accent:#c95f6b; --character-ink:#332b3a; } /* ========================================================= CHARACTER — NAME かんたん設定 氏名（h3内のspan）の文字サイズはここで調整できます。 全角6文字までは横1行に収まるよう計算済みです （PC幅320px〜2560pxで検証済み／js/characters.js の name を変更しても対応可）。 文字がさらに増える場合は、下の数値（特にvw値とmaxの上限px）を 少しずつ小さくして再調整してください。 ・1つ目のブロック：PC（901px以上・2カラム表示） ・2つ目のブロック：タブレット／スマホ（900px以下・1カラム表示） ========================================================= */ :root{ --character-name-size: clamp(46px, 4.3vw, 76px); } @media(max-width:900px){ :root{ --character-name-size: clamp(40px, 12vw, 96px); } } /* ========================================================= CHARACTER — PORTRAIT かんたん設定 ※2026-08-14 追加 キャラ詳細紹介（左側の大きな立ち絵）の表示幅です。 横幅が狭いと、耳や袖など横に広がっているイラストの端が 切れてしまうことがあります。切れる場合は --character-portrait-width を大きく（100%に近づける） してください。 人物ごとに個別調整したい場合は、js/characters.js の該当 データに portraitWidth（例: 96）を追加すると、その人だけ この初期値より優先されます（省略時はこの初期値を使用）。 ========================================================= */ :root{ --character-portrait-width: 88%; /* 立ち絵の表示幅（100%に近いほど横が広く写り、切れにくくなる） */ } .character{position:relative;overflow:hidden;background:var(--character-bg)} .character::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 20%,rgba(255,255,255,.82),transparent 34%),linear-gradient(135deg,transparent 0 48%,rgba(135,95,40,.07) 48% 49%,transparent 49% 100%);pointer-events:none} .character .sec-head{position:relative;z-index:2} .character-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(320px,.92fr) minmax(390px,1.08fr);max-width:1320px;margin:0 auto;border:1px solid rgba(48,41,54,.2);background:rgba(248,243,235,.8);box-shadow:0 30px 80px rgba(73,61,86,.14);min-height:clamp(570px,62vw,760px)} .character-stage__visual{position:relative;overflow:hidden;background:linear-gradient(155deg,#e9d5a2,#f4e9e5 56%,#f0dcc2)}/* 2026-08-21：薄藤色→琥珀ゴールド、水色→暖色系クリームに変更（パターン1に統一。中央のピンク寄りの色はご指定どおり変更なし） */ .character-stage__visual::after{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.7);pointer-events:none;z-index:4} .character-portrait{position:absolute;inset:0;opacity:0;visibility:hidden;clip-path:inset(0 100% 0 0);transform:translateX(-5%);transition:clip-path .85s var(--ease-standard),transform .95s var(--ease-standard),opacity .35s ease,visibility .85s} .character-portrait.is-active{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);transform:none;z-index:2} .character-portrait img{position:absolute;left:calc((100% - var(--character-portrait-width))/2);bottom:0;width:var(--character-portrait-width);height:92%;object-fit:cover;object-position:center 24%;filter:saturate(.78) contrast(.95);transform:scale(1.06);transition:transform 1.15s var(--ease-standard)} .character-portrait.is-active img{transform:scale(1)} .character-portrait__halo{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;top:8%;left:14%;background:rgba(255,255,255,.48);box-shadow:0 0 0 34px rgba(255,255,255,.13);transform:scale(.75);opacity:0;transition:transform 1s .12s var(--ease-standard),opacity .65s .12s} .character-portrait.is-active .character-portrait__halo{transform:scale(1);opacity:1} /* ========================================================= CHARACTER — KANJI（立ち絵の後ろに出る大きな縦書き文字）かんたん設定 ※2026-08-14 追加 立ち絵の背景にうっすら出る大きな縦書き文字（js/characters.js の kanji の中身）の文字サイズです。 全角6文字までは枠からはみ出さず縦に収まるよう、下の数値を あらかじめ計算・調整済みです（PC／タブレット／スマホの3段階）。 ・--character-kanji-size を変更すると全キャラ共通の大きさが変わります。 ・特定のキャラだけ大きさを変えたい場合は、js/characters.js の 該当データに kanjiSize（例: 130）を追加すると、その人だけ この初期値より優先されます（px単位の数値。省略時はこの初期値を使用）。 6文字に近い長い名前を入れる場合は、kanjiSize を指定しないか、 小さめの数値にすることをおすすめします。 ========================================================= */ :root{ --character-kanji-size: clamp(66px, 7.8vw, 96px); } .character-portrait__kanji{position:absolute;left:4%;top:5%;z-index:3;color:rgba(135,95,40,.28);font:500 var(--character-kanji-size)/1 var(--font-ja);writing-mode:vertical-rl;transform:translateY(20px);opacity:0;transition:transform .9s .18s var(--ease-standard),opacity .7s .18s} .character-portrait.is-active .character-portrait__kanji{transform:none;opacity:1} .character-stage__content{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(55px,7vw,105px);background:linear-gradient(145deg,rgba(248,243,235,.96),rgba(248,243,235,.72))} .character-stage__content::before{content:"CHARACTER";position:absolute;right:-.08em;top:.05em;color:rgba(201,95,107,.055);font:600 clamp(70px,9vw,145px)/1 var(--font-en);letter-spacing:-.04em;writing-mode:vertical-rl;pointer-events:none} .character-copy{position:absolute;left:clamp(55px,7vw,105px);right:clamp(55px,7vw,105px);top:50%;opacity:0;visibility:hidden;transform:translateY(calc(-50% + 28px));transition:opacity .42s ease,transform .75s var(--ease-standard),visibility .75s} .character-copy.is-active{position:relative;left:auto;right:auto;top:auto;opacity:1;visibility:visible;transform:none;z-index:2} /* ========================================================= CHARACTER — ROLE（氏名の上の小さな読み）かんたん設定 ※2026-08-14 追加 氏名（h3）の上に出る小さな文字（例：りゅうこうし）の見た目です。 全角6文字までは折り返さないよう幅に余裕を持たせてあります。 --character-role-size 文字の大きさ --character-role-color 文字の色 ========================================================= */ :root{ --character-role-size: 12px; --character-role-color: var(--character-accent); } .character-copy__role{margin:0 0 20px;max-width:100%;white-space:nowrap;color:var(--character-role-color);font:600 var(--character-role-size)/1.4 var(--font-ja);letter-spacing:.14em} .character-copy h3{margin:0 0 34px;font-family:var(--font-en);font-weight:600;line-height:.78} .character-copy h3 span{display:block;font-size:var(--character-name-size);letter-spacing:-.07em} .character-copy h3 small{display:block;margin-top:26px;color:var(--lavender);font:500 14px/1 var(--font-ja);letter-spacing:.35em} .character-copy>p:last-child{max-width:540px;margin:0;font-size:clamp(14px,1.15vw,17px);line-height:2.05;white-space:pre-line} .character-arrow{appearance:none;border:0;background:none;color:var(--character-ink);cursor:pointer;font-family:var(--font-en);padding:9px 0;font-size:10px;letter-spacing:.16em;border-bottom:1px solid rgba(48,41,54,.35);transition:color .3s,border-color .3s} .character-arrow:hover{color:var(--character-accent);border-color:var(--character-accent)} @media(max-width:900px){ .character-stage{grid-template-columns:1fr;min-height:0} .character-stage__visual{min-height:650px} .character-stage__content{min-height:520px} :root{--character-kanji-size:78px} } @media(max-width:768px){ .character{padding-inline:0} .character::before{display:none} .character .sec-head{padding-inline:22px} .character-stage{border-left:0;border-right:0} .character-stage__visual{min-height:520px} :root{--character-portrait-width:92%;--character-kanji-size:60px} .character-portrait img{height:94%} .character-stage__content{min-height:500px;padding:64px 25px 115px} .character-stage__content::before{font-size:78px} .character-copy{left:25px;right:25px} } @media(prefers-reduced-motion:reduce){ .character-portrait,.character-portrait img,.character-portrait__halo,.character-portrait__kanji,.character-copy{transition:none!important} } /* ========================================================= CHARACTER 顔サムネイルナビゲーション サイズ変更は下記の変数だけで調整できます。 ========================================================= */ :root{ --character-face-size:clamp(64px,6.2vw,92px); --character-face-gap:clamp(10px,1.35vw,20px); --character-face-radius:50%; --character-face-bg:#ecd9ad; /* 2026-08-21：薄藤色→琥珀ゴールドに変更（パターン1に統一） */ } .character-face-tab{ flex:0 0 auto; display:grid; justify-items:center; gap:8px; padding:0; opacity:.58; transition:opacity .35s ease,transform .45s var(--ease-standard); } .character-face-tab::after{display:none} .character-face-tab:hover, .character-face-tab.is-active{opacity:1;transform:translateY(-4px)} .character-face-tab__image{ position:relative; display:block; width:var(--character-face-size); aspect-ratio:1; overflow:hidden; border-radius:0; border:3px solid rgba(248,243,235,.95); outline:1px solid rgba(48,41,54,.24); background:var(--character-face-bg); box-shadow:0 8px 24px rgba(73,61,86,.12); transition:outline-color .35s,border-color .35s,background-color .35s,box-shadow .35s,transform .45s var(--ease-standard); } .character-face-tab__image::after{ content:""; position:absolute; inset:0; border:3px solid transparent; border-radius:0; transition:border-color .35s; } .character-face-tab:hover .character-face-tab__image, .character-face-tab.is-active .character-face-tab__image{ outline-color:var(--character-accent); box-shadow:0 12px 30px rgba(201,95,107,.22); } .character-face-tab.is-active .character-face-tab__image::after{border-color:var(--character-accent)} .character-face-tab__image img{ width:100%;height:100%;object-fit:cover; transform:scale(1.04); transition:transform .55s var(--ease-standard); } .character-face-tab:hover img,.character-face-tab.is-active img{transform:scale(1.12)} .character-face-tab__name{ display:flex;align-items:baseline;gap:5px; color:var(--character-ink); font:600 11px/1 var(--font-en); letter-spacing:.08em; white-space:nowrap; } .character-face-tab__name small{color:var(--character-accent);font-size:8px} @media(max-width:760px){ :root{--character-face-size:62px;--character-face-gap:10px} } /* ========================================================= CHARACTER — ROSTER かんたん設定 タイトルとキャラ詳細紹介の間に並ぶ「キャラ一覧」の色・サイズです。 最大20キャラ程度までは自動で折り返して表示されます （js/characters.js に項目を追加するだけでOK）。 名前ラベルは表示せず、サムネイル画像の枠のみを並べています （表示したい場合は一番下の .character-roster .character-face-tab__name の display:none を削除してください）。 ▼サイズを変えたいとき --character-roster-face-size の数値（px）だけを変更してください。 clamp(最小値, 画面幅に応じた値, 最大値) の3つの数値のうち、 一番わかりやすいのは3つ目（最大値）です。大きくしたい場合はそこを 大きく、小さくしたい場合は小さくしてください。 ▼色を変えたいとき --character-roster-chip-bg … 枠の中の背景色（通常時／ベージュ） --character-roster-chip-bg-active … 枠の中の背景色（選択中・マウスホバー時／薄藤色） --character-roster-chip-border … 枠線の色（通常時） --character-roster-chip-active … 枠線の色（選択中・マウスホバー時） ▼顔アップの倍率を変えたいとき --character-roster-face-zoom … 全員共通の初期倍率（数値が大きいほど顔がアップになります） 人物ごとに倍率・位置を変えたい場合は js/characters.js の facePosition（画像内の表示位置）／faceZoom（その人だけの倍率）を編集してください。 ========================================================= */ :root{ --character-roster-bg:transparent; /* 一覧の背景（透明＝characterセクションの背景・光の演出をそのまま透過） */ --character-roster-chip-bg:var(--character-panel); /* 1人ずつを囲む枠の中の背景色（通常時・ベージュ） */ --character-roster-chip-bg-active:var(--music-bg);/* 1人ずつを囲む枠の中の背景色（選択中・ホバー時。2026-08-21：メニュー一覧と同じ濃い黄色（琥珀ゴールド）に変更（v39）→2026-08-22：ご指定によりMUSICセクションと同じ薄いピンクに変更（v41） */ --character-roster-chip-border:rgba(48,41,54,.24); /* 枠線の色（通常時） */ --character-roster-chip-active:var(--character-accent);/* 枠線の色（選択中・ホバー時） */ --character-roster-face-size:clamp(88px,8.2vw,124px); /* サムネイルのサイズ（3つ目の数値が最大サイズ） */ --character-roster-gap:clamp(12px,1.6vw,22px); /* サムネイル同士の間隔 */ --character-roster-face-zoom:2.4; /* 顔アップの倍率（全員共通の初期値。1＝アップなし） */ } .character-roster{ position:relative;z-index:2; background:var(--character-roster-bg); padding:22px clamp(22px,4.5vw,64px) 28px; } .character-roster__inner{ display:flex; align-items:center; gap:24px; max-width:1320px; margin:0 auto; } .character-roster__list{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:var(--character-roster-gap); --character-face-size:var(--character-roster-face-size); --character-face-bg:var(--character-roster-chip-bg); } .character-roster .character-arrow{flex:0 0 auto} .character-roster .character-face-tab__name{display:none} .character-roster .character-face-tab__image{ outline-color:var(--character-roster-chip-border); border-color:var(--character-roster-chip-bg); } .character-roster .character-face-tab:hover .character-face-tab__image, .character-roster .character-face-tab.is-active .character-face-tab__image{ outline-color:var(--character-roster-chip-active); border-color:var(--character-roster-chip-bg-active); background:var(--character-roster-chip-bg-active); box-shadow:0 12px 30px rgba(201,95,107,.28); } .character-roster .character-face-tab.is-active .character-face-tab__image::after{ border-color:var(--character-roster-chip-active); } /* 一覧サムネイルだけ、同じ画像を「顔アップ」で表示（立ち絵など他の箇所はそのまま） */ .character-roster .character-face-tab__image img{ transform:scale(var(--character-roster-face-zoom,1.8)); } .character-roster .character-face-tab:hover .character-face-tab__image img, .character-roster .character-face-tab.is-active .character-face-tab__image img{ transform:scale(calc(var(--character-roster-face-zoom,1.8) * 1.08)); } @media(max-width:760px){ .character-roster{padding:18px 22px 22px} .character-roster__inner{gap:14px} :is(.character-roster__list){--character-roster-face-size:82px} /* ※2026-08-19 追加／2026-08-19 再修正：スマホ幅では、一覧を display:grid にして 「常に横3列」の表になるようにしています。以前は固定サイズ（82px）だった ため機種によっては2つしか横に並ばないことがあり、その後の修正で可変 サイズ（%指定）にした際も、3で割り切れず余った最後の行（4人目など）が 中央寄せになり、上の行と列がズレて見える問題がありました。 grid に変更したことで、行が変わっても常に同じ列（1列目・2列目・3列目） に揃い、余った最後の行は中央寄せではなく1列目から順に左詰めで並びます。 PREVとNEXTの間の幅いっぱいに3列で配置されるため、見た目としては 引き続きPREVとNEXTの間に収まります。横に並べる数を変えたい場合は、 下の repeat(3, 1fr) の「3」の数字を変更してください （例：横4つにしたい場合は repeat(4, 1fr) に変更）。 */ .character-roster__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .character-roster .character-face-tab{ width:100%; } .character-roster .character-face-tab__image{ width:100%; } } /* ========================================================= FINAL EDITABLE SIDEBAR THEME + RESPONSIVE LOGOS 左メニューだけを独立して変更できます。 PC: 縦ロゴ / SP: 横ロゴ ========================================================= */ :root{ /* メニュー専用配色（他セクションには影響しません） */ /* 2026-08-21：新KV（京師篇）配色案「パターン1：灯籠（ランタン・ゴールド）」を適用 */ --sidebar-bg:#e6c791; /* 背景：KVの提灯と同系の琥珀ゴールド */ --sidebar-text:#3b2418; /* メニュー文字：焦げ茶 */ --sidebar-number:#a82f16; /* 01〜09：KV衣装と同系の朱色 */ --sidebar-line:rgba(59,36,24,.25); /* ホバー下線 */ --sidebar-border:rgba(255,250,243,.4); /* PCメニューの寸法 */ --sidebar-width:clamp(300px,21.5vw,460px); --sidebar-logo-width:clamp(145px,10.5vw,205px); --sidebar-nav-size:clamp(18px,1.35vw,22px); --sidebar-number-size:clamp(10px,.72vw,12px); } /* PC左メニュー */ .site-menu{ background:var(--sidebar-bg) !important; color:var(--sidebar-text) !important; border-right-color:var(--sidebar-border) !important; } .site-menu__inner{color:var(--sidebar-text) !important} .site-logo{display:block;width:max-content;max-width:100%} .site-logo picture{display:block} .site-logo img{ display:block; width:var(--sidebar-logo-width) !important; max-width:none !important; height:auto; margin:0 auto 0 0 !important; filter:none !important; } .site-logo__note, .site-menu small{ color:var(--sidebar-text) !important; } .site-menu__list a{ color:var(--sidebar-text) !important; font-size:var(--sidebar-nav-size) !important; } .site-menu__list a span{ color:var(--sidebar-number) !important; font-size:var(--sidebar-number-size) !important; } .site-menu__list a::after{ background:var(--sidebar-line) !important; } .socials a{ color:var(--sidebar-text) !important; border-color:var(--sidebar-border) !important; } .socials a:hover{ color:var(--sidebar-bg) !important; background:var(--sidebar-text) !important; } /* スマートフォンの横ロゴ */ .mobile-bar__logo{ display:flex; align-items:center; width:min(42vw,172px); height:46px; } .mobile-bar__logo img{ display:block; width:100%; height:100%; object-fit:contain; object-position:left center; } @media(max-width:768px){ .mobile-bar{ background:var(--sidebar-bg); /* PCメニューと同じ色。--sidebar-bg と連動 */ border-bottom-color:var(--sidebar-border); } .menu-btn span:not(.sr-only){background:var(--sidebar-text)} .site-menu{ background:var(--sidebar-bg) !important; } .site-menu__inner{ color:var(--sidebar-text) !important; } .site-logo{display:none} .site-logo__note{color:var(--sidebar-text) !important} .site-menu__list a{ color:var(--sidebar-text) !important; font-size:clamp(25px,7vw,34px) !important; } .site-menu__list a span{ color:var(--sidebar-number) !important; font-size:12px !important; } } /* ========================================================= MENU ICON — 01〜09の数字を睡蓮アイコンに置き換え（v41・ご指定） アイコンのサイズは既存の「番号サイズ」設定 （--sidebar-number-size 等、各画面幅ごとに span のfont-sizeとして 調整されてきた値）と連動するよう em 単位で指定しています。 そのため番号の文字サイズ設定を変えれば、アイコンの大きさも 自動的に連動して変わります。画像の色（#a82f16）はご依頼時の 数字色（--sidebar-number）と完全一致のため、CSS側での色調整は 不要です。 ========================================================= */ .site-menu__list a span{display:inline-flex;align-items:center;justify-content:center} .site-menu__list a span img{display:block;width:2em;height:2em;object-fit:contain} /* ========================================================= SEC-HEAD NUMBER ICON — 各セクション見出しの「01」〜「09」の数字も 左メニューと同じ睡蓮アイコンに統一（v43・ご指定） サイズはここ（.sec-head__no img の width/height）を変更するだけで 9箇所すべて連動して変わります。 ========================================================= */ .sec-head__no{display:flex;align-items:flex-start} .sec-head__no img{display:block;width:34px;height:34px;object-fit:contain} @media(max-width:768px){ .sec-head__no img{width:26px;height:26px} } /* ========================================================= SECTION EXPANSION — INTRODUCTION / MOVIE / STORY / STAFF・CAST / MUSIC / ONAIR ========================================================= */ :root{ --introduction-bg:#f2e6c9; /* 薄藤色→2026-08-21、KV「京師篇」パターン1に合わせ淡い琥珀ゴールドに変更 */ --movie-bg:#f4ece6; /* 2026-08-21：CHARACTER/STORY/STAFF・CASTと似すぎていたため、旧STORY背景の薄いピンクに変更（v36） */ --story-bg:var(--introduction-bg); /* 2026-08-22：INTRODUCTIONと同じ淡い琥珀ゴールドに変更（v40・ご指定。v39でCHARACTERに適用したのは指示間違いとのことで、正しくはSTORYへ適用） */ --staffcast-bg:var(--news-bg); /* 2026-08-21：CHARACTER/STORYと連なって見えていたため、NEWSと同じ背景色に統一（v36） */ --music-bg:#f4ece6; /* 2026-08-21：CHARACTER/STORY/STAFF・CASTと似すぎていたため、旧STORY背景の薄いピンクに変更（v36） */ --onair-bg:#f0dcb8; /* 2026-08-21：メニュー金色ファミリーに合わせて暖色寄りに変更（V35。STREAMINGも連動） */ } /* 9項目でもPC・スマホでメニューが収まるようにする */ .site-menu__inner{overflow-y:auto;scrollbar-width:thin} .site-menu__list a{padding:9px 0} @media(min-width:769px){ .site-logo__note{margin-bottom:clamp(22px,3vw,44px)} .site-menu__footer{padding-top:28px} } .introduction{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);padding:0;background:var(--introduction-bg)} .introduction__image{min-height:620px;overflow:hidden} .introduction__image img{height:100%;object-fit:cover;transition:transform 1.2s var(--ease-standard)} .introduction__image:hover img{transform:scale(1.025)} .introduction__content{padding:clamp(70px,8vw,130px) clamp(35px,7vw,110px);align-self:center} .introduction__content h2{margin-bottom:35px;font-family:var(--font-en);font-weight:600;letter-spacing:-.035em} .introduction__statement{color:var(--lavender);font-size:clamp(20px,2.1vw,34px);line-height:1.55;font-weight:600;letter-spacing:.02em} .movie{background:var(--movie-bg)} /* 2026-08-21：YouTubeの動画をiframeで直接埋め込む形に変更（v38）。 旧サムネイル画像＋再生ボタン＋キャプション（OFFICIAL PROMOTION MOVIE／ PLAY MOVIE）は廃止し、.movie-card自体を16:9の枠として、その中に iframeをぴったり敷き詰める作りにしている。 */ .movie-card{position:relative;display:block;max-width:1280px;margin:0 auto;overflow:hidden;box-shadow:0 24px 55px rgba(73,61,86,.14);aspect-ratio:16/9;background:#000} .movie-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* 2026-09-17追記：MOVIEの大きいPVの下に並ぶ、小さいサブ動画カード（最大3枚） */ .movie-sub-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);max-width:1280px;margin:clamp(28px,4vw,44px) auto 0} .movie-sub-card{display:block} .movie-sub-card__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--text-main);box-shadow:7px 7px 0 0 rgba(48,41,54,.16);transition:transform .35s var(--ease-standard),box-shadow .35s} .movie-sub-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-standard)} .movie-sub-card:hover .movie-sub-card__thumb{transform:translate(-4px,-4px);box-shadow:7px 7px 0 0 var(--accent)} .movie-sub-card:hover .movie-sub-card__thumb img{transform:scale(1.06)} .movie-sub-card__title{margin:14px 0 4px;font:600 15px/1.6 var(--font-ja);color:var(--text-main)} .movie-sub-card__caption{margin:0;font-size:12px;line-height:1.6;color:var(--lavender);letter-spacing:.02em} @media(max-width:768px){ .movie-sub-list{grid-template-columns:1fr;max-width:520px} } /* 2026-08-22：スマホ表示時に動画が画面幅いっぱいに表示されるよう、 CHARACTERセクションと同じ手法（section自体のpadding-inlineを0にし、 見出し.sec-headにだけ改めてpadding-inlineを与える）を採用（v40・ご指定） */ @media(max-width:768px){ .movie{padding-inline:0} .movie .sec-head{padding-inline:22px} .movie-card{max-width:none;box-shadow:none} } /* ========================================================= STORY — 章タイトル／リード文／本文 かんたん設定 ※2026-08-18 追加 「応声（上）」のような縦書きの章タイトル、「第1話」のようなリード文、 あらすじ本文の色・文字サイズをここだけで変更できます。 ========================================================= */ :root{ --story-chapter-color: var(--accent); /* 章タイトル（縦書き大文字）の色 */ --story-chapter-sub-color: var(--text-main); /* 章タイトル横のふりがなの色 */ --story-chapter-size: clamp(46px,6vw,82px); /* 章タイトルの文字サイズ */ --story-lead-color: var(--lavender); /* 「第1話」等リード文の色 */ --story-lead-size: clamp(22px,2.4vw,38px); /* リード文の文字サイズ */ --story-body-color: var(--text-main); /* あらすじ本文の色 */ --story-body-size: clamp(14px,1.15vw,17px); /* あらすじ本文の文字サイズ */ } .story{background:var(--story-bg)} .story-layout{display:grid;grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);gap:clamp(40px,8vw,130px);max-width:1160px;margin:0 auto;padding-top:10px} .story-layout__chapter{margin:0;color:var(--story-chapter-color);font:600 var(--story-chapter-size)/1.05 var(--font-ja);writing-mode:vertical-rl;letter-spacing:.1em} .story-layout__chapter span{font-size:.22em;color:var(--story-chapter-sub-color);letter-spacing:.22em} .story-layout__body{align-self:center;max-width:700px} .story-layout__lead{margin-top:0;color:var(--story-lead-color);font-size:var(--story-lead-size);line-height:1.6;font-weight:600} .story-layout__body>p:last-of-type{color:var(--story-body-color);font-size:var(--story-body-size);line-height:2.15} .staffcast{background:var(--staffcast-bg)} .staffcast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:1200px;margin:0 auto;background:rgba(48,41,54,.18);border:1px solid rgba(48,41,54,.18)} .staffcast-grid article{min-height:190px;padding:34px;background:rgba(255,255,255,.58);transition:background .35s,transform .35s var(--ease-standard)} .staffcast-grid article:hover{position:relative;background:#fff;transform:translateY(-4px);z-index:1} .staffcast-grid p{margin:0 0 24px;color:var(--accent);font-size:11px;letter-spacing:.18em} .staffcast-grid h3{margin:0 0 10px;font-size:clamp(20px,2vw,30px);font-weight:600} .staffcast-grid span{font:500 10px/1 var(--font-en);letter-spacing:.14em;color:var(--lavender)} .music{background:var(--music-bg)} .music-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1180px;margin:0 auto} .music-card{position:relative;overflow:hidden;min-height:350px;padding:clamp(38px,5vw,72px);border:1px solid rgba(48,41,54,.34);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(238,232,241,.8));transition:transform .4s var(--ease-standard),box-shadow .4s} .music-card::after{content:"♪";position:absolute;right:15px;bottom:-.22em;color:rgba(201,95,107,.08);font:600 220px/1 var(--font-en)} .music-card:hover{transform:translateY(-7px);box-shadow:12px 12px 0 rgba(201,95,107,.28)} .music-card__type{margin:0 0 46px;color:var(--accent);font:600 11px/1 var(--font-en);letter-spacing:.18em} .music-card h3{position:relative;z-index:1;margin:0 0 18px;font-size:clamp(34px,4vw,60px);font-weight:600} .music-card__artist{position:relative;z-index:1;color:var(--lavender)} .music-card button{position:absolute;left:clamp(38px,5vw,72px);bottom:40px;display:flex;gap:35px;align-items:center;padding:0 0 7px;border:0;border-bottom:1px solid;background:none;color:var(--text-main);font:600 11px/1 var(--font-en);letter-spacing:.15em;cursor:pointer} .music-card button span{color:var(--accent)} /* ========================================================= ONAIR — かんたん設定 ONAIRの色・フォント・サイズはここだけで調整できます。 ========================================================= */ :root{ --onair-card-bg:rgba(255,255,255,.46); /* 各放送局の背景 */ --onair-border:rgba(48,41,54,.36); /* 枠線 */ --onair-station-color:var(--accent); /* 放送局名 */ --onair-day-color:var(--text-main); /* 曜日 */ --onair-time-color:var(--text-main); /* 時間 */ --onair-note-color:var(--lavender); /* 補足 */ --onair-station-font:var(--font-en); /* 放送局名のフォント */ --onair-day-font:var(--font-ja); /* 曜日のフォント */ --onair-time-font:var(--font-en); /* 時間のフォント */ --onair-note-font:var(--font-ja); /* 補足のフォント */ --onair-station-size:12px; --onair-day-size:clamp(15px,1.25vw,19px); --onair-time-size:clamp(28px,3vw,46px); --onair-note-size:11px; } .onair{background:var(--onair-bg)} .onair-grid{ display:flex; flex-direction:column; gap:12px; max-width:1180px; margin:0 auto; } .onair-card{ display:grid; grid-template-columns:minmax(150px,.8fr) minmax(180px,1fr) minmax(240px,1.3fr); align-items:center; gap:clamp(20px,4vw,70px); min-height:106px; padding:24px clamp(22px,3vw,40px); border:1px solid var(--onair-border); background:var(--onair-card-bg); } /* ホバー時の動き（浮き上がり・影）は2026-08-18に削除しました */ .onair-card__station{ margin:0; color:var(--onair-station-color); font-family:var(--onair-station-font); font-size:var(--onair-station-size); font-weight:600; line-height:1.2; letter-spacing:.15em; } .onair-card__day{ margin:0; color:var(--onair-day-color); font-family:var(--onair-day-font); font-size:var(--onair-day-size); font-weight:500; line-height:1.6; } .onair-card__time{display:flex;align-items:baseline;gap:18px;justify-content:flex-start;min-width:0} .onair-card strong{ display:block; flex:0 0 auto; color:var(--onair-time-color); font-family:var(--onair-time-font); font-size:var(--onair-time-size); font-weight:600; line-height:1; letter-spacing:-.04em; } .onair-card small{ display:block; margin:0; color:var(--onair-note-color); font-family:var(--onair-note-font); font-size:var(--onair-note-size); line-height:1.6; } /* 2026-08-24追記：「毎週 水曜日」を時間（25:15）と見た目で揃うサイズ・色に統一 ※和文書体は同じfont-sizeでも欧文数字より大きく見えるため、小さめの 倍率（2026-08-25：0.4倍→0.5倍に変更）をかけて見た目の大きさを合わせています。 */ .onair-card small.onair-card__time-day{ color:var(--onair-time-color); font-size:calc(var(--onair-time-size) * .5); font-weight:600; line-height:1; } /* 2026-08-24追記：ON AIR情報一覧の下の注釈（放送時間は変更の可能性がございます） */ .onair-footnote{ max-width:1180px; margin:16px auto 0; text-align:right; color:var(--onair-note-color); font-family:var(--onair-note-font); font-size:var(--onair-note-size); line-height:1.6; } @media(max-width:768px){ .onair-card{ grid-template-columns:1fr; gap:9px; padding:22px 20px; } .onair-card__time{flex-wrap:wrap;gap:10px 16px} } @media(max-width:900px) and (min-width:769px){ .introduction{grid-template-columns:1fr} .introduction__image{min-height:auto} .introduction__image img{aspect-ratio:3/2} .staffcast-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:768px){ .site-menu__inner{overflow-y:auto} .site-menu__list a{font-size:22px;padding:8px 0} .introduction{padding:0;display:block} .introduction__image{min-height:auto} .introduction__image img{aspect-ratio:4/5} .introduction__content{padding:70px 22px} .introduction__statement{font-size:22px} .story-layout{grid-template-columns:1fr;gap:36px} .story-layout__chapter{writing-mode:horizontal-tb;font-size:42px} .story-layout__chapter span{display:block;margin-top:10px} .staffcast-grid{grid-template-columns:1fr} .staffcast-grid article{min-height:auto;padding:28px 24px} .music-grid{grid-template-columns:1fr} .music-card{min-height:310px} } /* ========================================================= INTRODUCTION — independent heading + image / copy layout Heading alignment can be changed by replacing: introduction__heading--right with --left or --center in index.html. ========================================================= */ .introduction{ display:block; padding:clamp(72px,7vw,118px) clamp(28px,6vw,96px) clamp(82px,8vw,132px); background:var(--introduction-bg); } .introduction__heading{ display:flex; align-items:flex-end; gap:clamp(16px,2.4vw,34px); max-width:1320px; margin:0 auto clamp(48px,5vw,78px); } .introduction__heading--left{justify-content:flex-start;text-align:left} .introduction__heading--center{justify-content:center;text-align:center} .introduction__heading--right{justify-content:flex-end;text-align:right} .introduction__meta{ flex:0 0 auto; padding-bottom:.75em; text-align:left; } .introduction__heading .sec-head__no, .introduction__heading .sec-head__label{margin:0} .introduction__heading h2{ margin:0; max-width:100%; font-family:var(--font-en); font-size:clamp(52px,8.2vw,126px); font-weight:500; line-height:.82; letter-spacing:-.055em; white-space:nowrap; } .introduction__body{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:clamp(38px,6vw,92px); align-items:center; max-width:1320px; margin:0 auto; } .introduction__image{ min-height:0; overflow:hidden; } .introduction__image img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center; transition:transform 1.2s var(--ease-standard); } .introduction__image:hover img{transform:scale(1.025)} .introduction__content{ align-self:center; padding:clamp(12px,2vw,28px) 0; } .introduction__content h2{display:none} .introduction__statement{ margin-top:0; color:var(--lavender); font-size:clamp(22px,2.35vw,38px); line-height:1.55; font-weight:600; letter-spacing:.02em; } .introduction__content>p:not(.introduction__statement){ max-width:620px; font-size:clamp(14px,1.08vw,17px); line-height:2.05; } /* 2026-08-24追記：画像をコメントアウトして文章だけになった場合、 自動的に1カラム表示に切り替えます（画像を戻せば元の2カラムに戻ります） */ .introduction__body:has(.introduction__content:only-child){ grid-template-columns:1fr; } .introduction__body:has(.introduction__content:only-child) .introduction__content{ max-width:760px; margin:0 auto; } @media(max-width:980px){ .introduction__heading h2{font-size:clamp(48px,10vw,86px)} .introduction__body{grid-template-columns:1fr;gap:36px} .introduction__image img{aspect-ratio:16/10} .introduction__content{max-width:720px} } @media(max-width:768px){ .introduction{padding:70px 22px 82px} .introduction__heading{ display:block; margin-bottom:36px; } .introduction__heading--right, .introduction__heading--center, .introduction__heading--left{text-align:left} .introduction__meta{display:flex;gap:12px;padding:0 0 12px} .introduction__heading h2{ font-size:clamp(38px,13.4vw,64px); line-height:.9; } .introduction__image img{aspect-ratio:4/3} .introduction__statement{font-size:22px} } /* ========================================================= SEASON SELECT — かんたん設定 ※2026-08-18 「第１期＆第２期」1本化 メニュー一覧の下に表示する配信シーズンへのリンク。 色は左メニュー専用変数だけを使用するため、他セクションへ影響しません。 ========================================================= */ :root{ --season-link-text-color: var(--sidebar-text); /* 通常時の文字色 */ --season-link-text-hover-color: var(--sidebar-bg); /* ホバー時の文字色 */ --season-link-text-size: clamp(15px,1.15vw,18px); /* 文字サイズ */ --season-link-inner-border: rgba(48,41,54,.22); /* 内側の二重線の色（※2026-08-18 追加） */ } .season-links{ margin-top:clamp(10px,1.2vw,16px); padding-top:clamp(18px,2.2vw,30px); border-top:1px solid var(--sidebar-line); } .season-links__list{ display:grid; gap:8px; } .season-link{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:10px; align-items:center; min-height:58px; padding:10px 16px; overflow:hidden; color:var(--season-link-text-color) !important; border:1px solid var(--sidebar-line); background:rgba(255,255,255,.12); transition:color .35s var(--ease-standard),background .35s var(--ease-standard),border-color .35s var(--ease-standard),transform .35s var(--ease-standard); } .season-link::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--sidebar-text); transform:translateX(-102%); transition:transform .45s var(--ease-standard); } /* 内側の二重線（CONTACT欄の配信ロゴカードと同じ「枠の内側にもう1本線」の 作り方）※2026-08-18 追加：「他サイトへのリンク」の見た目に合わせました */ .season-link::after{ content:""; position:absolute; inset:5px; z-index:2; border:1px solid var(--season-link-inner-border); pointer-events:none; } .season-link>*{position:relative;z-index:1} .season-link:hover, .season-link:focus-visible{ color:var(--season-link-text-hover-color) !important; border-color:var(--sidebar-text); transform:translateX(3px); } .season-link:hover::before, .season-link:focus-visible::before{transform:none} .season-link__text{ min-width:0; font:600 var(--season-link-text-size)/1.3 var(--font-ja); letter-spacing:.04em; white-space:nowrap; } .season-link__arrow{ font-family:var(--font-en); font-size:13px; text-align:right; } @media(max-width:768px){ .season-links{ margin-top:12px; padding-top:20px; } .season-link{ grid-template-columns:minmax(0,1fr) 14px; min-height:68px; padding:12px 14px; } .season-link:hover, .season-link:focus-visible{transform:none} } /* ========================================================= LOADING LOGO RESPONSIVE PC: 横ロゴ / SP: 縦ロゴ ========================================================= */ .intro-loader__mark{ display:flex; align-items:center; justify-content:center; } .intro-loader__mark picture{ display:block; } .intro-loader__mark img{ display:block; width:min(48vw,420px); max-height:44vh; height:auto; object-fit:contain; } @media(max-width:768px){ .intro-loader__mark img{ width:min(42vw,190px); max-height:56vh; } } /* ========================================================= LOADING MOTION ロゴは少しゆっくりフェードインし、消える時もなめらかにします。 ※表示している総時間は js/main.js の LOADING_LOGO_DISPLAY_TIME で変更できます。 ========================================================= */ .intro-loader{ transition:opacity .95s var(--ease-standard),visibility .95s; } .intro-loader__mark img{ opacity:0; transform:scale(.965); animation:loaderLogoIn 1.35s var(--ease-standard) .15s forwards; } .intro-loader__bar span{ animation-duration:1.9s; } @keyframes loaderLogoIn{ to{opacity:1;transform:scale(1)} } /* スマホのヘッダー色は PC 左メニューの --sidebar-bg と完全連動 */ @media(max-width:768px){ .mobile-bar{background:var(--sidebar-bg) !important} } /* ========================================================= LOADING SCREEN — かんたん設定 ローディング画面の見た目は、下の3項目を変更するだけで調整できます。 ========================================================= */ :root{ --loader-bg:#f1e7d0; /* ローディング背景：ベージュ */ --loader-line:#d95c73; /* ロゴ下のピンクライン */ --loader-logo-width:clamp(300px,48vw,420px); /* PC：ロゴ＋ラインの横幅 */ --loader-logo-width-sp:min(42vw,190px); /* SP：ロゴ＋ラインの横幅 */ } /* ロゴとラインを同じ幅にする */ .intro-loader{ background:var(--loader-bg) !important; color:var(--text-main); gap:22px; } .intro-loader__mark{ width:var(--loader-logo-width); margin-inline:auto; } .intro-loader__mark picture, .intro-loader__mark img{ width:100%; } .intro-loader__mark img{ max-height:44vh; object-fit:contain; } .intro-loader__bar{ width:var(--loader-logo-width); height:2px; margin-inline:auto; background:rgba(217,92,115,.20); overflow:hidden; } .intro-loader__bar span{ width:100%; background:var(--loader-line); } @media(max-width:768px){ .intro-loader__mark, .intro-loader__bar{ width:var(--loader-logo-width-sp); } .intro-loader__mark img{ max-height:56vh; } } /* ========================================================= STORY — numbered scene-photo composition - Existing site colors and fonts are inherited. - Replace images/story/story1.jpg ... story3.jpg to update stills. ========================================================= */ .story-feature{ display:grid; grid-template-columns:clamp(96px,10vw,145px) minmax(0,1fr); gap:clamp(24px,4vw,58px); align-items:start; max-width:1160px; margin:0 auto clamp(64px,8vw,112px); } .story-feature__number{ position:relative; padding-top:8px; color:var(--accent); font-family:var(--font-en); } .story-feature__number::after{ content:""; display:block; width:100%; height:1px; margin-top:20px; background:currentColor; opacity:.7; } .story-feature__number-en{ display:block; margin-bottom:7px; font-size:10px; letter-spacing:.2em; } .story-feature__number strong{ display:block; font-size:clamp(52px,6vw,84px); font-weight:500; line-height:.9; letter-spacing:-.045em; } .story-feature__number-ja{ display:block; margin-top:14px; color:var(--text-main); font-family:var(--font-ja); font-size:13px; letter-spacing:.18em; } .story-gallery{min-width:0} .story-gallery figure{margin:0;overflow:hidden;background:rgba(48,41,54,.06)} .story-gallery img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-standard),filter .6s; } .story-gallery__main{aspect-ratio:16/9} .story-gallery__main img{filter:saturate(.86) contrast(.96)} .story-gallery__main:hover img{transform:scale(1.018);filter:saturate(.96) contrast(1)} .story-gallery__thumbs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,1.3vw,18px); width:min(72%,760px); margin:clamp(10px,1.4vw,18px) 0 0 auto; } .story-gallery__thumbs figure{aspect-ratio:16/9} .story-gallery__thumbs img{filter:saturate(.78) contrast(.96)} .story-gallery__thumbs figure:hover img{transform:scale(1.035);filter:saturate(.94) contrast(1)} @media(max-width:768px){ .story-feature{ grid-template-columns:1fr; gap:20px; margin-bottom:56px; } .story-feature__number{ display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:end; width:100%; padding-top:0; } .story-feature__number::after{ position:absolute; right:0; bottom:7px; width:calc(100% - 148px); margin:0; } .story-feature__number-en{margin:0 0 5px;font-size:9px} .story-feature__number strong{font-size:52px} .story-feature__number-ja{margin:0 0 5px;font-size:12px} .story-gallery__thumbs{width:86%;gap:8px;margin-top:8px} } /* ========================================================= STORY v3 — かんたん設定 / NUMBER + SCENE GALLERY ナンバー部分の見た目は、下の変数だけで簡単に変更できます。 ========================================================= */ :root{ --story-number-bg:var(--contact-bg); /* 通常時：四角の背景（2026-08-22：フッター（CONTACT）と同じ濃い茶色に変更、v39） */ --story-number-text:#a99b91; /* 通常時：文字色 */ --story-number-hover-bg:var(--accent); /* ホバー／選択中：背景色 */ --story-number-hover-text:#000; /* ホバー／選択中：文字色 */ --story-number-border:rgba(201,86,98,.28); /* 通常時：下線 */ --story-number-font:var(--font-en); /* ナンバーのフォント */ --story-number-font-size:12px; /* ナンバーの文字サイズ */ --story-number-font-weight:600; /* ナンバーの太さ */ --story-number-letter-spacing:.08em; /* ナンバーの字間 */ --story-number-height:42px; /* 四角の高さ */ --story-number-gap:3px; /* 四角同士の隙間 */ } .story .sec-head{ max-width:1160px; margin-left:auto; margin-right:auto; margin-bottom:22px; } /* ナンバー列の後ろは STORY 本体と同じ背景色に連動 */ .story-episodes{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--story-number-gap); max-width:1160px; margin:0 auto 28px; padding:12px 16px; background:var(--story-bg); } .story-episodes button{ appearance:none; min-width:0; min-height:var(--story-number-height); padding:0 4px; border:0; border-bottom:1px solid var(--story-number-border); background:var(--story-number-bg); color:var(--story-number-text); font-family:var(--story-number-font); font-size:var(--story-number-font-size); font-weight:var(--story-number-font-weight); line-height:1; letter-spacing:var(--story-number-letter-spacing); cursor:pointer; transition:background-color .28s var(--ease-standard),color .28s var(--ease-standard),border-color .28s var(--ease-standard),transform .28s var(--ease-standard); } .story-episodes button:hover, .story-episodes button:focus-visible, .story-episodes button.is-active{ background:var(--story-number-hover-bg); color:var(--story-number-hover-text); border-bottom-color:var(--story-number-hover-bg); } .story-episodes button:focus-visible{ outline:2px solid var(--text-main); outline-offset:2px; } .story-visual{ max-width:1000px; margin:0 auto clamp(72px,9vw,120px); padding:0 clamp(12px,2vw,24px); } .story-visual figure{ margin:0; overflow:hidden; background:rgba(48,41,54,.06); } .story-visual img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-standard),filter .6s,opacity .28s ease; } .story-visual__main{ aspect-ratio:16/9; } .story-visual__main img{ filter:saturate(.88) contrast(.97); } .story-visual__main img.is-changing{ opacity:.25; transform:scale(.995); } .story-visual__main:hover img{ transform:scale(1.015); filter:saturate(.98); } .story-visual__thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; } .story-thumb{ appearance:none; position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; overflow:hidden; border:1px solid transparent; background:transparent; cursor:pointer; transition:border-color .25s var(--ease-standard),transform .25s var(--ease-standard),opacity .25s; } .story-thumb img{ filter:saturate(.82) contrast(.96); } .story-thumb:hover img, .story-thumb:focus-visible img, .story-thumb.is-active img{ transform:scale(1.025); filter:saturate(.98); } .story-thumb.is-active{ border-color:var(--accent); } .story-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .story-layout--compact{padding-top:0} /* 少し狭くなった段階からナンバーを折り返す */ @media(max-width:980px){ .story-episodes{ grid-template-columns:repeat(6,minmax(0,1fr)); } } @media(max-width:768px){ .story .sec-head{margin-bottom:16px} .story-episodes{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--story-number-gap); margin:0 0 20px; padding:10px 0; } .story-episodes button{ min-height:38px; font-size:calc(var(--story-number-font-size) - 1px); } .story-visual{padding:0;margin-bottom:54px} .story-visual__thumbs{gap:6px;margin-top:6px} } @media(max-width:420px){ .story-episodes{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ========================================================= STREAMING — かんたん設定 配信情報の色・フォント・サイズは、基本的にここだけで変更できます。 ========================================================= */ :root{ --streaming-bg:var(--onair-bg); /* セクション背景：ONAIRと連動 */ --streaming-row-bg:var(--onair-card-bg); /* 各配信サービス行の背景 */ --streaming-border:var(--onair-border); /* 枠線 */ --streaming-heading-color:#000000; /* STREAMING INFORMATION 見出し */ --streaming-service-color:#000000; /* サービス名 */ --streaming-text-color:#000000; /* 日付・時間 */ --streaming-note-color:#000000; /* 注記 */ --streaming-heading-font:var(--font-ja); /* グループ見出し */ --streaming-service-font:var(--font-ja); /* サービス名 */ --streaming-text-font:var(--font-ja); /* 日付・時間 */ --streaming-group-title-size:clamp(16px,1.5vw,20px); --streaming-service-size:clamp(13px,1.15vw,16px); --streaming-text-size:clamp(13px,1.1vw,15px); --streaming-note-size:11px; } .streaming{background:var(--streaming-bg)} .streaming .sec-head h2{color:var(--streaming-heading-color)} .streaming-list{ display:flex; flex-direction:column; gap:clamp(42px,5vw,68px); max-width:1180px; margin:0 auto; } .streaming-group h3{ margin:0 0 18px; text-align:center; color:var(--streaming-text-color); font-family:var(--streaming-heading-font); font-size:var(--streaming-group-title-size); font-weight:600; line-height:1.6; letter-spacing:.08em; } .streaming-group__rows{ display:flex; flex-direction:column; gap:10px; } .streaming-row{ position:relative; display:grid; grid-template-columns:minmax(180px,.9fr) minmax(210px,1fr) minmax(220px,1.15fr); align-items:center; gap:clamp(20px,4vw,64px); min-height:82px; padding:18px clamp(22px,3vw,40px); border:1px solid var(--streaming-border); background:var(--streaming-row-bg); transition:transform .35s var(--ease-standard),box-shadow .35s,background .35s; } /* 2026-09-09追記：サービス名だけでなくカード全体をクリック可能にするための ストレッチリンク。実際に遷移するのは .streaming-row__service 内の のリンク先です（＝各サービスのTOPページURL）。 */ .streaming-row__service a::after{ content:""; position:absolute; inset:0; z-index:1; } .streaming-row:hover{ transform:translateX(7px); box-shadow:7px 7px 0 var(--accent); } .streaming-row p{margin:0} .streaming-row__service, .streaming-row__service a{ color:var(--streaming-service-color); font-family:var(--streaming-service-font); font-size:var(--streaming-service-size); font-weight:600; line-height:1.5; text-decoration-color:currentColor; text-underline-offset:.2em; } .streaming-row__date, .streaming-row__time{ color:var(--streaming-text-color); font-family:var(--streaming-text-font); font-size:var(--streaming-text-size); font-weight:500; line-height:1.65; } .streaming-row__time small{ margin-left:.45em; color:var(--streaming-note-color); font-size:var(--streaming-note-size); font-weight:400; } /* 2026-09-09追記：配信情報リストの上下に添える注釈（順次配信開始・掲載順など） */ .streaming-footnote{ max-width:1180px; margin:16px auto 0; text-align:right; color:var(--streaming-note-color); font-family:var(--streaming-text-font); font-size:var(--streaming-note-size); line-height:1.6; } @media(max-width:768px){ .streaming-list{gap:38px} .streaming-group h3{text-align:left;margin-bottom:12px} .streaming-row{ grid-template-columns:1fr; gap:7px; min-height:0; padding:20px; } .streaming-row:hover{transform:none;box-shadow:5px 5px 0 var(--accent)} .streaming-row__time small{display:block;margin:.25em 0 0} } /* ========================================================= STAFF・CAST — かんたん設定 / FIXED VERTICAL LAYOUT ※ このブロックは style.css の最後に置いてあります。 ※ ここだけ編集すれば、色・フォント・文字サイズを変更できます。 ========================================================= */ :root{ --staffcast-row-bg: rgba(255,255,255,.46); /* 1行の背景 */ --staffcast-row-border: rgba(48,41,54,.36); /* 枠線 */ --staffcast-role-color: var(--accent); /* 役職・役名 */ --staffcast-name-color: var(--text-main); /* 氏名 */ --staffcast-sub-color: var(--lavender); /* 英字・補足 */ --staffcast-role-font: var(--font-ja); --staffcast-name-font: var(--font-ja); --staffcast-sub-font: var(--font-en); --staffcast-role-size: 12px; --staffcast-name-size: var(--streaming-service-size); /* ※2026-08-19更新：配信一覧（STREAMING）のサービス名と同じサイズに調整 */ --staffcast-sub-size: 10px; /* STAFF／CASTのグループ見出し文字（※2026-08-17 追加） */ --staffcast-group-title-color: var(--text-main); --staffcast-group-title-font: var(--font-ja); --staffcast-group-title-size: clamp(18px,1.8vw,24px); /* リンクがある行だけに出るホバー時の影の色（※2026-08-18 追加） */ --staffcast-hover-shadow: var(--accent); } /* STAFFグループ・CASTグループを縦に並べる外枠（※2026-08-17 追加） */ .staffcast-list{ display:flex; flex-direction:column; gap:clamp(34px,4.5vw,56px); } .staffcast-group__title{ margin:0 0 16px; max-width:1180px; margin-inline:auto; padding-left:clamp(22px,3vw,40px); text-align:left; color:var(--staffcast-group-title-color); font-family:var(--staffcast-group-title-font); font-size:var(--staffcast-group-title-size); font-weight:700; letter-spacing:.1em; } /* 3列カード指定を上書きして、ONAIRと同じ縦1列に固定 */ .staffcast .staffcast-grid{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:12px !important; max-width:1180px; margin:0 auto; background:transparent !important; border:0 !important; } /* 行の器：リンクが無い
と、リンクがある の両方に同じ見た目を適用します（※2026-08-18：リンク対応で にも対応） */ .staffcast .staffcast-grid article, .staffcast .staffcast-grid a.staffcast-grid__link{ display:grid !important; grid-template-columns:minmax(150px,.72fr) minmax(220px,1fr) minmax(180px,.9fr) !important; align-items:center; gap:clamp(20px,4vw,64px); width:100%; min-height:82px !important; box-sizing:border-box; padding:18px clamp(22px,3vw,40px) !important; background:var(--staffcast-row-bg) !important; border:1px solid var(--staffcast-row-border) !important; transition:transform .35s var(--ease-standard),box-shadow .35s,background .35s; text-decoration:none; } /* リンクが無い行（
）：ホバーしても動きません（※2026-08-18 追加） ※3列カード用の旧ルール(.staffcast-grid article:hover)がSTAFF・CASTの 行にも効いてしまい、リンクが無い行まで浮き上がっていた不具合を 2026-08-18に修正（transform/背景を明示的にno-opへ上書き）。 */ .staffcast .staffcast-grid article{ cursor:default; } .staffcast .staffcast-grid article:hover{ transform:none !important; background:var(--staffcast-row-bg) !important; box-shadow:none !important; } /* リンクがある行（）だけ、ホバー時に浮き上がって動きます （※2026-08-18 追加。影の色は --staffcast-hover-shadow で変更可） ※2026-08-19 修正：この:hoverを常時有効にしていると、スマホ（iPhone等）では 「1回目のタップ＝ホバー状態の表示のみ、2回目のタップでようやく反応」という ブラウザの仕様に引っかかり、タップしても開かない/反応が鈍く感じる不具合が 起きるため、「マウスで正しくホバーできる機器のときだけ」に限定しました （@media(hover:hover)）。スマホでのタップ動作には影響しません。 */ .staffcast .staffcast-grid a.staffcast-grid__link{ cursor:pointer; } @media(hover:hover){ .staffcast .staffcast-grid a.staffcast-grid__link:hover{ position:relative; z-index:1; transform:translateX(7px) !important; background:var(--staffcast-row-bg) !important; box-shadow:7px 7px 0 var(--staffcast-hover-shadow); } } .staffcast .staffcast-grid article p, .staffcast .staffcast-grid article h3, .staffcast .staffcast-grid article span, .staffcast .staffcast-grid a.staffcast-grid__link p, .staffcast .staffcast-grid a.staffcast-grid__link h3, .staffcast .staffcast-grid a.staffcast-grid__link span{ margin:0 !important; } .staffcast .staffcast-grid article p, .staffcast .staffcast-grid a.staffcast-grid__link p{ color:var(--staffcast-role-color) !important; font-family:var(--staffcast-role-font); font-size:var(--staffcast-role-size) !important; font-weight:500; line-height:1.6; letter-spacing:.14em; } .staffcast .staffcast-grid article h3, .staffcast .staffcast-grid a.staffcast-grid__link h3{ color:var(--staffcast-name-color) !important; font-family:var(--staffcast-name-font); font-size:var(--staffcast-name-size) !important; font-weight:600; line-height:1.45; } .staffcast .staffcast-grid article span, .staffcast .staffcast-grid a.staffcast-grid__link span{ color:var(--staffcast-sub-color) !important; font-family:var(--staffcast-sub-font); font-size:var(--staffcast-sub-size) !important; font-weight:500; line-height:1.5; letter-spacing:.14em; } @media(max-width:768px){ .staffcast-list{gap:30px} .staffcast-group__title{padding-left:20px} .staffcast .staffcast-grid{gap:10px !important} .staffcast .staffcast-grid article, .staffcast .staffcast-grid a.staffcast-grid__link{ grid-template-columns:1fr !important; gap:7px; min-height:0 !important; padding:20px !important; } @media(hover:hover){ .staffcast .staffcast-grid a.staffcast-grid__link:hover{ transform:none !important; box-shadow:5px 5px 0 var(--staffcast-hover-shadow); } } } /* ========================================================= STAFF・CAST — COMMENTバッジ かんたん設定 ※2026-08-19 追加 プロフィールポップアップ（data-staff-photo／data-staff-comment）が 設定された行にだけ、js/main.jsが自動的に「COMMENT」バッジを追加します （HTMLに書く必要はありません）。行の3列目（英字表記があった位置）に 表示され、ホバー時は塗りつぶしに切り替わります。 ========================================================= */ :root{ --staffcast-badge-color: var(--lavender); /* 通常時：文字・枠線・アイコンの色（2026-08-19：ローマ字表記と同じ薄藤色に変更） */ --staffcast-badge-hover-text: #ffffff; /* ホバー時：文字・アイコンの色 */ --staffcast-badge-hover-bg: var(--accent); /* ホバー時：背景色（引き続きコーラルピンク） */ } /* ※2026-08-19 修正：STAFF・CASTの行にある「英字表記の」向けの 共通スタイル（.staffcast-grid a.staffcast-grid__link span、!important指定あり） は、CSSの詳細度（specificity）がこのバッジ（実体は）単体への指定より高いため、!importantを 付けただけでは負けてしまい、色・文字サイズ等が意図せず薄藤色 （--staffcast-sub-color）に上書きされる不具合がありました。 バッジ本体・中の文字（COMMENT）ともに、詳細度で確実に上回るよう 親要素までを含めたセレクタ（.staffcast .staffcast-grid a.staffcast-grid__link .staffcast-badge）＋!importantで上書きしています。 */ .staffcast .staffcast-grid a.staffcast-grid__link .staffcast-badge{ /* ローマ字表記（）と同じ「列の左端」に揃うよう justify-self:start に変更（以前はend指定で右端に寄っていました） */ justify-self:start !important; display:inline-flex !important; align-items:center; gap:7px; padding:8px 16px; border:1px solid var(--staffcast-badge-color); border-radius:999px; color:var(--staffcast-badge-color) !important; font-family:var(--font-en) !important; font-size:10px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:.16em !important; white-space:nowrap; margin:0 !important; transition:background .3s var(--ease-standard),color .3s var(--ease-standard); } .staffcast-badge__icon{flex:none} .staffcast .staffcast-grid a.staffcast-grid__link .staffcast-badge span{ color:inherit !important; font-family:inherit !important; font-size:inherit !important; font-weight:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; margin:0 !important; } /* ホバー可能な機器（マウス等）でのみ塗りつぶし。スマホのタップでは :focus-visible（キーボード操作等）のみ適用し、:hoverはタップの 誤反応を防ぐため対象外にしています（詳細は上のリンクの:hoverと同じ理由）。 */ @media(hover:hover){ .staffcast .staffcast-grid a.staffcast-grid__link:hover .staffcast-badge{ background:var(--staffcast-badge-hover-bg) !important; color:var(--staffcast-badge-hover-text) !important; } } .staffcast .staffcast-grid a.staffcast-grid__link:focus-visible .staffcast-badge{ background:var(--staffcast-badge-hover-bg) !important; color:var(--staffcast-badge-hover-text) !important; } @media(max-width:768px){ .staffcast-badge{justify-self:start !important} } /* ========================================================= STAFF・CAST — PROFILE MODAL（写真＋コメントのポップアップ）かんたん設定 ※2026-08-19 追加 staffcast-grid__link に data-staff-photo / data-staff-comment を 追加した行をクリックすると開きます（js/main.jsで制御）。 色・フォントはサイト共通の変数（--contact-bg, --accent 等）に 合わせてあるので、他の項目と統一感が出ます。 ========================================================= */ :root{ --staffcast-modal-bg: var(--contact-bg); /* パネルの背景色 */ --staffcast-modal-text: #ffffff; /* 氏名・本文の基本文字色 */ --staffcast-modal-role-color: var(--accent); /* 役職・役名の色 */ --staffcast-modal-comment-color: #efe9f2; /* コメント本文の色 */ --staffcast-modal-border: var(--accent); /* 影・アクセントの色 */ --staffcast-modal-photo-width: 42%; /* 写真エリアの幅（PC時） */ } .staff-modal{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:clamp(20px,4vw,60px); } .staff-modal.is-open{display:flex} .staff-modal__overlay{ position:absolute; inset:0; border:0; margin:0; padding:0; background:rgba(20,16,22,.78); cursor:pointer; } .staff-modal__panel{ position:relative; display:grid; grid-template-columns:var(--staffcast-modal-photo-width) 1fr; width:100%; max-width:860px; max-height:86vh; overflow:auto; background:var(--staffcast-modal-bg); color:var(--staffcast-modal-text); box-shadow:14px 14px 0 var(--staffcast-modal-border); border:1px solid rgba(255,255,255,.14); animation:staffModalIn .35s var(--ease-standard) both; } @keyframes staffModalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .staff-modal__photo{ min-height:280px; background:#000; overflow:hidden; } .staff-modal__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; } .staff-modal__photo img[src=""]{display:none} .staff-modal__info{ padding:clamp(30px,4vw,54px); display:flex; flex-direction:column; gap:16px; min-width:0; } .staff-modal__role{ margin:0; color:var(--staffcast-modal-role-color); font-family:var(--font-ja); font-size:13px; font-weight:600; letter-spacing:.14em; } .staff-modal__info h3{ margin:0; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.3); color:var(--staffcast-modal-text); font-family:var(--font-ja); font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1.3; } .staff-modal__comment{ margin:0; color:var(--staffcast-modal-comment-color); font-family:var(--font-ja); font-size:clamp(14px,1.3vw,16px); line-height:1.9; white-space:pre-line; } .staff-modal__close{ position:absolute; top:16px; right:16px; z-index:1; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.25); color:#fff; font-size:18px; line-height:1; cursor:pointer; transition:background .3s,transform .3s; } .staff-modal__close:hover, .staff-modal__close:focus-visible{ background:var(--staffcast-modal-border); transform:rotate(90deg); } @media(max-width:768px){ .staff-modal{padding:0} .staff-modal__panel{ /* ※2026-08-20 修正：スマホ幅では「写真が縦に長い場合、CSS Gridの 段組み（display:grid）のままだと写真エリアの高さが画面の高さに 収まるよう強制的に縮められてしまい、写真が見切れる」という Grid特有の挙動があったため、display:blockに変更しました。 display:blockなら、写真→テキストの順に「必要な高さぶんだけ」 自然に積み重なり、画面に収まらない分はパネル自体（下記の overflow:auto、元から設定済み）で縦スクロールできます。 */ display:block; max-width:none; width:100%; height:100%; max-height:none; -webkit-overflow-scrolling:touch; } /* ※2026-08-20 修正：以前はここで写真エリアの高さを画面の38%に固定し、 object-fit:coverで写真を「切り抜いて」表示していたため、顔や体の 一部が見切れてしまう不具合がありました。写真を切り抜かずに そのままの縦横比で全体を表示するよう変更しています （高さは指定せず、幅いっぱい×自然な縦横比のままの高さになります）。 */ .staff-modal__photo{ min-height:0; } .staff-modal__photo img{ height:auto; object-fit:contain; object-position:center top; } } /* ========================================================= NEWS — DETAIL MODAL（日付・件名・本文・写真のポップアップ）かんたん設定 ※2026-08-22 追加 news-list内のに data-news-body（本文）／data-news-photo（写真）を 追加した行をクリックすると開きます（js/main.jsで制御）。 日付・カテゴリ（WEB/MEDIA等）・件名は、行に元々ある