@charset "utf-8";

/************************

blantonsブランドサイト CSS　2026 by FLICKS
TOPページ用

************************/

/**********************************
 
mv
 
**********************************/
.mv {
    position: relative;
    height: clamp(582px, calc(100svh - 186px), 720px);
    align-content: center;
    background: #000 no-repeat calc(50% + 250px) center;
    background-size: 1440px;
    overflow: hidden;
}

.mv__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: calc(50% + 250px) center;
    background-size: 1440px;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 1.8s ease 0.4s;
}

.mv__bg.is-show {
    opacity: 1;
}

.mv__inner {
    position: relative;
    z-index: 1;
    width: 1024px;
    margin: 0 auto;
    max-width: 100%;
}

.scroll-btn {
    position: absolute;
    bottom: 2em;
    left: 2em;
    width: 13px;
}

@media (min-width: 1460px) {

    .mv,
    .mv__bg {
        background-size: contain;
        background-position: calc(50% + 280px) center;
    }
}

/* ロゴ・コピー */
.mv__logo,
.mv__copy {
    opacity: 0;
    transform: translateY(4px);
}

.mv__copy {
    transform: translateY(0px);
}

.mv__logo {
    animation: mvFadeUp 1.2s cubic-bezier(.32, 1, .3, 1) .4s forwards;
    width: 461px;
    text-align: center;
}

.mv__logo img {
    width: 437px;
}

.mv__copy {
    animation: mvFadeUp 1.8s cubic-bezier(.32, 1, .3, 1) 1.6s forwards;
    width: 461px;
    margin-top: 0.5em;
}

@keyframes mvFadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---  --- */
.mv__logo {
    width: 461px;
    text-align: center;
    max-width: 100%;
}

.mv__logo img {
    width: 437px;
}

.mv__copy {
    width: 461px;
    margin-top: 0.5em;
    max-width: 100%;
}

@media (max-width:768px) {}

/**********************************
 
.blantons-header
 
**********************************/
.blantons-header {
    position: fixed;
    top: 0;
    z-index: 1000;

    /*ガクつきの要因 height: 0;*/

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .23s ease,
        transform .4s ease,
        visibility 0.1s linear .4s;

    /*ナビ内の表示に不具合　transform: translateY(-16px);*/
}

.blantons-header.is-visible {
    /* height: auto; ← これもガクつきの要因消す */

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity .4s ease,
        transform .4s ease,
        visibility 0.1s linear 0s;

    /*ナビ内の表示に不具合　transform: translateY(0);*/
}

/* ---　PCサイズのみ　---*/
@media all and (min-width:768px) {
    .blantons-header {
        transform: translateY(-16px);
    }

    .blantons-header.is-visible {
        transform: translateY(0);
    }
}

/**********************************
 
section
 
**********************************/
section {
    height: 570px;
    align-content: center;
    padding: 4em 0;
}


.c-btn a {
    display: inline-block;
    margin-top: 1.1em;
    padding: 0.9em 5em;
    text-align: center;
    border: 1px solid #919191;
    color: currentColor;
    font-size: 15px;
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.5);
    font-family:
        Arial,
        "Yu Gothic",
        "Hiragino Sans",
        sans-serif;
    transition: 0.3s ease;
    position: relative;
}

.c-btn a:hover {
    border: 1px solid #5b5b5b;
    color: #fff;
    background-color: rgba(50, 50, 50, 0.5);
}



.section-h2 {
    font-size: 34px;
}

.section-h2__sub {
    display: block;
    font-size: 16px;
    margin-top: 0.4em;
    color: #bc973d;
    letter-spacing: 0.015em;
}


/*----------------
フェードイン＆背景系
----------------*/
#blantons-top>section {
    position: relative;
}

#blantons-top>section::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0;
    transition: opacity 1.2s ease 0.2s;

    z-index: 0;
}

#blantons-top>section.is-visible::before {
    opacity: 1;
}

#blantons-top>section>.l-inner {
    width: 860px;
    max-width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .5s ease, transform .6s ease;
}

#blantons-top>section.is-visible .l-inner {
    opacity: 1;
    transform: translateY(0);
}


/*---各セクション---*/
#blantons-top>section.about,
#blantons-top>section.bourbon {
    text-align: right;
}

#blantons-top>section.about::before {
    background: url(../images/top/img_about.webp) center center no-repeat;
    background-size: auto 155%;
}

#blantons-top>section.one_and_only::before {
    background: url(../images/top/img_one_and_only.webp) calc(50% + 80px) center no-repeat;
    background-size: auto 105%;
}

#blantons-top>section.products {
    text-align: center;
    height: auto;
}

#blantons-top>section.products .c-btn a {
    margin-top: 0;
}

.products__image {
    width: 665px;
}


#blantons-top>section.recipes::before {
    background: url(../images/top/img_recipes.webp) center center no-repeat;
    background-size: cover;
}

.recipes__image {
    width: 550px;
    padding-top: 52px;
}


#blantons-top>section.bourbon::before {
    background: url(../images/top/img_bourbon.webp) center center no-repeat;
    background-size: cover;
}


.bourbon__image {
    width: 390px;
}

/**********************************
 
SPサイズのみ
 
**********************************/

@media all and (max-width:767px) {
    #blantons-top>section {
        height: auto;
        min-height: 110vw;
    }

    #blantons-top>section.about::before {
        background: url(../images/top/img_about.webp) calc(50% + 90px) center no-repeat;
        background-size: 300%;
        opacity: 0.43;
    }

    section.one_and_only {
        text-align: left;
    }

    #blantons-top>section.one_and_only::before {
        background-position: calc(90%) center;
        background-size: auto 105%;
        opacity: 0.5;
    }

    #blantons-top>section.recipes,
    #blantons-top>section.bourbon {
        text-align: center;
    }

    .recipes .media,
    .bourbon .media {
        gap: 20px;
    }

    .recipes__image,
    .bourbon__image {
        width: auto;
        padding-top: 0;
    }

    .bourbon .c-btn {
        margin-top: 1.5em;
    }

    .section-h2__sub {
        font-size: 13px;
    }
}