/*=================================================
 * CSS for PC
 * ================================================= */



body{
	overflow: hidden;
	background:url(../img/index/topbg_pc.jpg) no-repeat top right fixed #9ee6f5;
	-webkit-background-size: auto  780px;
	background-size: auto 780px;
}

@media screen and (max-width: 650px) {
	body{
		overflow: hidden;
		min-width: auto;
		background: #f5f5f5;
	}
	body::before{
		content:"";
		display:block;
		position: absolute;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		background:
		url(../img/index/topbg_seo.png) no-repeat calc(100% - 20px) calc(100vh - 210px),
		url(../img/index/topbg_sp.jpg) no-repeat top center;
		-webkit-background-size: 120px auto, cover;
		background-size: 120px auto, cover;
	}
}


header{
	 height: 600px;
	 margin-bottom: 0;
}


/** topbox **/

#topbox{
	text-align: center;
	padding: 100px 0 0 0;
}
#topbox .top_ch{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	margin: 0 0 80px 0;
}
#topbox .top_ch span{
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 2;
	letter-spacing: 1.5px;
	text-align: left;
	writing-mode: vertical-rl;
}
#topbox .top_count{
	margin: 0 0 40px 0;
}
#topbox .top_count p{
	font-size: 18px;
	line-height: 40px;
	margin: 0 0 0 0;
}
#topbox .top_count p em{
	display: inline-block;
	vertical-align: baseline;
	font-size: 40px;
	color: #ff2083;
	text-align: right;
}
#topbox .top_count p:nth-of-type(1) em{	width: 54px;}
#topbox .top_count p:nth-of-type(2) em{	width: 117px;}
#topbox .toptxt{
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	line-height: 25px;
	text-align: left;
}


/** ptf **/

#ptf{
	margin: 0 0 80px 0;
	padding: 80px 0;
	background: url(../img/index/ptf.gif) top center;
}

#ptf h3{
	font-size: 15px;
	font-weight: normal;
	line-height: 20px;
	color: #fff;
	margin: 0 0 30px 0;
}

#ptf h3 em{
	display: inline-block;
	vertical-align: top;
	font-family: "FontA";
	font-size: 42px;
	font-weight: normal;
	line-height: 48px;
}

.ptf_list{
	font-size: 0;
	line-height: 0;
	margin: 0 0 30px 0;
}

.ptf_list a,
.ptf_list span{
	display: inline-block;
	vertical-align: top;
	margin: 0 10px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
}

.ptf_list a img,
.ptf_list span img{
	width: 550px;
	height: 330px;
	object-fit: cover;
}

.ptf_bt a{
	position: relative;
	z-index: 1;
	display: inline-block;
	vertical-align: top;
	width: 350px;
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	line-height: 56px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 5px;
	text-transform: uppercase;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.ptf_bt a:hover{
	text-decoration: none;
	color: #ff428e;
}

.ptf_bt a:before,
.ptf_bt a:after {
	content: '';
	background: #fff;
	position: absolute;
	z-index: -1;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
}

.ptf_bt a:after{
	height: 0;
	left: 50%;
	top: 50%;
	width: 0;
}

.ptf_bt a:hover:after{
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}


/** box **/

#box_bg{
	width: 1230px;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 80px 0 50px 0;
}

#box_bg .box{
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 3 - 30px);
	margin: 0 15px 50px 15px;
}

#box_bg .box h3{
	position: relative;
	font-size: 15px;
	font-weight: normal;
	line-height: 18px;
	text-align: center;
	margin: 0 0 15px 0;
}

#box_bg .box h3 em{
	display: inline-block;
	font-family: "FontA";
	font-size: 36px;
	font-weight: normal;
	line-height: 38px;
}
#box_bg .box:nth-of-type(1) h3 em{	color: #ff6600;}
#box_bg .box:nth-of-type(2) h3 em{	color: #ffcc00;}
#box_bg .box:nth-of-type(3) h3 em{	color: #33cc00;}
#box_bg .box:nth-of-type(4) h3 em{	color: #0099ff;}
#box_bg .box:nth-of-type(5) h3 em{	color: #cc66ff;}
#box_bg .box:nth-of-type(6) h3 em{	color: #ff39ae;}

#box_bg .box h3 em:before,
#box_bg .box h3 em:after{
	content: '';
	display: inline-block;
	width: 80px;
	border-bottom: 1px solid #ccc;
}
#box_bg .box h3 em:before{
	position: absolute;
	top: 18px;
	left: 0;
}
#box_bg .box h3 em:after{
	position: absolute;
	top: 18px;
	right: 0;
}

#box_bg .box div{}

#box_bg .box div img{
	width: 100%;
	height: auto;
	max-width: 380px;
}

#box_bg .box p{
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
	margin: 15px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#box_bg .box:nth-of-type(1) p,
#box_bg .box:nth-of-type(2) p,
#box_bg .box:nth-of-type(3) p{	height: 60px;}
#box_bg .box:nth-of-type(4) p,
#box_bg .box:nth-of-type(5) p,
#box_bg .box:nth-of-type(6) p{	height: 60px;}

#box_bg .box span{
	display: block;
	text-align: center;
}

#box_bg .box span a{
	position: relative;
	z-index: 1;
	display: inline-block;
	vertical-align: top;
	width: 260px;
	font-size: 16px;
	font-weight: normal;
	line-height: 36px;
	color: #333;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 20px;
	text-transform: uppercase;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#box_bg .box span a:hover{
	text-decoration: none;
	color: #ffffff;
	border: 2px solid #fc4390;
}

#box_bg .box span a:before,
#box_bg .box span a:after {
	content: '';
	background: #fc4390;
	position: absolute;
	z-index: -1;
	border-radius: 20px;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
}

#box_bg .box span a:after{
	height: 0;
	left: 50%;
	top: 50%;
	width: 0;
}

#box_bg .box span a:hover:after{
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}


/*=================================================
 * CSS for SP
 * ================================================= */

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

	/** topbox **/
	#topbox{
		text-align: center;
		padding: 60px 10px 30px 10px;
	}
	#topbox .top_ch{
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		margin: 0 20px 50px 0;
	}
	#topbox .top_ch span{
		font-weight: 500;
		font-size: 24px;
		line-height: 2.3;
		letter-spacing: 1.5px;
		text-align: left;
		writing-mode: vertical-rl;
	}
	
	#topbox .top_count{
		margin: 0 0 40px 0;
	}
	#topbox .top_count p{
		font-size: 14px;
		line-height: 26px;
		margin: 0 0 0 0;
	}
	#topbox .top_count p:nth-of-type(1) em{	width: 40px;}
	#topbox .top_count p:nth-of-type(2) em{	width: 80px;}
	#topbox .top_count p em{
		font-size: 26px;
		color: #ff2083;
	}
	#topbox .toptxt{
		display: block;
		font-size: 13px;
		line-height: 1.6;
	}
	#topbox .toptxt .sp_none{	display: none;}


	/** ptf **/
	#ptf{
		margin: 0;
		padding: 20px 10px;
		background: url(../img/index/ptf.gif) top center;
		-webkit-background-size: 25px 25px;
		background-size: 25px 25px;
	}
	#ptf h3{
		font-size: 14px;
		font-weight: normal;
		line-height: 18px;
		color: #fff;
		margin: 0 0 15px 0;
	}
	#ptf h3 em{
		font-size: 34px;
		line-height: 36px;
	}
	.ptf_list{
		font-size: 0;
		line-height: 0;
		margin: 0 0 10px 0;
	}
	.ptf_list a,
	.ptf_list span{
		width: calc(100% / 2 - 1px);
		margin: 0;
		padding: 3px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.ptf_list a:nth-child(odd){	margin-right: 1px;}
	.ptf_list a:nth-child(even){	margin-left: 1px;}
	.ptf_list a img,
	.ptf_list span img{
		width: 100%;
		height: 27vw;
		min-height: 86px;
	}
	.ptf_bt a{
		display: block;
		width: auto;
		font-size: 18px;
		line-height: 46px;
	}
	
	.ptf_bt a:hover{
		text-decoration: none;
		color: #ffffff;
		background: none;
	}
	
	.ptf_bt a:before,
	.ptf_bt a:after {
		display: none;
	}

	/** box **/
	#box_bg{
		width: auto;
		margin: 0;
		padding: 0;
	}
	#box_bg .box{
		display: block;
		width: auto;
		margin: 0;
		padding: 20px 10px;
	}
	#box_bg .box:nth-of-type(even){
		background-color: #f5f5f5;
		background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
		background-position: 0 0, 1px 1px;
		background-size: 2px 2px;
	}
	#box_bg .box h3{
		position: static;
		font-size: 14px;
		line-height: 16px;
		margin: 0 0 10px 0;
	}
	#box_bg .box h3 em{
		position: relative;
		font-size: 34px;
		line-height: 36px;
	}
	#box_bg .box h3 em:before,
	#box_bg .box h3 em:after{	width: 50px;}
	#box_bg .box h3 em:before{
		position: absolute;
		top: 16px;
		left: -65px;
	}
	#box_bg .box h3 em:after{
		position: absolute;
		top: 16px;
		right: -65px;
	}

	#box_bg .box div{}

	#box_bg .box div img{
		width: 100%;
		height: auto;
		max-width: 100%;
	}

	#box_bg .box p{
		height: auto !important;
		margin: 10px 0;
	}

	#box_bg .box span{
		display: block;
		text-align: center;
	}

	#box_bg .box span a{
		display: inline-block;
		vertical-align: top;
		width: 260px;
		font-size: 16px;
		font-weight: normal;
		line-height: 36px;
		color: #333;
		border: 2px solid #ddd;
		border-radius: 20px;
		-webkit-transition	: 0.2s ease-in-out;
		-moz-transition	: 0.2s ease-in-out;
		-o-transition	: 0.2s ease-in-out;
		transition		: 0.2s ease-in-out;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#box_bg .box span a:hover{
		text-decoration: none;
		color: #333333;
		border: 2px solid #dddddd;
		background: #ffffff;
	}
	
	#box_bg .box span a:before,
	#box_bg .box span a:after {
		display: none;
	}

}