@charset "utf-8";

img{
	vertical-align: bottom;
}

html{
	background: #000;
	color: #fff;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 13px;
	line-height: 1;
}

.txt_back{
	width: 100%;
	text-align: center;
	background: #34b6cd;
	color: #fff;
	line-height: 50px;
	position: fixed;
	z-index: 10;
	cursor: pointer;
}
	@media screen and (max-width: 1263px) {
		.txt_back{
			line-height: 40px;
		}
	}

/*#content_wrap{
	padding: 50px 0 0;
}*/
	@media screen and (max-width: 1263px) {
		/*#content_wrap{
			padding: 40px 0 0;
		}*/
	}

/*###############################################

main_area

###############################################*/
#main_area{
	background: url(../img/bg.jpg) center top no-repeat;
	height: 930px;
	position: relative;
}
	@media screen and (max-width: 1263px) {
		#main_area{
			background: none;
			height: auto;
		}
	}

#main_area .logo_ttfc{
	position: absolute;
	left: 50%;
	top: 20px;
	background: red;
	width: 117px;
	height: 103px;
	display: block;
	margin: 0 0 0 -580px;
	cursor: pointer;
	background: url(../img/logo_ttfc.png) no-repeat;
}
	@media screen and (max-width: 1263px) {
		#main_area .logo_ttfc{
			left: 10px;
			margin: 0;
			width: 47px;
			height: 42px;
			background-size: 47px 42px;
			top: 8px;
		}
	}

#main_area .pc_main_box{
	height: 930px;
	background: url(../img/main.jpg) center top no-repeat;
	margin: 0 auto;
}
	@media screen and (max-width: 1263px) {
		#main_area .pc_main_box{
			display: none;
		}
	}

#main_area .sp_main_box{
	display: none;
}
	@media screen and (max-width: 1263px) {
		#main_area .sp_main_box{
			display: block;
			margin: 0 0 20px;
		}

		#main_area .sp_main_box img{
			width: 100%;
			vertical-align: top;
		}
	}

/*###############################################

cast_saff_area

###############################################*/
#cast_saff_area{
	text-align: center;
	margin: 0 0 60px;
	line-height: 1.5;
}
	@media screen and (max-width: 640px) {
		#cast_saff_area{
			padding: 0 15px;
			margin: 0 0 40px;
		}

		#cast_saff_area span.pc_break{
			display: none;
		}
	}

#cast_saff_area .ttl{
	color: #fff100;
	font-weight: 600;
	font-size: 17px;
	margin: 0 0 20px
}

#cast_saff_area ul li{
	font-size: 15px;
	display: inline-block;
	margin: 0 30px 0 0;
}
	@media screen and (max-width: 640px) {
		#cast_saff_area ul li{
			display: block;
			margin: 0 0 5px;
		}
	}

	#cast_saff_area ul li.gensaku span{
		font-size: 50%;
	}

	#cast_saff_area ul li span.font-s{
		font-size: 11px;
	}

	#cast_saff_area ul li:last-child{
		margin: 0;
	}

	#cast_saff_area ul li div{
		display: inline-block;
	}
		@media screen and (max-width: 640px) {
			#cast_saff_area #staff_box ul li{
				display: table;
				width: 100%;
				line-height: 1.3;
			}

			#cast_saff_area ul li div{
				display: table-cell;
				width: 50%;
			}

			#cast_saff_area ul li div:nth-child(1){
				text-align: right;
			}

			#cast_saff_area ul li div:nth-child(2){
				text-align: left;
			}
		}

	#cast_saff_area ul li div br{
		display: none;
	}
		@media screen and (max-width: 640px) {
			#cast_saff_area ul li div br{
				display: block;
			}
		}

#cast_box{
	margin: 0 0 50px;
}

/*###############################################

lead_area

###############################################*/
#lead_area{
	margin: 0 0 80px;
}
	@media screen and (max-width: 1263px) {
		#lead_area{
			padding: 0 15px;
			margin: 0 0 40px;
		}
	}

#lead_area .main{
	width: 834px;
	height: 38px;
	background: url(../img/txt_lead_main.gif) no-repeat;
	text-indent: -9999px;
	margin: 0 auto 24px;
}
	@media screen and (max-width: 1263px) {
		#lead_area .main{
			width: auto;
			height: auto;
			background: none;
			text-indent: 0;
			font-size: 22px;
			line-height: 1.5;
			font-weight: bold;
			text-align: center;
			margin: 0 auto 10px;
		}
	}

#lead_area .sub{
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
	@media screen and (max-width: 1263px) {
		#lead_area .sub{
			font-size: 13px;
			line-height: 1.5;
		}
	}

#lead_area .sub span{
	font-weight: bold;
	color: #fff100;
}


/*###############################################

movie_area

###############################################*/
#movie_area{
	width: 900px;
	margin: 0 auto 60px;
	overflow: hidden;
}
	@media screen and (max-width: 1263px) {
		#movie_area{
			width: auto;
			padding: 0 15px;
		}
	}

#movie_area ul li{
	float: left;
	margin: 0 25px;
}
	@media screen and (max-width: 1263px) {
		#movie_area ul li{
			width: 48%;
			margin: 0 1%;
		}

		#movie_area ul li img{
			width: 100%;
		}
	}
	@media screen and (max-width: 640px) {
		#movie_area ul li{
			width: auto;
			float: none;
			margin: 0 auto 10px;
		}

		#movie_area ul li img{
			width: 100%;
		}
	}

#movie_area ul li:nth-child(1),
#movie_area ul li:nth-child(2){
	margin: 0 25px 30px;
}
	@media screen and (max-width: 1263px) {
		#movie_area ul li:nth-child(1),
		#movie_area ul li:nth-child(2){
			width: 48%;
			margin: 0 1% 10px;
		}

		#movie_area ul li:nth-child(4){
			margin: 0 1%;
		}
	}
	@media screen and (max-width: 640px) {
		#movie_area ul li:nth-child(1),
		#movie_area ul li:nth-child(2){
			width: auto;
			margin: 0 auto 10px;
		}

		#movie_area ul li:nth-child(4){
			margin: 0 auto;
		}
	}

#movie_area ul li .youtube iframe{
	width: 400px;
	height: 222px;
	border: 1px solid #34b6cd;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
}
	@media screen and (max-width: 1263px) {
		#movie_area ul li .youtube{
			position: relative;
			width: 100%;
			padding-top: 56.15%;
		}

		#movie_area ul li .youtube iframe{
			position: absolute;
			top: 0;
			right: 0;
			width: 100% !important;
			height: 100% !important;
		}
	}

/*###############################################

store_area

###############################################*/
.store_area{
	border-top: 1px solid #34b6cd;
	border-bottom: 1px solid #34b6cd;
	background: url(../img/bg_border.gif);
	padding: 40px 0;
	margin: 0 0 65px;
}
	@media screen and (max-width: 1263px) {
		.store_area{
			margin: 0 0 30px;
		}
	}

.store_area .txt_install{
	width: 805px;
	height: 46px;
	background: url(../img/txt_install.png) no-repeat;
	text-indent: -9999px;
	margin: 0 auto 25px;
}
	@media screen and (max-width: 1263px) {
		.store_area .txt_install{
			width: auto;
			height: auto;
			background: none;
			text-indent: 0;
			text-align: center;
			font-size: 18px;
			padding: 0 15px;
			line-height: 1.5;
			font-weight: bold;
		}
	}

.store_area ul{
	width: 515px;
	margin: 0 auto;
	overflow: hidden;
}
	@media screen and (max-width: 640px) {
		.store_area ul{
			width: 240px;
		}
	}

.store_area ul li a{
	width: 240px;
	height: 79px;
	display: block;
	text-indent: -9999px;
	float: left;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
	@media screen and (max-width: 1263px) {
		.store_area ul li{
			float: none;
		}
	}

.store_area ul li:nth-child(1) a{
	margin: 0 35px 0 0;
	background: url(../img/btn_store_apple.png) no-repeat;
}

.store_area ul li:nth-child(2) a{
	background: url(../img/btn_store_google.png) no-repeat;
}

.store_area ul li a:hover{
	-webkit-filter: brightness(0.8);
	-moz-filter: brightness(0.8);
	-o-filter: brightness(0.8);
	-ms-filter: brightness(0.8);
	filter: brightness(0.8);
}

/*###############################################

point_area

###############################################*/
#point_area{
	width: 985px;
	margin: 0 auto 60px;
}
	@media screen and (max-width: 1263px) {
		#point_area{
			width: auto;
			padding: 0 15px;
			margin: 0 0 30px;
		}
	}

#point_area > ul > li{
	padding: 30px 40px 0;
	margin: 0 0 30px;
}
	@media screen and (max-width: 1263px) {
		#point_area > ul > li{
			padding: 25px;
		}
	}

#point_area > ul > li:last-child{
	margin: 0;
}

	#point_area ul li.point1{
		height: 369px;
		background: url(../img/bg_point1.png) no-repeat;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point1{
				height: auto;
				border: 3px solid #34b6cd;
				background: url(../img/bg_border.gif);
			}
		}

	#point_area ul li.point2{
		height: 207px;
		background: url(../img/bg_point2.png) no-repeat;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point2{
				height: auto;
				border: 3px solid #34b6cd;
				background: url(../img/bg_border.gif);
			}
		}

		#point_area ul li.point3{
			height: 1311px;
			background: url(../img/bg_point3.png) no-repeat;
		}
			@media screen and (max-width: 1263px) {
				#point_area ul li.point3{
					height: auto;
					border: 3px solid #34b6cd;
					background: url(../img/bg_border.gif);
				}
			}

/* ttl */
#point_area ul li .ttl{
	height: 48px;
	text-indent: -9999px;
	margin: 0 0 15px;
}
	#point_area ul li.point1 .ttl{
		width: 147px;
		background: url(../img/txt_point1.png) no-repeat;
	}

	#point_area ul li.point2 .ttl{
		width: 151px;
		background: url(../img/txt_point2.png) no-repeat;
	}

	#point_area ul li.point3 .ttl{
		width: 151px;
		background: url(../img/txt_point3.png) no-repeat;
	}

#point_area ul li p{
	font-size: 13px;
	line-height: 1.8;
}
	@media screen and (max-width: 1263px) {
		#point_area ul li p{
			line-height: 1.5;
			margin: 0 0 30px;
		}

		#point_area ul li p br{
			display: none;
		}

		#point_area ul li.point3 p br{
			display: block;
		}
	}

#point_area ul li.point1 p:first-of-type{
	border-bottom: 1px solid #34b6cd;
	padding: 0 0 20px;
	margin: 0 0 25px;
}
	@media screen and (max-width: 1263px) {
		#point_area ul li.point1 p{
			margin: 0 0 30px;
		}
	}

#point_area ul li.point1 p span{
	color: #f8ff2d;
	font-weight: bold;
	font-size: 130%;
}

#point_area ul li.point2 p span{
	color: #c763ec;
	font-weight: bold;
	font-size: 130%;
}

/* left_box */
#point_area ul li .left_box{
	float: left;
}
	@media screen and (max-width: 1263px) {
		#point_area ul li .left_box{
			float: none;
		}
	}

	#point_area ul li.point1 .left_box{
		width: 515px;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point1 .left_box{
				width: auto;
			}
		}

	#point_area ul li.point2 .left_box{
		width: 380px;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point2 .left_box{
				width: auto;
			}
		}

	#point_area ul li.point3 .ttl_txt{
		color: #f8ff2d;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 30px;
	}

	#point_area ul li.point3 .img_box{
		margin: 0 0 30px;
		text-align: center;
	}
		#point_area ul li.point3 .img_box img{
			width: 100%;
			max-width: 695px;
		}

	#point_area ul li.point3 span.tag_br{
		display: none;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point3 span.tag_br{
				display: table-column-group;
			}
		}

/* right_box */
#point_area ul li.point1 .right_box{
	width: 377px;
	float: right;
	overflow: hidden;
}
	@media screen and (max-width: 1263px) {
		#point_area ul li.point1 .right_box{
			width: auto;
			float: none;
		}
	}

	#point_area ul li.point2 .right_box{
		width: 489px;
		float: right;
		overflow: hidden;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point2 .right_box{
				width: auto;
				float: none;
			}

			#point_area ul li.point2 .right_box ul{
				max-width: 425px;
				margin: 0 auto;
				overflow: hidden;
			}

			#point_area ul li.point2 .right_box ul li:nth-child(1){
				width: 52%;
			}

			#point_area ul li.point2 .right_box ul li:nth-child(2){
				width: 42%;
				max-width: 178px;
			}

			#point_area ul li.point2 .right_box ul li img{
				width: 100%;
			}
		}

	#point_area ul li.point3 .right_box{
		width: 337px;
		margin: 40px 0 0;
		float: right;
		overflow: hidden;
	}
		@media screen and (max-width: 1263px) {
			#point_area ul li.point3 .right_box{
				width: auto;
				float: none;
			}

			#point_area ul li.point3 .right_box img{
				width: 100%;
				max-width: 289px;
				margin: 0 auto;
				display: block;
			}
		}

#point_area ul li.point1 .right_box ul{
	overflow: hidden;
	margin: 0 0 25px;
}

#point_area ul li .right_box ul li{
	float: left;
}

@media screen and (max-width: 1263px) {
	#point_area ul li.point1 .right_box ul{
		max-width: 377px;
		margin: 0 auto 15px;
	}

	#point_area ul li.point1 .right_box ul li{
		width: 47%;
		max-width: 178px;
	}

	#point_area ul li.point1 .right_box ul li img{
		width: 100%;
	}

	#point_area ul li.point1 .right_box img.img_point1_3{
		width: 100%;
		max-width: 377px;
		display: block;
		margin: 0 auto;
	}
}


#point_area ul li .right_box ul li:nth-child(1){
	margin: 0 21px 0 0;
}
	@media screen and (max-width: 1263px) {
		#point_area ul li .right_box ul li:nth-child(1){
			margin: 0 6% 0 0;
		}
	}

/*###############################################

btn_back

###############################################*/
@media screen and (max-width: 1263px) {
	.btn_back{
		padding: 0 15px;
	}
}

.btn_back span{
	width: 960px;
	height: 60px;
	display: block;
	background: #34b6cd;
	text-align: center;
	line-height: 62px;
	font-size: 18px;
	color: #fff;
	margin: 0 auto 60px;
	cursor: pointer;
}
	@media screen and (max-width: 1263px) {
		.btn_back span{
			width: 100%;
			font-size: 15px;
			margin: 0 0 30px;
		}
	}

/*###############################################

footer

###############################################*/
footer{
	text-align: center;
	font-size: 10px;
	padding: 0 0 60px;
}
	@media screen and (max-width: 1263px) {
		footer{
			padding: 0 15px 30px;
			line-height: 1.5;
		}
	}

footer span{
	margin: 0 20px 0 0;
}
@media screen and (max-width: 1263px) {
	footer span{
		margin: 0;
	}
}

footer span br{
	display: none;
}
	@media screen and (max-width: 1263px) {
		footer span br{
			display: block;
		}
	}