@charset "utf-8";
/*
**********************************************************************

* common.css

*********************************************************************
*/
body {
    position: relative;
}
body.fixed {
    overflow: hidden;
}
body img {
  width: auto;
  max-width: 100%;
  height: auto;
}
* {
  box-sizing: border-box
}
.pcNone {
  display: none;
}
.spNone {
  display: block;
}
@media screen and (max-width: 860px) {
  .pcNone {
    display: block;
  }
  .spNone {
    display: none;
  }
}
/* ///////////////////////////////////////////////////////////////////
GHead
/////////////////////////////////////////////////////////////////// */
#GHead {position: relative;width: 100%;}

#GHead .inner {position: relative;width: 100%;max-width: 1200px;margin: 0 auto;padding: 20px 0 0;}

#GHead .inner .logo {padding: 22px 0 14px;}

#GHead .inner .logo img{max-width: 270px;}


#GHead .inner div .subTitle {
  display: block;
  font-weight: bold;
}
#GHead .inner .subTitle {
  display: block;
  font-weight: bold;
}
#GHead .inner .logo .subTit {
  display: block;
  font-weight: bold;
}

#GHead .menu-trigger {
}

#GHead .menu-trigger .ico {
}

#GHead .menu-trigger .ico span {
}

#GHead #MainNav {position: relative;}

#GHead #MainNav:after {content:"";position: absolute;bottom: 0;display: block;background: #EAEAEA;height: 7px;width: 100%;}

#GHead #MainNav .inner {
    position: relative;
    z-index: 1;
}

#GHead #MainNav .inner .navList {display: flex;justify-content: space-between;padding: 18px 0 0;}

#GHead #MainNav .inner .navList li {flex: 1 1 auto;width: 100%;}

#GHead #MainNav .inner .navList li a {display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;padding: 0 0 10px;  white-space: nowrap;}

#GHead #MainNav .inner .navList li a:hover {}

#GHead #MainNav .inner .navList li:nth-child(1) a {
    border-bottom: 7px solid #FF6B6B;
}
#GHead #MainNav .inner .navList li:nth-child(2) a {border-bottom: 7px solid #FF9F43;}
#GHead #MainNav .inner .navList li:nth-child(3) a {border-bottom: 7px solid #FECA57;}
#GHead #MainNav .inner .navList li:nth-child(4) a {border-bottom: 7px solid #1DD1A1;}
#GHead #MainNav .inner .navList li:nth-child(5) a {border-bottom: 7px solid #10AC84;}
#GHead #MainNav .inner .navList li:nth-child(6) a {border-bottom: 7px solid #48DBFB;}
#GHead #MainNav .inner .navList li:nth-child(7) a {border-bottom: 7px solid #5F27CD;}
#GHead #MainNav .inner .navList li:nth-child(8) a {border-bottom: 7px solid #F368E0;}

#GHead .headMain {position: absolute;top: 20px;right: 0;display: flex;flex-direction: column;align-items: flex-end;}

#GHead .headMain .headList {display: flex;justify-content: space-between;align-items: center;max-width: 334px;width: 100%;padding: 0 20px 14px 0px;}

#GHead .headMain .headList li {
}

#GHead .headMain .headList li a {position: relative;display: block;padding-left: 12px;font-size: 14px;font-weight: bold;}

#GHead .headMain .headList li a:before {content:"";position: absolute;top: 0;bottom: 0;left: 0;display: block;width: 7px;height: 12px;margin: auto;background-image: url("../../image/icon_arrow_b.svg");background-repeat: no-repeat;background-size: contain;}

#GHead .headMain .headList li:nth-child(3) a,
#GHead .headMain .headList li:nth-child(4) a {
    padding: 0;
}

#GHead .headMain .headList li:nth-child(3) a:before,
#GHead .headMain .headList li:nth-child(4) a:before {
    display: none;
}

#GHead .headMain .btnBlock {display: flex;}

#GHead .headMain .btnBlock .tels {display: flex;flex-direction: column;justify-content: center;}

#GHead .headMain .btnBlock .tels li {max-width: 226px;}

#GHead .headMain .btnBlock .tels li:nth-child(1) {
    max-width: 179px;
    margin-bottom: 3px;
}

#GHead .headMain .btnBlock .btn {display: flex;justify-content: center;align-items: stretch;width: 230px;height: 64px;margin-left: 12px;}

#GHead .headMain .btnBlock .btn a {display: block;width: 100%;background: #FF6B6B;text-align: center;padding: 0 2%;}

#GHead .headMain .btnBlock .btn a img {
    max-width: 186px;
}

#GHead #MainNav .spBlock { display: none;
}

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

#GHead #MainNav .inner .navList li a {
    font-size: 1.4vw;
}
}
@media screen and (max-width: 860px) {

#GHead {position: fixed;padding: 20px 0 20px;background: #fff;z-index: 1000;}

#GHead .inner {padding: 0;}

#GHead .inner .logo {padding: 0 5%;}

#GHead .inner .logo img {
    max-width: 190px;
}

#GHead .inner .logo .subTit {font-size: 12px; font-weight: bold;}
#GHead .inner .subTitle {font-size: 12px; font-weight: bold;}

#GHead .menu-trigger {
  display: flex;
  position: fixed;
  align-items: center;
  top: 20px;
  right: 5%;
  width: 52px;
  height: 52px;
  padding: 0 11px;
  z-index: 9999;
  background: #1BB8CE;
  transition: all .4s;
}

#GHead .menu-trigger .ico {
  width: 100%;
  height: 50%;
  position: relative;
}

#GHead .menu-trigger .ico span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
}

#GHead .menu-trigger .ico span:nth-of-type(1) {
    top: 0;
  }
  #GHead .menu-trigger .ico span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  #GHead .menu-trigger .ico span:nth-of-type(3) {
    bottom: 0;
  }

#GHead.navOpen .menu-trigger {
  position: fixed;
  background: rgb(255 255 255 / 0);
  width: 50px;
  height: 30px;
}

#GHead.navOpen .menu-trigger .ico {

}

#GHead.navOpen .menu-trigger .ico span {

background-color: #000000;
}

  #GHead.navOpen .menu-trigger .ico span:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%)rotate(-45deg);
  }
  #GHead.navOpen .menu-trigger .ico span:nth-of-type(2) {
    opacity: 0;
  }
  #GHead.navOpen .menu-trigger .ico span:nth-of-type(3) {
    bottom: 50%;
    transform: translateY(50%)rotate(45deg);
  }

#GHead #MainNav {width: 100%;opacity: 0;padding: 0;position: fixed;left: 0;top: 0;padding-top: 50px;max-height: 100%;height: 100vh; /* 変数をサポートしていないブラウザのフォールバック *//* height: calc(var(--vh, 1vh) * 100); */transform: translateY(-200%);transition: transform .4s, opacity 1s;z-index: 998;background: #fff;}

#GHead #MainNav:after {display:none;}

#GHead.navOpen #MainNav {opacity: 1;transform: translateY(0);transition: transform .3s, opacity 0s;overflow: auto;}

#GHead #MainNav .inner {display: flex;height: 100%;flex-direction: column;justify-content: space-between;}

#GHead #MainNav .inner .navList {flex: 1 1 auto;flex-direction: column;padding: 0;min-height: 400px;margin-bottom: 10px;}

#GHead #MainNav .inner .navList li {
}

#GHead #MainNav .inner .navList li a {
    font-size: 2.2vh;
    padding: 3% 0 2px;
}

#GHead #MainNav .spBlock {display: flex;flex-direction: column;justify-content: space-around;flex: 1 1 auto;padding-bottom: 20px;min-height: 260px;}

#GHead #MainNav .spBlock .tel {text-align: center;margin: 10px 0;}

#GHead #MainNav .spBlock .tel a img {width: 180px;}

#GHead #MainNav .spBlock .mail {text-align: center;margin: 0 0 10px;}

#GHead #MainNav .spBlock .mail a img {
    width: 227px;
}

#GHead #MainNav .spBlock .list {display: flex;justify-content: space-between;margin: 0 auto 10px;width: 220px;}

#GHead #MainNav .spBlock .list li {
}

#GHead #MainNav .spBlock .list li a {position: relative;display: block;padding-left: 12px;font-size: 14px;font-weight: bold;}

#GHead #MainNav .spBlock .list li a:before {content:"";position: absolute;top: 0;bottom: 0;left: 0;display: block;width: 7px;height: 12px;margin: auto;background-image: url("../../image/icon_arrow_b.svg");background-repeat: no-repeat;background-size: contain;}

#GHead #MainNav .spBlock .btn {margin: 0 0 10px;}

#GHead #MainNav .spBlock .btn a {display: flex;justify-content: center;align-items: center;width: 230px;height: 64px;background: #FF6B6B;text-align: center;padding: 0 2%;margin: 0 auto;}

#GHead #MainNav .spBlock .btn a img {
    width: 164px;
}

#GHead #MainNav .spBlock .icon {display: flex;justify-content: space-between;width: 80px;margin: 0 auto;}

#GHead #MainNav .spBlock .icon li {
}

#GHead .headMain {display: none;}

#GHead .headMain .headList {
}

#GHead .headMain .headList li {
}

#GHead .headMain .btnBlock {
}

#GHead .headMain .btnBlock .tels {
}

#GHead .headMain .btnBlock .tels li {
}

#GHead .headMain .btnBlock .btn {
}

}

/* =========================================================
Contents
========================================================= */
#Contents {
  background: #fff;
}
@media screen and (max-width:860px) {
  #Contents {
  }
}
/* =========================================================
フェードイン
========================================================= */
.down_to_top {
  opacity: 0.1;
  transform: translateY(20px);
  transition: all 0.8s;
}
.down_to_top.scrollin {
  opacity: 1;
  transform: translateY(0);
}
/* ///////////////////////////////////////////////////////////////////
GFoot
/////////////////////////////////////////////////////////////////// */
#GFoot {
}

#GFoot .logoBlock {margin-bottom: 30px;}

#GFoot .logoBlock .logoList {display: flex;max-width: 1200px;margin: 0 auto;}

#GFoot .logoBlock .logoList li {margin-right: 20px;}

#GFoot .footMain {position: relative;background-image: url("../../image/foot_bg.svg");background-repeat: no-repeat;background-size: cover;padding: 70px 0 0;}

#GFoot .footMain .inner {max-width: 1200px;width: 100%;margin: 0 auto;padding: 0 0 40px;background: #1BB8CE;}

#GFoot .footMain .inner .txt {font-size: 14px;color: #111122;line-height: 34px;}

#GFoot .footMain .pageTop {position: absolute;top: -44px;right: 20px;width: 127px;}

@media screen and (max-width: 860px) {
#GFoot {
}

  #GFoot .logoBlock {}

  #GFoot .logoBlock .logoList {
    justify-content: space-around;
    width: 80%;
}

  #GFoot .logoBlock .logoList li {
    margin: 0;
}

  #GFoot .footMain {
    background-size: contain;
    padding: 30px 0 0;
}

  #GFoot .footMain .inner {
    padding: 0 5% 20px;
}

  #GFoot .footMain .inner .txt {
    font-size: 10px;
    line-height: 1.8;
    margin-bottom: 10px;
    word-break: break-all;
}
  #GFoot .footMain .pageTop {
    display: none;
}
}