@charset "utf-8";


body {
	height: 100%;
	overflow: scroll;
/*	background-size: auto 15.7%;*/
/*	background-image:url(../images/main/bg_top.png);*/
	}

/*********************YOUTUBE******************/
.douga{
height: 0;
overflow: hidden;
padding-bottom: calc(315 / 560 * 100%);
position: relative;
}


.douga iframe{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
  }
/*********************YOUTUBE******************/
header{
position: absolute;
z-index: 999;
}
@keyframes title {
	0% {
		scale:0%;
		opacity:0;
		transform: translate(0px, 0px) rotate(0deg);
	}
	50% {
		scale:0%;
		opacity:0;
		transform: translate(0px, 0px) rotate(0deg);		
	}
	75% {
		scale:120%;
		opacity:1;
		transform: translate(0px, 0px) rotate(0deg);
	}
	78% {
		scale:100%;
		opacity:1;
		transform: translate(0px, 0px) rotate(0deg);
	}
	80% {
		scale:100%;
		opacity:1;
		transform: translate(20px, 20px) rotate(1deg);
	}
	82% {
		scale:100%;
		opacity:1;
		transform: translate(0px, 20px) rotate(0deg);
	}
	84% {
		scale:100%;
		opacity:1;
		transform: translate(20px, 0px) rotate(-1deg);
	}
	86% {
		scale:100%;
		opacity:1;
		transform:  translate(0px, 0px) rotate(0deg);
	}
	88% {
		scale:100%;
		opacity:1;
		transform: translate(20px, 20px) rotate(1deg);
	}
	90% {
		scale:100%;
		opacity:1;
		transform: translate(0px, 20px) rotate(0deg);
	}
	92% {
		scale:100%;
		opacity:1;
		transform: translate(20px, 0px) rotate(-1deg);
	}
	94% {
		scale:100%;
		opacity:1;
		transform:  translate(0px, 0px) rotate(0deg);
	}
	96% {
		scale:100%;
		opacity:1;
		transform: translate(20px, 20px) rotate(1deg);
	}
	98% {
		scale:100%;
		opacity:1;
		transform: translate(0px, 20px) rotate(0deg);
	}
	 99.9%,
  to  {
		scale:100%;
		opacity:1;
		transform:  translate(0px, 0px) rotate(0deg);
	}
}
@keyframes show {
	0% {
		transform:translate(0,0);
		opacity:0;
	}
	80% {
		transform:translate(0,0);
		opacity:0;
	}
	 99.9%,
  to  {
		transform:translate(0,0);
		opacity:1;
	}
}




.cp_tab {
	display: block;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin: 1em auto;
	overflow: hidden;
}
.cp_tab input[type='radio'] {
	border-bottom: 4px solid rgba(239, 237, 239, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	        appearance: none;
	display: block;
	width: 100%;
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.cp_tab [type="radio"]:hover,
.cp_tab [type='radio']:focus {
	border-bottom: 4px solid #fff;
}
.cp_tab [type='radio']:checked {
	border-bottom: 6px solid #ff7a9a;
    background:#fff;
}
.cp_tab [type='radio']:checked + .cp_tabpanel {
	opacity: 1;
}
.cp_tab [type='radio'] + .cp_tabpanel {
	display: block;
	opacity: 0;
	padding: 2rem 0;
	width: 90%;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels {
	width: 50%;
}
.cp_tab .cp_tabpanels [type='radio'] + .cp_tabpanel {
	width: 200%;
	margin-left: 200%;
}
.cp_tab .cp_tabpanels [type='radio']:checked + .cp_tabpanel {
	margin-left: 0;
}
.cp_tab .cp_tabpanels:last-child [type='radio'] + .cp_tabpanel {
	margin-left: 100%;
}
.cp_tab .cp_tabpanels:last-child [type='radio']:checked + .cp_tabpanel {
	margin-left: -100%;
}
.shiro{
 background: rgba(255,224,226,0.8);
 border-radius: 20px;
 padding: 2vw;
 width: 80%;
 margin: 30px auto;
}
/**************** PC ****************/

/* PC用 */


@media screen and (min-width:769px){

/**************** BACKGROUND ****************/
.bg{
 margin-top: 128px;
 min-width:1200px;
 background: url(../img/bg.png);
 background-size: cover;
 background-position:center;
 background-attachment: fixed;
 }
/**************** BACKGROUND ****************/

/**************** HEADER ****************/
#header{
 text-align:center;
 position: relative;
 overflow: hidden;
 
 }
.main{
	width:1100px;
 position:relative; 
 margin:0 auto;
 transform-origin:center top;
 animation:show 2s both;
 padding-top: 170px;
 z-index: 3;
 }
.headerinner{
 width:1100px;
 margin: 0 auto;
}
.copy01{
 position: relative;
 transform-origin:center top;
 animation:title 2s both;
 display: inline-block;
 z-index: 4;
 
}
.copy02{
 transform-origin:center top;
 animation:show 3s both;
 right: 0;
 z-index:6;
  display: inline-block;

}
.copy03{
 animation:show 1s both;
 margin-right: -700px;
 margin-top: -100px;
 position:relative; 
 z-index: 5;
  display: inline-block;

}
.catchcopy{
 position:absolute;
 text-align:left;
 width:100%; 
}

#header #sns { position:absolute; padding:0; margin-top:-65.5em; right: 35.2em; z-index:999;}
#header #sns p { float:none;  left:1.6em;}
.sp{
 display: none;
}
/**************** HEADER ****************/

/**************** MENU ****************/
.navibase{
 background: #ff7a9a;
 min-width: 1200px;
 text-align: center;
}
.nav{
 width: 1200px;
 text-align: center;
 margin: 0 auto;
 position: relative;
 z-index: 50;
}

.navbutton{
 display: inline-block;
 text-align: center;
 font-size: 25px;
font-family: 'Mochiy Pop One', sans-serif;
}
.navbutton a{
 text-decoration: none;
 display: block;
 margin:5px 40px;
 color: #fff;
 }
.navbutton a:hover{
 color: #ffa5bb;
 }
 .fixed {
    position: fixed;
    top: 125px;
    width: 100%;
    z-index: 10;
}
/**************** MENU ****************/

/**************** CONTAINTS ****************/
.wrap{
 min-width: 1200px;
 margin: 0 auto;
 text-align: center;
 }
.bnrarea{
 margin: 30px auto;
  width: 1200px;
}
.bnrarea img{
 display: inline-block;
 margin: 5px 10px;
 width: 550px;
}

 
.container{
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	 width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
    
	}

/* 画面内に入った状態 */
.container.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
	
a.anchor{
    display: block;
    padding-top: 185px;
    margin-top: -185px;
}
.wrap h1{
 line-height: 2.5;
 font-size: 4.5em;
font-family: 'Mochiy Pop One', sans-serif;
 color: #f82f5f;
 margin: 50px auto  0px auto;
 opacity : 0.1;
 transform : translate(0, 50px);
 transition : all 500ms;
 -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
  
}
.wrap h1.scrollin{
	opacity : 1;
	transform : translate(0, 0);
}
.container img{
  width: 45%;
  display: inline-block;
  vertical-align: middle;
}	
.bold{
 line-height: 1.3;
 font-size: 20px;
 color: #ffe0e2;
  display: inline-block;
  margin-left: 30px;
 width: 40%;
 text-align: center;
 vertical-align: middle;
  position:relative;
    background:#ffe0e2;
    padding:20px;
    text-align:left;
    color:#f82f5f;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
}
.bold:after{
   border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(206, 255, 156, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:30px;
    border-right-width:30px;
    margin-top: -10px;
    border-left-color:#ffe0e2;
    left:100%;
    top:50%;

}
.font{
    font-size:40px;

}
.arrow_box{
 line-height: 1.3;
 font-size: 20px;
 color: #f82f5f;
  display: inline-block;
  margin-left: 30px;
 width: 40%;
 text-align: center;
 vertical-align: middle;
    position:relative;
    background:#ffe0e2;
    padding:20px;
    text-align:left;
    color:#f82f5f;
    font-size:40px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
}
.arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(206, 255, 156, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:30px;
    border-right-width:30px;
    margin-top: -10px;
    border-right-color:#ffe0e2;
    right:100%;
    top:50%;
}
.text{
 font-size: 20px;
 color: #000;
 margin: 0 auto;
}

.container p{
 line-height: 1.3;
 color: #000;
  display: inline-block;
 width: 40%;
 margin:10px;

}
.about01{
 padding-left: 30px;
}
.cast{
 display: inline-block;
 width: 40%;
}
.cp_tab .cp_tabpanels label {
	cursor: pointer;
	display: block;
	line-height: 1em;
	padding: 2rem 0;
	text-align: center;
font-family: 'Mochiy Pop One', sans-serif;
    font-size: 3em;
    background: rgba(255,255,255,0.8);
    margin:0 30px;
    border-radius: 20px;
}
}
/**************** PC ****************/





/**************** MOBILE ****************/

/* モニター幅768px以下 */

/**************** MOBILE ****************/

@media screen and (max-width:768px), print{

/**************** BACKGROUND ****************/
.bg{
 padding-bottom: 50px;
 padding-top: 125px;
 }
.bg::before {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.about01{
 font-size: 20px;
}
.header{
 width: 100%;
 overflow: hedden;
 text-align: center; 
}
/**************** BACKGROUND ****************/

/**************** HEADER ****************/

.copy01 img,.copy02 img,.main img{
 width: 90%;
 display: block;
 margin: auto;
}
.main{
 margin-top: -85vw;
 position: relative;
 z-index: 1;
 margin-bottom: 17vw;
 animation:show 2s;
}
.copy02 img{
 margin-top: 25vw;
 position: relative;
 z-index: 3;
 animation:show 1.5s;
}
.copy01{
 position: relative;
 z-index: 3;
 animation:title 1.5s;
}
.copy03 img{
 width: 100%;
  position: relative;
 z-index: 4;

}
/**************** HEADER ****************/
/**************** MENU ****************/
.navibase{
 background: #374301;
 text-align: center;
 }
.nav{
 width: 100%;
 text-align: center;
 margin: 0 auto;
}

.navbutton{
 background: #f82f5f;
 width: 50%;
 display: inline-block;
 text-align: center;
  margin: 0 auto;
  float:left;
 text-align: center;
 font-size: 1em;
font-family: 'Mochiy Pop One', sans-serif;
 border: solid 1px #fff;
}

.navbutton a{
 text-decoration: none;
 display: block;
 margin:10px auto;
 color: #fff;
 position: relative;
 z-index: 5;
 }
.navbutton a:visited{
 color: #fff;
}
.navbutton a:hover{
 color: #ff7a9a;
 }
/**************** MENU ****************/

/**************** CONTAINTS ****************/

.wrap{
 width: 90%;
 margin: 0 auto;
 text-align: center;
 }
.container{
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
    margin: 0 auto;
	}


/* 画面内に入った状態 */
.container.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
	
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

.container img{
 width: 100%;
}


.wrap h1{
 font-size: 2.3em;
 font-weight: bold;
font-family: 'Mochiy Pop One', sans-serif;
 color: #f82f5f;
 margin: 50px auto  0px auto;
 opacity : 0.1;
 transform : translate(0, 50px);
 transition : all 500ms;
  
}
.wrap h1.scrollin{
	opacity : 1;
	transform : translate(0, 0);
}
.bold,.arrow_box{
    position:relative;
    background:#ffe0e2;
    padding:20px;
    text-align:center;
    color:#000;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    font-size: 20px;
    line-height: 1.2;
}
.bold:after,.bold:before,.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    bottom:100%;
    left:50%;
}

.arrow_box:before,.bold:before{
    border-color: rgba(30, 144, 255, 0);
    border-top-width:24px;
    border-bottom-width:24px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    border-bottom-color:#ffe0e2;
}

.text{
 font-size: 5vw;
 color: #000;
 margin: 0 auto;
}
.flex{
 display: flex;
 flex-direction: column-reverse;
}

.banner img{
 width: 100%;
}
.font{
    font-size:6vw;

    color: #f82f5f;

}
.shiro{
 width: 100%;
}
/**************** STORY ****************/
.cp_tab .cp_tabpanels label {
	cursor: pointer;
	display: block;
	line-height: 1em;
	padding: 2rem 0;
	text-align: center;
font-family: 'Mochiy Pop One', sans-serif;
    font-size: 20px;
    background: rgba(255,255,255,0.8);
    border-radius: 20px;
}
}  

