@charset "utf-8";

/*=========================================
  スマホ 320〜559pxと全デバイス共通のスタイル
==========================================*/
/*-----------------------------
  　　　　　　全体
------------------------------*/
/* clearfix hack */
.cf:after {
	content: "";
	clear: both;
	display: block;
}

body {
	width: 100%;
	background-color: transparent;
	color: #4d4d4d;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p {
	text-align: left;
	font-size: 18px;
  line-height: 1.5;
}

a {
	text-decoration: none;
}

a:hover{
	opacity: 0.5;
}

/* width */
.w100per {width: 100%;}
.mw840px {max-width: 840px;}

/* SP非表示PC表示 */
.hide-show-pc-1 {display: none;}
.hide-show-sp-1 {display: block;}

/* 背景色 */
.bg-lbl {background: #E9EFFF;}
.bg-lbl-wh {background: #f5f7f7;}

/* 文字色 */
.m3blue {color: #001f66;}
.mkkBlue {color: #053687;}
.txt-bl {color: #0055a2;}
.txt-r {color: #cc0000;}

/* 文字 */
.sectionTitle {
	text-align: center;
	font-size: 30px;
	color: #053687;
	font-weight: bold;
	margin-bottom: 30px;
}

/* 文字揃え */
.textCenter {text-align: center;}
.textLeft {text-align: left;;}

/* 文字のサイズ */
.text14px {font-size: 14px;}
.text15px {font-size: 15px;}
.text20px {font-size: 20px;}
.text20to25px {font-size: 20px;}
.text30to35px {font-size: 30px;}

/* 文字の太さ */
.textBold {
	font-weight: bold;
}

/* 文字詰め */
.ls0pt46em {letter-spacing: 0.46em;}
.lsmns0pt02em {letter-spacing: -0.02em;}

/* padding */
.pdg10-10-20to0px {padding: 10px 10px 20px;}
.pdg50-10-0px {padding: 50px 10px 0;}
.pdg0-10-50px {padding: 0 10px 50px;}
.pdg0-10-30px {padding: 0 10px 30px;}
.pdg0-10px {padding: 0 10px;}
.pdg50-10px {padding: 50px 10px;}
.pl0pt5em {padding-left:0.5em;}
.pl1em {padding-left:1em;}
.pl3pt5em {padding-left:3.5em;}
.pt20to40px {padding-top:20px;}
.pdgTop5px {padding-top:5px;}
.pdgBtm5px {padding-bottom:5px;}

/* margin */
.mt1300to500px {margin-top:1300px;}
.mt10px {margin-top:10px;}
.mt30px {margin-top:30px;}
.mb10px {margin-bottom:10px;}
.mb20px {margin-bottom:20px;}
.mb30px {margin-bottom:30px;}
.mb50px {margin-bottom:50px;}
.mgn0-auto {margin:0 auto;}

/* 改行 */
.br:before,
.br2:before,
.br3:before,
.tbl-br:before {
	content: "\A" ;
	white-space: pre ;
}

/* インデント */
.indent-1em {
	padding-left:1em;
	text-indent:-1em;
}
.indent-3em {
	padding-left:3em;
	text-indent:-3em;
}
.indent-3pt3em {
	padding-left:3.3em;
	text-indent:-3.3em;
}
.indent-4pt1em {
	padding-left: 4.1em;
	text-indent: -4.1em;
}

/* 行間 */
.lineHgt-0pt8 {line-height: 0.8;}
.lineHgt-1 {line-height: 1;}
.lineHgt-1pt2 {line-height: 1.2;}
.lineHgt-1pt5 {line-height: 1.5;}

/* 飾り */
.ornament {
	width: 100px;
	margin: 0 auto 10px;
}

/* ブロック要素 */
.dp-bl {display:block;}

/* アイコン */
.leaf {display: inline-block;}

/* border */
.bb-0055a2 {border-bottom: 1px solid #0055a2;}

/* 現在地のナビの画像に半透明の色をかける */
.colorfilter-base {
	background-color: #4747b3;
}
/* ナビのお申し込み・お問い合わせ部分を常にオレンジ */
.colorfilter-or {
	background:linear-gradient(to bottom, #ff9a4d 5%, #e64500 100%);
}

/* お申込み・お問い合わせボタン */
.appButton {
	background:linear-gradient(to bottom, #ff9a4d 5%, #e64500 100%);
	background-color:#ff9a4d;
	border-radius:6px;
	border:1px solid #e67417;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:22px;
	font-weight:bold;
	padding:16px 15px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc8e3d;
	/* ↓ 追加 ↓ */
	width: 100%;
	max-width: 450px;
	box-shadow: 2px 2px 4px #555;
}
.appButton:hover {
	background:linear-gradient(to bottom, #e64500 5%, #ff9a4d 100%);
	background-color:#e64500;
}
.appButton:active {
	position:relative;
	top:1px;
}

/* キャンペーンボタン */
.cpButton {
	background:linear-gradient(to bottom, #89c403 5%, #009333 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #009333;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:22px;
	font-weight:bold;
	padding:16px 15px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
	/* ↓ 追加 ↓ */
	width: 100%;
	max-width: 450px;
	box-shadow: 2px 2px 4px #555;
}
.cpButton:hover {
	background:linear-gradient(to bottom, #009333 5%, #89c403 100%);
	background-color:#009333;
}
.cpButton:active {
	position:relative;
	top:1px;
}

/* 通常ボタン */
.normalBtn {
	display: inline-block;
	text-align: center;
	width: 100%;
	max-width: 400px;
	background: #cc0000;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	border-radius: 10px;
	height: 40px;
	line-height: 40px;
}

/*------------- ↓ Q&Aアコーディオン ↓ -------------*/
.acd-check {
    display: none;
}
.acd-label{
    background: #0068b7;
    color: #fff;
    display: block;
    padding: 12px;
    position: relative;
		height: 50px;
    line-height: 50px;
}
.acd-label:after {
    background: #00479d;
    box-sizing: border-box;
    content: '\f106';
    display: block;
    font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 25px;
    padding: 0 20px;
    position: absolute;
    right: 0;
    top: 0px;
		height: 100%;
}
.acd-label p {
    width: 75%;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
		position: absolute;
    top: 50%;
    /* left: 0%; */
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.acd-content {
		background: #ebf5ff;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 12px;
    transition: .5s;
    visibility: hidden;
}
.acd-content p {
	padding-left: 1.7em;
	text-indent: -1.7em;
}
.acd-check:checked + .acd-label:after {
    content: '\f107';
}
.acd-check:checked + .acd-label + .acd-content {
    height: auto;
    opacity: 1;
    padding: 12px;
    visibility: visible;
}
@media only screen and (min-width: 560px) {
	.acd-label{
		padding: 20px;
	}
	.acd-label:after {
	    padding: 0 20px;
	}
	.acd-label p {
	    width: 87%;
	}
	.acd-content {
	    padding: 0 20px;
	}
	.acd-check:checked + .acd-label + .acd-content {
	    padding: 20px;
	}
}
@media only screen and (min-width: 760px) {
	.acd-label:after {
	    position: absolute;
	    top: 50%;
	    right: 0;
	    transform: translateY(-50%);
	    -webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	}
	.acd-label p {
	    width: 90%;
	}
}
/*------------- ↑ Q&Aアコーディオン ↑ -------------*/

/*----------------------------------------
ヘッダー（スマホ）
----------------------------------------*/
header img {
	width: 100%;
}

#topHeader {
	width: 80%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	background: transparent;
	z-index: 1002;
}
#topHeader .in-topHeader {
	max-width: 1000px;
	margin: 0 auto;
}
#topHeader h1 {
	height: 58px;
	text-align: left;
	float: left;
}
#topHeader h1 img {
	width: auto;
	height: 58px;
	padding: 10px;
}
#topHeader h2 {
	display: none;
}
#topHeader h2 span {
	color: #053687; /*変更前：#001f66*/
	background: #fff;
	display: inline-block;
	padding: 0 10px;
}

#mainVisual{
	padding-top: 58px;
	position: relative;
}

/*----------------------------------------
コンテンツエリア（スマホ）　　
----------------------------------------*/
.container {
	text-align: center;
	position: relative;
}
.container img {
	width: 100%;
}

#about-rv,
#example,
#charge {
	padding-top: 60px;
　margin-top: -60px;
}

#tos p {
	display: block;
	margin-bottom: 10px;
}
#tos .tosNo {
	color: #053687;/*変更前：#001f66*/
	font-weight: bold;
}

/* フォーム */
iframe {
	width: 100%;
	height: 910px;
	margin: 0 auto;
}

.inSection,
.question {
	max-width: 1000px;
	margin: 0 auto 30px;
	text-align: center;
}
.inSection p {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
.inSection .serviceInfo,
.inSection .application {
	display: inline-block;
	text-align: left;
	font-size: 18px;
}
.inSection .message p {
	text-align: center;
}
.inSection .balloon-r {
	width: 100%;
	/* ↓ バルーン ↓ */
	position: relative;
	padding: 20px;
	font-size: 16px;
	line-height: 1.7;
	background: #e0edff;
	border-radius: 10px;
}
.inSection .balloon-r:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #e0edff;
}
.inSection .userIll {
	width: 60%;
	margin-top: 10px;
}
.inSection .mw450img {
	width: 100%;
	max-width: 450px;
	display: block;
	margin: 0 auto;
}
.inSection .mw700img {
	width: 100%;
	max-width: 700px;
	display: block;
	margin: 0 auto;
}

/* ↓ テーブル（表組/tbl-1） ↓ */
.tbl-1,
.tbl-2 {
	max-width: 850px;
  margin: 10px auto;
	border: solid 1px #ccc;
}
.tbl-1 th {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	color: #443737;
  background: #c2daf2;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
.tbl-2 th {
	line-height: 1.5;
	padding: 10px;
	color: #443737;
  background: #c2daf2;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	width: 36%;
}
.tbl-1 td {
	text-align: left;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	background: #f6f6f6;
	border-bottom: solid 1px #ccc;
}
.tbl-2 td {
	text-align: left;
	line-height: 1.5;
	padding: 10px;
	background: #f6f6f6;
	border-bottom: solid 1px #ccc;
}
.last th,
.last td {
	border-bottom: none;
}
@media screen and (max-width: 599px) {
  .tbl-1,
	.tbl-2 {
    width: 100%;
  }
	.tbl-1 th {
		text-align: center;
		border-right: none;
		display: block;
	}
	.tbl-2 th {
		width: 100%;
		text-align: center;
		border-right: none;
		display: block;
	}
	.tbl-1 td {
		text-align: center;
		display: block;
	}
	.tbl-2 td {
		text-align: left;
		display: block;
	}
	.tbl-2 td.tdCtr {
		text-align: center;
		display: block;
	}
	.last th {
		text-align: center;
		border-bottom: solid 1px #ccc;
	}
}
/* ↑ テーブル（表組） ↑ */

/* ↓ ページトップ ↓ */
p#pageTop {
	position: fixed;
	bottom: 10px;
	right: 5px;
	z-index: 1;
}
p#pageTop a {
	display:block;
	text-align:center;
	width:60px;
	height:60px;
	line-height: 60px;
	color: #fff;
	padding: 3px;
	text-decoration: none;
	font-size: 2.5em;
	border-radius: 50%;
	background-color: rgba(128,128,128,.9);
	transition: all .5s linear;
}
p#pageTop a:hover {
	text-shadow: -1px -1px 1px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	background-color: #000;
	color:#FFF;
}
p#pageTop a span {
	font-weight: bold;
	font-size: 2em;
}
/* ↑ ページトップ ↑ */

/*----------------------------------------
フッター（スマホ）
----------------------------------------*/
footer {
	background-color: #053687;
	padding: 10px;
}
footer #upperFoot p {
  text-align: left;
	font-size: 15px;
	font-weight: normal;
	color: #fff;
	margin-bottom: 10px;
}
footer small {
	color: #fff;
	font-size: 0.7em;
}

/*========================================
　タブレット 560〜959px
========================================*/
@media only screen and (min-width: 560px){
	/*----------------------------------------
	全体
	----------------------------------------*/
	/* お申込み・お問い合わせボタン */
	.appButton,.cpButton {font-size:30px;}

	/* padding */
	.pt20to40px{padding-top:40px;}

	/* margin */
	.mt1300to500px {margin-top:650px;}

	/* .br の改行を解除 */
	.br:before {
		display: none;
	}

	/* 560pxでの改行 */
	.br560px {
		content: "\A" ;
		white-space: pre ;
	}

	/*----------------------------------------
	コンテンツエリア（タブレット）　　
	----------------------------------------*/
	.inSection .balloon-r {
		width: 60%;
		margin-right: 10px;
	}
	.inSection .balloon-r:before {
		content: "";
	  position: absolute;
	  top: 50%;
	  left: 100%;
	  margin-top: -15px;
		border: 30px solid transparent;
    border-left: 40px solid #e0edff;
	}
	.inSection .userIll {
		width: 35%;
		margin-top: 0;
	}

	/* フォーム */
	iframe {
		height: 780px;
	}
}

@media only screen and (min-width: 600px) {
	/* tbl-br2の改行 */
	.tbl-br2:before {
		content: "\A" ;
		white-space: pre ;
	}
}

/*========================================
　タブレット 760px〜959px
========================================*/
@media only screen and (min-width: 760px) {
	/*----------------------------------------
	全体（タブレット）
	----------------------------------------*/
	/* SP非表示PC表示 */
	.hide-show-pc-1 {display: block;}
	.hide-show-sp-1 {display: none;}

	/* br3・tbl-br・tbl-br2 の改行を解除 */
	.br3:before,
	.tbl-br:before,
	.tbl-br2:before {
		display: none;
	}

	/* 760pxでの改行 */
	.br760px {
		content: "\A" ;
		white-space: pre ;
	}

	.bg-lbl-wh {background: #fff;}

	.pdg10-10-20to0px {padding: 10px 10px 0;}

	/*----------------------------------------
	ヘッダー（タブレット）
	----------------------------------------*/
	#topHeader {
		width: 100%;
		background: #fff;
		z-index: 1002;
	}
	#topHeader h1 {
		height: 50px;
		background: #fff;
		border: none;
	}
	#topHeader h1 img {
		padding: 7px 10px 14px;
	}
	#topHeader h2 {
		display: block;
		line-height: 50px;
		text-align: right;
		font-size: 28px;
		font-weight: bold;
	}

	#mainVisual {
		padding-top: 108px;
	}

	/*----------------------------------------
	コンテンツエリア（PC）　
	----------------------------------------*/
	.sectionTitle {
		font-size: 40px;
	}

	.inSection .userIll {
		width: 30%;
	}

	/*----------------------------------------
	フッター（タブレット）
	----------------------------------------*/
	footer {
		text-align: center;
	}
	footer #upperFoot p {
		display: inline-block;
	}
	footer #upperFoot p:nth-child(-n+4) {
		margin-right: 5%;
	}
}

/*========================================
　PC 960px以上
========================================*/
@media only screen and (min-width: 960px) {
	/*----------------------------------------
	全体（タブレット）
	----------------------------------------*/
	.text20to25px {font-size: 25px;}
	.text30to35px {font-size: 35px;}

	.mt1300to500px {margin-top:500px;}

	/*----------------------------------------
	コンテンツエリア（PC）　　
	----------------------------------------*/
	.inSection .balloon-r {
		width: 50%;
	}
	.inSection .userIll{
		width: 25%;
	}

	/* フォーム */
	iframe {
		height: 720px;
	}
}

/*========================================
　PC 1160px以上
========================================*/
@media only screen and (min-width: 1160px) {
	/* .br2 の改行を解除 */
	.br2:before {
		display: none;
	}
}