@charset "utf-8";

/*
==================================================
common style
==================================================
*/

/*　基本の設定
---------------------------------------------------------- */
html{
	font-size: 87.5%;
	overflow-y:scroll;
	}
body{
	font-size:14px;
	font-size: 1rem;
	color:#000;
	}
body,h1, h2, h3, h4, h5, h6{
	margin:0;
	font-family:"Lato", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
	}
p{
	margin:0;
}
::selection {
	background:#333;
	color: #fff;
	text-shadow: none;
	}
input::selection,
textarea::selection{
	color:#333;
	background: #ccc;
	}
ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	}
	ul li{
		list-style: none;
		}
a{
	color: #18338c;
	text-decoration:underline;
	}
a:hover{
	text-decoration:none;
	}
button,input,textarea{
	outline:none;
	}
input,textarea,select{
	border-radius: 3px !important;
	}
input[type=text],input[type=password]{
	padding:1.6rem !important;
	}
select{
	min-height: 3rem;
	}
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea{
	border-color:#999;
	}
[type=color]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=datetime]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,textarea:focus{
	border-color:#333;
	}
hr{
	border:none;
	border-bottom:1px solid #c9d1da;
	}
dt{
	font-weight: bold;
	}
dd{
	margin: 0;
	padding: 0;
	}

/* 見出し
---------------------------------------------------------- */
h2{
	font-weight: normal;
	font-size: 1.429rem;
	}
.ttl-h2{
	margin-bottom: 2rem;
	font-size: 2.57rem;
	text-align: center;
	}
small{
	font-size: .85em;
	}
.text-red{
	color:#c0050b;
	}
.text-blue{
	color:#18338c;
	}
.text-center{
	text-align: center;
	}
.text-note li{
	padding-left: 1em;
	text-indent: -1em;
	}
@media screen and (max-width: 39.9375em) {
h2{
	font-size: 1rem;
	}
.ttl-h2{
	font-size: 1.429rem;
	}
}

.bg-color{
	background: #f5f5f5;
	}
.bg-blue{
	background: #18338c;
	}

/* ボタン
---------------------------------------------------------- */
.button{
	display: inline-block;
	position: relative;
	top:0;
	margin: 0 auto;
	font-size: 20px;
	padding: .4em .6em;
	border-radius: 4px;
	background: #ef8633;
	text-align: center;
	font-weight:bold;
	box-shadow: 0 5px #e65c14;
	}
a.button{
	color: #fff;
	text-decoration:none;
	}
.button:hover{
	top:1px;
	background: #ff8d41;
	box-shadow: 0 4px #e65c14;
	}
.button.expanded{
	width: 100%;
	}
.button.small{
	font-size: 16px;
	box-shadow: 0 4px #e65c14;
	}
.button.small:hover{
	box-shadow: 0 3px #e65c14;
	}
.button.large{
	margin-bottom: 1rem;
	font-size: 24px;
	box-shadow: 0 5px #e65c14;
	}
.button.large:hover{
	box-shadow: 0 4px #e65c14;
	}
.label.alert.price_campain {
	display: inline-block;
	margin-left: .5rem;
	padding: .2rem .2rem;
	border-radius: 2px;
	font-size: .75rem;
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
	cursor: default;
	background: #0e3192;
	color: #fefefe;
	}
.label.alert.price_campain,
.label.alert.price_campain a{
	color: #fff;
	text-decoration: none;
	}
.label.alert.price_campain .h6 {
	font-size: 1rem;
	}
@media screen and (min-width: 40em) {
.button.large{
	padding:1.7em 1em;
	}
}
/* 申し込み系（赤色） */
.button.alert{
	background: #e33146;
	box-shadow: 0 5px #c0050b;
	}
.button.alert:hover{
	background: #ed4a5d;
	box-shadow: 0 4px #c0050b !important;
	}
a.blank::after{
	content: url(../img/ico_blank.png);
	}

/* cv */
.cv {
	}
.bg-color .cv{
	padding-top:60px;
	padding-bottom:50px;
	}
.cv .tel{
	margin-top: 5px;
	text-align: center;
	}
.cv .number{
	font-size: 54px;
	line-height: 1.2;
	font-weight: bold;
	}
	.cv .number::before{
		margin-right: 15px;
		content: url(../img/ico_freedial.png);
		}
@media screen and (min-width: 40em) {
.cv .tel{
	font-size: 18px;
	}
}
@media screen and (max-width: 39.9375em) {
.cv .tel{
	margin-top:1rem;
	}
.cv .number{
	font-size: 34px;
	}
}
/* header */
#header::before{
	position: absolute;
	display: block;
	top:56px;
	width: 100%;
	height: 200px;
	background: #dcdcdc;
	background: -moz-linear-gradient(top, #dcdcdc 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #dcdcdc 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #dcdcdc 0%,#ffffff 100%);
	content: '';
	z-index: -1;
	}
.h1 {
	margin-bottom: 30px;
	padding: 18px 0;
	background-color: #0f3192;
	color: #fff;
	}
	.h1 h1{
		margin:0;
		font-size: 1rem;
		font-weight: normal;
		}
#header h2 > img{
	margin-right: 24px;
	}
#header .bg-blue{
	margin:20px 0 20px;
	color: #fff;
	font-weight: bold;
	}
#header .campaign_bn.top + p,
#header .bg-blue + p{
	 margin-bottom: 10px;
	font-weight: bold;
	}
.featurebtn{
	margin: 0;
	padding: 0;
}
.featurebtn li {
	display: inline-block;
	border:1px solid #18338c;
	color: #18338c;
	background: #fff;
	}

@media screen and (min-width: 40em) {
#header {
	background: url(../img/bg_image.png) no-repeat 100% 90px;
	}
#header .bg-blue{
	display: inline-block;
	padding:16px 36px;
	font-size: 36px;
}
#header .campaign_bn.top + p,
#header .bg-blue + p{
	font-size: 20px;
	}
.support-text{
	margin-top: 1.5rem;
}
.featurebtn li {
	margin: 28px 5px 46px 0;
	padding:8px 15px;
	font-size: 18px;
	}
}
@media screen and (max-width: 39.9375em) {
.h1 {
	margin-bottom: 10px;
	padding: 9px 0;
	}
	.h1 h1{
		font-size: 12px;
		}
#header h2{
	font-size: 12px;
	}
#header h2 > img{
	width:60px;
	float: left;
	margin-right: 5px;
	}
#header .bg-blue{
	padding:16px 0;
	font-size: 18px;
	text-align:center;
	}
.featurebtn{
	margin-top:1rem;
	text-align: center;
	}
	.featurebtn li{
		padding:2px 4px;
		font-size:12px;
		}
}
#header .cv{
	padding-top:20px;
	background: rgba(255,255,255,.85);
	}

/* plan */
#plan{
	margin-top:50px;
	}
#plan .ttl-shared{
	margin-bottom: 90px;
	}
#plan .ttl-wp{
	margin-top: 40px;
	}
	#plan .ttl-wp > small{
		display: block;
		font-size: 1.8rem;
		}
	#plan .ttl-wp > small::before,
	#plan .ttl-wp > small::after{
		display: inline-block;
		width: 1px;
		height: 20px;
		background: #000;
		content: '';
		}
	#plan .ttl-wp > small::before{
		margin-right: 10px;
		transform: rotate( -30deg );
		}
	#plan .ttl-wp > small::after{
		margin-left: 10px;
		transform: rotate( 30deg );
		}
#plan section{
	padding-bottom: 20px;
	border-bottom:1px solid #d3d3d3;
	}
#plan .shared section:nth-child(1){
	border-left:1px solid #d3d3d3;
	}
#plan .shared section:nth-child(2){
	margin-top:-22px;
	margin-bottom: -18px;
	border-right:3px solid #d3d3d3;
	border-left:3px solid #d3d3d3;
	border-bottom:3px solid #d3d3d3;
	}
#plan .shared section:nth-child(3){
	border-right:1px solid #d3d3d3;
	}
#plan .shared section:nth-child(4){
	border-right:1px solid #d3d3d3;
	}
#plan .wp section{
	border-left:1px solid #d3d3d3;
	border-right:1px solid #d3d3d3;
	}
#plan h3{
	position: relative;
	font-size: 30px;
	line-height: 1.2;
	text-align: center;
	font-weight: normal;
	border-bottom:1px solid #d3d3d3;
	}
	#plan h3 > span{
		display: block;
		padding:18px 0 12px;
		font-size: 24px;
		color:#fff;
		}
	#plan section h3 > span::before{
		position: absolute;
		top:-34px;
		left:50%;
		margin-left: -28px;
		}
	#plan .shared section:nth-child(1) h3 > span{
		background: linear-gradient(to bottom, #663711 0%,#a56623 100%);
		}
	#plan .shared section:nth-child(1) h3 > span::before{
		content:url(../img/ico_b.png);
		}
	#plan .shared section:nth-child(2) h3 > span{
		padding:9px 0 5px;
		font-size: 34px;
		background: linear-gradient(to bottom, #8d8d8d 0%,#d6d6d6 100%);
		}
	#plan .shared section:nth-child(2) h3 > span > img{
		vertical-align: -14px;
		}
	#plan .shared section:nth-child(2) h3 > span::before{
		content:url(../img/ico_s.png);
		top:-48px;
		margin-left: -44px;
		}
	#plan .shared section:nth-child(3) h3 > span{
		background: linear-gradient(to bottom, #eb9646 0%,#f4c243 100%);
		}
	#plan .shared section:nth-child(3) h3 > span::before{
		content:url(../img/ico_g.png);
		}
	#plan .shared section:nth-child(4) h3 > span{
		background: linear-gradient(to bottom, #81a8de 0%,#c2d9ee 100%);
		}
	#plan .shared section:nth-child(4) h3 > span::before{
		content:url(../img/ico_p.png);
		}
	#plan .wp section h3 > span{
		margin-bottom: 15px;
		padding: 24px 0 18px;
		font-size: 30px;
		background: linear-gradient(to bottom, #94c062 0%,#ccdea3 100%);
		}
	#plan .wp section h3 > span::before{
		content:url(../img/ico_wp.png);
		}
	#plan h3 > strong{
		font-size: 48px;
		}
	#plan h3 > small{
		display: block;
		padding:5px 0 10px;
		font-size: 1rem;
		}
#plan .spec{
	margin:20px 15px;
	text-align: right;
	line-height: 30px;
	}
#plan .spec > p{
	margin: 8px 0;
	}
	#plan .spec > p > strong{
		font-size: 30px;
	}
	#plan .spec > p > span{
		float: left;
		}
#plan .button{
	display: block;
	margin:0 20px 25px;
	}
#plan .text-note{
	margin-top:30px;
	}
@media screen and (max-width: 39.9375em) {
#plan .shared section:nth-child(1),
#plan .shared section:nth-child(2){
	margin-bottom:3rem;
	}
#plan .shared section:nth-child(3){
	border-left:1px solid #d3d3d3;
	}
	#plan .shared section:nth-child(2) h3 > span{
		font-size: 24px;
	}
	#plan .shared section:nth-child(2) h3 > span > img{
		width:40px;
	}
#plan h3 > small,
#plan p.text-center{
		font-size: 12px;
	}
#plan h3 > small > br{
	display: none;
	}
#plan .button{
	font-size: 14px;
	}
}
/* support */
#support {
	margin-top: 80px;
}
#support .check-list li{
	padding-left: 45px;
	text-indent:-45px;
	color: #666;
	}
	#support .check-list li::before{
		margin-right: 18px;
		vertical-align: -4px;
		content: url(../img/ico_check.png);
		}
	#support .check-text {
		margin-top: 40px;
		text-align: center;
		font-weight: bold;
		line-height:1;
		}
.bg-blue-bottom{
	position: relative;
	padding:85px 0 40px;
	color: #fff;
	overflow: hidden;
	background: #465ca3;
	}
	.bg-blue-bottom::before{
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -600px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 55px 600px 0 600px;
		border-color: #fff transparent transparent transparent;
		content: '';
		}
	#support hr{
		border-color:#c9d1da;
		}
#support dl{
	position:relative;
	}
#support dt{
	font-weight: normal;
	}
#support dl::before{
	position: absolute;
	top: 0;
	left: 0;
	}
.support_tel::before{
	content: url(../img/ico_support_tel.png);
	}
.support_no1::before{
	content: url(../img/ico_support_no1.png);
	}
.support_check::before{
	content: url(../img/ico_support_check.png);
	}
.support_watch::before{
	content: url(../img/ico_support_watch.png);
	}
.support_secom::before{
	content: url(../img/ico_support_secom.png);
	}
#support > div:nth-child(4){
	margin-top: 80px;
	}
@media screen and (min-width: 40em) {
#support .check-list li{
	margin-top: 40px;
	font-size: 24px;
	}
	#support .check-text {
		font-size: 24px;
		}
	#support dl{
		min-height:146px;
		padding-top: 20px;
		padding-left: 175px;
		}
	#support dt{
		margin-bottom: 10px;
		font-size: 28px;
		}
	#support dd{
		font-size: 18px;
		}
	#support hr{
		margin: 50px 0;
		}
}
@media screen and (max-width: 39.9375em) {
#support .cell > img{
	display: none;
	}
	#support .check-list li{
		margin-top: 10px;
		line-height: 1;
	}
	#support .check-list li::before{
		margin-right: 18px;
		vertical-align: -8px;
		}
	#support dl{
		padding-left: 80px;
		}
		#support dl::before{
			zoom:.5;
			}
	#support dt{
		margin-bottom: 10px;
		font-size: 16px;
		}
}

/* function */
#function {
	margin-top: 40px;
	padding-bottom:40px;
	background: url(../img/bg_function.png) repeat-x 50% bottom;
	}
#function h3 {
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
	}
#function h3 + p{
	margin-bottom: 60px;
	}
#function .callout{
	position:relative;
	margin-bottom: 20px;
	background: #fff;
	border:1px solid #18338c;
	text-align: center;
}
#function .callout > span{
	display: flex;
	flex-wrap: wrap;
	height:95px;
	align-items: center;
	justify-content: center;
	align-content: center;
	color: #18338c;
	font-weight: bold;
	}
#function .callout > span > sup{
	font-size: .714rem;
	font-weight: normal;
	}
#function .callout > span > small{
	font-size: .786rem;
	font-weight: normal;
	}
#function .callout:nth-child(-n+4) > span{
	height:135px;
}
#function .tooltips {
	display: none;
	position: absolute;
	width: 100%;
	bottom: 95%;
	left: 15px;
	z-index: 9999;
	padding: 10px;
	color: #fff;
	background: #0f3192;
	border-radius: 0.5em;
	text-align: left;
}
#function .tooltips:after {
	width: 100%;
	content: "";
	display: block;
	position: absolute;
	left: -13.0em;
	bottom: -8px;
	border-bottom:8px solid transparent;
	border-right:8px solid #0f3192;
}
#function .callout:hover .tooltips {
	display: block;
}
@media screen and (max-width: 39.9375em) {
#function .callout > span{
	font-size:12px;
	font-weight:normal;
	}
#function .tooltips {
	width: 100%;
	font-size: 12px;
	}
}
/* step */
#step {
	padding: 40px 0 60px;
	background: #dcd9db;
	background: -moz-linear-gradient(top, #dcd9db 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #dcd9db 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #dcd9db 0%,#ffffff 100%);
	}
#step .cell{
	counter-increment: num;
	}
#step .callout{
	position: relative;
	margin:0 9px;
	padding:10px 20px 15px;
	border:1px solid #666;
	background: #fff;
	text-align: center;
	}
#step .cell:nth-child(-n+3) .callout::after{
	display: block;
	position: absolute;
	top:50%;
	right:-25px;
	margin-top: -11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 10px;
	border-color: transparent transparent transparent #666;
	content:'';
	}
#step .cell:last-child .callout{
	border:1px solid #c0050b;
	color: #c0050b;
	}
	#step .callout strong{
		font-size: 18px;
		}
	#step .callout strong:before {
		content: "0" counter(num) ".";
		font-size: 32px;
		}
	#step .callout span{
		display: block;
		min-height:5rem;
		margin-top:10px;
		text-align: left;
		}
@media screen and (max-width: 39.9375em) {
#step .callout{
	margin:0 0 20px;
	padding:10px 10px 15px;
	}
	#step .callout strong{
		font-size: 14px;
		}
	#step .callout strong:before {
		font-size: 18px;
		}
	#step .callout span{
		font-size:12px;
	}
#step .cell:nth-child(-n+3) .callout::after{
	right:-11px;
	}
}
/* voice */
#voice {
	padding-top: 40px;
	}
#voice h3{
	margin-top: -10px;
	font-weight: normal;
	font-size: 18px;
	}
#voice .pic{
	margin-top: -90px;
	}
#voice .bg-blue-bottom{
	padding: 120px 0 60px;
}
#voice .bg-blue-bottom p{
	margin-bottom: 1rem;
	}
#voice hr{
	margin:20px 0;
}
@media screen and (min-width: 40em) {
#voice .lead {
	min-height: 17rem;
	font-size: 18px;
	}
#voice h3{
	font-size: 30px;
	}
#voice .bg-blue-bottom p{
	margin-bottom: 2rem;
	font-size: 18px;
	}
#voice hr{
	margin:60px 0;
	}
}
@media screen and (max-width: 39.9375em) {
#voice .pic{
	display: none;
	}
}
/*campaign_bn*/
p.campaign_bn{
	margin:40px 10px;
	text-align: center;
}
p.campaign_bn.top{
	margin:15px 0;
	text-align: left;
	}
p.campaign_bn img {
	border: solid 3px #ccc;
}
p.campaign_bn a:hover img {
	border: solid 3px #132f92;
}
/* footer */
#footer{
	padding: 8px 0;
	font-size: 12px;
	background: #18338c;
	}
#footer .ft_menu li {
	display: inline;
	color: #fff;
	}
#footer .ft_menu li a {
	color: #fff;
	}
.ft_logo {
	padding-top: 14px;
	color: #a8adcb;
	text-align: right;
}
/* ページトップ */
.page-top {
	position: fixed;
	bottom: 20px;
	right: -40px;
	}
.fixed .page-top{
	right: 0;
	animation-duration: .5s;
	animation-name: fade-in;
	}
@keyframes fade-in {
	0% {right: -40px;}
	100% {right: 0;}
	}