@charset "utf-8";
/* ===================================
common
=================================== */
html {
    font-size: 62.5%;
}

body {
    font-family:
        Inter,
        Arial,
        sans-serif;
    font-style: normal;
    color: #3b3b3b;
    background-color: #fffefe;
    line-height: 1.5;
    font-size: 1.5rem;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    color: #3B3B3B;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
}

.inner {
    margin: 0 3%;
}

#thum,
#access,
#guest,
#booth {
    scroll-margin-top: 68px; 
}

/* pc 550px*/
@media screen and (min-width:550px) {
    h2 {
        font-size: 3rem;
    }
}

/* pc 769px*/
@media screen and (min-width:769px) {
    body {
        font-size: 2.2rem;
    }

    h1 {
        font-size: 8.1rem;
        font-weight: 700;
    }

    h2 {
        font-size: 5rem;
    }
    
}

/* ===================================
header
=================================== */
.header {
    padding: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    line-height: 1;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fffefe;
    z-index: 200;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.header__btn {
    position: absolute;
    right: 4%;
    top: 70%;
    transform: translateY(-50%);
}

.header.scrolled {
    border-bottom: 1px solid #c0c0c0;
}

/* .nav初期表示 */
.nav {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    padding: 0 12.3%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav__btn {
    position: absolute;
    right: 3%;
    top: 37px;
    transform: translateY(-50%);
}

.nav_header {
    display: flex;
}

.header__logo {
    width: 148px;
    height: 42px;
}

.nav__list {
    margin-top: 116px;
}

.nav__item {
    position: relative;
    padding-left:  43px;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 3;
}

.nav__item::before {
    content: "";
    background-image: url("../images/flower.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
}

.eventname {
    font-size: 3.2rem;
    font-weight: 700; 
    padding: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}

.schedule {
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1;
}

.subtitle {
    font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
}

.topimage {
    width: 100%;
    margin: 12px 0 70px;
    border: #c0c0c0 1px solid;
    border-radius: 15px;
}

.topimage__pc {
    display: none;
}

.event__info {
    text-align: center;
    border-bottom: #c0c0c0 1px solid;
    padding-top: 66px;
}

.event__info--second {
    margin: 11px 0 90px;
}

.subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 40px 0 40px;
}

.flower {
    width: 30px;
    height: 30px;
}

.genre {
    line-height: 2.5;
}

/* pc 769px*/
@media screen and (min-width:769px) {
    .header {
        position: static;
    }

    .header__btn {
        width: 50px;
    }

    .schedule {
        font-size: 5rem;
    }

    .subtitle {
        font-size: 4.4rem;
    }

    .topimage {
        display: none;
    }

    .topimage__pc {
        display: block;
        max-height: 840px;
        object-fit: cover;
        border-radius: 70px;
        width: 100%;
        margin: 12px 0 80px;
        border: #c0c0c0 1px solid;
        border-radius: 15px;
    }
    
    .event__info--text,
    .event__info--second {
        font-size: 2.2rem;
    }

    .br__sp {
        display: none;
    }

    .nav, 
    .nav.active { /* activeが付いていても非表示にする */
        display: none !important; 
    }

    .header__btn {
        display: none;
    }


    .eventname {
        display: none;
    }

    .flower {
        width: 50px;
        height: 50px;
    }

    .event__info {
        padding-top: 0;
    }

    .subtitle {
        margin: 90px 0 40px;
    }
}

/* pc 1400px*/
@media screen and (min-width:1400px) {
    .event__info {
        max-width: 1350px;
        margin: 0 auto;
    }
}


/* ===================================
アクセス
=================================== */
.access {
    text-align: center;
    border-bottom: #c0c0c0 1px solid;
}

.map {
    width: 100%;
    height: 352px;
    margin: 12px 0 80px;
}

/* pc 769px*/
@media screen and (min-width:769px) {
    .map {
        height: 500px;
    }
}

/* pc 1400px*/
@media screen and (min-width:1400px) {
    .access {
        max-width: 1350px;
        margin: 0 auto;
    }
}

/* ===================================
スペシャルゲスト
=================================== */
.guest {
    border-bottom: #c0c0c0 1px solid;
}

.guest__name {
    font-size: 2.5rem;
    font-weight: 600;
}

.guest__livetime {
    margin-top: 20px;
    font-weight: 500;
    color: #bbbbbb;
}

.guest__info img {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 15px;
    height: auto; 
    min-height: 352px;
    object-fit: cover;
}

.guest__livetime--info {
    font-size: 2.4rem;
}

.guest__info--intro {
    margin: 12px 20px 20px;
}

.guest__info--small {
    margin-bottom: 10px;
}

.instagram__guest {
    font-size: 1.4rem;
    padding: 4px;
    max-width: 97px;
    margin: 5px auto 50px;
    border-radius: 8px;
    color: #3b3b3b;
    text-align: center;
    border: 1px solid #3b3b3b;
}

.instagram__guest p {
    padding: 0;
    margin: 0;
    border: none;
}

.instagram__guest:hover {
    opacity: 0.6;
}

/* pc 650px*/
@media screen and (min-width:650px) {
    .guest__info {
        display: flex;
        gap: 15px;
        margin-bottom: 50px;
    }

    .guest__info img {
        width: 50%;
        max-width: 500px;
    }

    .guest__name {
        font-size: 3rem;
    }

    .instagram__guest {
        font-size: 2rem;
        padding: 4px 7px;
        max-width: 116px;
        margin: 20px 0 0 0;
        border-radius: 8px;
        color: #3b3b3b;
        text-align: center;
        border: 1px solid #3b3b3b;
    }
}

/* pc 1400px*/
@media screen and (min-width:1400px) {
    .guest {
        max-width: 1350px;
        margin: 0 auto;
    }
}

/* ===================================
出展ブース紹介（共通）
=================================== */

.content--title {
    display: flex;
    align-items: center;
    gap: 5%;
    margin: 0 0 10px;
}

.booth__content--wrapper {
    padding: 17px 10px;
    border-radius: 7px;
    margin-top: 20px;
}

.booth__content--wrapper img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
}

.content--text {
    border-radius: 3px;
    font-size: 1.4rem;
    text-align: left;
}

.booth__name {
    font-size: 1.5rem;
    text-align: left;
    font-weight: 600;
}

.catcthcopy {
    font-size: 1.9rem;
    text-align: left;
    font-weight: 600;
}

.instagram {
    font-size: 1.4rem;
    padding: 4px;
    max-width: 97px;
    margin: 10px auto 0;
    border-radius: 7px;
    color: #fff;
    text-align: center;
}

.instagram:hover {
    opacity: 0.6;
}

/* pc 650px*/
@media screen and (min-width:769px) {
    .instagram {
        font-size: 2rem;
        padding: 4px 7px;
        max-width: 116px;
        margin: 20px auto 0;
        border-radius: 7px;
        color: #fff;
        text-align: center;
    }
}

/* pc 769px*/
@media screen and (min-width:769px) {
    .list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }

    .booth__content--wrapper img {
        width: 95px;
        height: 95px;
    }

    .booth__name {
        font-size: 1.8rem;
    }

    .catcthcopy {
        font-size: 2.3rem;
    }

    .content--text {
        font-size: 1.8rem;
        line-height: 1.5;
    }
    
}

/* pc 1400px*/
@media screen and (min-width:1400px) {
    .booth {
        max-width: 1350px;
        margin: 0 auto;
    }
}

/* ===================================
出展ブース紹介（食事、スイーツ）
=================================== */
.foodsweets {
    margin-bottom: 40px;
}

.booth__name--foodsweets {
    color: #ECA491;
}

.foodsweets--title {
    text-align: center;
    margin-top: 20px;
    padding: 3px;
    font-size: 2.1rem;
    font-weight: 600;
    color: #FFF;
    background-color: #ECA491;
    border-radius: 4px;
}

.foodsweets__content--wrapper {
    background-color: #FEF7F5;
}

.instagram__foodsweets {
    background-color: #ECA491;
}

/* pc 550px*/
@media screen and (min-width:700px) {
    .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* pc 850px*/
@media screen and (min-width:900px) {
    .list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .foodsweets--title {
        font-size: 3rem;
    }
}


/* ===================================
出展ブース紹介（雑貨）
=================================== */
.accessory {
    text-align: center;
    border-radius: 3px;
    margin: 20px 0 40px;
    font-size: 1.7rem;
    padding: 3px;
}

.booth__name--accessory {
    color: #F6BD61;
}

.accessory--title {
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
    background-color: #F6BD61;
    border-radius: 4px;
    padding: 3px;
}

.accessory__content--wrapper {
    background-color: #fffbf1;
}

.instagram__accessory {
    background-color: #F6BD61;
}

/* pc 850px*/
@media screen and (min-width:900px) {
    .accessory--title {
        font-size: 3rem;
    }
}



/* ===================================
出展ブース紹介（占い）
=================================== */
.fortune {
    text-align: center;
    border-radius: 3px;
    margin: 20px 0 40px;
    font-size: 1.7rem;
    padding: 3px;
}

.booth__name--fortune {
    color: #c0b2d5;
}

.fortune--title {
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
    background-color: #ab90d3;
    padding: 3px;
    border-radius: 4px;
}

.fortune__content--wrapper {
    background-color: #f9f6fe;
}

.instagram__fortune {
    background-color: #ab90d3;
}

/* pc 850px*/
@media screen and (min-width:900px) {
    .fortune--title {
        font-size: 3rem;
    }
}

/* ===================================
出展ブース紹介（マッサージ）
=================================== */
.massage {
    text-align: center;
    border-radius: 3px;
    margin: 20px 0 40px;
    font-size: 1.7rem;
    padding: 3px;
}

.booth__name--massage {
    color: #91d5b0;
}

.massage--title {
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
    background-color: #91d5b0;    
    padding: 3px; 
    border-radius: 4px;
}

.massage__content--wrapper {
    background-color: #f4fdf8;
}

.instagram__massage {
    background-color: #91d5b0;
}

/* pc 850px*/
@media screen and (min-width:900px) {
    .massage--title {
        font-size: 3rem;
    }
}

/* ===================================
出展ブース紹介（その他）
=================================== */
.other {
    text-align: center;
    border-radius: 3px;
    margin: 20px 0 40px;
    font-size: 1.7rem;
    padding: 3px;
}

.booth__name--other {
    color: #9bcbe2;
}

.other--title {
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
    background-color: #9bcbe2;
    padding: 3px;
    border-radius: 4px;
}

.other__content--wrapper {
    background-color: #f1fbff;
}

.instagram__other {
    background-color: #9bcbe2;
}

/* pc 850px*/
@media screen and (min-width:900px) {
    .other--title {
        font-size: 3rem;
    }
}

/* ===================================
footer
=================================== */
footer {
    padding: 10px;
    text-align: center;
    border-top: #c0c0c0 1px solid;
}

/* pc 1400px*/
@media screen and (min-width:1400px) {
    footer {
        max-width: 1350px;
        margin: 0 auto;
    }
}