@charset "UTF-8";
/* ==========================================================================
   b.s. — characters.css（characters / PURE WINS）
   数値はIllustratorのデザイン座標（幅1280px基準）。
   キャラクターは支給ベクターデータ（assets/images/characters/*.svg）をそのまま使用。
   ========================================================================== */

@layer pages {
  .c-pagehero { --scene-h: 850; }

  /* 大きな白い円＋キャラクター */
  .p-chara-one { --scene-y: 850; --scene-h: 1300; }
  .p-chara-one__circle { --x: 77.5; --y: 956.0; --w: 1128.0; --h: 1128.0; --shape-c: var(--c-white); }
  .p-chara-one__fig { --x: 394.0; --y: 1108.5; --w: 492.5; }

  /* ことば */
  .p-chara-poem { --scene-y: 2150; --scene-h: 1550; }
  .p-chara-poem__text { --x: 289.9; --y: 2300.5; --fs: 34.997; --lh: 1.9562; --ls: 0.0407em; }

  /* いろんな世代 */
  .p-chara-group { --scene-y: 3700; --scene-h: 1230; }
  .p-chara-group__circle { --x: 78.0; --y: 3781.0; --w: 1128.0; --h: 1128.0; --shape-c: var(--c-white); }
  .p-chara-group__fig { --x: 400.4; --y: 3929.7; --w: 460.7; }

  /* ネットshop（黄色の帯） */
  .p-chara-shop { --scene-y: 4930; --scene-h: 520; }
  .p-chara-shop__link { position: relative; z-index: 4; /* 周囲の文字より手前に置き、押せる範囲を確保 */
    --frame-x: 0px;
    justify-self: stretch;
    margin-left: calc((var(--vw, 100vw) - var(--design-w) * var(--u)) / 2);
    width: calc(var(--design-w) * var(--u));
    pointer-events: none;
  }
  .p-chara-shop__link > * { pointer-events: auto; }
  .p-chara-shop__band { --x: 209.5; --y: 4976.0; --w: 856.2; --h: 376.0; --shape-c: var(--c-yellow); --shape-clip: polygon(100.00% 50.61%, 0.00% 100.00%, 0.00% 49.39%, 100.00% 0.00%); }
  .p-chara-shop__label { --x: 248.6; --y: 5269.5; --fs: 46.092; --lh: 1.2; --ls: 0.0000em; }
  .p-chara-shop__label .l0 { letter-spacing: 0.0962em; translate: 0 calc(7.3 * var(--u)); }
  .p-chara-shop__band,
  .p-chara-shop__label { transition: transform 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
  .p-chara-shop__band { transform-origin: 50% 50%; }
  /* hover：帯の傾きが少し深くなり、文字が進む */
  @media (hover: hover) {
    .p-chara-shop__link:hover .p-chara-shop__band { transform: skewY(-2.5deg); }
    .p-chara-shop__link:hover .p-chara-shop__label { translate: 0.5em -0.1em; }
  }
  .p-chara-shop__link:focus-visible { outline: none; }
  .p-chara-shop__link:focus-visible .p-chara-shop__band { transform: skewY(-2.5deg); outline: 3px solid var(--c-ink); outline-offset: 6px; }
  @media (hover: none) {
    .p-chara-shop__link:active .p-chara-shop__band { transform: skewY(-2.5deg); transition-duration: 0.25s; }
  }

  /* ロゴ（締め） */
  .p-chara-closing { --scene-y: 5450; --scene-h: 614; }
  .p-chara-closing__tagline { --x: 513.0; --y: 5598.1; --fs: 24.303; --lh: 1.7389; --ls: 0.0406em; --k: var(--k-shippori); }
  .p-chara-closing__logo { --x: 763.34; --y: 5616.4; --w: 464.05; }

  /* ページナビ */
  .p-chara-nav { --scene-y: 6064; --scene-h: 2147; }
  .p-chara-nav .c-navlinks { --scene-y: 6064; }
  .p-chara-nav .c-navlink--philosophy { --bx: 54; --by: 0; }
  .p-chara-nav .c-navlink--works { --bx: 54; --by: 470; }
  .p-chara-nav .c-navlink--projects { --bx: 54; --by: 936; }
  .p-chara-nav .c-navlink--contact { --bx: 300; --by: 1683; --bw: 720; --bh: 260; }
}

/* ---------- 動き：円が開いたあと、キャラクターが一度だけ小さく弾む（絵そのものは変形しない） ---------- */
@layer motion {
  .js-motion [data-reveal="open"] .c-shape--circle { clip-path: circle(0% at 50% 50%); transition: clip-path 1.3s var(--ease-inout); }
  .js-motion [data-reveal="open"].is-inview .c-shape--circle { clip-path: circle(50% at 50% 50%); }
  .js-motion [data-reveal="pop"] { opacity: 0; scale: 0.9; }
  .js-motion [data-reveal="open"].is-inview [data-reveal="pop"] { opacity: 1; scale: 1; transition: scale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s, opacity 0.4s linear 0.75s; }
}

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   ========================================================================== */
@layer pages {
  @media (max-width: 1023px) {
    .p-chara-one { --spb: 10; }
    .p-chara-one__circle { --sx: 14; --sy: 44; --sw: 362; }
    .p-chara-one__fig { --sx: 116; --sys: -312; --sw: 158; }
    .p-chara-poem { --spb: 20; }
    .p-chara-poem__text { --sx: 30; --sy: 70; --sfs: 15.5; --sfs-min: 14px; --slh: 2.05; }
    .p-chara-group { --spb: 10; }
    .p-chara-group__circle { --sx: 14; --sy: 70; --sw: 362; }
    .p-chara-group__fig { --sx: 120; --sys: -322; --sw: 150; }
    .p-chara-shop { --spb: 30; }
    .p-chara-shop__link { margin-left: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    .p-chara-shop__band { --shape-clip: polygon(0 calc(66 * var(--s)), 100% 0, 100% calc(100% - 66 * var(--s)), 0 100%); }
    .p-chara-shop__band { --sx: 16; --sy: 60; --sw: 358; --sh: 0; --shs: 158; }
    .p-chara-shop__label { --sx: 40; --sys: -86; translate: 0 calc(30 * (var(--s) - var(--sf))); --sfs: 21; --sfs-min: 18px; --slh: 1.35; }
  }
}

/* ==========================================================================
   TikTok（PURE WINSの言葉の続き）
   「負けるな。今日も。」をこのセクションの主役のグラフィックとして大きく組み、
   その下に TikTok への導線。セクション全体が1つのリンクの押せる範囲です
   （リンクの ::after をセクションいっぱいに広げています）。
   キャラクターは支給ベクター（purewins-one.svg）を淡く敷いています。
   ========================================================================== */
@layer pages {
  .p-chara-tiktok {
    position: relative;
    z-index: 1;
    padding: calc(130 * var(--u)) 0 calc(110 * var(--u));
    overflow: hidden;                 /* はみ出す文字・キャラクターで横スクロールを出さない */
    overflow: clip;
  }
  /* 淡いキャラクター */
  .p-chara-tiktok__mark {
    position: absolute;
    top: calc(40 * var(--u));
    left: calc(var(--frame-x) + 820 * var(--u));
    width: calc(430 * var(--u));
    aspect-ratio: 181 / 226;          /* 支給データ下部の「PURE WINS」の文字は見せず、キャラクターだけを使う */
    overflow: hidden;
    opacity: 0.16;
    pointer-events: none;
  }
  .p-chara-tiktok__mark img { display: block; width: 100%; height: auto; }

  /* 負けるな。今日も。 */
  .p-chara-tiktok__words {
    position: relative;
    z-index: 2;
    margin: 0 0 0 calc(var(--frame-x) + 64 * var(--u));
    font-family: var(--ff-mincho);
    font-weight: var(--fw-mincho-strong);
    font-size: calc(196 * var(--u));
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    white-space: nowrap;
    pointer-events: none;             /* 文字の上をクリックしてもリンクが反応する */
  }
  .p-chara-tiktok__words .line {
    display: block;
    width: fit-content;
    transform-origin: 0 100%;
    transform: skewY(calc(-1 * var(--slant-ja)));
  }
  .p-chara-tiktok__words .line + .line { margin-left: calc(330 * var(--u)); }

  /* リンク（見た目は文字・ハンドル・帯。押せる範囲は ::after でセクション全体） */
  .p-chara-tiktok__link {
    display: block;
    width: fit-content;
    margin: calc(70 * var(--u)) 0 0 calc(var(--frame-x) + 560 * var(--u));
    color: var(--c-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .p-chara-tiktok__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .p-chara-tiktok__link > span { position: relative; z-index: 2; }
  .p-chara-tiktok__lead,
  .p-chara-tiktok__handle,
  .p-chara-tiktok__cta { display: block; width: fit-content; transform-origin: 0 100%; }
  .p-chara-tiktok__lead {
    font-family: var(--ff-mincho);
    font-weight: var(--fw-mincho-strong);
    font-size: calc(36 * var(--u));
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--c-ink);
    transform: skewY(calc(-1 * var(--slant-ja)));
  }
  .p-chara-tiktok__handle {
    margin-top: calc(36 * var(--u));
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: calc(62 * var(--u));
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-thickness: max(2px, calc(4 * var(--u)));
    text-underline-offset: 0.16em;
    transform: skewY(calc(-1 * var(--slant-en)));
  }
  .p-chara-tiktok__cta {
    margin-top: calc(40 * var(--u));
    padding: calc(20 * var(--u)) calc(44 * var(--u));
    background: var(--c-ink);
    color: var(--c-white);
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: calc(28 * var(--u));
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: skewY(calc(-1 * var(--slant-en)));
    transition: transform 0.6s var(--ease-out);
  }
  .p-chara-tiktok__cta-text { display: inline-block; transition: translate 0.6s var(--ease-out); }
  @media (hover: hover) {
    .p-chara-tiktok__link:hover .p-chara-tiktok__cta { transform: skewY(calc(-1 * var(--slant-en) - 2.5deg)); }
    .p-chara-tiktok__link:hover .p-chara-tiktok__cta-text { translate: 0.5em 0; }
    .p-chara-tiktok__link:hover .p-chara-tiktok__handle { text-decoration-thickness: max(3px, calc(7 * var(--u))); }
  }
  @media (hover: none) {
    .p-chara-tiktok__link:active .p-chara-tiktok__cta { transform: skewY(calc(-1 * var(--slant-en) - 2.5deg)); transition-duration: 0.25s; }
  }
  .p-chara-tiktok__link:focus-visible { outline: none; }
  .p-chara-tiktok__link:focus-visible::after { outline: 3px solid var(--c-ink); outline-offset: -10px; }
}

@layer motion {
  .js-motion .p-chara-tiktok__words { --gap-line: 0.22s; }
}

@layer pages {
  @media (max-width: 1023px) {
    .p-chara-tiktok { padding: calc(40 * var(--sv)) 0 calc(80 * var(--sv)); }
    .p-chara-tiktok__mark { top: calc(10 * var(--sv)); left: auto; right: calc(-30 * var(--s)); width: calc(200 * var(--s)); }
    .p-chara-tiktok__words { margin-left: calc(14 * var(--s)); font-size: calc(72 * var(--s)); line-height: 1.18; }
    .p-chara-tiktok__words .line + .line { margin-left: calc(96 * var(--s)); }
    .p-chara-tiktok__link { margin: calc(44 * var(--sv)) 0 0 calc(28 * var(--s)); }
    .p-chara-tiktok__lead { font-size: max(15px, calc(17 * var(--sf))); line-height: 1.6; letter-spacing: 0.02em; }
    .p-chara-tiktok__handle { margin-top: calc(22 * var(--sv)); font-size: max(24px, calc(30 * var(--sf))); text-decoration-thickness: 2px; }
    .p-chara-tiktok__cta { margin-top: calc(28 * var(--sv)); padding: 15px 26px; font-size: max(15px, calc(17 * var(--sf))); }
  }
}