@charset "UTF-8";
/*************************************************
common-style
*************************************************/
* {
  box-sizing: border-box;
}

.ie_ObjectFit {
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  min-height: 100dvh;
  color: #333;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.obj-fit img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.btn_wrap {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.btn_wrap a {
  display: inline-block;
  transition: all 0.3s;
}
.btn_wrap a:hover {
  transform: scale(1.1, 1.1);
}
.btn_wrap a img {
  filter: drop-shadow(0px 2px 8px rgba(10, 42, 2, 0.15));
}

.btn_wrapper {
  width: 24rem;
  height: 5rem;
  position: relative;
  background-color: #F48233;
  border-radius: 999px;
  text-align: center;
  margin-bottom: 2rem;
  filter: drop-shadow(0px 2px 8px rgba(10, 42, 2, 0.15));
}
.btn_wrapper:last-child {
  margin-bottom: 3.2rem;
}
.btn_wrapper a {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 500;
  padding: 0.8rem 4rem;
  display: inline-block;
  transition: all 0.3s;
  width: 24rem;
  height: 5rem;
}
.btn_wrapper a:hover {
  opacity: 0.7;
}
.btn_wrapper a .fv_timerex {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 500;
}
.btn_wrapper a .fv_timerex .small {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  display: block;
}
.btn_wrapper::after {
  content: "";
  background: url(../images/btn_arrow.svg) center center/cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  width: 0.6rem;
  height: 1rem;
}

.top_line {
  background-color: #42AE26;
}
.top_line a {
  padding: 1.6rem 4rem;
  transition: all 0.3s;
}

input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

.u-pc {
  display: block;
}
@media screen and (max-width: 490px) {
  .u-pc {
    display: none !important;
  }
}

.u-pc-inlineblock {
  display: inline-block;
}
@media screen and (max-width: 490px) {
  .u-pc-inlineblock {
    display: none;
  }
}

.u-sp {
  display: none;
}
@media screen and (max-width: 490px) {
  .u-sp {
    display: block;
  }
}

.u-sp-inlineblock {
  display: none;
}
@media screen and (max-width: 490px) {
  .u-sp-inlineblock {
    display: inline-block;
  }
}

.u-sp-inline {
  display: none;
}
@media screen and (max-width: 490px) {
  .u-sp-inline {
    display: inline;
  }
}

.u-align--center {
  text-align: center;
}

/*************************************************
header
*************************************************/
.sp_header_inner {
  display: none;
}
@media screen and (max-width: 1150px) {
  .sp_header_inner {
    display: block;
  }
}
.sp_header_inner .hamburger {
  position: fixed;
  right: 1rem; /* 画面の右端に固定 */
  top: 1rem; /* 画面の上端に固定 */
  z-index: 999; /* メニューが他の要素の上に表示されるように */
  padding: 1rem;
}

/******************************
ハンバーガーメニュー
*******************************/
.ham-trigger {
  position: relative;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  background-color: #fff;
  filter: drop-shadow(0px 2px 10px rgba(2, 54, 58, 0.05)) drop-shadow(2px 0px 10px rgba(2, 54, 58, 0.05)) drop-shadow(-2px 0px 10px rgba(2, 54, 58, 0.05)) drop-shadow(0px -2px 10px rgba(2, 54, 58, 0.05));
  cursor: pointer;
  transform: all 0.3s;
  animation: whiteChange 3s;
}
.ham-trigger p {
  font-size: 1.1rem;
  color: #00929f;
  font-weight: 500;
  font-family: "Jost", sans-serif;
}
.ham-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 4.3rem;
  height: 4.3rem;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  transition: all 0.1s;
  opacity: 0;
}
.ham-trigger.ham_active span {
  background-color: #fff;
  color: #00929f;
}
.ham-trigger.ham_active span:nth-of-type(1) {
  animation: ham_active-bar01 0.4s 0.2s forwards;
  background-color: #00929f;
}
.ham-trigger.ham_active span:nth-of-type(2) {
  animation: ham_active-bar02 0.4s 0.2s forwards;
}
.ham-trigger.ham_active span:nth-of-type(3) {
  animation: ham_active-bar03 0.4s 0.2s forwards;
  background-color: #00929f;
}
.ham-trigger span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1px;
  background-color: #00929f;
}
.ham-trigger span:nth-of-type(1) {
  top: 10px;
  animation: move-bar01 0.3s forwards;
}
.ham-trigger span:nth-of-type(2) {
  top: 14.5px;
  animation: move-bar02 0.3s forwards;
}
.ham-trigger span:nth-of-type(3) {
  top: 19px;
  animation: move-bar03 0.3s forwards;
}

.hamburger_text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.8rem;
}

.ham-trigger,
.ham-trigger span {
  display: inline-block;
  transition: all 0.3s;
  box-sizing: border-box;
}
@keyframes move-bar01 {
  0% {
    transform: translateX(-50%) translateY(5px) rotate(-45deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0);
  }
}
@keyframes move-bar02 {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes move-bar03 {
  0% {
    transform: translateX(-50%) translateY(-4px) rotate(45deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0);
  }
}
@keyframes ham_active-bar01 {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0);
  }
  100% {
    transform: translateX(-50%) translateY(4.5px) rotate(-45deg);
  }
}
@keyframes ham_active-bar02 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ham_active-bar03 {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0);
  }
  100% {
    transform: translateX(-50%) translateY(-4px) rotate(45deg);
  }
}
/******************************
spメニューレイアウト
*******************************/
.sp_openarea {
  opacity: 0;
  display: none;
  text-align: center;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(-10px);
  height: 100vh; /* 画面全体の高さ */
  overflow-y: auto; /* 縦スクロールを有効にする */
  -webkit-overflow-scrolling: touch; /* スムーズスクロールを有効にする */
}

.open_active {
  opacity: 1;
  overflow-y: scroll;
  display: block; /* ハンバーガーがクリックされた時に表示する */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  z-index: 998; /* メニューの背景として配置 */
  transform: translateY(0);
  padding: 6.4rem 2rem;
}
.open_active .sp_header_inner {
  z-index: 1000;
}
.open_active .sp_header_inner .ham_active {
  background-color: #fff;
}
.open_active .sp_header_inner .ham_active.ham-trigger {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.open_active .sp_header_inner a {
  color: #fff;
  transition: all 0.3s;
}
.open_active .sp_header_inner a.tab {
  position: relative;
}
.open_active .sp_header_inner a.tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.8rem;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.2rem;
  background: url(../images/icon-links.svg) no-repeat center/contain;
}
.open_active .sp_header_inner a:hover {
  opacity: 0.7;
}
.open_active .sp_menu-list a {
  color: #00929F;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 4;
  border-bottom: 1px solid #00929F;
}
.open_active .btn_wrapper {
  margin: 4rem auto 2rem auto;
}

/*************************************************
footer
*************************************************/
footer {
  position: relative;
  z-index: 2;
  max-width: 49rem;
  margin: 0 auto;
  background-color: #00929F;
  filter: drop-shadow(0px 2px 20px rgba(2, 71, 77, 0.15));
}
footer .footer_wrap {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 1.6rem 0;
  color: #fff;
  font-size: 1.2rem;
}
@media screen and (max-width: 490px) {
  footer .footer_wrap {
    width: 90%;
    padding: 1.2rem 0;
    font-size: 1rem;
  }
}
footer .footer_wrap a {
  display: inline-block;
  transition: all 0.3s;
  font-weight: 400;
  letter-spacing: 0.05em;
}
footer .footer_wrap a:hover {
  opacity: 0.7;
}

/*************************************************
top
*************************************************/
/* PC用レイアウト */
@media screen and (min-width: 490px) {
  body {
    margin: 0;
    overflow-x: hidden;
  }
}
.pc_fv {
  background: url(../images/pc-bg.jpg) center/cover;
  width: 100%;
  height: 100vh; /* ファーストビューの高さを画面全体に */
  overflow: hidden;
  position: fixed;
}
.pc_fv .menu {
  width: 93.0555555556vw;
  height: 100vh;
  margin: 0 auto;
  padding-top: 10rem;
  position: relative;
}
@media screen and (max-width: 1350px) {
  .pc_fv .menu {
    width: 97%;
  }
}
@media screen and (max-width: 1150px) {
  .pc_fv .menu {
    display: none;
  }
}
.pc_fv .menu .logo {
  width: 20.8333333333vw;
  max-width: 30rem;
}
.pc_fv .menu .nav {
  padding-top: 4.8rem;
}
.pc_fv .menu .nav li {
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  position: relative;
  padding-left: 1rem;
}
.pc_fv .menu .nav li a {
  padding: 1rem;
  display: inline-block;
  color: rgba(51, 51, 51, 0.5);
  transition: color 0.3s, font-weight 0.3s; /* アニメーションを追加 */
  /* 左側にアイコンを表示 */
}
.pc_fv .menu .nav li a:hover, .pc_fv .menu .nav li a:focus {
  font-weight: bold; /* ホバーまたはフォーカス時に太字に */
  color: #333; /* 色も変更可能 */
}
.pc_fv .menu .nav li a::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #00929f;
  border-radius: 50%;
  position: absolute;
  left: 0; /* アイコンをリンクの左に表示 */
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  opacity: 0; /* 初期状態では表示しない */
  transition: opacity 0.3s, transform 0.3s;
}
.pc_fv .menu .nav li a:hover::before, .pc_fv .menu .nav li a:focus::before {
  opacity: 1; /* ホバーまたはフォーカス時にアイコンを表示 */
  transform: translateY(-50%) translateX(-5px); /* スライドして表示 */
  -webkit-transform: translateY(-50%) translateX(-5px);
}
.pc_fv .menu .nav li a.active {
  font-weight: bold;
  color: #333;
}
.pc_fv .menu .nav li a.active::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-5px);
  -webkit-transform: translateY(-50%) translateX(-5px);
}
.pc_fv .menu .fv_right {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 水平方向の中央揃え */
  justify-content: center;
}
.pc_fv .menu .fv_right .access {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 1rem;
  justify-content: space-between;
}
.pc_fv .menu .fv_right .access p {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.pc_fv .menu .fv_right .access .qr {
  width: 7.8em;
  height: 7.8rem;
}
.pc_fv .menu .fv_right .top_arrow {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #00929f;
  position: relative;
  margin-top: 3.2rem;
}
.pc_fv .menu .fv_right .top_arrow a {
  display: inline-block;
  padding: 2.5rem;
}
.pc_fv .menu .fv_right .top_arrow a img {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%; /* WebKit対応 */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
  width: 1.7rem;
  height: 1rem;
}
.pc_fv .menu .fv_right .top_arrow a:hover img {
  transform: translate(-50%, -90%); /* 上に10%移動 */
}

.fixd_btn {
  display: none;
}
@media screen and (max-width: 490px) {
  .fixd_btn {
    display: block;
    position: fixed;
    bottom: 10px; /* 画面下に10pxの余白 */
    left: 10px; /* 左右に10pxの余白 */
    right: 10px;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 5px 0px rgba(10, 42, 2, 0.15);
    z-index: 997; /* 他の要素がボタンを隠さないようにする */
    padding: 1.6rem 0;
    opacity: 0;
    pointer-events: none; /* 非表示時にクリックできないように */
    transition: opacity 0.3s ease-in-out; /* フェードイン・アウトをスムーズに */
  }
}
.fixd_btn.show {
  opacity: 1; /* 表示時は透明度を100%に */
  pointer-events: all; /* 表示時にクリック可能に */
}
.fixd_btn p {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.fixd_btn .top_text {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  position: relative;
  /* ドット線をテキストの左右に配置 */
}
.fixd_btn .top_text::before, .fixd_btn .top_text::after {
  content: "";
  position: absolute;
  top: 50%; /* テキストの中央に配置 */
  width: 50px; /* ドット線の幅 */
  height: 0;
  border-top: 2px dotted #00929f; /* 2pxのドット線 */
  transform: translateY(-50%);
}
.fixd_btn .top_text::before {
  left: 20.5128205128vw; /* 左側のドット線の余白を可変に */
}
.fixd_btn .top_text::after {
  right: 20.5128205128vw; /* 右側のドット線の余白を可変に */
}
.fixd_btn .side_btn {
  display: flex;
  justify-content: space-around;
}
.fixd_btn .side_btn .fixd_btn_wrap {
  width: 43.5897435897vw;
  min-width: 25rem;
  height: auto;
}
.fixd_btn .side_btn .fixd_btn_wrap a {
  display: inline-block;
}
.fixd_btn .side_btn .fixd_btn_wrap a img {
  filter: drop-shadow(0px 2px 8px rgba(10, 42, 2, 0.15));
}

.contents_wrap {
  position: relative;
  z-index: 2;
  max-width: 49rem;
  margin: 0 auto;
  box-sizing: border-box;
  filter: drop-shadow(0px 2px 20px rgba(2, 71, 77, 0.15));
}
@media screen and (max-width: 490px) {
  .contents_wrap {
    width: 100%;
  }
}
.contents_wrap .worries {
  position: relative;
  z-index: 3;
}
.contents_wrap .money_btn_sec {
  background-color: #e9f7f8;
  padding: 2.4rem 0;
}
.contents_wrap .money_btn_sec h2 {
  font-size: 1.6rem;
  font-weight: 500;
  align-items: center;
  display: flex; /* 文字と横線を横並び */
  justify-content: center;
  padding-bottom: 0.6rem;
}
.contents_wrap .money_btn_sec h2::before, .contents_wrap .money_btn_sec h2::after {
  content: "";
  background-color: #333;
  height: 0.2rem;
  width: 2.2rem;
}
.contents_wrap .money_btn_sec h2::before {
  margin-right: 10px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
.contents_wrap .money_btn_sec h2::after {
  margin-left: 10px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}
.contents_wrap .merit {
  margin-top: -6rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 490px) {
  .contents_wrap .merit {
    margin-top: -5rem;
  }
}
.contents_wrap .merit .merit_btn_top {
  position: absolute;
  z-index: 2;
  top: 22rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 490px) {
  .contents_wrap .merit .merit_btn_top {
    top: 45.1388888889vw;
  }
}
.contents_wrap .merit .merit_btn_bottom {
  position: absolute;
  z-index: 3;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 490px) {
  .contents_wrap .merit .merit_btn_bottom {
    bottom: 12.5vw;
  }
}
.contents_wrap .benefits {
  position: relative;
  z-index: 2;
}
.contents_wrap .benefits .benefits_btn {
  position: absolute;
  z-index: 3;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 490px) {
  .contents_wrap .benefits .benefits_btn {
    bottom: 20.8333333333vw;
  }
}
.contents_wrap .step {
  position: relative;
  z-index: 2;
}
.contents_wrap .step .step_btn {
  position: absolute;
  z-index: 3;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 490px) {
  .contents_wrap .step .step_btn {
    bottom: 12.5vw;
  }
}
.contents_wrap .wrap {
  background: url(../images/suport-bg.jpg) no-repeat bottom/cover;
  width: 100%;
  height: auto;
}
.contents_wrap .wrap .message {
  padding-top: 6rem;
  width: 95%;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 490px) {
  .contents_wrap .wrap .message {
    padding-top: 4.8rem;
    width: 90%;
  }
}
.contents_wrap .wrap .message .thum-box {
  filter: drop-shadow(0px 2px 8px rgba(10, 42, 2, 0.15));
}
.contents_wrap .wrap .online {
  padding-top: 6rem;
  width: 95%;
  margin: 0 auto;
}
@media screen and (max-width: 490px) {
  .contents_wrap .wrap .online {
    padding-top: 4.8rem;
    width: 90%;
  }
}
.contents_wrap .wrap .suport02 {
  padding-top: 6rem;
  width: 95%;
}
@media screen and (max-width: 490px) {
  .contents_wrap .wrap .suport02 {
    padding-top: 4.8rem;
    width: 90%;
  }
}
.contents_wrap .timerex {
  position: relative;
  z-index: 2;
}
.contents_wrap .timerex .timerex_btn {
  position: absolute;
  z-index: 3;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 490px) {
  .contents_wrap .timerex .timerex_btn {
    top: 20.8333333333vw;
  }
}