@charset "UTF-8";

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

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

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

/* SP用CSSの記述 */
.container > .inner{ max-width: 1600px; margin: 0 auto; }



h1{
    position: absolute;
    top: -1000px;
}


.pc__area__content{
    display: block;
}

.sp__area__content{
    display: none;
}

/* top-回転内容 */


.clearfix:after { 
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6A7‘΍ô*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x‘΍ô*/
	height: auto;
	overflow: hidden;
	/**/
}
img {vertical-align:bottom;}
a img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 1;
	filter: alpha(opacity=70);
}





.demozone {
	width: 100%;
	max-width: 1600px;
	margin: auto;

}






.randumarea {width: 100%; margin-bottom: 60px;}
.randumarea .randumareaitem {padding: 5%; background: #aaa; margin-bottom: 20px; text-align: center; font-size: 18px;}
.randumarea .randumareaitem span {font-size: 130%; font-weight: bold; display: block; margin-bottom: 0px;}
.randumarea .randumareaitem.randum01__item {background: #f79494;}
.randumarea .randumareaitem.randum02__item {background: #94c1f7;}


.pc__area__content .top-content{
    width: 100%;
    max-width: 1600px;
    margin: auto;
    background: url(../images/pc/pc-top-bg.png) top center;
    height: 980px;
    /* position: relative; */
	overflow: hidden;
    /* position: relative; */
}


.top-center-area{
    width: 100%;
    max-width: 990px;
    margin: auto;
    position: relative;
    height: 980px;
}



.main__title__content {
	position: relative;
	width: 990px;
	margin: auto;
    
}
.main__title__circle01 {
	position: absolute;
    top: -36px;
    left: -494px;
	z-index: -1;
    animation: obal_bg01 72s linear forwards infinite;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.main__title__circle01 img {
	animation: obal_bgimg01 65s linear forwards infinite;
}

.main__title__circle02 {
    position: absolute;
    top: -130px;
    right: -480px;
    z-index: -1;
    animation: obal_bg01 72s linear forwards infinite;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.main__title__circle02 img {
	animation: obal_bgimg01 65s linear forwards infinite;
}

.main__title__circle03 {
	position: absolute;
    top: 217px;
    left: 116px;
	z-index: -1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.main__title__circle04 {
    position: absolute;
    top: 516px;
    right: -276px;
    z-index: -1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



@keyframes obal_bg01 {
	0% {
	  -webkit-transform: translate(0, 0) rotate(0deg);
	  transform: translate(0, 0) rotate(0deg);
	}

	50% {
	  -webkit-transform: translate(-80px, 30px) rotate(180deg);
	  transform: translate(-80px, 30px) rotate(180deg);
	}

	100% {
	  -webkit-transform: translate(0, 0) rotate(360deg);
	  transform: translate(0, 0) rotate(360deg);
	}
}





@keyframes obal_bgimg01 {
	0% {
	  -webkit-transform: translate(0, 0) rotate(0deg) scale(1);
	  transform: translate(0, 0) rotate(0deg) scale(1);
	}

	10% {
		-webkit-transform: scale(1.02,1.311134);
		transform: scale(1.02,1.311134);
	}

	20% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	30% {
		-webkit-transform: scale(1.07,1.311134);
		transform: scale(1.07,1.311134);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.02,1.311134);
		transform: scale(1.02,1.311134);
	}

	60% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	70% {
		-webkit-transform: scale(1.07);
		transform: scale(1.07);
	}

	80% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	90% {
		-webkit-transform: scale(1.02);
		transform: scale(1.02);
	}

	100% {
	  -webkit-transform:scale(1);
	  transform:scale(1);
	}
}



/* top回転　終わり */













.pc__area__content{
    width: 100%;
    max-width: 1600px;
    min-width: 1100px;
    margin: auto;
}



.item-content{
    width: 990px;
    margin: auto;
    position: relative;
}


.pc__area__content .main-content{
    width: 100%;
    background: url(../images/pc/pc-cont-bg.png) top center;
    height: 3070px;
}


.pc__area__content .map-content{
    width: 100%;
    background: url(../images/pc/pc-map-bg.png) top center;
    height: 850px;
}

.top-content .item-content{
    height: 980px;
    position: relative;
}

.main-content .item-content{
    height: 3070px;
    position: relative;
}

.map-content .item-content{
    position: relative;
    height: 850px;
}


.item-content .item{
    position: absolute;
}

.top-center-area .item#top-1{
    position: absolute;
    top: 62px;
    left: 454px;
    z-index: 1000;
    
    
}

.top-center-area .item#top-relax{
    position: absolute;
    top: 370px;
    left: 118px;
    z-index: 1000;

}

.top-center-area .item#top-2{
    position: absolute;
    bottom: 65px;
    left: 155px;
    opacity: 0;
    z-index: 1000;
}


.item-content .item#item01{
    
    top: 167px;
    left: 33px;
}

.item-content .item#item02{
    
    top: 194px;
    left: 503px;
}

.item-content .item#item03{
    top: 686px;
    left: 162px;
}

.item-content .item#item04{
    top: 1203px;
    right: -36px;
}

.item-content .item#item05{
    top: 1590px;
    left: 173px;
}

.item-content .item#item06{
    top: 1924px;
    left: -17px;
}

.item-content .item#item07{
    top: 1942px;
    right: -24px;
}

.item-content .item#item08{
    top: 2353px;
    left: -35px;
}

.item-content .item#item09{
    top: 2469px;
    right: 1px;
}

.item-content .item#premium{
    top: 2980px;
    left: 260px;
    opacity: 0;
    

}

.item-content#main-area .item:hover{
    opacity: 0.8;
    transition: 0.7s;

}


    
    




.top-center-area .item#top-2:hover{
    opacity: 1;
    transition: 0.7s;
    z-index: 999;
    background: #fff;
    border-radius: 100px;

}

.item-content .item#premium:hover{
    opacity: 1;
    transition: 0.7s;
    background: #fff;
    border-radius: 10px;
}

.map-btn-area{
    display: flex;
    
}

.map-btn-area#area1{
    position: relative;
    top: 519px;
    left: 183px;
    width: 800px;
    flex-wrap: wrap;
}

.map-btn-area#area1 .map-btn{
    margin-right: 18px;
    margin-bottom: 8px;
    opacity: 0;
}

.map-btn-area#area1 .map-btn:hover{
    opacity: 10;
    transition: 0.7s;
    background: #fff;

}



.map-btn-area#area2{
    position: relative;
    width: 970px;
    margin: auto;
    top: 630px;
    justify-content: space-between;
    flex-wrap: wrap;
    

}

.map-btn-area#area2 .map-btn:hover{
    opacity: 0.7;
    transition: 0.7s;

}




.slidearea__wrap div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 341px;
    width: 1000px;
    
    margin: 0;
  }
  .slidearea__wrap div.slide01 {
    background: url(../images/pc/slide1.png) no-repeat top center;
    
    width: 100%;
  }
  .slidearea__wrap div.slide02 {
    background: url(../images/pc/slide4.png) no-repeat top center;
    
    width: 100%;
  }
  .slidearea__wrap div.slide03 {
    background: url(../images/pc/slide3.png) no-repeat top center;
    
    width: 100%;
  }

  .slidearea__wrap div.slide04 {
    background: url(../images/pc/slide2.png) no-repeat top center;
    
    width: 100%;
  }


  .top-content .slidearea {
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 130px;
    right: -308px;
    z-index: 9;
  }


  .slick-arrow {
    display:none !important;}

    .freeareacontent .slick-initialized .slick-slide img {
        width: 100%;
        height: auto;
    }


    






/* PC、Tablet用CSSの記述 */
@media (max-width:768px){


    body{
        min-width: 750px;
        max-width: 750px;
        margin: auto;
    }


.pc__area__content{
    display: none;
}

.sp__area__content{
    display: block;
    width: 100%;
    max-width: 768px;
    margin: auto;
}



.sp__area__content .item-content{
    width: 100%;
    margin: auto;
    position: relative;
}

.sp__area__content .top-content{
    width: 100%;
    max-width: 1600px;
    margin: auto;
    background: url(../images/sp/sp-top-bg.png) top center no-repeat;

    height: 1814px;
    /* position: relative; */
	overflow: hidden;
    /* position: relative; */
}



.sp__area__content .main-content{
    width: 100%;
    background: url(../images/sp/sp-content-bg.png) top center no-repeat;
    height: 5962px;
   
}


.sp__area__content .map-content{
    width: 100%;
    background: url(../images/sp/sp-map-pc.png) top center no-repeat;
    height: 2340px;
    
}





.top-center-area#sp-mode .slidearea__wrap div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 350px;
    width: 100%;
    
    
    margin: 0;
  }
  .top-center-area#sp-mode .slidearea__wrap div.slide01 {
    background: url(../images/sp/slide01.png) no-repeat top center;
    
    width: 100%;
  }
  .top-center-area#sp-mode .slidearea__wrap div.slide02 {
    background: url(../images/sp/slide02.png) no-repeat top center;
    
    width: 100%;
  }
  .top-center-area#sp-mode .slidearea__wrap div.slide03 {
    background: url(../images/sp/slide03.png) no-repeat top center;
    
    width: 100%;
  }

  .top-center-area#sp-mode .slidearea__wrap div.slide04 {
    background: url(../images/sp/slide04.png) no-repeat top center;
    
    width: 100%;
  }


  .sp__area__content .top-content .slidearea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 176px;
    right: 0px;
    z-index: 9;
  }


  .sp__area__content .slick-arrow {
    display:none !important;}

    .sp__area__content .freeareacontent .slick-initialized .slick-slide img {
        width: 100%;
        height: auto;
    }


    .top-center-area#sp-mode {
        width: 100%;
        max-width: 100%;
        margin: auto;
        position: relative;
        height: 1814px;
    }


    







    .map-btn-area{
        display: flex;
        
    }
    
    .map-btn-area#area1{
        position: relative;
        width: 580px;
        flex-wrap: wrap;
        justify-content: space-between;
        top: 1494px;
        left: 97px;
    }
    
    .map-btn-area#area1 .map-btn{
        margin-right: 0px;
        margin-bottom: 18px;
        opacity: 0;
    }
    
    .map-btn-area#area1 .map-btn:hover{
        opacity: 1;
        transition: 0.7s;
        background: #fff;
    
    }
    
    
    
    .map-btn-area#area2{
        position: relative;
        width: 680px;
        margin: auto;
        top: 1595px;
        justify-content: space-between;
        flex-wrap: wrap;
            
    }

    .map-btn-area#area3{
        position: relative;
        width: 680px;
        margin: auto;
        top: 1765px;
        justify-content: space-between;
        flex-wrap: wrap;
            
    }


    
    .map-btn-area#area2 .map-btn:hover{
        opacity: 0.7;
        transition: 0.7s;
    
    }

    .map-btn-area#area3 .map-btn:hover{
        opacity: 0.7;
        transition: 0.7s;
    
    }

    .copyright {
        max-width: 768px;
    }

    



    .top-center-area .item#top-relax {
        position: absolute;
        top: 510px;
        left: 169px;
        z-index: 1000;
    }

    .top-center-area .item#top-1 {
        position: absolute;
        top: 96px;
        left: 233px;
        z-index: 1000;
    }

    .top-center-area .item#top-2 {
        position: absolute;
        bottom: 318px;
        left: 30px;
        opacity: 0;
        z-index: 1000;
    }

    .main-content#sp-mode .item#item04{
        margin-top: 239px;
    }

    .main-content#sp-mode .item#item06{
        margin-top: 169px;
    }

    .main-content#sp-mode .item#item08{
        z-index: 999;
    }



    .main-content#sp-mode .item#item09{
        margin-top: -69px;
    }

    .main-content#sp-mode .item a{
        display: block;
    }

    .main-content#sp-mode .item a:hover{
        opacity: 0.7;
        transition: 0.7s;
    }

    .main-content#sp-mode .item-sp#premium{
       display: block;
        text-align: center;
        margin-top: 468px;
        opacity: 0;


    }

    .main-content#sp-mode .item-sp#premium:hover{
        transition: 0.7s;
        opacity: 1;

    }

    .main__title__circle01 {
        position: absolute;
        top: 389px;
        left: -150px;
        z-index: -1;
        animation: obal_bg01 72s linear forwards infinite;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }

    .main__title__circle02 {
        position: absolute;
        top: -88px;
        right: 45px;
        z-index: -1;
        animation: obal_bg01 72s linear forwards infinite;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .main__title__circle03 {
        position: absolute;
        top: 575px;
        left: 108px;
        z-index: -1;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .main__title__circle04 {
        position: absolute;
        top: 176px;
        right: 164px;
        z-index: -1;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    
    
    
    





}