@charset "utf-8";

/*==========================
sp
==========================*/
@media screen and (max-width: 768px) {

    /* 変数に基づき、768pxを基準にしたvw計算を行う */
    /* 例: 768pxで10px -> (10 / 768) * 100 = 1.302083...vw */
    
    /*==========================
    header
    ==========================*/
    /* header全体はそのまま */
    
    .nav__list {
        /* スマホでは縦並びにする */
        /*display: block;
        width: 100vw;*/
    }
    
    .nav__item {
        height: 14vw; /* 768pxで92.16px相当 (12/100*768) */
        line-height: normal;
        font-size: 3vw; /* 768pxで23.04px相当 */
        font-weight: 700;
        /* デザインを調整 */
        text-shadow: -0.26vw -0.26vw 0 #fff, 0.26vw -0.26vw 0 #fff, -0.26vw 0.26vw 0 #fff, 0.26vw 0.26vw 0 #fff; /* 768pxで2px相当 */
        outline: solid 0.26vw #fff; /* 768pxで2px相当 */
        border: solid 0.26vw #ffbbd4; /* 768pxで2px相当 */
        /* backgroundはそのまま */
        -webkit-flex-grow: initial;
        flex-grow: initial;
        width: 100vw;
    }
    .main__image__pc {
    display: none;
    }
    .main__image__sp {
    display: block;
    margin: 0 auto;
    }


    /*==========================
    article (全体)
    ==========================*/
    article {
        width: 100vw;
        overflow: hidden; /* 横スクロール対策 */
    }

    /*==========================
    about
    ==========================*/
    .about__container {
       /* padding: 0 5vw; /* 左右5vwのパディング */
    }
    
    .ttl_image {
        margin-top: 9.11vw; /* 768pxで70px相当 */
        width: 70%; /* 画像の幅を調整 */
        margin-left: auto;
        margin-right: auto;
    }
    
    .about__event__container {
        margin-top: 4.68vw; /* 768pxで36px相当 */
    }
    
    .about__event__item {
        /* SP向けに縦並びにする */
        display: block;
        text-align: left;
        margin: 5.2vw auto; /* 768pxで40px相当 */
        width: 90vw; /* 画面幅いっぱいに */
    }
    
    .about__event__item__topic {
        display: block;
        height: auto;
        line-height: 1.4;
        padding: 2.6vw 2.6vw; /* 768pxで20px相当 */
        font-size: 3.5vw; /* 768pxで27px相当 */
        border-radius: 1.8vw; /* 768pxで14px相当 */
        width: 100%; /* 幅いっぱいに */
        text-align: left;
    }
    
    .about__event__item__txt {
        font-size: 3.8vw; /* 768pxで23px相当 */
        margin-left: 0;
        margin-top: 2.6vw; /* 768pxで20px相当 */
        text-align: left;
    }
    
    .font__bold {
        font-size: 6vw; /* 768pxで32px相当 */
    }
    
    .about__event__item__list {
        margin-top: 2vw; /* リスト上のマージン */
    }
    .about__event__item__list__txt {
        margin-top: 1vw; /* リスト項目の間隔 */
    }

    .border {
        margin-top: 9.11vw; /* 768pxで70px相当 */
        height: 100px;
        width: 100vw;
        background-image: url(../images/border.png);
        background-size: contain;
        background-repeat: repeat-x;
    }
    
    .about__bag__ttl__image,
    .about__box__ttl__image,
    .about__decoration__ttl__image,
    .about__newspaper__ttl__image {
        margin-top: 9.11vw; /* 768pxで70px相当 */
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .about__newspaper__image {
        margin-top: 6.5vw; /* 768pxで50px相当 */
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    .newspaper__comingsoon {
        position: absolute;
        top: 43%;
        left: 26%;
        font-size: 2.4rem;
    }
    
    .about__newspaper__btn {
        margin-top: 5vw; /* ボタン上のマージン */
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }
    .atention__txt {
        font-size: 1.2rem;
    } 
    .br__sp {
        display: block;
    }
    
    /*==========================
    store
    ==========================*/
    .store__ttl__image {
        margin-top: 9.11vw; /* 768pxで70px相当 */
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
    
    .online__btn {
        margin-top: 9.11vw; /* 768pxで70px相当 */
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .online__item__container01 {
        margin-top: 9.11vw; /* 768pxで70px相当 */
    }
    
    .online__item {
        /* SP向けに縦並びにする */
        display: block;
        text-align: left;
        margin: 5.2vw auto; /* 768pxで40px相当 */
        width: 90vw; /* 画面幅いっぱいに */
    }
    
    .online__item__topic {
        display: block;
        height: auto;
        line-height: 1.4;
        padding: 2.6vw 2.6vw; /* 768pxで20px相当 */
        font-size: 3.5vw; /* 768pxで27px相当 */
        border-radius: 1.8vw; /* 768pxで14px相当 */
        width: 100%; /* 幅いっぱいに */
        text-align: left;
    }
    
    .online__item__txt {
        font-size: 4vw; /* 768pxで23px相当 */
        margin-left: 0;
        margin-top: 2.6vw; /* 768pxで20px相当 */
        line-height: 1.4;
    }

    .online__item__list {
        width: 100vw;
    }

    /*==========================
    location
    ==========================*/
    .location__container {
        width: 100vw;
    }

    .location__item__accordion {
        padding: 5.2vw; /* 768pxで40px相当 */
        margin: 5.2vw auto; /* 768pxで40px相当 */
        width: 90vw; /* 画面幅いっぱいに */
        box-sizing: border-box;
    }
    
    .details {
        width: 80vw; /* アコーディオンの幅を調整 */
        margin: -1.3vw auto 0; /* 768pxで-10px相当 */
        padding-bottom: 2.6vw; /* 768pxで20px相当 */
    }
    
    .details[open] {
        padding-bottom: 1.3vw; /* 768pxで10px相当 */
    }
    
    .details-summary {
        padding: 2vw; /* 768pxで15.36px相当 */
        font-size: 4vw; /* 768pxで23px相当 */
    }
    
    .details-summary::after {
        margin-right: 1.3vw; /* 768pxで10px相当 */
        width: 2.08vw; /* 768pxで16px相当 */
        height: 2.08vw; /* 768pxで16px相当 */
        right: 2.08vw; /* 768pxで16px相当 */
    }
    
    .details-content {
        padding: 2.6vw; /* 768pxで20px相当 */
        font-size: 2vw; /* 768pxで15.36px相当 */
    }
    
    .location__bold {
        font-size: 2.5vw; /* 768pxで19.2px相当 */
        margin-top: 1.3vw; /* 768pxで10px相当 */
    }
    
    .location__item__text {
        font-size: 3vw; /* 768pxで19.2px相当 */
        margin-top: 3.9vw; /* 768pxで30px相当 */
    }
    
    .location__item__accordion__list {
        margin-top: 3.9vw; /* 768pxで30px相当 */
        font-size: 2.6vw; /* 768pxで13.8px相当 */
    }

    /*==========================
    pagetop
    ==========================*/
    .page_top {
        right: 1.3vw; /* 768pxで10px相当 */
        bottom: 1.3vw; /* 768pxで10px相当 */
    }
    
    .page_top img {
        width: 19.5vw; /* 768pxで150px相当 */
        height: 19.5vw; /* 768pxで150px相当 */
    }
    
    /*==========================
    footer
    ==========================*/
    .footer {
        padding-top: 5vw;
    }
    .footeer__link {
        font-size: 3vw; /* 768pxで15.36px相当 */
    }
    .footeer__contact {
        font-size: 3.5vw; /* 768pxで15.36px相当 */
    }
    .footer__contact__attention {
        font-size: 2.3vw;
        display: block;
        width: 70%;
        margin: 10px auto;
    }
    .br__contact__sp {
        display: none;
    }
    .footer__copyright {
        font-size: 2.6vw; /* 768pxで13.8px相当 */
        margin-top: 5.2vw; /* 768pxで40px相当 */
        padding: 1.3vw 0 3.9vw; /* 768pxで10px, 0, 30px相当 */
    }
}