@charset "UTF-8";
/*Variable
－－－－－－－*/
/*
ブレークポイント

基本  1920px
ipad 1050px
sp   767px;

コンテンツ幅1000px

*/
/*==============================
        header
==============================*/
/*#header {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* max-width: 1100px;
    z-index: 999999;
    background-color: #FFFFFF;
    border-radius: 10px;
    /* overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, .15);
    transition: .3s;
} */
#header {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  /* max-width: 1100px; */
  z-index: 999999;
  background-color: transparent;
  border-radius: 10px;
  /* overflow: hidden; */
  transition: 0.3s;
}

body.down #header {
  top: 0;
}

.header {
  width: 100%;
  padding-left: 30px;
  display: grid;
  grid-template-columns: 167px 1fr 150px;
  grid-column-gap: 35px;
  align-items: center;
  height: 100px;
}
@media screen and (max-width: 1200px) {
  .header {
    grid-column-gap: 15px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .spmenu.sponly {
    display: block !important;
  }
}
.menu-gmenu-container {
  height: 100%;
}

.header .menu-gmenu-container ul {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.4rem;
  height: 100%;
}

.header .menu-gmenu-container li {
  height: 100%;
  position: relative;
}

.header .menu-gmenu-container li:not(:last-child) {
  margin-right: 2.2em;
}
@media screen and (max-width: 1200px) {
  .header .menu-gmenu-container li:not(:last-child) {
    margin-right: 1.5em;
  }
}

.header .menu-gmenu-container li a {
  transition: 0.3s;
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 17px;
}
@media screen and (max-width: 1200px) {
  .header .menu-gmenu-container li a {
    font-size: 15px;
  }
}

.header .menu-gmenu-container li a:hover {
  color: #124c9b !important;
}

.header .contact {
  height: 70px;
  background: rgb(247, 199, 55);
  background: linear-gradient(90deg, rgb(247, 199, 55) 0%, rgb(255, 120, 0) 100%);
  display: grid;
  align-content: center;
  justify-items: center;
  grid-row-gap: 0.75em;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  transition: 0.3s;
}

@media screen and (min-width: 1025px) {
  .header .contact {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
.header .contact::before {
  content: "";
  width: 20px;
  height: 15px;
  background: url(../img/common/icon_contact.png) no-repeat center center/contain;
}

.header .contact:hover {
  filter: brightness(1.1);
}

.spsubli {
  display: none;
}

@media screen and (max-width: 1024px) {
  .header .menu-gmenu-container ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 0.75em 2em;
  }
  .header .menu-gmenu-container li:not(:last-child) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1024px) {
  #header {
    top: 0;
    left: 0;
    transform: translateX(0);
    width: 100%;
    border-radius: 0px;
    transition: 0s;
    position: fixed;
  }
  .header {
    width: 100%;
    height: 50px;
    padding-left: 15px;
    grid-template-columns: 110px 50px;
    justify-content: space-between;
  }
  .header .menu-gmenu-container {
    display: none;
  }
  .header .contact {
    display: none;
  }
  .header .spbtn {
    width: 50px;
    height: 50px;
    position: relative;
    /* background: rgb(247,199,55);
    background: linear-gradient(90deg, rgba(247,199,55,1) 0%, rgba(255,120,0,1) 100%);*/
    background-color: #124c9b;
    border-bottom-left-radius: 10px;
  }
  .header .spbtn::before {
    content: "";
    display: block;
    width: 44%;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 16px;
    left: 50%;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    transform-origin: center center;
    transform: translateX(-50%);
  }
  .header .spbtn::after {
    content: "";
    display: block;
    width: 44%;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    transform-origin: center center;
    transform: translateX(-50%);
  }
  .header .spbtn span {
    display: block;
    width: 44%;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    transition-timing-function: ease-in-out;
  }
  body.menuopen {
    overflow: hidden;
  }
  body.menuopen .header .spbtn::before {
    transform: translateX(-50%) rotate(45deg);
    top: 24.5px;
  }
  body.menuopen .header .spbtn::after {
    transform: translateX(-50%) rotate(-45deg);
    bottom: 24.5px;
  }
  body.menuopen .header .spbtn span {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
  /* .spmenu_inner .menu-gmenu-container .sub-menu li:first-of-type {
  	border-top: 1px solid #e0e0e0;
  } */
  /*.spsubno { display: none; }
  .spsubli {
  	padding-left: 16px;
  	display: block;
  	border-bottom: none !important;
  }*/
}
@media screen and (max-width: 1024px) and (max-width: 1024px) {
  #header .spOnly {
    display: block !important;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu {
    position: fixed;
    top: -105vh;
    opacity: 0;
    width: 100%;
    background-color: #FFFFFF;
    height: 100vh;
    z-index: 10001;
    text-align: center;
    transition: 0.5s;
  }
}
@media screen and (max-width: 1024px) {
  body.menuopen .spmenu {
    opacity: 1;
    top: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner {
    padding-bottom: 30px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container ul {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container > ul {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container li {
    border-bottom: 1px solid #e0e0e0;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container .sub-menu li:last-of-type {
    border-bottom: none;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container li a {
    padding: 0 15px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    height: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .menu-gmenu-container li a::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url(../img/common/arrow_blue.png) no-repeat center center/contain;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .contact {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
    justify-content: center;
    align-items: center;
    width: 270px;
    height: 60px;
    margin: 0 auto;
    background: rgb(247, 199, 55);
    background: linear-gradient(90deg, rgb(247, 199, 55) 0%, rgb(255, 120, 0) 100%);
    font-size: 1.6rem;
    color: #FFFFFF;
    border-radius: 3px;
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .spmenu_inner .contact::before {
    content: "";
    width: 1.2em;
    height: 0.9em;
    background: url(../img/common/icon_contact.png) no-repeat center center/contain;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .spmenu.spOnly {
    display: block !important;
  }
}
.header .menu-gmenu-container ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  /* transform: translate(-42px); */
  transform: translateX(-50%);
  /* width: 140px; */
  width: auto;
  height: auto;
  background: white;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.menu-item-has-children:hover ul.sub-menu {
  display: block;
}

ul#menu-gmenu .sub-menu li {
  margin-right: 0 !important;
  /* height: 50px !important; */
  background-color: #ffffff;
}

/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
ul#menu-gmenu .sub-menu > .menu-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* サブニューのリンクタグをmenu-itemの大きさと合わせ、クリックしやすいようにした */
ul#menu-gmenu .sub-menu > .menu-item a {
  /* display: inline-block; */
  width: 100%;
  height: 100%;
  padding: 1em 1em;
  justify-content: center;
  text-align: center;
  min-width: 16rem;
}

/* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */
ul#menu-gmenu .sub-menu > .menu-item a:hover {
  color: white;
}