@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif;
}
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

h1{font-family: "Sawarabi Mincho";}
h2{font-family: "Sawarabi Mincho";}
h3{font-family: "Sawarabi Mincho";}
h4{font-family: "Sawarabi Mincho";}
h5{font-family: "Sawarabi Mincho";}
div{font-family: "Sawarabi Mincho";}
p{font-family: "Sawarabi Mincho";}
a{font-family: "Sawarabi Mincho";}


/*twitter アカウント名などの非表示*/
.timeline-Tweet-author  {display: none;}
.js-inViewportScribingTarget {display: none;}

/*-------------------------------------*/
.container-fluid{padding: 0px;}
.container{padding: 0px;}
.row{margin: 0px;}
.col-lg-12{padding: 0px;}
.col-md-12{padding: 0px;}
.col-sm-12{padding: 0px;}
.col-xs-12{padding: 0px;}

iframe {border:0;}

#background{
	background-color: #FFF;
}

#top{
	
}
.topsp{
	background-color: #FFF;
}

/*===pc anime ==================================*/



.grid{
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-content: space-between;
	align-content: center;	
}
.grid-item{
	
	margin: 50px;
}


.grid-item > a >img{
	
	box-shadow: 5px 5px 5px 
	rgba(0,0,0,0.1);
	
} 

#topwrap{
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
}
.imgPosition{
	width: 100%;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* pc direct link area */
.directlinkarea{
	width: 100%;
	height: auto;
	display: inline-flex;
	justify-content: space-around;
}
.directlinkcontent{
	width: 200px;
	height: 200px;
	box-shadow: 10px 10px 10px 
	rgba(0,0,0,0.4);
}

/*pc fadein content*/

.subtitlemark{
	
}

.titlefont{
	font-family:  'Gloria Hallelujah', cursive;
	color: #00695C;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
}
.innerImgDiv{
	width: 100%;
	height: auto;
	display: inline-flex;
	justify-content: center;
	
}
.innerImgDiv > img{
	margin: 5px;
	border-radius: 15px;
}

.pcinnerContent{
	width: 100%;
	height: auto;
	text-align: center;
}

.pcinnerContent > div > h2{
	font-style: italic;
	color: #616161;
}

.textCenter{
	display: inline-flex;
	justify-content: center;
}

.pcinnerContent > div > p{
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: left;
}

/*pc> index> >scadule　専用 */
.pcscaduleContent{
	width: 100%;
	height: auto;
	
}

.pcscaduleContent > div > h2{
	font-style: italic;
	color: #616161;
}

.pcscaduleContent > div > p{
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: left;
}




#pcwakuwaku{
	width: 100%;
	height: auto;
	display: inline-flex;
	justify-content: center;
}
#pcwakuwaku >img{
	box-shadow: 10px 10px 10px 
	rgba(0,0,0,0.4);
}


/*===smart phone top title & anime ==================================*/

#bgimgSP{
	width: 100%;
	height: 500px;
	text-align: center;
}

#toptitle{
	width: 100%;
	height: 100px;
	position: relative;
	top: 20px;
}
	#titleback{
		width: 100%;
		height: 100px;
		background-color: #000;
		position: absolute;
		top: 70px;
	}
	#bg-textsp{
		position: absolute;
		top: 120px;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 500;
	}

#sptopscroll{
	position: relative;
	top: 170px;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 500;
}

#ibaseki{
	width: 100%;
	height: 300px;
	position: relative;
	top: 200px;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
	#kaisya{
		display: none;
		width: 50%;
		height: auto;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%,0);
	}
	#gascar{
		display: none;
		width: 20%;
		height: auto;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 200;
		}
/*============================================*/


@media screen and (min-width:500px){
	#bgimgSP{
		display: none;
	}
	
}
@media screen and (max-width:499px){
	.ToTopArrow{
		display: none;
	}
	
}


/*--footer----------------------------------*/

#shamei{
	width: 100%;
	margin-bottom: 20px;	
	text-align: center;
}
#mark{
	text-align: left;
}

#mark > div{
	margin-bottom: 10px;
}


.footermenu{
	margin-left: 20px;
}

.footermenu > div{
	margin-bottom: 5px;
}
	
.copystyle{
	height: 30px; 
	width: 100%; 
	background-color: #FF8470; 
	color: #FFF; 
	text-align: center;
}


/* ====================== index main content  ==================  */
#spIndexContent{
	margin-top: 50px;
}

#spIndexContent > div {
	text-align: center;
	/*margin-top: 10px;*/
	position: relative;
	height: 600px;
	width: 100%;
	display: none;
}

.leftcontent{
	width: 50%;
	height: 600px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: -50%;
	overflow: hidden;
}
.leftcontent > img{
	padding: 4px;
	border-radius: 10px;
}

.rightcontent{
	width: 50%;
	height: 600px;
	background-color: #FFF;
	position: absolute;
	top: 0px;
	left: 50%;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.leftcontent2{
	width: 50%;
	height: 600px;
	background-color: #FFF;
	position: absolute;
	top: 0px;
	left: 0%;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;

}
.rightcontent2{
	width: 50%;
	height: 600px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 50%;
	overflow: hidden;
}

.rightcontent2 > img{
	padding: 4px;
	border-radius: 10px;
}

.innerContent{
	width: 100%;
	height: auto;
}

.innerContent > div > h4{
	font-style: italic;
	color: #616161;
}
.innerContent > div > p{
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: left;
}
.righttext{
	text-align: left;
}
.righttext2{
	text-align: left;
	padding: 10px;
}

.scroll-black{
	width: auto;
	height: auto;
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 900;
}

.scroll-black img{
	width: 50%;
	height: 50%;
}

.scroll-black2{
	width: auto;
	height: auto;
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 900;
}

.scroll-black2 img{
	width: 50%;
	height: 50%;
}

.scroll-black3{
	width: auto;
	height: auto;
	position: absolute;
	top: 73%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 900;
}

.scroll-black3 img{
	width: 50%;
	height: 50%;
}

.photoarea{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pclohasbutton{
	display: flex;
	justify-content: center;
}
.pclohasbutton > div{
	margin: 10px;
}
.lohasbtn{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.lohasbtn div{
	margin: 0px 15px;
}

.wakuwaku{
	position: absolute;
	top: 450px;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	height: 50%;
}
.wakuwaku > img{
	box-shadow: 10px 10px 10px 
	rgba(0,0,0,0.4);
}

.wakuwakubtn{
	width: 100%;
	height: auto;
	position: absolute;
	top: 550px;
	left: 50%;
	transform: translate(-50%,-50%);
	
}


/* ====================== index main content  ==================  */


.gradationline{
	width: 100%;
	height: 2px;
	background: linear-gradient(-90deg, rgba(255,255,255,0.3), rgba(254,131,111,1.0));
	margin-top: 10px;
	margin-bottom: 15px;
}


/*  中心からグラデ*/
.linear{
	display: flex;
}
.leftWhiteToBlack{
	width: 50%;
	height: 2px;
	background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(254,131,111,1.0));
}
.leftBlackToWhite{
	width: 50%;
	height: 2px;
	background: linear-gradient(-90deg, rgba(255,255,255,0.3), rgba(254,131,111,1.0));
}
/*  ^^^^^^グラデ*/

/* phone call */
#phonecall{
	position: fixed;
	bottom: 25px;
	right: -90px;
	z-index: 3000;
}
#phone{
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: #FBC02D;
	position: relative;
	color: #FFF;
}
#phone:active{
	background-color: #FFF9C4;
	transition-delay: 500ms;
}

.phoneplace{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* hr style */
.hrDot{
	height: 1px;	
	border: none; 
	border-top: 1px #000 dotted;
}

.hrGray{
	height: 2px;	
	border: none; 
	border-top: 1px rgba(0,0,0,0.3) solid;
}
	
	
/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
	


/* ribbon effect */
.hvr-color:hover, .hvr-color:focus, .hvr-color:active{
	background-color: #FFF;
	color: #000;
	transition-duration: 500ms;
} 	
	
	
	
/*  button effect  */




*, *::before, *::after {
  box-sizing: border-box;
}

span.title {
  margin: 0 auto;
  color: #BBB;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  text-align: center;
  display: block;
}

.basicBox{
  width: 130px;
  height: 65px;
  margin: 15px auto;
  color: #4274D3;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  line-height: 65px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  cursor: pointer;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}
svg rect, svg path, svg polyline {
  fill: none;
  stroke: #4274D3;
  stroke-width: 1;
}

.basicBox:hover svg rect{
  stroke: #4274D3;
}

/* Basic Box */
svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.basicBox:hover svg rect {
  stroke-width: 3;
  stroke-dasharray: 35, 245;
  stroke-dashoffset: 38;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}

/*-slide------------------------------------------------*/	
	
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0,0,0);
}
.carousel-fade .carousel-control {
  z-index: 200;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}

 
/*---GAME--------------------------------------------*/
	


#posirela{
	width: 200px;
	height: 200px;
	position: relative;
}	


#night{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -100;
	opacity: 0;
}
	
#blank{
	position: absolute;
	background-color: #03A9F4;
	top: 0px;
	left: 0px;
}
#two{position: absolute; top: 0px; left: 50px; z-index: 0;}
#three{position: absolute; top: 0px; left: 100px; z-index: 0;}
#fore{position: absolute; top: 0px; left: 150px; z-index: 0;}
#five{position: absolute; top: 50px; left: 0px; z-index: 0;}
#six{position: absolute; top: 50px; left: 50px; z-index: 0;}
#seven{position: absolute; top: 50px; left: 100px; z-index: 0;}
#eight{position: absolute; top: 50px; left: 150px; z-index: 0;}
#nine{position: absolute; top: 100px; left: 0px; z-index: 0;}
#ten{position: absolute; top: 100px; left: 50px; z-index: 0;}
#eleven{position: absolute; top: 100px; left: 100px; z-index: 0;}
#twelve{position: absolute; top: 100px; left: 150px; z-index: 0;}
#threrteen{position: absolute; top: 150px; left: 0px; z-index: 0;}
#foreteen{position: absolute; top: 150px; left: 50px; z-index: 0;}
#fifteen{position: absolute; top: 150px; left: 100px; z-index: 0;}
#sixteen{position: absolute; top: 150px; left: 150px; z-index: 0;}
	
#start{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5000;
}