@charset "utf-8";

/* ============================================
   メインビジュアル（トップページと /about/ で共用）
   HTML は parts/top_hero.php
============================================ */

/* --------------------------------------------
   メインビジュアル本体
   上段＝風景写真2枚（左右半々）にコピー・ガイド・バナーを重ね、下段＝旬の食材4枚。
   写真は文字なしで書き出してあり、文字とボタンはすべて HTML。
   デザイン上の 1px（PC は 1280px 幅、SP は 375px 幅が基準）を --hu とし、
   ヒーローの幅に比例して全体を拡縮する
-------------------------------------------- */
.tHero {
    /* cqw 非対応ブラウザは vw で代用（スクロールバーぶんだけわずかに大きくなる） */
    --hero-w: 100vw;
    --hero-mincho: "Shippori Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;
    container-type: inline-size;
    overflow: hidden;
}

@supports (width: 1cqw) {
    .tHero {
        --hero-w: 100cqw;
    }
}

/* 1920px を超える画面では写真だけが広がり、文字とボタンはそれ以上大きくしない。
   --hu-ui はガイドとバナー用で、タブレット幅で小さくなりすぎないよう下限を設ける
   （.75 より大きくすると 768px 幅でガイドが緑のボックスに重なる） */
.tHero_main,
.tHero_foods {
    --hu: calc(min(var(--hero-w), 1920px) / 1280);
    --hu-ui: max(var(--hu), .75px);
}

.tHero_main {
    position: relative;
}

.tHero_photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tHero_photos picture {
    position: relative;
    display: block;
}

.tHero_photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 979;
    object-fit: cover;
}

/* 緑のボックス（左右の写真の境目に重ねる）。
   高さは min-height にして、自動翻訳などで文字が増えたら折り返してボックスが下に伸びるようにしている
   （文字は nowrap にしない。固定の高さ＋nowrap だと訳文がボックスからはみ出す） */
.tHero_copy {
    position: absolute;
    top: calc(var(--hu) * 33);
    left: calc(50% - var(--hu) * 212.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--hu) * 425);
    min-height: calc(var(--hu) * 424);
    padding: calc(var(--hu) * 31.5) calc(var(--hu) * 8) calc(var(--hu) * 14);
    background: #265a44;
    color: #fff;
    font-family: var(--hero-mincho);
    font-weight: 500;
    text-align: center;
}

/* キャッチ（縦書き3行と罫線）は SVG 画像（assets/img/top/hero_catch.svg）。
   テキストのままだと、ブラウザの自動翻訳で訳文が縦書きの枠に流し込まれて崩れるため。
   高さで大きさを決め、幅は画像の比率に任せる */
.tHero_catch {
    height: calc(var(--hu) * 300.6);
    margin: 0;
    line-height: 0;
}

/* .tHero を重ねているのは、各ページの img { height: auto } に読み込み順に関係なく勝つため */
.tHero .tHero_catch img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
}

/* 2行目（22文字）がボックスの幅に収まるよう、文字サイズの下限は 10px まで
   （11px だと 850px 幅以下で左右の余白がなくなる） */
.tHero_lead {
    /* 幅を内容に合わせると、かぎ括弧の詰め（負のマージン）の端数で2行目が折り返すことがあるため、枠いっぱいにする */
    align-self: stretch;
    margin: calc(var(--hu) * 18) 0 0;
    font-size: max(10px, calc(var(--hu) * 16.5));
    line-height: 1.7;
    letter-spacing: .085em;
}

/* かぎ括弧は字面の外側の空き（半角ぶん）を詰めて、行の中央がずれないようにする */
.tHero_lead_open {
    margin-left: -.5em;
}

.tHero_lead_close {
    margin-right: -.5em;
}

/* 緑のボックスにページタイトルを入れる場合（/about/）。
   欧文・見出し（h1）・短い罫線・リード文を上下中央にまとめる */
.tHero_copy-title {
    justify-content: center;
    padding: calc(var(--hu) * 20);
}

.tHero_title {
    align-self: stretch;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.tHero_title_en {
    display: block;
    font-size: max(12px, calc(var(--hu) * 21));
    font-family: 'Bellefair', serif;
    font-weight: normal;
    line-height: 1;
    letter-spacing: .16em;
}

.tHero_title_ja {
    display: block;
    margin-top: calc(var(--hu) * 20);
    font-size: calc(var(--hu) * 36);
    line-height: 1.45;
    letter-spacing: .08em;
}

/* <span> の区切りで折り返す */
.tHero_title_ja span {
    display: inline-block;
}

.tHero_title_ja::after {
    content: "";
    display: block;
    width: calc(var(--hu) * 40);
    height: 1px;
    margin: calc(var(--hu) * 24) auto;
    background: rgba(255, 255, 255, .9);
}

.tHero_title_lead {
    align-self: stretch;
    margin: 0;
    font-size: max(11px, calc(var(--hu) * 16.5));
    line-height: 1.7;
    letter-spacing: .085em;
}

/* 白地の内側に緑の細線が入る二重フレーム */
.tHero_guide {
    position: absolute;
    left: calc(var(--hu) * 15.5);
    bottom: calc(var(--hu) * 15.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(var(--hu-ui) * 325);
    height: calc(var(--hu-ui) * 88.5);
    padding-top: calc(var(--hu-ui) * 3);
    border-radius: calc(var(--hu-ui) * 8);
    background: #fff;
    color: #231815;
    font-family: var(--hero-mincho);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background .2s;
}

.tHero_guide::before {
    content: "";
    position: absolute;
    inset: calc(var(--hu-ui) * 3.5);
    border: 1px solid var(--t-green);
    border-radius: calc(var(--hu-ui) * 5);
    pointer-events: none;
}

.tHero_guide:hover {
    background: var(--t-green-light);
}

/* 「＼ 初めての方はまずこちら ／」の斜線。バックスラッシュは和文フォントで ¥ になるため線で描く */
.tHero_guide_note {
    display: flex;
    align-items: center;
    gap: calc(var(--hu-ui) * 8);
    font-size: calc(var(--hu-ui) * 12.5);
    letter-spacing: .02em;
}

.tHero_guide_note::before,
.tHero_guide_note::after {
    content: "";
    width: 1px;
    height: 1.15em;
    background: currentColor;
    transform: rotate(-24deg);
}

.tHero_guide_note::after {
    transform: rotate(24deg);
}

/* 黄色のマーカー。文字の下端（ベースライン）は上から80%の位置なので、
   64%から引いて文字の下4分の1ほどに重ねる */
.tHero_guide_ttl {
    margin-top: calc(var(--hu-ui) * 5);
    padding: 0 calc(var(--hu-ui) * 3);
    background: linear-gradient(transparent 64%, #ffed5f 64%, #ffed5f 90%, transparent 90%);
    font-size: calc(var(--hu-ui) * 25);
    font-family: 'Bellefair', serif;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tHero_guide_more {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--hu-ui) * 5);
    margin-top: calc(var(--hu-ui) * 9);
    font-size: calc(var(--hu-ui) * 11);
    letter-spacing: .02em;
}

.tHero_guide_more svg {
    width: calc(var(--hu-ui) * 10.5);
    height: calc(var(--hu-ui) * 10.5);
    color: #e58138;
}

/* とやまグルメ・フードフェス2026 バナー（フェス終了後は外す）。
   画像の周囲に透明な余白（約7%）があるため、見た目の位置より外側に置いている */
.tHero_fes {
    position: absolute;
    top: calc(var(--hu) * 14);
    right: calc(var(--hu) * 8);
    display: block;
    width: calc(var(--hu-ui) * 177);
    line-height: 0;
    transition: transform .2s;
}

.tHero_fes:hover {
    transform: translateY(-2px);
}

.tHero_fes img {
    width: 100%;
    height: auto;
}

/* 写真のクレジットと食材名は写真の上に白文字で載せる */
.tHero_credit,
.tHero_foods span {
    position: absolute;
    margin: 0;
    color: #fff;
    font-family: var(--hero-mincho);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    text-shadow: 0 0 5px rgba(0, 0, 0, .55);
}

.tHero_credit {
    right: calc(var(--hu) * 9);
    bottom: calc(var(--hu) * 6);
    font-size: max(10px, calc(var(--hu) * 16.5));
}

.tHero_foods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tHero_foods li {
    position: relative;
}

.tHero_foods img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 327;
    object-fit: cover;
}

.tHero_foods span {
    right: calc(var(--hu) * 9);
    bottom: calc(var(--hu) * 7);
    font-size: max(11px, calc(var(--hu) * 17.5));
}

/* --------------------------------------------
   スマートフォン
-------------------------------------------- */
@media screen and (max-width: 767px) {
    /* ヒーロー（SPは 375px 幅を基準に拡縮。520px 幅より先は文字とボタンを大きくしない）
       デザイン案の比率のままだとリード文が約7pxになり読めないため、
       緑のボックスとガイドを大きくし、そのぶん上段を縦に伸ばしている */
    .tHero_main,
    .tHero_foods {
        --hu: calc(min(var(--hero-w), 520px) / 375);
        --hu-ui: calc(var(--hu) * .86);
    }

    .tHero_main {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(var(--hu) * 30) 0 calc(var(--hu) * 26);
    }

    /* 写真は内容に合わせた高さいっぱいに敷く */
    .tHero_photos {
        position: absolute;
        inset: 0;
    }

    /* .tHero を重ねているのは、各ページの img { height: auto }（.p-home2026 img など）に
       CSS の読み込み順に関係なく勝つため */
    .tHero .tHero_photos img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }

    .tHero_copy {
        position: relative;
        top: auto;
        left: auto;
        width: calc(var(--hu) * 236);
        min-height: 0;
        padding: calc(var(--hu) * 20) calc(var(--hu) * 8) calc(var(--hu) * 15);
    }

    .tHero_catch {
        height: calc(var(--hu) * 172);
    }

    .tHero_lead {
        margin-top: calc(var(--hu) * 12);
        font-size: max(10px, calc(var(--hu) * 11.5));
        line-height: 1.65;
        letter-spacing: .06em;
    }

    .tHero_copy-title {
        padding: calc(var(--hu) * 34) calc(var(--hu) * 8) calc(var(--hu) * 30);
    }

    .tHero_title_en {
        font-size: max(11px, calc(var(--hu) * 13.5));
    }

    .tHero_title_ja {
        margin-top: calc(var(--hu) * 12);
        font-size: calc(var(--hu) * 21);
    }

    .tHero_title_ja::after {
        width: calc(var(--hu) * 30);
        margin: calc(var(--hu) * 16) auto;
    }

    .tHero_title_lead {
        font-size: max(10px, calc(var(--hu) * 11.5));
        line-height: 1.65;
        letter-spacing: .06em;
    }

    .tHero_guide {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(var(--hu) * 236);
        margin-top: calc(var(--hu) * 14);
    }

    /* ボックスと同じ幅に1行で収める */
    .tHero_guide_ttl {
        font-size: calc(var(--hu) * 19.5);
    }

    /* 緑のボックスの右上の角に重ならない大きさにする */
    .tHero_fes {
        top: calc(var(--hu) * 3);
        right: 0;
        width: calc(var(--hu) * 72);
    }

    .tHero_credit {
        right: auto;
        left: calc(var(--hu) * 8);
        bottom: calc(var(--hu) * 6);
        font-size: max(9px, calc(var(--hu) * 10));
    }

    .tHero_foods img {
        aspect-ratio: 300 / 216;
    }

    .tHero_foods span {
        right: calc(var(--hu) * 5);
        bottom: calc(var(--hu) * 5);
        font-size: max(10px, calc(var(--hu) * 11));
    }
}