.c-hero {
    position: relative;
    /*
     * width を明示する。aspect-ratio と固定の height（スマホの480px）を併用すると、
     * width が auto のままでは縦横比から width が逆算され（480px × 1440/1085 ≒ 637px）横にはみ出すため。
     */
    width: 100%;
    margin-top: calc(var(--header-height) * -1);
    overflow: hidden;
    display: flex;
    /* 見出しは原本どおり写真の左上に置く（上下中央ではない） */
    align-items: flex-start;
}

/*
 * ホームのヒーロー（ヘッダーに隠れる部分を含む）。899px以下は写真と同じ4:3、スマホ幅は下の480px。
 * 900px以上では、写真の下端を青い帯（SDGsバナー）の裏の「優良法人ロゴの英語表記の上端」までにする（依頼主の指示）。
 * 帯の開始位置は Figma の 818px（1440px幅）＝56.806vw で、写真はそこからさらに --home-hero-overlap
 * （帯の上端から英語表記までの距離。home-sections.css で定義）だけ下へ伸ばす。
 * 写真（4:3）より枠が縦長になる分は、上端を固定したまま左右が切れる（1440px幅で左右約60pxずつ）。
 */
.c-hero:not(.c-hero--sub) {
    aspect-ratio: 1440 / 1080;
    background-position: center top;
    height: auto;
}

@media (min-width: 900px) {
    .c-hero:not(.c-hero--sub) {
        aspect-ratio: auto;
        /* 変数が無いときは帯の上端までの高さになる（写真が帯の裏に回り込まないだけで崩れない） */
        height: calc(56.806vw + var(--home-hero-overlap, 0px));
    }
}

/*
 * サブページのヒーロー。37vw では写真（4:3）の縦が約50%切れていたため、
 * 参考サイト（エイワ）と同じ 1440px で720px＝50vw に広げ、切れを約33%に抑える。
 */
.c-hero--sub {
    --hero-height: clamp(400px, 50vw, 720px);
    height: var(--hero-height);
}

.c-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary-dark);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.c-hero__slide.is-active {
    opacity: 1;
}

/*
 * 切り取りの中心を上げ、上下中央より写真の上部を30px多く見せる（企業情報。依頼主の指示）。
 * 上下のはみ出しが30pxより少ない幅（スマホ）で下げすぎると写真の下に隙間が出るので、
 * 写真の上端が枠の上端に届いたところ（0%）で止める。
 */
.c-hero--raise .c-hero__slide {
    background-position: center min(calc(50% + 30px), 0%);
}

/*
 * ホームのヒーローは空（上側）を切らず、はみ出す分を下から切る（center top）。
 * 写真はヘッダー下端からちょうど始まる（上の縦横比のコメント参照）ので、上側の追加のトリミングは不要。
 */
.c-hero:not(.c-hero--sub) .c-hero__slide {
    background-position: center top;
}

/*
 * ホームのヒーローには写真全体の着色はしない。写真の下側に重なる青い帯は、SDGsバナーの背景
 * （.c-sdgs-banner、home-sections.css）がヒーローの下端と重なって見えているもの。
 */
.c-hero__overlay {
    position: absolute;
    inset: 0;
    background: none;
}

.c-hero__content {
    position: relative;
    /* ヒーローは flex なので、幅を指定しないと中身の幅に縮んで中央に寄ってしまう */
    width: 100%;
    color: var(--color-white);
    text-align: left;
    padding-top: calc(var(--header-height) + var(--space-md));
    /* 明るい写真の上でも白い文字が読めるよう、ごく薄い影を付ける */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

/*
 * 見出しを右寄せにする（企業情報。写真の左側にある認定証を文字で隠さないため。依頼主の指示）。
 * 右側の写真の地はクリーム色で白い文字が埋もれるので、中間のグレーで縁取る（依頼主の指示）。
 * 白い文字の読みやすさは色味ではなく明るさの差で決まるため、写真の色とぶつからない無彩色にしている。
 * 線は文字の輪郭の内外に半分ずつ描かれるため、paint-order で文字の後ろに回し、外側の半分（0.025em）だけを見せる。
 * 太さは em で、英字・日本語それぞれの文字の大きさに比例させる（親に指定すると親の文字サイズで
 * px に換算された値が子に引き継がれ、比例しない）。
 */
.c-hero--title-right .c-hero__content {
    text-align: right;
}

.c-hero--title-right .c-hero__title,
.c-hero--title-right .c-hero__subtitle {
    -webkit-text-stroke: 0.05em #808080;
    paint-order: stroke fill;
}

.c-hero__title {
    color: var(--color-white);
    /* 英字はサブページと同じセリフ体。和字を持たない書体が先頭なので「挑戦の先へ」はゴシックのまま */
    font-family: var(--font-heading-en);
    /* ホームの見出しの大きさ。「RECRUITMENT」のような長い英単語1語が320px幅でも収まる下限にしている。 */
    font-size: clamp(2.25rem, 1.95rem + 3vw, 4.5rem);
    margin-bottom: var(--space-sm);
}

/*
 * サブページの英字見出しの大きさ。書体は .c-hero__title の指定（セリフ体）を使う。
 * 大きさは、320px幅で約33px（「RECRUITMENT」のような区切りのない英単語1語が収まる大きさ）から
 * 画面幅に比例して大きくし、上限4.5rem。.c-hero は overflow:hidden のため、収まらないと
 * 横スクロールは出ずに右端が切れるだけで、--overflow-only の数値判定では検出できない点に注意。
 */
.c-hero--sub .c-hero__title {
    letter-spacing: 0.02em;
    margin-bottom: var(--space-xs);
    font-size: clamp(1.5rem, 0.94rem + 4.19vw, 4.5rem);
}

/* ホームの「挑戦の先へ」。原本は英字見出しの下に小さめに添える */
.c-hero__title-sub {
    display: block;
    font-size: 0.42em;
    letter-spacing: 0.08em;
    margin-top: 0.6em;
}

/* サブページのヒーローに重ねる日本語サブタイトルの大きさ */
.c-hero__subtitle {
    color: var(--color-white);
    font-weight: 700;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.8rem);
}

@media (max-width: 599px) {
    /*
     * 詳細度をデスクトップ側の `.c-hero:not(.c-hero--sub)`（0,2,0）にそろえる。
     * 単なる `.c-hero`（0,1,0）のままだと詳細度で負けて上書きできない。
     */
    .c-hero:not(.c-hero--sub) {
        height: 480px;
    }

    /* 上の .c-hero（480px）より後に書いて、サブページの高さを効かせる */
    .c-hero--sub {
        --hero-height: clamp(240px, 64vw, 300px);
        height: var(--hero-height);
    }
}