/*-------------------------------------------------
基本指定
-------------------------------------------------*/

body{
	font-family: "Hiragino Kaku Gothic ProN","メイリオ",sans-serif,arial,helvetica,clean;
	margin:0;
	padding:0;
	text-align: center;
	color:#000;
}

.wrapper{
	width: 100%;
	margin:0;
}

h2{
	font-size: 2.8vw;
	font-weight: 900;
	line-height: 1.25em;
	font-feature-settings : "palt";
}
.border{
	border-bottom: dotted 1.5px #000;
}

span{
	display: inline-block;
}

a{
	text-decoration: none;
	color: #000;
}

a:hover{
	color: #0f95ca;
}


/*-------------------------------------------------
top
-------------------------------------------------*/

.top{
	background-image: url("../img/bkg.jpg") ;
	background-size:cover;
	background-position: center;
	width: 100%;
	height: 0;
	padding-top: 52%;
	position: relative;
}

.top_L{
	width: 50%;
	height: 100%;
	float: left;
	margin-top: -52%;
}

.main {
	padding-left: 8%;
}

.logo{
	width: 10vw;
	margin-top: 6.5%;
}

.mark{
	width: 20vw;
	margin-top: 12%;
}

.top_R{
	width: 50%;
	height: 100%;
	float: right;
	margin-top: -55%;	
}

.top_setu{
	padding: 20% 0 4% 0;
	width: 100%;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.6);
}

.top_logo{
	position: absolute;
	top:8%;
	right:5%;
	width: 12vw;
}

.top_logo:hover{
	opacity: 0.5;
}

h1,.top_capt,.top_block{
	font-feature-settings : "palt";	
}

h1{
	margin-top: 10%;
	font-size: 3.9vw;
	line-height: 1.25em;
	font-weight:900;
	text-align: left;
	padding-left: 10%;
}

.top_capt{
	margin-top: 3.3%;
	font-size:1.6vw;
	font-weight: 800;
	text-align: left;
	padding-left: 10%;
}

.top_block{
	width: 82%;
	margin: 7.5% 0 14.6% 0;
	color: #fff;
	font-size: 1.4vw;
	line-height: 1.4em;
	font-weight: 500;
	padding-left: 10%;
	font-weight: 600;
}

.top_one{
	width: 99.5%;
	padding: 4% 0;
	background-color: #000;	
}

.t_1{
	width: 32.9%;
	padding-top: 20%;
	position: relative;
	margin: 0.4% 0.4% 0.4% 0;
	float: left;
	background-color: #000;
}

.t_1 p{
	width: 100%;
	position: absolute;
	left:50%;
	top:50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}

.under{
	padding:0.6%;
	border-bottom: solid 2.5px #000;
}

.top_sp {
	display: none !important;
}


/*-------------------------------------------------
intro
-------------------------------------------------*/

.intro{
	font-size: 2.4vw;
	font-weight: bold;
	font-feature-settings : "palt";
}

.in_txt1{	
	margin-top: 6.2%;
}

.in_txt2{	
	margin: 2.5% 0 6.7% 0;
}

.in_txt2_sp{
	display: none;
}

/*-------------------------------------------------
catch
-------------------------------------------------*/

.catch{
	background-color: #0f95ca;
	padding-bottom: 4%;
	font-weight: bold;
	height: auto;
}

.ct_t{
	padding-top: 6.5%;
	line-height: 1.6em;
	font-size: 2.3vw;
	color: #fff;
	letter-spacing: 0.01em;
}

.ct_main{
	width: 78%;
	margin: 5.7% auto 0 auto;
	padding: 2.4% 2.1%;
	background-color: #fff;
	color: #0f95ca;
	text-align: left;
}

.ct_ma_L {
	width: 15.6%;
	float: left;
}

.ct_ma_R {
	padding-left: 1.5%;
	width: 82%;
	float:left;
	font-feature-settings : "palt";
}

.t_ma_sub{
	margin-top: 0.9%;
	font-size: 2.3vw;
	font-weight: bold;
	color: #0f95ca;
	padding-left: 12%;
}

.t_ma_main{
	margin-top: 2.7%;
	font-size: 3.4vw;
	font-weight: bold;
	padding-left: 11%;
	letter-spacing: 0.005em;
}

.t_color{
	color: #000;
}
.ct_t_sp,.t_ma_sub_sp,.t_ma_main_sp{
	display: none;
}


/*-------------------------------------------------
product
-------------------------------------------------*/

.product{
	width: 100%;
	height: 0;
	padding-top: 50%;
}

.pr_L{
	width: 50%;
	height: auto;
	float: left;
	margin-top:-50%;
}

.pr_L img{
	width: 100%;
	height: auto;
	padding-bottom: 1px;
}

.pr_R{
	width: 50%;
	height: 100%;
	float: right;
	text-align: center;
	margin-top:-50%;
}

.pr_R img{
	padding-top: 8%;
	width: 27%;
	margin: 0 auto;
}

.pr_R h2{
	margin-left: -4%;
	margin-top: 6%;
}

.pr_R p{
	width: 83%;
	text-align: left;
	font-size: 1.35vw;
	font-weight: bold;
	margin:0 auto ;
	padding: 6% 0 14% 0;
	line-height: 1.5em;
}

/*-------------------------------------------------
service
-------------------------------------------------*/

.service{
	margin-top: 1px;
	width: 100%;
	height: auto;
	border-top: solid 1px #000;
}

.service h2{
	padding-top: 6%;
}

.sv_box{
	padding-top: 4.5%;
	width: 82%;
	margin: 0 auto;
}

.sv_1{
	float: left;
	width: 23%;
} 

.sv_lead{
	position: relative;
	width: 100%;
	padding-top:67%;
	border: dotted 1.2px #555;
	text-align: center;

}

.sv_lead h3{
	font-size: 2.3vw;
	line-height: 1.2em;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.sv_txt{
	margin-top: 17%;
	font-size: 1.1vw;
	text-align: left;
	line-height: 1.3em;
	font-weight: bold;
}

.sv_comment{
	margin: 3% 0;
	text-align: left;
	padding-left: 10%;
	font-size: 1.2vw;
	font-weight: bold;
}

.sv_comment_sp,.sv_sp{
	display: none;
}

.margin{
	margin-right: 2.4%;
}


/*-------------------------------------------------
topic1.2
-------------------------------------------------*/

.topic1 h2,.to2_ttl{
	padding-top:5.3%; 
}

.to1_ttl_sp,.to2_ttl_sp{
	display: none
}

.topic1 img{
	width: 89%;
	margin-top:4.0%; 
}

.topic2 img{
	width: 85%;
	margin-top:8%; 
}

.point1,.point2{
	width: 62%;
	font-size: 2.5vw;
	font-weight: 800;
	border: solid 2.5px #000;
	padding: 2.2% 1.5%;
}

.point1{
	margin: 6% auto;
}

.point2{
	margin: 7% auto;
}

/*-------------------------------------------------
app
-------------------------------------------------*/

.app h2{
	padding-top: 5.2%;
}

.app_box{
	padding-top: 6%;
	width: 67%;
	margin: 0 auto;
}

.app_1{
	float: left;
	width: 46%;
	margin-bottom: 9%;
}

.app_lead{
	position: relative;
	width:100%;
	padding-top: 39%;
	border: dotted 1.5px #777777;
	text-align: center;
}

.app_lead h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	font-size: 2.2vw;
	line-height: 1.7em;
}

.app_txt{
	width:100%;
	margin: 4% 0 5.5% 0;
	font-size: 1.25vw;
	text-align: left;
	line-height: 1.5em;
	font-weight: bold;
}

.app_use{
	width:100%;
	text-align: center;
	line-height: 160%;
	font-size: 1.9vw;
	font-weight: bold;
}

.app_use a{
	display: block;
	border: solid 1.5px #000;
	color: #000;
	padding: 3.4% 0;
}

.app_use a:hover{
	background-color: #000;
	color: #fff;
}

.margin2{
	margin-right: 5%;
}


/*-------------------------------------------------
qanda


.qanda h2{
	padding-top: 6%;
}

.qa{
	padding-top: 1%;
	width: 75%;
	margin: 0 auto;
	margin-bottom: 11%;
}

.qa_txt{
	width: 100%;
	margin: 0 auto;
	font-size: 1.65vw;
	font-weight: bold;
	text-align: left;
	border-bottom: dotted 1px #000;
}

.q_txt{
	padding-top: 5%;
	margin-left: 10%;
}

.a_txt{
	padding: 4.3% 0 4% 0;
	margin-left: 10%;
	color: #f02f0e;
}

.bor_non{
	border-bottom:none;
}
-------------------------------------------------*/


/*-------------------------------------------------
more
-------------------------------------------------*/

.more{
	background-color: #0f95ca;
	font-size: bold;
	padding-bottom: 0.5%;
	color: #fff;
}

.mo_ttl{
	padding-top: 6%;
	font-size: 3.2vw;
}

.mo_point a{
	display: block;
	margin: 5% auto;
	width: 62%;
	font-size: 2.5vw;
	font-weight: 800;
	border: solid 3px #fff;
	padding: 2.2% 1.5%;
	font-size: 3vw;
}

.mo_point a{
	color: #fff;	
}

.mo_point a:hover{
	background-color: #fff;
	color: #0f95ca;
}



/*-------------------------------------------------
bottom
-------------------------------------------------*/

.bottom{
	background-image: url("../img/bkg.jpg");
	background-size:cover;
	background-position: center;
	height: 0;
	padding-top: 52%;
}

.bt_R{
	margin-top: -58.1%;
	width: 50%;
	float: right;
}

.bt_space{
	width: 100%;
	position: relative;
}

.mark2{	
	width: 20vw;
	margin: 52% auto 0 auto;
}

.bt_L{
	margin-top: -52%;
	width: 50%;
	height: 100%;
	float: left;
}

.bt_main{
	width: 100%;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 20% 0 10% 0;
}

.bt_ttl{
	margin-top:39%;
	font-size: 20%;
	font-weight: bold;
	text-align: left;
	padding-left: 7%;
	line-height: 1.3em;
}

.bt_sub{
	margin-top: 3.1%;
	font-size: 105%;
	font-weight: bold;
	text-align: left;
}

.bt_info{
	width: 70%;
	margin-top: 11%; 
	padding-left: 7%;
}

.info{
	width: 100%;
	margin-top:5%;
}

.info a{
	width: 36vw;
	color: #000;
	font-size: 1.9vw;
	border: solid 1px #000;
	padding:5% 7%;
	display: block;
	font-weight: bold;
}

.info a:hover{
	background: #000;
	color: #fff;
}

.logo2,.bottom_sp{
	display: none;

}

/*-------------------------------------------------
fotter
-------------------------------------------------*/

footer{
	border-top: solid 1px #000;
	padding-top: 1%;
	padding-bottom: 2%;
}

.fo_logo{
	margin: 4% 0;
}

.fo_logo img{
	width: 25%;
	margin: 0 auto;
}

.fo_text a{
	margin: 0 0 4% 0;
	font-weight:bold;
	font-size: 1.5vw;
	line-height: 1.2em;
}

.fo_info{
	margin: 3% 0 4% 0;
	font-weight:bold;
	font-size: 1.4vw;
	line-height: 1.4em;
}

.fo_copy{
	margin-top:2%;
	font-weight:lighter;
	font-size: 1.2vw;
}

.back{
	position: fixed;
	bottom:0;
	right:0;
	width: 100px;
	height: 100px;
	background-color: #fff;
}

.bt_t{
	display: block;
	position: relative;
	top:0;
	right:0; 
	font-size: 16px;
}

.triangle{
	border-style: solid;
	border-width: 100px 100px 0 0;
	border-color: #1c1c1c transparent transparent transparent;
	position: relative;
	z-index: 900;
	top:0;
	left:0;
	}

.up{
	position: relative;
	top:-45px;
	right:-10px;
	color: #888888;
	z-index: 1000;
}

.up img{
	margin-bottom: 2px;
	}

.back :hover{
	opacity: 0.5;
	color: #888888;
}



/*-------------------------------------------------
スマホ用画面
-------------------------------------------------*/
@media screen and (max-width: 760px) {

	h2{
		font-size: 24px;
		font-weight: 900;
		line-height: 1.2em;
	}

	.border{
	border-bottom: solid 1px #000;
	}

	span{
	display: inline-block;
	}

	/*-----------------------
	top
	-----------------------*/
	
	.top{
		background-image: url("../img/bkg_sp.jpg") ;
		background-size: 100% auto;
		background-position: center;
		background-repeat:no-repeat;
		background-position:0 0;
		width: 100%;
		height: 0;
		padding-top: 80%;
		position: relative;
	}

	.top_L{
		width: 100%;
		float: none;
		margin-top: -80%;
	}

	.main,.logo,.mark{
		margin: 0 auto;
	}

	.main{
		margin-right: 7%;
	}

	.logo{
		width: 27%;
		padding-top: 12%;
	}

	.mark{
		width: 51%;
		margin-top: 8%;
	}

	.top_R{
		display: none;
	}

	.top_logo{
		width: 22%;
	}


	.top_sp{
		margin-top: 10%;
		display: block !important;
		width: 100%;
		text-align: center;	
	}

	.top_setu_sp .sp_ttl,.bts_ttl {
		text-align: center;
		font-size: 30px;
		font-weight: bold;
	}

	.sp_ttl,.top_sp_capt,.top_bts_capt,.top_sp_block{
		font-feature-settings : "palt";
	}

	.sp_ttl{
		line-height: 1.25em;
		font-weight:900;
	}

	.top_sp_capt,.top_bts_capt{
		margin: 8% 0;
		font-weight: 800;
		font-size:14px;
	}

	.top_sp_block{
		width: 84%;
		margin: 6.8% auto 4.5% auto;
		color: #fff;
		font-size: 14px;
		line-height: 1em;
		font-weight: bold;
	}

	.top_sp_one{
		width: 99.5%;
		padding: 4% 0;
		background-color: #000;	
	}

	.t_1_sp{
		margin-right: 0.4%;
		margin-top: 0.4%;
		width: 32.9%;
		padding: 11.5% 0;
		position: relative;
		float: left;
		background-color: #000;
		font-size: 12px;
	}

	.t_1_sp p{
		line-height: 1.49em;
		width: 100%;
		position: absolute;
		left:50%;
		top:50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform : translate(-50%,-50%);
		transform : translate(-50%,-50%);
	}

	.under{
		padding:0.7%;
		border-bottom: solid 1.5px #000;
	}


	/*-----------------------
	intro
	-----------------------*/

	.intro{
		background: #000;
		font-size: 18px;
		color: #fff;
		font-feature-settings : "palt";
	}

	.in_txt1{	
		padding-top: 10%;
	}

	.in_txt2{
		display: none;	
	}

	.in_txt2_sp{
		display: block;
		line-height: 1.4em;
		padding: 6% 0 10% 0;
	}

	/*-----------------------
	catch
	-----------------------*/

	.catch{
		padding-bottom: 0.5%;
	}

	.ct_t,.t_ma_sub,.t_ma_main{
		display: none;
	}

	.fsize{
		font-size: 4.5%;
	}

	.ct_t_sp{
		width: 100%;
		margin: 0 auto;
		display: block;
		color: #fff;
		padding-top: 8%;
		line-height: 1.6em;
		font-size: 22px;
		font-feature-settings : "palt";
	}

	.ct_main{
		width: 85%;
		margin: 8% auto 5.5% auto;
		text-align: center;
	}

	.ct_ma_L {
		float: none;
		width: 42%;
		margin: 10.5% auto 0 auto;
	}

	.ct_ma_R {
		float:none;
		width: 100%;
		padding-bottom: 11%;
	}

	.t_ma_sub_sp{
		display: block;
		margin-top: 6%;
		font-size: 20px;
		padding-left: 0;
		line-height: 1.5em;
		font-feature-settings : "palt";
	}

	.t_ma_main_sp{
		display: block;
		margin: 5% auto 1.8% auto;
		font-size: 30px;
		line-height: 1.4em;
		font-feature-settings : "palt";
	}


	/*-----------------------
	product
	-----------------------*/

	.product{
		width: 100%;
		height: 100%;
	}

	.pr_L{
		width: 100%;
		height: auto;
		float: none;
	}

	.pr_L img{
		width: 100%;
		height: auto;
		padding-bottom: 0;
	}

	.pr_R{
		width: 100%;
		margin-top:-70%; 
		padding-top: 75%;
		float: none;
		text-align: center;
		font-feature-settings : "palt";
	}

	.pr_R img{
		display: none;
	}

	.pr_R h2{
		font-size: 26px;
		margin-top: 15% 0;
	}

	.pr_R p{
		width: 85%;
		text-align: left;
		font-size: 14px;
		font-weight: bold;
		margin:0 auto ;
		line-height: 1.5em;
		margin-top: 2.1%;
		letter-spacing: 0.0005em;
	}

	/*-----------------------
	service 
	-----------------------*/

	.service h2{
		padding: 12% 0 6% 0;
	}

	.sv_box{
		width: 87.1%;
		margin: 0 auto;
	}

	.sv_1{
		float: none;
		width: 100%;
	} 

	.sv_lead{
		position: relative;
		width: 100%;
		padding-top:15%;
		border: dotted 1.2px #000;
		background: #EEEEEE;
	}

	.sv_lead h3{
		display: none;
	}

	.sv_sp{
		display: block;
		font-size:18px;
		line-height: 1.3em;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		margin:0;
		padding:0;
		font-weight: bold;
	}

	.sv_txt{
		margin:8% 0 10% 0;
		font-size: 14px;
		text-align: left;
		line-height: 1.5em;
		font-feature-settings : "palt";
	}

	.sv_comment{
		display: block;
		font-size: 10px;
		text-align: center;
		padding:3%;
	}

	/*-----------------------
	topic1,2
	-----------------------*/

	.to1_ttl,.to2_ttl{
		display: none;
	}

	.to1_ttl_sp,.to2_ttl_sp{
		display: block;
		line-height: 1.4em; 
	}

	.to1_ttl_sp{
		margin-top:10%;
	}

	.to2_ttl_sp{
		margin-top:15%;
	}

	.topic1 img{
		width: 82%;
		margin-top:16%; 
	}

	.topic2 img{
		width: 83%;
		margin-top:13%; 
	}

	.point1,.point2{
		width: 87%;
		font-size: 16px;
		font-weight: 900;
		padding: 5.5% 0;
	}

	.point1{
		margin: 13% auto 16% auto;
	}

	.point2{
		margin: 18% auto 16% auto;
	}

	/*-----------------------
	app
	-----------------------*/

	.app h2{
		padding: 14% 0 10% 0;
	}

	.app_box{
		width: 83.3%;
		margin: -4% auto 2% auto;
	}

	.app_1{
		float: none;
		width: 100%;
		margin-bottom: 15%;
	}

	.app_lead{
		background: #EEEEEE;
		position: relative;
		width:100%;
		padding-top: 30%;
		margin-bottom: -5%;
		border: dotted 1.2px #000;
		text-align: center;
	}

	.app_lead h3{
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		margin:0;
		padding:0;
		font-size: 18px;
		line-height: 1.8em;
	}

	.app_txt{
		width:100%;
		padding: 8% 0 2.1% 0;
		font-size: 14px;
		font-feature-settings : "palt";
	}

	.app_use a{
		display: block;
		background: #000;
		padding: 8% 0;
		border: solid 0px #fff;
		font-size: 18px;
		text-align: center;
		color: #fff;
	}

	.app_use a:hover{
		background: #0f95ca;
	}

	/*-----------------------
	.more
	-----------------------*/

	.mo_ttl{
		padding-top: 12%;
		font-size: 20px;
	}

	.mo_point a{
		margin: 8% auto;
		width: 80%;
		font-size: 16px;
		font-weight: 800;
		border: solid 3px #fff;
		padding: 4% 1.5%;
		color: #fff;	
	}

	.mo_point a:hover{
		background-color: #fff;
		color: #0f95ca;
	}


	/*-----------------------
	.qanda
	-----------------------*/

	.qanda{
		padding-bottom: 10%;
	}
	.qanda h2{
		margin: 5% 2%;
	}
	.qa{
		width: 87.3%;
	}
	.qa_txt{
		margin: 0 auto;
		text-align: left;
	}
	.q_txt{
		padding-top: 8%;
		margin-left: 0;
		font-size: 4.1vw;
		line-height: 1.5em;
		font-feature-settings : "palt";
	}

	.a_txt{
		padding: 8% 0 ;
		margin-left: 0;
		font-size: 3.8vw;
		line-height: 1.5em;
	}

	.bor_non{
		border: none;
	}

	/*-----------------------
	bottom
	-----------------------*/

	.bottom{
		background-image: url("../img/bkg_sp.jpg") ;
		background-size: 100% auto;
		background-position: center;
		background-repeat:no-repeat;
		background-position:0 0;
		width: 100%;
		height: 0;
		padding-top: 80%;
	}

	.bt_R{
		width: 100%;
		float: none;
		margin-top: -80%;
	}

	.logo2{
		text-align: center;
		display: block;
		width: 25%;
		margin: 10% auto 0 auto;
	}

	.mark2{
		margin-top: 6%;
		width: 42%;
	}

	.bt_L{
		display: none;
	}

	/*-----------------------
	bottom_sp
	-----------------------*/

	.bottom_sp{
		display: block;
		width: 100%;
		float: none;
		text-align: center;
		background:#fff;
		padding: 10% 0;
	}

	.bts_sub{
		font-size: 20px;
		text-align: center;
	}

	.bts_info_box{
		width: 84%;
		margin: 0 auto;
	}

	.bts_info{
		width: 100%;
		margin: 0 auto;
		margin-bottom:6.7%;
	}

	.bts_info a{
		background-color: #000;
		color: #fff;
		font-size: 16px;
		border: solid 0px ;
		padding: 6% 8%;
		display: block;
		font-weight: bold;		
	}

	.bts_info a:hover{
		background: #0f95ca;
	}

	/*------------------------------
	fotter
	---------------------------------*/
	.fo_logo{
		margin: 9% 0;
	}

	.fo_logo img{
		width: 40%;
		margin: 0 auto;
	}

	.fo_text a{
		font-size: 13px;
		line-height: 1.6em;
	}

	.fo_info{
		margin: 6% 0;
		font-weight:normal;
		font-size: 12px;
		line-height: 1.4em;
	}

	.fo_copy {
		color: #000;
		margin:5% 0;
		font-size: 12px;
	}

	.back{
		width: 70px;
		height: 70px;
	}

	.bt_t{
		font-size: 16px;
	}

	.triangle{
		border-width: 70px 70px 0 0;
	}

	.up{
		top:-40px;
		right:-10px;
	}

}


/*-------------------------------------------------
クリアフィックス
-------------------------------------------------*/

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/**/