@charset "UTF-8";/* 2024.09.02 */

/*p { word-break: break-all;}*/
a {color: var(--main);cursor: pointer;}
@media (min-width: 576px) {
  a {transition: 0.2s ease-out;}
  a:hover, a:focus, a:active {opacity: .7!important;}
  a:focus, a:active {opacity: 1;}
}
.img_tate {
  max-width: inherit;
  height: 100%;
  width: auto;}
body {
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;}

.en {font-family: "Roboto", system-ui;}/* 英語フォント */
.roboto-thin {
  font-family: "Roboto", system-ui;
  font-weight: 100;
  font-style: normal;}
.roboto-light {
  font-family: "Roboto", system-ui;
  font-weight: 300;
  font-style: normal;}
.roboto-regular {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;}
.roboto-medium {
  font-family: "Roboto", system-ui;
  font-weight: 500;
  font-style: normal;}
.roboto-bold {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: normal;}
.roboto-black {
  font-family: "Roboto", system-ui;
  font-weight: 900;
  font-style: normal;}

@media (min-width: 576px) {
  .container {max-width: 1140px}
  .container-sm, .container-md {max-width: 760px}
  .container-xl, .container-lg, .container-xxl {max-width: 1920px}
  .marginL {
    margin: 100px 0;}
  .marginM {
    margin: 50px 0;}
}

.counter {position: relative;}


/* youtube動画埋め込み */
.youtube {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* color ----------------*/
.f_red {color: var(--red);}
.bg_red {background-color: var(--red);}
.f_white {color: #fff;}
.bg_white {background-color: #fff;}
.f_black {color: var(--text);}
.bg_black {background-color: var(--text);}
.f_main {color: var(--main);}
.bg_main {background-color: var(--main);}
.bg_gray {background-color: var(--light);}

/* == タイトル ========== */
.ttl_01 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.6;
  text-align: left;
  padding-bottom: clamp(36px, 6vw, 45px);
}
.ttl_01 img {
  height: clamp(50px, 5vw, 74px);
  width: auto;
  display: block;
}
.ttl_02 {
  font-size: clamp(2rem, 3vw, 2.9rem);
  line-height: 1.3;
  color: var(--main);
  text-align: left;
}
@media (min-width: 1600px) {
  .ttl_02 {
    letter-spacing: .05em;
  }
}

/* == flexBox ========== */
.d-flexX2 .img_box01,
.d-flexX3 .img_box01 {
  padding: 10px;
  margin-bottom: 58px;
  background-color: #fff;
}

@media (min-width: 768px) {
  [class^="d-flexX"],[class*=" d-flexX"] {
    display: flex;
    justify-content: space-between;
  }
  .d-flexX3 li {
    flex: 0 1 min(480px,32%);
    max-width: min(480px,32%);
  }
}


/* == ボタン ========== */
[class^="btn_0"] {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px auto;
  position: relative;
}
@media (max-width: 300px) {
  [class^="btn_0"] {
    flex-direction: column;
    line-height: 1;
  }
}

.btn_01,
.btn_02 {
  width: min(90%, 360px);
  height: 48px;
  border-radius: 24px;
  font-size: 2rem;
  font-weight: bold;
  color: var(--main);
  background-color: #fff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
  transition: .2s;
}
.btn_02 {
  margin-top: 65px;
  background-color: var(--main);
  color: #fff;
}
.btn_03 {
  width: 100%;
  height: 48px;
  font-size: 2rem;
  font-weight: bold;
  background-color: var(--main);
  color: #fff;
  transition: .2s;
}
.btn_01 .en,
.btn_02 .en,
.btn_03 .en {
  font-size: 2.7rem;
  letter-spacing: .03em;
  font-weight: 900;
  padding: .1em .2em 0 0;
}
@media (max-width: 400px) {
  .btn_01 .en,
  .btn_02 .en,
  .btn_03 .en {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .btn_01,
  .btn_02 {
    font-size: 3rem;
    width: 430px;
    height: 60px;
    border-radius: 30px;
  }
  .btn_01 .en,
  .btn_02 .en {
    font-size: 3.4rem;
  }
  .btn_01 {
    margin: 40px auto 50px;
  }
  .btn_02 {
    margin: 90px auto 50px;
  }
}



/* checkbox付きテキスト */
.checkbox li {
  padding-left: 1.5em;
  text-indent: 0;
  position: relative;
}
.checkbox li::before {
  position: absolute;
  content: "\f14a";
  font-family: "font Awesome 5 free";
  color: #999;
  font-size: 18px;
  font-weight: 400;
  left: 0em;
  top: -0.05em;
}






/* jquery.inview.js 下から表示 */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 25%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* jquery.inview.js 時間差表示 */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}


/* 途中出現footer消失 */
.fade_box {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
}
.fade_box.is-show {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 575px) {
  .fade_btn.is-show {
    display: none!important;
  }
}
@media (max-width: 767px) {
  .fade_box {
    right: 10px;
    bottom: 10px;
  }
}
@media (min-width: 576px) {
  .fade_bnr.is-show {
    display: none!important;
  }
  .fade_box a {
    width: min(20vw, 204px);
    display: block;
  }
}
.fade_box a:hover {
}

.fade_bnr {
  height: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  transition: .2s;
}
.fade_bnr.is-show {
  height: 48px;
}
.fade_bnr a {
  margin: 0 auto;
}