@charset 'UTF-8';

/* header
--------------------------------------- */

header {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 19px 15px 21px;
box-sizing: border-box;
}

header .logo {
width: 247px;
}

header .tel {
position: absolute;
top: 16px;
right: 13px;
z-index: 2;
}

header .tel p {
color: #2E2727;
letter-spacing: -0.5px;
}

header .tel p .large {
font-size: 14px;
vertical-align: baseline;
}

header .tel p .small {
font-size: 10px;
vertical-align: baseline;
}

header .tel .num {
padding: 0 0 0 44px;
font-size: 32px;
font-weight: bold;
line-height: 1;
letter-spacing: 0.5px;
text-align: center;
background: url("../img/ico_tel_01.png") no-repeat left center;
}

header .gnav ul {
padding: 42px 0 0;
text-align: center;
letter-spacing: -0.5em;
}

header .gnav ul li {
position: relative;
display: inline-block;
padding: 2px 27px;
font-size: 15px;
letter-spacing: 0;
vertical-align: middle;
border-left: 1px solid #707070;
}

header .gnav ul li:first-child {
padding: 0 20px 0 30px;
border: none;
}

header .gnav ul li.act:after {
content: "";
position: absolute;
bottom: -21px;
left: 50%;
margin-left: -6px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 6px 12px 6px;
border-color: transparent transparent #054FAF transparent;
}

header .gnav ul li.act a {
color: #054FAF;
}

header .gnav ul li span {
display: none;
}

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

.side {
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 415px;
margin: auto 0;
z-index: 99999;
}

.side p {
width: 50px;
height: 110px;
margin: 0 0 16px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}


.side p a {
display: block;
width: 100%;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 3;
letter-spacing: 1.5px;
text-align: center;
background: #054faf;
border: 2px solid #fff;
border-right: none;
border-radius: 10px 0 0 10px;
box-sizing: border-box;
}



/* footer
--------------------------------------- */

footer {
background: #eee;
}

footer .contactBox {
padding: 24px 20px 30px;
color: #fff;
background: #070d59;
}

footer .contactBox > p {
position: relative;
width: 278px;
margin: 0 auto 25px;
padding: 3px 0;
font-size: 18px;
text-align: center;
border: 2px solid #fff;
border-radius: 19px;
box-sizing: border-box;
}

footer .contactBox > p:before {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 0 15px;
border-color: #070d59 transparent transparent transparent;
z-index: 2;
}
footer .contactBox > p:after {
content: "";
position: absolute;
bottom: -13px;
left: 50%;
margin-left: -16px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 11px 16px 0 16px;
border-color: #fff transparent transparent transparent;
z-index: 1;
}

footer .contactBox .inner {
max-width: 852px;
margin: 0 auto;
}

footer .contactBox .inner .tel {
float: left;
width: 380px;
}

footer .contactBox .inner .tel .num {
padding: 0 0 0 50px;
font-size: 40px;
font-weight: bold;
line-height: 1;
text-align: left;
background: url("../img/ico_tel_02.png") no-repeat left center;
}

footer .contactBox .inner .tel p {
font-size: 14px;
text-align: center;
}

footer .contactBox .inner .tel p .small {
font-size: 12px;
vertical-align: baseline;
}

footer .contactBox .inner .tel p .large {
font-size: 15px;
vertical-align: baseline;
}

footer .contactBox .inner .link {
float: right;
width: 472px;
letter-spacing: -0.5em;
}

footer .contactBox .inner .link li {
display: inline-block;
width: 221px;
margin: 0 0 0 15px;
letter-spacing: 0;
vertical-align: top;
text-align: center;
}

footer .contactBox .inner .link li a {
display: block;
padding: 10px 0;
color: #000;
font-size: 20px;
font-weight: bold;
background: #fff;
border-radius: 5px;
}

footer .contactBox .inner .link li a img {
margin: 0 5px 0 0;
vertical-align: middle;
}

footer .ftNav {
max-width: 1000px;
margin: 0 auto;
padding: 30px 20px 40px;
}

footer .ftNav > div {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}

footer .ftNav .leftBox {
float: left;
width: 405px;
letter-spacing: -0.5em;
}

footer .ftNav .leftBox dl {
display: inline-block;
width: 225px;
letter-spacing: 0;
vertical-align: top;
}

footer .ftNav .leftBox dl + dl {
width: 180px;
}

footer .ftNav .rightBox {
float: left;
width: 350px;
letter-spacing: -0.5em;
}

footer .ftNav .rightBox dl {
display: inline-block;
width: 130px;
letter-spacing: 0;
vertical-align: top;
}

footer .ftNav .rightBox dl + dl {
width: 220px;
}

footer .ftNav > dl {
display: inline-block;
width: 240px;
min-height: 12.5em;
letter-spacing: 0;
vertical-align: top;
background: url("../img/logo_ft.png") no-repeat 52px bottom;
}

footer .ftNav dl dt {
font-size: 15px;
font-weight: bold;
margin-bottom: 6px;
}

footer .ftNav dl dd {
padding: 0 0 0 1em;
font-size: 15px;
}

footer .ftNav dl .mb {
margin: 0 0 1.5em;
}

footer .snsBox {
padding: 0 0 18px;
text-align: center;
letter-spacing: 0;
}

footer .snsBox p {
display: inline-block;
margin: 0 6px;
letter-spacing: 0;
vertical-align: top;
}

footer .copy {
padding: 6px 0;
text-align: center;
background: #000;
}


/* breadcrumb
--------------------------------------- */

.breadcrumb {
max-width: 980px;
margin: 0 auto;
padding: 12px 20px;
}

.breadcrumb ul {
letter-spacing: -0.5em;
}

.breadcrumb ul li {
display: inline-block;
margin: 0 7px 0 0;
font-size: 12px;
letter-spacing: 0;
vertical-align: top;
}

.breadcrumb ul li a {
margin: 0 8px 0 0;
color: #054FAF;
text-decoration: underline;
}


/* pagetop
--------------------------------------- */

#pagetop {
display: none;
position: fixed;
right: 10px;
bottom: 40px;
z-index: 10000;
}

/* errorpage
--------------------------------------- */

.errorpage {
	width: 90%;
	margin: 20px auto;
	padding: 20px 0;
	text-align: center;
}
.errorpage h1{
	font-size: 24px;
}

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

/* header
--------------------------------------- */

header {
max-width: inherit;
height: 90px;
padding: 14px 16px 15px;
border-bottom: 1px solid #707070;
box-sizing: border-box;
}

header .menu {
display: block;
position: absolute;
top: 0;
right: 0;
width: 90px;
cursor: pointer;
}

header .tel {
display: none;
}

header .inner {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
z-index: 9999;
}

header .gnav ul {
padding: 0;
text-align: center;
}

header .gnav ul li {
position: relative;
display: block;
padding: 0;
font-size: 30px;
border: none;
border-top: 1px solid #707070;
}

header .gnav ul li:first-child {
padding: 0;
border-top: 1px solid #707070;
}

header .gnav ul li.act:after {
display: none;
}

header .gnav ul li a {
display: block;
padding: 10px 0;
}

header .gnav ul li.act a ,
header .gnav ul li a .act {
color: #054FAF;
}

header .gnav ul li img {
margin-right:6px;
}

header .gnav ul li span {
display: inline;
}

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

.side {
display: block;
position: static;
width: 100%;
height: auto;
margin: 0;
}

.side p {
width: auto;
height: auto;
margin: 0;
-ms-writing-mode: inherit;
writing-mode: inherit;
text-align: center;
}

.side p:last-child {
height: auto;
margin: 0;
}

.side p a {
display: block;
width: 100%;
padding: 10px 0;
color: #fff;
font-size: 30px;
font-weight: normal;
line-height: 1.5;
letter-spacing: 0;
background: #054faf;
border: none;
border-top: 1px solid #fff;
border-radius: 0;
box-sizing: border-box;
}

}

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

footer .contactBox .inner .tel {
float: none;
width: auto;
margin: 0 0 20px;
text-align: center;
}

footer .contactBox .inner .tel .num {
display: inline-block;
text-align: center;
}

footer .contactBox .inner .tel .pctel {
display: none;
}

footer .contactBox .inner .link {
float: none;
width: auto;
text-align: center;
}

footer .ftNav > div {
display: block;
}

footer .ftNav .leftBox ,
footer .ftNav .rightBox {
float: none;
width: 500px;
margin: 0 auto 30px;
}

footer .ftNav .leftBox dl ,
footer .ftNav .leftBox dl + dl ,
footer .ftNav .rightBox dl ,
footer .ftNav .rightBox dl + dl {
width: 50%;
}

footer .ftNav > dl {
display: block;
width: 500px;
min-height: 72px;
margin: 0 auto;
letter-spacing: 0;
vertical-align: top;
background: url("../img/logo_ft.png") no-repeat 75% bottom;
}

}


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

/* header
--------------------------------------- */

header {
max-width: inherit;
height: 50px;
padding: 7px 8px 8px;
border-bottom: 1px solid #707070;
box-sizing: border-box;
}

header .logo {
width: 200px;
}

header .menu {
position: absolute;
top: 0;
right: 0;
width: 50px;
}

header .gnav ul li {
font-size: 16px;
}

header .gnav ul li a {
padding: 10px 0;
}

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

.side p a {
padding: 10px 0;
font-size: 16px;
}



/* footer
--------------------------------------- */

footer .contactBox {
padding: 2% 4% 45;
}

footer .contactBox > p {
margin: 0 auto 5%;
font-size: 14px;
}

footer .contactBox .inner {
max-width: inherit;
}

footer .contactBox .inner .tel {
float: none;
width: auto;
margin: 0 0 4%;
text-align: center;
}

footer .contactBox .inner .tel .num {
font-size: 33px;
}

footer .contactBox .inner .tel .num a{
color: #fff;
}

footer .contactBox .inner .tel p {
font-size: 11px;
}

footer .contactBox .inner .tel p .small {
font-size: 10px;
}

footer .contactBox .inner .tel p .large {
font-size: 12px;
}

footer .contactBox .inner .link {
float: none;
width: auto;
text-align: center;
}

footer .contactBox .inner .link li {
display: inline-block;
width: 49%;
margin: 0 2% 0 0;
letter-spacing: 0;
vertical-align: top;
text-align: center;
}

footer .contactBox .inner .link li:last-child {
margin: 0;
}

footer .contactBox .inner .link li a {
display: block;
padding: 12px 0;
font-size: 15px;
font-weight: bold;
background: #fff;
border: 1px solid #707070;
border-radius: 5px;
}

footer .contactBox .inner .link li a img {
width:14%;
}

footer .ftNav {
padding: 1.5em 0;
}

footer .ftNav .leftBox ,
footer .ftNav .rightBox {
width: 92%;
margin: 0 auto 6%;
}

footer .ftNav > dl {
width: 92%;
margin: 0 auto;
background: url("../img/logo_ft.png") no-repeat 85% bottom;
}


footer .contactBox .inner .tel .pctel {
display: inline-block;
}

}