/*
Theme Name: Pakopan LP
Theme URI:
Description: 「ぱこぱん」公式サイト用の子テーマ。トップページを専用LPに置き換えます。親テーマ（XWRITE）のフォルダ名は下の Template で指定しています。親テーマが XWRITE 以外の場合は Template の値を親テーマのフォルダ名に書き換えてください。
Author:
Template: xwrite
Version: 1.8.0
Text Domain: pakopan-lp
*/

/* =========================================================
   Pakopan LP  —  すべて #pk-lp 配下にスコープしています
   （他ページ／親テーマの見た目に影響しないようにするため）
   ========================================================= */

#pk-lp {
  /* ---- カラートークン（ここを変えると全体の色が変わります） ---- */
  --ink:        #141414;
  --orange:     #ffa400;   /* 登場人物カードの色 */
  --orange-btn: #f7a31e;   /* ヘッダーボタンの色 */
  --purple:     #d89bf6;   /* ヒーロー・サムネ・動画・CTAのプレースホルダー色 */
  --yellow:     #ffe100;   /* ロゴの山 */
  --footer:     #1a1a1a;

  /* ---- レイアウト ---- */
  --maxw: 1120px;          /* 本文の最大幅 */
  --pad: 20px;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
#pk-lp *, #pk-lp *::before, #pk-lp *::after { box-sizing: border-box; }
html.pk-html, body.pk-body { margin: 0; padding: 0; }
body.pk-body { background: #fff; }

#pk-lp img { max-width: 100%; }
.pk-ph { display: block; width: 100%; height: 100%; }
.pk-ph--purple { background: var(--purple); }
.pk-ph--orange { background: var(--orange); }

/* ---------------- Header (sticky / 追従) ---------------- */
.pk-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #efefef;
}
.pk-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pk-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pk-logo__mark { display: inline-flex; width: clamp(34px, 5vw, 44px); }
.pk-logo__mark svg { width: 100%; height: auto; display: block; }
.pk-logo__text {
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800;
  font-size: clamp(20px, 3vw, 28px); letter-spacing: .02em;
}
.pk-logo__img { height: clamp(28px, 5vw, 42px); width: auto; display: block; }
.pk-cta-pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--orange-btn); color: #141414;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 2px solid #141414; border-radius: 999px;
  padding: 9px 22px; font-size: clamp(12px, 1.6vw, 16px);
  transition: transform .15s ease, filter .15s ease;
}
.pk-cta-pill:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pk-cta-pill__arrow { font-size: .9em; line-height: 1; }

/* ---------------- Hero carousel ---------------- */
.pk-hero { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad) 0; }
.pk-hero__stage { position: relative; }
.pk-hero__viewport { overflow: hidden; }
.pk-hero__track { display: flex; transition: transform .4s ease; }
.pk-hero__slide { flex: 0 0 100%; aspect-ratio: 1120 / 840; }
.pk-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 0 10px;
  color: #fff; font-size: clamp(13px, 1.8vw, 20px); line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
.pk-hero__arrow:hover { color: #fff; opacity: .85; }
.pk-hero__arrow--prev { left: 4px; }
.pk-hero__arrow--next { right: 4px; }

/* thumbnails */
.pk-thumbs {
  margin-top: 12px;
  display: flex; gap: 2px;
}
.pk-thumb {
  flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 1120 / 840; position: relative; overflow: hidden;
}
.pk-thumb img, .pk-thumb .pk-ph { width: 100%; height: 100%; object-fit: cover; }
.pk-thumb::after {
  content: ""; position: absolute; inset: 0;
  outline: 0 solid var(--orange); outline-offset: -3px; transition: outline-width .12s ease;
}
.pk-thumb.is-active::after { outline-width: 3px; }
.pk-thumb:not(.is-active) { opacity: .82; }

/* ---------------- Intro: title + description + video ---------------- */
.pk-intro { max-width: 820px; margin: 0 auto; padding: 70px var(--pad) 0; text-align: center; }
.pk-h2 {
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800;
  font-size: clamp(24px, 4.4vw, 36px); margin: 0 0 30px;
}
.pk-desc { font-size: clamp(14px, 1.8vw, 16px); margin: 0 auto 42px; text-align: left; }
.pk-video-section { max-width: var(--maxw); margin: 0 auto; padding: 50px var(--pad) 0; }
.pk-video { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 16 / 9; }
.pk-video iframe, .pk-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pk-video video { object-fit: contain; }
.pk-video__ph { display: flex; align-items: center; justify-content: center; }
.pk-video__ph span {
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(28px, 5vw, 44px);
}

/* 中央の丸い再生ボタン（再生していないとき表示） */
.pk-playbtn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(54px, 8vw, 82px); height: clamp(54px, 8vw, 82px);
  border: 0; border-radius: 50%; padding: 0; cursor: pointer; z-index: 3;
  background: rgba(20, 20, 20, .55);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease, opacity .2s ease;
}
.pk-playbtn svg { width: 42%; height: 42%; fill: #fff; margin-left: 6%; }
.pk-playbtn:hover { background: rgba(20, 20, 20, .78); transform: translate(-50%, -50%) scale(1.06); }
.pk-playbtn--static { pointer-events: none; }
.pk-video.is-playing .pk-playbtn { opacity: 0; pointer-events: none; }
.pk-video video { cursor: pointer; }

/* ゲーム概要欄 */
.pk-overview { max-width: 600px; margin: 40px auto 0; text-align: left; }
.pk-overview__list {
  display: grid; grid-template-columns: max-content max-content 1fr;
  gap: 10px 12px;
  border: 1px solid #dcdcdc; border-radius: 5px; padding: 22px 26px; margin: 0;
}
.pk-overview__row { display: contents; }
.pk-overview__k { font-weight: 700; }
.pk-overview__sep { text-align: center; }
.pk-overview__v { margin: 0; }
.pk-overview__k, .pk-overview__sep, .pk-overview__v { line-height: 1.8; font-size: clamp(13px, 1.6vw, 15px); }

/* ---------------- Characters slider (center mode / full-bleed) ---------------- */
.pk-chars { padding: 120px 0 0; }
.pk-chars__title { text-align: center; margin: 0 0 34px; }
.pk-chars__carousel { position: relative; }
.pk-chars__viewport { overflow: hidden; }
.pk-chars__track {
  display: flex; gap: 16px; will-change: transform; transition: transform .45s ease;
  padding-left: 0;
}
.pk-chars__slide {
  flex: 0 0 auto;
  width: calc(min(var(--maxw), 100vw) - (var(--pad) * 2)); /* TOP画像と同じ表示幅 */
  aspect-ratio: 1400 / 1000;
  opacity: .55; transition: opacity .35s ease;
}
.pk-chars__slide.is-active { opacity: 1; }
.pk-chars__slide img, .pk-chars__slide .pk-ph { width: 100%; height: 100%; object-fit: cover; }
.pk-chars__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20,20,20,.4); color: #fff; font-size: 26px; line-height: 50px;
  transition: background .15s ease;
}
.pk-chars__arrow:hover { background: rgba(20,20,20,.65); }
.pk-chars__arrow--prev { left: 14px; }
.pk-chars__arrow--next { right: 14px; }

/* ---------------- CTA ---------------- */
.pk-cta { display: flex; justify-content: center; padding: 90px var(--pad) 150px; }
.pk-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); color: #141414; text-decoration: none;
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800;
  font-size: clamp(16px, 2.4vw, 22px);
  padding: 34px 70px; border-radius: 36px;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pk-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 rgba(0,0,0,.10); }
.pk-cta__imglink { display: inline-block; line-height: 0; transition: transform .15s ease; }
.pk-cta__imglink:hover { transform: translateY(-2px); }
.pk-cta__img { display: block; max-width: min(100%, 680px); height: auto; }

/* ---------------- Footer ---------------- */
.pk-footer { background: var(--footer); color: #fff; padding: 70px var(--pad) 150px; text-align: center; }
.pk-footer__copy { margin: 0; font-size: 13px; letter-spacing: .04em; color: #e9e9e9; }

/* ---------------- Responsive ---------------- */
@media (max-width: 999px)  { .pk-chars { padding-top: 90px; } }
@media (max-width: 680px) {
  .pk-thumbs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .pk-thumb { flex: 0 0 23%; }
  .pk-intro { padding-top: 50px; }
  .pk-cta { padding: 60px var(--pad) 90px; }
  .pk-cta__btn { padding: 26px 44px; }
  .pk-footer { padding: 50px var(--pad) 80px; }
}

@media (prefers-reduced-motion: reduce) {
  #pk-lp .pk-hero__track, #pk-lp .pk-chars__track, #pk-lp .pk-chars__slide,
  #pk-lp .pk-cta__btn, #pk-lp .pk-cta-pill { transition: none !important; }
}

/* クリック時などにフォーカス枠（変な枠）を出さない */
#pk-lp .pk-hero__arrow:focus, #pk-lp .pk-hero__arrow:focus-visible,
#pk-lp .pk-chars__arrow:focus, #pk-lp .pk-chars__arrow:focus-visible,
#pk-lp .pk-thumb:focus, #pk-lp .pk-thumb:focus-visible,
#pk-lp .pk-cta-pill:focus, #pk-lp .pk-cta__btn:focus, #pk-lp .pk-cta__imglink:focus { outline: none; box-shadow: none; }