@charset 'utf-8';

/* =============================================================
   p-index__fv
   design : PC 1440px / SP 375px
   liquid : FV は全幅ブリードのため専用単位を使う
            --fx … 横方向（ビューポート幅に完全追従）
            --fy … 縦方向（ヘッダーを含めて 100vh に収まるよう圧縮。
                   横基準より大きくはならないので通常は --fx と同値）
            --fu … 縦横比を保ちたい要素（文字 / タイトル画像 / 歯車）
   ============================================================= */
.p-index__fv {
    --fx: calc(100vw / 1440);
    --fy: min(var(--fx), max(calc((100vh - var(--l-header-h)) / 824), 0px));
    --fy: min(var(--fx), max(calc((100svh - var(--l-header-h)) / 824), 0px));
    --fu: min(var(--fx), calc(var(--fy) * 1.2));
    position: relative;
    /* 左の動画がヘッダーの範囲まで伸びるため、上へのはみ出しを許可する
       （各スロットは自前で overflow: hidden を持っているので中身は切り取られる）。
       ただし SP の右下の写真はデザインどおり画面の右へはみ出すので、
       横だけは切り取っておく。放っておくとページ全体が画面より広くなり、
       スマホで左右に動いてしまう（clip は縦を visible のまま残せる） */
    overflow: visible;
    overflow-x: clip;
    width: 100%;
    height: calc(824 * var(--fy));
    background-color: var(--color-hamabo-blue);
}

/* ヘッダーの範囲も FV と同じ青で塗っておく。
   演出中はヘッダーの背景が透明になるため、これがないと body の余白（白）が出る。
   左の動画はこの上に重なる。 */
.p-index__fv::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--l-header-h));
    right: 0;
    left: 0;
    height: var(--l-header-h);
    background-color: var(--color-hamabo-blue);
}

/* -------------------------------------------------------------
   media ( 3 slots / slideshow )
   ------------------------------------------------------------- */
.p-index__fv-slot {
    position: absolute;
    overflow: hidden;
    opacity: 0;
    transform: translateY(calc(30 * var(--fu)));
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* デザイン（TOP_02）では、左の動画がヘッダーの範囲まで伸びている。
   ヘッダーが現れる前はそのまま見え、現れたあとは不透明なヘッダーが上を覆う。 */
.p-index__fv-slot--main {
    left: 0;
    top: calc(-1 * var(--l-header-h));
    width: calc(753 * var(--fx));
    height: calc(590 * var(--fy) + var(--l-header-h));
    border-radius: 0 0 calc(10 * var(--fu)) 0;
}

.p-index__fv-slot--sub1 {
    left: calc(799 * var(--fx));
    top: calc(20 * var(--fy));
    width: calc(521 * var(--fx));
    height: calc(366 * var(--fy));
    border-radius: calc(10 * var(--fu));
}

.p-index__fv-slot--sub2 {
    left: calc(799 * var(--fx));
    top: calc(429 * var(--fy));
    width: calc(641 * var(--fx));
    height: calc(395 * var(--fy));
    border-radius: calc(10 * var(--fu));
}

.p-index__fv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.p-index__fv-slide.is-active {
    opacity: 1;
}

.p-index__fv-slide img,
.p-index__fv-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   静止画はゆっくりズーム（動画は対象外）
   表示のたびに等倍から始まり、切り替わる頃に拡大しきる。
   非アクティブ時の初期値をズーム後と同じにしておくことで、
   フェードアウト中に縮んで戻る動きが出ないようにしている。
   ※ 時間は script.js の FV_INTERVAL（5000ms）に合わせる
   ------------------------------------------------------------- */
.p-index__fv-slide img {
    transform: scale(1.08);
    transform-origin: center;
    will-change: transform;
}

.p-index__fv-slide.is-active img {
    /* 切り替え間隔（5s）より長く、かつ等速にする。
       こうすると切り替わる瞬間もまだズームの途中で、動きが途切れない。
       5s 時点で scale 1.079 ＝ これまでの見え方（1.08）とほぼ同じ。      */
    animation: p-index__fv-zoom 7s linear forwards;
}

@keyframes p-index__fv-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.11); }
}

@media (prefers-reduced-motion: reduce) {
    .p-index__fv-slide img,
    .p-index__fv-slide.is-active img {
        transform: none;
        animation: none;
    }
}

/* -------------------------------------------------------------
   deco / title / english
   ------------------------------------------------------------- */
.p-index__fv-deco,
.p-index__fv-ttl,
.p-index__fv-en {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateY(calc(24 * var(--fu)));
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.p-index__fv-deco {
    left: calc(61 * var(--fx));
    top: calc(514 * var(--fy));
    width: calc(286.5 * var(--fu));
}

.p-index__fv-ttl {
    left: calc(58 * var(--fx));
    top: calc(649 * var(--fy));
    width: calc(812 * var(--fu));
}

/* picture は inline なので、下に余白が出ないようブロックにする */
.p-index__fv-ttl picture {
    display: block;
}

.p-index__fv-en {
    left: calc(59.5 * var(--fx));
    top: calc(740.5 * var(--fy));
    width: calc(433 * var(--fu));
}

/* PC は画像タイトル。テキストは読み上げ用に視覚的非表示 */
.p-index__fv-ttlTxt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 英語版：日本語版と同じ組み（マーク＋タイトル）にし、タイトルを文字の
   「Bridging To The Future.」にする（2026-09-18 指示。文言は ACF の FV タイトル）。
   日本語版タイトルの下の行（同じ英文の画像）は重複するので出さない */
.p-index__fv--en .p-index__fv-ttl {
    width: auto;
}

.p-index__fv-ttlEn {
    display: block;
    font-family: var(--font-mon);
    font-weight: 600;
    /* 日本語版のタイトル画像（幅 812）とほぼ同じ幅になる大きさ（63px で 808） */
    font-size: calc(63 * var(--fu));
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
}

.p-index__fv--en .p-index__fv-en {
    display: none;
}

/* 英語版（PC）：英文タイトルは日本語版の画像より上寄りに見えるので、h1 を 670 まで下げ、マークも同じ 21 下げる */
@media screen and (min-width: 769px) {
    .p-index__fv--en .p-index__fv-deco {
        top: calc(535 * var(--fy));
    }

    .p-index__fv--en .p-index__fv-ttl {
        top: calc(670 * var(--fy));
    }
}

/* -------------------------------------------------------------
   scroll ( gear + text + arrow )
   ------------------------------------------------------------- */
.p-index__fv-scroll {
    /* 矢印の跳ね上がり量（--fu 単位）。SCROLL 文字に触れない範囲で決めている */
    --fvArrowLift: 6;
    position: absolute;
    z-index: 3;
    right: calc(34 * var(--fx));
    top: calc(672.5 * var(--fy));
    width: calc(122.5 * var(--fu));
    height: calc(122.5 * var(--fu));
    opacity: 0;
    transform: translateY(calc(16 * var(--fu)));
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.p-index__fv-scroll:hover {
    opacity: 1;
}

/* 外側の歯車：回転 */
.p-index__fv-scrollGear {
    position: absolute;
    inset: 0;
    background-color: var(--color-light-silver);
    -webkit-mask: url(../img/top/fv_gear.png) no-repeat center / contain;
    mask: url(../img/top/fv_gear.png) no-repeat center / contain;
    animation: p-index__fv-gear 16s linear infinite;
}

.p-index__fv-scrollTxt {
    position: absolute;
    left: 50%;
    top: 50%;
    color: var(--color-light-silver);
    font-family: var(--font-mon);
    font-size: calc(12 * var(--fu));
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

/* 矢印：ピストン運動 */
.p-index__fv-scrollArrow {
    position: absolute;
    left: 50%;
    top: calc(87 * var(--fu));
    width: calc(6.7 * var(--fu));
    height: calc(8 * var(--fu));
    background-color: var(--color-light-silver);
    -webkit-mask: url(../img/top/fv_gear_arrow.png) no-repeat center / contain;
    mask: url(../img/top/fv_gear_arrow.png) no-repeat center / contain;
    /* 上向きに 2 回弾んで戻る（2 回目は小さく）。
       タイミング・カーブ・ピークの比率（1 : 0.286 : 0.714）は参考サイトの実装どおり。
       振れ幅だけ SCROLL 文字に掛からない量（--fvArrowLift）に縮めている */
    transform: translateX(-50%);
    animation: p-index__fv-arrowBounce 2.4s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes p-index__fv-gear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes p-index__fv-arrowBounce {
    0%   { transform: translateX(-50%) translateY(0); }
    30%  { transform: translateX(-50%) translateY(calc(var(--fvArrowLift) * -1 * var(--fu))); }
    50%  { transform: translateX(-50%) translateY(calc(var(--fvArrowLift) * -0.286 * var(--fu))); }
    70%  { transform: translateX(-50%) translateY(calc(var(--fvArrowLift) * -0.714 * var(--fu))); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* 動きを減らす設定のときは、上下動のかわりにゆっくり明滅させる（参考サイトと同じ） */
@keyframes p-index__fv-arrowPulse {
    0%,
    100% { opacity: 1; }
    50%  { opacity: 0.55; }
}

/* -------------------------------------------------------------
   ロード演出：3枚のメディア → タイトル → 歯車 の順で表示
   ------------------------------------------------------------- */
.p-index__fv.is-loaded .p-index__fv-slot,
.p-index__fv.is-loaded .p-index__fv-deco,
.p-index__fv.is-loaded .p-index__fv-ttl,
.p-index__fv.is-loaded .p-index__fv-en,
.p-index__fv.is-loaded .p-index__fv-scroll {
    opacity: 1;
    transform: none;
}

.p-index__fv.is-loaded .p-index__fv-slot--main { transition-delay: 0.1s; }
.p-index__fv.is-loaded .p-index__fv-slot--sub1 { transition-delay: 0.3s; }
.p-index__fv.is-loaded .p-index__fv-slot--sub2 { transition-delay: 0.5s; }
.p-index__fv.is-loaded .p-index__fv-deco       { transition-delay: 0.8s; }
.p-index__fv.is-loaded .p-index__fv-ttl        { transition-delay: 0.95s; }
.p-index__fv.is-loaded .p-index__fv-en         { transition-delay: 1.1s; }
.p-index__fv.is-loaded .p-index__fv-scroll     { transition-delay: 1.35s; }

@media (prefers-reduced-motion: reduce) {
    .p-index__fv-slot,
    .p-index__fv-deco,
    .p-index__fv-ttl,
    .p-index__fv-en,
    .p-index__fv-scroll {
        transition-duration: 0.01ms;
    }
    .p-index__fv-scrollGear {
        animation: none;
    }
    .p-index__fv-scrollArrow {
        animation: p-index__fv-arrowPulse 3s ease-in-out infinite;
    }
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    .p-index__fv {
        --fx: calc(100vw / 375);
        --fy: var(--fx);
        --fu: var(--fx);
        height: calc(588.5 * var(--fy));
    }

    /* SP のデザインは写真がヘッダーの下から始まるので、伸ばさない */
    .p-index__fv-slot--main {
        top: 0;
        width: calc(355 * var(--fu));
        height: calc(241 * var(--fu));
        border-radius: 0 0 calc(5 * var(--fu)) 0;
    }

    .p-index__fv-slot--sub1 {
        left: calc(17 * var(--fu));
        top: calc(258 * var(--fu));
        width: calc(167 * var(--fu));
        height: calc(127 * var(--fu));
        border-radius: calc(5 * var(--fu));
    }

    .p-index__fv-slot--sub2 {
        left: calc(201 * var(--fu));
        top: calc(258 * var(--fu));
        width: calc(206 * var(--fu));
        height: calc(127 * var(--fu));
        border-radius: calc(5 * var(--fu));
    }

    .p-index__fv-deco {
        left: calc(21 * var(--fu));
        top: calc(413 * var(--fu));
        width: calc(107.5 * var(--fu));
    }

    /* SP も 2 行組みの画像（Figma 書き出し 4x → 883 / 4 = 220.75）。
       文字は PC と同じく読み上げ用に視覚的非表示のまま */
    .p-index__fv-ttl {
        left: calc(18.2 * var(--fu));
        top: calc(471.7 * var(--fu));
        width: calc(220.75 * var(--fu));
    }

    /* PC の画像と縦横比が違うので、読み込み前後で高さが変わらないよう明示する */
    .p-index__fv-ttlImg {
        height: calc(82.75 * var(--fu));
    }

    /* 英語版の文字タイトルは 2 行（Bridging To / The Future.）。
       日本語版タイトル画像と同じ位置で、右の SCROLL の歯車（left 269）に掛からない大きさ */
    .p-index__fv-ttlEn {
        font-size: calc(33 * var(--fu));
    }

    .p-index__fv-en {
        left: calc(22 * var(--fu));
        /* タイトルの下端（554.45）から 21px あける（デザイン実測） */
        top: calc(575.5 * var(--fu));
        width: calc(190 * var(--fu));
    }

    .p-index__fv-scroll {
        /* 歯車が小さく SCROLL 文字との間隔も狭いので、跳ね上がりを控えめに */
        --fvArrowLift: 3;
        right: auto;
        left: calc(269 * var(--fu));
        top: calc(500.5 * var(--fu));
        width: calc(86 * var(--fu));
        height: calc(86 * var(--fu));
    }

    .p-index__fv-scrollTxt {
        font-size: calc(10 * var(--fu));
    }

    .p-index__fv-scrollArrow {
        top: calc(59 * var(--fu));
        width: calc(5.8 * var(--fu));
        height: calc(7 * var(--fu));
    }
}

/* =============================================================
   p-index__news
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.p-index__news {
    padding: calc(135 * var(--u)) 0;
    background-color: var(--color-hamabo-blue);
    font-family: var(--font-noto);
    line-height: 1;
    /* SCROLL から飛んだときに FV が残らないよう、セクションの上端ぴったりで止める。
       この操作は下方向スクロールなのでヘッダーは隠れており、隠れ分の余白は要らない。 */
    scroll-margin-top: 0;
}

.p-index__news-inner {
    display: flex;
    align-items: stretch;
}

/* -------------------------------------------------------------
   head ( 見出し / サブ / ボタン )
   ------------------------------------------------------------- */
.p-index__news-head {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 38.084%;   /* 457 / 1200 */
}

/* ボタン本体の見た目は common.css の .c-btn / .c-btnInvert */

/* -------------------------------------------------------------
   body ( カテゴリ / 一覧 )
   ------------------------------------------------------------- */
.p-index__news-body {
    flex: 1;
    min-width: 0;
    padding-top: calc(87 * var(--u));
}

.p-index__news-category {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: calc(25 * var(--u));
    height: calc(25 * var(--u));
}

.p-index__news-categoryLabel {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-index__news-categoryList {
    display: flex;
    column-gap: calc(14 * var(--u));
}

/* カテゴリ / 記事タグ 共通のピル */
.p-index__news-cat,
.p-index__news-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(25 * var(--u));
    /* 字間（1px）は最後の文字の後ろにも付くので、そのぶん右の余白を削って
       文字の見た目を左右中央にそろえる */
    padding-inline: calc(10 * var(--u)) calc(10 * var(--u) - 0.0769em);
    /* 和文は行ボックスの中でやや下に描かれるため、下に 1px 足して
       文字の見た目を天地中央に寄せる（実測で 0.5px 下寄りだった） */
    padding-bottom: calc(2 * var(--u));
    border: 1px solid var(--color-midium-gray);
    border-radius: 13px;
    color: var(--color-midium-gray);
    font-size: calc(13 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0769em;   /* 1px（デザイン NEWS_タグ の実測） */
    line-height: 1;
    white-space: nowrap;
}

/* ホバー時の反転は common.css の .c-btnInvert */

/* --- list --- */
.p-index__news-list {
    margin-top: calc(26 * var(--u));
    border-top: 1px solid var(--color-medium-blue);
}

.p-index__news-item {
    border-bottom: 1px solid var(--color-medium-blue);
}

/* JS でカテゴリー切り替えをするまでの保険。
   一覧にはカテゴリーごとの記事も入っているので、素の状態では
   先頭 2 件だけ見せる（JS が動くと .is-ready が付いて解除される） */
.p-index__news-list:not(.is-ready) > .p-index__news-item:nth-child(n+3) {
    display: none;
}

.p-index__news-item[hidden] {
    display: none;
}

.p-index__news-link {
    display: flex;
    align-items: center;
    column-gap: calc(40 * var(--u));
    padding: calc(23 * var(--u)) 0 calc(24 * var(--u)) calc(24 * var(--u));
}

.p-index__news-content {
    flex: 1;
    min-width: 0;
}

.p-index__news-meta {
    display: flex;
    align-items: center;
    column-gap: calc(28 * var(--u));
}

.p-index__news-date {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-index__news-text {
    display: block;
    margin-top: calc(9.8 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* デザインどおりの 400 だと和文が太く見えるため 1 段細くする */
    font-weight: 300;
    line-height: 2;
}

.p-index__news-arrow {
    position: relative;
    flex-shrink: 0;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    margin-right: calc(37 * var(--u));
    background: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

/* ホバーで反転（白丸＋青矢印） */
.p-index__news-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/common/arrow_circle_white.png) no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s;
}

.p-index__news-link:hover {
    opacity: 1;
}

.p-index__news-link:hover .p-index__news-arrow::after {
    opacity: 1;
}

/* =============================================================
   SP
   ============================================================= */
/* -------------------------------------------------------------
   1000px 以下は 1 カラム（見出し → カテゴリ + 一覧 → ボタン）
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {

    .p-index__news-inner {
        flex-direction: column;
    }

    .p-index__news-head {
        display: contents;
    }

    .p-index__news-headTop { order: 1; }
    .p-index__news-body    { order: 2; }
    .p-index__news-btn     { order: 3; }

    .p-index__news-body {
        padding-top: calc(40 * var(--u));
    }

    .p-index__news-btn {
        margin-top: calc(40 * var(--u));
    }
}

@media screen and (max-width: 768px) {

    .p-index__news {
        padding: calc(77 * var(--u)) 0 calc(55 * var(--u));
    }

    .p-index__news-inner {
        flex-direction: column;
    }

    /* 並び順：見出し → サブ → 一覧 → ボタン */
    .p-index__news-head {
        display: contents;
    }

    .p-index__news-headTop { order: 1; }
    .p-index__news-body { order: 2; }
    .p-index__news-btn  { order: 3; margin-top: calc(31 * var(--u)); }

    .p-index__news-body {
        padding-top: 0;
        margin-top: calc(64 * var(--u));
    }

    /* SP はカテゴリ絞り込みなし */
    .p-index__news-category {
        display: none;
    }

    .p-index__news-list {
        margin-top: 0;
    }

    .p-index__news-link {
        padding: calc(18 * var(--u)) 0 calc(25.5 * var(--u));
        column-gap: 0;
    }

    .p-index__news-meta {
        column-gap: calc(24.5 * var(--u));
    }

    .p-index__news-tag {
        padding-inline: calc(7 * var(--u));
        letter-spacing: 0;
    }

    /* 長いタイトルは 3 行までにして、末尾を三点リーダーにする（お知らせ一覧の SP と同じ） */
    .p-index__news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        margin-top: calc(14 * var(--u));
        font-size: calc(14 * var(--u));
        line-height: 2;
    }

    .p-index__news-arrow {
        display: none;
    }
}

/* =============================================================
   p-index__about
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.p-index__about {
    position: relative;
    overflow: hidden;
    padding: calc(94 * var(--u)) 0 calc(123 * var(--u));
    background-color: var(--color-hamabo-blue);
    font-family: var(--font-noto);
    line-height: 1;
}

/* 背景の歯車（スクロール連動で回転） */
.p-index__about-gear {
    position: absolute;
    left: 50%;
    top: calc(269.5 * var(--u));
    z-index: 0;
    width: calc(732 * var(--u));
    aspect-ratio: 732 / 739;
    margin-left: calc(-809 * var(--u));
    background: url(../img/top/top_about_bg_gear.png) no-repeat center / contain;
    /* スクロールに連動させず、ゆっくり回り続ける */
    animation: c-gear-spin 30s linear infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .p-index__about-gear {
        animation: none;
    }
}

.p-index__about-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}

/* -------------------------------------------------------------
   head
   ------------------------------------------------------------- */
.p-index__about-head {
    flex-shrink: 0;
    width: 46.417%;   /* 557 / 1200 */
}

/* -------------------------------------------------------------
   body（左に白＋青のアクセント罫）
   ------------------------------------------------------------- */
.p-index__about-body {
    position: relative;
    flex: 1;
    min-width: 0;
    /* 本文の字間を、この箱の幅に合わせて自動で詰めるための基準 */
    container-type: inline-size;
    padding-top: calc(4 * var(--u));
    padding-left: calc(45 * var(--u));
}

.p-index__about-body::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(16 * var(--u));
    width: calc(2 * var(--u));
    height: calc(119 * var(--u));
    background-color: #fff;
}

.p-index__about-body::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(135 * var(--u));
    bottom: 0;
    width: calc(1 * var(--u));
    background-color: var(--color-medium-blue);
}

.p-index__about-headline {
    color: #fff;
    /* 1440px で 36px。狭い画面でもデザインの改行位置を保てるところまで詰める */
    font-size: clamp(28px, 2.5vw, 36px);
    /* 700 だと和文が太く見えるため 1 段細くする */
    font-weight: 600;
    line-height: 1.83;
}

.p-index__about-text {
    margin-top: calc(38 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* 白抜きの和文は 400 でも太く見えるため 1 段細くする */
    font-weight: 300;
    letter-spacing: 0.0625em;   /* 1px（デザイン実測） */
    /* 最長の行（32 文字）が収まらない幅（1100〜1340px 付近など）では、
       字間を 1px → 0 の間で自動的に詰めて、行の途中で折り返さないようにする */
    letter-spacing: clamp(0px, (100cqi - 516px) / 32, 0.0625em);
    line-height: 1.88;
}

.p-index__about-btn {
    margin-top: calc(37 * var(--u));
}

/* -------------------------------------------------------------
   slider（全幅・等速で左へ流れ続ける）
   ------------------------------------------------------------- */
.p-index__about-slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: calc(123 * var(--u));
}

.p-index__about-sliderTrack {
    display: flex;
    align-items: flex-start;
    width: max-content;
    animation: p-index__about-slide 60s linear infinite;
    animation-play-state: paused;
}

/* スクロールして画面に入ったら初期位置から動き出す */
.p-index__about-slider.is-active .p-index__about-sliderTrack {
    animation-play-state: running;
}

.p-index__about-slide {
    flex-shrink: 0;
    width: calc(350 * var(--u));
    aspect-ratio: 350 / 247;
    margin-right: calc(21 * var(--u));
    border-radius: calc(4 * var(--u));
    overflow: hidden;
}

.p-index__about-slide:nth-child(even) {
    margin-top: calc(123 * var(--u));
}

.p-index__about-slide img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

@keyframes p-index__about-slide {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .p-index__about-sliderTrack {
        animation: none;
    }
}

/* =============================================================
   SP
   ============================================================= */
/* -------------------------------------------------------------
   1000px 以下は 1 カラム（見出し → 本文）
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {

    .p-index__about-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .p-index__about-head {
        width: auto;
    }

    .p-index__about-body {
        margin-top: calc(48 * var(--u));
    }

    /* 1 カラムになり幅に余裕ができるので、見出しはデザイン値に戻す */
    .p-index__about-headline {
        font-size: calc(36 * var(--u));
    }
}

@media screen and (max-width: 768px) {

    .p-index__about {
        display: flex;
        flex-direction: column;
        padding: calc(58 * var(--u)) 0 calc(97 * var(--u));
    }

    /* 並び順：見出し → スライダー → 本文 */
    .p-index__about-inner {
        display: contents;
    }

    .p-index__about-head {
        order: 1;
        width: auto;
        padding-inline: calc(20 * var(--u));
    }

    .p-index__about-slider {
        order: 2;
        margin-top: calc(54 * var(--u));
    }

    .p-index__about-body {
        order: 3;
        margin-top: calc(77.5 * var(--u));
        padding-left: calc(51.5 * var(--u));
        padding-right: calc(20 * var(--u));
    }

    .p-index__about-gear {
        top: calc(363.5 * var(--u));
        width: calc(296 * var(--u));
        margin-left: calc(-92 * var(--u));
    }

    /* アクセント罫は本文までで、ボタンには掛からない */
    .p-index__about-body::before {
        left: calc(20 * var(--u));
        top: calc(10 * var(--u));
        width: calc(1.5 * var(--u));
        height: calc(62 * var(--u));
    }

    .p-index__about-body::after {
        left: calc(20 * var(--u));
        top: calc(72 * var(--u));
        bottom: calc(99.5 * var(--u));
        width: calc(1.5 * var(--u));
    }

    .p-index__about-headline {
        font-size: calc(20 * var(--u));
        line-height: 1.78;
    }

    .p-index__about-text {
        margin-top: calc(18 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 400;
        letter-spacing: 0;
        line-height: 2;
    }

    .p-index__about-btn {
        margin-top: calc(55 * var(--u));
        margin-left: calc(-31.5 * var(--u));
    }

    .p-index__about-slide {
        width: calc(166.5 * var(--u));
        aspect-ratio: 166.5 / 236.5;
        margin-right: calc(25.5 * var(--u));
    }

    .p-index__about-slide:nth-child(even) {
        margin-top: calc(53.5 * var(--u));
    }
}

/* =============================================================
   p-index__business
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.p-index__business {
    position: relative;
    background-color: #000;
    font-family: var(--font-noto);
    line-height: 1;
    /* スクロールで 01〜04 を切り替える。
       セクションの高さ ＝ パネルの高さ ＋ 切り替えぶんのスクロール量。
       --bizPanelH は JS が実測値を入れる（入らないときは中身なりに伸びる） */
    min-height: calc(var(--bizPanelH, 100vh) + 100vh * 4);
    min-height: calc(var(--bizPanelH, 100svh) + 100svh * 4);
}

/* 背景と中身をまとめる箱。これを sticky にしてスクロール固定にする
   （overflow / padding はセクションではなくこちらが持つ）

   止める位置は「基準の下端が画面の下端に来るところ」。
   基準は 2 カラム（1401px 以上）ではこの箱そのもの、
   1 カラム（1400px 以下）では歯車 .p-index__business-panel。
   sticky の bottom は下方向のスクロールでは効かないため、
   top を「画面の高さ − 基準までの高さ」にして止める。
   --bizStopH は JS が実測値を入れる。 */
.p-index__business-sticky {
    position: sticky;
    top: calc(100vh - var(--bizStopH, 100vh));
    top: calc(100svh - var(--bizStopH, 100svh));
    /* 箱が画面より低いと、止まっている間に箱の上へ隙間（黒帯）が出る。
       最低でも画面いっぱいの高さにして、増えたぶんは背景として上に伸ばす。
       画面が縦に大きいときは、余ったぶんを上下に分けて中身を中央に置く。 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: calc(131 * var(--u)) 0 calc(75.5 * var(--u));
}

/* -------------------------------------------------------------
   背景（4枚をクロスフェード）
   ------------------------------------------------------------- */
/* 画面が縦に大きいときは中身を中央に置くが、上下の余白（上 131 / 下 75.5）が
   違うままだと 27.75px 下に寄って見える。中央に見えるよう余白をそろえる。
   余白の合計は変えないので、中身が画面に収まらない高さでは今までと同じ見え方。
   2 カラム（1401px 以上）だけに掛ける。1 カラムは下余白を歯車の止め位置に使っている */
@media screen and (min-width: 1401px) and (min-height: 890px) {
    .p-index__business-sticky {
        padding-block: calc(103.25 * var(--u));
    }
}

.p-index__business-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-index__business-bgItem {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.p-index__business-bgItem.is-active {
    opacity: 1;
}

.p-index__business-bgItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 暗幕 */
.p-index__business-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.p-index__business-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}

/* -------------------------------------------------------------
   head（左カラム）
   ------------------------------------------------------------- */
.p-index__business-head {
    flex-shrink: 0;
    width: 37.25%;    /* 447 / 1200 */
}

.p-index__business-lead {
    margin-top: calc(32 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* 白抜きの和文は 400 でも太く見えるため 1 段細くする */
    font-weight: 300;
    letter-spacing: 0.0625em;   /* 1px（デザイン実測） */
    line-height: 2;
}

.p-index__business-listLabel {
    margin-top: calc(35 * var(--u));
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1;
}

/* --- 事業リスト --- */
.p-index__business-list {
    max-width: 444px;
    margin-top: calc(13 * var(--u));
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.p-index__business-listItem {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.p-index__business-listBtn {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(61 * var(--u));
    padding: 0 calc(10 * var(--u)) 0 0;
    border: 0;
    background: none;
    color: var(--color-midium-gray);
    font-family: var(--font-noto);
    text-align: left;
    transition: color 0.3s;
}

/* ホバーしたときは白くする */
.p-index__business-listBtn:hover {
    /* リンクの共通ホバー（薄くなる）は使わず、白へ変える見せ方をそのまま保つ */
    opacity: 1;
    color: #fff;
}

/* 2 カラム（1401px 以上）と SP では、歯車に表示中の項目も白くする。
   SP は歯車とリストが一緒に画面に収まる位置で止まるので対応が分かる。
   769〜1400px の 1 カラムは従来どおりホバーのときだけ */
@media screen and (min-width: 1401px), screen and (max-width: 768px) {

    .p-index__business-listBtn.is-active {
        color: #fff;
    }
}

.p-index__business-listNum {
    flex-shrink: 0;
    width: calc(52 * var(--u));
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 600;
    line-height: 1;
}

.p-index__business-listName {
    flex: 1;
    min-width: 0;
    font-size: calc(15 * var(--u));
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.p-index__business-listArrow {
    flex-shrink: 0;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    background-color: currentColor;
    -webkit-mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
    mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

.p-index__business-btn {
    margin-top: calc(50 * var(--u));
}

/* -------------------------------------------------------------
   panel（右カラム／歯車）
   ------------------------------------------------------------- */
.p-index__business-panel {
    position: relative;
    flex-shrink: 0;
    width: 54.667%;   /* 656 / 1200 */
    aspect-ratio: 1 / 1;
    margin-top: calc(5.5 * var(--u));
    margin-left: auto;
    margin-right: calc(11.5 * var(--u));
}

.p-index__business-gear {
    position: absolute;
    inset: 0;
}

.p-index__business-gearImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.p-index__business-gearImg.is-active {
    opacity: 1;
}

/* --- スライド --- */
.p-index__business-slide {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(148 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.p-index__business-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.p-index__business-num {
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(48 * var(--u));
    font-weight: 600;
    line-height: 1;
}

.p-index__business-cat::before,
.p-index__business-cat::after {
    content: '｜';
}

.p-index__business-cat {
    margin-top: calc(8 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.11em;
    line-height: 1;
    white-space: nowrap;
}

.p-index__business-headline {
    margin-top: calc(16 * var(--u));
    color: #fff;
    font-size: calc(32 * var(--u));
    /* 700 だと和文が太く見えるため 1 段細くする */
    font-weight: 600;
    line-height: 1.72;
    white-space: nowrap;
}

.p-index__business-desc {
    margin-top: calc(14 * var(--u));
    width: 42.835%;   /* 281 / 656（パネル内） */
    color: #fff;
    font-size: calc(14 * var(--u));
    /* 白抜きの和文は 400 でも太く見えるため 1 段細くする */
    font-weight: 300;
    letter-spacing: 0.0714em;   /* 1px（デザイン実測） */
    line-height: 1.71;
}

.p-index__business-more {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(14 * var(--u));
    width: calc(136 * var(--u));
    height: calc(30 * var(--u));
    margin-top: calc(21 * var(--u));
    border: 1px solid var(--color-midium-gray);
    border-radius: calc(15 *var(--u));
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    /* デザインは 400 ／ 字間 0 だが、白抜きだと詰まって見えるため
       1 段細くして字間を少しだけ足す */
    font-weight: 300;
    letter-spacing: 0.05em;   /* 0.7px */
    line-height: 1;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.p-index__business-more:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-hamabo-blue);
    opacity: 1;
}

.p-index__business-moreArrow {
    flex-shrink: 0;
    width: calc(15 * var(--u));
    aspect-ratio: 36 / 30;
    background-color: currentColor;
    -webkit-mask: url(../img/top/bizz_gear_arrow_leadmore.png) no-repeat center / contain;
    mask: url(../img/top/bizz_gear_arrow_leadmore.png) no-repeat center / contain;
}

/* --- PREV / NEXT --- */
.p-index__business-nav {
    position: absolute;
    top: calc(50% + 3 * var(--u));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-midium-gray);
    transition: color 0.3s;
}

.p-index__business-nav:hover {
    color: #fff;
    opacity: 1;
}

.p-index__business-nav--prev {
    left: 18.52%;   /* 121.5 / 656（パネル内） */
    transform: translate(-50%, -50%);
    align-items: flex-end;
}

.p-index__business-nav--next {
    left: 80.41%;   /* 527.5 / 656（パネル内） */
    transform: translate(-50%, -50%);
    align-items: flex-start;
}

.p-index__business-navNum {
    font-family: var(--font-mon);
    font-size: calc(20 * var(--u));
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.05em;
}

.p-index__business-navArrow {
    width: calc(40 * var(--u));
    margin-top: calc(-5 * var(--u));
    aspect-ratio: 41 / 7;
    background-color: currentColor;
    -webkit-mask: url(../img/top/bizz_gear_arrow_left.png) no-repeat center / contain;
    mask: url(../img/top/bizz_gear_arrow_left.png) no-repeat center / contain;
}

.p-index__business-nav--next .p-index__business-navArrow {
    -webkit-mask-image: url(../img/top/bizz_gear_arrow_right.png);
    mask-image: url(../img/top/bizz_gear_arrow_right.png);
}

.p-index__business-navLabel {
    font-family: var(--font-mon);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-top: calc(6 * var(--u));
}

/* =============================================================
   SP
   ============================================================= */
/* -------------------------------------------------------------
   1401px 以上（2 カラム時）はスクロール固定にして 01〜04 を切り替える。
   1400px 以下は 1 カラムで中身が画面より高くなるため、固定にはしない。
   ------------------------------------------------------------- */
@media screen and (min-width: 1401px) {

    .p-index__business-inner {
        width: 100%;
    }
}

/* -------------------------------------------------------------
   1400px 以下は 1 カラム（見出し → リード → 歯車 → リスト → ボタン）
   2 カラムのままだと歯車と見出し・本文が重なってしまうため
   ------------------------------------------------------------- */
@media screen and (max-width: 1400px) {

    .p-index__business-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .p-index__business-head {
        display: contents;
    }

    .p-index__business-headTtl   { order: 1; }
    .p-index__business-lead      { order: 2; }
    .p-index__business-panel     { order: 3; }
    .p-index__business-listLabel { order: 4; }
    .p-index__business-list      { order: 5; }
    .p-index__business-btn       { order: 6; }

    .p-index__business-panel {
        width: min(calc(656 * var(--u)), 100%);
        margin-top: calc(48 * var(--u));
        margin-inline: auto;
    }

    .p-index__business-listLabel {
        margin-top: calc(64 * var(--u));
    }

    /* 1 カラムではリード文・ラベルと同じく全幅にする。
       444px は PC 2 カラム時の左カラム幅（1200 の 37.25% = 447）に
       合わせた値なので、1 カラムでは解除する。 */
    .p-index__business-list {
        max-width: none;
    }
}

@media screen and (max-width: 768px) {

    /* SP の止める位置は JS が実測して --bizTopSp に入れる。
       CSS の 100svh とブラウザの innerHeight はアドレスバーの出方でずれるため、
       ここでは計算しない（リスト 01〜04 の下端が画面の下端に来る位置） */
    .p-index__business-sticky {
        top: var(--bizTopSp, 0px);
        padding: calc(70 * var(--u)) 0 calc(75.5 * var(--u));
    }

    /* 並び順：見出し → リード → 歯車 → リスト → ボタン */
    .p-index__business-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .p-index__business-head {
        display: contents;
    }

    .p-index__business-headTtl   { order: 1; }
    .p-index__business-lead      { order: 3; margin-top: calc(32 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 400; letter-spacing: 0; line-height: 2; }
    .p-index__business-panel     { order: 4; }
    .p-index__business-listLabel { order: 5; margin-top: calc(50 * var(--u)); }
    .p-index__business-list      { order: 6; }
    .p-index__business-btn       { order: 7; margin-top: calc(46 * var(--u)); }

    .p-index__business-panel {
        width: calc(345 * var(--u));
        margin-top: calc(41 * var(--u));
        /* 歯車は inner の左右パディング（20）より広い 345 のため、
           はみ出し分を左右へ均等に振って中央に置く。
           auto マージンは空きが負のとき 0 に潰れて左寄せになるうえ、
           cross 軸に auto があると align-self が無視されるため 0 に戻す。 */
        margin-inline: 0;
        align-self: center;
    }

    /* SP は PREV / NEXT を出さない */
    .p-index__business-nav {
        display: none;
    }

    .p-index__business-slide {
        top: calc(54.5 * var(--u));
    }

    .p-index__business-num       { font-size: calc(30 * var(--u)); letter-spacing: 0.03em; }
    .p-index__business-cat       { margin-top: calc(9 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: 0; }
    .p-index__business-headline  { margin-top: calc(7 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.6; }

    .p-index__business-desc {
        width: calc(203 * var(--u));
        margin-top: calc(11 * var(--u));
        font-size: calc(13 * var(--u));
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.69;
    }

    .p-index__business-more {
        width: auto;
        height: auto;
        margin-top: calc(11 * var(--u));
        padding: 0;
        column-gap: calc(5 * var(--u));
        border: 0;
        border-radius: 0;
        color: var(--color-midium-gray);
        font-size: calc(12 * var(--u));
        font-weight: 400;
        letter-spacing: 0;
    }

    .p-index__business-more:hover {
        background-color: transparent;
        color: #fff;
    }

    .p-index__business-moreArrow {
        width: calc(9 * var(--u));
    }

    .p-index__business-listNum {
        width: calc(53 * var(--u));
    }

    .p-index__business-listBtn {
        padding-right: 0;
    }
}

/* =============================================================
   p-index__company
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.p-index__company {
    /* 部門詳細を止める位置（画面が縦に短いときは、パネルの下が切れないところまで上げる） */
    --orgPinTop: min(calc(var(--l-header-h) + 262 * var(--u)), calc(100svh - 492.5 * var(--u)));
    padding-top: calc(144 * var(--u));
    background-color: var(--color-light-gray);
    font-family: var(--font-noto);
    line-height: 1;
}

/* 小見出しラベル（WHAT WE DO / HAMABO ORGANIZATION / COMPANY PROFILE） */
.p-index__company-label {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.64;
}

.p-index__company-headline {
    margin-top: calc(8 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(36 * var(--u));
    /* 700 だと和文が太く見えるため 1 段細くする */
    font-weight: 600;
    line-height: 1.83;
}

.p-index__company-text {
    margin-top: calc(26 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.0625em;
}

/* -------------------------------------------------------------
   WHAT WE DO
   ------------------------------------------------------------- */
/* 説明・組織図と部門詳細をまとめる箱。この中にいる間だけ両方を固定する。
   flow-root は、中のマージンが外に抜けないようにするため（下端の位置を確定させる） */
.p-index__company-pin {
    position: relative;
    display: flow-root;
}

.p-index__company-what {
    position: sticky;
    /* 下端が部門詳細パネルの 58px 上（通常時と同じ間隔）に来るように、
       自分の高さぶん上げた位置で止める。
       --whatH（実際の高さ）は script.js が入れる。入る前は既定値で計算する */
    top: calc(var(--orgPinTop) - 58 * var(--u) - var(--whatH, 645px));
    z-index: 1;
    display: flex;
    align-items: flex-start;
    margin-top: calc(32 * var(--u));
}

.p-index__company-whatBody {
    flex-shrink: 0;
    width: 37.25%;    /* 447 / 1200 */
    padding-top: calc(110 * var(--u));
}

.p-index__company-btn {
    margin-top: calc(39 * var(--u));
}

/* --- 組織図（歯車＋3部門） --- */
.p-index__company-chart {
    position: relative;
    flex-shrink: 0;
    width: 54.417%;   /* 653 / 1200 */
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: calc(11 * var(--u));
}

.p-index__company-chartGear {
    position: absolute;
    inset: 0;
    background: url(../img/top/top_company_gear.webp) no-repeat center / contain;
}

/* --- 3部門の円 --- */
.p-index__company-node {
    /* 円が小さくなっても中身が収まるよう、文字をノード幅基準で拡縮する
       （1440px 時のノード直径 229.9px = 100cqw。旧デザイン値をそのまま換算） */
    container-type: inline-size;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 35.2%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: rgba(0, 64, 149, .9);
    color: #fff;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.p-index__company-node--venture { left: 24.6%; top: 23.1%; }
.p-index__company-node--front   { left: 75.4%; top: 23.1%; }
.p-index__company-node--lab     { left: 50%; top: 78.5%; }

.p-index__company-nodeIcon {
    width: calc(29 * var(--u));
    width: 12.614cqw;   /* 29 / 229.9 */
    aspect-ratio: 29 / 40;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.p-index__company-node--front .p-index__company-nodeIcon {
    width: calc(68 * var(--u));
    width: 29.578cqw;   /* 68 / 229.9 */
    aspect-ratio: 68 / 41;
}
.p-index__company-node--lab .p-index__company-nodeIcon {
    width: calc(43);
    aspect-ratio: 1 / 1;
}
.p-index__company-nodeName {
    margin-top: calc(14 * var(--u));
    margin-top: 6.09cqw;    /* 14 / 229.9 */
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-size: 10.44cqw;    /* 24 / 229.9 */
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-index__company-nodeLead {
    margin-top: calc(11 * var(--u));
    margin-top: 4.785cqw;   /* 11 / 229.9 */
    font-size: calc(14 * var(--u));
    font-size: 6.09cqw;     /* 14 / 229.9 */
    font-weight: 400;
    line-height: 1.71;
    letter-spacing: 0.071em;
}

/* --- 3本の矢印 --- */
.p-index__company-chartArrow {
    position: absolute;
    z-index: 1;
    background-color: var(--color-midium-gray);
    opacity: 0;
    transition: opacity 0.7s ease;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* 円（直径33.1%）に掛からないよう、円と円のすき間に収める */
.p-index__company-chartArrow--top {
    left: 50%;
    top: 23.1%;
    width: 13.5%;
    aspect-ratio: 354 / 72;
    transform: translate(-50%, -50%);
    -webkit-mask-image: url(../img/top/top_company_gear_arrow01.png);
    mask-image: url(../img/top/top_company_gear_arrow01.png);
}

.p-index__company-chartArrow--left {
    left: 23%;
    top: 44%;
    width: 8.54%;
    aspect-ratio: 217 / 590;
    -webkit-mask-image: url(../img/top/top_company_gear_arrow02.png);
    mask-image: url(../img/top/top_company_gear_arrow02.png);
}

.p-index__company-chartArrow--right {
    right: 23%;
    top: 43.5%;
    width: 8.7%;
    aspect-ratio: 221 / 590;
    -webkit-mask-image: url(../img/top/top_company_gear_arrow03.png);
    mask-image: url(../img/top/top_company_gear_arrow03.png);
}

/* --- 表示アニメーション（円 → 矢印の順） --- */
.p-index__company-chart.is-shown .p-index__company-node {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.p-index__company-chart.is-shown .p-index__company-node--venture { transition-delay: 0.1s; }
.p-index__company-chart.is-shown .p-index__company-node--front   { transition-delay: 0.35s; }
.p-index__company-chart.is-shown .p-index__company-node--lab     { transition-delay: 0.6s; }

.p-index__company-chart.is-shown .p-index__company-chartArrow {
    opacity: 1;
    transition-delay: 1s;
}

/* -------------------------------------------------------------
   部門詳細（スクロールで切り替え）
   ------------------------------------------------------------- */
.p-index__company-org {
    position: relative;
    margin-top: calc(58 * var(--u));
    /* 3枚ぶんスクロールする間、パネルを固定して切り替える。
       1 枚あたりのスクロール量は「高さ − 画面の高さ」を 3 等分したもの。
       ゆっくり切り替えたいので、その量が 2 倍になる高さにしている
       （2 × 1405.5 − 画面の高さ → 差し引き 2 倍） */
    height: calc(468.5 * 6 * var(--u) - 100svh);
    /* 囲み（company-pin）の下端をパネル 1 枚ぶん上げ、説明・組織図と部門詳細が
       同じところで固定を終えるようにする。ずらしたぶんは下の COMPANY PROFILE で戻す */
    margin-bottom: calc(-526.5 * var(--u));
}

.p-index__company-orgPanel {
    position: sticky;
    /* 組織図と「会社を知る」ボタンが上に見えている位置で止める */
    top: var(--orgPinTop);
    display: flex;
    align-items: flex-start;
    column-gap: calc(106 * var(--u));
    height: calc(468.5 * var(--u));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.p-index__company-orgPanel + .p-index__company-orgPanel {
    margin-top: calc(-468.5 * var(--u));
}

.p-index__company-orgPanel.is-active {
    opacity: 1;
    visibility: visible;
}

.p-index__company-orgImg {
    flex-shrink: 0;
    overflow: hidden;
    width: 45.792%;  /* 549.5 / 1200 */
    aspect-ratio: 2200 / 1876;
    border-radius: calc(8 * var(--u));
}

.p-index__company-orgImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-index__company-orgBody {
    flex: 1;
    min-width: 0;
    padding-top: calc(52 * var(--u));
}

.p-index__company-orgTtl {
    display: flex;
    align-items: center;
    column-gap: calc(38 *var(--u));
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-weight: 500;
    line-height: 1;
}

.p-index__company-orgNum { font-size: calc(24 * var(--u)); font-weight: 600; }
.p-index__company-orgName { font-size: calc(40 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; }

.p-index__company-orgText {
    margin-top: calc(10 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 2;
}

.p-index__company-org .p-index__company-label {
    margin-top: calc(41 * var(--u));
}

.p-index__company-orgList {
    max-width: 444px;
    margin-top: calc(20 * var(--u));
    border-top: 1px solid var(--color-light-silver);
}

.p-index__company-orgItem {
    border-bottom: 1px solid var(--color-light-silver);
}

.p-index__company-orgLink {
    display: flex;
    align-items: center;
    height: calc(61 * var(--u));
    color: var(--color-midium-gray);
    transition: color 0.3s;
}

.p-index__company-orgLink:hover,
.p-index__company-orgLink.is-current {
    color: var(--color-hamabo-blue);
    opacity: 1;
}

/* 青くなったときだけ太くする */
.p-index__company-orgLink:hover .p-index__company-orgItemName,
.p-index__company-orgLink.is-current .p-index__company-orgItemName {
    font-weight: 600;
}

.p-index__company-orgItemNum {
    flex-shrink: 0;
    width: calc(54.5 * var(--u));
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 600;
    line-height: 1;
}

.p-index__company-orgItemName {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
}

.p-index__company-orgItemArrow {
    flex-shrink: 0;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    margin-right: calc(16 * var(--u));
    background-color: currentColor;
    -webkit-mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
    mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

/* -------------------------------------------------------------
   COMPANY PROFILE
   ------------------------------------------------------------- */
.p-index__company-profile {
    /* 136px ＋ 部門詳細の負のマージン（526.5px）ぶん */
    margin-top: calc(662.5 * var(--u));
}

.p-index__company-profile .p-index__company-headline {
    line-height: 1.78;
}

.p-index__company-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(69.5 * var(--u));
    row-gap: calc(55.5 * var(--u));
    margin-top: calc(74 * var(--u));
}

.p-index__company-card {
    position: relative;
    min-width: 0;
}

/* ホバー時の青い縦線。border を 2px に差し替えると中身が 1px ずれるため上に重ねる。
   a:hover の opacity の影響を受けないよう、リンクではなくカード側に置く */
.p-index__company-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 2px;
    background-color: var(--color-hamabo-blue);
    opacity: 0;
    transition: opacity 0.3s;
}

.p-index__company-card:hover::before {
    opacity: 1;
}

.p-index__company-cardLink {
    display: flex;
    align-items: flex-start;
    height: calc(120.5 * var(--u));
    padding-left: calc(26 * var(--u));
    border-left: 1px solid var(--color-light-silver);
    color: var(--color-hamabo-blue);
}

.p-index__company-cardBody {
    flex: 1;
    min-width: 0;
}

.p-index__company-cardEn {
    display: block;
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.64;
}

.p-index__company-cardJa {
    display: block;
    margin-top: calc(5 * var(--u));
    font-size: calc(15 * var(--u));
    font-weight: 500;
    line-height: 1.67;
}

.p-index__company-cardArrow {
    position: relative;
    flex-shrink: 0;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    margin-top: calc(26 * var(--u));
    margin-right: calc(35 * var(--u));
    transition: transform 0.3s;
}

/* 通常の丸矢印はグレー。色を変えられるようマスクで描く（マスクを要素本体に
   掛けるとホバー用の重ねが切り取られてしまうため ::before に持たせている） */
.p-index__company-cardArrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-midium-gray);
    -webkit-mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
    mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

/* ホバーで反転（青丸＋白矢印） */
.p-index__company-cardArrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/common/arrow_circle_blue.png) no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s;
}

.p-index__company-cardThumb {
    flex-shrink: 0;
    overflow: hidden;
    /* 1440px で 120px。カードが狭くなる幅ではテキストに幅を譲る */
    width: clamp(80px, 8.34vw, calc(120 * var(--u)));
    aspect-ratio: 1 / 1;
    border-radius: calc(6 * var(--u));
}

.p-index__company-cardThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* ホバー：矢印を反転＋右へ送り、写真をゆっくりズーム
   （a:hover の opacity 0.7 が掛かると反転が濁るので打ち消す） */
.p-index__company-cardLink:hover {
    opacity: 1;
}

.p-index__company-card:hover .p-index__company-cardArrow::after {
    opacity: 1;
}

.p-index__company-card:hover .p-index__company-cardThumb img {
    transform: scale(1.08);
}

.p-index__company-cardLink:hover .p-index__company-cardArrow {
    transform: translateX(calc(5 * var(--u)));
}

/* -------------------------------------------------------------
   いまと未来に、橋をかける。（スクロールで広がる）
   ------------------------------------------------------------- */
.p-index__company-bridge {
    --bp: 0;                 /* 0 → 1 : スクロール進捗 */
    margin-top: calc(95 * var(--u));
    background-color: var(--color-light-gray);
}

.p-index__company-bridgeInner {
    position: relative;
    overflow: hidden;
    /* 大きさは最初から最終形。動きは transform だけで作る（毎フレームの
       レイアウト計算をなくし、カクつきを防ぐため） */
    width: 100%;
    aspect-ratio: 1440 / 846.5;
    margin-inline: auto;
}

.p-index__company-bridge.is-expanded {
    --bp: 1;
}

/* 円で出す準備。JS（initCompany）が付けるので、JS が動かないときは
   切り抜かず、そのままの大きさで見える。
   中央から円形の切り抜きを広げながら（clip-path）、帯自体も 0.58 倍から
   等倍へ拡大する（transform）。
   大きさの変化は width ではなく transform で作る。width だと毎フレーム
   レイアウトと画像の描き直しが起きてカクつくため。
   円は最後に 78%（帯の縦横比 1440 : 846.5 では 70.5% で四隅まで届く） */
.p-index__company-bridge.is-animReady .p-index__company-bridgeInner {
    clip-path: circle(0% at 50% 50%);
    transform: scale(0.58);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, clip-path;
}

.p-index__company-bridge.is-animReady.is-expanded .p-index__company-bridgeInner {
    clip-path: circle(78% at 50% 50%);
    transform: scale(1);
}

/* 上下を 2px 内側にとどめる。端まで塗ると overflow:hidden の切り取り線が
   端数ピクセルに掛かり、Windows の拡大表示（125%・150%）などで
   帯の上下に薄い横線が出るため。円弧のマスクが覆う範囲なので見た目は変わらない */
.p-index__company-bridgeBg {
    position: absolute;
    inset: 2px 0;
}

.p-index__company-bridgeBg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-index__company-bridgeBg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 64, 149, 0.72);
}

/* 上下を H ロゴ状の円弧で抜く（半径は 1440 幅で R=1144 相当） */
.p-index__company-bridgeMaskTop,
.p-index__company-bridgeMaskBottom {
    position: absolute;
    left: 50%;
    z-index: 1;
    width: 158.9%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--color-light-gray);
    transform: translateX(-50%);
}

.p-index__company-bridgeMaskTop { bottom: 69.9%; }
.p-index__company-bridgeMaskBottom { top: 69.8%; }

.p-index__company-bridgeBody {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 矩形が広がるのに少し遅れてテキストをフェードイン。
       少し下から上がってくる動きも付ける */
    opacity: clamp(0, calc((var(--bp) - 0.62) / 0.32), 1);
    transform: translateY(-50%) translateY(calc((1 - var(--bp)) * 14 * var(--u)));
    transition: opacity 0.7s ease 0.6s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .p-index__company-bridgeInner {
        clip-path: none;
        transform: none;
        transition: none;
    }

    .p-index__company-bridgeBody {
        opacity: 1;
        transform: translateY(-50%);
        transition: none;
    }
}

/* 文字は画像（belt_imato.png）。もとの見出し 38px 相当の幅にそろえる */
.p-index__company-bridgeJa {
    width: calc(503 * var(--u));
}

.p-index__company-bridgeEn {
    width: 20%;       /* 288 / 1440（ブリッジ枠内） */
    margin-top: calc(41 * var(--u));
}

/* 英語版：Figma（英語版）は和文が無く、英字 1 行（書き出し 734 x 59）だけ */
.p-index__company-bridgeEn--main {
    width: calc(734 * var(--u));
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .p-index__company-node,
    .p-index__company-chartArrow {
        transition-duration: 0.01ms;
    }
}

/* -------------------------------------------------------------
   1330px 以下はカード 3 列だと文言が入りきらないため 2 列にする
   ------------------------------------------------------------- */
@media screen and (max-width: 1330px) {

    .p-index__company-cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(60 * var(--u));
    }
}

/* -------------------------------------------------------------
   980px 以下は 2カラムが収まらないため縦積みに切り替える
   ------------------------------------------------------------- */
@media screen and (max-width: 980px) {

    .p-index__company-what {
        position: static;
        top: auto;
        flex-wrap: wrap;
        row-gap: calc(48 * var(--u));
    }

    .p-index__company-org {
        margin-bottom: 0;
    }

    .p-index__company-profile {
        margin-top: calc(136 * var(--u));
    }

    .p-index__company-whatBody {
        width: 100%;
        padding-top: 0;
    }

    /* 本文の <br> は 2 カラム時（幅 447px）の改行位置。縦積みで幅が広がると
       右側が大きく空くため、固定改行を解除して幅に合わせて折り返す。
       word-break: auto-phrase で文節単位の改行にし、単語の途中で割れるのを防ぐ。 */
    .p-index__company-text br {
        display: none;
    }

    .p-index__company-text {
        word-break: auto-phrase;
        text-wrap: pretty;
    }

    .p-index__company-chart {
        order: -1;
        margin-inline: auto;
    }

    .p-index__company-org {
        height: auto;
    }

    .p-index__company-orgPanel {
        position: static;
        display: block;
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    .p-index__company-orgPanel + .p-index__company-orgPanel {
        margin-top: calc(56 * var(--u));
    }

    .p-index__company-orgImg {
        width: 100%;
    }

    .p-index__company-orgBody {
        padding-top: calc(24 * var(--u));
    }

    /* desc の <br class="u-pcb"> は 2 カラム時の改行位置。
       u-pcb が消えるのは 768px 以下なので、769〜980px では効いたまま
       右側が大きく空く。この帯でも解除して幅に合わせて折り返す。 */
    .p-index__company-orgText br {
        display: none;
    }

    .p-index__company-orgText {
        word-break: auto-phrase;
        text-wrap: pretty;
    }

    /* 444px は 2 カラム時の右カラム幅に合わせた値。縦積みでは全幅にする */
    .p-index__company-orgList {
        max-width: none;
    }

    /* 罫線が全幅になるので、丸矢印も罫線の右端（＝画像の右端）にそろえる。
       16px の内寄せは 2 カラム時にリストが右カラム内に収まっているための値 */
    .p-index__company-orgItemArrow {
        margin-right: 0;
    }

    .p-index__company-cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(48 * var(--u));
    }

    .p-index__company-cardArrow {
        margin-right: calc(16 * var(--u));
    }
}

/* -------------------------------------------------------------
   組織図：769〜960px も SP と同じくスクロールで 3 枚を切り替える
   （980px 以下の縦積み指定を打ち消して sticky に戻す）

   この帯は画像が幅 100% に追従するため自然高さが 1 画面を超える。
   パネルを縦 flex にして「本文は自然高さ・画像が残りを吸収」とし、
   パネル高さの上限（--orgPanelH）は JS が innerHeight から算出する。
   画像は object-fit: cover のため、縮んでも中央がトリミングされるだけ。
   ------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 960px) {

    .p-index__company-org {
        /* JS が実測値で上書きする。下は JS が動かない場合の初期値 */
        --orgPanelH: calc(639 * var(--u));
        height: calc(var(--orgPanelH) * 3);
    }

    .p-index__company-orgPanel {
        position: sticky;
        /* ヘッダーはスクロールダウンで隠れるため、上端ぎわに固定する */
        top: calc(20 * var(--u));
        display: flex;
        flex-direction: column;
        height: var(--orgPanelH);
        opacity: 0;
        visibility: hidden;
    }

    .p-index__company-orgPanel + .p-index__company-orgPanel {
        margin-top: calc(var(--orgPanelH) * -1);
    }

    /* 画像が余った高さを吸収する。aspect-ratio は解除 */
    .p-index__company-orgImg {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        aspect-ratio: auto;
    }

    /* パネルは align-items: flex-start（横並びのときの指定）を引き継ぐため、
       縦積みにすると本文が内容ぶんの幅までしか広がらない（LAB がいちばん狭い）。
       ここでは横幅いっぱいに伸ばす */
    .p-index__company-orgBody {
        flex: 0 0 auto;
        align-self: stretch;
    }
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    .p-index__company {
        padding-top: calc(70 * var(--u));
    }

    .p-index__company-label { font-size: calc(13 * var(--u)); line-height: 1.64;}

    .p-index__company-headline {
        margin-top: calc(5 * var(--u));
        font-size: calc(24 * var(--u));
        line-height: 1.75;
    }

    /* COMPANY PROFILE 側は 1 行が長いため 20 に留める（24 だと 375px で折り返す） */
    .p-index__company-profile .p-index__company-headline {
        font-size: calc(20 * var(--u));
    }

    .p-index__company-text {
        margin-top: calc(19 * var(--u));
        font-size: calc(16 * var(--u));
        line-height: 2;
    }

    /* --- WHAT WE DO --- */
    /* SP は タイトル → 歯車 → 本文 の順 */
    .p-index__company-what {
        display: flex;
        flex-direction: column;
        margin-top: calc(48 * var(--u));
    }

    .p-index__company-whatBody {
        width: auto;
        padding-top: 0;
    }

    .p-index__company-btn { margin-top: calc(19 * var(--u)); }

    .p-index__company-chart {
        order: -1;
        width: calc(335 * var(--u));
        /* 本文との間隔は 980px 以下の row-gap（48）に任せる */
        margin: 0 auto;
    }

    /* 3部門ノード：円が小さいので中身をひとまわり詰め、円からはみ出さないようにする。
       アイコンは幅ではなく高さで揃える（FRONT だけ横長のため） */
    .p-index__company-node .p-index__company-nodeIcon {
        width: auto;
        height: calc(21 * var(--u));
    }

    .p-index__company-nodeName {
        margin-top: calc(5 * var(--u));
        font-size: calc(12 * var(--u));
    }

    .p-index__company-nodeLead {
        margin-top: calc(4 * var(--u));
        font-size: calc(9 * var(--u));
        line-height: 1.55;
    }

    /* 英語版は語が長く 4〜5 行になるので、円（SP は直径 118px）の縁に
       掛からないよう少しだけ小さく・詰めて組む（375〜414px で縁から 3px 以上あける） */
    html[lang^="en"] .p-index__company-nodeLead {
        font-size: calc(8.5 * var(--u));
        line-height: 1.45;
    }

    /* --- 部門詳細（SP も PC と同様、スクロールで 3 枚を切り替える）---
       パネル高さは SP 幅に関係なく 639（--u 換算）で一定 */
    .p-index__company-org {
        /* パネル 1 枚の高さ。画像が幅 100% 追従なのに対し --u は 1.2px で頭打ちになるため、
           JS が実測値で上書きする（下の値は JS が動かない場合の初期値） */
        --orgPanelH: calc(639 * var(--u));
        margin-top: calc(56 * var(--u));
        height: calc(var(--orgPanelH) * 3);
    }

    .p-index__company-orgPanel {
        /* 980px 以下の縦積み指定を打ち消して sticky に戻す */
        position: sticky;
        opacity: 0;
        visibility: hidden;
        display: block;
        height: var(--orgPanelH);
        /* 画面上端ぎわに固定する。ヘッダーはスクロールダウンで隠れるため、
           その分をパネルの表示領域として使える（639 + 20 = 659 で縦 667px でも収まる） */
        top: calc(20 * var(--u));
    }

    .p-index__company-orgPanel + .p-index__company-orgPanel {
        margin-top: calc(var(--orgPanelH) * -1);
    }

    .p-index__company-orgImg {
        width: 100%;
        aspect-ratio: 3000 / 2000;
    }

    .p-index__company-orgBody { padding-top: calc(25 * var(--u)); }

    .p-index__company-orgTtl { column-gap: calc(24 * var(--u)); line-height: 2; }
    .p-index__company-orgNum { font-size: calc(20 * var(--u)); }
    .p-index__company-orgName { font-size: calc(24 * var(--u)); }

    .p-index__company-orgText {
        margin-top: 0;
        font-size: calc(16 * var(--u));
        line-height: 2;
    }

    .p-index__company-org .p-index__company-label { margin-top: calc(36 * var(--u)); }

    .p-index__company-orgLink { height: calc(56 * var(--u)); }

    /* --- COMPANY PROFILE --- */
    .p-index__company-profile { margin-top: calc(72 * var(--u)); }

    .p-index__company-cards {
        grid-template-columns: 1fr;
        row-gap: calc(30 * var(--u));
        margin-top: calc(33 * var(--u));
    }

    /* SP は「左：テキスト＋その下に矢印／右：画像」の 2 カラム（グリッドで組み替える） */
    .p-index__company-cardLink {
        display: grid;
        grid-template-columns: 1fr calc(118 * var(--u));
        grid-template-rows: auto 1fr;
        align-items: start;
        column-gap: calc(16 * var(--u));
        height: calc(121 * var(--u));
        padding-left: calc(25 * var(--u));
    }

    .p-index__company-cardBody {
        grid-column: 1;
        grid-row: 1;
    }

    .p-index__company-cardEn { font-size: calc(14 * var(--u)); line-height: 1.64; }
    .p-index__company-cardJa { margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 400; line-height: 1.66; }

    /* 矢印はテキストの下・左揃えでカード下端に置く */
    .p-index__company-cardArrow {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        margin: 0;
    }

    /* 画像はカードの高さいっぱい */
    .p-index__company-cardThumb {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    /* タッチ端末では :hover がタップ後も残り、戻る操作で復帰したときに
       カードが青いままになる。SP では COMPANY PROFILE のカードのホバー演出を
       すべて無効化し、状態表現は下の :active だけに任せる */
    .p-index__company-card:hover::before {
        opacity: 0;
    }

    .p-index__company-card:hover .p-index__company-cardArrow::after {
        opacity: 0;
    }

    .p-index__company-card:hover .p-index__company-cardThumb img {
        transform: none;
    }

    .p-index__company-cardLink:hover .p-index__company-cardArrow {
        transform: none;
    }

    /* SP はロード時は全カードグレー（罫線＝シルバー／丸矢印＝グレー）。
       タップ中だけ PC のホバーと同じ配色（罫線＝青／丸矢印＝青丸＋白矢印）に戻す。
       iOS Safari は div の :active が反応しないことがあるため、
       a 自身を起点にした :has() 版を別ルールで並べている
       （セレクタリストにまとめると :has() 未対応環境でルールごと無効になる） */
    .p-index__company-card:active::before {
        opacity: 1;
    }

    .p-index__company-card:has(.p-index__company-cardLink:active)::before {
        opacity: 1;
    }

    .p-index__company-cardLink:active .p-index__company-cardArrow::after {
        opacity: 1;
    }

    /* :active が効かない端末（iOS Safari など）向けに JS が付ける状態。
       指を離した直後に消えないよう、JS 側で最低 300ms 残している */
    .p-index__company-card.is-tap::before {
        opacity: 1;
    }

    .p-index__company-card.is-tap .p-index__company-cardArrow::after {
        opacity: 1;
    }

    /* --- bridge --- */
    .p-index__company-bridge { margin-top: calc(56 * var(--u)); }

    /* Figma(SP) 実測：最大展開時 375 x 295、上下の円弧は半径 373（幅の 198.9%）でサジッタ 52px */
    .p-index__company-bridgeInner {
        width: calc((70 + 30 * var(--bp)) * 1%);
        aspect-ratio: 375 / 295;
    }

    .p-index__company-bridgeMaskTop,
    .p-index__company-bridgeMaskBottom {
        width: 198.9%;
    }

    .p-index__company-bridgeMaskTop { bottom: 82.3%; }
    .p-index__company-bridgeMaskBottom { top: 82.3%; }

    .p-index__company-bridgeJa { width: calc(318 * var(--u)); }

    .p-index__company-bridgeEn {
        width: calc(186 * var(--u));
        margin-top: calc(16 * var(--u));
    }

    /* 英語版（SP の Figma は無いので、左右 20px の余白内に収める） */
    .p-index__company-bridgeEn--main {
        width: min(calc(320 * var(--u)), 100% - 40px);
        margin-top: 0;
    }
}

/* =============================================================
   p-index__people
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.p-index__people {
    --people-card-w: calc(330 * var(--u));
    --people-gap: calc(16 * var(--u));
    padding: calc(147 * var(--u)) 0 calc(155 * var(--u));
    background-color: var(--color-light-gray);
    font-family: var(--font-noto);
    line-height: 1;
    overflow: hidden;
}

/* -------------------------------------------------------------
   head
   ------------------------------------------------------------- */
.p-index__people-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: calc(60 * var(--u));
}

.p-index__people-lead {
    width: 43.667%;   /* 524 / 1200 */
    margin-top: calc(4 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 2;
}

/* -------------------------------------------------------------
   foot（矢印ボタン / 人を知る）
   ------------------------------------------------------------- */
/* 前へ／次へ は共通スライダー（people.css）が持つので、
   ボタンだけをその行に重ねる */
.p-index__people .c-peopleSlider__nav {
    margin-top: calc(49 * var(--u));
}

.p-index__people-foot {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-top: calc(-37 * var(--u));
}

.p-index__people-btn {
    margin-top: calc(7 * var(--u));
}

/* foot は l-inner のため左余白が --gut（1260px 以下では 24px）になるが、
   スライダーの左位置は 120px 固定。矢印がカードの左端と揃うよう、
   foot の左パディングだけスライダーと同じ 120px に合わせる。
   1440px 以上では --gut が 120px なので実質変化しない。
   ※右側の「人を知る」ボタンは padding-right を触らないため動かない。 */
@media screen and (min-width: 769px) {
    .p-index__people-foot {
        padding-left: calc(120 * var(--u));
    }
}

/* =============================================================
   SP（縦並びの一覧）
   ============================================================= */
@media screen and (max-width: 768px) {

    .p-index__people {
        padding: calc(70 * var(--u)) 0 calc(99 * var(--u));
    }

    .p-index__people-head {
        display: block;
    }

    .p-index__people-lead {
        width: auto;
        margin-top: calc(30 * var(--u));
        font-size: calc(16 * var(--u));
        line-height: 2;
    }

    /* SP は矢印ボタン不要 */
    .p-index__people .c-peopleSlider__nav {
        display: none;
    }

    .p-index__people-foot {
        display: block;
        margin-top: calc(48 * var(--u));
    }

    .p-index__people-btn {
        width: 100%;
        margin-top: 0;
    }
}


/* COMPANY PROFILE カード：下の行（日本語）がないとき（英語版）は、英字をメインの文字として見せる */
.p-index__company-cardEn:only-child {
    color: inherit;
    font-size: calc(15 * var(--u));
    font-weight: 500;
    line-height: 1.67;
}

/* 1 行だけのときは、PC の丸矢印（日本語の行に高さを合わせてある）を文字の行にそろえる */
@media screen and (min-width: 769px) {
    .p-index__company-cardBody:has(> .p-index__company-cardEn:only-child) + .p-index__company-cardArrow {
        margin-top: calc(-2 * var(--u));
    }
}

/* 英語版（Montserrat）：Noto Sans より 1 割ほど字幅が広いので、折り返しが崩れる箇所だけ詰める */
/* COMPANY の見出し（3 行の改行位置どおりに収める） */
@media screen and (min-width: 769px) {
    html[lang^="en"] .p-index__company-whatBody .p-index__company-headline {
        font-size: calc(32 * var(--u));
    }
}

@media screen and (min-width: 769px) and (max-width: 1439px) {
    html[lang^="en"] .p-index__company-whatBody .p-index__company-headline {
        font-size: calc(28 * var(--u));
    }
}

/* BUSINESS の歯車の説明文（SP）：3 行に収まるよう文字の枠を少し広げる（Read More の位置は変わらない） */
@media screen and (max-width: 768px) {
    html[lang^="en"] .p-index__business-desc {
        width: calc(226 * var(--u));
    }
}

/* 英語版 BUSINESS の歯車の見出しは 3 行（管理画面の改行で「短い／長い／短い」の形にしてある）。
   長い 1 行が歯車の輪にかからないようにするため。行送りは和文用の 1.72 だと 3 行で間延びし、
   Read More も下がるので詰める（PC・SP 共通） */
html[lang^="en"] .p-index__business-headline {
    line-height: 1.3;
}

/* COMPANY の部門パネル（PC）：右の説明は上から 52px の位置に積んでいたため、一覧の下線が写真の下端より
   20px ほど下に出ていた（写真は幅に合わせて縮むので、画面が狭いほど差が広がる）。
   写真はパネルの高さ（468.5px）いっぱいに敷き、説明は写真の下端にそろえて下から積む。
   収まらないときは上端から始まる（margin-top: auto は余りがあるときだけ効く）。
   980px 以下は写真と説明を縦に積むので対象外 */
@media screen and (min-width: 981px) {
    .p-index__company-orgImg {
        align-self: stretch;
        aspect-ratio: auto;
    }

    .p-index__company-orgBody {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        padding-top: 0;
    }

    .p-index__company-orgTtl {
        margin-top: auto;
    }
}

/* 英語版は説明文が長く、981〜1439px ではパネルに収まらないので、写真との間と本文を少し詰める */
@media screen and (min-width: 981px) and (max-width: 1439px) {
    html[lang^="en"] .p-index__company-orgPanel {
        column-gap: calc(64 * var(--u));
    }

    html[lang^="en"] .p-index__company-orgText {
        font-size: calc(15 * var(--u));
        line-height: 1.85;
    }
}

/* 英語版の 981〜1099px はさらに右の幅が細くなるので、写真との間と「HAMABO ORGANIZATION」の上も詰める */
@media screen and (min-width: 981px) and (max-width: 1099px) {
    html[lang^="en"] .p-index__company-orgPanel {
        column-gap: calc(40 * var(--u));
    }

    html[lang^="en"] .p-index__company-org .p-index__company-label {
        margin-top: calc(28 * var(--u));
    }
}