@charset "UTF-8";
/* CSS Document */
header {
  width: 100%;
  height: 100px;
  position: relative;
}
@media screen and (min-width:1100px) {
  .big-pcnone {
    display: none;
  }
}
@media screen and (max-width:1099px) {
  header {
    height: 100px;
    /* background: #0068B7;*/
  }
}
@media screen and (max-width:768px) {
  header {
    height: 72px;
  }
}
.blueline-head {
  width: 29.5vw;
  height: 100px;
  background: #0068B7;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.header-logo {
  width: 278px;
  height: 48px;
  float: left;
  margin: 30px 0 0 30px;
}
@media screen and (max-width:1345px) {
  .blueline-head {
    width: 30vw;
    height: 100px;
    background: #0068B7;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .header-logo {
    width: 210px;
    height: 48px;
    float: left;
    margin: 30px 0 0 15px;
  }
}
@media screen and (max-width:768px) {
  .blueline-head {
    width: 100vw;
    height: 72px;
  }
  .header-logo {
    width: 100vw;
    height: 72px;
    margin: 0;
    padding-top: 16px;
    padding-left: 16px;
  }
}
.header-logo h1 {
  width: 90px;
  height: 38px;
  float: left;
  margin-right: 12px;
}
.header-logo h1 img {
  width: 90px;
  height: 38px;
}
.header-logo p {
  width: 176px;
  height: 48px;
  float: left;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 700;
  margin-top: -3px;
}
.header-logo p span {
  font-size: 1.4rem;
  display: block;
  font-weight: 500;
}
@media screen and (max-width:1345px) {
  .header-logo h1 {
    width: 70px;
    height: 38px;
    float: left;
    margin-right: 12px;
  }
  .header-logo h1 img {
    width: 70px;
    height: 38px;
  }
  .header-logo p {
    width: 120px;
    height: 48px;
    float: left;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 3px;
  }
  .header-logo p span {
    font-size: 1.2rem;
    display: block;
    font-weight: 500;
  }
}
@media screen and (max-width:768px) {
  .header-logo h1 {
    width: 90px;
    height: 38px;
    margin-right: 6px;
  }
  .header-logo h1 img {
    width: 90px;
    height: 38px;
  }
  .header-logo p {
    width: auto;
    height: auto;
    font-size: 17px;
    margin-top: 5px;
  }
  .header-logo p span {
    font-size: 12px;
  }
}
.header-logo div.pagelogo {
  width: 90px;
  height: 38px;
  float: left;
  margin-right: 12px;
}
.header-logo div.pagelogo img {
  width: 90px;
  height: 38px;
}
.header-logo p.page-head {
  width: 176px;
  height: 48px;
  float: left;
  color: #000;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 700;
  margin-top: -3px;
}
.header-logo p.page-head span {
  font-size: 1.4rem;
  display: block;
  font-weight: 500;
}
@media screen and (min-width:769px) and (max-width:1345px) {
  .header-logo {
    float: left;
    margin: 0;
    height: 100px;
    padding: 0 20px;
    width: 264px;
    padding-top: 30px;
  }
  .header-logo div.pagelogo {
    width: 70px;
    height: 38px;
    float: left;
    margin-right: 12px;
  }
  .header-logo div.pagelogo img {
    width: 70px;
    height: 38px;
  }
  .header-logo p.page-head {
    width: 120px;
    height: 48px;
    float: left;
    color: #000;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 3px;
  }
  .header-logo p.page-head span {
    font-size: 1.2rem;
    display: block;
    font-weight: 500;
  }
}
@media screen and (max-width:768px) {
  .header-logo div.pagelogo {
    width: auto;
    height: 38px;
    float: left;
    margin-right: 6px;
  }
  .header-logo div.pagelogo img {
    width: 90px;
    height: 38px;
  }
  .header-logo p.page-head {
    width: auto;
    height: auto;
    /* font-size: 4vw;
    margin-top: 5px;*/
    font-size: 1.8rem;
    margin-top: 0px;
  }
  .header-logo p.page-head span {
    /* font-size: 2.5vw;*/
    font-size: 1.4rem;
  }
}
nav {
  float: right;
  width: 468px;
  margin-top: 37px;
  margin-right: 30px;
}
nav ul {
  width: 468px;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  float: left;
}
nav ul li a {
  color: #000;
}
@media screen and (max-width:1200px) {
  nav {
    width: 375px;
    margin-top: 37px;
    margin-right: 30px;
  }
  nav ul {
    width: 375px;
    display: flex;
    justify-content: space-between;
  }
  nav ul li {
    float: left;
  }
  nav ul li a {
    color: #000;
  }
}
@media screen and (max-width:1099px) {
  nav {
    display: none;
  }
}
.header-tel {
  float: right;
  width: 206px;
  height: 69px;
  text-align: center;
  margin-top: 15px;
  margin-right: 30px;
}
.header-tel p, .header-tel span {
  color: #000;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.header-tel a {
  display: block;
  color: #000;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (max-width:1099px) {
  .header-tel p, .header-tel span {
    /*color: #fff;*/
  }
  .header-tel a {
    /* color: #fff;*/
  }
}
.header-contact {
  float: right;
  width: 200px;
  height: 100px;
  background: #003864;
  position: relative;
  line-height: 1.2;
}
@media screen and (max-width:1099px) {
  .header-contact {
    margin-right: 100px;
  }
}
.header-contact a {
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  vertical-align: middle;
  display: block;
  height: 100px;
  line-height: 100px;
}
.header-contact a:before {
  content: "";
  background-image: url("../image/common/mail.svg");
  display: inline-block;
  width: 22px;
  height: 16px;
  margin-right: 10px;
  margin-top: -4px;
}
/* メイン部分 */
.g-menu {
  display: flex;
}
.g-menu__item {
  position: relative;
}
.g-menu__item:hover {
  background: url("../image/common/nav-line.svg");
  background-repeat: no-repeat;
  background-position: center bottom -10px;
  overflow: visible;
}
.g-menu__link {
  display: block; /* ポイント！！ */
  /*padding: 50px 20px;*/ /* ポイント！！ */
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}
@media screen and (max-width:1200px) {
  .g-menu__link {
    font-size: 14px;
  }
}
.g-menu__dropdown-menu {
  opacity: 0; /* ポイント！！ */
  pointer-events: none; /* ポイント！！ */
  position: absolute;
  top: 100%; /* ポイント！！ */
  left: -50%;
  background: #F2F7FC;
  width: 208px;
  display: inherit;
  z-index: 100;
  list-style: none;
  padding: 40px;
}
.current {
  color: #0068B7;
}
.g-menu__dropdown-menu-item {
  /*border-bottom: 1px solid #ccc;*/
  float: none;
}
.g-menu__dropdown-menu-item:last-child {
  border-width: 0;
}
.g-menu__dropdown-menu-link {
  display: block;
  /*padding: 10px;*/
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.g-menu__dropdown-menu-link.first {
  margin-bottom: 20px;
}
.g-menu__item:hover .g-menu__link {
  color: #0068B7;
  /*transition: .5s;*/
}
.g-menu__item:hover .g-menu__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transition: .5s;
}
.g-menu__dropdown-menu-link:hover {
  color: #0068B7;
}
/*========= スマートフォンボタンのためのCSS ===============*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  background: #0068B7;
  /*動き*/
  transition: all 0.6s;
}
@media screen and (max-width:768px) {
  #g-nav {
    margin: 0;
  }
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  right: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh; /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  /*position: absolute;*/
  z-index: 999;
  /*top:50%;
    left:50%;
    transform: translate(-50%,-50%);*/
  width: 82.7vw;
  margin: 0 auto;
  padding-top: 100px;
}
@media screen and (max-width:768px) {
  #g-nav ul {
    flex-wrap: wrap;
    padding-top: 160px;
  }
}
/*リストのレイアウト設定*/
#g-nav li {
  list-style: none;
  text-align: left;
}
@media screen and (max-width:768px) {
  #g-nav li {
    width: 100%;
  }
}
#g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/*div.spmenu-contaoner{
    width: 100%;
    padding-top: 108px;
    p{
        &.uptxt{
            text-align: center;
            font-size: 1.4rem;
        }
        &.upimg{
            width: 172px;
            margin: 0 auto 30px;
        }
    }
}*/
.openbtn1 {
  position: fixed;
  z-index: 9999; /*ボタンを最前面に*/
  /*  top:10px;*/
  right: 0;
  cursor: pointer;
  width: 72px;
  height: 72px;
  background-color: #0068B7;
}
/*×に変化*/
.openbtn1 span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 19px;
  /*height: 3px;*/
  height: 1px;
  border-radius: 2px;
  background-color: #fff;
  width: 45%;
}
.openbtn1 span:nth-of-type(1) {
  top: 29px;
}
.openbtn1 span:nth-of-type(2) {
  top: 40px;
}
.openbtn1 span:nth-of-type(3) {
  top: 42px;
}
.openbtn1.active span:nth-of-type(1) {
  top: 24px;
  left: 24px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.openbtn1.active span:nth-of-type(3) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(2) {
  top: 36px;
  left: 24px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
/*タブレット用css*/
@media screen and (min-width:769px) and (max-width:1345px) {
  .openbtn1 {
    right: 11px;
    top: 11px;
  }
}