#page {padding-top: 70px;}

@media (max-width: 767px) {
	#page {padding-top: 60px;}
}

/*ヘッダー
------------------------------*/
.header {padding:10px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background: #fff;}
.header_inner {max-width: 1100px; display: flex; align-items: center; height: 50px;}
.header_logo {font-size: 1.5rem; line-height: 0;}
.header_logo a {display: block;}
.header_nav {flex-basis: calc(100% - 256px); padding-left: 20px;}

@media (max-width: 767px) {
	.header_inner {height: 40px;}
	.header_logo {width: 205px;}
	.header_nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; padding-left: 0; background: var(--color-blue); height: calc(100vh - 60px);}
}

/*ナビゲーション
------------------------------*/
.nav {font-size: 0; text-align: right; white-space:nowrap;}
.nav>li {display: inline-block; line-height: 1; border-right: 1px solid #ddd; position: relative;}
.nav>li>a {display: block; font-size: 1.4rem; padding: 12px 20px; position: relative; transition: 0.3s; cursor: pointer;}
.nav>li>a:after {content: ""; width: calc(100% - 20px); height: 3px; background: var(--color-blue); position: absolute; left: 10px; bottom: 0; transform: scaleX(0); transition: 0.3s; transform-origin: left;}
.nav>li.active>a:after {transform: scaleX(1);}
.nav>li.on>a:after {transform: scaleX(1);}
.nav>li>a:hover {color: var(--color-blue);}
.nav>li>a:hover:after {transform: scaleX(1);}
.nav>li>a>i {position: absolute; top: 50%; right: 20px; margin-top: -0.5em; display: none;}

.nav>li.nav_business>a>i {transform: rotate(90deg); transition: 0.3s;}
.nav>li.nav_business.on>a>i {transform: rotate(-90deg)}

@media (max-width: 880px) {
	.nav>li>a {padding: 10px 15px;}
}

@media (max-width: 767px) {
	.nav {text-align: left;}
	.nav>li {display: block; border-right: 0; border-bottom: 1px solid #1965b0}
	.nav>li>a {background: var(--color-blue); color: #fff; padding: 19px 20px;}
	.nav>li>a:after {display: none;}
	.nav>li.active>a {background:var(--color-blue-dark);}
	.nav>li>a:hover {color: #fff;}
	.nav>li>a>i {display: block;}
}

/*ドロップダウン
------------------------------*/
.menu_business {position: absolute; top: 100%; left: 0; font-size: 1.5rem; display: none;}
.menu_business ul {padding-top: 10px;}
.menu_business li {border: 1px solid #ccc; border-bottom: 0;}
.menu_business li:last-child {border-bottom: 1px solid #ccc;}
.menu_business li a {display: block; padding: 12px 30px 12px 15px; text-align: left; background: #fff; position: relative; font-size: 1.4rem;}
.menu_business li a i {position: absolute; right: 5px;}
.menu_business li a:hover {background: var(--color-blue-ulight); color: var(--color-blue);}
.menu_business li a.active {background: var(--color-blue-ulight);}

@media (max-width: 767px) {
	.menu_business {position: static;}
	.menu_business ul {padding-top: 0;}
	.menu_business li {border: 0; border-bottom: 1px solid #ccc;}
	.menu_business li:last-child {border-bottom: 0;}
	.menu_business li a {padding: 16px 20px; background: #fff;}
	.menu_business li a i {right: 20px;}
}

/*タイトル
------------------------------*/
.title {color: #fff; padding: 13px 20px;}
.title h2 {color: #fff; max-width: 1100px; margin: 0 auto; font-size: 1.8rem;}

.title_inner {padding-left: 20px; position: relative; margin: 40px 0 20px; font-size: 1.5rem;}
.title_inner:before {content: ""; width: 15px; border-top: 1px solid var(--color-blue-light); position: absolute; left: 0; top: 50%;}

.title_line {padding-left: 30px; position: relative; margin: 0 0 50px; font-size: 1.8rem; line-height: 1.3;}
.title_line:before {content: ""; width: 20px; border-top: 1px solid var(--color-blue-light); position: absolute; left: 0; top: 50%;}

/*ボタン
------------------------------*/
.b_enter{display:block;border-width:2px;border-style:solid;border-radius:5px;padding:20px;text-align:center;width:100%;-webkit-appearance:none;font-size:1.6rem;transition:0.1s;}
.b_enter:hover{opacity:0.8}
.b_newmember{border-color:var(--color-gray);color:var(--color-gray-dark);background:var(--color-gray-light);}
.b_member{border-color:var(--color-green);background:var(--color-green);color:#fff;}
.b_company{border-color:var(--color-green);color:var(--color-green);background:var(--color-green-slight);}

/*フッター
------------------------------*/
.footer {background: var(--color-navy-light); color: #fff;}
.footer a {color: #fff;}
.footer_inner {padding: 40px 20px; max-width: 1140px; display: flex; flex-wrap: wrap;}
.footer_info {flex-basis: 250px; line-height: 1.5; font-size: 1.4rem;}
.footer_info strong {display: block; margin-bottom: 10px;}
.footer_info a {text-decoration: underline;}
.footer_nav {flex-basis: calc(100% - 250px); font-size: 0; text-align: right;}
.footer_nav_inner {display: inline-block; text-align: left;}

@media (max-width: 900px) {
	.footer_info {flex-basis: 100%; padding-bottom: 30px;}
	.footer_nav {flex-basis: 100%; text-align: left; border-top:1px solid #4c6780; padding-top: 30px;}
}

.fnav {vertical-align: top; margin-left: 20px; margin-bottom: 20px; display: inline-block;}
.fnav dt {margin-bottom: 15px; font-size: 1.3rem;}
.fnav dd {margin-bottom: 10px; font-size: 1.2rem;}
.fnav dd:before {content: "-"; display: inline-block; width: 1em;}
.fnav a[href]:hover {text-decoration: underline;}

@media (max-width: 900px) {
	.fnav {margin: 0 20px 20px 0}
}

.copyright {background: var(--color-navy); text-align: center; font-size: 1.2rem; padding: 13px;}

/*ページの先頭
------------------------------*/
.pagetop{position: fixed; right: 20px; bottom: 20px; display: none;}
.pagetop_inner{height: 60px; width: 60px; text-align: center; background: var(--color-blue); line-height: 54px; cursor: pointer; transition: 0.2s; border-radius: 50%;}
.pagetop_inner i{font-size: 2rem; color: #fff;}
.pagetop_inner:hover {background: var(--color-blue-light);}

/*アンカー
------------------------------*/
.ancher {height: 70px; margin-top: -70px;}

@media (max-width: 767px) {
	.ancher {height: 60px; margin-top: -60px;}
}

/*コンテンツ
------------------------------*/
.wrap {overflow: hidden;}
.contents {padding: 50px 20px; max-width: 1140px;}
.contents p {line-height: 1.6;margin-bottom: 20px;}

.contents a {cursor:pointer; color: var(--color-blue); transition: 0.3s;}
.contents a:not(a[class]):hover {color: var(--color-blue-light);}

/*サブページヘッダー
------------------------------*/
.sub_title {padding: 15px 20px;}
.sub_title h2{max-width: 1100px; margin: 0 auto; color: #fff; font-size: 1.8rem; line-height: 1.3}

@media (max-width: 767px) {
	.sub_title h2 {font-size: 1.6rem;}
}

.sub_desc {background: var(--color-blue); color: #fff; padding: 20px;}
.sub_desc_inner {max-width: 1100px; line-height: 1.6;}

.icon_title {position: relative; font-size: 2.3rem; margin-bottom: 30px; padding: 0 0 0 30px;}
.icon_title:before {content: ""; background: url(../images/icon_title.png) no-repeat 0 0 / cover; width: 20px; height: 29px; position: absolute; left: 0;}

/*サブページお問い合わせ
------------------------------*/
.contact_block {padding: 100px 20px; border-top: 5px solid var(--color-blue)}
.contact {max-width: 1100px; display: flex; flex-wrap: wrap; align-items: center;}
.contact_l {flex-basis: 50%;}
.contact_r {flex-basis: 50%; padding-left: 100px;}

.b_contact {display: block; color: #fff; padding: 0 0 0 65px; border-radius: 10px; position: relative; height: 80px; line-height: 80px; font-size: 2.5rem; transition: 0.3s;}
.b_contact:before {content: ""; width: 41px; height: 32px; background: url(../images/icon_mail.png) no-repeat 0 0 / cover; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
.b_contact:after {content: ""; width: 20px; height: 32px; background: url(../images/arrow2.png) no-repeat 0 0 / cover; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.b_contact:hover {filter: brightness(1.1);}

@media (max-width: 900px) {
	.contact_r {padding-left: 30px;}
	.b_contact {font-size: 2rem;}
}

@media (max-width: 767px) {
	.contact_block {padding: 50px 20px;}
	.contact {max-width: 450px;}
	.contact_l {flex-basis: 100%;}
	.contact_r {flex-basis: 100%; padding: 30px 0 0 0;}

	.b_contact {height: 60px; line-height: 60px; font-size: 1.8rem; letter-spacing: 0;}
	.b_contact:before {width: 32px; height: 25px;}
	.b_contact:after {width: 16px; height: 25px;}
}

.contact_tel img {margin-right: 10px;}
.contact_tel strong{font-size: 4rem; color: var(--color-blue-light);}
.contact_time {display: inline-block; margin-right: 10px; background: var(--color-blue); color: #fff; font-size: 1.2rem; padding: 5px 20px;}