@charset "utf-8";

/* 
===================== 1.Universal reset ==========================
*/
img {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	height:auto;
}
.clear{clear: both;}
.word{display: inline-block;}

/* 
===================== 2.Body and base setting ====================
*/
body{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-display:swap;/* Webフォントが読み込まれるまでフォールバックフォントで表示 */ 
	margin: 0;
	padding: 0;
	color: #663333;
	text-align: center;
	/*overflow-x: hidden;*/
}
.wrap {
	width:100%;
	margin: 0 auto;
	padding: 0;
}
a:link{
    text-decoration: none;
    color: #e75397;
}
a:visited{
	color: inherit;
}
a:hover{
	color: inherit;
}
a:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: “alpha( opacity=80 )”;
}
section{
	padding: 3rem 0;
	position: relative;
	}
	@media screen and (max-width:768px){
		section {
			padding: 5rem 0 3rem;
		}
	 }

/* 
===================== 3.Common setting ====================
*/
.BgImage{
	background-image: url(../img/bg.png);
	background-position:center;
	background-repeat:repeat;
	background-size: 800px;
	}
    @media screen and (max-width:768px){
		.BgImage {
			background-size: 500px;
		}
   	 }

.line{
	width:100%;
	margin:0;
	padding: 0 0 10rem;
	border:0;
	background-image: url(../img/line.png);
	background-position:bottom center;
	background-repeat:repeat-x;
	background-size: 700px;
	position: absolute;
	}
    @media screen and (max-width:767px){
		.line {
			padding-bottom: 30%;
			background-size: 550px;
		}
   	 }

.contents-wrap {
	padding:0;
	background: rgb(255,247,153);
	background: linear-gradient(180deg, rgba(255,247,153,1) 0%, rgba(255,247,153,1) 35%, rgba(200,231,242,1) 65%, rgba(176,217,247,1) 100%);
	}

.container {
	width:100%;
	max-width:1400px;
	margin:auto;
	position: relative;
	}

figure{margin: unset;}
.firework01,.firework02,.firework03,.firework04{
	position: absolute;
	}
	#top .firework01{
		width:19%;
		top:24%;
		left:7%;	
		}
	#top .firework02{
		width:20%;
		top:13%;
		right:19%;
		}
	#top .firework03{
		width:13%;
		top:2%;
		left:28%;
		}
	#top .firework04{
		width:15%;
		top:29%;
		right:13%;
		}
		@media screen and (max-width:768px){
			#top .firework01{
				width:25%;
				top:1%;
				left:7%;
			}
			#top .firework02{
				width:26%;
				top:20%;
				right:5%;
			}
			#top .firework03{
				width:15%;
				top:25%;
				left:2%;
			}
			#top .firework04{
				width:19%;
				top:2%;
				right:12%;
			}
		}
	#intro .firework01{
		width:20%;
		top:-6%;
		left:1%;	
		}
	#intro .firework02{
		width:20%;
		top:1%;
		right:2%;
		}
	#intro .firework03{
		width:12%;
		top:9%;
		left:17%;
		}
	#intro .firework04{
		width:15%;
		top:-5%;
		right:16%;
		}
		@media screen and (max-width:768px){
			#intro .firework01{
				width:29%;
				top:-2%;
				left:1%;
			}
			#intro .firework02{
				width:27%;
				top:11%;
				right:2%;
			}
			#intro .firework03{
				width:20%;
				top:18%;
				left:3%;
			}
			#intro .firework04{
				width:20%;
				top:0%;
				right:16%;
			}
		}
	#figure .firework01{
		width:20%;
		top:-2%;
		left:2%;	
		}
	#figure .firework02{
		width:19%;
		top:11%;
		right:2%;
		}
	#figure .firework03{
		width:16%;
		top:14%;
		left:14%;
		}
	#figure .firework04{
		width:18%;
		top:-5%;
		right:12%;
		}
		@media screen and (max-width:768px){
			#figure .firework01{
				width:29%;
				top:3%;
				left:2%;
			}
			#figure .firework02{
				width:27%;
				top:7%;
				right:2%;
			}
			#figure .firework03{
				width:24%;
				top:12%;
				left:14%;
			}
			#figure .firework04{
				width:25%;
				top:1%;
				right:19%;
			}
		}
	#attraction .firework01{
		width:20%;
		top:-5%;
		left:2%;	
		}
	#attraction .firework02{
		width:20%;
		top:3%;
		right:1%;
		}
	#attraction .firework03{
		width:14%;
		top:12%;
		left:14%;
		}
	#attraction .firework04{
		width:14%;
		top:-5%;
		right:15%;
		}
		@media screen and (max-width:768px){
			  #attraction .firework01{
				  width:29%;
				  top:2%;
				  left:2%;
			  }
			  #attraction .firework02{
				  width:26%;
				  top:9%;
				  right:1%;
			  }
			  #attraction .firework03{
				  width:22%;
				  top:15%;
				  left:0%;
			  }
			  #attraction .firework04{
				  width:24%;
				  top:0%;
				  right:20%;
			  }
		  }
	#recommend .firework01{
		width:18%;
		top:-5%;
		left:1%;	
		}
	#recommend .firework02{
		width:16%;
		top:-1%;
		right:1%;
		}
	#recommend .firework03{
		width:16%;
		top:-6%;
		left:15%;
		}
	#recommend .firework04{
		width:13%;
		top:-6%;
		right:12%;
		}
		@media screen and (max-width:768px){
			#recommend .firework01{
				width:30%;
				top:-4%;
				left:1%;
			}
			#recommend .firework02{
				width:30%;
				top:-3%;
				right:2%;
			}
			#recommend .firework03{
				width:22%;
				top:-3%;
				left:26%;
				bottom:unset;
			}
			#recommend .firework04{
				width:28%;
				top:-4%;
				right:27%;
				bottom:unset;
			}
		}
.title {
	width:100%;
    max-width:800px;
	margin: 0 auto;
	position:relative;
	z-index: 2;
	}   
	.title span{
		display:block;
		font-size: calc(.75rem + 1 * (100vw - 430px)/170);
		right:0;
		left:0;
		bottom:18%;
		position:absolute;
	}
.inner{
    width:90%;
    max-width:1000px;
    margin: auto;
	position:relative;
	z-index: 2;
    }


/*================ Animetion ===============*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
/* 2つ目の要素に200msのdelayをかける */
#effect2 > div .fadein:nth-of-type(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
    }
/* 3つ目の要素に400msのdelayをかける */
#effect2 > div .fadein:nth-of-type(3) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
    }

/* アニメーション ふわふわ上下する */  
.fuwafuwa{animation: 5s fuwafuwa infinite;}
    @keyframes fuwafuwa {
      0%, 100% {transform: translateY(0);}
      50% {transform: translateY(-10px);}
    }

.fuwafuwa2{
    animation: 5s fuwafuwa2 infinite;
    animation-delay: -2s;
    }
    @keyframes fuwafuwa2 {
      0%, 100% {transform: translateY(0);}
      50% {transform: translateY(-10px);}
    }

.fuwafuwa3{animation: 4s fuwafuwa3 infinite;}
    @keyframes fuwafuwa3 {
      0%, 100% {transform: translateY(0);}
      50% {transform: translateY(-15px);}
    }
/* アニメーション ゆらゆら */ 
.yurayura {
    animation: yurayura 3s infinite ease-in-out .8s alternate;
    /*background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;*/
    display: inline-block;
    transition: 1.5s ease-in-out;
    }
    @keyframes yurayura {
        0% {transform:translate(0, 0) rotate(-7deg);}
        50% {transform:translate(0, -7px) rotate(0deg);}
        100% {transform:translate(0, 0) rotate(7deg);}
    }
/* 
===================== Section setting ====================
*/
#top {
	padding: 0;
	background: rgb(0,168,233);
	background: linear-gradient(180deg, rgba(0,168,233,1) 0%, rgba(255,247,152,1) 80%);
	}
    @media screen and (max-width:768px){
		#top {
			padding: .5rem 0 0;
		}
    }
	#top .container {
		width:100%;
		max-width:1920px;
		margin:auto;
		position: relative;
		}
		@media screen and (max-width:768px){
			#top .container {
				width:100%;
			}
		 }
	#top h1{
		margin: 0;
		padding: 0;
		line-height:0;
		}
	/*#top picture{
		line-height:0;
		vertical-align: bottom;
		}*/
	#top .popup{
		width: 28%;
		max-width: 530px;
		top:9%;
		left:13%;
		position: absolute;
		}
		@media screen and (max-width:768px){
			#top .popup {
				width: 41%;
				top:13%;
				left:0%;
				/*transform:rotate(5deg);*/
			}
		 }

.logo{
    width: 20%;
    max-width: 360px;
    top:3%;
    left:3%;
    position: absolute;
    }
    @media screen and (max-width:768px){
        .logo {
            width: 35%;
        }
     }
	.logo a:hover img{
		opacity:1;
		filter:alpha(opacity=100);
		-ms-filter: “alpha( opacity=100 )”;
	}
/*================ intro ===============*/
#intro {
	margin:0rem auto 0;
	padding:0;
	}
	@media screen and (max-width:768px){
		#intro {
			margin:0 auto 0;
			padding:0;
		}
	}
	#intro .container {
		padding: 3rem 0 0;
		}
		@media screen and (max-width:768px){
			#intro .container {
				width:100%;
			}
		 }
	#intro .title{
		width:55%;
		margin-top:-7%;
/*		top:91%;
		left:0;
		right:0;
		box-sizing:border-box;
		position:absolute;
		z-index:1;*/
		}
		@media screen and (max-width:768px){
			#intro .title {
				width: 90%;
				margin:-7% auto -3%;
			}
		 }
/*---- YouTube ----*/
.video-box{
	width:100%;
	max-width:1000px;
	margin:2rem auto;
    }
.video{
    height: 0;
    overflow: hidden;
	position:relative;
	padding-top:56.3%;/*56.25%*/
	border:5px solid #7f4899;
	box-sizing: border-box;
	border-radius: 2vw;
	box-shadow:0px 0px 5px #fff;
    }
	@media screen and (max-width:768px){
		.video {
			padding-top:54.3%;
			border:4px solid #7f4899;
		}
	}
.video-box .video iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	border:0;
}
/*================ figure ===============*/
#figure{
	padding: 0rem 0 2rem;
	}
	@media screen and (max-width:768px){
          #figure{
              padding: 0rem ;
          }
    }
	#figure .title{
		width: 95%;
	}
	#figure .container {
		padding: 4rem 0 0rem;
		}
		@media screen and (max-width:768px){
			#figure .container {
				width:100%;
				padding: 3.5rem 0 1rem;
			}
		 }
	#figure .inner{
		background:url(../img/figure-bg.png);
		background-size:contain;
		background-repeat: no-repeat;
		background-position: center;
		}
		@media screen and (max-width:768px){
			#figure .inner{
				background:url(../img/figure-bg-sp.png);
				background-size:100%;
				background-repeat: no-repeat;
				background-position: center;
			}
		}
	#figure .flexBox{
		flex-wrap:nowrap;
		justify-content:left;
		padding: 0% 6% 0%;
		box-sizing:border-box;	
		}
		@media screen and (max-width:768px){
			#figure .flexBox{
				flex-wrap:wrap;
				padding: 24% 10%;
			}
		}
	#figure picture{
		padding: 8rem 2rem 5rem 3rem ;
		box-sizing: border-box;
		}
		@media screen and (max-width:768px){
			#figure picture{
				width:60%;
				margin: 0 auto;
				padding: 8% 0 30%;
			}
		}
.baby1{order: 1;}
.baby2{order: 2;}
.baby3{order: 3;}
.baby4{order: 4;}
.baby5{order: 5;}
		@media screen and (max-width:768px){
			.baby1{order: 4;}
			.baby2{order: 1;}
			.baby3{order: 2;}
			.baby4{order: 3;}
			.baby5{order: 5;}
		}
/*================ attraction ===============*/
#attraction{
	display: flex;
	padding:10rem 0 0;
	}
    @media screen and (max-width:768px){
		#attraction {
			padding:0rem;
		}
	}
	#attraction .title{
		width: 90%;
		max-width: 1000px;
		}
		@media screen and (max-width:768px){
			#attraction .title {
				width: 90%;
			}
		 }
	#attraction .container {
		width:100%;
		padding: 3rem 0 0;
		}
		@media screen and (max-width:768px){
			#attraction .container {
				padding: 3rem 0 2rem;
			}
		 }
	#attraction .inner{
		width:100%;
		max-width:none;
		}
.castle{
	width:65%;
	max-width:1000px;
	margin:2rem auto 10rem;
	}
    @media screen and (max-width:768px){
		.castle {
			width:100%;
			margin:0 auto;
		}
	}

.attBox{
	}
    @media screen and (max-width:768px){
		.attBox {
			display: flex;
			flex-wrap: wrap;
		}
	}

.att{
	position:absolute;
	transition: transform .3s ease;
	}
	.att:hover {
		transform: scale(1.1);
	}
	.att.__01{
		width:18%;
		top:-5%;
		left:23%;
	}
	.att.__02{
		width:29%;
		top:13%;
		left:1%;
	}
	.att.__03{
		width:32%;
		top:62%;
		left:3%;
	}
	.att.__04{
		width:15%;
		bottom:-21%;
		left:35%;
	}
	.att.__05{
		width:15%;
		bottom:-18%;
		left:51%;
	}
	.att.__06{
		width:35%;
		top:-3%;
		right:9%;
	}
	.att.__07{
		width:34%;
		top:52%;
		right:2%;
	}

	@media screen and (max-width:768px){
			.att.__01 {
				width:18%;
				top:12%;
				left:14%;
			}
			.att.__02 {
				width:20%;
				top:27%;
				right:3%;
			}
			.att.__03 {
				width:26%;
				top:60%;
				left:3%;
			}
			.att.__04 {
				width:23%;
				top:92%;
				left:23%;
			}
			.att.__05 {
				width:23%;
				top:92%;
				left:53%;
			}
			.att.__06 {
				width:22%;
				top:6%;
				right:7%;
			}
			.att.__07{
				width:18%;
				top:24%;
				right:2%;
			}
		} 

/*================ Recommend ===============*/ 
#recommend {
	padding:10rem 0 3rem;
	margin-bottom:-1px;
	}
	@media screen and (max-width:768px){
		#recommend {
			padding:9rem 0 2rem;
		}
	}
	#recommend .title {
		width: 95%;
		max-width: 650px;
		margin: 2rem auto;
		}
		@media screen and (max-width:768px){
			#recommend .title {
				margin: .3rem auto;
			}
		}
	#recommend .inner{
		max-width:1300px;
		}
	#recommend .ec-modal-window-box button{
		width:100% !important;
	}

.layout {
	display: flex;
    margin: 1rem auto;
    }
    @media screen and (max-width:768px){
        .layout {
            display: block;
			margin: 0 auto;
        }
    }
	.layout img{
		padding: 0 1rem 0 0;
		box-sizing: border-box;
		}
		@media screen and (max-width:768px){
			.layout img{
				padding: 0 0 .5rem;
			}
		}

.flexBox{
	display: flex;
	flex-wrap:wrap;
	}
	#recommend .flexBox{
		width:97%;
		margin:auto;
		justify-content:start;
	}
	.flexBox.col4 > div {
		width:25%;
		padding:1rem .5rem;
		box-sizing:border-box;
		}
		@media screen and (max-width: 820px){
			.flexBox.col4 > div {
				width:33%;
				padding:.6rem .4rem;
			}
		} 
		@media screen and (max-width:768px){
			.flexBox.col4 > div {
				width:50%;
				padding:.6rem .25rem;
			}
		} 
	.flexBox.col3 > div {
		width:33%;
		padding:1rem .5rem;
		box-sizing:border-box;
		}
		@media screen and (max-width:768px){
			.flexBox.col3 > div {
				width:50%;
			}
		} 

 .productBox {
	 background-color: #FFF;
	 border:solid 1px #FFF;
	 border-radius: 1em;
	 box-shadow: 5px 5px 0px #9c95ed40;
	}
	@media screen and (max-width:768px){
		.productBox {
			box-shadow: 4px 4px 0px #9c95ed40;
		}
	}
    .productBox h3{
		display: flex;
		justify-content:center;
		align-items:center;
		height: 3rem;
		font-size:clamp(.8rem, 2vw, 1rem);
		color:#FFF;
		margin: -.2rem auto 0;
		padding:.5rem 0;
		background: #eb7aab;
		border-radius: 0 0 1rem 1rem;
		position: relative;
        }
		@media screen and (max-width:768px){
        	.productBox h3{
				padding:0;
				line-height:1rem;
				font-size:.7rem;
			}
			.productBox h3 span{
				font-size:80%;
			}
  		} 
	.productBox img{
		border-radius:1rem 1rem 0 0 ;
	}

.link{
	margin: 4rem auto;
	}
	@media screen and (max-width:768px){ 
		.link{
			margin: 2rem auto;
		}
	}
.annotation{
	font-weight:bold;
	font-size: clamp(.8rem, 2vw, 1rem); 
	transform:rotate(0.05deg);
}

/*================ BTN ===============*/
a.btn{
    max-width:600px;
    margin: 2rem auto;
    padding: 2rem;
	box-sizing:border-box;
    font-weight: bold;  
    display: block;
    background: #9c95ed;
    color: #FFF;
    font-size: 1.2em;
    border-radius: 50px;
    border: 5px solid #FFF;
    box-shadow: 2px 2px 2px #bcb7f5;
    -webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
	/*position: relative;*/
    }
    @media screen and (max-width: 479px) {
        a.btn{
			margin:8% auto 20%;
			font-size: 0.8em;
			padding: 1.5rem 0;
		}
	}
    a:hover.btn{
		background:#e75397; color: #FFF/*#e75397*/;
	}
	.btn:after{
        font-family: "Font Awesome 5 Free";
        content: '\f138';
        padding:0 1%;
		/*top:50%;*/
		transform:translateY(-50%);
		/*position: absolute;*/
	}

.Btn{
	max-width: 600px;
	border: 2px solid #e75397;
	border-radius: 100vh;
	font-size: clamp(.9rem, 2vw, 1.3rem);
	font-weight: bold;
	margin: 1.5rem auto;
	padding:0;
	box-sizing:border-box;
	position: relative;
	transform:rotate(0.1deg);
	/*transition: 0.5s;*/
	}
    @media screen and (max-width:768px) {
		.Btn{
            margin: 1rem auto;
        }
    }
	.Btn:after{
        font-family: "Font Awesome 5 Free";
        content: '\f138';
        padding:0;
		top:50%;
		right:5%;
		transform:translateY(-50%);
		position: absolute;
        }

    .Btn:hover{
        background: #c984da;
        border: 2px solid #c984da;
        color: #FFFFFF !important;
    }
	.Btn a{
		display: block;
		padding: 2rem 1rem 2rem 0;
		}
		@media screen and (max-width:768px){ 
			.Btn a{
				padding:6% 0;
			}
		}
	#figure .Btn{
		width:70%;
		max-width: 450px;
		padding:0;
	}	

.__pink{
	color: #FFFFFF;
	background: #e75397;
}
.__white{
	color: #e75397;
	background: #FFFFFF;
	}
.__purple{
	color: #FFFFFF;
	background: #9c95ed;
	}
	.__purple{
		border: 2px solid #FFF;
	}
	.__purple a:link{
		color: #fff;
	}

/*---------footer--------*/	
div#footer {
    background-color: #fff;
}
    .contents_box {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.btn-top {
    position: relative;
    display: inline-block;
    width: 42%;
    font-weight: bold;
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: 8px;
    margin: 70px auto 20px auto;
    padding: 0.6em 0;
    text-align: center;
    transition: .4s;
    text-shadow: none !important;
}
@media screen and (max-width: 768px) {
.contents_box {
width: 100%;
margin: 0 auto;
text-align: center;
}
}
/*---------SNS--------*/	
.sns-s {
    margin: 30px auto 20px auto;
    overflow: hidden;
}
.sns-s ul {
    display: table;
    max-width: 240px;
    height: 32px;
    margin: 0 auto 0;
    padding: 0;
    line-height: 1;
    text-align: center;
}
.sns-s ul li {
    display: table-cell;
    padding: 0 10px;
}
.sns-s ul li a img {
    width: 100%;
}
    

 .copyright {
	width: 100%;
	text-align:center;
	margin: 0 auto;
	padding:10px 0;
}   

 .copyright {
	width: 100%;
	text-align:center;
	margin: 0 auto;
	padding:10px 0;
}   

.page_top{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    background: #e75397;
	border:1px solid #FFF;
    border-radius: 50%;
	box-shadow:5px 5px 5px #00000050;
    z-index: 10;
	
	transition: .3s;
	opacity: 0;
	visibility: hidden;
    }
    .page_top a{
        position: relative;
        display: block;
        width: 60px;
        height: 60px;
        }
    .page_top a::before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        content: '\f106';
        font-size: 25px;
        color: #FFF;
        position: absolute;
        width: 50%;
        height: 50%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
        }

.active{
  opacity: 1;
  visibility: visible;
}

/*============= ec-modal-window =============*/
.ec-modal-window-box section{
	padding: 0;
}
	
/*===============================================
          SP only  
===============================================*/
@media screen and (max-width: 767px){
.sp { display: block !important; }
.pc { display: none !important; }
}
/*==============================================
           PC
==============================================*/
@media only screen and (min-width: 768px){
.sp { display: none !important; }
.pc { display: block !important; }
}