/* Hero（index.php）内 */
.heroSection:has(.logo-scene) {
    overflow-x: hidden;
    overflow-y: visible;
}

.heroSection:has(.logo-scene) .heroMain {
    overflow-x: hidden;
    overflow-y: visible;
}

.heroCreative .logo-scene {
    width: 100%;
    max-width: 100%;
    padding: 0;
    padding-left: 2vw;
    margin: 0;
    color: #fff;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
}

.logo-scene {
    container-type: inline-size;
    width: min(98vw, 960px);
    padding: 0 clamp(16px, 3.5vw, 40px);
    box-sizing: border-box;
    color: #fff;
    /* 8文字＋カーニング分の幅に収める */
    --cap-h: min(172px, calc((100cqw - 2.5rem) / 4.85));
}

.logo-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    overflow: visible;
}

/* 長方形マスクで上からロゴを見せる（横ははみ出し防止のため内側に余白） */
.logo-mask {
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 0;
    padding: calc(var(--cap-h) * 0.14) clamp(40px, 7vw, 80px) 0.15em 0;
    width: 100%;
}

.logo-inner {
    position: relative;
    transform-origin: left bottom;
    width: 100%;
    margin: 0;
    will-change: transform;
}

/* JS 実行前・アニメ開始前は Creative 文字を非表示 */
.logo-scene .logo-letters > .letter,
.logo-scene .logo-letters > .letter-r-wrap,
.logo-scene .logo-letters > .letter-e-end-wrap {
    opacity: 0;
}

.logo-letters {
    /* 参考画像: r,e,a,v の x-height ≒ C の 69.5% */
    --x-h: calc(var(--cap-h) * 0.695);
    /* 青背景参考のカーニング（cap-h に比例） */
    --kern-cr: calc(var(--cap-h) * 0.055);
    --kern-re: calc(var(--cap-h) * -0.022);
    --kern-ea: calc(var(--cap-h) * 0.02);
    --kern-at: calc(var(--cap-h) * -0.06);
    --kern-ti: calc(var(--cap-h) * 0.05);
    --kern-iv: calc(var(--cap-h) * 0.05);
    --kern-ve: calc(var(--cap-h) * -0.042);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
}

.logo-letters .letter {
    display: block;
    width: auto;
    flex-shrink: 0;
}

/* C — キャップ高（基準） */
.logo-letters .letter-c {
    height: var(--cap-h);
}

/* r,e,a,末尾e — 共通 x-height */
.logo-letters .letter-r,
.logo-letters .letter-e,
.logo-letters .letter-e-end,
.logo-letters .letter-a {
    height: var(--x-h);
}

.logo-letters .letter-v {
    height: calc(var(--x-h) * 1.04);
}

/* r + Kens（.letter-r-wrap の --kens-x / --kens-y で調整） */
.letter-r-wrap {
    position: relative;
    display: block;
    width: max-content;
    flex-shrink: 0;
    align-self: flex-end;
    margin-left: var(--kern-cr);
    /* Kens 左右: r の幅に対する %（0=左端） */
    --kens-x: 0%;
    /* Kens 上下: 大きいほど上へ（例 0.014 → 0.03） */
    --kens-y: calc(var(--cap-h) * 0.09);
}

.letter-r-wrap .letter-r {
    display: block;
    margin-left: 0;
    vertical-align: bottom;
}

.logo-letters .letter-e {
    margin-left: var(--kern-re);
}

.logo-letters .letter-a {
    margin-left: var(--kern-ea);
}

/* t,i — 上端を C と揃える（キャップ高） */
.logo-letters .letter-t,
.logo-letters .letter-i {
    height: var(--cap-h);
}

.logo-letters .letter-t {
    margin-left: var(--kern-at);
}

.logo-letters .letter-i {
    margin-left: var(--kern-ti);
}

.logo-letters .letter-v {
    margin-left: var(--kern-iv);
}

/* 末尾 e + Tech（.letter-e-end-wrap の --tech-x / --tech-y で調整） */
.letter-e-end-wrap {
    position: relative;
    display: block;
    width: max-content;
    flex-shrink: 0;
    align-self: flex-end;
    margin-left: var(--kern-ve);
    --tech-x: calc(var(--cap-h) * 0.02);
    --tech-y: 0;
}

.letter-e-end-wrap .letter-e-end {
    display: block;
    margin-left: 0;
}

.letter-e-end-wrap .logo-tech {
    position: absolute;
    left: calc(100% + var(--tech-x));
    bottom: var(--tech-y);
    display: block;
    height: calc(var(--cap-h) * 0.08);
    width: auto;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: opacity;
}

.letter-e-end-wrap .logo-tech path {
    fill: #fff;
}

.logo-letters .letter path,
.letter-r-wrap path {
    fill: #fff;
}

/* img/top/creative_anime/Kens.svg — r の上 */
.letter-r-wrap .logo-kens {
    position: absolute;
    left: var(--kens-x);
    bottom: calc(100% + var(--kens-y));
    display: block;
    height: calc(var(--cap-h) * 0.08);
    width: auto;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: opacity;
}

.letter-r-wrap .logo-kens path {
    fill: #fff;
}

/* img/top/creative_anime/line.svg — Creative 下（London〜Tokyo 付近） */
.logo-line-wrap {
    opacity: 0;
    position: relative;
    --line-wrap-w: min(88%, 405px);
    width: var(--line-wrap-w);
    --line-shift-up: calc(var(--cap-h) * 0.03);
    margin-top: calc(var(--cap-h) * 0.06 - var(--line-shift-up));
    align-self: flex-start;
    left: min(470px, calc(100% - var(--line-wrap-w)));
    line-height: 0;
    overflow: visible;
    /* London / Tokyo 位置の比率（cap-h に対する割合）— 編集して保存→リロード */
    --london-shift-left-ratio: -0.05;
    --london-shift-down-ratio: 0.2;
    --tokyo-shift-left-ratio: 0;
    --tokyo-shift-down-ratio: 0.2;
}

/* London.svg — 左矢印の先端の上 */
.logo-london-anchor,
.logo-tokyo-anchor {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: opacity;
}

.logo-london-anchor .logo-london,
.logo-tokyo-anchor .logo-tokyo {
    display: block;
    width: auto;
}

.logo-london-anchor .logo-london {
    height: calc(var(--cap-h) * 0.07);
}

.logo-tokyo-anchor .logo-tokyo {
    height: calc(var(--cap-h) * 0.082);
}

.logo-london-anchor .logo-london path,
.logo-tokyo-anchor .logo-tokyo path {
    fill: #fff;
}

.logo-line {
    display: block;
    width: 85%;
    height: auto;
    overflow: visible;
}

.logo-line-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
    /* JS 実行前の一瞬表示を防ぐ（実行後に正確な長さで上書き） */
    stroke-dasharray: 10000;
    stroke-dashoffset: 10000;
}

.logo-line-arrow {
    fill: #fff;
    opacity: 0;
}

@media (max-width: 768px) {
    .letter-r-wrap .logo-kens,
    .letter-e-end-wrap .logo-tech,
    .logo-london-anchor .logo-london,
    .logo-tokyo-anchor .logo-tokyo {
        height: 10px;
    }

    /* Tokyo は viewBox 高さ 16 +「y」の下伸びで余白が多い → 見た目を揃える */
    .logo-tokyo-anchor .logo-tokyo {
        height: 12px;
    }

    .logo-line {
        width: 70%;
    }

    .logo-line-wrap {
        --city-anchor-margin-top: 22px;
        --tokyo-anchor-margin-left: -20px;
        left: 100px;
    }

    .logo-london-anchor,
    .logo-tokyo-anchor {
        margin-top: 22px;
    }
}