@charset "utf-8";

body {
    font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

a {
    text-decoration: none;
}

a:hover {
    transition: 0.3s;
}

img {
    width: 100%;
}

ol,
ul,
li {
    list-style: none;
    padding: 0px;
}

.hero {
    width: 100%;
    margin-bottom: 0px;
}

.hero-image {
    width: 100%;
}

/* ==============
ヘッダー
============== */

.header {
    margin: 0px;
    padding: 1.5% 2%;
    background-color: #074097;
    text-align: left;
}

.header-h1 {
    margin: 0px;
    align-items: center;
}


.header-image {
    width: 18%;
}

/* ==============
つるやガチャ
============== */
.gacha {
    width: 100%;
    background-color: #333;
}

.gacha>div {
    padding: 1.2% 4.4% 0px;
}

.gacha:hover {
    padding: 1.15% 4.35%;
    /* opacity: 0.6; */
    transition: .2s;
}

.gacha-link {
    display: block;
}

/* .gacha-link:hover {
    padding: 1%;
} */
.gacha-image {
    width: 100%;
    border-radius: 10px;
}

.gacha-image:hover {
    /* transform: translate(0px, -12px); */
    opacity: 0.6;

}


/* ==============
ナビゲーション
============== */

.nav {
    background-color: #333;
    margin-bottom: 15px;
}

.nav-list {
    max-width: 1920px;
    padding: 1.2% 4%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-item {
    width: 24%;
    /* background-color: #12bd37; */
    border-radius: 10px;
}

.item01 {
    background-color: #8fea20;

}

.item02 {
    background-color: #fef437;

}

.item03 {
    background-color: #1d77ff;

}

.item04 {
    background-color: #fd8700;

}

.nav-link {
    display: block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: min(1.7vw, 24px);
    height: auto;
    width: 100%;
}

/* .nav-link:hover {
    background-color: #Fff;
    color: #333;
} */
.nav-link-image {
    width: 100%;
}

.nav-link-image:hover {
    transform: translate(0px, -12px);
}

.floating-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ffffff85;
    border: #074097 solid 1.5px;
    border-radius: 10px;
    width: 25%;
}

.floating-link {
    display: block;
    color: #074097;
    font-size: min(2vw, 18px);
    font-weight: bold;
    padding: 2.8% 1.2%;
}

.floating-banner:hover {
    opacity: 0.7;
}

@media screen and (max-width: 450px) {
    .nav {
        margin-bottom: 10px;
    }

    .floating-banner {
        width: 28%;
    }

    .floating-link {
        font-size: min(2.6vw, 18px);
        padding: 2.8% 1.2%;
    }
}


/* ==============
メイン
============== */
.main {
    max-width: 1900px;
    padding: 0px 4%;
    margin: 0 auto;
}

.second-hero {
    width: 100%;
    /* margin-bottom: 20px; */
}

.second-hero-image {
    width: 100%;
}

.nav-title {
    width: 100%;
    margin: 0px auto 15px;
}

.nav-title-image {
    width: 100%;
}

/* ========
店舗企画
======== */

.article-coopon {
    /* background-color: #7c7c7c; */
    margin-bottom: 15px;
}

.coopon-title {
    padding: 0.2%;
    margin: 0px;
}

.coopon-link:hover {
    opacity: 0.7;
}

.coopon-title-image {
    width: 100%;
}

.coopon-flex-box {
    display: flex;
    justify-content: space-around;
    align-items: start;
}

.coopon-item {
    margin: 0px;
    width: 48%;
}

.coopon-item>div {
    width: 100%;
}

.coopon-image {
    width: 100%;
}

.coopon-caption {
    text-align: left;
    padding-left: 10px;
}

.coopn-description {
    margin-top: 3px;
    font-size: min(1.5vw, 16px);
    font-weight: bold;
}

@media screen and (max-width: 450px) {
    .article-coopon {
        margin-bottom: 10px;
    }

    .coopn-description {
        margin-top: 3px;
        font-size: min(2vw, 16px);
        font-weight: bold;
    }
}


.plan {
    width: 100%;
    /* border-bottom: #99da17 8px ridge; */
    border: #99da17 8px ridge;
    margin-bottom: 15px;
}

.shop-plan {
    width: 100%;
    margin-bottom: 25px;
    padding: 1.2%;
    /* background-image: url(../img/product_background01.jpg); */
    /* 背景画像を固定 */
    /* background-attachment: fixed; */
    /* 背景画像を画面全体にカバー */
    /* background-size: cover; */
    /* 背景画像を中央に配置 */
    /* background-position: center; */
    /* scroll-behavior: smooth; */
    border-radius: 10px;
    /* border: #12bd37 8px solid; */
}

.plan-article-headline {
    margin: 0px;
}

.plan-article-headline>img {
    width: 100%;
}

.plan-flex-box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 10px;
}

.plan-item {
    width: 44.5%;
}

.bottom-space {
    margin-bottom: 24px;
}

.one-plan {
    width: 92%;
}

.two-plan-2nd {
    margin: 0px;
}

.plan-figure {
    margin: 0px;
}

.hiyake:hover{
    box-shadow: #7c7c7c 5px 5px 5px;
    transition: .25s;
}

.shop-plan>div {
    width: 100%;
}

.shop-plan-image {
    width: 100%;
}

.plan-online {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.cnt02 {
    margin-top: 12px;
}


.plan-link {
    margin-top: 10px;
    width: 70%;
    color: #fff;
    font-size: min(2vw, 20px);
    font-weight: bold;
    background-color: #074097;
    border-radius: 25px;
    padding: 0.7%;
}

.non-link {
    margin-bottom: 0px;
    color: #fff;
    background-color: #cecece;
}

.plan-link:hover {
    background-color: #d5e2f7;
    color: #074097;
}

.non-link:hover {
    color: #fff;
    background-color: #cecece;
}

.online-careful {
    margin-top: 0px;
    font-size: min(1.5vw, 16px);
    padding-left: 2%;
    text-align: left;
}

@media screen and (max-width: 450px) {
    .main {
        padding: 0px 2%;
    }

    .nav-title {
        margin: 0px auto 5px;
    }

    .plan-flex-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 5px;
    }

    .plan-link {
        margin-top: 5px;
        width: 70%;
        color: #fff;
        font-size: min(3vw, 20px);
        padding: 0.7%;
    }

    .plan-item {
        width: 93%;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .plan-item:first-child {
        margin-bottom: 8px;
    }

    .nav-link-image:hover {
        transform: translate(0px, -6px);
    }
}

/* ==============
YouTube
============== */
.movie {
    width: 100%;
    /* padding-top: 1.2rem; */
    padding-bottom: 4rem;
    border: #fef437 8px ridge;
    margin-bottom: 15px;
}

.movie-wrap {
    width: 100%;
    max-width: calc(810px + 8rem);
    padding: 0 4rem;
    margin: 0 auto;
    border-radius: 10px;
}

.movie-title {
    font-weight: bold;
    font-size: min(3vw, 30px);
    color: #074097;
    background-color: #fff;
    font-size: min(3vw, 30px);
    /* border-radius: 10px; */
    box-shadow: #074097 6px 6px;
    padding: 0.7%;
}

.movie-iframeWrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.35%;
}

.movie-iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .movie {
        padding-bottom: 2rem;
    }

    .movie-wrap {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* ==============
product
============== */
.product {
    width: 100%;
    border: #1d77ff 8px ridge;
    margin-bottom: 15px;
}

.you {
    border: #fd8700 8px ridge;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.product-article {
    padding: 0px 1.5%;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
}

.bg-gr {
    scroll-behavior: smooth;
}

.product-title {
    color: #074097;
    background-color: #fff;
    font-size: min(3vw, 30px);
    border-radius: 10px;
    box-shadow: #074097 6px 6px;
    padding: 0.7%;
    margin-top: 0px;
    margin-bottom: 15px;
}

@media screen and (max-width: 450px) {
    .product-article {
        padding: 0px 1.5%;
        width: 100%;
        margin-bottom: 0px;
    }
}

/* ==============
shop
============== */

.shop {
    width: 100%;
    margin: 40px auto;
    text-align: center;
    padding: 35% auto;
}

.shop>div {
    /* width: 80%; */
    display: flex;
    text-align: center;
    justify-content: center;
}

.shop-link {
    text-align: center;
    width: 80%;
    color: #fff;
    background-color: #e31616;
    font-weight: bold;
    font-size: min(3.5vw, 40px);
    padding: 1.2% 4%;
    border-radius: 50px;
}

.shop-link:hover {
    opacity: 0.7;
}

.shop-link>span:hover {
    transform: translate(5px, 0px);
}

@media screen and (max-width: 550px) {
    .shop {
        margin: 20px auto;
    }
}

/* ==============
キャンペーン
============== */

.campain {
    width: 100%;
    margin: 45px auto;
    padding: 2% 1%;
}

.campain-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.campain-item {
    width: 14.5%;
}

.campain-link {}

.campain-image {
    width: 100%;
}

.campain-image:hover {
    box-shadow: #7c7c7c 5px 5px 5px;
    transition: .25s;
}

.hiyake-link:hover {
    box-shadow: #7c7c7c 5px 5px 5px;
    transition: .25s;
}

@media screen and (max-width: 600px) {
    .campain {
        width: 100%;
        margin: 17px auto;
        padding: 1.5% 0.5%;
    }

    .campain-item {
        width: 29%;
        margin-bottom: 10px;
    }

    .campain-image:hover {
        box-shadow: #7c7c7c 3px 3px 3px;
        transition: .25s;
    }
}



/* ==============
footer
============== */
.footer {
    text-align: center;
    background-color: #7c7c7c;
    margin-top: 20px;
    padding: 5%;
}

.footer>div {
    width: 15%;
    text-align: center;
    margin: 0px auto;
}

/* .logo-link {} */

.logo-link:hover {
    opacity: 0.7;
}

/* .footer-logo {
} */
.footer-list {
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0;
}

.footer-item {
    width: 8%;
}

/* .footer-link {} */

.footer-link:hover {
    opacity: 0.7;
}

.sns-logo {
    width: 100%;
}

/* .footer-p01 {} */

.policy-link {
    color: #fff;
    font-size: 1.2vw;
}

.policy-link:hover {
    opacity: 0.7;
}

.footer-p02 {
    color: #fff;
    font-size: 1.2vw;
}

@media screen and (max-width: 450px) {
    .footer>div {
        width: 30%;
    }

    .footer-item {
        width: 14%;
    }

    .policy-link {
        font-size: 2vw;
    }

    .footer-p02 {
        font-size: 2vw;
    }
}