/* ==========================================================================
   About v4（/about/） 名前空間 abv-
   参考サイト（moments）型: 概念図ヒーロー → ステートメント → メンバー →
   企画/提供 → 締めの全画面映像。
   メンバー / 企画は CPT nt_member から自動生成（管理画面で何人でも追加可）。
   @since 1.36.0
   ========================================================================== */

.abv {
    background: var(--ntm-paper);
    overflow-x: clip;
}

.abv-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   ① ヒーロー（概念図 × 縦組みタイトル）
   -------------------------------------------------------------------------- */
.abv-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    min-height: 78svh;
    padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 96px) clamp(48px, 6vw, 96px);
    background: var(--ntm-paper);
}

.abv-hero-map {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
    pointer-events: none;
}
.abv-hero-map > * {
    width: 100%;
    max-width: 980px;
}

.abv-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.ntm-theme .abv-hero-en {
    margin: 0 0 var(--ntm-space-4);
    font-family: var(--ntm-font-en);
    font-size: var(--ntm-text-xs);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ntm-slate-soft);
}

.abv-hero-title {
    margin: 0;
    font-family: var(--ntm-font-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    line-height: 1.75;
    letter-spacing: .1em;
    color: var(--ntm-indigo);
}

.ntm-theme .abv-hero-sub {
    margin: var(--ntm-space-6) 0 0;
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-sm);
    letter-spacing: .22em;
    color: var(--ntm-slate);
}

/* --------------------------------------------------------------------------
   ② ステートメント
   -------------------------------------------------------------------------- */
.abv-state {
    padding: clamp(64px, 9vw, 140px) clamp(20px, 6vw, 96px);
    border-top: 1px solid var(--ntm-hairline);
}

.abv-state-inner {
    max-width: 760px;
    margin: 0 auto;
}

.ntm-theme .abv-state-inner p {
    margin: 0 0 2.1em;
    font-family: var(--ntm-font-serif);
    font-size: clamp(.95rem, 1.5vw, 1.0625rem);
    line-height: 2.5;
    letter-spacing: .075em;
    color: var(--ntm-ink);
}
.ntm-theme .abv-state-inner p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ③ プロジェクトメンバー
   -------------------------------------------------------------------------- */
.abv-members {
    position: relative;
    padding: clamp(72px, 10vw, 160px) clamp(20px, 6vw, 96px) clamp(64px, 8vw, 128px);
    background: var(--ntm-indigo-deep);
    color: var(--ntm-snow);
}

/* 左端の縦レール（PROJECT MEMBER） */
.abv-rail {
    position: absolute;
    top: clamp(72px, 10vw, 160px);
    left: clamp(14px, 2.4vw, 40px);
    font-family: var(--ntm-font-en);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    writing-mode: vertical-rl;
}

.abv-member {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
        "text photo"
        "msg  msg";
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: clamp(32px, 4vw, 56px);
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 96px) 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.abv-members .abv-member:first-of-type { border-top: 0; padding-top: 0; }

/* 偶数番は写真を左に振って雁行させる */
.abv-member.is-alt {
    grid-template-areas:
        "photo text"
        "msg   msg";
}

.abv-member-text  { grid-area: text; }
.abv-member-photo { grid-area: photo; }
.abv-member-msg   { grid-area: msg; }

/* 名前の肩に写真の天を合わせる（雁行の要） */
.abv-member-text { padding-top: clamp(0px, 2vw, 28px); }

.abv-member-role {
    display: inline-block;
    margin-bottom: var(--ntm-space-4);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ntm-sand);
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-xs);
    letter-spacing: .2em;
    color: var(--ntm-sand);
}

.abv-member-name {
    margin: 0;
    font-family: var(--ntm-font-serif);
    font-weight: 400;
    line-height: 1.5;
}
.abv-member-name .ja {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    letter-spacing: .14em;
    color: var(--ntm-snow);
}
.abv-member-name .en {
    display: block;
    margin-top: var(--ntm-space-2);
    font-family: var(--ntm-font-en);
    font-size: var(--ntm-text-xs);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* 顔写真は必ず全体表示（切り抜きゼロ＝v1.29.x の方針を踏襲） */
.abv-member-photo {
    margin: 0;
    background: rgba(255, 255, 255, .04);
}
.abv-member-photo img {
    display: block;
    width: 100%;
    max-height: 68svh;
    height: auto;
    object-fit: contain;
    object-position: top center;
}

/* ⚠ base.css の `body.ntm-theme p { font-family; color:ink }`（特異度 0,2,1）に
   負けて明朝・白文字が効かない。!important ではなく .ntm-theme を前置して
   同特異度・後勝ちで通す（About の p 系すべて同じ理由で前置している）。 */
.ntm-theme .abv-member-bio p {
    margin: 1.6em 0 1.4em;
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-sm);
    line-height: 2.1;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .72);
}
.ntm-theme .abv-member-bio p:last-child { margin-bottom: 0; }

.abv-member-msg {
    max-width: 820px;
    margin-left: auto;
    padding-left: clamp(0px, 4vw, 64px);
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.ntm-theme .abv-member-msg p {
    margin: 0 0 1.9em;
    font-family: var(--ntm-font-serif);
    font-size: clamp(.95rem, 1.4vw, 1.0625rem);
    line-height: 2.4;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .92);
}
.ntm-theme .abv-member-msg p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ④ 企画 / 提供
   -------------------------------------------------------------------------- */
.abv-orgs {
    padding: clamp(72px, 10vw, 150px) clamp(20px, 6vw, 96px);
    background: var(--ntm-paper);
}

.abv-org {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 0;
    border-top: 1px solid var(--ntm-hairline);
}
.abv-orgs .abv-org:first-of-type { border-top: 0; padding-top: 0; }

.abv-org .abv-member-role {
    color: var(--ntm-terracotta);
    border-bottom-color: var(--ntm-terracotta);
}

.abv-org-head {
    max-width: 720px;
}

.ntm-theme .abv-org-logo {
    margin: 0 0 var(--ntm-space-6);
}
.abv-org-logo img {
    display: block;
    width: auto;
    max-width: min(320px, 70%);
    height: auto;
    object-fit: contain;
}

.abv-org-name {
    margin: 0 0 var(--ntm-space-6);
    font-family: var(--ntm-font-serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 1.875rem);
    letter-spacing: .14em;
    color: var(--ntm-indigo);
}

.ntm-theme .abv-org-bio p {
    margin: 0 0 1.5em;
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-sm);
    line-height: 2.15;
    letter-spacing: .06em;
    color: var(--ntm-slate);
}
.ntm-theme .abv-org-bio p:last-child { margin-bottom: 0; }

/* 実績画像（縦組みキャプション） */
.abv-org-works {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(20px, 3vw, 44px);
    margin: clamp(32px, 5vw, 64px) 0 0;
    padding: 0;
    list-style: none;
}
/* ⚠ 縦組みキャプションは「高さ」が無いと 2 段に折り返して切れる。
   figure を stretch にして画像の高さをキャプションに渡すこと（実測で確認）。 */
.abv-org-works figure {
    display: flex;
    align-items: stretch;
    gap: var(--ntm-space-4);
    margin: 0;
}
/* 画像は縦組みキャプションの分だけ縮む（flex:1 と min-width:0 が無いと
   キャプションが枠外へ押し出されて切れる＝SP390 実測で確認）。 */
.abv-org-works figure > img {
    align-self: flex-start;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
.abv-org-works img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--ntm-paper-deep);
}
.abv-org-works figcaption {
    flex: 0 0 auto;
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-xs);
    letter-spacing: .2em;
    line-height: 1.9;
    color: var(--ntm-slate);
}

/* --------------------------------------------------------------------------
   ⑤ Instagram ストリップ
   写真は正方形トリミング（Instagram の見えかたに合わせる）。ここだけは
   cover が正しい＝原寸比率ではなく「グリッドの規則性」が情報になるため。
   -------------------------------------------------------------------------- */
.abv-ig {
    padding: clamp(64px, 8vw, 128px) clamp(20px, 6vw, 96px) clamp(72px, 9vw, 140px);
    background: var(--ntm-paper-deep);
}

.abv-ig-head {
    max-width: 1080px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.ntm-theme .abv-ig-label {
    margin: 0 0 var(--ntm-space-3);
    font-family: var(--ntm-font-en);
    font-size: var(--ntm-text-xs);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ntm-slate-soft);
}

.abv-ig-title {
    margin: 0;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.4vw, 2.375rem);
    letter-spacing: .04em;
    line-height: 1.2;
}
.abv-ig-title a {
    color: var(--ntm-indigo);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .35s var(--ntm-ease);
}
.abv-ig-title a:hover { border-bottom-color: var(--ntm-indigo); }

.ntm-theme .abv-ig-note {
    margin: var(--ntm-space-4) 0 0;
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-sm);
    letter-spacing: .14em;
    color: var(--ntm-slate);
}

/* マーキー（右→左へ無限スライド）
   track に本体セット＋複製セットを並べ、translateX 0→-50% で流す。
   両セットが同一かつ各タイルに margin-right があるので継ぎ目が出ない。
   端は mask でそっとフェードさせ、突然の出入りを隠す。 */
.abv-ig-marquee {
    position: relative;
    /* セクション左右パディングを打ち消して画面幅いっぱいに流す */
    margin-left: calc(-1 * clamp(20px, 6vw, 96px));
    margin-right: calc(-1 * clamp(20px, 6vw, 96px));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.abv-ig-track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 「1タイルが横切る時間」を一定に保つため枚数比例。1枚≒5秒。 */
    animation: abv-ig-scroll calc(var(--abv-ig-count, 6) * 5s) linear infinite;
    will-change: transform;
}
/* ホバー中は静かに一時停止（見たい写真をじっくり見られる） */
.abv-ig-marquee:hover .abv-ig-track,
.abv-ig-marquee:focus-within .abv-ig-track { animation-play-state: paused; }

.abv-ig-cell {
    flex: 0 0 auto;
    width: clamp(190px, 20vw, 280px);
    margin: 0 clamp(10px, 1.4vw, 18px) 0 0;
}
.abv-ig-cell a {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ntm-paper);
}
.abv-ig-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ntm-ease-out), opacity .5s var(--ntm-ease);
}
.abv-ig-cell a:hover img { transform: scale(1.05); opacity: .88; }
.abv-ig-cell a:focus-visible { outline: 2px solid var(--ntm-indigo); outline-offset: 3px; }

@keyframes abv-ig-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.ntm-theme .abv-ig-follow {
    margin: clamp(28px, 4vw, 48px) 0 0;
    text-align: center;
}
.abv-ig-follow a {
    display: inline-flex;
    align-items: center;
    gap: var(--ntm-space-3);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ntm-border);
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-sm);
    letter-spacing: .18em;
    color: var(--ntm-indigo);
    text-decoration: none;
    transition: border-color .35s var(--ntm-ease), gap .35s var(--ntm-ease);
}
.abv-ig-follow a:hover { border-bottom-color: var(--ntm-indigo); gap: var(--ntm-space-5); }

@media (prefers-reduced-motion: reduce) {
    /* スライドを止め、静止グリッドに落とす（複製セットは隠して重複表示を防ぐ） */
    .abv-ig-marquee {
        margin-left: 0;
        margin-right: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .abv-ig-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(8px, 1.2vw, 16px);
        max-width: 1180px;
        margin: 0 auto;
    }
    .abv-ig-dup { display: none; }
    .abv-ig-cell { width: clamp(140px, 22vw, 200px); margin: 0; }
    .abv-ig-cell img,
    .abv-ig-follow a { transition: none; }
    .abv-ig-cell a:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   ⑥ 締めの全画面映像
   -------------------------------------------------------------------------- */
.abv-film {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 88svh;
    overflow: hidden;
    background: var(--ntm-indigo-deep);
}

.abv-film-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.abv-film-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 27, 46, .58) 0%, rgba(19, 27, 46, .42) 50%, rgba(19, 27, 46, .72) 100%);
}

.abv-film-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(20px, 3vw, 44px);
}
.ntm-theme .abv-film-copy p {
    margin: 0;
    writing-mode: vertical-rl;
    font-family: var(--ntm-font-serif);
    font-weight: 400;
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    line-height: 1.9;
    letter-spacing: .18em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
/* 2行目は肩を下げて雁行させる（v1.35.0 の組版方針に合わせる） */
.ntm-theme .abv-film-copy .l2 { margin-top: clamp(28px, 5vw, 72px); }

.ntm-theme .abv-film-sign {
    position: absolute;
    z-index: 2;
    right: clamp(20px, 4vw, 56px);
    bottom: clamp(20px, 4vw, 48px);
    margin: 0;
    font-family: var(--ntm-font-en);
    font-size: 11px;
    letter-spacing: .36em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .abv-hero { min-height: 68svh; }
    .abv-hero-map { opacity: .32; }

    .abv-rail {
        position: static;
        display: block;
        writing-mode: horizontal-tb;
        margin: 0 0 var(--ntm-space-6);
        letter-spacing: .3em;
    }

    .abv-member,
    .abv-member.is-alt {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "photo"
            "text"
            "msg";
    }
    .abv-member-text { padding-top: 0; }
    .abv-member-photo img { max-height: 56svh; }
    .abv-member-msg { padding-left: var(--ntm-space-5); }

    .abv-org-works { grid-template-columns: minmax(0, 1fr); }

    /* SP はタイルを少し小さくして、一度に複数枚が流れて見えるように */
    .abv-ig-cell { width: clamp(150px, 44vw, 220px); }

    .ntm-theme .abv-film-copy p { font-size: clamp(1.05rem, 4.6vw, 1.4rem); }
}

@media (prefers-reduced-motion: reduce) {
    .abv-film-video { display: none; }
}