@import url("https://use.typekit.net/erw6inh.css");
@charset "UTF-8";
@media print {
.noprint {display:none !important;}
}
a { text-decoration:none; color:#0050ff;}
a:hover { text-decoration:none; color:#0050ff;}
.f140 { font-size:140%;}
.f130 { font-size:130%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f85 { line-height:normal !important; font-size:85% !important;}
.f80 { line-height:normal !important; font-size:80% !important;}
.f80c { line-height:normal !important; font-size:80% !important; display:inline-block; text-align:center; width:100%; font-weight: 500;}
.hid{visibility: hidden;}
.ftblu {color:#0050ff;}
.ftpnk {color:#ff7ead;}
.ftpur {color:#8b00ff;}
.zenmaru {
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;
}
.abjgu {
font-family: ab-j-gu, sans-serif;
font-weight: 400;
font-style: normal;
}
.kasane {
font-family: "ta-kasanemarugo", sans-serif;
font-weight: 400;
font-style: normal;
}
.dotgo {
font-family: "dotgothic16", sans-serif;
font-weight: 400;
font-style: normal;
}
.lores {
font-family: "lores-9-wide", sans-serif;
font-weight: 700;
font-style: normal;
}

body {
background-color:#feed00;
background:#feed00 url(../img/bg.png); background-size:18px;
background-attachment: fixed;
  color: #333;
  z-index: 1;
  font-family: "Noto Sans JP", sans-serif;
  transition: 0.7s;
}
#con-body {background-color:transparent;}
#container{padding:0; position:relative;}

a.tbslogo{display:block; background: url(../img/tbs.svg) no-repeat 0 0;background-size:contain; z-index:12;}
a.megu{display:block; background:url(../img/rabbit.png) no-repeat 0 0;background-size:contain; z-index:999;
animation: pikopiko 2s steps(2, start) infinite;
}

.nav_wrapper {
  position: fixed;
  z-index: 0;
  width:380px;
  top:100px;
  border-radius:50px 0 0 50px;
  background:#74c8ca;
  box-shadow: 0px 0px 0px 3px #fff inset,4px 7px 0px 0px rgba(139,0,255,0.9);
  border:2px solid #601886;
  border-right:none;
  padding:4.25em 0 1.4em;
}
.heart{position:absolute;left:-5%;top:14%; width:55px; }
.star{position:absolute;left:0;bottom:-4%; width:80px; }
.nav_wrapper .logo{width:280px; height:140px; display:block; background: url(../img/logo.svg) no-repeat 0 0;background-size:contain; z-index:12; position:absolute; left:15%; top:-18%;}
.nav_wrapper .nav_list {
  width:76%;
  margin:0 0 0 11%;
}
.nav_wrapper .nav_list li {
  opacity: 0;
  animation: slide-in 1s ease forwards;
  border-bottom:1px solid #fff;
  padding:.8em .25em;
}
.nav_wrapper .nav_list li:last-child {
  border:none;
}
.nav_wrapper .nav_list lii:nth-child(1) {
  animation-delay: 0.15s;
}
.nav_wrapper .nav_list li:nth-child(2) {
  animation-delay: 0.3s;
}
.nav_wrapper .nav_list li:nth-child(3) {
  animation-delay: 0.45s;
}
.nav_wrapper .nav_list li:nth-child(4) {
  animation-delay: 0.6s;
}
.nav_wrapper .nav_list li:nth-child(5) {
  animation-delay: 0.75s;
}
.nav_wrapper .nav_list li:nth-child(6) {
  animation-delay: 0.9s;
}
.nav_wrapper .nav_list li:nth-child(7) {
  animation-delay: 1.05s;
}
.nav_wrapper .nav_list li a {
  color: #000;
  font-size:150%;
font-family: ab-j-gu, sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 1px 1px #fff;
}
.nav_wrapper .nav_list li a.new::after { content: ' NEW‼'; color:#eb0055; text-shadow: 0px 0px #fff; font-size: 70%;
	font-family: "lores-9-wide", sans-serif;
    font-weight: 700;
    font-style: normal;}
.nav_wrapper .sns{text-align:center; display:inline-block; width:100%; margin:1.25em auto 0;}
.nav_wrapper .sns a{width:50px; height:50px; margin:0 .05em 0; position: relative; display:inline-block; border-radius:50%; transition:.3s; background-color:rgba(139,0,255,0.9);}
.nav_wrapper .sns a:hover{opacity:0.5;}
.nav_wrapper .sns a img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:45%;}
@media all and (min-width: 768px) {
.nav_wrapper {left:calc(50% - 465px);}
}
@media screen and (max-width:767px) {
  #navparts {
    display: none;
  }
}

.contents {
  width: 486px;
  position: relative;
  background-color:#f5eb15;
  margin-left: calc(50% - 100px);
  border-left:2px solid #601886;
  border-right:2px solid #601886;
}

@media all and (min-width: 768px) {
.nobr{display: none;}
a.tbslogo{position:fixed; left:2%;bottom:2.5%; width:70px; height:30px;}
a.megu{position:fixed; left:calc(50% - 200px); bottom:2.5%; width:80px; height:130px;}
#container{padding:0 0;
background-image:url(../img/eng.svg),url(../img/border1.svg);
background-repeat:no-repeat,no-repeat;
background-position:left calc(50% + 420px) bottom 5%,right -4% top 1%;
background-size:35px auto,250px;
background-attachment: fixed,fixed;
}
}

@media screen and (max-width: 767px) {
a.tbslogo{position:absolute; left:0; right:0; bottom:0; width:15%; height:0; padding:6% 0 0; margin:2% auto;}
a.megu{position:fixed; right:1%; bottom:.5%; width:14%; height:0; padding:22% 0 0;}
#container{padding:0 0 0;}
.contents {margin:0 auto; width:90%;}
}

.contents .inner{padding:0;}
.contents .main{overflow: hidden; padding:.6em;}
.contents .main figure{
animation: zoomout 0.8s ease forwards;
}
/*.contents .main figure img{
height:96vh;
}*/
.contents .main h1{padding:.8em 0 0; text-align:center; color:#8b00ff; font-size:180%; line-height:120%; text-shadow: 3px 3px #fff;
font-family: "ta-kasanemarugo", sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0; 
animation: zoomout .5s ease-in .5s 1 forwards;
}

.contents .section {padding:0 1.5em 1.5em;}
.contents .section h2,#sec06 h3{padding:1em 0 .25em; font-size:190%; line-height:100%; color:#8b00ff;
font-family: ab-j-gu, sans-serif;
font-weight: 400;
font-style: normal;
}
.contents .section h3{color:#0050ff; padding:1em 0 .25em; font-size:120%;}
.contents .section h4{padding:1em 0; font-size:130%; text-align:center;}
.contents .section p{padding:.5em 0; line-height:160%;}
.line1 {background: linear-gradient(transparent 70%, rgba(255,126,173,0.4) 70%); padding:0 .2em .1em;}

#sec01{background: url(../img/jk.png) no-repeat right 1% bottom; background-size:200px auto;}
#sec01 h2,#sec06 h3{color:#46c3df !important; font-size:180%;}
#sec01 h2 span,#sec06 h3 span{display: inline-block; width:100%; background: url(../img/wave.svg) repeat-x 0 bottom; background-size:auto 8px; padding:0 0 .4em;}
#sec01 .line1{font-weight:800; font-size:110%;}
#sec01 .section:first-of-type {padding:0 1.5em 1em;}

.swiper-container {
  position: relative;
  max-width: 100%;
margin:0 auto 1.5em;
text-align:center;
}
.swiper-slide figure{width:100%; position: relative; border-radius:10px; height:0; padding:66.6% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center center; overflow:hidden;}
.swiper-slide figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
.swiper-pagination {
  bottom: -1.25em !important;
}
.swiper-pagination-bullet {
  background-color:#ff7ead;
}
.swiper-button-prev,
.swiper-button-next {
  height: 40px;
  width: 35px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 40px;
  margin: auto;
  width: 35px;
}
.swiper-button-prev::after {
  background-image: url(../img/slider_arrow_l.svg);
}
.swiper-button-next::after {
  background-image: url(../img/slider_arrow_r.svg);
  background-position:right center;  
}
.swiper-slide img {
  height: auto;
  width: 100%;
}

#ambassador{background-color:#ff7ead;}
#ambassador h2{color:#feed00;}
#ambassador h2 + p{padding:0; margin:.6em 0 .6em; text-align:center; font-size:130%; color:#ff7ead;
transform: rotate(-3deg);
text-indent: -1em;}
#ambassador h2 + p span{
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0 .1em;
	line-height:170%;
	background-color:#feed00;  
}
#ambassador h2 + p + p + span{font-weight:500 !important;}
#ambassador h3{background: url(../img/chiq.svg) no-repeat center top; background-size:contain; width:50%; margin:1.5em auto .5em; height:0; padding:12% 0 0;}
#ambassador h4{color:#feed00; font-size:90%;}
#ambassador h4 span{font-size:200%;}
#ambassador figure.chiq{width:80%; height:0; background: url(../img/chiqkey.jpg) no-repeat center center; background-size:cover;
margin:0 auto; position:relative; padding:117.3% 0 0;}
#ambassador figure.daichi,#ambassador figure.kyuma{width:220px; height:220px; background: url(../img/daichi.jpg) no-repeat center center; background-size:cover; border:1px solid #000; box-shadow:4px 7px 0px 0px #feed00; border-radius:50%; margin:3em auto 0; position:relative;}
#ambassador figure.kyuma{background-image:url(../img/kyuma.jpg);}
#ambassador figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
#ambassador p.comment {
    position: relative;
    padding:1em;
    margin:.25em auto 1em;
}
#ambassador p.comment::before,
#ambassador p.comment::after {
    position: absolute;
    width: 10%;
    height: 30%;
    content: '';
}
#ambassador p.comment::before {
    border-left:#feed00 solid 2px;
    border-top:#feed00 solid 2px;
    top: 0;
    left: 0;
    border-radius: 5px 0 0 0;
}
#ambassador p.comment::after {
    border-right:#feed00 solid 2px;
    border-bottom:#feed00 solid 2px;
    bottom: 0;
    right: 0;
    border-radius: 0 0 5px 0;
}
#ambassador .profile{box-shadow:4px 7px 0px 0px #feed00 !important; padding:1em; margin:.5em auto !important;}
#ambassador .profile:first-of-type{margin:.5em auto 2.5em !important;}

#trailer {position: relative; width:100%; padding:54% 0 0; height:0; background-size:cover; background-position: center center; background-repeat: no-repeat; margin:0 auto; overflow: hidden; z-index:111; transition:.5s; background-size:cover; background-position:top 30% center !important;
border-radius:10px;
border:1px solid #000;}
#trailer iframe {position:absolute; top: 0; left:0; width:100%; height:100%; display:block;}
#trailer .play_btn { width:70px; height: 70px; border-radius:50%; background: rgba(255,126,173,0.9); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block; z-index:111;}
#trailer .play_txt { color: rgba(255, 255, 255,0.8); font-size:200%; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%)  rotate(90deg);}
#sec01 #trailer{width:90%; padding:50.625% 0 0; margin:3em auto .5em;}

.tab-switch {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between;
    gap: 4px;
    margin:1em 0 0;
}
.tab-switch > label {
    flex: 1 1 auto;
    justify-content: center;
    display: flex;
    align-items: center;
    order: -1; 
    position: relative;
    padding: .5em 0;
    background-color: #ff7ead;
    color: #feed00; 
    text-align: center;
    cursor: pointer;
    transition:.3s all;
    border-radius:1vw 1vw 0 0;
    border:1px solid #feed00;
    border-bottom:none;
}
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    background-color: #feed00;
    color: #ff7ead; 
}
.tab-switch input {
    display: none;
}
.tab-switch > div {
    display: none;
    width: 100%;
    padding:.8em 0;
}
.tab-switch label:has(:checked) + div {
    display: block;
}

#ambassador ul.movbox{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
#ambassador ul.movbox li{width:49%;}
#ambassador ul.movbox li .play_btn { width:45px; height:45px;}
#ambassador ul.movbox li .play_txt { font-size:130%;}

#sec02 {background-color:#74c8ca; padding-top:3em;
background-image:url(../img/freeline.svg),url(../img/dotc.svg);
background-repeat:no-repeat,no-repeat;
background-position:left 10% top 200px,right 10% top 3%;
background-size:35%,35%;
}
#sec02 h2{color:#000; position:absolute; left:10%; top:5%; width:100px; height:auto; background:url(../img/bubble.svg) no-repeat 0 0; background-size:contain; text-align:center; padding:.5em 0 1em; z-index:1;}
#sec02 figure{width:220px; height:220px; background: url(../img/mero.jpg) no-repeat center center; background-size:cover;
border:1px solid #000; box-shadow:4px 7px 0px 0px rgba(139,0,255,0.9); border-radius:50%; margin:0 auto; position:relative;}
#sec02 figure span.name{position:absolute;right:0;bottom:10%; display:inline-block; background-color:#fff; padding:.2em .3em; font-size:140%; transform: rotate(5deg);
border:1px solid #000; box-shadow:4px 4px 0px 0px #000;}
#ambassador h5,#sec02 h3,#sec02 h4{padding:.25em 0 .25em; font-size:140%;
color:#000; text-shadow: 1px 1px #fff;
font-family: "lores-9-wide", sans-serif;
font-weight: 700;
font-style: normal;
}
#sec02 p.comment{padding:0; margin:0 0 .8em;}
#sec02 p.comment span{
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0 .1em;
	line-height:170%;
	background-color:#fff;  
}
#sec02 .profile,#ambassador .profile{margin:1em auto; background-color:#fff; border-radius:40px; border:1px solid #000; box-shadow:4px 7px 0px 0px rgba(139,0,255,0.9); padding:1em;}
#sec02 .profile h4,#ambassador .profile h5{text-align:center;}
#sec02 .profile p,#ambassador .profile p{font-weight: 500; font-size:90%; padding:.5em 1em 1em;}

#sec03,#sec05 {border-bottom:3px dotted #8b00ff;}
#sec03 span.charaname{background-color:#0050ff; display:block; color:#fff; font-weight: 700; font-size:180%; width:100%; text-align:center; line-height:60px; width:55%; margin:0 auto;
font-family: "monopin-j", sans-serif;
font-weight: 700;
font-style: normal;
}
#sec03 h3{font-size:140%; width:60%; margin:0 auto; display: flex; align-items: center; /*color:#fff;*/}
#sec03 h3:before,
#sec03 h3:after {
border-top: 2px solid;
content: "";
flex-grow: 1;
}
#sec03 h3:before {
margin-right:1rem;
}
#sec03 h3:after {
margin-left:1rem;
}
#sec03 figure{margin:0 auto 1em;}
#sec03 h4{font-size:140%; color:#fff;}
#sec03 h4 span{display:inline-block; padding:.2em 1.5em; position: relative;}
#sec03 h4 span:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 2px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(-25deg);
}      
#sec03 h4 span:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(25deg);
}

#sec04 .section{padding:0 1.5em .5em;}
#sec04 .map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    height: 0;
}
#sec04 .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#sec03 .tamago{position:absolute;right:3%;top:3%; width:110px; }

#sec05 h3{padding:.5em 0 0 1em; font-size:120%; color:#46c3df; position:relative;
background: url(../img/heart2.svg) no-repeat 0 bottom; background-size:15px;}
#sec05 h4{padding:.4em 0; border:1px solid #8b00ff; color:#8b00ff; margin:2em 0 .5em; border-radius:100vh;}
#sec05 .spticket{border-radius:20px; border:1px solid #000; padding:.5em 1.25em; margin:0 0 2em;}
#sec05 .spticket h4{border-radius:0; border:none; border-top:1px dashed #333; border-bottom:1px dashed #333; color:#333; margin:1em 0 0;}
#sec05 .spticket h4:first-of-type{margin:0; border-top:none;}
#sec05 .spticket a{color:#333; text-decoration: underline;}
span.f85{font-weight:500; line-height:120% !important; display:inline-block; padding:.25em 0 0;}
#sec05 .closed{color:rgba(0,0,0,0.5); text-decoration: line-through;}

a.bn_tbsticket,a.bn_ltike{display:block; text-align:center; color:#000; font-size:125%; width:70%; background-color:#fff; border-radius:100vh; margin:1em auto .6em; padding:5% 0; border:1px solid #000; box-shadow:4px 7px 0px 0px rgba(139,0,255,0.9); transition: .3s;}
a.bn_tbsticket:hover,a.bn_ltike:hover{transform: translate(4px, 7px); box-shadow:0px 0px 0px 0px rgba(139,0,255,0.9);}
/*a.bn_tbsticket{background:#fff url(../img/tbsticket.svg) no-repeat center center; background-size:70%;}
a.bn_ltike{background:#fff url(../img/ltike.png) no-repeat center center; background-size:50%;}*/

ul.dotlist{margin:.8em auto;}
ul.asterisk{margin:.5em auto 1em; width:98%;}
ul.dotlist li,ul.asterisk li {
    list-style-type: none; 
    position: relative;
    padding-left:.65em;
    font-size:85%;
    font-weight:500;
    margin:0 0 .5em;
    line-height:145%;
}
ul.dotlist li:before {
    border-radius: 50%;
    width: 3px;
    height: 3px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #000;
}
ul.asterisk li:before {
    display: block;
    position: absolute;
    content: "※";
    left: -.5em;
    top: 0;
}

/*#sec06{
background-image:url(../img/kawaii.png),url(../img/phone.png);
background-repeat:no-repeat,no-repeat;
background-position:right 20% bottom 11.5%,right 5% bottom 2.5%;
background-size:125px auto,110px auto;
}*/
#sec06 h3{padding:.6em 0 0; font-size:150%; text-align:center;}
#sec06 h3 span{background-size:auto 8px; padding:0 0 .5em;}
#sec06 ul{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin:1em 0 0;}
#sec06 ul li{width:48%; margin:0 0 3%; border-radius:12px; overflow: hidden; border:1px solid #8b00ff;
box-shadow:2px 2px 0px 0px rgba(139,0,255,0.9);}

.bn_megu{position: relative; margin:1.5em auto 1em; width:70%; height:0; padding:22.75% 0 0;}
.bn_megu a{display:block; background: url(../img/bn_megu.png?1) repeat center center; background-size:cover; transition: 0.5s;
position:absolute;left:0;top:0; width:100%; height:100%;}
.bn_megu a:hover{transform: translateY(-5px);}

/*footer*/
footer{margin:0 auto; padding:1em 1.8em 3%; text-align:center;}
footer p.copy{font-size:70%; line-height:140%; display:inline-block;}
footer a,footer a:hover{color:#333;}

@media screen and (max-width: 767px) {
.contents .main h1{padding:.5em 0 0; font-size:6vw; line-height:120%;}
.contents .main p{padding:.5em 0; font-size:6vw;}
.contents .section {padding:0 6% 5%;}
.contents .section h2{font-size:7vw; padding:5% 0 1%;}
.contents .section p{padding:.5em 0; font-size:3.6vw;}

#sec01{background-size:35vw auto;}
#sec01 h2{font-size:6.5vw;}
#sec01 h2 span,#sec06 h3 span{background-size:auto 6px; padding:0 0 .4em;}
#sec01 .section:first-of-type {padding:0 6% 2.5%;}
#sec01 #trailer{margin:8vw auto 3%;}

.swiper-button-prev,
.swiper-button-next {
  height: 9vw;
  width: 7vw;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  height: 9vw;
  width: 7vw;
}

#ambassador h2 + p{font-size:4.1vw; margin:4% 0 3%;}
#ambassador h4{font-size:3.8vw; padding:4% 0 4%;}
#ambassador figure.daichi,#ambassador figure.kyuma{width:60%; height:0; padding:60% 0 0; margin:9vw auto 1vw;}
#ambassador p.comment {
    padding:5%;
    margin:2.5% auto 5%;
}
#ambassador p.comment::before,
#ambassador p.comment::after {
    width: 18%;
    height: 30%;
}
#ambassador .profile:first-of-type{margin:.5em auto 0 !important;}

#sec02 {padding-top:10%;
background-position:left 10% top 35vw,right 10% top 2.5%;
background-size:35%,35%;
}
#sec02 h2{font-size:6vw; left:12%; width:24%; top:4%; padding:4% 0 5%; height:auto;}
#sec02 p.comment{font-size:3.5vw; margin:0 0 2%;}
#sec02 figure{width:60%; height:0; padding:60% 0 0;}
#sec02 figure span.name{font-size:5vw; box-shadow:2px 3px 0px 0px #000;}
#sec02 figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
#ambassador h5,#sec02 h3,#sec02 h4{font-size:5.4vw;}
#ambassador .profile,#sec02 .profile{padding:4%;}
#ambassador .profile p,#sec02 .profile p{font-size:3.4vw;}

.tab-switch > label {
    border-radius:2vw 2vw 0 0;
    font-size:3.6vw;
}
#ambassador ul.movbox li .play_btn { width:8vw; height:8vw;}
#ambassador ul.movbox li .play_txt { font-size:4vw;}

#sec03 p,#sec04 p{font-size:4vw !important;}
#sec04 .section{padding:2% 5% 2%;}
#sec03 .tamago{width:24%; top:2.5%;right:2.5%;}

#sec05 h3{font-size:4.3vw; padding:.5em 0 0 5%; background-size:4.25%;}
#sec05 h4{font-size:4.3vw;}
#sec05 .spticket{border-radius:5vw; padding:.5em 5%; margin:0 0 5%;}
span.f85,span.f80c{font-size:3vw !important;}
a.bn_tbsticket,a.bn_ltike{font-size:4.3vw; box-shadow:3px 5px 0px 0px rgba(139,0,255,0.9); margin:5% auto 2.25%;}
a.bn_tbsticket:hover,a.bn_ltike:hover{transform: translate(3px, 5px);}
ul.dotlist li,ul.asterisk li {
    font-size:75%;
}

#sec06{background-size:22vw auto,20vw auto;}
#sec06 h3{font-size:5.8vw; line-height:120%;}
#sec06 ul li{border-radius:2vw;}

.bn_megu{margin:5% auto;}

footer{padding:2.5% 2% 12%;}
footer p.copy{background:none; font-size:2.1vw; line-height:130%;}
}

.animation{
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.animation.active{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.animation1{opacity:0;
animation:anime1 1s ease 0.1s 1 forwards;
}
@keyframes anime1 {
    0% {opacity:0; transform: translate3d(0, 100px, 0); -webkit-transform: translate3d(0, 100px, 0);}
    100% {opacity:1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomout {
  from {opacity: 0; transform: scale(2,2);}
  to {opacity: 1; transform: scale(1,1);}
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pikopiko {
  0% {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(12deg);
  }
}

@keyframes showTextFromBottom{
  0%{
    transform: translateY( 100% );
  }
  50%{
    transform: translateY( -20% );
  }
  100%{
    transform: translateY( 0px );
  }
}
.anime-up.displayed span{
  animation: showText 1s backwards;
  display: inline-block;
}
.anime-up.displayed > span{
  overflow: hidden;
}
.anime-up.displayed > span > span{
  animation: showTextFromBottom 0.5s backwards;
}

.animate {
    opacity: 0;
}
.show {
    opacity: 1;
}

/*lazyload*/
.lazyload, .lazyloading { opacity: 0;}
.lazyloaded { opacity: 1; transition: all 1000ms; max-width: 100%;}

.nocontxt,figure { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img, .nocontxt div, figure img { pointer-events: none;}
.img-m{width:60%; margin:0 auto;}
.img-ml{width:80%; margin:0 auto;}
.img-l{width:90%; margin:0 auto;}

/* Navbar & Navmenu color */
@media screen and (min-width:768px) {
  .header {
    display: none;
  }
}

.drawer-wrap{
    position: absolute;
    top: 0;
    right: 0;	
}
#drawer-content {
	overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 40;
    width:70vw;
    height:100vh;
    transition: all 0.3s ease-in-out 0s;
 transform: translateX(100%);
 /*background-color:#eee;*/
}
#drawer-content .nav_wrapper {
  position: relative;
  top:15%;
  right:-2%;
  width:95%;
  margin:0 0 0 auto;
  border-radius:10vw 0 0 10vw;
  box-shadow: 0px 0px 0px 3px #fff inset,4px 7px 0px 0px rgba(139,0,255,0.9);
}

#drawer-checkbox:checked ~ #drawer-content {
  transform: translateX(0);
}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 39;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #feed00;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
  display: block;
  opacity: 0.8;
}

#drawer-checkbox {
  display: none;
}
#drawer-icon {
  display: inline-block;
  position: fixed;
  top:0;right:0;
  cursor: pointer;
  padding: 20px 12px 30px 20px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color:rgba(139,0,255,0.9);
  border-radius:0 0 0 60px;
  z-index:100;
}
.navicon {
  background: #fff;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  z-index:111;
  border-radius:4px;
}
.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #fff;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  border-radius:4px;
}
.navicon:before {
  top: 9px;
}
.navicon:after {
  bottom: 9px;
}

#drawer-checkbox:checked ~ #drawer-icon .navicon:before {
  transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon .navicon:after {
  transform: rotate(45deg);
}
#drawer-checkbox:checked ~ #drawer-icon:not(.steps) .navicon:before {
  top: 0;
}
#drawer-checkbox:checked ~ #drawer-icon:not(.steps) .navicon:after {
  bottom: 0;
}
#drawer-checkbox:checked ~ #drawer-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

@media screen and (max-width: 767px) {
#drawer-content {
    width:90vw;
}
#drawer-content .nav_wrapper {
  position: relative;
  top:15%;
  right:-2%;
  width:95%;
  margin:0 0 0 auto;
  box-shadow: 0px 0px 0px 3px #fff inset,4px 7px 0px 0px rgba(139,0,255,0.9);
  padding:15% 0 5%;
}
#drawer-content .heart{width:14%; }
#drawer-content .star{width:20%;}
#drawer-content .nav_wrapper .logo{width:65%; height:0; padding:32% 0 0; position:absolute; left:18%; top:-16%;}
#drawer-content .nav_wrapper .nav_list {
  width:80%;
  margin:0 auto;
}
#drawer-content .nav_wrapper .nav_list li a {font-size:5.6vw;}
#drawer-content .nav_wrapper .sns{margin:6% auto 0;}
#drawer-content .nav_wrapper .sns a{width:10vw; height:10vw;}
}


a.btn span {
	color: #8b00ff;
	background: linear-gradient(transparent 70%, rgba(255, 126, 173, 0.4) 70%);
    padding: 0 .2em .1em;
	font-weight: 800;
}