@charset "UTF-8";
/*==============================================================================
1.ご希望の店舗をお選びください
2.詳細
3.フロアマップ
4.設備
5.料金目安
==============================================================================*/

/*============================================================================================================================================================
==============================================================================================================================================================

	1.ご希望の店舗をお選びください

==============================================================================================================================================================
============================================================================================================================================================*/
#choice{
    & p{
        text-align: center;

        & span{
            padding-bottom: 5px;
            display: inline-block;
            background: url(../1_img/base/border-dotted.svg) repeat-x left bottom / auto 2px;
            font-size: 1.2rem;
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
            letter-spacing: 0.2em;
        }
    }

    & ul{
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;

        & span,
        & a{
            padding: 5px 16px 5px 10px;
            display: inline-block;
            position: relative;
            border-radius: 5px;
            font-weight: var(--weight-bold);

            &::after{
                content:"";
                margin-top: -2px;
                position: absolute;
                width: 8px;
                height: 8px;
                top: 50%;
                right: 0;
                transform: translateY(-50%) rotate(135deg);
                border-top: 2px solid var(--color-accent);
                border-right: 2px solid var(--color-accent);
            }
        }

        & .current span{
            padding: 5px 13px;
            background-color: var(--color-accent);

            &::after{
                content: none;
            }
        }
    }
}
/*==============================================================================

	ご希望の店舗をお選びください PC

==============================================================================*/
@media all and (min-width: 769px) {

    #choice{
        & p{

            & span{
                padding: 0 10px 10px;
                background: url(../1_img/base/border-dotted.svg) repeat-x center bottom / auto 4px;
                font-size: 2.8rem;
            }
        }

        & ul{
            margin: 45px auto 0;
            width: 680px;
            gap: 20px;

            & span,
            & a{
                padding: 5px 34px 5px 20px;
                font-size: 3rem;

                &::after{
                    margin-top: -2px;
                    width: 16px;
                    height: 16px;
                    transform: translateY(-50%) rotate(135deg);
                }
            }

            & .current span{
                padding: 5px 27px;
                background-color: var(--color-accent);

                &::after{
                    content: none;
                }
            }
        }
    }

}



/*============================================================================================================================================================
==============================================================================================================================================================

	2.詳細

==============================================================================================================================================================
============================================================================================================================================================*/
#choice + #detail{
    margin-top: 40px;
}

#detail{
    /*======== タイトル =========*/
    & h2{
        text-align: center;
        font-size: 1.4rem;
        font-weight: var(--weight-bold);
    }

    /*======== メイン画像スライダー =========*/
    & .detail-main_slider{
        margin-top: 20px;

        & .img{
            aspect-ratio: 32 / 20;
            width: 100%;
            
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
        & .desc{
            margin-top: 20px;
            text-align: center;
        }

    }
    /*======== サムネイル =========*/
    & .detail-thumb_list{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        & button{
            width: calc( (100% - 20px) / 3);
            aspect-ratio: 16 / 9;

            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }

    /*======== マップ&アクセス =========*/
    & .detail-info{
        margin-top: 30px;
        background-color: var(--color-sub);

        & .inner{
            padding: 0;
        }

        /* map */
        & iframe{
            aspect-ratio: 36 / 16;
            width: 100%;
            height: auto;
        }

        /* 住所とアクセス */
        & .detail-access_wrap{
            padding: 30px 20px 20px;

            & .detail-address{
                padding: 0 10px;
            }

            & .detail-access{
                margin-top: 15px;
                padding: 15px 10px 0;
                border-top: 1px solid var(--color-font);

                & h3{
                    margin-bottom: 10px;
                    padding-left: 20px;
                    position: relative;
                    font-weight: var(--weight-bold);
                }
                & h3::before{
                    content: "";
                    width: 14px;
                    aspect-ratio: 14 / 20;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    background: url(../1_img/base/icon-map.svg) no-repeat center / 100% auto;
                }
            }
        }
    }

    /*======== リンクボタン =========*/
    & .btn-wrap{
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px 0;

        & a{
            padding: 0;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}


/*==============================================================================

	詳細 PC

==============================================================================*/
@media all and (min-width: 769px) {
    #choice + #detail{
        margin-top: 140px;
    }
    #detail{
        /*======== タイトル =========*/
        & h2{
            margin-top: 20px;
            text-align: center;
            font-size: 3rem;
        }

        /*======== サムネイル =========*/
        & .detail-thumb_list{
            margin-top: 20px;
            gap: 10px;

            & button{
                width: calc( (100% - 40px) / 5);
            }
        }

        /*======== マップ&アクセス =========*/
        & .detail-info{
            margin-top: 55px;
            position: relative;

            /* map */
            & iframe{
                position: absolute;
                top: 0;
                left: 0;
                aspect-ratio: unset;
                width: calc(50% - 40px);
                height: 100%;
            }

            /* 住所とアクセス */
            & .detail-access_wrap{
                margin-left: auto;
                padding: 60px 0px 60px 20px;
                width: 520px;
                min-height: 400px;

                & .detail-address{
                    padding: 0 20px;
                    font-size: 2.2rem;
                }

                & .detail-access{
                    margin-top: 30px;
                    padding: 30px 20px 0;
                    font-size: 2.2rem;

                    & h3{
                        margin-bottom: 10px;
                        padding-left: 30px;
                        font-size: 2.4rem;
                    }
                    & h3::before{
                        width: 20px;
                    }
                }
            }
        }

        /*======== リンクボタン =========*/
        & .btn-wrap{
            margin-top: 60px;
            flex-direction: row;
            justify-content: center;
            gap: 0px 30px;

            & a{
                width: 470px;
                height: 100px;
                font-size: 2.2rem;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	3.フロアマップ

==============================================================================================================================================================
============================================================================================================================================================*/
#floor{
    margin-top: 50px;
    padding: 80px 0 100px;
    position: relative;
    z-index: 2;
    background-color: var(--color-font);
    color: #fff;
    clip-path: polygon(50% 0, 100% 60px, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 60px);

    /*======== スライダー =========*/
    & .floor-slider{
        margin: 0 auto;
        width: calc(100% - 20px);

        & figure{
            position: relative;

            & img{
                width: 100%;
            }

            & figcaption{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                padding: 10px;
                color: var(--color-font);
            }
        }

        & .slick-arrow{
            background-color: #fff;

            &::after{
                border-color: var(--color-font);
            }
        }
    }
    /*======== インジケーター =========*/
    & .floor-slider-nav{
        margin-top: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;

        & li{
            width: calc( (100% - 20px) / 3 );
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 20px;
            background: #fff;
            color: var(--color-font);
            text-align: center;
            transition: 500ms;

            &.current {
                background: var(--color-accent);
            }
        }
    }
}

/*==============================================================================

	フロアマップ PC

==============================================================================*/
@media all and (min-width: 769px) {
    #floor{
        margin-top: 120px;
        padding: 130px 0 160px;
        clip-path: polygon(50% 0, 100% 130px, 100% calc(100% - 130px), 50% 100%, 0 calc(100% - 130px), 0 130px);

        /*======== スライダー =========*/
        & .floor-slider{
            width: calc(520px + 100px);
            padding: 0 50px;

            & figure{
                position: relative;

                & img{
                    width: 100%;
                }

                & figcaption{
                    text-align: center;
                    font-weight: var(--weight-bold);
                    font-size: 2.4rem;
                }
            }

            & .slick-arrow{
            }
        }

        /*======== インジケーター =========*/
        & .floor-slider-nav{
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;

            & li{
                width: calc( (100% - 80px) / 5 );
                padding: 5px 10px;
                border-radius: 40px;
                font-size: 2.7rem;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	4.設備

==============================================================================================================================================================
============================================================================================================================================================*/
#facility{
    margin-top: -60px;
    padding: 100px 0 90px;
    position: relative;
    z-index: 1;
    background-color: var(--color-sub);
    clip-path: polygon(100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 0);

    /*======== 設備リスト =========*/
    & ul{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        & li{
            padding: 20px 10px;
            width: calc( (100% - 10px) / 2 );
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background-color: #fff;

            & p{
                margin-top: 10px;
                text-align: center;
                font-family: var(--font-sub);
                font-size: 1.2rem;
                font-weight: var(--weight-bold);
                order: 2;
            }

            & img{
                width: 80px;
                order: 1;
            }
        }
    }

    /*======== ボタン =========*/
    & .btn-wrap{
        margin-top: 30px;
        text-align: center;
    }
}

/*==============================================================================

	設備 PC

==============================================================================*/
@media all and (min-width: 769px) {
    #facility{
        margin-top: -130px;
        padding: 260px 0 210px;
        clip-path: polygon(100% 0, 100% calc(100% - 130px), 50% 100%, 0 calc(100% - 130px), 0 0);

        /*======== 設備リスト =========*/
        & ul{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            & li{
                padding: 20px 10px 40px;
                width: calc( (100% - 60px) / 4 );

                & p{
                    font-size: 1.6rem;
                }

                & img{
                    width: 150px;
                    margin-top: 20px;
                }
            }
        }

        /*======== ボタン =========*/
        & .btn-wrap{
            margin-top: 60px;
        }
    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	5.料金目安

==============================================================================================================================================================
============================================================================================================================================================*/
#price {
    margin-top: -60px;
    padding: 100px 0 50px;

    /*======== 料金目安 =========*/
    & .store-price-table{
        border: 2px solid var(--color-font);

        & th,& td{
            padding: 15px 10px;
            width: 50%;
            border: 2px solid var(--color-font);
            text-align: center;
        }
        & th{
            background-color: var(--color-sub);
        }
        & td{

            &.price{
                font-weight: var(--weight-bold);
                color: var(--color-accent);
            }
        }
    }

    & .note{
        margin-top: 15px;
        text-indent: 1em;
        margin-left: -1em;
        text-align: center;
        font-size: 1.4rem;
    }

    /*======== ボタン =========*/
   /* & .btn-wrap{
        margin-top: 30px;
        text-align: center;
    } */
	
	& .btn-wrap{
        margin-top: 40px;
        text-align: center;

        & .catch{
            margin-bottom: 15px;
            text-align: center;

            & span{
                padding: 0 40px;
                display: inline-block;
                position: relative;
                font-size: 1.4rem;
                font-weight: var(--weight-bold);
                letter-spacing: 0.2em;

                &::before,
                &::after{
                    content: "";
                    width: 32px;
                    height: 3px;
                    position: absolute;
                    bottom: 10px;
                    background-image: url(../1_img/base/border-dotted.svg);
                    background-repeat: repeat-x;
                    background-size: auto 3px;
                }

                &::before{
                    left: 0;
                    transform: rotate(60deg);
                    background-position: left center;
                }
                &::after{
                    right: 0;
                    transform: rotate(-60deg);
                    background-position: right -3px center;
                }
            }
        }
    }
}

/*==============================================================================

	料金目安 PC

==============================================================================*/
@media all and (min-width: 769px) {
    #price {
        margin-top: -130px;
        padding: 260px 0 80px;
        overflow: hidden;


        /*======== 料金目安 =========*/
        & .store-price-table{
            margin: auto;
            width: 600px;

            & th{
                font-size: 2rem;
            }
            & td{
                font-size: 1.8rem;
            }
        }

        /*======== ボタン =========*/
        /*& .btn-wrap{
            margin-top: 60px;
        }*/
		
		 & .btn-wrap{
            margin-top: 90px;

            & .catch{
                margin-bottom: 35px;

                & span{
                    padding: 0 70px;
                    font-size: 2.8rem;

                    &::before,
                    &::after{
                        width: 54px;
                        height: 6px;
                        bottom: 20px;
                        background-size: auto 6px;
                    }

                    &::before{
                        left: -15px;
                        background-position: left center;
                    }
                    &::after{
                        right: -15px;
                        background-position: right -6px center;
                    }
                }
            }

            & a{
                width: 460px;
                font-size: 2.4rem;
            }
        }
    }
}




/*============================================================================================================================================================
==============================================================================================================================================================

	追加.banner

==============================================================================================================================================================
============================================================================================================================================================*/
.banner{
    margin-top: 40px;
    text-align: center;
}
@media all and (min-width: 769px) {
    .banner{
        margin-top: 55px;

        & img{
            width: 100%;
        }
    }
}