@charset "UTF-8";
/* clearfix */
.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

.has-x-small-font-size {
  font-size: 10px;
}

.has-small-font-size {
  font-size: 13px;
}

.has-regular-font-size {
  font-size: 16px;
}

.has-large-font-size {
  font-size: 24px;
}

.has-x-large-font-size {
  font-size: 36px;
}

.has-huge-font-size {
  font-size: 50px;
}

/*----------------------------------------------------
	再設定
----------------------------------------------------*/
html {
  font-size: 10px;
}

body {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Segoe UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  font-weight: 500;
  color: #333;
  font-size: 1.6rem;
}
@media screen and (min-width: 481px) and (max-width: 896px) {
  body {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 479px) {
  body {
    margin-top: 69px;
    font-size: 1.2rem;
  }
}

a {
  transition: all 0.3s;
  text-decoration: none;
}
a:link, a:visited {
  color: #2489ce;
}
a:hover, a:active {
  color: #72b7e6;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

/* ----------------------------------------------------------------------
	header
---------------------------------------------------------------------- */
header .header--fmt01 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
header .header--fmt01 .gnav ul {
  display: flex;
}
@media screen and (max-width: 479px) {
  header .header--fmt01 .gnav ul {
    display: none;
  }
}
header .header--fmt01 .gnav ul li a {
  display: block;
  padding: 16px 1.5em;
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
  position: relative;
}
header .header--fmt01 .gnav ul li a::before {
  display: block;
  content: "";
  height: 3px;
  width: 0;
  background: #044EA2;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.3s all;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
header .header--fmt01 .gnav ul li a:hover::before {
  width: 100%;
}
header .header--fmt01 .gnav ul li.contact {
  margin-left: 1.5em;
}
header .header--fmt01 .gnav ul li.contact a {
  display: block;
  padding: 16px 1.8em;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  background: #044EA2;
  border: 1px solid #044EA2;
  transition: 0.3s all;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
header .header--fmt01 .gnav ul li.contact a::before {
  display: none;
}
header .header--fmt01 .gnav ul li.contact a:hover {
  background: #fff;
  color: #044EA2;
}

/*----------------------------------------------------
	spNav
----------------------------------------------------*/
header {
  position: relative;
}
@media screen and (max-width: 479px) {
  header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 9990;
  }
}
header .header_menu {
  display: none;
  position: absolute;
  right: 20px;
  top: 12px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 1000;
}
@media screen and (max-width: 479px) {
  header .header_menu {
    display: block;
  }
}
header .header_menu div {
  position: relative;
}
header .header_menu span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #044EA2;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
header .header_menu span:nth-child(1) {
  top: 10px;
}
header .header_menu span:nth-child(2) {
  top: 20px;
}
header .header_menu span:nth-child(3) {
  top: 30px;
}
header .header_menu.open span:nth-child(1) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #044EA2;
}
header .header_menu.open span:nth-child(2) {
  width: 0;
  left: 50%;
}
header .header_menu.open span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #044EA2;
}

#spNav {
  display: none;
  position: fixed;
  left: 0;
  top: 69px;
  width: 100%;
  height: -webkit-calc(100vh - 69px);
  height: calc(100vh - 69px);
  background: RGBa(7, 31, 58, 0.9);
  text-align: center;
  padding: 6vh 10% 8vh;
  z-index: 9999;
}
#spNav ul {
  opacity: 0;
  margin-bottom: 30px;
}
#spNav ul li {
  border-bottom: 1px solid #044EA2;
}
#spNav ul li a {
  display: block;
  width: 100%;
  line-height: 6.2vh;
  color: #fff;
  text-decoration: none;
}

/*----------------------------------------------------
	contactarea
----------------------------------------------------*/
#contactarea {
  background: url(../images/common/contactarea_bg.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
  padding: 100px 4% 120px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
}
@media screen and (max-width: 479px) {
  #contactarea {
    padding: 70px 4% 80px;
  }
}
#contactarea .container h3 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 14px;
}
@media screen and (max-width: 479px) {
  #contactarea .container h3 {
    font-size: 1.8rem;
    margin-bottom: 2px;
  }
}
#contactarea .container h4 {
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 479px) {
  #contactarea .container h4 {
    margin-bottom: 10px;
  }
}
#contactarea .container .line {
  text-align: center;
  margin-bottom: 20px;
}
#contactarea .container .line span {
  display: inline-block;
  background: #fff;
  width: 90px;
  height: 6px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
@media screen and (max-width: 479px) {
  #contactarea .container .line span {
    width: 60px;
    height: 3px;
  }
}
#contactarea .container h5 {
  font-size: 3.8rem;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 479px) {
  #contactarea .container h5 {
    font-size: 2.2rem;
    margin-bottom: 14px;
  }
}
#contactarea .container .desc {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 479px) {
  #contactarea .container .desc {
    font-size: 1.2rem;
  }
}
#contactarea .container .contact_bt {
  text-align: center;
}
#contactarea .container .contact_bt .el_btn {
  width: 550px;
  max-width: 100%;
}
@media screen and (max-width: 479px) {
  #contactarea .container .contact_bt .el_btn {
    width: 100%;
  }
}

/*----------------------------------------------------
	footer
----------------------------------------------------*/
footer .flex {
  padding: 60px 4% 80px;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 479px) {
  footer .flex .info {
    width: 100%;
  }
}
footer .flex .info .logo {
  margin-bottom: 30px;
}
@media screen and (max-width: 479px) {
  footer .flex .info .logo {
    padding: 0 20%;
  }
}
footer .flex .info address {
  line-height: 2;
}
@media screen and (max-width: 479px) {
  footer .flex .info address {
    text-align: center;
    margin-bottom: 40px;
  }
}
footer .flex .nav {
  display: flex;
  padding-top: 20px;
}
@media screen and (max-width: 479px) {
  footer .flex .nav {
    width: 100%;
  }
}
footer .flex .nav ul {
  margin-left: 2em;
}
@media screen and (max-width: 479px) {
  footer .flex .nav ul {
    width: 50%;
    margin-left: 0;
  }
}
footer .flex .nav ul li {
  margin-bottom: 10px;
}
@media screen and (max-width: 479px) {
  footer .flex .nav ul li {
    text-align: center;
  }
}
footer .flex .nav ul li a {
  color: #333;
}
footer .flex .nav ul li a:hover {
  color: #044EA2;
}
footer .copyright {
  padding: 16px 4%;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 479px) {
  footer .copyright {
    font-size: 1.1rem;
  }
}

.obi_grade {
  width: 100%;
  height: 40px;
  background: linear-gradient(to right, #044ea2, #69cbed);
}
@media screen and (max-width: 479px) {
  .obi_grade {
    height: 90px;
  }
}

/*----------------------------------------------------
	other
----------------------------------------------------*/
.side_margin {
  padding: 0 20px;
}

.fixed_bt {
  position: fixed;
  right: 0;
  bottom: 20px;
  z-index: 9999;
}
.fixed_bt a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 479px) {
  .fixed_bt {
    width: 80%;
    bottom: 10px;
  }
}