/*
 * low_fv.css — ページ共通 ヒーロービジュアル（FVセクション）
 * 使用ページ: about.html, liquor_sales.html など
 *
 * フルイドレスポンシブ: 770px〜1920px, clamp() ベース
 * 設計基準: 1420px (1rem=10px 時代の設計値を px で再換算)
 *
 * clamp() 計算ルール:
 *   最小値 ≈ 設計値 × 0.54 (770/1420)
 *   推奨値 = (設計値px / 1420) * 100vw
 *   最大値 ≈ 設計値 × 1.35 (1920/1420)
 */

/* ========================================
   SECTION ROOT
   ======================================== */
.low_fv {
    width: 100%;
    max-width: clamp(1026.667px, 133.333vw, 2640px);
    margin-top: 0;
    background: #FBFBF8;
    box-sizing: border-box;
    position: relative;
}

.low_fv__spec {
    margin-top: var(--top-100);
}

/* ========================================
   BLOCK 1: メインビジュアル
   設計: w=1424px h=937px（87vh相当）
   ======================================== */
.low_fv__visual {
    position: relative;
    width: 100%;
    height: clamp(488px, 62.71vw, 1219px);
    margin-left: clamp(4px, 0.56vw, 11px);
    margin-right: clamp(4px, 0.56vw, 11px);
    border-radius: clamp(5px, 0.70vw, 14px);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.low_fv__visual--p2 {
    height: clamp(500.615px, 65.069vw, 1288.375px);
    width: clamp(753.96px, 97.917vw, 1937.34px);
    margin-left: clamp(4.28px, 0.556vw, 10.99px);
    margin-right: clamp(4.28px, 0.556vw, 10.99px);
    border-radius: clamp(5px, 0.70vw, 14px);
}

/* about.html 専用: 画像を非表示 */
.low_fv__visual--no-img .low_fv__visual-img {
    display: none;
}

.low_fv__visual--no-img {
    background-color: #FBFBF8;
    margin-right: 0;
    margin-left: 0;
    min-height: 100vh;
}

@media screen and (min-width: 770px) {
    .low_fv__visual.low_fv__visual--no-img {
        width: 100%;
        max-width: 100vw;
        height: 100svh;
        max-height: 100svh;
        min-height: 0;
        margin-right: 0;
        margin-left: 0;
        border-radius: 0;
    }

    .low_fv .low_fv__visual.low_fv__visual--no-img .low_fv__catch {
        top: auto;
        bottom: var(--top-64);
    }
}

/* ========================================
   narrative 直下の画像セクション
   設計: width約1412px (=margin-left:120px 込み)
   ======================================== */
.low_fv__hero-image {
    width: calc(100% - clamp(65px, 8.33vw, 162px) - clamp(4px, 0.56vw, 11px));
    aspect-ratio: 1312 / 640;
    margin-left: clamp(65px, 8.33vw, 162px);
    margin-right: clamp(4px, 0.56vw, 11px);
    border-radius: clamp(5px, 0.70vw, 14px);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.low_fv__hero-image-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.low_fv__hero-image-img--sp {
    display: none;
}

.restaurant-page .low_fv__hero-image::after,
.rental-seller-page .low_fv__hero-image::after,
.liquor-purchase-page .low_fv__hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("../img/common/pc/overlay_fv_2.svg") center / cover no-repeat;
    pointer-events: none;
}

/* ビジュアル内 画像 */
.low_fv__visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.low_fv__visual-img--sp {
    display: none;
}

.purchase-price-list-page .low_fv__visual--p2 .low_fv__visual-overlay,
.recruit-page .low_fv__visual--p2 .low_fv__visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("../img/common/pc/overlay_fv_p2.svg") center / cover no-repeat;
    pointer-events: none;
}

.purchase-price-list-page .low_fv__visual--p2 .low_fv__catch,
.recruit-page .low_fv__visual--p2 .low_fv__catch {
    z-index: 2;
}

/* ========================================
   タイトル リビール アニメーション
   ======================================== */
@keyframes low_fv-reveal-left {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0% 0 0);
    }
}

/* 右上: ページタイトルブロック
   設計: top=110px right=80px */
.low_fv__title-block {
    position: absolute;
    top: clamp(90.785px, 11.806vw, 233.750px);
    right: var(--top-61);
    left: auto;
    z-index: 10001;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 英語タイトル 設計: 62px */
.low_fv__title-en {
    position: relative;
    z-index: 10001;
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(30px, 3.89vw, 76px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 clamp(4.806px, 0.625vw, 12.375px);
    color: #000000;
    clip-path: inset(0 100% 0 0);
    animation: low_fv-reveal-left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}

.low_fv__title-break-sp {
    display: none;
}

/* 区切り線 + サブタイトルを横一列 */
.low_fv__title-sub {
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.85vw, 16px);
    width: 100%;
    clip-path: inset(0 100% 0 0);
    animation: low_fv-reveal-left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.7s forwards;
}

/* 水平線 */
.low_fv__title-line {
    flex: 1;
    height: clamp(1.069px, 0.139vw, 2.75px);
    background: #000000;
}

/* 日本語サブタイトル 設計: 15px */
.low_fv__title-ja {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(11px, 1.06vw, 20px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000000;
    margin: 0;
    white-space: nowrap;
}

/* 左下: キャッチコピー
   設計: bottom=180px left=80px */
.low_fv__catch {
    position: absolute;
    top: clamp(346.558px, 45.069vw, 892.375px);
    bottom: auto;
    left: clamp(43px, 5.56vw, 108px);
}

.low_fv__catch_p2 {
    left: var(--top-120);
}

/* キャッチコピー本文 設計: 80px */
.low_fv__catch-text {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(42.722px, 5.556vw, 110.000px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    margin: 0;
    color: #000000;
    text-shadow: none;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    animation: low_fv-reveal-left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.7s forwards;
}

.low_fv__catch-text__recruit {
    font-size: clamp(64.083px, 8.333vw, 165.000px);
    line-height: clamp(64.083px, 8.333vw, 165.000px);
    letter-spacing: 0.05rem;
}

.low_fv__blob {
    position: absolute;
    top: clamp(29.372px, 3.819vw, 75.625px);
    right: clamp(-720px, -37.50vw, -289px);
    width: clamp(563px, 73.45vw, 1408px);
    height: clamp(690px, 90vw, 1727px);
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: normal;
    z-index: 9999;
}

.low_fv__between-blob {
    position: absolute;
    top: clamp(1160px, 93.06vw, 1787px);
    left: clamp(-470px, -24.44vw, -188px);
    z-index: 10000;
    width: clamp(360px, 48.61vw, 933px);
    height: auto;
    margin: 0;
    opacity: 0.7;
    pointer-events: none;
}

/* ========================================
   BLOCK 2: ナラティブセクション
   設計: grid 667px / 1fr, gap 80px
   ======================================== */
.low_fv__narrative {
    display: grid;
    grid-template-columns: clamp(360px, 46.32vw, 901px) 1fr;
    column-gap: var(--top-80);
    margin: clamp(55.539px, 7.222vw, 143.000px) clamp(4px, 0.56vw, 11px) var(--top-78) clamp(4px, 0.56vw, 11px);
    box-sizing: border-box;
    background: #FBFBF8;
    position: relative;
}

.low_fv__narrative--recruit {
    margin-top: var(--top-10);
    margin-bottom: var(--top-10);
}

/* 左: 画像コンテナ 設計: 667×640px rx=20 */
.low_fv__narrative-img-wrap {
    width: 100%;
    height: clamp(346px, 44.44vw, 864px);
    border-radius: clamp(5px, 0.70vw, 14px);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* ナラティブ画像オーバーレイ */
.low_fv__narrative-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.liquor-sales-page .low_fv__narrative-overlay,
.restaurant-page .low_fv__narrative-overlay,
.rental-seller-page .low_fv__narrative-overlay,
.liquor-purchase-page .low_fv__narrative-overlay {
    background: url("../img/common/pc/overlay_fv_1.svg") center / cover no-repeat;
}

.recruit-page .low_fv__narrative-overlay {
    background: url("../img/recruit/overlay_fv.svg") center / cover no-repeat;
}

.low_fv__narrative-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右: テキストコンテンツ */
.low_fv__narrative-text {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: clamp(32px, 4.23vw, 81px);
    margin-top: 0;
}

/* 本文テキスト 設計: 15px */
.low_fv__narrative-body {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(11px, 1.06vw, 20px);
    font-weight: 500;
    line-height: var(--top-40);
    letter-spacing: 0.03em;
    color: #000000;
    margin: 0;
    margin-top: var(--top-54);
    width: clamp(228.050px, 29.653vw, 587.125px);
    .sp {
        display: none;
    }
}

/* 縦書き英文テキスト 設計: 14px */
.low_fv__narrative-vertical {
    position: absolute;
    right: var(--top-52);
    top: clamp(19px, 2.50vw, 49px);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(10px, 0.99vw, 19px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
    line-height: var(--top-24);
    margin-right: 0;
}

/* ========================================
   BLOCK 3: ページ内ナビゲーション
   設計: margin 0 120px, height=100px, gap=35px
   ======================================== */
.low_fv__nav {
    margin: clamp(32.083px, 4.167vw, 82.5px) clamp(64.083px, 8.333vw, 165.000px);
    padding-bottom: var(--top-18);
    background: #FBFBF8;
    box-sizing: border-box;
    border-bottom: #000000 1.5px solid;
    width: clamp(641.667px, 83.333vw, 1650.000px);
}

.low_fv__nav__p2 {
    margin-bottom: 0;
}

.low_fv__nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(19px, 2.43vw, 47px);
    height: clamp(34px, 4.31vw, 84px);
    overflow-x: auto;
    scrollbar-width: none;
}

.low_fv__nav-inner::-webkit-scrollbar {
    display: none;
}

/* 各ナビ項目 */
.low_fv__nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.70vw, 14px);
    flex: 0 0 auto;
    padding: 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.low_fv__nav-item:hover {
    opacity: 0.55;
}

/* ナビラベルテキスト 設計: 13px */
.low_fv__nav-label {
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(7.49px, 0.972vw, 19.25px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000000;
}

.low_fv__nav-label__jp {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
}

/* 矢印アイコン */
.low_fv__nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.low_fv__nav-arrow img {
    width: auto;
    height: clamp(9px, 1.13vw, 22px);
    display: block;
    transition: transform 0.25s ease;
}

.low_fv__nav-item:hover .low_fv__nav-arrow img {
    transform: translateX(clamp(2.674px, 0.347vw, 6.875px));
}

@media (max-width: 889px) {
    .low_fv__narrative-vertical {
        margin-right: clamp(8px, 2.25vw, 20px);
    }
}

@media screen and (max-width: 769px) {
    .low_fv {
        --sp-24: 6.154vw;
        --sp-content-width: calc(100vw - var(--sp-24) * 2);
        width: 100%;
        max-width: none;
        overflow: hidden;
    }

    .low_fv__spec {
        padding-top: var(--sp-11);
    }

    .low_fv__visual--no-img {
        height: 176.923vw;
        min-height: 0;
        margin: 0;
        border-radius: 0;
        overflow: visible;
    }

    .low_fv__title-block {
        top: 22.051vw;
        right: var(--sp-24);
        align-items: flex-end;
        text-align: right;
    }

    .low_fv__title-en {
        font-size: 9.231vw;
        line-height: 1;
        margin-bottom: 2.564vw;
        letter-spacing: 0.05em;
    }

    .low_fv__title-break-sp {
        display: block;
    }

    .low_fv__title-sub {
        gap: 2.564vw;
    }

    .low_fv__title-line {
        height: clamp(0.535px, 0.069vw, 1.375px);
    }

    .low_fv__title-ja {
        font-size: 3.077vw;
        line-height: 1;
    }

    .low_fv__catch {
        top: 70.256vw;
        left: var(--sp-24);
        right: var(--sp-24);
    }

    .low_fv__catch-text {
        font-size: 10.256vw;
        line-height: 1.35;
        letter-spacing: 0.01em;
        white-space: normal;
    }

    .low_fv__blob {
        top: 13.333vw;
        right: -61.538vw;
        width: 126.154vw;
        height: auto;
        opacity: 0.65;
    }

    .low_fv__narrative {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        position: relative;
    }

    .low_fv__narrative-img-wrap {
        width: clamp(307.692px, 82.051vw, 630.769px);
        height: clamp(295.071px, 78.684vw, 605.262px);
        align-self: flex-start;
        border-radius: 0 2.564vw 2.564vw 0;
    }

    .low_fv__narrative-img {
        object-position: center center;
    }

    .about-page .low_fv__narrative-overlay,
    .liquor-sales-page .low_fv__narrative-overlay,
    .restaurant-page .low_fv__narrative-overlay,
    .liquor-purchase-page .low_fv__narrative-overlay {
        background: url("../img/common/sp/sp_overlay_fv1-15.svg") center / cover no-repeat;
    }

    .rental-seller-page .low_fv__narrative-overlay {
        background: url("../img/common/sp/sp_overlay_fv1-10.svg") center / cover no-repeat;
    }

    .recruit-page .low_fv__narrative-overlay {
        background: url("../img/recruit/sp_overlay_fv.svg") center / cover no-repeat;
    }

    .purchase-price-list-page .low_fv__visual--p2 .low_fv__visual-overlay,
    .recruit-page .low_fv__visual--p2 .low_fv__visual-overlay {
        background-image: url("../img/common/sp/sp_overlay_fv-p2.svg");
    }

    .recruit-page .low_fv__visual--p2 > .low_fv__visual-img:not(.low_fv__visual-img--sp) {
        display: none;
    }

    .recruit-page .low_fv__visual--p2 > .low_fv__visual-img--sp {
        display: block;
    }

    .low_fv__narrative-text {
        width: var(--sp-content-width);
        margin: 0 auto;
        padding: 14.359vw 0 0;
    }

    .low_fv__narrative-body {
        margin: 0;
        padding-right: 8.205vw;
        font-size: 3.59vw;
        line-height: 2.15;
        letter-spacing: 0.05em;
    }

    .low_fv__narrative-vertical {
        position: absolute;
        top: 7.692vw;
        right: var(--sp-24);
        margin-right: 0;
        font-size: 2.821vw;
        line-height: 1;
        z-index: 2;
    }

    .low_fv__between-blob {
        top: 300vw;
        left: -62vw;
        width: 110vw;
        opacity: 0.65;
    }

    .low_fv__hero-image {
        width: clamp(351.923px, 93.846vw, 721.077px);
        aspect-ratio: 1424 / 937;
        margin: 16.41vw 0 0 auto;
        border-radius: 2.564vw 0 0 2.564vw;
    }

    .low_fv__hero-image-img {
        object-position: center center;
    }

    .about-page .low_fv__hero-image::after,
    .liquor-sales-page .low_fv__hero-image::after,
    .restaurant-page .low_fv__hero-image::after,
    .rental-seller-page .low_fv__hero-image::after,
    .liquor-purchase-page .low_fv__hero-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: url("../img/common/sp/sp_overlay_fv2.svg") center / cover no-repeat;
        pointer-events: none;
    }

    .about-page .low_fv__hero-image > .low_fv__hero-image-img:not(.low_fv__hero-image-img--sp) {
        display: none;
    }

    .about-page .low_fv__hero-image > .low_fv__hero-image-img--sp {
        display: block;
    }

    .rental-seller-page .low_fv__hero-image > .low_fv__hero-image-img:not(.low_fv__hero-image-img--sp) {
        display: none;
    }

    .rental-seller-page .low_fv__hero-image > .low_fv__hero-image-img--sp {
        display: block;
    }

    .low_fv__nav {
        margin: 12.821vw var(--sp-24) 0;
        padding: 5.128vw 0;
        border-top: clamp(0.535px, 0.069vw, 1.375px) solid #000;
        border-bottom: 1px solid #000;
    }

    .low_fv__nav-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4.615vw 6.154vw;
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .low_fv__nav-item {
        justify-content: flex-start;
        gap: 2.564vw;
        min-width: 0;
    }

    .low_fv__nav-label {
        font-size: 3.077vw;
        line-height: 1.25;
        white-space: normal;
    }

    .low_fv__nav-arrow img {
        height: 3.846vw;
    }

    .low_fv__nav-border {
        display: none;
    }
}