@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: 5rem 0;
	position: relative;
	}
	@media screen and (max-width:768px){
		section {
			padding: 1.5rem 0;
		}
	 }
#product2621{
	padding: 5rem 0 12rem;
	}
	@media screen and (max-width:768px){
		#product2621 {
			padding: 1.5rem 0 5rem;
		}
	 }
figure{
	margin: unset;
}
/* 
===================== 3.Common setting ====================
*/
.BgImage{
	background-image: url(../../../../common/special/fairy-series/img/bg.png);
	background-position:center;
	background-repeat:repeat;
	background-size: 550px;
	}
    @media screen and (max-width:768px){
		.BgImage {
			background-size: 300px;
		}
   	 }

.line{
	width:100%;
	margin: -4rem auto 0;
	padding: 0 0 8rem;
	border:0;
	background-image: url(../../../../common/special/fairy-series/img/deco-line.png);
	background-position:center;
	background-repeat:repeat-x;
	background-size: 550px;
	position: absolute;
	z-index: 2;
	}
    @media screen and (max-width:767px){
		.line {
			margin: -2.5rem auto 0;
			padding-bottom: 17%;
			background-size: 80%;
		}
   	 }

.contents-wrap {
	padding:0;
	background: #EC73A8;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%,rgba(175, 99, 163, 1) .5%, rgba(87, 26, 134, 1)50%, rgba(87, 26, 134, 1) 80%, rgba(28, 36, 137, 1) 100%);
	}

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

.title {
	width:90%;
    max-width:900px;
	margin: 0 auto;
	position:relative;
	z-index: 2;
	}
	.title span{
		display:block;
		font-size: clamp(.95rem, 2vw, 1.8rem);
		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);}
    }
@media screen and (min-width:768px){
	#attraction .attBox .fuwafuwa,
	#attraction .attBox .fuwafuwa2,
	#attraction .attBox .fuwafuwa3,
	#product2618 .fuwafuwa,
	#product2618 .fuwafuwa2,
	#product2618 .fuwafuwa3{
		animation: unset;
	}
}
/* アニメーション ゆらゆら */ 
.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);}
    }
/* アニメーション きらきら */ 
.kirakira{
	position: absolute;
	animation: flashing  3s infinite;
	margin:0;
	}
	@keyframes flashing {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	#top .kirakira.__01{
		width:5%;
		top:38%;
		right:88.5%;
	}
	#top .kirakira.__02{
		width:4.5%;
		top:44.5%;
		right:12%;
		animation-delay: 2.5s;
	}
	#top .kirakira.__03{
		width:6%;
		top:0.5%;
		right:32.2%;
		animation-delay: 4s;
	}
	#top .kirakira.__04{
		width:4%;
		top:29.6%;
		right:11%;
		animation-delay: .4s;
	}
	#top .kirakira.__05{
		width:3.8%;
		top:17.3%;
		right:78.7%;
		animation-delay: 1.3s;
	}
	#top .kirakira.__06{
		width:4%;
		top:30.8%;
		right:60.8%;
		animation-delay: 3.7s;
	}
	#top .kirakira.__07{
		width:3.5%;
		top:22%;
		right:23.5%;
		animation-delay: 5s;
	}
	@media screen and (max-width:768px){
		#top .kirakira.__01{
			width:11%;
			top:25%;
			right:9%;
		}
		#top .kirakira.__02{
			width:8%;
			top:30%;
			left:5%;
		}
		#top .kirakira.__03{
			width:9%;
			top:15%;
			right:29%;
		}
		#top .kirakira.__04{
			width:7%;
			top:36%;
			right:53%;
		}
		#top .kirakira.__05{
			width:5%;
			top:25.5%;
			right:74.3%;
		}
		#top .kirakira.__06{
			width:6%;
			top:38.5%;
			right:5.7%;
		}
		#top .kirakira.__07{
			width:5%;
			top:33%;
			right:20%;
		}
	}
	#story .kirakira.__01{
		width:10%;
		top:-5%;
		left:9%;
	}
	#story .kirakira.__02{
		width:6%;
		top:1%;
		right:11%;
		animation-delay: 1.3s;
	}
	#story .kirakira.__03{
		width:9%;
		bottom:-10.3%;
		left:13.55%;
		animation-delay: 3s;
	}
	@media screen and (max-width:768px){
		#story .kirakira.__01{
			width:12%;
			top:0%;
			left:3%;
		}
		#story .kirakira.__02{
			width:7%;
			top:10.5%;
			right:5.5%;
		}
		#story .kirakira.__03{
			width:10%;
			bottom:-5%;
			left:13.8%;
		}
	}
	#product2618 .kirakira.__01{
		width:6%;
		top:5%;
		right:12%;
		animation-delay: 1.3s;
	}
	#product2618 .kirakira.__02{
		width:10%;
		bottom:33%;
		left:9%;
	}
	#product2618 .kirakira.__03{
		width:8%;
		bottom:-4%;
		right:10%;
		animation-delay: 2s;
	}
	@media screen and (max-width:768px){
		#product2618 .kirakira.__01{
			width:12%;
			top:-4%;
			right:13%;
		}
		#product2618 .kirakira.__02{
			width:13%;
			bottom:39%;
			left:5%;
		}
		#product2618 .kirakira.__03{
			width:10%;
			bottom:-2%;
			right:6%;
		}
	}
	#product2619 .kirakira.__01{
		width:10%;
		top:8%;
		left:12%;
		animation-delay: 0.3s;
	}
	#product2619 .kirakira.__02{
		width:7%;
		top:7%;
		right:19%;
		animation-delay: 1.3s;
	}
	#product2619 .kirakira.__03{
		width:5%;
		top:18.5%;
		left:81%;
		animation-delay: 2s;
	}
	@media screen and (max-width:768px){
		#product2619 .kirakira.__01{
			width:13%;
			top:9%;
			left:6%;
		}
		#product2619 .kirakira.__02{
			width:10%;
			top:19%;
			right:9%;
		}
		#product2619 .kirakira.__03{
			width:8%;
			top:19%;
			left:8%;
		}
	}
	#figure .kirakira.__01{
		width:7%;
		top:27%;
		right:21%;
	}
	#figure .kirakira.__02{
		width:5%;
		top:53.5%;
		left:8%;
		animation-delay: 1.3s;
	}
	#figure .kirakira.__03{
		width:7%;
		bottom:7%;
		right:18%;
		animation-delay: 2.5s;
	}
	@media screen and (max-width:768px){
		#figure .kirakira.__01{
			width:13%;
			top:31%;
			right:11%;
		}
		#figure .kirakira.__02{
			width:8%;
			top:81%;
			left:11%;
		}
		#figure .kirakira.__03{
			width:9%;
			bottom:7%;
			right:13%;
		}
	}
	#attraction .kirakira.__01{
		width:7%;
		top:52%;
		left:6%;
	}
	#attraction .kirakira.__02{
		width:5%;
		bottom:-6%;
		right:6%;
		animation-delay: 1.3s;
	}
	@media screen and (max-width:768px){
		#attraction .kirakira.__01{
			width:8%;
			top:12%;
			left:7.5%;
		}
		#attraction .kirakira.__02{
			width:11%;
			bottom:-7%;
			right:5%;
		}
	}
/* 
===================== Section setting ====================
*/
#top {
	padding: 0;
	background: #1C2489;
	}
	#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 h1 img{
			aspect-ratio: auto 1920 / 1200;/*表示する画像サイズ */
			}
			@media screen and (max-width:768px){
				#top h1 img{
					aspect-ratio: auto 640 / 580;
				}
			 }
	#top .popup{
		width: 34%;
		max-width: 730px;
		top:3%;
		left:12%;
		position: absolute;
		}
		#top .popup img{
			aspect-ratio: auto 730 / 320;/*表示する画像サイズ */
			}
		@media screen and (max-width:768px){
			#top .popup {
				width: 60%;
				top:3%;
				left:5%;
				/*transform:rotate(-3deg);*/
			}
		 }
	#top .popup2{
		width: 30%;
		max-width: 530px;
		top:4%;
		left:20%;
		position: absolute;
		}
		#top .popup2 img{
			aspect-ratio: auto 500 / 180;/*表示する画像サイズ */
			}
		@media screen and (max-width:768px){
			#top .popup2 {
				width: 60%;
				top:3%;
				left:4%;
				/*transform:rotate(-3deg);*/
			}
		 }
	#top .fairy{
		position: absolute;
		}
		#top .fairy.__01{
			width: 7%;
			top:18%;
			left:43%;
			}
			@media screen and (max-width:768px){
				#top .fairy.__01{
					top:28%;
					left:42%;
				}
			 }
			#top .fairy.__01 img{
				aspect-ratio: auto 537 / 551;
			}
		#top .fairy.__02{
			width: 7%;
			top:35%;
			left:10.5%;
			}
			@media screen and (max-width:768px){
				#top .fairy.__02{
					top:45%;
					left:4%;
				}
			 }
			#top .fairy.__02 img{
				aspect-ratio: auto 528 / 430;
			}
		#top .fairy.__03{
			width: 6%;
			top:38%;
			left:80%;
			}
			@media screen and (max-width:768px){
				#top .fairy.__03{
					top:44%;
					left:84%;
				}
			 }
			#top .fairy.__03 img{
				aspect-ratio: auto 429 / 426;
			}
.logo{
    width: 20%;
    max-width: 360px;
    top:3%;
    right:2%;
    position: absolute;
    }
    @media screen and (max-width:768px){
        .logo {
            width: 30%;
			top:5%;
			right:3%;
        }
     }
	.logo img{
		width: 100%; 
		height: auto;
		aspect-ratio: auto 360 / 75;
	}
	.logo a:hover img{
		opacity:1;
		filter:alpha(opacity=100);
		-ms-filter: “alpha( opacity=100 )”;
	}
/*================ intro ===============*/
#intro {
	margin:0 auto;
	padding:6rem 0 2rem;
	}
	@media screen and (max-width:768px){
		#intro {
			margin:0 auto 0;
			padding:2rem 0 0;
		}
	}
	#intro .container {
		padding: 3rem 0 0;
		}
		@media screen and (max-width:768px){
			#intro .container {
				padding: 2rem 0 0;
			}
		 }
	#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;
    }
    @media screen and (max-width:768px){
        .video-box {
            margin:0rem auto 1rem;
        }
     }
.video{
    height: 0;
    overflow: hidden;
	position:relative;
	padding-top:56.3%;/*56.25%*/
	border:5px solid #f274aa;
	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 #f274aa;
		}
	}
.video-box .video iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	border:0;
}
/*================ story ===============*/
	#story h2 img{
		aspect-ratio: auto 5 / 6;
		}
		@media screen and (max-width:768px){
			#story h2 img{
				aspect-ratio: auto 640 / 990;
			}
		}
	.min{
		padding: 7rem 0 0;
		}
		@media screen and (max-width:768px){
			.min{
				padding: 3rem 0 0;
			}
		}

/*================ product2618 ===============*/
#product2618 .innerBox.Bg{
    width:100%;
    max-width:1700px;
    margin: 3rem auto 0;
    }
    @media screen and (max-width:768px){
        #product2618 .innerBox.Bg {
            width:100%;
			margin:.5rem 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);
	}
	#product2618 .att.__01{
		width:34%;
		top:3%;
		left:2%;
	}
	#product2618 .att.__02{
		width:36%;
		top:59%;
		left:0%;
	}
	#product2618 .att.__03{
		width:30%;
		top:37%;
		left:68%;
	}
    @media screen and (max-width:768px){
		#product2618 .att.__01{
			width:23%;
			top:26%;
			left:8%;
		}
		#product2618 .att.__02{
			width:23%;
			top:68%;
			left:7%;
		}
		#product2618 .att.__03{
			width:23%;
			top:46%;
			left:70%;
		}
	}

/*================ productCastle ===============*/
#productCastle{
	padding:6rem 0 3rem;
	}
    @media screen and (max-width:768px){
        #productCastle{
            padding:2rem 0 1rem;
        }
    }
#productCastle section{
	padding:0 0 3rem;
	}
    @media screen and (max-width:768px){
        #productCastle section{
            padding:0 0 1.5rem;
        }
    }
#productCastle .fairy{
	position: absolute;
	}
	#productCastle .fairy.__01{
			width: 6%;
			top:21%;
			left:42%;
			}
			@media screen and (max-width:768px){
				#productCastle .fairy.__01{
					width:9%;
					top:28%;
					left:36%;
				}
			 }
			#productCastle .fairy.__01 img{
				aspect-ratio: auto 537 / 551;
			}
		#productCastle .fairy.__02{
			width: 5.5%;
			top:42%;
			left:26.5%;
			}
			@media screen and (max-width:768px){
				#productCastle .fairy.__02{
					width:9%;
					top:46%;
					left:4%;
				}
			 }
			#productCastle .fairy.__02 img{
				aspect-ratio: auto 528 / 430;
			}
		#productCastle .fairy.__03{
			width: 5%;
			top:36%;
			left:70%;
			}
			@media screen and (max-width:768px){
				#productCastle .fairy.__03{
					width:8%;
					top:41%;
					left:79%;
				}
			 }
			#productCastle .fairy.__03 img{
				aspect-ratio: auto 429 / 426;
			}
/*================ figure ===============*/
#figure .title{
	margin-bottom: 1rem;
	}
    @media screen and (max-width:768px){
        #figure .title{
			margin-bottom: .5rem;
        }
    }
	#figure .inner{
		background:url(../img/figure-bg.png);
		background-size:contain;
		background-repeat: no-repeat;
		background-position: center;
		}
	#figure .innerBox{
		padding: 38% 0;
		box-sizing:border-box;
		position: relative
		}
		#figure .innerBox figure{
			position: absolute
		}
		#figure .innerBox .figure1{
			width: 26%;
			top:28%;
			left:6%;
		}
		#figure .innerBox .figure2{
			width: 40%;
			top:21%;
			left:33%;
		}
		#figure .innerBox .figure3{
			width: 14%;
			top:59%;
			left:26%;
		}
		#figure .innerBox .figure4{
			width: 17%;
			top:41%;
			left:69%;
		}
/*================ attraction ===============*/
#attraction{
	display: flex;
	padding: 5rem 0 12rem;
	}
    @media screen and (max-width:768px){
        #attraction{
            padding: 2.3rem 0 6rem;
        }
    }
	#attraction .container {
		max-width:1600px;
		}
	#attraction .inner{
		width:100%;
		max-width:none;
		}
		#attraction .inner.add{
			width:92%;
			max-width:1000px;
			margin-top: 1.5rem;
			}
	#attraction .innerBox.Bg{
		width:85%;
		max-width:1700px;
		margin: auto;
		}
		@media screen and (max-width:768px){
			#attraction .innerBox.Bg {
				width:100%;
			}
		}
	#attraction .att.__01{
		width:21%;
		top:0%;
		left:2%;
	}
	#attraction .att.__02{
		width:17%;
		top:4%;
		left:23%;
	}
	#attraction .att.__03{
		width:25%;
		top:28.5%;
		left:1%;
	}
	#attraction .att.__04{
		width:27%;
		bottom:4%;
		left:3%;
	}
	#attraction .att.__05{
		width:21%;
		top:1%;
		left:73%;
	}
	#attraction .att.__06{
		width:22%;
		top:26%;
		right:3%;
	}
	#attraction .att.__07{
		width:18%;
		top:60%;
		right:2%;
	}
	#attraction .att.__08{
		width:13%;
		top:76%;
		right:17%;
	}

	@media screen and (max-width:768px){
			#attraction .att.__01 {
				width:19%;
				top:14%;
				left:25%;
			}
			#attraction .att.__02 {
				width:19%;
				top:21%;
				left:10%;
			}
			#attraction .att.__03 {
				width:19%;
				top:32%;
				left:1%;
			}
			#attraction .att.__04 {
				width:19%;
				top:60%;
				left:1%;
			}
			#attraction .att.__05 {
				width:19%;
				top:11%;
				left:44%;
			}
			#attraction .att.__06 {
				width:19%;
				top:15%;
				right:1%;
			}
			#attraction .att.__07{
				width:19%;
				top:48%;
				right:1%;
			}
			#attraction .att.__08{
				width:19%;
				top:71%;
				right:2%;
			}
		} 

/*================ Recommend ===============*/ 
#recommend {
	padding:8rem 0 5rem;
	margin-bottom:-1px;
	}
	@media screen and (max-width:768px){
		#recommend {
			padding:4rem 0 2.5rem;
		}
	}
	#recommend .title {
		width: 60%;
		max-width: 700px;
		margin: 2rem auto;
		padding: 0 10% 0;
		font-size: clamp(1rem, 6vw, 3.5rem);
		color: white;
		text-shadow: 0px 0px 10px #833f95;
		background-image: url(../../../../common/special/fairy-series/img/deco-star-tite-l.png),url(../../../../common/special/fairy-series/img/deco-star-tite-r.png);
		background-position:left,right;
		background-repeat:no-repeat;
    	background-size: contain;
		}
		@media screen and (max-width:767px){
			#recommend .title {
				width: 70%;
				margin: .3rem auto 1.5rem;
				/*background-position:top left,top right;*/
				background-size: 16%;
			}
		}
	#recommend .title span{
		position:unset;
		}
	#recommend .ec-modal-window-box button{
		width:100% !important;
	}
	#recommend .inner{
		max-width:1400px;
		}


.slide-wrap {
    width: 95%;
    max-width:1000px;
    margin: 0 auto;
    padding: 0;
    }
    .slide-wrap ul {
        padding-inline-start: 0px !important;
        }
    .slide-wrap .slide li {
        margin: 0 15px;
        }
    .slide-wrap .slide li img {
        width: auto; 
        max-width: 100%;
        margin: 0 auto;
		border: solid 5px #FFF;
		border-radius: 2rem;
		box-sizing: border-box;
		aspect-ratio: auto 1000 / 780;
        }
        @media screen and (max-width:768px){
            .slide-wrap {
                width: 100%;
                margin: 0 auto;
                }
            .slide-wrap .slide li {
                margin: 0 5px;
                }
            .slide-wrap .slide li img {
				border-radius: 1.5rem;
                }
        }

.flexBox{
	display: flex;
	flex-wrap:wrap;
	}
	#recommend .flexBox{
		width:93%;
		margin:auto;
		justify-content:start;
		}	
		@media screen and (max-width:768px){
			#recommend .flexBox {
				width:100%;
			}
		} 
	.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.3%;
		padding:1rem .5rem;
		box-sizing:border-box;
		}
		@media screen and (max-width:768px){
			.flexBox.col3 > div {
				width:50%;
				padding:.5rem .3rem;
			}
		} 
	.flexBox.col2 > div {
		width:50%;
		padding:1rem .5rem;
		box-sizing:border-box;
		} 

 .productBox {
	 background-color: #FFF;
	 border:solid 1px #FFF;
	 border-radius: 1em;
	 box-shadow: 5px 5px 0px #00000040;
	}
	@media screen and (max-width:768px){
		.productBox {
			box-shadow: 4px 4px 0px #00000040;
		}
	}
    .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;
		aspect-ratio: auto 4 / 3;
	}

.link{
	margin: 4rem auto;
	}
	@media screen and (max-width:768px){ 
		.link{
			margin: 2rem auto;
		}
	}
.annotation{
	font-weight:bold;
	font-size: clamp(.8rem, 2vw, 1rem); 
	color: white;
	text-shadow: 0px 0px 10px #85109382;
	margin-bottom: 3rem;
	transform:rotate(0.05deg);
	}
	@media screen and (max-width:768px){ 
		.annotation{
			margin-bottom: 2rem;
		}
	}

/*================ 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: 3px 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;
			padding: 0 1rem 0 0;
        }
    }
	.Btn:after{
        font-family: "Font Awesome 5 Free";
        content: '\f138';
        padding:0;
		top:50%;
		right:5%;
		transform:translateY(-50%);
		position: absolute;
        }

    .Btn:hover{
        background: #eb7aab;/*#eb7aab*/
		/*background: linear-gradient(-45deg,rgba(231, 83, 151, 1) 0%, rgba(235, 122, 171, 1)100%);*/
        border: 3px solid #fff;
        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;
	}

/*============= SnsBox =============*/	
#sns_box{
	width:100%;
	margin:  0 auto;
	padding:5rem 0;
	background-color: #FFF; 
	text-align:center;
	}
    @media screen and (max-width:768px){   
        #sns_box{ 
        	padding:3rem 0 
        }
    }
.box_bnr{
	width:100%;
	margin: 2rem auto;
	padding:0;
	}
    @media screen and (max-width:768px){   
        .box_bnr{ 
        	margin: 3% auto 5%;
        }
    }
	.box_bnr img{
		width:90%;
		max-width: 580px;
		margin: auto;
	}

.btn_box{
	width:100%;
	margin: 2rem auto;
	}
    @media screen and (max-width:768px){
		.btn_box{
			margin: 1rem auto 3rem;
		}
    }
	.btn_box img{
		width:80px;
		margin: 0 auto;
		padding:15px;
		box-sizing:border-box;
		float:none;
		}
		@media screen and (max-width:768px){
			.btn_box img{
				width:16%;
				padding:2%;
			}
		}

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

/*============= Page-top =============*/
.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;
}

/*.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;
}

/*---------SNS--------*/	
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%;
}
 @media screen and (max-width:768px){   
  .sns-s ul li a img {
    width: 90%;
}
}

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

/*============= SnsBox =============*/	
#sns_box{
	width:100%;
	margin:  0 auto;
	padding:5rem 0;
	background-color: #FFF; 
	text-align:center;
	}
    @media screen and (max-width:768px){   
        #sns_box{ 
        	padding:3rem 0 
        }
    }
.box_bnr{
	width:100%;
	margin: 2rem auto;
	padding:0;
	}
    @media screen and (max-width:768px){   
        .box_bnr{ 
        	margin: 3% auto 5%;
        }
    }
	.box_bnr img{
		width:90%;
		max-width: 580px;
		margin: auto;
	}

.btn_box{
	width:100%;
	margin: 2rem auto;
	}
    @media screen and (max-width:768px){
		.btn_box{
			margin: 1rem auto 3rem;
		}
    }
	.btn_box img{
		width:80px;
		margin: 0 auto;
		padding:15px;
		box-sizing:border-box;
		float:none;
		}
		@media screen and (max-width:768px){
			.btn_box img{
				width:16%;
				padding:2%;
			}
		}

 .copyright {
	width: 100%;
	text-align:center;
	margin: 0 auto;
	padding:10px 0;
}   
/*============= 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; }
}