@charset "utf-8";

/*==========================
FV
==========================*/

.fv{
    width:100%;
    max-width:390px;
    margin:0 auto;
    padding-top:60px;   /* header分 */
}

.fv-image img{
    display:block;
    width:100%;
    height:auto;
}

.fv-text{
    margin-top: 80px;
}

/*==========================
about
==========================*/

.about{
    background-color: #ffffff;
    max-width:390px;
    margin:0 auto;
    padding:60px 20px 140px;
}

.about-inner{
    position:relative;
}

.about h2{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    text-align:center;
    font-size:30px;
    line-height:1.5;
    margin-bottom:80px;
}

.about-block{
    position:relative;
    padding:60px 0;
    text-align: center;
}

/* .about-block p{
    position:relative;
    z-index:2;
    font-size:14px;
    font-weight:700;
    line-height:2;
    text-align:center;
} */

.about-block span{
    position: relative;
    display:inline-block;
    font-size: 14px;
    margin-bottom:4px;
    padding:2px;
    background:#fff;
    border:1px solid #000;
    font-weight:400;
}

/* ------------------
   共通画像
------------------ */

.about-img{

    position:absolute;

    width:170px;

    opacity: 1;

    transform:translateY(60px);

}

/*==========================
ABOUT PHOTO
==========================*/

.img01{

    top:-5px;
    left:-20px;

}

.img02{

    bottom:-40px;
    right:-20px;

}

.img03{

    top:-10px;
    left:-20px;

}

.img04{

    bottom:-80px;
    right:-20px;

}

.img05{

    top:80px;
    left:-20px;

}

.img06{

    bottom:30px;
    right:-20px;

}

.img07{

    top:-40px;
    left:-20px;

}

.img08{

    bottom:-40px;
    right:-20px;

}

/*==========================
QUICK MENU
==========================*/

.quick-menu{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 0;;
}

.quick-menu-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 18px;
}

.quick-menu-list li{
    list-style:none;
}

.quick-menu-list a{
    display:flex;
    justify-content:center;
    align-items:center;
    height:44px;
    border:1px solid #000;
    border-radius:999px;
    background:#fff;
    font-size:14px;
    color:#000;
    text-decoration:none;
    transition:.3s;
}

/*==========================
SHOP
==========================*/

.shop{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 0;
}

.shop-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:32px;
}

.shop-title h3{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.shop-title p{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:8px;
    font-size:14px;
}

.view-all{
    display:flex;
    justify-content:center;
    align-items:center;
    width:95px;
    height:30px;
    border:1px solid #000;
    border-radius:999px;
    font-size:14px;
    color:#000;
    background-color: #fff;
    text-decoration:none;
    transition:.3s;
}

.view-all:hover{
    background:#000;
    color:#fff;
}

.shop-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px 10px;
}

.shop-card{
    list-style:none;
}

.shop-card img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
}

.shop-card p{
    margin-top:10px;
    font-size:14px;
    text-align:center;
}

/* 追加分0905 */
.shop-content{
    display:none;
}

.shop-content.active{
    display:block;
}

.shop-area{
    margin-top:30px;
}

.shop-area.sub{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:20px;
    font-size:16px;
    font-weight: bold;
}

.shop-area h5::after{
    content:"";
    flex:1;
    height:1px;
    /* background:#000; */
}

/*==========================
ARTIST
==========================*/

.artist{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 0;
}

.artist-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:32px;
}

.artist-title h3{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.artist-title p{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:8px;
    font-size:14px;
}

.view-all{
    display:flex;
    justify-content:center;
    align-items:center;
    width:95px;
    height:30px;
    border:1px solid #000;
    border-radius:999px;
    font-size:14px;
    color:#000;
    background-color: #fff;
    text-decoration:none;
    transition:.3s;
}

.view-all:hover{
    background:#000;
    color:#fff;
}

.artist-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px 10px;
}

.artist-card{
    list-style:none;
}

.artist-card img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
}

.artist-card p{
    margin-top:10px;
    font-size:14px;
    text-align:center;
}

/* 追加分0905 */
.artist-content{
    display:none;
}

.artist-content.active{
    display:block;
}

.artist-area{
    margin-top:50px;
}

/*==========================
MAP
==========================*/
.floor-map{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 0;
}

.floor-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:32px;
}

.floor-title h3{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.floor-title p{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:8px;
    font-size:14px;
}

.floor-tab{
    display:flex;
    gap:10px;
    margin:30px 0;

}

.tab-btn{
    width:52px;
    height:32px;
    border:1px solid #000;
    border-radius:999px;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.tab-btn.active{
    background:#000;
    color:#fff;
}

.floor-svg{
    display:none;
    width:100%;
}

.floor-svg.active{
    display:block;
}

/*==========================
TIMETABLE
==========================*/
.time-table{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 0;
}

.time-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:32px;
}

.time-title h3{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.time-title p{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:8px;
    font-size:14px;
}

.timetable-des{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:15px;
    font-size:11px;
}

.time-tab{
    display:flex;
    gap:10px;
    margin:32px 0;
}

.time-btn{
    width:52px;
    height:32px;
    border:1px solid #000;
    border-radius:999px;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.time-btn.active{
    background:#000;
    color:#fff;
}

.time-content{
    position:relative;
}

.time-box{
    display:none;
}

.time-box.active{
    display:block;
}

.time-box img{
    width:100%;
    display:block;
}

/*==========================
ACCESS
==========================*/
.access{
    background-color: #f6f8f3;
    max-width:390px;
    margin:0 auto;
    padding:100px 20px 120px;
}

.access-title h3{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.access-info .des {
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:15px;
    font-size:11px;
}

.access-title p{
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    margin-top:8px;
    font-size:14px;
}

.access-info h4{
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-size:18px;
    font-weight:400;
    margin:24px 0;
}

.access-info p{
    font-size:16px;
    line-height:1.5;
}

.access-info a{
    padding-top: 10px;
    color:#000;
    text-decoration:underline;
    transition:.3s;
}

.access-info a:hover{
    opacity:.6;
}

.access-map{
    margin-top:32px;
}

.access-map iframe{
    width:100%;
    height:240px;
    border:0;
}

/* あとで消す */
.andmore {
    margin-top: 30px;
    display: block;
    justify-content:center;
    align-items:center;
    font-size:14px;
    color:#000;
}

.comingsoon {
    margin-top: 30px;
    display: block;
    font-size:16px;
    color:#ff0000; 
    font-family:"Helvetica Neue", Helvetica,Arial,;
    font-weight:400;
    line-height:1;
}