/* Swiper container settings */
/* ===============================================
# 共通
=============================================== */
.u-desktop {
    display: none;
}
.u-mobile {
    display: block;
}
body.is-active{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
@media (min-width: 768px) {
    .u-desktop {
        display: block;
    }
    .u-mobile {
        display: none;
    }
    
}
.l-inner {
    max-width: 700px;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .l-inner {
        max-width: 1250px;
        padding-left: 25px;
        padding-right: 25px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}
/* ===============================================
# トップ
=============================================== */
.top{
    display:flex;
}

.top__title img{
    object-fit:cover;
}

/* ===============================================
# コンセプト
=============================================== */
.concept{
    padding-inline:2rem;
    margin-top: 80px;
}

.concept-box__imgwrapper{
    margin-top: 24px;
}
.concept-box__imgArea{
    max-width: 400px;
    margin:30px auto 0;
}
@media (min-width: 768px) {
    .concept{
        margin-top: 144px;
    }
    .concept-box__imgArea{
        width: calc((660 / 1440)* 100%);
        max-width: 100%;
        margin: unset;
    }
    .concept-box__textArea{
        width:calc((700 / 1440 ) * 100%);
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
   
}

/* ===============================================
# イメージカード
=============================================== */
.img-cardBox{
    display:flex;
    justify-content: end;
    gap: 24px;
}

.img-card__img01{
   height: auto;
    max-width: 290px;
}

.img-cardBox2 img{
    width: 112px;
    height: 106px;
}
.img-cardBox1 img{
    width: 155px;
    height: 111px;
    
}
.img-box .concept-box__textArea{
    margin-top: 30px;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
}
.access-box__wrapper img{
    aspect-ratio: 280 / 190;
    height: auto;
    max-width: 280px;
    margin-left: auto;
}
.access-box__wrapper{
    margin-top: 30px;
    margin-right: -30px;
}
.img-cardBox{
    margin-top: 58px;
}
.img-cardBox1--reveres .img-card__img02{
    display:none;
}

@media (min-width: 768px) {
    
    .img-box{
        display:flex;
        gap:clamp(4rem,9vw,112px); 
    }
    .img-card{
        /* width:calc((660 / 1440) * 100%); */
    }
    .img-card img{
        max-width: 552px;
        width: 100%;
    }
    .img-cardBox{
        gap:clamp(2rem,5vw,80px);
        justify-content: end;
    }
    .img-cardBox1{
        margin-top: 40px;
    }
    .img-cardBox02{
        justify-content: flex-start;
    }
    .img-cardBox2 img{
        max-width: 200px;
        height: 180px;
    }
    .img-cardBox1--reveres img{
        margin-left: auto;
    }
   
    .img-cardBox1 img{
        height: 186px;
    }
    .img-cardBox2{
        max-width: 180px;
        height: 180px;
    }
    .img-card__img02{
        max-width: 256px;
        width: 100%;
        height: 352px;
        margin: auto;
    }
    .img-cardBox1--reveres .img-card__img02{
        max-width: 256px;
        width: 100%;
        height: 352px; 
    }
    .img-cardBox1--reveres .img-card__img02{
        display:block;
    }
    .img-box .concept-box__textArea{
        max-width: 100%;
        margin-right: unset;
        margin-left: unset;
    }
}





/* ===============================================
# 営業日
=============================================== */
.info{
    margin-top: 70px;
    position: relative;
    padding-top: 30px;
    padding-bottom: 44px;
}
.info__schedule{
    position: relative;
    margin-top: 1.5rem;
}

.info__schedule iframe{
    width: 100%;
}
.info:after{
    content: "";
    display:inline-block;
    max-width: 1080px;
    width: 100%;
    height: 100%;
    background-color: #BAD8741F;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    z-index: -1;
}
.info__box{
    display:grid;
}
@media (min-width: 768px) {
    .info{
        margin-top: 162px;
    }
    .info:after{
        content: "";
        display:inline-block;
        max-width: 1080px;
        width: 100%;
        height: 480px;
        background-color: #BAD8741F;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
        z-index: -1;
    }
    .info__box{
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem,2.5vw,40px);
        position: relative;
    }
    .info__box:after{
        content: "";
        display:inline-block;
        background-image:url(../img/asirai.webp);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 80px;
        height: 80px;
        position:absolute;
        top: -30px;
        right: 60px;
        z-index: -1;
    }
    .info__schedule{
        max-width: 670px;
        height: auto;
        width: 100%;
        position: relative;
        margin-top: 0;
        grid-column: 2 / 2;
        grid-row: 1 / 5;
    }
    .info__schedule:after{
        content: "";
        display:inline-block;
        width: 100%;
        height: 100%;
        background-color: #F4F4F4;
        top: -30px;
        left: -30px;
        position: absolute;
        width: 110%;
        height: 110%;
        z-index: -2;
    }
    .info__textArea{
        display:flex;
        flex-direction: column;
        justify-content: center;
        margin-right:clamp(1.5rem,2vw,38px)
    }
}

/* ===============================================
# SHOP
=============================================== */
.shop{
    margin-top: 62px;
}
.shop__title > .section-title__main{
    text-align: center;
}
.swiper-shop{
    height: auto;
    padding-bottom: 30px;
}
@media (min-width: 768px) {
    .shop{
        margin-top: 162px;
    }
    .swiper-shop{
        margin-top: 52px;
    }
}

/* ===============================================
# 予約ボタン
=============================================== */
.reserve{
    margin-top: 70px;
}
.reserve__button{
    position: relative;
    color: #BAD874;
    width: 100%;
    max-width: 256px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #BAD874;
    display:inline-block;
}
.reserve__button:hover{
    background-color: #BAD8741F;
}
.reserve__button span{
    position: relative;
    display:flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
}
.reserve__button span:before{
    content: "";
    display:inline-block;
    background-image:url(../img/telephon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 18px;
    height: 18px;
}
.reserve__box{
    text-align: center;
}
.reserve__box > .section-title__main{
    text-align: center;
}
.reserve__link{
    text-align: center;
    margin-top: 28px;
}

.reserve__button{
    text-decoration: none;
}
@media (min-width: 768px) {
    .reserve{
        margin-top: 170px
    }
    .reserve__button{
        max-width: 390px;
    }
}
/* ===============================================
# リンクボタン
=============================================== */
.link-button{
    text-align: center;
}
.link-button span{
    display: inline-block;
    padding: 8px 72px;
    border:1px dotted;
    position: relative;
    font-family: "Bellota", system-ui;
    color:#6C8E2D;
    font-weight: 700;
}
.link-button span:before{
    content: "";
    display:inline-block;
    background-color: #F1F5EA;
    max-width: 178px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 15%;
    right:-5px;
    z-index: -1;
    transition: .5s;
}
.link-button span:hover:before{
    content: "";
    display:inline-block;
    background-color: #F1F5EA;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right:0;
    z-index: -1;
    transition: .2s;
}
.link-button span:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #9DBA67;
    border-right: 0;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}




/* ===============================================
# アクセス
=============================================== */
.access{
    position: relative;
    margin-top: 70px;
}

.access__map{
    text-align: center;
   grid-column: 1 / 4;
   margin-top: 50px;
}
.access__map iframe{
    width: 100%;
    height: 240px;
}
#yDmH0d{
    background-color: #fff;
}
.access-box__textArea{
    grid-row: 1 / 1;
   padding-right: 20px;
   padding-left: 20px;
}
.access-box__info{
    margin-top: 14px;
}
.access-box{
    display:grid;
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: auto;
}
.access-box__imgArea{
    grid-row:2 / 2;
    margin: auto;
}
.access-box__figure02{
    margin-top: -24px;
}
@media (min-width: 768px) {
    .access{
        margin-top: 162px;
    }
    .access:before{
        content: "";
        display: inline-block;
        max-width: 1080px;
        width: 100%;
        height: 480px;
        background-color: #BAD8741F;
        position: absolute;
        top: 7%;
        left: 0;
        transform: translate(0, 0%);
        z-index: -2;
    }
    .access-box__wrapper{
        margin-top: 56px;
        margin-left: auto;
        max-width: 527px;
    }
    .access__map{
        margin-top: 114px;
        text-align: center;
    }
    .access__map iframe{
        width:calc((1000 / 1440) * 100%)
    }
    .access-box__info{
        margin-top: 60px;
        grid-row: 1 / 1;
    }
    .access-box__textArea{
        /* width:calc((524 / 770) * 100%); */
        grid-row: 1 / 1;
        padding-inline: 2rem;
    }
    .access-box{
        justify-content: center;
        gap:20px;
        grid-template-columns: 1fr 1fr;
        max-width: 1200px;
        margin: auto;
    }
    .access-box__imgArea{
        grid-row: 1 / 2;

    }
    .access__map iframe{
        width: 90%;
        max-width: 1000px;
        height: 514px;
    }
}

/* ===============================================
# shop
=============================================== */
.shop-infoArea{
    display:flex;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom:2px solid #F4F4F4;
    border-radius: 10px;
    font-size: 14px;
}
.shop-infoArea:last-child {
    display: grid;
    grid-template-columns: auto 1fr;
}

.shop-infoArea:last-child > dt{
    grid-row: 1 / 2; /* 正しい範囲を指定 */
    grid-column: 1 / 2; /* 最初の列 */
}

.shop-infoArea:last-child > dd{
    grid-row: 1 / 2; /* 正しい範囲を指定 */
    grid-column: 2 / 3; /* 2列目 */
}

.shop-infoArea:last-child > dd:nth-child(3){
    grid-column: 2 / 3; /* 2列目に続けて配置 */
    grid-row:2 / 2
}

.shop-infoArea dt{
    width: 100px;
}
.shop-infoArea dd a{
    text-decoration: none;
    color: #000;
}
.shop-info__link{
    margin-top: 28px;
    font-size: 14px;
}
.shop-info__link a{
    color: #000;
}
.shop-info__link span{
    position: relative;
    width: 90%;
    display:inline-block;
    padding-right: 2rem;
}
.shop-info__link span:before{
    content: "";
    display:inline-block;
    background-image:url(../img/instag-icon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
}
.shop-info__link h3{
    padding: 4px;
    background-color: #BAD874;
    max-width: 210px;
    color: #fff;
    text-align: center;
    margin: auto;
}

.shop-info__link p{
    text-align: left;
    margin-top: -1rem;
    background-color: #F4F4F4;
    width: 100%;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    z-index: -1;
    font-size: 14px;
    text-align: center;
}
.shop-info__link p:before{
    content: "";
    border-top:1px solid #43B869;
    border-right:1px solid #43B869;
    padding-bottom: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
}
.shop-info__link p:after{
    content: "";
    border-bottom:1px solid #43B869;
    border-left:1px solid #43B869;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
}
.shop-info__price {
    display: block; /* dd をブロック表示に */
    margin-bottom: 0.5em; /* 下にスペースを追加して縦に並べる */
}
@media (min-width: 768px) {
    .shop-infoArea{
        padding-top: 14px;
        padding-bottom: 14px;
    }
}
/* ===============================================
# マップ
=============================================== */
.map__inner{
    text-align: center;
}

/* ===============================================
# インスタグラム
=============================================== */
.sns{
    margin-top: 66px;
    padding-bottom: 90px;
}
.sns-title__main{
    text-align: center;
}
.sns__items{
    display:grid;
    gap:20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4列で表示 */
}
.sns__item:nth-child(n+5) {
    display: none; /* 5枚目以降を非表示に */
}

.sns__item img{
aspect-ratio: 150 / 150;
height: auto;
}
.sns__itemArea{
    margin-top: 28px;
}
.sns__link{
    margin-top: 50px;
}
.sns__item{
    transition: .75s;
}
.sns__item:hover{
    opacity: .5;
}
@media (min-width: 768px) {
    .sns{
        margin-top: 162px;
        padding-bottom: 0;
    }
    .sns__itemArea{
        margin-top: 40px;
    }
    .sns__items{
        grid-template-columns: repeat(3, 1fr); /* 4列で表示 */
        gap: 30px 45px;
        max-width: 1000px;
        margin: auto;
    }
    .sns__link{
        margin-top: 56px;
        text-align: center;
    }
    .sns__item img{
        aspect-ratio: 250 / 250;
        height: auto;
        width: 100%;
    }
    .sns__item:nth-child(n+5) {
        display: block; /* 5枚目以降を非表示に */
    }
}
/* ===============================================
# ロゴアニメーション
=============================================== */
.opening{
    width: 100%;
    height: 100vh;
    position: relative;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.opening__mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #E9E9E9;;
    z-index: 102;
}
.opening__logo{
    display: block;
    width: 270px;
    height: 270px;
    z-index: 103;
    clip-path: inset(0 100% 0 0);/*予め切り取り*/
    transform: scale(1.1);/*予め大きくしておく*/
    opacity: 0;/*予め透明に*/
    object-fit: contain;
}
.zIndex{
    z-index: 0;
    visibility: hidden;
}

@media (min-width: 768px) {
    .opening__logo{
        display: block;
    }
}
/* ===============================================
# カレンダー文字
=============================================== */
.KF4T6b{
    font-size: 10px  !important;
}