@charset "utf-8";
/* ---------------------------------------------------
	common
------------------------------------------------------ */
body {font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 18px; line-height: 1; color: #1F1F1F; background: #fff; font-display: swap;}

#wrapper {width: 100%; margin: 0 auto; overflow: hidden;}

.container {width: 100%; max-width: 1200px; margin: 0 auto;}
.container:after {content: ""; clear: both; display: block;}

a {-webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -o-transition: all ease 0.2s; transition: all ease 0.2s;}
a:link, a:visited {color: #333; text-decoration: none;}
a:hover, a:visited {color: #333; text-decoration: none;}
a:hover {opacity: .7;}

img {max-width: 100%; height: auto; line-height: 1; vertical-align: bottom;}
img.max {width: 100%;}

p {line-height: 2.0;}

.flexbox {display: flex; flex-wrap: wrap; align-items: top; justify-content: space-between;}
.flexbox.mid {align-items: center;}
.flexbox.center {justify-content: center;}
.flexbox.reverse {flex-direction: row-reverse;}

.flL {float: left;}
.flR {float: right;}

.taL {text-align: left;}
.taC {text-align: center;}
.taR {text-align: right;}

.tcol-red {color: #8F200F;}

.rel {position: relative;}

.mincho {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.gothic {font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.chibi {font-family: tbchibirgothicplusk-pro, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-style: normal; font-weight: 400;}

.w20 {width: 20%;}
.w30 {width: 30%;}
.w70 {width: 70%;}
.w80 {width: 80%;}
.w1200 {max-width: 1200px;}

.pc-only {display: block;}
.sp-only {display: none;}
.pc-block {display: block;}
.sp-block {display: none;}
.pc-inline {display: inline;}
.sp-inline {display: none;}
.pc-hidden {display: none !important;}


@media screen and (max-width: 1366px) {
	body {font-size: 16px;}
}

@media screen and (max-width: 767px) {
	body {}
	.container {max-width: 100%;}
	p {line-height: 1.5;}
	.w1200 {width: auto;}
	.pc-only {display: none !important;}
	.sp-only {display: block;}
	.pc-block {display: none !important;}
	.sp-block {display: block;}
	.pc-inline {display: none !important;}
	.sp-inline {display: inline;}
	.pc-hidden {display: block;}
}

/* ---------------------------------------------------
	bg-change
------------------------------------------------------ */
.bg-change01 { background-color: #FFF;}
.bg-change02 { background-color: #000;}
.bg-change03 { background-color: #00F;}

/* ---------------------------------------------------
	font-size-change
------------------------------------------------------ */
.is-fs-m {font-size: 120%;}
.is-fs-l {font-size: 140%;}

/* ---------------------------------------------------
	header
------------------------------------------------------ */
#header {width: 100%; height: 100px; position: relative}
#header .header-logo {position: absolute; top: 0; left: 0; width: 12.5%;  max-width: 240px; max-height: 240px; background-color: #002BA2; z-index: 2000;}
#header .header-logo.active {position: fixed; background-color: #FFF;}
#header .header-logo a {display: block; color: #FFF; width: 100%; height: 100%;}
#header .header-logo.active a {color: #002BA2;}
#header .site-logo { margin: auto;}
#header .header-contents {width: 81.25%; max-width: 1560px; height: 100px; margin-left: auto; display: flex; justify-content: space-between; align-items: center;}
#header .header-contents .header-navi {width: 55.128%; max-width: 860px; margin-right: auto;}
#header .header-contents .header-tel {}
#header .header-contents .header-tel a {display: block; color: #002BA2; font-size: 2em; position: relative; padding-left: 26px; pointer-events: none; white-space: nowrap;}
#header .header-contents .header-tel a:before {content: ""; display: block; position: absolute; top: 50%; left: 0; margin-top: -15px; width: 23px; height: 30px; background: url(../images/header/ico-header-tel@2x.png) no-repeat top center; background-size: cover;}
#header .header-contents .header-mail {width: 160px; height: 100%; margin-left: 20px;}
#header .header-contents .header-mail a {display: block; background-color: #E2E911; color: #002BA2; font-size: 1.111em; text-align: center; width: 100%; height: 100%; position: relative; padding-top: 50px;}
#header .header-contents .header-mail a:before {content: ""; display: block; position: absolute; top: 25px; left: 50%; margin-left: -10px; width: 20px; height: 15px; background: url(../images/header/ico-header-mail@2x.png) no-repeat top center; background-size: cover;}

@media screen and (max-width: 767px) {
#header {width: 100%; height: 60px; position: relative}
#header .header-logo {position: absolute; top: 0; left: 0; width: 120px; height: 120px;}
#header .header-logo.active {position: fixed; background-color: #FFF;}
#header .site-logo { margin: auto;}
#header .header-contents {display: none;}
}

/* ---------------------------------------------------
	gnavi
------------------------------------------------------ */
.gnavi {}
.gnavi > ul {display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; margin: 0 auto;}
.gnavi > ul li {margin-right: 4.656%;}
.gnavi > ul li a {font-size: 1.111em; font-weight: bold; white-space: nowrap;}
.gnavi > ul li a:hover {color: #002BA2; border-bottom: 4px solid #E2E911;}

@media screen and (max-width: 1366px) {
.gnavi > ul li {margin-right: 2%;}
.gnavi > ul li a {font-size: 1em;}
}
@media screen and (max-width: 767px) {
}


/* ---------------------------------------------------
	btn_menu
------------------------------------------------------ */
.btn_menu {display: none; position: fixed; right: 0; top: 0; width: 100px; height: 100px; padding: 20px 20px 15px; cursor: pointer; text-align: center; z-index: 9999;}
.btn_menu .menu-trigger {display: inline-block; position: relative; width: 60px; height: 32px; box-sizing: border-box; transition: all .4s;}
.btn_menu .menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 3px; background-color: #002BA2;}
.btn_menu .menu-trigger span:nth-of-type(1) {top: 0;}
.btn_menu .menu-trigger.active span:nth-of-type(1) {top: 4px;}
.btn_menu .menu-trigger span:nth-of-type(2) {top: 14px;}
.btn_menu .menu-trigger span:nth-of-type(3) {bottom: 0;}
.btn_menu .menu-trigger.active {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.btn_menu .menu-trigger.active span {background-color: #FFF;}
.btn_menu .menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(10px) rotate(-35deg); transform: translateY(10px) rotate(-35deg);}
.btn_menu .menu-trigger.active span:nth-of-type(2) {-webkit-transform: translateY(0) rotate(35deg); transform: translateY(0) rotate(35deg);}
.btn_menu .menu-trigger.active span:nth-of-type(3) {opacity: 0;}
.btn_menu .menu-txt {padding-top: 10px;}
.btn_menu .menu-txt .t-menu {display: inline-block; color: #002BA2; transition: all .4s;}
.btn_menu .menu-txt .t-close {display: none; color: #FFF; transition: all .4s;}
.btn_menu .menu-txt.active .t-menu {display: none;}
.btn_menu .menu-txt.active .t-close {display: inline-block;}

@media screen and (max-width: 767px) {
.btn_menu {display: block; width: 60px; height: 60px; padding: 10px 10px 15px;}
.btn_menu .menu-trigger {width: 40px; height: 26px;}
.btn_menu .menu-trigger span {height: 2px;}
.btn_menu .menu-trigger span:nth-of-type(1) {top: 0;}
.btn_menu .menu-trigger.active span:nth-of-type(1) {top: 2px;}
.btn_menu .menu-trigger span:nth-of-type(2) {top: 12px;}
.btn_menu .menu-trigger span:nth-of-type(3) {bottom: 0;}
.btn_menu .menu-txt {padding-top: 7px; font-size: 0.75em;}
}

/* ---------------------------------------------------
	h-container
------------------------------------------------------ */
.h-container {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #002BA2; z-index: 1500;}
.menu-box {width: 100%; width: 1200px; margin: 37vh auto 0;}
.menu-box ul {display: flex; justify-content: center; text-align: center; margin-bottom: 13vh;}
.menu-box ul li {position: relative; color: #FFF;}
.menu-box ul li:before {content: "/"; display: inline-block;}
.menu-box ul li:first-child:before {content: ""; display: none;}
.menu-box ul li a {display: inline-block; color: #FFF; padding: 0 25px;}

.menu-contact {width: 50%; max-width: 600px; margin: 0 auto;}
.menu-contact table {width: 100%; border-top: 1px solid #FFF; border-left: 1px solid #FFF;}
.menu-contact table td { border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; vertical-align: middle; text-align: center; padding: 20px 0;}
.menu-contact .f-tit { color: #FFF; font-weight: bold; padding: 10px 0;}
.menu-contact .f-tel {margin: 0px 50px;}
.menu-contact .f-tel a {display: block; color: #FFF; font-size: 2em; position: relative; padding-left: 26px; font-family: Arial, Helvetica, "sans-serif";}
.menu-contact .f-tel a:before {content: ""; display: block; position: absolute; top: 50%; left: 0; margin-top: -15px; width: 23px; height: 30px; background: url(../images/header/ico-header-tel2@2x.png) no-repeat top center; background-size: cover;}
.menu-contact .f-mail {margin: 0px 20px;}
.menu-contact .f-mail a {display: flex; justify-content: center; align-items: center; background-color: #E2E911; color: #002BA2; font-size: 1.111em; font-weight: bold; text-align: center; width: 200px; height: 80px; position: relative;}
.menu-contact .f-mail a:before {content: ""; display: block; width: 20px; height: 15px; background: url(../images/header/ico-header-mail@2x.png) no-repeat top center; background-size: cover; margin-right: 10px;}

@media screen and (max-width: 767px) {
.h-container {}
.menu-box {width: 100%; width: 100%; margin: 120px auto 0;}
.menu-box ul {display: block; margin-bottom: 40px;}
.menu-box ul li {border-bottom: 1px solid #FFF;}
.menu-box ul li:before {content: ""; display: none;}
.menu-box ul li a {display: inline-block; color: #FFF; padding: 20px 0;}

.menu-contact {display: none;}
}

/* ---------------------------------------------------
	side-contact
------------------------------------------------------ */

@media screen and (max-width: 767px) {
}

/* ---------------------------------------------------
	下層ページタイトル
------------------------------------------------------ */
.pagetit {width: 81.25%; max-width: 1560px; height: 340px; margin-left: auto; position: relative; background: url(../images/header/bg-pagetit.jpg) no-repeat top left; background-size: 1560px 340px;}
.pagetit .page-title {margin: 0; font-size: 50px; line-height: 1.4; font-family: tbchibirgothicplusk-pro, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 400; padding: 170px 0 0 60px; color: #002BA2;}

@media screen and (max-width: 767px) {
.pagetit {width: 100%; max-width: 100; height: 200px; margin-left: 0; position: relative; background-size: cover;}
.pagetit .page-title {margin: 0; font-size: 1.875em;; padding: 140px 0 0 10px;}
}

/* ---------------------------------------------------
	パンくず
------------------------------------------------------ */
.topicpath { background: none; position: absolute; top: 10px; right: 10px;}
.topicpath-list { width: 100%; padding: 0; text-align: right;}
.topicpath-item { float: none; display: inline-block; background: none; padding: 0; font-size: 15px; }
.topicpath-item:first-child { padding: 0;}
.topicpath-item:before { display: inline-block; content: "/"; padding: 0 10px;}
.topicpath-item:first-child:before { display: inline-block; content: ""; padding: 0;}
.topicpath-link { font-size: 15px;}

@media screen and (max-width: 767px) {
}

/* ---------------------------------------------------
	suggest
------------------------------------------------------ */
.suggest {width: 100%;}
.suggest-box {width: 100%; max-width: 1200px; padding: 40px 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: nowrap; background: none;}
.suggest-box .f-address { display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center;}
.suggest-box .f-address .f-logo {width: 240px; height: 120px; margin-right: 20px;}
.suggest-box .f-address p {line-height: 1.4;}
.suggest-box .f-contact {width: 45%; max-width: 540px;}
.suggest-box .f-contact table {width: 100%; border-top: 1px solid #002BA2; border-left: 1px solid #002BA2;}
.suggest-box .f-contact table td { border-right: 1px solid #002BA2; border-bottom: 1px solid #002BA2; vertical-align: middle; text-align: center; padding: 20px;}
.suggest-box .f-contact .f-tit { color: #002BA2; font-weight: bold; padding: 10px 0;}
.suggest-box .f-contact .f-tel {}
.suggest-box .f-contact .f-tel a {display: block; color: #002BA2; font-size: 2em; position: relative; padding-left: 26px; font-family: Arial, Helvetica, "sans-serif"; pointer-events: none;}
.suggest-box .f-contact .f-tel a:before {content: ""; display: block; position: absolute; top: 50%; left: 0; margin-top: -15px; width: 23px; height: 30px; background: url(../images/header/ico-header-tel@2x.png) no-repeat top center; background-size: cover;}
.suggest-box .f-contact .f-mail {}
.suggest-box .f-contact .f-mail a {display: flex; justify-content: center; align-items: center; background-color: #E2E911; color: #002BA2; font-size: 1.111em; font-weight: bold; text-align: center; width: 200px; height: 80px; position: relative;}
.suggest-box .f-contact .f-mail a:before {content: ""; display: block; width: 20px; height: 15px; background: url(../images/header/ico-header-mail@2x.png) no-repeat top center; background-size: cover; margin-right: 10px;}


@media screen and (max-width: 767px) {
.suggest-box {width: 100%; max-width: 100%; padding: 40px 0 0; display: block;}
.suggest-box .f-address { display: block; padding-bottom: 40px;}
.suggest-box .f-address .f-logo {margin: 0 auto; text-align: center; padding-bottom: 20px;}
.suggest-box .f-address p {text-align: center;}
.suggest-box .f-contact {width: 100%; max-width: 100%;}
.suggest-box .f-contact table td {padding: 10px; display: block;}
.suggest-box .f-contact .f-tel a {pointer-events: auto; margin: auto; width: 240px;}
.suggest-box .f-contact .f-mail a {width: 100%; height: 80px;}
}

/* ---------------------------------------------------
	footer
------------------------------------------------------ */
#footer {position: relative; width: 100%; background-color: #F2F8FF;}
#footer .fnavi {width: 100%; max-width: 1200px; padding: 50px 0 40px; margin: 0 auto;}
#footer .fnavi ul {display: flex; justify-content: center; text-align: center;}
#footer .fnavi ul li {position: relative; color: #002BA2;}
#footer .fnavi ul li:before {content: "/"; display: inline-block;}
#footer .fnavi ul li:first-child:before {content: ""; display: none;}
#footer .fnavi ul li a {display: inline-block; color: #002BA2; padding: 0 25px;}
#footer .f-copy { text-align: center; font-family: Arial, Helvetica, "sans-serif"; font-size: 12px; padding-bottom: 25px;}

#footer .pagetop {display: none; position: fixed; right: 0; bottom: 0; z-index: 1000;}
#footer .pagetop a {display: block; width: 70px; height: 70px; background: url(../images/footer/btn-pagetop.png) no-repeat top center; background-size: cover;}

@media screen and (max-width: 767px) {
#footer {}
#footer .fnavi {width: 100%; max-width: 100%; padding: 40px 0 20px;}
#footer .fnavi ul {display: block;}
#footer .fnavi ul li {display: inline-block; padding-bottom: 20px;}
#footer .fnavi ul li:before {content: ""; display: none;}
#footer .fnavi ul li a {padding: 0 15px;}
	
#footer .pagetop a {width: 60px; height: 60px;}
}