/* ============================================================
   common.css … 全ページ共通（ヘッダーのCONTACTタブ／フッターのSNSボタン）
   各HTMLの <head> の、いちばん最後に読み込みます。
   ★オレンジの色を変えるときは --contact の値だけ書き換えます
   ============================================================ */
:root { --contact: #f7941d; --contact-dark: #e07f08; }

/* ---- ヘッダー：CONTACT をオレンジのタブに（FOREST LAB の赤タブと同じ雰囲気） ---- */
.gnav__contact-item { align-items: stretch !important; margin-left: 10px; }
.gnav .gnav__contact { display: flex; align-items: center; padding: 0 clamp(18px, 2.4vw, 34px); border-radius: 0; background: var(--contact); color: #fff; transition: background .25s, color .25s; }
.gnav .gnav__contact::after { display: none; }
.gnav .gnav__contact:hover { background: var(--tiff); color: var(--ink); }
@media (max-width: 900px) {
  .gnav__contact-item { margin-left: 0; }
  .gnav .gnav__contact { display: block; margin-top: 6px; padding: .9em 1em; border-radius: 12px; text-align: center; }
}

/* ---- フッター：SNSボタン（白いマークを色つきの丸の上に） ---- */
.sns-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer__inner { grid-template-columns: 1.3fr auto auto auto !important; }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr !important; } .sns-links { flex-direction: row; justify-content: center; } }
.sns-links a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff;
  box-shadow: 0 3px 0 rgba(29, 43, 46, .18); transition: transform .25s, box-shadow .25s;
}
.sns-links a:hover, .sns-links a:focus-visible { transform: translateY(-4px) rotate(-6deg); box-shadow: 0 7px 0 rgba(29, 43, 46, .16); }
.sns-links svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.sns-links .sns--x { background: #1d2b2e; }
.sns-links .sns--ig { background: linear-gradient(45deg, #f7941d, #e1306c 55%, #7b4fd6); }
.sns-links .sns--fb { background: #1877f2; }

/* ============================================================
   作品ごとのテーマ色  … data-theme="teal|yellow|red|blue" を付けると、その色になります
   ドンドラ=teal / ピーピング=yellow / ギガント=red / ミトイテ=blue
   ============================================================ */
[data-theme="teal"]   { --theme: #1a9c8d; --theme-pale: #dff5f1; --theme-ink: #fff; }
[data-theme="yellow"] { --theme: #f2b632; --theme-pale: #fdf1cf; --theme-ink: #1d2b2e; }
[data-theme="red"]    { --theme: #c8262d; --theme-pale: #fbe3e3; --theme-ink: #fff; }
[data-theme="blue"]   { --theme: #3f6fe0; --theme-pale: #e1e9fb; --theme-ink: #fff; }
[data-theme="orange"] { --theme: #f7941d; --theme-pale: #fdebd2; --theme-ink: #1d2b2e; }
.card[data-theme], .work-card[data-theme] { --accent: var(--theme); }
.work-card[data-theme]::after { background: var(--theme); }
.work-card[data-theme] .tag, .banner[data-theme] .banner__tag { background: var(--theme-pale); color: #1d2b2e; }
body[data-theme] .page-hero { background: var(--theme-pale); }
body[data-theme] .page-hero::after { background: var(--theme); }
body[data-theme] .page-hero__ja::before { background: var(--theme); }

/* ============================================================
   WORKS：その他の作品（バナー一覧）  … 画像つきの横長バナーが、いくつでも並びます
   ============================================================ */
.banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.banner { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: 0 3px 0 rgba(29,43,46,.14), 0 10px 22px rgba(29,43,46,.08); transition: transform .3s, box-shadow .3s; }
a.banner:hover, a.banner:focus-visible { transform: translateY(-6px); box-shadow: 0 3px 0 rgba(29,43,46,.14), 0 18px 28px rgba(29,43,46,.16); }
.banner .ph { aspect-ratio: 16 / 7; background: var(--theme-pale, #e8f7f4); }
.banner__body { padding: 12px 16px 16px; border-top: 4px solid var(--theme, #1a9c8d); }
.banner__tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: .1em .8em; border-radius: 999px; background: #e8f7f4; margin-bottom: .4em; }
.banner__title { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1rem; line-height: 1.45; }
.banner__text { font-size: .8rem; color: #5b6b6e; margin-top: .2em; }

/* ============================================================
   SHOP：カード画像のスライドショー（js/slideshow.js が動かします）
   ============================================================ */
[data-slideshow] { position: relative; overflow: hidden; }
[data-slideshow] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
[data-slideshow] > img.is-on { opacity: 1; }

/* ---- 上映実績の年表：日付が長くても、右の文字と重ならないように ---- */
.timeline__year { white-space: nowrap; }
@media (min-width: 861px) { .timeline > li { grid-template-columns: 10.5em 1fr; } }

/* ---- TOP WORKS：小カード・横長カードの画像の高さをそろえて、行の高さのバランスを整える ---- */
@media (min-width: 861px) {
  .card--small .card__text { font-size: .82rem; color: #5b6b6e; }
}

/* ---- SNS・FHOのやつ：反応数の見せ方 ---- */
.fho-proof { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 32px; align-items: center; }
.fho-proof .ph { border-radius: 16px; overflow: hidden; background: #111; }
.fho-proof .note { grid-column: 1 / -1; }
.fho-nums { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fho-nums li { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 20px; background: #fff; border-left: 8px solid var(--yellow, #f2b632); border-radius: 12px; box-shadow: 0 3px 0 rgba(29,43,46,.12); }
.fho-nums b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; color: var(--red); }
.fho-nums span { font-weight: 700; }
@media (max-width: 860px) { .fho-proof { grid-template-columns: 1fr; } }
.fho-proof .ph { aspect-ratio: auto !important; height: auto; }
.fho-proof .ph__img { position: static !important; width: 100%; height: auto !important; object-fit: contain; }
.fho-proof .ph::before, .fho-proof .ph::after { display: none !important; }

/* ---- 作品ページ：章ごとの文章 ---- */
.chapter-text { max-width: 46em; margin: 0 0 clamp(20px, 3vw, 32px); line-height: 2; }
.chapter-text p + p { margin-top: .8em; }
.chapter-text strong { font-family: var(--font-heading, "Zen Maru Gothic", sans-serif); font-weight: 900; font-size: 1.15em; }

/* ---- mitoiteページ：縦長の紹介画像（そのままスクロールで読める） ---- */
.lp-scroll { max-width: 760px; margin: 0 auto; background: #fff; box-shadow: 0 6px 0 rgba(29,43,46,.12), 0 20px 40px rgba(29,43,46,.14); border-radius: 8px; overflow: hidden; }
.lp-scroll img { display: block; width: 100%; height: auto; }
.lp-scroll__empty { display: none; padding: 3em 1em; text-align: center; font-weight: 700; color: #5b6b6e; }
.lp-scroll.is-empty .lp-scroll__empty { display: block; }
/* ---- バリエーション一覧 ---- */
.vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.var { position: relative; padding: 22px 20px 24px; background: #fff; border-radius: 14px; border-top: 6px solid var(--theme, #3f6fe0); box-shadow: 0 3px 0 rgba(29,43,46,.14), 0 10px 22px rgba(29,43,46,.08); }
.var__no { font-family: var(--font-display); color: var(--theme, #3f6fe0); font-size: .9rem; }
.var__title { margin-top: .2em; font-family: var(--font-heading, "Zen Maru Gothic", sans-serif); font-weight: 900; font-size: 1.25rem; line-height: 1.4; }
.var__text { margin-top: .4em; font-size: .88rem; color: #5b6b6e; }
.var__badge { position: absolute; top: 14px; right: 14px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .06em; padding: .15em .8em; border-radius: 999px; }
.var.is-soon { border-top-style: dashed; background: #f6fbfa; }
.var.is-soon .var__badge { background: #9aa6a8; }

/* ---- mitoite：紹介画像を画面いっぱいの幅に ---- */
.lp-section { padding-inline: 0; }
.lp-scroll--full { max-width: none; width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
/* ---- mitoite：3シリーズ ---- */
.series { padding: clamp(20px, 3vw, 32px); background: #fff; border-radius: 16px; border-top: 6px solid var(--theme, #3f6fe0); box-shadow: 0 3px 0 rgba(29,43,46,.14), 0 12px 26px rgba(29,43,46,.08); }
.series--main { margin-bottom: clamp(24px, 4vw, 40px); }
.series__label { display: inline-block; background: var(--theme, #3f6fe0); color: #fff; font-weight: 900; font-size: .78rem; letter-spacing: .08em; padding: .15em .9em; border-radius: 999px; }
.series__label--sub { background: #e1e9fb; color: #1d2b2e; }
.series__title { margin-top: .5em; font-family: var(--font-heading, "Zen Maru Gothic", sans-serif); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4; }
.series__text { margin-top: .6em; line-height: 1.9; }
.series__imgs { display: grid; gap: 14px; margin-top: 18px; }
.series__imgs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.series__imgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.series__imgs .ph { aspect-ratio: 16 / 9; border-radius: 8px; }
.series-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 860px) {
  .series-sub { grid-template-columns: minmax(0, 1fr); }
  .series__imgs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- mitoite：シリーズの画像を大きく（クリックしなくても見えるサイズ） ---- */
.series__imgs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.series__imgs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.series__imgs--3 .ph:first-child { grid-column: 1 / -1; }
.series-sub { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .series__imgs--4, .series__imgs--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SERVICE：りんごの枠の中を、作品のスクショがゆっくり流れ続けます
   ★流れる速さ … --shots-speed の秒数（大きいほどゆっくり）
   ★スクショの大きさ … --shots-zoom（%。大きいほどスクショが大きく見えます）
   ============================================================ */
.shots { --shots-speed: 90s; --shots-zoom: 230%; position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #1d2b2e; }
.shots__drift { position: absolute; top: 0; left: 0; width: var(--shots-zoom); animation: shots-drift 40s ease-in-out infinite alternate; }
.shots__col { display: block; animation: shots-up var(--shots-speed) linear infinite; will-change: transform; }
.shots__col img { display: block; width: 100%; height: auto; max-width: none; }
@keyframes shots-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes shots-drift { from { transform: translateX(0); } to { transform: translateX(-40%); } }
@media (prefers-reduced-motion: reduce) { .shots__col, .shots__drift { animation: none; } }

/* ===== ポスター枠（アワード／劇場版）===== */
.poster-block { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 32px; align-items: start; margin-top: 28px; }
.poster-frame { position: relative; aspect-ratio: 1 / 1.414; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 6px 0 rgba(29,43,46,.12), 0 18px 36px rgba(29,43,46,.16); }
.poster-frame .ph__img, .poster-frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.poster-frame.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1em; }
.poster-block__text h3 { font-size: 1.25rem; margin: 0 0 .6em; line-height: 1.5; }
.poster-block__text p { margin: 0 0 1em; line-height: 1.9; }
.poster-block__text .big { font-size: 1.5rem; font-weight: 900; color: var(--red, #e8453c); line-height: 1.5; }
.poster-credits { font-size: .9rem; color: #5b6b6e; line-height: 1.8; }
@media (max-width: 720px) { .poster-block { grid-template-columns: 1fr; } .poster-frame { max-width: 320px; margin: 0 auto; } }

/* ===== クリックで原寸（軽量サムネ）===== */
.lp-thumb { position: relative; display: block; width: 100%; max-width: 900px; margin: 0 auto; padding: 0; border: 0; background: #fff; cursor: zoom-in; border-radius: 10px; overflow: hidden; max-height: 620px; box-shadow: 0 6px 0 rgba(29,43,46,.12), 0 20px 40px rgba(29,43,46,.14); }
.lp-thumb img { display: block; width: 100%; height: auto; }
.lp-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, rgba(255,255,255,.96)); pointer-events: none; }
.lp-thumb__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; background: var(--red, #e8453c); color: #fff; font-weight: 800; padding: .7em 1.6em; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.18); white-space: nowrap; }
.lp-section.is-empty-thumb .lp-thumb { display: none; }
.zoom-dialog { border: 0; padding: 0; background: rgba(15,25,28,.92); width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; }
.zoom-dialog::backdrop { background: rgba(15,25,28,.92); }
.zoom-dialog__body { height: 100%; overflow: auto; text-align: center; padding: 56px 0 24px; }
.zoom-dialog__body img { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #fff; }
.zoom-dialog__body img.is-poster { max-height: calc(100vh - 100px); width: auto; }
.zoom-dialog__close { position: fixed; top: 12px; right: 14px; z-index: 3; border: 0; border-radius: 999px; background: #fff; color: #1d2b2e; font-weight: 800; padding: .6em 1.2em; cursor: pointer; }
.zoom-dialog__loading { color: #fff; padding: 2em; }
[data-zoom] { cursor: zoom-in; }
.lp-thumb.is-empty { display: none; }
.lp-thumb__empty { display: none; text-align: center; padding: 3em 1em; font-weight: 700; color: #5b6b6e; }
.lp-thumb.is-empty + .lp-thumb__empty { display: block; }

/* ===== 作品詳細のメイン画像：入れた画像の縦横比のまま表示（画像がないときだけ枠の比率を表示）===== */
.work-visual:has(.ph__img) { aspect-ratio: auto; display: block; }
.work-visual .ph__img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; display: block; }
.work-visual--wide:not(:has(.ph__img)) { aspect-ratio: 1600 / 600; }
.work-visual:has(.ph__img)::after, .work-visual:has(.ph__img)::before { display: none; }

/* ===== 見どころ（盛り上げ文）===== */
.hype { max-width: 860px; margin: 0 auto; text-align: center; }
.hype__catch { font-size: clamp(1.5rem, 4.2vw, 2.4rem); font-weight: 900; line-height: 1.45; margin: 0 0 .8em; color: var(--theme, #1a9c8d); }
.hype__catch em { font-style: normal; background: linear-gradient(transparent 62%, rgba(232,69,60,.35) 62%); }
.hype p { line-height: 2; margin: 0 0 1em; text-align: left; }
.hype__end { text-align: center !important; font-weight: 800; font-size: 1.1rem; }

/* ===== コラボ実績 ===== */
.collab { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.collab li { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 0 rgba(29,43,46,.1); display: grid; gap: 4px; border-left: 6px solid var(--theme, #1a9c8d); }
.collab b { font-size: 1.05rem; }
.collab span { font-size: .92rem; line-height: 1.7; color: #4a5a5d; }
@media (max-width: 640px) { .collab { grid-template-columns: 1fr; } }