/* メイン画像（見出し） */
.topView {
    position: relative;
    min-height: clamp(500px, 70vw, 1100px);
    /* ★ 固定1100px → 可変に */
    overflow: hidden;
}

.topView img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    /* ★ 追加：キャッチコピーがどの画像も左寄りに配置されているため、
       トリミングは右側から行われるように固定し、狭い画面でも
       文字が見切れないようにする */
    display: block;

    opacity: 0;
    transform: scale(1.08);
    z-index: 0;
    /* ★ clip-path（左から右へのワイプ）→ クロスフェード＋ゆっくりズーム
       （Ken Burns効果）に変更。切り替わりが柔らかくなり、
       静止中もわずかに動きがあるので見やすくなります */
    transition: opacity 1s ease-in-out, transform 5s ease-out;
}

.topView img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}


.company-label {
    display: flex;
    flex-wrap: wrap;
    /* ★ 追加：狭い画面で自然に縦並びに */
    justify-content: center;
    align-items: center;
    gap: clamp(30px, 6vw, 100px);
    /* ★ 固定200px → 可変に */
    padding: 100px 5% 120px;
    /* ★ 60px → 100px/120pxに拡大（上下の余白を追加） */
    box-sizing: border-box;
}


.company-group-phot {
    position: relative;
    width: min(48%, 700px);
    /* ★ min(38%, 480px) → min(48%, 700px)にさらに拡大。SERVICEセクションと同程度の大きさに */
    max-width: 700px;
    /* ★ 追加：max-widthが無いとflex-growで際限なく広がってしまうため */
    min-width: 320px;
    flex: 1 1 380px;
    /* ★ 追加：折り返しを自然に */
    box-sizing: border-box;
}

.company-group-phot img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.company-group-phot.is-visible img {
    opacity: 1;
    transform: translateY(0);
}

.company-group-phot::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 100%;
    height: 100%;
    /* ★ 90% → 100%（画像とサイズを一致させ、はみ出し量を上下左右均等に） */
    background-color: #c9a227;
    /* ★ 薄いグレー半透明 → サイトのゴールドカラー（不透明）に変更 */
    z-index: 0;

    opacity: 0;
    transform: translate(-16px, -16px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.company-group-phot.is-visible::before {
    opacity: 1;
    transform: translate(0, 0);
}


.top-text-group {
    position: relative;
    flex: 1 1 400px;
    /* ★ 追加：テキスト側も可変に */
    min-width: 300px;
    max-width: 600px;
}

.top-title {
    display: inline-block;
    /* ★ block → inline-block。文字の実際の幅ぶんだけの箱にすることで、
       直後の下線(::after)の長さをCOMPANYの文字幅に一致させられる */
    text-align: start;
    letter-spacing: clamp(2px, 0.4vw, 3px);
    font-size: clamp(48px, 8vw, 100px);
    /* ★ 固定100px → 可変に（サイズ自体は今回変更なし） */
    font-weight: 500;
    line-height: 1.2;
    color: rgb(11, 40, 74);
    font-family: 'Impact';
    margin: 0;

    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.top-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 下線（COMPANYの文字幅に自動で一致） */
.top-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background-color: #000000bb;
    margin-top: 20px;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s ease-out;
}

.top-title.is-visible::after {
    transform: scaleX(1);
}

/* ★ 旧: 幅が文字と無関係に固定されていた下線は非表示に */
.section-line-top {
    display: none;
}


.top-title-theme {
    text-align: start;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    /* ★ clamp(3px, 0.6vw, 8px) → 縮小。PCサイズで1行に収まるように */
    font-size: clamp(22px, 2.6vw, 32px);
    /* ★ 固定45px → 可変・かつ上限を32pxに縮小（1行表示のため。タイトル自体のサイズは変更なし） */
    white-space: nowrap;
    /* ★ 追加：PCサイズで折り返さないように */
    line-height: 1.4;
    /* ★ 1 → 1.4（極端な詰まりを解消） */
    font-weight: 700;
    margin: 30px 0 30px;
    /* ★ 下線との間隔として上に30pxを追加 */
    font-family: "BIZ UDPMincho", serif;

    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease-out 0.4s, transform 1.2s ease-out 0.4s;
}

.top-title-theme.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.explain-title {
    text-align: start;
    letter-spacing: clamp(2px, 0.5vw, 8px);
    font-size: clamp(14px, 1.6vw, 20px);
    /* ★ 固定20px → 可変に */
    line-height: 1.7;
    /* ★ 1 → 1.7 */
    font-weight: 900;
    font-family: "Shippori Mincho", serif;

    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease-out 0.4s, transform 1.2s ease-out 0.4s;
}

.explain-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ★ 追加：スマホ対応（従来ゼロだった箇所） */
@media (max-width: 768px) {
    .topView {
        min-height: calc(90px + 60vw);
        /* ★ 修正：固定headerの実際の高さ(mobileで90px)に合わせて調整。
           以前は115pxを加算しており、header下に25px分の余白が
           発生していたため90pxに修正した */
    }

    .topView img {
        top: 90px;
        height: calc(100% - 90px);
        /* ★ 修正：画像がheaderの裏に隠れないよう、header高さ(90px)ぶん
           下にずらして表示(以前の115pxだと余白が空きすぎていた) */
    }

    .company-label {
        flex-direction: column-reverse;
        /* ★ column → column-reverse。画像とテキストの上下位置を入れ替え
           （HTML上は画像が先、テキストが後ろのため、reverseでテキストが上に来る） */
        gap: 50px;
        padding: 40px 20px;
    }

    .company-group-phot,
    .top-text-group {
        width: 100%;
        max-width: 500px;
        min-width: 0;
        flex: none;
        /* ★ 追加：flex: 1 1 280px のままだと、column-reverse(縦並び)時に
           280pxが「高さ」の基準として使われてしまい、画像より箱が
           大きくなって背景の飾りが余分にはみ出す原因になっていました */
    }

    .top-title {
        font-size: clamp(42px, 14vw, 60px);
    }

    .top-title-theme {
        letter-spacing: clamp(1px, 0.5vw, 3px);
        font-size: clamp(20px, 5.5vw, 30px);
        white-space: normal;
        /* ★ PCでは1行固定だが、スマホ幅では通常通り折り返しを許可 */
        margin: 20px 0 20px;
    }
}