@charset "utf-8";
/*----------------------------------------*----------------------------------------
	common
----------------------------------------*----------------------------------------*/

.h-bottomline{
	border-bottom: dotted 3px #42210b;
	padding-bottom: .6em;
}

h1,h2{
	font-weight: bold;
}

.movietitle{
	margin-top: 5px;
}

.fluidimg{
	display: block;
  position: relative;
  overflow: hidden;
}

iframe{
	margin: 0 auto;
  display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	width: 100%;	
}

.fluid_16by9:before { 
	display: block;
  content: "";
	padding-top: 56.25% !important; 
}

a:hover{
	opacity: .6;
}

/*----------------------------------------*----------------------------------------
	spinheader
----------------------------------------*----------------------------------------*/
#spinHeader {
	background: linear-gradient(#e60012, #7e001f);	
 }

#spintop{
	color: #42210b;
	}

@media screen and (max-width: 767px) {
#spinHeader {
	padding: 1.3em 0;
	}	
#spintop{
	width: 100%;
	background: url("img/topimage_bg__sp.png") repeat-y top left;
	background-size: 100% auto;
	padding-top: 1em;
	}
	
.spintop_head{
	background: url("img/topimage_bgHead__sp.png") no-repeat top center;
	background-size: 100% auto;
	padding:25% 0 0;
	margin-bottom: 0px !important;
	}
.spintop_foot{
	background: url("img/topimage_bgFoot__sp.png") no-repeat bottom center;
	background-size: 100% auto;
	padding:20% 0 0;
	}	
}

@media print, screen and (min-width: 768px) {
#spinHeader {
	padding: 25px 0 20px;
	}
	
#sintop .spintop_head,
#sintop .spintop_foot{
	display: none;
	}	
	
#spintop{
	background: url("img/topimage_bg.png") no-repeat top center;
	background-size: 100%;
	min-height: 636px;
	color: #42210b;
	padding: 5.5em 3.4em 4.6em;
	}

#spinHeader .container{
	position: relative;	
	}		
}

@media screen and (max-width: 767px) {
#spinHeader .container{
	position: relative;	
	}			
	img.compas{
		position: absolute;
		top: 20px;
		left: 30px;
		width: 20%;
		z-index: 9999 !important;
	}	
	img.logoBg{
		position:absolute;
		top: 40px;
		right: 20px;
		width: 30%;
   	z-index: 9999 !important;
	}
	img.key{
		position: absolute;
		bottom: 150px;
		right: 15px;
		width: 14%;
		z-inedx: 9999 !important;
	}
}
/*----------------------------------------*
 	topimage__ball
----------------------------------------**/	
@media screen and (max-width: 767px) {
.topimage_ball{
	position: absolute;
	bottom: -60px;
	left: 0;
	}

	.topimage_ball .circleBg{
		text-align: center;
		min-width: 153px;
		background: #e60012;
		border-radius: 50%;
		color: #fff;
		padding: 1em 0 1.2em;
		font-size: 1.5rem;
		position: absolute;
		left: 100px;
		bottom: 20px;
		}
}

@media print, screen and (min-width: 768px) {
.topimage_ball{
	position: absolute;
	bottom: -132px;
	left: -60px;
	}

	.topimage_ball .circleBg{
		text-align: center;
		min-width: 280px;
		background: #fff000;
		border-radius: 50%;
		padding: 1em 0 1.2em;
		font-size: 2.5rem;
		position: absolute;
		right: 0px;
		bottom: 460px;
		color: #000;
		}	
	
	.topimage_ball .circleBg span{
		width: 180px !important;
		display: block;
	  margin:0 auto;
		text-align: center;
	}
}

/*----------------------------------------*
 	spinkaiten
----------------------------------------**/
@media screen and (max-width: 767px) {
img.ballkaiten{
	width: 35%;
	transform: rotate( 10deg);		
	}	
}
@media print, screen and (min-width: 768px) {
img.ballkaiten{
	width: 300px;
	transform: rotate( -15deg);
	z-index: 3;
	}
}

/*----------------------------------------*
 	spintop h1
----------------------------------------**/	
#spintop h1{
	color: #e60012 !important;
	font-weight: 800;
	}	
	
#spintop h1 span{
	font-weight: normal;
	color: #42210b;
	}

@media screen and (max-width: 767px) {
#spintop h1{
	font-size: 2.6rem;
	line-height: 1.3;
	margin-bottom: .6em;
	}	
	
#spintop h1 span{
	font-size: 1.6rem;
	font-weight: normal;
	color: #42210b;
	display: block;
	margin-bottom: .5em;
	}	

}
@media print, screen and (min-width: 768px) {
#spintop h1{
	font-size: 5.4rem;
	line-height: 1.3;
	margin-bottom: .6em;
	vertical-align: baseline;		
	}	
	
#spintop h1 span{
	font-size: 2.3rem;
	display: block;
	margin-bottom: .5em;
	}
}

/*----------------------------------------*
 	spintop__text
----------------------------------------**/	
.spintop__text{
font-weight: 600;
}

@media screen and (max-width: 767px) {
.spintop__text{
	font-size: 1.6rem;
	padding: 1.3em 0 0;
	line-height: 1.6;
	}
}

@media print, screen and (min-width: 768px) {
.spintop__text{
	font-size: 2.3rem;
	padding: 1em 0;
	line-height: 1.8;
	vertical-align: baseline;	
	}
.spintop__text span{
		vertical-align: baseline;
	}	
}

/*----------------------------------------*
 	line_s line_m
----------------------------------------**/	
@media screen and (max-width: 767px) {
.line_s, .line_m{
	margin:0 auto;
	}
.line_m{
	width: 76%;
	}
.line_s{
	width: 50%;
	}
}


/*----------------------------------------*
 	instagram
----------------------------------------**/
#spintop .box_instagram{
	background: #fff;
	border-radius: 9.725px;
	display: flex;
	}

.hashtag{
	display: block;
	color: #e60012;
	}

@media screen and (max-width: 767px) {
#spintop .box_instagram{
	padding: 8px 5px;
	font-size: 1.16rem;
	width: 70%;
	float: right;
	margin-top: 1em;
	}	
	
#spintop .box_instagram img{
	width: 35px;
	height: 35px;
	}
	
.hashtag{
	font-size: 1.4rem;
	}
	
#spintop .text_instagram{
	margin-left: 8px;
	}	
}

@media print, screen and (min-width: 768px) {
#spintop .box_instagram{
	position: absolute;	
	bottom: 0px;
	right: 15px;
	width: 340px;
	background: #fff;
	border-radius: 9.725px;
	display: flex;
	padding: 20px 10px 20px 20px;
	}
	
#spintop .box_instagram img{
	width: 90px;
	height: 90px;
	}
.hashtag{
	font-size: 2.8rem;
	}	
#spintop .text_instagram{
	margin-left: 15px;
	}	
}


/*----------------------------------------*----------------------------------------
 basic
----------------------------------------*----------------------------------------*/
#basic .text_lead{
	text-align: center;
	color: #e60012;
	}

#basic h1{
	text-align: center;
	color: #42210b !important;
	}

#basic .basic_xy{
	background: url("img/basic_xy.png") no-repeat top center;
	background-size: cover;
}

#basic .moveud,
#basic .moverl{
	font-weight: bold;
	color: #454545;
}

@media screen and (max-width: 767px) {
#basic{
	padding-top: 60px;
	}
	
#basic .text_lead{
	font-size: 2rem;
	margin-bottom: 60px;
	}	
	
#basic h1{
	font-size: 2rem;
	padding-bottom: .6em;
	}

#basic h2{
	font-size: 1.6rem;
	}	
	
#basic img.basicpatternImg{
	width: 50%;
	margin:0 auto;
	}	
#basic .moveud{
	padding-top: 10px;
	}
#basic .moverl{
	margin-top: 76%;
	margin-bottom: 20px;
	}	
}
@media print, screen and (min-width: 768px) {
#basic{
	padding-top: 100px;
	}
	
#basic .text_lead{
	font-size: 2.2rem;
	margin-bottom: 60px;
	}
	
#basic h1{
	font-size: 2.2rem;
	padding-bottom: .6em;
	}
	
#basic h2{
	font-size: 1.8rem;
	}
	
#basic .moveud,
#basic .moverl{
	font-size: 1.9rem;		
	}

#basic .moveud{
	padding-top: 10px;
	}
#basic .moverl{
	margin-top: 72%;
	}
}

/*----------------------------------------*
	step
----------------------------------------**/
#step{
	background: #bd1a21;
	color: #fff;
	}

#step h2{
	color: #fff;
	}

#step h2 span.num{
	/*border-right: 2px solid #fff;*/

	}
#step h2 span.num:after{
	content:"|";
		padding-left: .4em;
	margin-right: .4em;
}

@media screen and (max-width: 767px) {
#step h2{
	margin-bottom: 5px;
	font-size: 1.6rem;
	}
	
#step h2 span.num{
	font-size: 2rem;
	margin-left: .2em;
	}	
}

@media print, screen and (min-width: 768px) {
#step{
	padding: 60px 0;
	}
	
#step h2{
	font-size: 1.8rem;
	color: #fff;
	}

#step h2 span.font-small{
	font-size: 1.5rem;
	padding-right: .4em;
	}

#step h2 span.num{
	font-size: 2.5rem;
	}

#step .movietitle{
	font-size: 1.1rem;
	}
}

/*----------------------------------------*
	ouyou
----------------------------------------**/
#ouyou .goalBg{
	background: #bd1a21;
	color:#fff;
}

#ouyou .fullkaiten{
	position: relative;
}

#ouyou h1{
	color: #42210b !important;
}

#ouyou .fukidashi{
	background: url("img/clearimg.png") no-repeat 0 0;
	background-size: cover;
	color: #111;
	text-align: center;
	transform: rotate( -10deg);
	font-weight: bold;
}

@media screen and (max-width: 767px) {
#ouyou .goalBg{
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
	}
#ouyou .ouyouImg01_sp{
	width: 70%;
	margin:0 auto;
	}
#ouyou .fukidashi{
	width: 64%;
	font-size: 1.6rem;
	padding: 1.9em 0 2.0em 0;
	margin:0 auto 20px;
	}		
#ouyou h2{
	font-size: 1.6rem;
	}	
}

@media print, screen and (min-width: 768px) {
#ouyou .fukidashi{
	position: absolute;
	z-index: 999;	
  right: 0;
	bottom: 100px;
  width: 280px;
  padding: 2.4em 0 2.5em;
  font-size: 2rem;
}
	
#ouyou .container{
	width: 940px;
	position: relative;
	}
	
#ouyou h1{
	line-height: 1.3 !important;
	}
	
#ouyou .kanseiImg{
	background: url("img/kansei.png") no-repeat top center;
 	background-size: cover;
	}
#ouyou .kansei_title{
	padding-top: 86%;
	font-size: 1.6rem;
	}	
	
#ouyou .fa-fullkaiten{
	font-size: 2rem;
	position: absolute;
  top: 5px;
	left: 22px;
	font-weight: bold;
	letter-spacing: 1.2px;	
	vertical-align: baseline;
	}
	
#ouyou .fa-puzzle{
	font-size: 4.6rem;
	color: #fff;
	text-shadow: 2px 2px 2px #000,
             -2px 2px 2px #000,
             2px -2px 2px #000,
             -2px -2px 2px #000;
	margin-right: .1em;	
	}	
#ouyou .fa-brain{
	font-size: 3.6rem;
	color: #f29600;
	text-shadow: 2px 2px 2px #000,
             	 -2px 2px 2px #000,
               2px -2px 2px #000,
               -2px -2px 2px #000;
	margin: 0 .1em;		
	}
	#ouyou .fa-full{
		font-size: 4.3rem;
		color: #fff000;
		text-shadow: 2px 2px 2px #000,
            		 -2px 2px 2px #000,
             		2px -2px 2px #000,
             		-2px -2px 2px #000;	
	}	
	
#ouyou .goalBg{
	padding:1.2em 1em;
	}
#ouyou .col--3-pc{
	width: 24%;
	}	
#ouyou .col--5-pc{
	width: 42.66666667%;
	}	
#ouyou .fullkaiten img{
		margin: 80px 0 0 105px;
	}
	
#ouyou h2{
	font-size: 1.8rem;
	}
}

/*----------------------------------------*
	complete
----------------------------------------**/
#complete{
  background: linear-gradient(#e60012, #7e001f);
	overflow: hidden;
	}

#complete .completeBg{
	color: #42210b;
 }

#complete h1{
	color: #e60012 !important;
	}

#complete h1 p.font_m{
	font-weight: normal;
	color: #42210b;
	display: block;
	}

#complete .font_note{
	color: #c1272d;
	}

#complete .font_en{
	color: #e60012 !important;
	}


@media screen and (max-width: 767px) {
#complete{
	overflow: hidden;
	padding: 1.3em 0;
	}
#complete .completeBg{
	width: 100%;
	background: url("img/topimage_bg__sp.png") repeat-y top left;
	background-size: 100% auto;
	position: relative;	
	}
#complete .complete_head{
	background: url("img/topimage_bgHead__sp.png") no-repeat top center;
	background-size: 100% auto;
	padding: 15% 0 0;
	min-height: 56px;	
	}
#complete .complete_foot{
	background: url("img/topimage_bgFoot__sp.png") no-repeat bottom center;
	background-size: 100% auto;
	padding: 15% 0 0;
	}	
	
#complete h1{
	font-size: 2.2rem;
	line-height: 1.3;
	margin-bottom: .6em;
	}	
	
#complete h1 p.font_m{
font-size: 1.4rem;
	margin-bottom: 0;
	}	
	
#complete .font_en{
	font-size: 1.8rem;
	}
	
#complete .complete__text{
	font-size: 1.3rem;
	padding: 1.3em 0 0;	
	}	
	
#complete .balloonL{
	width: 40%;	
	position: absolute;
	bottom: -20px;
	left: -60px;
	}
	
#complete .balloonR{
	width: 40%;
	position: absolute;
	bottom: -20px;
	right: -60px;
	}		
}

@media print, screen and (min-width: 768px) {
#complete{
	padding: 25px 0 20px;
	}

#complete .completeBg{
	background: url("img/complete_bg.png") no-repeat top center;
	background-size: auto, 960px;
	min-height: 636px;
	padding: 5.5em 3.4em 4.6em;
 }

#complete h1{
	font-size: 3.9rem;
	line-height: 1.4 !important;
	margin-bottom: .6em;
	}
	
#complete h1 p.font_m{
	font-size: 2.3rem;
	font-weight: normal;
	color: #42210b;
	display: block;
	margin-bottom: 0;
	}

#complete .font_en{
	font-size: 3.2rem;
	color: #e60012 !important;
	}
	
#complete .complete__text{
	font-size: 1.9rem;
	padding: 2em 0 1em;	
	}
	
#complete .balloonL,	
#complete .balloonR{
	display: none;
	}		
}

/*----------------------------------------*
 	instagram
----------------------------------------**/
#complete .box_instagram{
	background: #fff;
	border-radius: 9.725px;
	display: flex;
	}

@media screen and (max-width: 767px) {
	#complete .box_instagram{
	width: 70%;
	background: #fff;
	border-radius: 9.725px;
	display: flex;
	padding: 12px 20px;
	margin: 2em auto 0;
	line-height: 20px;
	font-size: 1.2rem;
	}

#complete .box_instagram img{
	width: 30px;
	height: 30px;
	}
	
#complete .text_instagram{
	margin-left: 10px;
	}	
}

@media print, screen and (min-width: 768px) {
#complete .box_instagram{
	width: 460px;
	background: #fff;
	border-radius: 9.725px;
	display: flex;
	padding: 12px 20px;
	margin: 2em auto 0;
	line-height: 40px;
	}

#complete .box_instagram img{
	width: 40px;
	height: 40px;
	}

#complete .text_instagram{
	margin-left: 15px;
	}
}
/*----------------------------------------*----------------------------------------

----------------------------------------*----------------------------------------*/

@media screen and (max-width: 767px) {

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

}