@charset "Shift_JIS";

/*----------------------------------------
 会員について
----------------------------------------*/
.about{
	font-size: 1.6rem;
	text-align: center;
}
/* 上付き文字 */
.about sup {
	margin-left: 0.2em;
	font-size: 60%;
	vertical-align: text-top;
}

.about h1 {
	color: #006dc9;
	font-size: 3rem;
	line-height: 1.35;
}
@media print, screen and (min-width:768px) {
	.about h1 {
		margin: 0.3em 0 1em;
		font-size: 3.6rem;
	}
}

.about h2 {
	font-size: 2.4rem;
}
@media print, screen and (min-width:768px) {
	.about h2 {
		font-size: 2.8rem;
	}
}

.about h1 span,
.about h2 span,
.about h3 span {
	display: inline-block;
}
.about span.block {
	display: block;
}

.about #contentsTopArea p {
	margin: 0 0 0.5em;
	font-size: 1.8rem;
}

/* 5つのメリット
--------------------*/
.aboutMeritArea {
	margin: 0 0 1em;
	font-size: 1.4rem;
	background: #c0e2f9;
	background: #cfeafc;
}
.aboutMeritArea ul {
	margin: -15px 0 10px;
}
@media print, screen and (min-width:768px) {
	.aboutMeritArea ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: -10px -15px 10px;
	}
}
.aboutMeritArea li {
	width: 100%;
	margin: 20px 0;
	padding: 20px;
	background: #fff;
}
@media print, screen and (min-width:768px) {
	.aboutMeritArea li {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: calc((100% - 60px) / 2);
		margin: 15px;
	}
	.aboutMeritArea li:nth-of-type(3) {
		margin: 15px 30px;
	}
}
@media print, screen and (min-width:960px) {
	.aboutMeritArea li {
		width: calc((100% - 90px) / 3);
	}
	.aboutMeritArea li:nth-of-type(3) {
		margin: 15px;
	}
}
.aboutMeritArea h3 {
	margin: 0 0 0.4em;
}

.aboutMeritArea .meritImg{
	margin: 1em 0 0;
}

/* 注意事項 */
.meritAttArea{
	font-size: 1.2rem;
	text-align: left;
}
.meritAttArea p{
	padding-left: 2.6em;
	text-indent: -2.6em;
}

/* ご利用料金
--------------------*/
.chargeArea{
	margin: 0 0 1.5em;
}
.chargeArea li{
	position: relative;
	width: 100%;
	margin: 0 auto 2.5em;
}
.chargeArea li + li::before,
.chargeArea li + li::after{
	content: "";
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
.chargeArea li + li::before{
	top: -24px;
	left: calc(50% - 15px);
	border-top: 6px solid #92a8ba;
}
.chargeArea li + li::after{
	top: -36px;
	left: calc(50% - 3px);
	border-left: 6px solid #92a8ba;
}
@media print, screen and (min-width:768px) {
	.chargeArea{
		display: flex;
		justify-content: center;
	}
	.chargeArea li{
		width: calc(100% / 3);
		max-width: 200px;
		margin: 0 1.5em;
	}
	.chargeArea li + li::before{
		top: calc(50% - 22px);
		left: -39px;
	}
	.chargeArea li + li::after{
		top: calc(50% - 34px);
		left: -27px;
	}
}

.chargeArea dl{
	margin: 0 0 0.5em;
	border: 1px solid #c0c2dc;
}
.chargeArea dt{
	padding: .5em;
	background: #eaf0f4;
}
.chargeArea dd{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
}
@media print, screen and (min-width:768px) {
	.chargeArea dd{
		display: flex;
		height: 100px;
	}
}

.chargeArea li.chargeTotal{
	margin: 3em 0 0;
}
.chargeArea li.chargeTotal::before{
	font-family: 'icf' !important;
	content: "\e902";
	top: -4.0rem;
	left: calc(50% - 2.3rem);
	color: #006dc9;
	font-size: 4.6rem;
	line-height: 1;
	border-top: none;
}
.chargeArea li.chargeTotal::after{
	top: -4.0rem;
	border-color:#006dc9
}
@media print, screen and (min-width:768px) {
	.chargeArea li.chargeTotal{
		margin: 0 1.5em 0 2em;
	}
	.chargeArea li.chargeTotal::before{
		content: "\e900";
		top: calc(50% - 4.2rem);
		left: -44px;
	}
	.chargeArea li.chargeTotal::after{
		top: calc(50% - 22px);
		left: -44px;
		border-left: none;
		border-top: 6px solid #006dc9;
	}
}
.chargeArea .chargeTotal dt{
	color: #fff;
	background: #006dc9;
}

.chargeNum{
	font-size: 2.8rem;
}
.chargeTotalNum{
	color: #006dc9;
	font-size: 3.2rem;
	line-height: 1;
}

.chargeArea + .linkBlank{
	font-size: 1.4rem;
}

/* 画像囲み線 */
.borderImg{
	border: 1px solid #ccc;
}

/* 登録ボタン */
.aboutBtn{
	margin: 1.2em auto;
	padding: 0.8em;
	font-size: 1.6rem;
}
@media print, screen and (min-width:768px) {
	.aboutBtn{
		padding: 0.8em 2em;
	}
}

/* レスポンシブ用カラム */
.about .flexArea {
	text-align: left;
}
.about .itemTxt {
	font-size: 1.4rem;
}
.about .itemImg {
	margin: 1em 0 0;
	text-align: center;
}
@media print, screen and (min-width:768px) {
	.about .itemTxt {
		width: calc(100% - 512px);
		min-width: calc(50% - 30px);
	}
	.about .itemImg {
		width: 50%;
		max-width: 482px;
		max-height: auto;
		max-height: initial;
		margin: 0 0 0 30px;
	}
}

/* 登録手順 */
.about .flexArea + .flexArea {
	position: relative;
	margin: 4em 0 0;
}
.about .flexArea + .flexArea::before {
	font-family: 'icf' !important;
	content: "\e902";
	position: absolute;
	top: -1.2em;
	left: calc(50% - 2.3rem);
	color: #006dc9;
	font-size: 4.6rem;
	line-height: 1;
}

/* ログイン時のご注意強調 */
.about .borderBoxArea{
	margin: 1em 0 0;
	padding: 15px;
}

/*----------------------------------------
 免責事項
----------------------------------------*/
/* 文章量が長いので行間を広めにする */
.legal p{
	line-height: 1.75;
}

.legal .listIcon{
	margin: 0 0 1em;
}

.legalTable{
	margin: 0 0 1em;
}
.legalTable th, .legalTable td {
	padding: 6px 12px;
	vertical-align: middle;
}
.legalTable th {
	background: #eaf0f4;
}
.legalTable thead th {
	border-bottom: 2px solid #405a65;
}
.legalTable thead th:first-child {
	border-right: 2px solid #405a65;
}
.legalTable tbody th {
	border-right: 2px solid #405a65;
	border-top: 1px solid #c0c2dc;
}
.legalTable td {
	border-top: 1px solid #c0c2dc;
}
.legalTable th + th,
.legalTable td + td {
	border-left: 1px solid #c0c2dc;
}