@charset "utf-8";

* {
  box-sizing: border-box;
}

html, body{
    box-sizing: border-box;
}

img{
    display: block;
    width: 100%;
}

h2{
    margin: 0;
}

.bg-image{
/*    background-image: url("../images/kv.webp");*/
    background-size: contain;
    background-attachment: fixed;
    background-color: #187fc4
}

.wrapper{
    max-width: 1200px;
    margin: 0 auto;
    
}

.pc{
    display: block;
}

.sp{
    display: none;
}

/*ナビゲーション*/
.nav-area{
    padding: 7.9%;
}
.nav-fixed{
    width: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    z-index: 10;
}

.key-vj{
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
}
.kv-overray{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 127, 198, 0.02);
}

/*メインロゴ*/
#main-logo{
    position: relative;
}
.logo-pos01{
    width: 14.4%;
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50% , 0);
}
.logo-pos02{
    width: 74.5%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
    transition: all ease .8s;
}

/*リニューアルスケジュール*/
#renewal-schedule{
    position: relative;
}
.schedule-pos{
    width: 24%;
    position: absolute;
    top: 76%;
    right: 6%;
    z-index: 1;
}

/*トピック*/

#toics{
    position: relative;
}

.topics-title{
    position: relative;
}
.topic-pos{
    width: 19.5%;
    position: absolute;
/*   bottom: -14%; */
    left: 20%;
    z-index: 1;
}
/*ハート型01*/
.topic01{
    position: relative;
}
.topic-pos01{
    width: 38.4%;
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}
.topic-pos02{
    width: 16%;
    position: absolute;
    top: 1%;
    right: 23%;
}
.topic-pos03{
    width: 21.6%;
    position: absolute;
    top: 20%;
    left: 60%;
}
.topic-pos04{
    width: 27%;
    position: absolute;
    bottom: 6%;
    left: 7%;
}
/*スライダー*/
.slider-wrapper {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translateX(-50%);
    width: 59%;
    height: 39%;
    overflow: visible;
}

.slider {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.slick-list {
    height: 59.3%;
    border-radius: 27px;
}
.slider .slick-slide {
    height: 100%;
}
.slick-dots {
    bottom: 35%;
    z-index: 1;
}
.slick-dots li button:before {
    color: #c9caca;
    opacity: 0.6;
    font-size: 13px;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #727171;
}

/*ハート型02*/
.topic02{
    position: relative;
}
.topic02-nav{
    position: absolute;
    top: 15%;
    display: flex;
    width: 50%;
    left: 50%;
    /* margin: 0 auto; */
    transform: translateX(-50%);
    justify-content: space-between;
}
.topic02-nav a{
/*    width: 15.8%;*/
    width: 31.6%;
}
.topic-pos05{
    width: 38.4%;
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
}
.topic-pos06{
    width: 17.8%;
    position: absolute;
    top: 4%;
    right: 19%;
}
.topic-pos07{
    width: 16.6%;
    position: absolute;
    top: 22%;
    left: 13%;
}
.topic-pos08{
    width: 13%;
    position: absolute;
    bottom: 30%;
    right: 13%;
    
}
.topic-pos09{
    width: 52%;
    position: absolute;
    bottom: 32px;
    left: -1%;
}


/*リニューアルニュース*/
#renewal-news{
    position: relative;
}
.news-pos{
    width: 24%;
    position: absolute;
    top: 30.9%;
    right: 1%;
}

/*その他*/
#other{
    position: relative;
}
.other-pos{
    width: 100%;
    position: absolute;
    top: 3%;
    transform: scale(0.5);
    opacity: 0;
    transition: all ease .8s;
}

footer{
    background-color: #fff;
}

/*トップに戻るボタン*/
.top-btn{
    width: 20%;
    max-width: 90px;
    min-width: 60px;
    display: block;
    position: fixed;
    bottom: 5%;
    right: 6%;
    z-index: 10;
}
.top-btn img{
    width: 100%;
}

/*アニメーション*/

/*ふわふわ*/
.float{
    animation: floatAnime 1.5s ease-in-out infinite  alternate;
}
.float-rev{
    animation: floatAnimeReverse 1.5s ease-in-out infinite  alternate;
}


@keyframes floatAnime{
    0%{
        transform: translateY(-12px);
    }
    100%{
        transform: translateY(12px);
    }
}

@keyframes floatAnimeReverse{
    0%{
    transform: translateY(15px);
    }
    100%{
        transform: translateY(-15px);
    }
}


/*ボワっと*/
.scale-active{
    transform: translate(-50% , 0) scale(1);
    opacity: 1;
}
.scale-active02{
    transform: scale(1);
    opacity: 1;
}


/*ボヨン*/
.bound-active{
    animation: bound 1.5s ease .8s ;
}
.bound-active01{
    animation: bound .7s ease-out 1;
}
@keyframes bound{
    0%   { transform: translate(-50% , 0) scale(1); }
    20%  { transform: translate(-50% , 15px) scale(1.15, 0.85); }  /* つぶれる */
    35%  { transform: translate(-50% , -10px) scale(0.9, 1.1); }    /* 上へ弾む1 */
    50%  { transform: translate(-50% , 10px) scale(1.05, 0.95); }  /* 戻る途中 */
    65%  { transform: translate(-50% , -5px) scale(0.97, 1.03); }  /* 小さく弾む2 */
    80%  { transform: translate(-50% , 5px) scale(1.02, 0.98); }  /* 小さく弾む3 */
    100% { transform: translate(-50% , 0) scale(1); }          /* 元に戻る */
}