@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');




/* =========================================================
   LANIKOA HAWAII — INDEX LUXURY REFINEMENT
   Existing HTML/content/assets are preserved.
   Load this AFTER style.css.
   ========================================================= */

:root {
    --lux-ink: #17362f;
    --lux-deep: #0e2a24;
    --lux-gold: #b79a5c;
    --lux-gold-soft: #d9c79c;
    --lux-ivory: #fbfaf6;
    --lux-warm: #f4f0e7;
    --lux-line: rgba(23, 54, 47, .14);
    --lux-shadow: 0 24px 70px rgba(14, 42, 36, .11);
}

html { scroll-behavior: smooth; }
body {
    background: var(--lux-ivory);
    color: #263a35;
    letter-spacing: .015em;
}

/* Header — glassy, restrained, premium */
.header {
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}
.header-bg {
    opacity: .90;
    filter: saturate(.82) brightness(.84);
}
.desktop-nav { gap: clamp(18px, 2.2vw, 34px); }
.desktop-nav a {
    position: relative;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -8px;
    height: 1px;
    background: var(--lux-gold-soft);
    transition: right .28s ease;
}
.desktop-nav a:hover::after { right: 0; }

/* Hero */
.hero { min-height: min(860px, 92vh); }
.hero-media video { filter: saturate(.78) contrast(1.04) brightness(.88); }
.hero-overlay {
    background:
        linear-gradient(90deg, rgba(7,27,23,.70) 0%, rgba(7,27,23,.38) 46%, rgba(7,27,23,.10) 76%),
        linear-gradient(0deg, rgba(8,31,26,.26), transparent 44%) !important;
}
.hero-content { align-items: center; }
.hero-copy { max-width: 760px; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #f1e7cb;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.hero-eyebrow::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--lux-gold-soft);
}
.hero h1 {
    max-width: 720px;
    margin-bottom: 26px;
    letter-spacing: -.045em;
    text-shadow: 0 3px 30px rgba(0,0,0,.18);
}
.hero h1 span {
    color: #f3e5bd;
}
.hero-copy > p {
    max-width: 640px;
    letter-spacing: .04em;
}
.hero-buttons { gap: 14px; margin-top: 34px; }
.hero .btn {
    min-width: 205px;
    border-radius: 2px;
    padding: 15px 24px;
    letter-spacing: .08em;
}
.hero .btn-primary {
    background: rgba(183,154,92,.96) !important;
    border-color: rgba(183,154,92,.96) !important;
    color: #fff !important;
}
.hero .btn-outline {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.52);
    backdrop-filter: blur(5px);
}

/* Global sections */
.section { padding-top: clamp(82px, 9vw, 138px); padding-bottom: clamp(82px, 9vw, 138px); }
.section--light { background: #f3f0e8 !important; }
.section-heading { margin-bottom: clamp(42px, 5vw, 70px); }

.section-heading h2 {
    margin-top: 16px;
    color: var(--lux-ink);
    letter-spacing: -.035em;
}
.section-heading p { color: #68756f; }

/* About — editorial composition */
#about { background: var(--lux-ivory); }
#about .section-heading { max-width: 850px; margin-left: auto; margin-right: auto; }
#about .section-heading h2 { }
#about .educational-consultant { color: #9a7f49; }
.about-grid { gap: clamp(48px, 7vw, 100px); align-items: center; }
.about-image {
    position: relative;
    overflow: visible !important;
}
.about-image::before {
    content: "";
    position: absolute;
    inset: -18px 22px 22px -18px;
    border: 1px solid rgba(183,154,92,.42);
    pointer-events: none;
}
.about-image img {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 0 !important;
    box-shadow: var(--lux-shadow);
}
.about-content h3 {
    color: var(--lux-ink);
}
.about-content p { color: #4d5e58; }
.about-features {
    margin-top: 40px;
    border-top: 1px solid var(--lux-line);
    border-bottom: 1px solid var(--lux-line);
}
.feature-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 16px !important;
}
.feature-card + .feature-card { border-left: 1px solid var(--lux-line) !important; }
.feature-card strong { color: #9a7f49; }
.feature-card span { }

/* Programs — premium image cards */
.program-grid { gap: 28px; }
.program-card {
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(23,54,47,.09) !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 50px rgba(14,42,36,.07) !important;
    transition: transform .35s ease, box-shadow .35s ease;
}
.program-card:hover { transform: translateY(-7px); box-shadow: var(--lux-shadow) !important; }
.program-image { overflow: hidden; }
.program-image img { transition: transform .7s cubic-bezier(.2,.65,.3,1); filter: saturate(.86); }
.program-card:hover .program-image img { transform: scale(1.035); }
.program-body { padding: 32px 30px 34px !important; }
.program-body h3 { color: var(--lux-ink); letter-spacing: -.02em; }
.program-body p { color: #65716c; }
.program-body .btn { margin-top: 8px; }

/* Buttons */
.btn { border-radius: 2px !important; letter-spacing: .04em; box-shadow: none !important; }
.btn-primary { background: var(--lux-ink) !important; border-color: var(--lux-ink) !important; }
.btn-primary:hover { background: #9a7f49 !important; border-color: #9a7f49 !important; transform: translateY(-2px); }
.btn-outline { color: var(--lux-ink); border-color: rgba(23,54,47,.35); }
.btn-outline:hover { background: var(--lux-ink); border-color: var(--lux-ink); color: #fff; }

/* Footer */
.footer {
    background: #091e1a !important;
    padding-top: 74px !important;
}
.footer::after { height: 2px !important; background: linear-gradient(90deg, transparent, var(--lux-gold), transparent) !important; }
.footer h3 { letter-spacing: .05em; }
.footer a { transition: color .2s ease, transform .2s ease; }
.footer a:hover { transform: translateX(3px); }

@media (max-width: 900px) {
    .hero { min-height: 760px; }
    .hero-copy { max-width: 650px; }
    .about-image::before { inset: -10px 12px 12px -10px; }
    .feature-card + .feature-card { border-left: 0 !important; }
    .news-card + .news-card { border-left: 0 !important; }
}

@media (max-width: 640px) {
    .hero { min-height: 700px; }
    .hero-content { align-items: flex-end; padding-bottom: 72px; }
    .hero-copy > p { }
    .hero-buttons { display: grid; grid-template-columns: 1fr; }
    .hero .btn { width: 100%; }
    .section { padding-top: 76px; padding-bottom: 76px; }
    #about .section-heading small::before,
    #about .section-heading small::after,
    #programs .section-heading small::before,
    #programs .section-heading small::after,
    #summer .section-heading small::before,
    #summer .section-heading small::after,
    #news .section-heading small::before,
    #news .section-heading small::after,
    #support .section-heading small::before,
    #support .section-heading small::after {
        width: 18px;
    }
    .program-body { padding: 27px 24px 30px !important; }
    .support-box, .support-box2 { padding: 32px 25px !important; }
    .news-card { padding: 28px 8px !important; }
}

/* ---------------------------------------------------------
   USER REFINEMENT ①
   指定された小見出しのみ新デザイン
   --------------------------------------------------------- */

#about .section-heading small,
#programs .section-heading small,
#summer .section-heading small,
#news .section-heading small,
#support .section-heading small {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: #9a7f49;


    letter-spacing: .26em;
}


#about .section-heading small::before,
#about .section-heading small::after,
#programs .section-heading small::before,
#programs .section-heading small::after,
#summer .section-heading small::before,
#summer .section-heading small::after,
#news .section-heading small::before,
#news .section-heading small::after,
#support .section-heading small::before,
#support .section-heading small::after {
    content: "";

    width: 28px;
    height: 1px;

    background: rgba(183,154,92,.58);
}

/* ---------------------------------------------------------
   USER REFINEMENT ②
   About feature boxes
   --------------------------------------------------------- */

.about-features {
    border-top: 0 !important;
    border-bottom: 0 !important;
    gap: 14px !important;
}

.feature-card {
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(30,79,66,.34) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 26px rgba(14,42,36,.055) !important;
}

.feature-card + .feature-card {
    border-left: 1px solid rgba(30,79,66,.34) !important;
}

/* ---------------------------------------------------------
   USER REFINEMENT ③
   Summer School
   --------------------------------------------------------- */

#summer .support-grid {
    align-items: stretch;
}

#summer .support-box {
    position: relative;
    overflow: hidden;

    background: #4f8c79 !important;
    border: 1px solid rgba(30,79,66,.10) !important;
    border-radius: 0 !important;

    box-shadow: 0 14px 34px rgba(14,42,36,.075) !important;

    color: #fff !important;
}

#summer .support-box::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 54px;
    height: 2px;

    background: var(--lux-gold);
}

#summer .support-box h3,
#summer .support-box p {
    color: #fff !important;
}

#summer .support-box .btn-outline {
    color: #fff !important;
    border-color: rgba(255,255,255,.72) !important;
    background: transparent !important;
}

#summer .support-box .btn-outline:hover {
    color: var(--lux-ink) !important;
    background: #fff !important;
    border-color: #fff !important;
}

/* 2列 + 1列になった時、3番目を中央に */
@media (min-width: 769px) and (max-width: 1050px) {

    #summer .support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #summer .support-box:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);
        max-width: 520px;

        justify-self: center;
    }
}

/* ---------------------------------------------------------
   USER REFINEMENT ④
   News: 元デザインに戻し、角だけ四角
   --------------------------------------------------------- */

#news .news-card {
    border-radius: 0 !important;
}

/* ---------------------------------------------------------
   USER REFINEMENT ⑤
   Support
   --------------------------------------------------------- */

#support .support-box2 {
    position: relative;
    overflow: hidden;

    background: #4f8c79 !important;
    border: 1px solid rgba(30,79,66,.10) !important;
    border-radius: 0 !important;

    box-shadow: 0 14px 34px rgba(14,42,36,.07) !important;

    color: #fff !important;
}

#support .support-box2::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 54px;
    height: 2px;

    background: var(--lux-gold);
}

#support .support-box2 h3,
#support .support-box2 p {
    color: #fff !important;
}

/* ---------------------------------------------------------
   USER REFINEMENT ⑥
   Contact: 元デザインに戻し、角だけ四角
   --------------------------------------------------------- */

#contact .contact-info,
#contact .contact-form {
    border-radius: 0 !important;
}

/* =====================================================
   Hero メイン文字を少し小さく
   ===================================================== */

.hero h1 {
    font-size: clamp(48px, 4.5vw, 60px) !important;
    letter-spacing: 0.04em !important;
}

/* Hero 日本語説明文 */
.hero-copy p {
    font-size: 13px !important;
    line-height: 1.7 !important;
}


/* スマホ */
@media (max-width: 768px) {

    .hero h1 {
        font-size: 38px !important;
        letter-spacing: 0.04em !important;
    }

    .hero-copy p {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

}


/* About本文の見出し
   画面幅に合わせて自動で小さくする */

.about-content h3 {
    font-size: clamp(18px, 2.0vw, 24px) !important;
    line-height: 1.8 !important;
}

/* =====================================================
   HERO
   Hawaii Educational Consultant の位置と左右ライン
   ===================================================== */

/* =====================================================
   HERO
   Hawaii Educational Consultant
   ===================================================== */

.hero-eyebrow {
    /* 少し上へ */
    transform: translateY(-40px);

    /* 枠を内容の幅だけにする */
    display: inline-flex !important;
    width: fit-content !important;

    align-items: center;
    gap: 12px;
}

/* 左右のライン */
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    background: currentColor;
    opacity: 0.65;

    flex-shrink: 0;
}



/* =====================================================
   HERO ボタン 最終調整
   ===================================================== */

/* 無料相談・お問い合わせ */
.hero-buttons .btn-primary {
    position: relative;
    overflow: hidden;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            rgba(190, 160, 96, 0.96) 0%,
            rgba(156, 124, 62, 0.94) 48%,
            rgba(205, 178, 116, 0.96) 100%
        ) !important;

    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
}


/* 無料相談ボタンの薄い光沢 */
.hero-buttons .btn-primary::before {
    content: "";

    position: absolute;
    top: 0;
    left: -35%;

    width: 30%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

    transform: skewX(-20deg);
}


/* プログラムを見る */
.hero-buttons .btn-outline {
    color: #ffffff !important;

    background: rgba(255,255,255,0.08) !important;

    border: 1px solid rgba(255,255,255,0.72) !important;
    border-radius: 2px !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,0.25);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* hover */
.hero-buttons .btn-outline:hover {
    color: #173d34 !important;
    background: rgba(255,255,255,0.94) !important;
}

.hero-buttons .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}


/* =====================================================
   Educational Consultant 文字の影
   ===================================================== */

.educational-consultant {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.22),
        0 5px 12px rgba(0, 0, 0, 0.12) !important;
}


/* =====================================================
   セクション大見出し
   深緑＋文字の影
   ===================================================== */

#programs .section-heading h2,
#summer .section-heading h2,
#support .section-heading h2 {
    color: #174f40 !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.18),
        0 5px 10px rgba(0, 0, 0, 0.10) !important;
}


/* =====================================================
   Summer School 3つのボックス
   Greenbox画像を背景いっぱいに表示
   ===================================================== */

#summer .support-box {
    background-image: url("Base/Greenbox.png") !important;

    /* 四角全体を画像で埋める */
    background-size: cover !important;

    /* 画像の下側を基準に配置 */
    background-position: center bottom !important;

    background-repeat: no-repeat !important;

    /* 文字を画像より前に */
    position: relative;
    overflow: hidden;
}


/* 文字・ボタンを必ず前面へ */
#summer .support-box h3,
#summer .support-box p,
#summer .support-box a {
    position: relative;
    z-index: 2;
}


#support .support-box2 {
    background-image: url("Base/Goldbox.png") !important;

    /* 四角全体を画像で埋める */
    background-size: cover !important;

    /* 画像の下側を基準に配置 */
    background-position: center bottom !important;

    background-repeat: no-repeat !important;

    /* 文字を画像より前に */
    position: relative;
    overflow: hidden;
}


/* 文字・ボタンを必ず前面へ */
#support .support-box2 h3,
#support .support-box2 p,
#support .support-box2 a {
    position: relative;
    z-index: 2;
}


/* =====================================================
   INDEX 各リンクボタン
   明るめの上品なグリーン
   ===================================================== */

#programs .btn-primary,
#news .btn-primary,
#support .btn-primary {
    background: #2F6B5A !important;
    color: #ffffff !important;

    border: 1px solid #2F6B5A !important;
    border-radius: 0 !important;

    box-shadow:
        0 5px 12px rgba(30, 79, 66, 0.16) !important;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* マウスを乗せた時 */
#programs .btn-primary:hover,
#news .btn-primary:hover,
#support .btn-primary:hover {
    background: #315F52 !important;
    border-color: #315F52 !important;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(30, 79, 66, 0.22) !important;
}

/* =====================================================
   「お問い合わせページへ」だけ
   obi_long.png を背景にする
   ===================================================== */

a[href="lanikoa_hawaii/company_info/inquiry/contact_us.html"].w-100 {
    background:
        url("Base/obi_long.png")
        center center / cover
        no-repeat !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 0 !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.45) !important;

    box-shadow:
        0 7px 18px rgba(30,79,66,0.20) !important;
}

/* =====================================================
   お問い合わせページへ
   文字サイズ ＋ hover ゴールド
   ===================================================== */

#contact a.btn-primary.w-100 {
    font-size: 18px !important;
}


/* マウスオーバー */
#contact a.btn-primary.w-100:hover {
    color: #d8b765 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.40),
        0 0 8px rgba(216, 183, 101, 0.20) !important;
}

/* =====================================================
   CONTACT 見出し
   ===================================================== */

/* Let's Talk About Hawaii. */
#contact .contact-info h3 {
    font-size: clamp(50px, 4.2vw, 60px) !important;
    line-height: 1.15 !important;
}

/* Hawaii. だけゴールド */
#contact .contact-info h3 .hawaii-gold {
    color: #c6a354 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 5px 12px rgba(198, 163, 84, 0.15);
}


/* Free Consultation */
#contact .contact-form h3 {
    font-size: clamp(26px, 3vw, 40px) !important;
    line-height: 1.2 !important;
}





/* =========================================================
   INDEX PAGE FONT
   English  : Cormorant Garamond
   Japanese : Noto Serif JP インデックスのページだけのフォント設定
   ========================================================= */

body {
    font-family:
        "Cormorant Garamond",
        "Noto Serif JP",
        serif;
}


/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Cormorant Garamond",
        "Noto Serif JP",
        serif !important;
}


/* 本文 */
p,
li,
dt,
dd,
span {
    font-family:
        "Cormorant Garamond",
        "Noto Serif JP",
        serif;
}


/* リンク・ボタン */
a,
button {
    font-family:
        "Cormorant Garamond",
        "Noto Serif JP",
        serif;
}


/* =========================================================
   INDEX FINAL MICRO ADJUSTMENTS
   2026-08-16
   ========================================================= */


/* ---------------------------------------------------------
   ABOUT
   「ハワイ専門 / Educational Consultant / ラニコア ハワイ。」
   --------------------------------------------------------- */

#about .section-heading h2 {
    line-height: 1.2 !important; /*---行間--*/
}

#about .section-heading h2 .heading-small {
    font-size: 0.51em !important;
    font-weight: 500 !important;
    letter-spacing: -0.055em !important;/*---字間--*/
	/* 行間もコンパクトに */
    line-height: 1.2 !important;
}

#about .section-heading h2 .educational-consultant {
    font-size: 1em !important;
    /* 英語も少しだけ詰める */
    letter-spacing: -0.015em !important;
    line-height: 1.15 !important
}


/* ---------------------------------------------------------
   CHOOSE YOUR HAWAII
   English headings slightly larger
   --------------------------------------------------------- */

#programs .program-body h3 {
    font-size: 26px !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
}


/* 2列 + 1列になった時、3番目を中央へ */
@media (min-width: 769px) and (max-width: 1024px) {

    #programs .program-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    #programs .program-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);
        max-width: 560px;

        justify-self: center;
    }

}


/* ---------------------------------------------------------
   LEARN & ENJOY HAWAII
   First line / card heading larger
   --------------------------------------------------------- */

#summer .support-box h3 {
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.015em !important;
}


/* ---------------------------------------------------------
   LINK BUTTON TYPOGRAPHY
   Same font family as Index body text
   --------------------------------------------------------- */

.btn,
.btn-primary,
.btn-outline,
.hero .btn,
.program-body .btn,
.support-box .btn,
.support-box2 .btn,
#news .btn,
#contact .btn {
    font-family:
        "Cormorant Garamond",
        "Noto Serif JP",
        serif !important;
}


/* ---------------------------------------------------------
   RESPONSIVE HERO FALLBACK
   動画を非表示にする画面では Greenbox(2).png を表示
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .hero-media {
        background-image:
            url("Base/Greenbox(2).png") !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .hero-media video {
        display: none !important;
    }

    /* Greenbox画像が見えるよう、既存の濃いレスポンシブoverlayを少し軽く */
    .hero-overlay {
        background:
            linear-gradient(
                135deg,
                rgba(12, 42, 34, 0.66),
                rgba(24, 77, 61, 0.38)
            ) !important;
    }

}


/* ---------------------------------------------------------
   MOBILE FINE TUNING
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #about .section-heading h2 {
        line-height: 1.68 !important;
    }

    #about .section-heading h2 .heading-small {
        font-size: 0.56em !important;
    letter-spacing: 0.9em !important;
}

    #programs .program-body h3 {
        font-size: 24px !important;
    }

    #summer .support-box h3 {
        font-size: 24px !important;
    }

}

/* =========================================================
   ABOUT
   見出しと本文の間隔
   ========================================================= */

#about .section-heading h2 {
    margin-bottom: 42px !important;
}
/* =========================================================
   HERO FINAL ADJUSTMENT — 2026-09-12
   ・Heroを明るくする
   ・Hawaii / Your Hawaii Life のフォントを元のMontserratへ戻す
   ・Hero内の文字を全体的に少し下げる
   ・Heroボタンを少し小さくする
   ・PC/スマホとも動画が表示できない場合は Base/top.png を背景に使用
   ========================================================= */

/* PC: 動画が読み込めない場合のフォールバック */
.hero-media {
    background-color: #d9e6d2 !important;
    background-image: url("Base/top.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* 動画は少し明るく、色を自然に */
.hero-media video {
    filter: saturate(.92) contrast(1.02) brightness(1.06) !important;
}

/* 暗さをかなり減らして、写真の明るさを残す */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7,27,23,.34) 0%,
            rgba(7,27,23,.16) 48%,
            rgba(7,27,23,.04) 78%
        ),
        linear-gradient(
            0deg,
            rgba(8,31,26,.10),
            transparent 48%
        ) !important;
}

/* Heroの文字は元のMontserratへ */
.hero-eyebrow,
.hero h1,
.hero-copy > p,
.hero-buttons .btn {
    font-family: Montserrat, "Noto Sans JP", sans-serif !important;
}

/* Hero内の文字ブロックをまとめて下へ */
.hero-content {
    transform: translateY(58px);
}

/* Heroボタンを少しコンパクトに */
.hero .btn {
    min-width: 178px !important;
    min-height: 46px !important;
    padding: 11px 18px !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
}

/* スマホ：top.pngをそのままフォールバック背景として使用 */
@media (max-width: 768px) {
    .hero-media {
        background-image: url("Base/top.png") !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    .hero-media video {
        display: none !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8,31,26,.04) 0%,
                rgba(8,31,26,.10) 55%,
                rgba(8,31,26,.18) 100%
            ) !important;
    }

    /* 現在のスマホ設定で上に寄りすぎないよう、下方向へ調整 */
    .hero-content {
        transform: translateY(42px);
        padding-bottom: 34px !important;
    }

    .hero .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   HERO MOBILE FALLBACK FIX — 2026-09-12
   スマホでは hero 本体に top.png を背景として設定し、
   動画レイヤーは透明にして確実に背景を表示する。
   ========================================================= */
@media (max-width: 768px) {
    .hero {
        background-image: url("Base/top.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .hero-media {
        background-image: none !important;
        background-color: transparent !important;
    }

    .hero-media video {
        display: none !important;
    }
}



/* =========================================
   HERO TITLE
   Hawaii = small / Just for you = large
========================================= */

.hero-title {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Hawaii, */
.hero-title .hero-hawaii {
    display: block;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 400;
    color: #6f756f;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 8px;
}

/* just for you */
.hero-title .hero-just {
    display: block;
    font-size: clamp(61px, 7.6vw, 114px);
    font-weight: 800;
    color: #C7B994;
    letter-spacing: -0.035em;
    line-height: 0.95;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

/* Mobile */
@media screen and (max-width: 600px) {

    .hero-title .hero-hawaii {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .hero-title .hero-just {
        font-size: clamp(52px, 15vw, 78px);
        line-height: 0.98;
    }
}


/* =====================================================
   HERO BUTTON FINAL FIX
   ボタンの表示崩れ・背景色を復元
   ===================================================== */

.hero-buttons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.hero-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    height: auto !important;

    padding: 14px 24px !important;

    line-height: 1.4 !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
    position: relative !important;
}

/* 無料相談・お問い合わせ */
.hero-buttons .btn-primary.btn-pattern {
    background-color: #2F6B5A !important;

    background-image:
        url("Base/obi_b1.jpg") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border: 1px solid #2F6B5A !important;
    color: #ffffff !important;

}

/* 光沢レイヤー */
.hero-buttons .btn-primary.btn-pattern::before {
    z-index: 0 !important;
}

/* ボタン文字を確実に前面へ */
.hero-buttons .btn-primary.btn-pattern {
    isolation: isolate;
}

/* プログラムを見る */
.hero-buttons .btn-outline {
    display: inline-flex !important;

    min-height: 52px !important;

    background: #2F6B5A !important;
    border: 1px solid #2F6B5A !important;

    color: #ffffff !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    line-height: 1.4 !important;
}

/* hover */
.hero-buttons .btn-outline:hover {
    background: #315F52 !important;
    border-color: #315F52 !important;
    color: #ffffff !important;
}

/* スマホ */
@media (max-width: 768px) {

    .hero-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
        padding: 12px 18px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    .hero-buttons .btn-primary.btn-pattern,
    .hero-buttons .btn-outline {
        width: 100% !important;
    }
}

/* =====================================================
   HERO BUTTON — 上下のクリップを解除
   ===================================================== */

.hero-buttons {
    overflow: visible !important;
}

.hero-buttons .btn {
    overflow: visible !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: none !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* ボタンの文字を確実に中央へ */
.hero-buttons .btn-primary.btn-pattern,
.hero-buttons .btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* スマホ */
@media (max-width: 768px) {
    .hero-buttons .btn {
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
    }
}