@charset "UTF-8";
:root {
  --col_main:#0C3388;
  --col_sub1:#0086D9;
  --col_gray:#707070;
  --Max_W:1000px;
  --f_size_p:1.5rem;
  --f_size_p_pc:1.6rem;
  --font_family:"Google Sans","Noto Sans Symbols","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Yu Gothic Medium","Meiryo",sans-serif;
}

/* CSS Document */
/* ----------------------------------------
 * clearfix
 * ---------------------------------------- */
.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: block;
  overflow: hidden !important;
}
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden !important;
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cl-effect-4 a {
  padding: 0 0 10px;
}

/* ----------------------------------------
 *   汎用クリア
 * ---------------------------------------- */
.cb {
  clear: both;
}

/* ----------------------------------------
 *   汎用align
 * ---------------------------------------- */
.algl {
  text-align: left;
}

.algr {
  text-align: right;
}

/* ----------------------------------------
 *   汎用width
 * ---------------------------------------- */
.w50 {
  width: 50px !important;
}

.w60 {
  width: 60px !important;
}

.w70 {
  width: 70px !important;
}

.w80 {
  width: 80px !important;
}

.w90 {
  width: 90px !important;
}

.w100 {
  width: 100px !important;
}

.w110 {
  width: 110px !important;
}

.w120 {
  width: 120px !important;
}

.w130 {
  width: 130px !important;
}

.w140 {
  width: 140px !important;
}

.w150 {
  width: 150px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.w300 {
  width: 300px !important;
}

.w400 {
  width: 400px !important;
}

.w500 {
  width: 500px !important;
}

.w600 {
  width: 600px !important;
}

/* ----------------------------------------
 *   汎用line-height
 * ---------------------------------------- */
.lh10 {
  line-height: 1 !important;
}

.lh11 {
  line-height: 1.1 !important;
}

.lh12 {
  line-height: 1.2 !important;
}

.lh13 {
  line-height: 1.3 !important;
}

.lh14 {
  line-height: 1.4 !important;
}

.lh15 {
  line-height: 1.5 !important;
}

.lh16 {
  line-height: 1.6 !important;
}

.lh17 {
  line-height: 1.7 !important;
}

.lh18 {
  line-height: 1.8 !important;
}

.lh19 {
  line-height: 1.9 !important;
}

.lh20 {
  line-height: 2 !important;
}

/* ----------------------------------------
 *   汎用line-height
 * ---------------------------------------- */
.lh10 {
  line-height: 1 !important;
}

.lh11 {
  line-height: 1.1 !important;
}

.lh12 {
  line-height: 1.2 !important;
}

.lh13 {
  line-height: 1.3 !important;
}

.lh14 {
  line-height: 1.4 !important;
}

.lh15 {
  line-height: 1.5 !important;
}

.lh16 {
  line-height: 1.6 !important;
}

.lh17 {
  line-height: 1.7 !important;
}

.lh18 {
  line-height: 1.8 !important;
}

.lh19 {
  line-height: 1.9 !important;
}

.lh20 {
  line-height: 2 !important;
}

/* ----------------------------------------
 *   汎用margin
 * ---------------------------------------- */
.m0 {
  margin: 0px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.m5 {
  margin: 5px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.m10 {
  margin: 10px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.m15 {
  margin: 15px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.m20 {
  margin: 20px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.m25 {
  margin: 25px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.m30 {
  margin: 30px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.m35 {
  margin: 35px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.m40 {
  margin: 40px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.m45 {
  margin: 45px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.m50 {
  margin: 50px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.m100 {
  margin: 100px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.mr100 {
  margin-right: 100px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

/* ----------------------------------------
 *   汎用padding
 * ---------------------------------------- */
.p5 {
  padding: 5px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.p10 {
  padding: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.p15 {
  padding: 15px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.p20 {
  padding: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.p25 {
  padding: 25px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.p30 {
  padding: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.p35 {
  padding: 35px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.p40 {
  padding: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.p45 {
  padding: 45px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.p50 {
  padding: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.p100 {
  padding: 100px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pl100 {
  padding-left: 100px !important;
}

.pr100 {
  padding-right: 100px !important;
}

.pb100 {
  padding-bottom: 100px !important;
}

/* 基本設定
=============================================== */
html {
  height: 100%;
  font-size: 65.2%;
  scroll-padding-top: 9vh;
}

body {
  font-size: var(--f_size_p);
  font-family: var(--font_family);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: var(--col_gray);
  -webkit-text-size-adjust: none;
  height: 100%;
  margin: 0px;
  padding: 0px;
  min-width: 100%;
}

.grecaptcha-badge {
  visibility: hidden;
}

nav ul, ul, li {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: color;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

.pc {
  display: none;
}

.sp {
  display: inherit;
}

.br_none {
  display: none;
}

.br_sp {
  display: inherit;
}

.in-Block {
  display: inline-block;
}

#header {
  /*========= ナビゲーションのためのCSS ===============*/
  /*アクティブクラスがついたら位置を0に*/
  /*ナビゲーションの縦スクロール*/
  /*ナビゲーション*/
  /*リストのレイアウト設定*/
  /*========= ボタンのためのCSS ===============*/
  /*×に変化*/
}
#header #l-gnav {
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 999;
}
#header .l-header {
  top: 0;
  left: 0;
  width: 220px;
}
#header .l-header .l-header__wrapper {
  display: flex;
  z-index: 3;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  height: 60px;
}
#header .l-header .l-header__wrapper .l-header__logo {
  flex: 0 0 245px;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0 15px;
  font-size: 1rem;
  line-height: 100%;
}
#header .l-header .l-header__wrapper .l-header__logo img {
  width: 170px;
  height: auto;
}
#header #g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  bottom: -120%;
  left: 0;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background: var(--col_sub1);
  /*動き*/
  transition: all 0.6s;
}
#header #g-nav.panelactive {
  bottom: 0;
}
#header #g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#header #g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#header #g-nav li {
  list-style: none;
  text-align: center;
}
#header #g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 15px 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  font-weight: bold;
}
#header #g-nav li a span {
  display: block;
  color: var(--col_green);
  font-size: 1rem;
}
#header .openbtn {
  position: fixed;
  z-index: 9999;
  top: 5px;
  right: 5px;
  cursor: pointer;
  width: 60px;
  height: 60px;
}
#header .openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--col_main);
  width: 45%;
}
#header .openbtn span:nth-of-type(1) {
  top: 15px;
}
#header .openbtn span:nth-of-type(2) {
  top: 23px;
}
#header .openbtn span:nth-of-type(3) {
  top: 31px;
}
#header .openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}
#header .openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
#header .openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

#footer .footer__banner {
  position: relative;
  max-width: 93%;
  height: auto;
  margin: 0 auto -100px;
  padding: 5% 2.5%;
  background: #F9F9F7;
  z-index: 4;
}
#footer #footer-contact {
  max-width: 100%;
  margin: 0 auto;
}
#footer #footer-contact .footer-contact__wrapper {
  display: flex;
  gap: 20px 0;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2%;
}
#footer #footer-contact h3 {
  color: #707070;
  font-size: 1.8rem;
  font-weight: bold;
}
#footer #footer-contact p {
  color: #707070;
  font-size: 1.3rem;
}
#footer #footer-contact .footer-contact--tel, #footer #footer-contact .footer-contact--mail {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer #footer-contact .footer-contact--tel .contact--tel__link {
  position: relative;
  color: #707070;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  padding-left: 25px;
}
#footer #footer-contact .footer-contact--tel .contact--tel__link::before {
  background-image: url(../img/common/common_img_phone_01.png);
  background-position: 50%;
  background-size: contain;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  position: absolute;
  top: calc(50% - 10px);
}
#footer #footer-contact .footer-contact--tel .contact--tel__caption {
  font-size: 1.2rem;
  margin: 5px 0;
}
#footer #footer-contact .footer-contact--mail .contact--mail__button {
  background: #FFF;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));
  margin-bottom: 10px;
}
#footer #footer-contact .footer-contact--mail .contact--mail__button a {
  position: relative;
  display: block;
  padding: 0.5em 2em;
  color: #707070;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
}
#footer #footer-contact .txt {
  z-index: 100;
  margin-top: 5%;
}
#footer .footer__container {
  background: var(--col_main);
  position: relative;
  z-index: 3;
}
#footer .footer__logo {
  width: 60%;
}
@media screen and (min-width: 768px) {
  #footer .footer__logo {
    width: 46%;
  }
}
#footer .footer__inner {
  display: flex;
  max-width: 93%;
  margin: 0 auto;
  padding: 6% 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
#footer .footer__inner .footer__block {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  color: #FFF;
}
#footer .footer__inner .footer__block address, #footer .footer__inner .footer__block a {
  color: #FFF;
  margin-bottom: 10px;
}
#footer .footer__inner .footer__block--links {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 10px;
}
#footer .footer__inner .footer__block--links .linkList {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}
#footer .footer__inner .footer__block--links .linkList .linkList__item {
  margin-bottom: 10px;
  font-size: 1.5rem;
}
#footer .footer__inner .footer__block--links .linkList + .linkList li {
  font-size: 1.2rem;
}
#footer .footer__inner .footer__block--links .link-subList .link-subList__item {
  margin-bottom: 10px;
  font-size: 1.3rem;
}
#footer .footer__inner .footer__block--links .link-subList .link-subList__item a {
  color: #DEDEDE;
  white-space: nowrap;
}
#footer .footer__inner .footer__block--links .link-subList .link-subList__item:first-child {
  margin-top: 5px;
}
#footer .footer__inner .footer__block--links .link-subList .link-subList__item:before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  background-color: #DEDEDE;
  border-radius: 50%;
  position: relative;
  top: -3px;
  margin-right: 5px;
}
#footer .footer__copyright {
  max-width: 93%;
  margin: 0 auto;
  font-size: 1.2rem;
  color: #FFF;
  text-align: center;
}

/* ------------- PC用 レイアウト ------------- */
@media screen and (min-width: 1025px) {
  html {
    scroll-padding-top: 16vh;
  }
  .pc {
    display: inherit;
  }
  .sp {
    display: none;
  }
  .br_none {
    display: inherit;
  }
  .br_sp {
    display: none;
  }
  #header {
    /*========= ナビゲーションのためのCSS ===============*/
    /*アクティブクラスがついたら位置を0に*/
    /*ナビゲーションの縦スクロール*/
    /*ナビゲーション*/
    /*リストのレイアウト設定*/
    /*========= ボタンのためのCSS ===============*/
    /*×に変化*/
  }
  #header #l-gnav {
    background: #fff;
    position: fixed;
    z-index: 999;
  }
  #header .l-header {
    top: 0;
    left: 0;
    width: 100vw;
  }
  #header .l-header .l-header__wrapper {
    display: flex;
    z-index: 3;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    height: 80px;
  }
  #header .l-header .l-header__wrapper .l-header__logo {
    flex: 0 0 220px;
    max-width: 220px;
    margin: 0;
    padding: 0 0 0 25px;
    font-size: 1rem;
    line-height: 100%;
  }
  #header .l-header .l-header__wrapper .l-header__logo img {
    width: 220px;
  }
  #header #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    bottom: -120%;
    left: 0;
    width: 100%;
    height: 100vh;
    /*ナビの高さ*/
    background: var(--col_sub1);
    /*動き*/
    transition: all 0.6s;
  }
  #header #g-nav.panelactive {
    bottom: 0;
  }
  #header #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #header #g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #header #g-nav li {
    list-style: none;
    text-align: center;
  }
  #header #g-nav li a {
    text-decoration: none;
    padding: 15px 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.6rem;
    font-weight: bold;
  }
  #header #g-nav li a span {
    display: block;
    font-size: 1rem;
  }
  #header .openbtn {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 10px;
    right: 15px;
    cursor: pointer;
    width: 80px;
    height: 80px;
  }
  #header .openbtn span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    width: 45%;
  }
  #header .openbtn span:nth-of-type(1) {
    top: 15px;
  }
  #header .openbtn span:nth-of-type(2) {
    top: 23px;
  }
  #header .openbtn span:nth-of-type(3) {
    top: 31px;
  }
  #header .openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
  }
  #header .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  #header .openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
  }
  #footer .footer__container {
    position: relative;
    z-index: 3;
  }
  #footer .footer__logo {
    width: 46%;
  }
  #footer .footer__inner {
    display: flex;
    max-width: var(--Max_W);
    justify-content: space-between;
    align-items: flex-end;
    padding: 2% 0;
  }
  #footer .footer__inner .footer__block {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    color: #FFF;
  }
  #footer .footer__inner .footer__block address, #footer .footer__inner .footer__block a {
    color: #FFF;
    margin-bottom: 20px;
  }
  #footer .footer__inner .footer__block--links {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
  }
  #footer .footer__inner .footer__block--links .linkList .linkList__item {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
  #footer .footer__inner .footer__block--links .linkList .linkList__item a {
    position: relative;
    padding: 5px 0;
  }
  #footer .footer__inner .footer__block--links .link-subList .link-subList__item {
    margin-bottom: 10px;
    font-size: 1.3rem;
  }
  #footer .footer__inner .footer__block--links .link-subList .link-subList__item a {
    position: relative;
    color: #DEDEDE;
  }
  #footer .footer__inner .footer__block--links .link-subList .link-subList__item a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #DEDEDE;
  }
  #footer .footer__inner .footer__block--links .link-subList .link-subList__item:first-child {
    margin-top: 5px;
  }
  #footer .footer__inner .footer__block--links .link-subList .link-subList__item:before {
    content: "";
    width: 5px;
    height: 5px;
    display: inline-block;
    background-color: #DEDEDE;
    border-radius: 50%;
    position: relative;
    top: -3px;
    margin-right: 5px;
  }
  #footer .footer__copyright {
    max-width: 67%;
    margin: 0 auto;
    font-size: 1.4rem;
    color: #FFF;
  }
}
/* ------------- PC用 レイアウト ------------- */
@media screen and (min-width: 1500px) {
  #footer .footer__banner {
    position: relative;
    max-width: 93%;
    height: 100%;
  }
  #footer .footer__banner::after {
    height: 28vh;
  }
  #footer .footer__container {
    position: relative;
    z-index: 3;
  }
}
/*# sourceMappingURL=common.css.map */