/* 
Theme Name:KIYAI
Theme URL:https://kiyai.co.jp/
Description:KIYAI
Author:KIYAI
Version:1.0.0 */

@charset "UTF-8";
@font-face {
  font-family: "Roobert";
  src: url("./font/Raleway-4.101/variable/TTF/Raleway-VF.ttf")
      format("truetype"),
    url("./font/Raleway-4.101/static/WOFF/Raleway-Regular.woff") format("woff");
}
.weight100 {
  font-weight: 100;
}

.weight300 {
  font-weight: 300;
}

.weight400 {
  font-weight: 400;
}

.weight500 {
  font-weight: 500;
}

.weight600 {
  font-weight: 600;
}

.weight700 {
  font-weight: 700;
}

.weight900 {
  font-weight: 900;
}
.indexPage {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  font-family: "Roobert", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.no-scroll {
  overflow: hidden;
}
.indexPage::-webkit-scrollbar {
  display: none;
}

.wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  min-height: 100vh;
  font-family: "Roobert", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}
.inner1 {
  position: relative;
  box-sizing: border-box;
  padding-top: 80px;
  padding-bottom: 430px;
  flex: 1; 
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .pararaxItem {
    position: absolute;
    --sample-color: 200 200 200;
    aspect-ratio: 1 / 1;
    background: radial-gradient(
      circle,
      rgb(var(--sample-color)),
      rgb(var(--sample-color) / 0%)
    );
    border-radius: 50%;
    filter: blur(100px);
    width: min(100%, 400px);
    left: 50%;
    top: 20%;
    z-index: 5;
    transition-delay: 0.2s;
    transition: ease-out 0.5s;
    transform: translateX(-50%); /* 中央寄せ */
    opacity: 0; /* 初期状態は非表示 */
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .pararaxItem {
    position: absolute;
    --sample-color: 200 200 200;
    aspect-ratio: 1 / 1;
    background: radial-gradient(
      circle,
      rgb(var(--sample-color)),
      rgb(var(--sample-color) / 0%)
    );
    border-radius: 50%;
    filter: blur(100px);
    width: min(100%, 400px);
    left: 50%;
    top: 20%;
    z-index: 5;
    transition-delay: 0.2s;
    transition: ease-out 0.5s;
    transform: translateX(-50%); /* 中央寄せ */
    opacity: 0; /* 初期状態は非表示 */
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .pararaxItem {
    position: absolute;
    --sample-color: 200 200 200;
    aspect-ratio: 1 / 1;
    background: radial-gradient(
      circle,
      rgb(var(--sample-color)),
      rgb(var(--sample-color) / 0%)
    );
    border-radius: 50%;
    filter: blur(100px);
    width: min(100%, 400px);
    left: 50%;
    top: 20%;
    z-index: 5;
    transition-delay: 0.2s;
    transition: ease-out 0.5s;
    transform: translateX(-50%); /* 中央寄せ */
    opacity: 0; /* 初期状態は非表示 */
  }
}

svg:not(:root) {
  overflow: visible;
}
.corporatlogo {  
  display: flex;
  width: 120px;
  height: 40px;
  object-fit: contain;
  align-items:center;
}
.header__logo {
  display: flex;
  width: 150px;
  height: 80px;
  margin-left: 20px;
  align-items:center;
}
.symbol {
  display: flex;
  width: 120px;
  height: 40px;
  fill: white !important;
  align-items:center;
}
#symbol {
  fill: white !important;
}
.li{
  list-style: none;
}
ul {
  list-style: none;
}
@media (min-width: 768px) {
  .menu-toggle {
    margin-right: 20px;
    display: flex;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 1000;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-toggle {
    margin-right: 20px;
    display: flex;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 1000;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-toggle {
    margin-right: 20px;
    display: flex;
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 1000;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) {
  .js-lottie01 {
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .js-lottie01 {
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .js-lottie01 {
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
  }
}

@media (min-width: 768px) {
  .js-lottie02 {
    position: relative;
    width: 70px;
    height: 70px;
    display: none;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .js-lottie02 {
    position: relative;
    width: 70px;
    height: 70px;
    display: none;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .js-lottie02 {
    position: relative;
    width: 70px;
    height: 70px;
    display: none;
  }
}


.menu {
  height: 0;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgb(0, 0, 0);
  overflow-x: hidden;
  transition: height 0.5s;
  z-index: 10000;
}


@media (min-width: 768px) {
  .menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding:  150px 5vw 5vw 5vh;
    display: flex;
    box-sizing: border-box;
    z-index: 10000;
  } 
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding:  150px 5vw 5vw 5vh;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    z-index: 10000;
  } 
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding:  80px 5vw 5vw 5vh;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    z-index: 10000;
  }  
}


@media (min-width: 768px) {
  .menu-content_left {
    display: inline-block;
    position: relative;
    height: 400px;
    width: 100%;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-content_left {
    display: inline-block;
    position: relative;
    height: 400px;
    width: 100%;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu-content_left {
    display: inline-block;
    position: relative;
    height: 400px;
    width: 100%;
  }
}

.menutx1:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx1:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx1 {
  display: inline;
  position: relative;
  width: 100%;
  height: 50px;
  padding-left: 30px;
  opacity: 0.5;
  transform: translateX(-30px);
  box-sizing: border-box;
}

.menutx1.move1 {
  transition-delay: 0.6s;
  transform: translateX(0);
  opacity: 1;
}
.menutx2 {
  opacity: 0.5;
  transform: translateX(-30px);
}
.menutx2:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}

.menutx2:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx2.move2 {
  opacity: 1;
  transition-delay: 0.5s;
  transform: translateX(0);
}
.menutx3 {
  opacity: 0.5;
  transform: translateX(-30px);
}
.menutx3:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx3:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx3.move3 {
  opacity: 1;
  transition-delay: 0.4s;
  transform: translateX(0);
}
.menutx4 {
  opacity: 0.5;
  transform: translateX(-30px);
}
.menutx4:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx4:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx4.move4 {
  opacity: 1;
  transition-delay: 0.3s;
  transform: translateX(0);
}

.menutx5 {
  opacity: 0.5;
  transform: translateX(-30px);
}
.menutx5:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx5:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx5.move5 {
  opacity: 1;
  transition-delay: 0.2s;
  transform: translateX(0);
}
.menutx6 {
  opacity: 0.5;
  transform: translateX(-30px);
}
.menutx6:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx6:hover:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 18px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: none;
  box-sizing: border-box;
}
.menutx6.move6 {
  opacity: 1;
  transition-delay: 0.1s;
  transform: translateX(0);
}
.menu-content_right {
  display: inline-block;
  position: relative;
  height: 200px;
  width: 100%;
}
.menu_text_sub1 {
  display: inline-block;
  position: relative;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}
@media (min-width: 768px) {
  .menu_text_title1 {
    opacity: 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title1 {
    opacity: 0;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title1 {
    opacity: 0;
  }
}
@media (min-width: 768px) {
  .menu_text_title1.act1 {
    width: 250px;
    display: block;
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    animation: typing1 1s steps(8), effect1 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title1.act1 {
    width: 250px;
    display: block;
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    animation: typing1 1s steps(8), effect1 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title1.act1 {
    width: 240px;
    display: block;
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    animation: typing1 1s steps(8), effect1 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}



@keyframes typing1 {
  from {
    width: 0;
  }
}
@keyframes effect1 {
  50% {
    border-color: transparent;
  }
}

@media (min-width: 768px) {
  .menu_text_title2 {
    opacity: 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title2 {
    opacity: 0;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title2 {
    opacity: 0;
  }
}


@media (min-width: 768px) {
  .menu_text_title2.act2 {
    width: 370px;
    display: block;
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    animation: typing2 1s steps(12), effect2 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title2.act2 {
    width: 280px;
    display: block;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    animation: typing2 1s steps(12), effect2 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .menu_text_title2.act2 {
    width: 280px;
    display: block;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    animation: typing2 1s steps(12), effect2 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    opacity: 1;
    box-sizing: border-box;
  }
}

@keyframes typing2 {
  from {
    width: 0;
  }
}
@keyframes effect2 {
  50% {
    border-color: transparent;
  }
}

.menu.open {
  height: 100%;
  z-index: 500;
}

.menu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  box-sizing: border-box;
}

.menu a:hover {
  color: #ffffff;
}

#white {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: black;
  z-index: 0;
  box-sizing: border-box;
  flex: 1; 
}
.header-blk-in {
  display: inline-block;
  position: fixed; /*** ← fixedで固定 ***/
  width: 100%;
  height: 80px;
  top: 0;
  left: 0;
  font-weight: 400;
  background-color: rgb(0, 0, 0);
  z-index: 10000;
  font-optical-sizing: auto;
  font-style: normal;
  box-sizing: border-box;
}

.header__in {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 10000;
  height: 80px;
}

.header_end{
 max-width: 500px;
 height: 100%;
 display: flex; 
 justify-content: flex-end;

}

@media (min-width: 768px) {
  .header__text {
    display: flex;
    width: 420px;
    height: 100%;
    padding-top: 6px;
    box-sizing: border-box;
    margin-right: 50px;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .header__text {
    display: none;
    width: 400px;
    height: 100%;
    padding-top: 6px;
    padding-right: 50px;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .header_text_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;
  }
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .header_text_box {
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;
  }
}

.logo {
  object-fit: cover;
  width: 100px;
}



@media (min-width: 768px) {
  .online > a {
    display: inline-block; /* 必須: アニメーション適用のため */
    position: relative; 
    font-size: 14px;
    color: rgb(255, 255, 255);
    list-style-type: none;
    position: relative;
    text-decoration: none;
    padding: 0;
    transition: 0.4s ease-out; /* アニメーション用のスムーズなトランジション */
  }
}


@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .online > a {
    display: inline-block; /* 必須: アニメーション適用のため */
    position: relative; 
    font-size: 14px;
    color: rgb(255, 255, 255);
    list-style-type: none;
    position: relative;
    text-decoration: none;
    padding: 0;
    transition: 0.4s ease-out; /* アニメーション用のスムーズなトランジション */
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .online > a {
    display: inline-block; /* 必須: アニメーション適用のため */
    position: relative; 
    font-size: 14px;
    color: rgb(255, 255, 255);
    list-style-type: none;
    position: relative;
    text-decoration: none;
    padding: 0;
    transition: 0.4s ease-out; /* アニメーション用のスムーズなトランジション */
  }
}
@media (min-width: 768px) {
  .online > a.animate {
    opacity: 0; /* 徐々に消える */
  }
}


@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .online > a.animate {
    opacity: 0; /* 徐々に消える */
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .online > a.animate {
    opacity: 0; /* 徐々に消える */
  }
}


@media (min-width: 768px) {
  .TopContents {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 1200px;
    z-index: 10;
    background-color: #000000;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 100px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }
}


@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .TopContents {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 1200px;
    z-index: 10;
    background-color: #000000;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .TopContents {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 1200px;
    z-index: 10;
    background-color: #000000;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .topinner{
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    justify-content: center;
    align-items: center;
    z-index: 60;
  }
}

@media (min-width: 768px) {
  .topinner{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .topinner{
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    justify-content: center;
    align-items: center;
    z-index: 60;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
    .loaded .topinner{
      opacity: 1;
      transform: translateY(0); /* 最終的な位置に戻す */
      transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
    }
}
@media screen and (min-width: 479px)  { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .topinner{
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    justify-content: center;
    align-items: center;
    z-index: 80;
  }
}

@media screen and (min-width: 479px)  { /*ウィンドウ幅が最大479pxまでの場合に適用*/
    .loaded .topinner{
      opacity: 1;
      transform: translateY(0); /* 最終的な位置に戻す */
      transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
    }
}


@media (min-width: 768px) {
  .topmovie {
    max-width: 50%;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .topmovie {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }
}


.toptext_p_t1{
  display: inline;
  margin: 0;
  line-height: 1;
}
.toptext_p_t1_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}

.toptext_p_t1_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.1s;
}
.toptext_p_t1_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.2s;
}
.toptext_p_t1_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.3s;
}
.toptext_p_t1_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.4s;
}
.toptext_p_t1_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.5s;
}
.toptext_p_t1_mini6{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini6.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.6s;
}
.toptext_p_t1_mini7{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini7.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.7s;
}
.toptext_p_t1_mini8{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini8.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.8s;
}
.toptext_p_t1_mini9{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t1_mini9.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.9s;
}
.toptext_p_t2{
  display: inline;
}
.toptext_p_t2_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t2_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1s;
}
.toptext_p_t2_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t2_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.1s;
}
.toptext_p_t3{
  display: inline;
}
.toptext_p_t3_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
}
.toptext_p_t3_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.2s;
}
.toptext_p_t4{
  display: inline;
}
.toptext_p_t4_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t4_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.3s;
}
.toptext_p_t4_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t4_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.4s;
}
.toptext_p_t4_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t4_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.5s;
}
.toptext_p_t4_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t4_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.6s;
}
.toptext_p_t4_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t4_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.7s;
}
.toptext_p_t5{
  display: inline;
}
.toptext_p_t5_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t5_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.8s;
}
.toptext_p_t5_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t5_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.9s;
}
.toptext_p_t5_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t5_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.0s;
}
.toptext_p_t5_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t5_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.1s;
}
.toptext_p_t5_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t5_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.2s;
}
.toptext_p_t6{
  display: inline-block;;
}
.toptext_p_t6_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini1.show {
  display: inline-block;
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.3s;
}
.toptext_p_t6_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.4s;
}
.toptext_p_t6_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.5s;
}
.toptext_p_t6_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.6s;
}
.toptext_p_t6_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.7s;
}
.toptext_p_t6_mini6{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini6.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.8s;
}
.toptext_p_t6_mini7{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini7.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 2.9s;
}
.toptext_p_t6_mini8{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini8.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.0s;
}
.toptext_p_t6_mini9{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t6_mini9.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.1s;
}

.toptext_p_t7{
  display: inline;
}
.toptext_p_t7_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.2s;
}
.toptext_p_t7_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.3s;
}
.toptext_p_t7_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.4s;
}
.toptext_p_t7_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.5s;
}
.toptext_p_t7_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.6s;
}
.toptext_p_t7_mini6{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini6.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.7s;
}
.toptext_p_t7_mini7{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini7.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.8s;
}
.toptext_p_t7_mini8{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini8.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 3.9s;
}
.toptext_p_t7_mini9{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini9.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.0s;
}
.toptext_p_t7_mini10{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t7_mini10.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.1s;
}
.toptext_p_t8{ 
  display: inline;
}
.toptext_p_t8_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t8_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.2s;
}
.toptext_p_t8_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t8_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.3s;
}
.toptext_p_t9{
  display: inline;
}
.toptext_p_t9_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t9_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.4s;
}
.toptext_p_t9_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t9_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.5s;
}
.toptext_p_t9_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t9_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.6s;
}
.toptext_p_t9_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t9_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.7s;
}
.toptext_p_t10{
  display: inline;
}
.toptext_p_t10_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t10_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.8s;
}
.toptext_p_t10_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t10_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 4.9s;
}
.toptext_p_t10_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t10_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.0s;
}
.toptext_p_t11{
  display: inline;
}
.toptext_p_t11_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t11_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.1s;
}
.toptext_p_t11_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t11_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.2s;
}
.toptext_p_t12{
  display: inline;
}
.toptext_p_t12_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.3s;
}
.toptext_p_t12_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.4s;
}
.toptext_p_t12_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.5s;
}
.toptext_p_t12_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.6s;
}
.toptext_p_t12_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.7s;
}
.toptext_p_t12_mini6{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini6.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.8s;
}
.toptext_p_t12_mini7{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t12_mini7.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 5.9s;
}
.toptext_p_t13{
  display: inline;
}
.toptext_p_t13_mini1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t13_mini1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 6.0s;
}
.toptext_p_t13_mini2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t13_mini2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 6.1s;
}
.toptext_p_t13_mini3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t13_mini3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 6.2s;
}
.toptext_p_t13_mini4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t13_mini4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 6.3s;
}
.toptext_p_t13_mini5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) 
}
.toptext_p_t13_mini5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 6.4s;
}

@media (min-width: 768px) {
  .toptext_p{
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    max-width: 100vw;
    height: 150px;
  } 
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext_p{
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    max-width: 100vw;
    height: 150px;
  } 
}



@media (min-width: 768px) {
  .toptext{
    display: flex;
    position: relative;
    color: #fff;
    max-width: 100vw;
    height: 150px;
    z-index: 10;
    align-items: center;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media (min-width: 768px) {
  .loaded .toptext{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext{
    display: none;
    position: absolute;
    color: #fff;
    top: 30%;
    right: 0;
    max-width: 500px;
    height: 150px;
    z-index: 10;
    align-items: center;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .loaded .toptext{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext{
    display: none;
    position: absolute;
    color: #fff;
    top: 30%;
    right: 0;
    max-width: 500px;
    height: 150px;
    z-index: 10;
    align-items: center;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .loaded .toptext{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media  (min-width: 768px) {
  .serviceContent {
    position: relative;
    display: flex;
    max-width: 100vw;
    padding-top: 30px;
    padding-bottom: 100px;
    padding-left: 8vw;
    padding-right: 8vw;
    z-index: 10;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    background-color: #000000;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceContent {
    position: relative;
    display: flex;
    max-width: 100vw;
    height: 800px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 8vw;
    padding-right: 8vw;
    z-index: 10;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #000000;
  }
  }

@media (min-width: 768px) {
  .serviceWraper{
    flex-flow: row;
    max-width: 100vw;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceWraper{
    max-width: 100vw;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceContent_head {
    max-width: 100vw;
    height: 300px;
  }
}
@media (min-width: 768px) {
  .serviceContent_head {
    max-width: 100vw;
    padding-right: 50px;
    height: 300px;
  }
}

.serviceArea_text_title {
  display: inline-block;
  vertical-align: top;
  color: #ffffff;
  font-size: 60px;
  font-weight: 400;
  font-family: "Roobert", "NotoSansJP", sans-serif;
  transform: translateX(-20px);
  opacity: 0;
  transition: ease-out 0.8s;
  height: 80px;
  max-width: 100vw;
  margin-bottom: 0;
  transition-delay: 0.7s;
}
.serviceArea_text_title.show {
  transform: translateX(0);
  opacity: 1;
}

.serviceArea_text_title:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 26px;
  left: -20px;
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.serviceArea_text_sub {
  height: 30px;
  max-width: 100vw;
  color: #dbdbdb;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(20px);
  opacity: 0;
  transition: 0.5s;
  margin-top: 0;
  transition-delay: 0.5s;
}
.serviceArea_text_sub.show {
  transform: translateY(0);
  opacity: 1;
}
.button.show {
  transform: translateY(0);
  opacity: 1;
}

.button {
  position: relative;
  border-radius: 25px;
  border: 2px solid #ffffff;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  margin-top: 20px;
  transform: translateY(20px);
  opacity: 0;
  transition: 0.5s;
  box-sizing: border-box;
  transition-delay: 0.5s;
}

.BTN:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #ffffff;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
}
.BTN:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.BTN {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  padding-top: 3px;
  font-weight: 600;
  font-size: 16px;
}
.BTN:hover {
  color: #000000;
}
.BTN::selection {
  background-color: rgb(255, 255, 255);
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceContent_head {
    max-width: 100vw;
    height: 300px;
  }
}
@media (min-width: 768px) {
  .serviceContent_head {
    max-width: 100vw;
    padding-right: 50px;
    height: 300px;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .ServiceContent_right {
    height: 400px;
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: ease-out 0.8s;
    transition-delay: 0.5s;
  }
}
@media (min-width: 768px) {
  .ServiceContent_right {
    height: 400px;
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: ease-out 0.8s;
    transition-delay: 0.5s;
  }
}

.ServiceContent_right.show {
  transform: translateY(0);
  opacity: 1;
}
.ServiceContent_body {
  height: 320px;
  width: 100%;
}
.ServiceContent_text {
  height: 110px;
  width: 100%;
  font-weight: 400;
  box-sizing: border-box;
}



@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .ServiceContent_text:after {
    position: absolute;
    left: 0px;
    content: "";
    width: 280px;
    height: 0.5px;
    background: #ffffff;
    /* bottom: -1px;               アンダーラインがaタグの下端から現れる */
    transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: 0.8s 0.1s ease-in-out;
    transition-delay: 1s;
  }
}
@media (min-width: 768px) {
  .ServiceContent_text:after {
    position: absolute;
    left: 0px;
    content: "";
    width: 400px;
    height: 0.5px;
    background: #ffffff;
    /* bottom: -1px;               アンダーラインがaタグの下端から現れる */
    transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: 0.8s 0.1s ease-in-out;
    transition-delay: 1s;
  }
}
.ServiceContent_text.show:after {
  transform: scale(1, 1);
}

.ServiceContent_text:hover .textBox {
  transform: translateX(30px);
}


@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .textBox {
    display: flex;
    padding-top: 20px;
    padding-bottom: 5px;
    max-width: 400px;
    height: 100%;
    transition: transform 0.3s ease 0s;
    box-sizing: border-box;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .textBox {
    display: flex;
    padding-top: 20px;
    padding-bottom: 5px;
    max-width: 400px;
    height: 100%;
    transition: transform 0.3s ease 0s;
    box-sizing: border-box;
    align-items: center;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .textBoxsub {
    display: inline-block;
    margin-left: 20px;
    align-items: center; 
    max-height: 85px;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .textBoxsub {
    display: inline-block;
    margin-left: 20px;
    align-items: center; 
    max-height: 50px;
    max-width: 100%;
  }
}
.textBoximage {
  height: 60px;
  width: 60px;
  object-fit: contain;
}


@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceTX{
    white-space: pre;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceTX::after{
    content:"\A";
    white-space: pre;
  }
}
@media (min-width: 768px) {
  .serviceTX{
  }
}
@media (min-width: 768px) {
  .serviceTX::after{
  }
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .ServiceContent_front {
    display: block;
    font-weight: 600;
    font-size: 20px;
    height: 60px;
    color: #fff;
    max-width: 400px;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
}
@media (min-width: 768px) {
  .ServiceContent_front {
    display: block;
    font-weight: 600;
    font-size: 20px;
    height: 20px;
    color: #fff;
    max-width: 400px;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
}

.ServiceContent_end {
  display: block;
  font-weight: 400;
  font-size: 12px;
  height: 20px;
  color: #fff;
  max-width: 300px;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.CaseContent_in {
  display: flex;
  flex-flow: column;
  align-items: center;
}


@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .CaseContent {
    display: flex;
    flex-flow: column;
    position: relative;
    max-width: 100vw;
    height: 900px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 8vw;
    padding-right: 8vw;
    z-index: 20;
    box-sizing: border-box;
  }
}
@media  (min-width: 768px) {
  .CaseContent {
    display: flex;
    position: relative;
    max-width: 100vw;
    height: 600px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 3vw;
    padding-right: 3vw;
    z-index: 20;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .CaseContent_head {
    width: 100%;
    height: 400px;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) {
  .CaseContent_head {
    width: 100%;
    height: 400px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}


.CaseArea_text_title {
  display: inline-block;
  vertical-align: top;
  color: #ffffff;
  width: 350px;
  font-size: 60px;
  font-weight: 400;
  transform: translateX(-20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-bottom: 0;
  transition-delay: 1s;
}
.CaseArea_text_title.show {
  opacity: 1;
  transform: translateX(0);
}

.CaseArea_text_title:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 26px;
  left: -20px;
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.CaseArea_text_sub1 {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-top: 0;
  transition-delay: 0.5s;
}
.CaseArea_text_sub1.show {
  transform: translateY(0);
  opacity: 1;
}

.CaseArea_text_sub2 {
  width: 400px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  transition-delay: 0.5s;
}
.CaseArea_text_sub2.show {
  transform: translateY(0);
  opacity: 1;
}

.Casebutton {
  position: relative;
  border-radius: 25px;
  border: 2px solid #ffffff;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  margin-top: 20px;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  box-sizing: border-box;
  transition-delay: 0.5s;
}

.Casebutton.show {
  transform: translateY(0);
  opacity: 1;
}

.CaseBTN:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #ffffff;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
}
.CaseBTN:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.CaseBTN {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  padding-top: 3px;
  font-weight: 600;
  font-size: 16px;
  box-sizing: border-box;
}
.CaseBTN:hover {
  color: #000000;
}
.CaseBTN::selection {
  background-color: rgb(0, 0, 0);
}

.CaseContent_right {
  height: 600px;
  width: 100%;
}

.CaseContent_body {
  height: 600px;
  width: 100%;
  
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  transition-delay: 0.5s;
}
.CaseContent_body.show {
  transform: translateY(0);
  opacity: 1;
}
.CaseContent_text {
  display: flex;
  flex-flow: column;
  border-bottom: 1px solid #c5c5c5;
  height: 100px;
  width: 100%;
  padding-top: 35px;
  padding-bottom: 35px;
  margin-bottom: 30px;
  font-weight: 400;
  box-sizing: border-box;
}

.CaseContent_front {
  display: flex;
  width: 100%;
  font-weight: 400;
  height: 30px;
  color: #fff;
  width: 300px;
}

.CaseContent_end {
  display: flex;
  font-weight: 400;
  height: 30px;
  color: #dbdbdb;
  width: 300px;
}

.newsLinkBox1 {
  position: relative;
  width: 100%;
  z-index: 10;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  height: 600px;
}
.news_body_in1 {
  position: relative;
  margin-top: 20px;
  box-sizing: border-box;
}

.news_body1 {
  position: relative;
  height: 30px;
  width: 500px;
  padding-left: 20px;
  border-bottom: 1px solid #ffffff;
  vertical-align: top;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.news_body1:after {
  position: absolute;
  top: 29.5px;
  left: 0px;
  content: "";
  width: 500px;
  height: 2px;
  background: #ffffff;
  /* bottom: -1px;               アンダーラインがaタグの下端から現れる */
  transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: 0.8s 0.1s ease-in-out; /*変形の時間*/
}
.news_body1:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
.newsLink1 {
  text-decoration: none;
}
.newsLinkBox__date1 {
  color: #ffffff;
  font-size: 12px;
  margin-right: 20px;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  box-sizing: border-box;
}

.newsLink1:before {
  position: absolute;
  content: "";
  top: 9px;
  left: 4px;
  background: #ffffff;
  border-radius: 50%;
  clip-path: circle(30%);
  transition: 0.8s 0.1s ease-in-out;
  width: 0.6rem;
  height: 0.6rem;
  z-index: -1;
}
.newsLink1:hover::before {
  position: absolute;
  content: "";
  top: 8px;
  left: 3px;
  background-color: #ffffff;
  clip-path: circle(100%);
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
}

.newsLinkBox__txt1 {
  color: #ffffff;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}
.colorBox {
  position: relative;
  width: 200px;
  height: 500px;
}

.scrollarea {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 1500px;
  z-index: 10;
}

.js-lottie04 {
  width: 500px;
  height: 500px;
  position: -webkit-sticky; /* safari対応 */
  position: sticky;
  top: 100px;
  left: 0; /* 横方向の閾値 */
}
.haderefarea{
  width: 100%;
  height: 1500px;
}
@media (min-width: 768px) {
  .CaseContent2 {
    display: flex;
    position: relative;
    height: 600px;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 9vw;
    padding-right: 9vw;
    z-index: 20;
    align-items: center;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .CaseContent2 {
    display: flex;
    flex-flow: column;
    position: relative;
    height: 600px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 20;
    align-items: center;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .CaseContent_head2 {
    width: 300PX;
    padding-right: 50px;
    height: 400px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .CaseContent_head2 {
    width: 80vw;
    padding-left: 9vw;
    padding-right: 9vw;
    height: 400px;
    box-sizing: border-box;
  }
}



.CaseArea_text_title2 {
  display: inline-block;
  vertical-align: top;
  color: #000000;
  width: 100%;
  font-size: 60px;
  font-weight: 400;
  transform: translateX(-20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-bottom: 0;
  transition-delay: 0.7s;
}
.CaseArea_text_title2.show {
  transform: translateX(0);
  opacity: 1;
}
.CaseArea_text_title2:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #000000;
  position: absolute;
  top: 26px;
  left: -20px;
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.CaseArea_text_sub12 {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-top: 0;
  transition-delay: 0.5s;
}

.CaseArea_text_sub12.show {
  transform: translateY(0);
  opacity: 1;
}
.Casebutton2 {
  position: relative;
  border-radius: 25px;
  border: 2px solid #000000;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  margin-top: 20px;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  box-sizing: border-box;
  transition-delay: 0.5s;
}

.Casebutton2.show {
  transform: translateY(0);
  opacity: 1;
}

.CaseBTN2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #000000;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
}
.CaseBTN2:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.CaseBTN2 {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
  padding-top: 3px;
  font-weight: 600;
  font-size: 16px;
  box-sizing: border-box;
}
.CaseBTN2:hover {
  color: #ffffff;
}
.CaseBTN2::selection {
  background-color: rgb(0, 0, 0);
}

.newsLinkBox2 {
  position: relative;
  width: 100%;
  z-index: 10;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  height: 400px;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  transition-delay: 0.5s;
}
.newsLinkBox2.show {
  transform: translateY(0);
  opacity: 1;
}

.news_body_in2 {
  position: relative;
  margin-top: 20px;
}

.news_body2 {
  position: relative;
  height: 40px;
  width: 100%;
  padding-top: 10px;
  padding-left: 20px;
  border-bottom: 1px solid #000000;
  vertical-align: top;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.news_body2:after {
  content: "";
  position: absolute;
  top: 38px;
  left: 100%;
  width: 100%;
  height: 1px;
  background: #000000;
  left: 0;
  transform: scale(0, 1);
  transition: transform 0.3s;
  transform-origin: right top;
}
.news_body2:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

.newsLink2 {
  display: flex;
  text-decoration: none;
  width: 100%;
  height:100%;
}
.newsLinkBox__date2 {
  margin-top: 3px;
  min-width: 75px;
  height: 25px;
  display: flex;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}

.newsLink2:before {
  position: absolute;
  content: "";
  background-color: #000000;
  border-radius: 50%;
  top: 18px;
  left: 3px;
  width: 0.5rem;
  height: 0.5rem;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.newsLink2:hover::before {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.newsLinkBox__txt2 {
  max-width: 800px;
  height: 25px;
  overflow: hidden;
  display: flex;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}

.ContactContent {
  display: flex;
  height: 300px;
  z-index: 20;
  width: 82vw;
  padding-left: 8vw;
  padding-right: 8vw;
  box-sizing: border-box;
}

.ContactContent_head2 {
  display: inline-block;
  width: 100%;
  height: 300px;
}

.ContactArea_text_title2 {
  display: inline-block;
  vertical-align: top;
  color: #000000;
  width: 350px;
  font-size: 60px;
  font-weight: 400;
  transform: translateX(-20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-bottom: 0;
  transition-delay: 0.7s;
}

.ContactArea_text_title2.show {
  transform: translateX(0);
  opacity: 1;
}
.ContactArea_text_title2:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #000000;
  position: absolute;
  top: 26px;
  left: -20px;
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.ContactArea_text_sub12 {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(20px);
  opacity: 0;
  transition: ease-out 0.8s;
  margin-top: 0;
  transition-delay: 0.5s;
}

.ContactArea_text_sub12.show {
  transform: translateY(0);
  opacity: 1;
}


.Casebutton3 {
  position: relative;
  border-radius: 25px;
  border: 2px solid #000000;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  z-index: 1;
  box-sizing: border-box;
  opacity: 0;
  transition: ease-out 0.8s;
  transform: translateY(20px);
  transition-delay: 0.5s;
}
.Casebutton3.show {
  transform: translateY(0);
  opacity: 1;
}
.CaseBTN3:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #000000;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
  box-sizing: border-box;
}
.CaseBTN3:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.CaseBTN3 {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
  z-index: 3;
  padding-top: 3px;
  font-weight: 600;
  font-size: 16px;
  box-sizing: border-box;
}
.CaseBTN3:hover {
  color: #ffffff;
}

/* 
          .btnarea{
            display: flex;
            width: 600px;
            height: 300px;
          } */

.footer_blk {
  background-color: rgb(0, 0, 0);
  height: 430px;
  width: 100%;
  z-index: 10;
  display: block;
  position: absolute;
  bottom: 0;
  padding: 20px;
  box-sizing: border-box;
}

.corporateimage {
  display: inline-block;
  height: 100px;
  margin-bottom: 20px;
  width: 100px;
  box-sizing: border-box;
}
.corporatlogo1 {
  height: 60px;
  width: 60px;
}
.corporatenametx {
  color: #fff;
  height: 50px;
}
.corporatetext {
  width: 100%;
}
.corporatesub {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  box-sizing: border-box;
}
.coporatetextBox1 {
  display: flex;
  flex-flow: column;
  padding-left: 10px;
  margin-right: 80px;
  box-sizing: border-box;
}
.coporatetextBoxsub1 {
  height: 50px;
  width: 150px;
  box-sizing: border-box;
}
.buttonbase {
  background-color: #fff;
  border-radius: 25px;
  width: 150px;
  height: 35px;
  z-index: -5;
  box-sizing: border-box;
}
.button3 {
  position: relative;
  border-radius: 25px;
  border: 2px solid #ffffff;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  z-index: 1;
  box-sizing: border-box;
  align-items: center;
}

.BTN3:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #000000;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
  box-sizing: border-box;
}
.BTN3:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.BTN3 {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 16px;
  padding-top: 3px;
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
  z-index: 3;
  box-sizing: border-box;
}
.BTN3:hover {
  color: #ffffff;
}
.coporatetextBox2 {
  width: 150px;
  height: 180px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
li:has(.corporatesubtx){
  margin-top: 10px;
}
.corporatesubtx {
  display: inline;
  width: 300px;
  font-size: 18px;
  color: #fff;
  height: 30px;
  text-decoration: none;
  box-sizing: border-box;
}
.corporatesubtx>a{
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}
.corporatebottom {
  height: 60px;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  line-height: 0;
  box-sizing: border-box;
}
.corporatlogo2 {
  height: 60px;
  width: 60px;
  object-fit: contain;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  #stalker{
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
}
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #stalker{
    display: none;
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #stalker{
    display: none;
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
  }
}
.inner2 {
  position: relative;
  box-sizing: border-box;
  padding-top: 80px;
  padding-bottom: 430px;
  flex: 1; 
  background-color: #000000;
  box-sizing: border-box;
}
.wrapper2 {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  direction: flex;
  flex-flow: column; 
  min-height: 100vh;
  font-family: "Roobert", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}
.newsArea{
  display: flex;
  flex-direction: column;
  height: 2000px;
  width: 100vw;
  margin-top: 50px;
  align-items: center;
  box-sizing: border-box;
  
}


@media (min-width: 768px) {
  .newsBox{
    display: flex;
    justify-content: flex-start; 
    width: 95%;
    height: 800px;
    padding: 2px;
    margin-top: 50px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media (min-width: 768px) {
  .loaded .newsBox{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsBox{
    display: flex;
    flex-direction: column;
    width: 95%;
    height:800px;
    justify-content: center;
    padding: 2px;
    margin-top: 50px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .loaded .newsBox{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsBox{
    display: flex;
    flex-direction: column;
    width: 95%;
    height: 500px;
    justify-content: center;
    padding: 2px;
    margin-top: 5px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .loaded .newsBox{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media (min-width: 768px) {
  .newsday1{
    display: flex;
    width: 150px;
    height: 20px;
    padding-right: 40px;
    color:#fff;
    box-sizing: border-box;
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsday1{
    display: none;
    width: 20%;
    height: 20px;
    padding: auto;
    color:#fff;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsday1{
    display: none;
    width: 20%;
    height: 20px;
    padding: auto;
    color:#fff;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .newsday2{
    display: none;
    width: 20%;
    height: 20px;
    padding: auto;
    color:#fff;
    box-sizing: border-box;
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsday2{
    display: flex;
    width: 20%;
    height: 20px;
    padding: auto;
    color:#fff;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsday2{
    display: flex;
    width: 20%;
    height: 20px;
    padding: auto;
    color:#fff;
    box-sizing: border-box;
  }
}


@media (min-width: 768px) {
  .newsimage2 img{
    width: 90%;
    height: auto;
    margin-right: 40px;
    box-sizing: border-box;
    object-fit: contain;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsimage2 img{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    object-fit: contain;
    
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newsimage2 img{
    width: 100%;
    height: auto;
    padding-right: 2vw;
    padding-left: 2vw;
    box-sizing: border-box;
    object-fit: contain;
  }
}

@media (min-width: 768px) {
  .news_title{
    height: 150px;
    width: 100%;
    font-size: 20px;
    color:#fff;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .news_title{
    height: 150px;
    width: 100%;
    font-size: 20px;
    color:#fff;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .news_title{
    height: 150px;
    width: 100%;
    font-size: 20px;
    color:#fff;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .newstext_block{
    display:flex;
    flex-flow: column;
    height: 400px;
    width: 300px;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newstext_block{
    display:flex;
    flex-flow: column;
    height:auto;
    width: 300px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .newstext_block{
    display:flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}


@media (min-width: 768px) {
  .contactpage{
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 50px;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}

@media (min-width: 768px) {
  .loaded .contactpage{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contactpage{
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 50px;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .loaded .contactpage{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contactpage{
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 50px;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .loaded .contactpage{
    opacity: 1;
    transform: translateY(0); /* 最終的な位置に戻す */
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}


@media (min-width: 768px) {
  .contact_from{
    display: block;
    width: 70%;
    height: 100%;
    background-color: black;
    margin: auto;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contact_from{
    display: block;
    width: 90%;
    height: 100%;
    background-color: black;
    margin: auto;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contact_from{
    display: block;
    width: 100%;
    height: 100%;
    background-color: black;
    margin: auto;
    padding-left: 3vw;
    padding-right: 3vw;;
  }
}

@media (min-width: 768px) {
  .radio-groups{
    flex: flex;
    height: auto;
    width: 100%;
    
    margin-bottom: 20px;
}
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .radio-groups{
    flex: flex;
    height: auto;
    width: 100%;
    
    margin-bottom: 20px;
}
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .radio-groups{
    flex: flex;
    height: auto;
    width: 100%;
    margin-bottom: 20px;
   
}
}
.contact_from form{
  width: 100%;
  height: 100%;
}
.form_group{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

                        

@media (min-width: 768px) {
  .label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 3px;
    
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 3px;
    
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 20px;
    
  }
}
@media (min-width: 768px) {
  .form_group label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 3px;
    
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .form_group label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 3px;
    
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .form_group label{
    display:inline;
    width: 100%;
    height: auto;
    color: white;
    margin-bottom: 20px;
    
  }
}
@media (min-width: 768px) {
  #first_name{
    width: 46%;
    height: 50px;
    background-color: #000000;
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #first_name{
    width: 100%;
    height: 50px;
    background-color: #000000;
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #first_name{
    width: 100%;
    height: 50px;
    background-color: #000000;
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 768px) {
  #last_name{
    width: 46%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #last_name{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #last_name{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}
@media (min-width: 768px) {
  #email{
    width: 46%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #email{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #email{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 768px) {
  #phone_number{
    width: 46%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #phone_number{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #phone_number{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
  }
}


@media (min-width: 768px) {
  #company_name{
    width: 46%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
   
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #company_name{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
   
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #company_name{
    width: 100%;
    height: 50px;
    background-color: #000000; 
    color:#fff;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, .2) solid;
    outline: none;
    padding: 1rem 0;
    line-height: 1.44;
   
  }
}


/* チェックされたラジオボタン内側のスタイル */
input[type="radio"]::before {
  background-color: #fff;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 14px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
}
/* チェックされたらラジオボタン内側を表示 */
input[type="radio"]:checked::before {
  opacity: 1;
}
/* デフォルトのラジオボタンのスタイル */
input[type="radio"] {
  appearance: none; /* デフォルトのスタイルを消す */
  border: 1px solid #fff;
  border-radius: 50%;
  height: 20px;
  left: 0px; /* ラジオボタンとラベルの余白 */
  top: 3px;
  margin: 0;
  position: relative;
  width: 20px;
}
.form_group textarea{
  width: 100%;
  height: 100px;
  background-color: #000000;
  color:#fff;
  border: none;
  border-bottom: 1px rgba(255, 255, 255, .2) solid;
	outline: none;
}

.buttonbase4 {
  display: inline-block;
  background-color: black;
  border-radius: 25px;
  width: 150px;
  height: 35px;
  z-index: -5;
  box-sizing: border-box;
}
.button4 {
  display: inline-block;
  position: relative;
  border-radius: 25px;
  border: 2px solid #ffffff;
  width: 150px;
  height: 35px;
  text-align: center;
  padding: 4px;
  z-index: 1;
  box-sizing: border-box;
  align-items: center;
  
}
.button4:after {
  display: inline-block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: white;
  border-radius: 25px;
  clip-path: circle(0 at 15px 35px);
  overflow: hidden;
  transition: 0.8s 0.1s ease-in-out;
  z-index: -1;
  box-sizing: border-box;
}
.button4:hover:after {
  clip-path: circle(500px at 5px 5px);
}
.BTN4 {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 16px;
  padding-top: 3px;
  color: white;
  text-decoration: none;
  transition: 0.5s;
  z-index: 3;
  box-sizing: border-box;
  background-color: transparent;
  border:none;
}
.BTN4:hover {
  color: black;
}
@media (min-width: 768px) {
  .toptext1{
    display: flex;
    position: relative;
    color: #fff;
    width: 100%;
    height: 80px;
    padding-left: 13vw;
    z-index: 10;
    align-items: center;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext1{
    display: flex;
    position: relative;
    color: #fff;
    width: 100%;
    height: 80px;
    z-index: 10;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext1{
    display: flex;
    position: relative;
    color: #fff;
    max-width: 100vw;
    max-height: 80px;
    z-index: 10;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .toptext2{
    display: flex;
    position: relative;
    color: #fff;
    width: 100%;
    height: 80px;
    z-index: 10;
    align-items: center;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext2{
    display: flex;
    position: relative;
    color: #fff;
    width: 100%;
    height: 80px;
    z-index: 10;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .toptext2{
    display: flex;
    position: relative;
    color: #fff;
    max-width: 100vw;
    height: 150px;
    z-index: 10;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) {
  .contactmaintext{
    color: #fff;
    font-size: 54px;
    font-weight: 500;
    max-width: 100vw;
    height: 100%;
    
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contactmaintext{
    color: #fff;
    font-size: 46px;
    font-weight: 500;
    max-width: 100vw;
    height: 100%;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .contactmaintext{
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    max-width: 100vw;
    height: 100%;
  }
}
.contacttx_1{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_1.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.5s;
}
.contacttx_2{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_2.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.6s;
}
.contacttx_3{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_3.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.7s;
}
.contacttx_4{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_4.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.8s;
}
.contacttx_5{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_5.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.9s;
}
.contacttx_6{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_6.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.0s;
}
.contacttx_7{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下に20pxずらしておく */
  
}
.contacttx_7.show {
  opacity: 1;
  transform: translateY(0); /* 最終的な位置に戻す */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 1.1s;
}

@media (min-width: 768px) {
  #stalker1{
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
}
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #stalker1{
    display: none;
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
  }
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  #stalker1{
    display: none;
    pointer-events: none;
    position: fixed;
    top: -8px;     
    left: -8px;    
    width: 16px;   
    height: 16px;  
    background: rgba(255, 255, 255, 0.8); /* アルファ値を追加 */
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
  }
}
@media (min-width: 768px) {
  .l_container-sm{
    padding: 5vw 5vw;

  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .l_container-sm{
    padding: 5vw 5vw;

  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .l_container-sm{
    padding: 5vw 5vw;

  }
}



@media (min-width: 768px) {
  .single_main_thumb{
    width: 100%;
    height: auto;

}
}
@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_thumb{
    width: 100%;
    height: auto;

}
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
    .single_main_thumb{
      width: 100%;
      height: auto;

   }
}
@media (min-width: 768px) {
  .single_main_content{
    width: 100%;
    height: auto;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content{
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content{
    width: 100%;
    height: auto;
    color: #fff;
  }
}

@media (min-width: 768px) {
  .single_main_content>div{
    color: #fff;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content>div{
    color: #fff;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content>div{
    color: #fff;
  }
}
@media (min-width: 768px) {
  .single_main_content>h1{
    color: #fff;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content>h1{
    color: #fff;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .single_main_content>h1{
    color: #fff;
  }
}


#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* 初期状態は透明 */
  pointer-events: none;
  z-index: 9999;
  transition: background-color 1s ease;
}
/* ボタンのスタイル */
#navigate-btn {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .servicetopareabase{
    display: inline-block;
    width: 100%;
    height: 300px;
    padding-left: 10vw;
    padding-right: 10vw;
    box-sizing: border-box;
    text-align:center;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareabase{
    display: inline-block;
    width: 100%;
    height: auto;
    padding-left: 10vw;
    padding-right: 10vw;
    box-sizing: border-box;
    text-align:center;
    justify-content:space-between;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareabase{
    display: inline-block;
    width: 100%;
    height: auto;
    padding-left: 10vw;
    padding-right: 10vw;
    box-sizing: border-box;
    text-align:center;
  }
}
@media (min-width: 768px) {
  .servicepage{
    display: inline-block;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    padding-top: 100px;
  }
  .loaded .servicepage{
    opacity: 1;
      transform: translateY(0); /* 最終的な位置に戻す */
      transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicepage{
    display: inline-block;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    padding-top: 100px;
  }
  .loaded .servicepage{
    opacity: 1;
      transform: translateY(0); /* 最終的な位置に戻す */
      transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicepage{
    display: inline-block;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(20px); /* 最終的な位置に戻す */
    padding-top: 100px;
  }
  .loaded .servicepage{
    opacity: 1;
      transform: translateY(0); /* 最終的な位置に戻す */
      transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }
}

@media (min-width: 768px) {
  .servicetoparea{
    display: flex;
    width: 100%;
    max-height:80px;
    align-items: end;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea{
    display: flex;
    width: 100%;
    max-height:80px;
    align-items: end;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea{
    display: flex;
    width: 100%;
    max-height:80px;
    align-items: end;
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .servicetoparea>h2{
    display: inline-block;
    margin: 0;
    font-size: 40px;
    padding-right: 20px;
    color: #fff;
    box-sizing: border-box;
    max-width: auto;

  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea>h2{
    display: inline-block;
    margin: 0;
    font-size: 40px;
    padding-right: 20px;
    color: #fff;
    box-sizing: border-box;
    width: 100%;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea>h2{
    display: inline-block;
    margin: 0;
    font-size: 40px;
    padding-right: 20px;
    color: #fff;
    box-sizing: border-box;
    width: 100%;
  }
}



@media (min-width: 768px) {
  .servicetoparea>span{
    display: inline-block;
    font-size: 20px;
    color: #fff;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea>span{
    display: inline-block;
    font-size: 20px;
    color: #fff;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetoparea>span{
    display: inline-block;
    font-size: 20px;
    color: #fff;
  }
}


@media (min-width: 768px) {
  .servicetopareaBOX{
    display: flex;
    margin-top: 50px;
    max-width: 100%;
    height: 50%;
    justify-content:space-between;
    box-sizing: border-box;
    
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX{
    display: flex;
    margin-top: 10px;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX{
    display: flex;
    margin-top: 10px;
    max-width: 100%;
    height: 500px;
    flex-direction:column;
    justify-content:space-between;
    box-sizing: border-box;
    align-items:center;
  }
}

@media (min-width: 768px) {
  .servicetopareaBOX_mini{
    display: flex;
    width: 100%;
    height: 150px;
    background-color: #fff;
    border-radius: 10px;
    margin-right: 5px;
    margin-left: 5px;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX_mini{
    display: flex;
    width: 100%;
    height: 150px;
    background-color: #fff;
    border-radius: 10px;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX_mini{
    display: flex;
    width: 100%;
    height: 150px;
    background-color: #fff;
    border-radius: 10px;
  }
}
@media (min-width: 768px) {
  .servicetopareaBOX_mini_TXBOX{
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;
    width: 100%;
    height:  100%;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX_mini_TXBOX{
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;
    width: 100%;
    height:  150px;
    
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .servicetopareaBOX_mini_TXBOX{
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;
    width: 100%;
    height:  150Px;
    
  }
}

.servicetopareaBOX_mini_TX1{
  display: inline-block;
  width: 100%;
  height:  auto;
  font-size: 16px;
  font-weight: 600;
}
.servicetopareaBOX_mini_TX2{
  display: inline-block;
  width: 100%;
  height:  auto;
  font-weight: 600;
}
.serviceinner{
  display: inline-block;
  width: 100%;
  height: auto;
  padding-right: 5vw;
  margin-top: 50px;
  margin-bottom: 50px;
  box-sizing: border-box;
}


@media (min-width: 768px) {
  .serviceinner_BOX{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 800px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceinner_BOX{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 400px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceinner_BOX{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 500px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}
.serviceinner_BOX_mini{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding-top: 50px;
}


.service_headTX2{
  display: flex;
  box-sizing: border-box;
  font-size: 36px;
  font-weight: 800;
  flex-direction: column;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
}

.service_headTX{
  width: 100%;
  height: auto;
}

.service_headTX>h2{
  display: inline-block;
  font-size: 50px;
  margin: 0;
  padding-right: 20px;
  box-sizing: border-box;
}
.service_headTX>span{
  display: inline;
  height: auto;
}


@media (min-width: 768px) {
  .service_mainTX_p{
    display: block;
    height: 500px;
    font-size: 20px;
    font-weight: 500;
    }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .service_mainTX_p{
    display: block;
    height: auto;
    font-size: 16px;
    font-weight: 500;
    }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .service_mainTX_p{
    display: block;
    height: auto;
    font-size: 16px;
    font-weight: 500;
    }
}


.service_mainTX_p>h4{
  display: block;
  font-size: 20px;
  font-weight: 500;
  }
.service_mainTX_p>span{
    display: block;
    height: 30px;
    font-size: 28px;
    font-weight: 500;
    line-height: 46px;
    text-decoration:underline;
    border-bottom: black;
    padding-bottom: 15px;
}


@media (min-width: 768px) {
  .service_mainTX{
    width: 100%;
    height: auto;
    padding: 50px;
    box-sizing: border-box;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .service_mainTX{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-size: 20px;

  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .service_mainTX{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-size: 28px;
  }
}
.service_mainTX>span{
  font-size: 44px;
  font-weight: 600 ;
  box-sizing: border-box;
  white-space: nowrap;

}
.service_mainTX>h3{
 font-size: 44px;
 font-weight: 900;
 margin: 0;
}
.serviceinner2{
  display: inline-block;
  width: 100%;
  height: auto;
  padding-left: 5vw;
  margin-top: 50px;
  margin-bottom: 50px;
  box-sizing: border-box;
  
}

@media (min-width: 768px) {
  .serviceinner_BOX2{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 1000px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

@media (min-width: 480px) and (max-width: 767px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceinner_BOX2{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 1000px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .serviceinner_BOX2{
    display: inline-block;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 100%;
    height: 1000px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
}
.service_mainTX_BOX{
  display: flex;
  justify-content:space-between;
  margin-top: 50px;
}
.service_mainTX_BOX>span{
  display: block;
}
.service_HOW{
  display: flex;
  width: 400px;
  height: 150px;
  background-color: #e3e3e3ef;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
}
.service_HOW_mini{
  display:block;
  text-align:center;
}
.service_HOW_mini>p{
  display:block;
  text-align:center;
  height: 20px;
  margin: 0;
}
.Service_Box_main{
  padding: 50px;
  text-align: center;
}
.Service_Box_main > span{
  display: inline-block;
  font-size: 50px;
  font-weight: 500;
  width: 100%;
  margin-bottom: 80px;
}
.Service_Box_main_flex{
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
  padding-left: 50px;
  margin-bottom: 30px;
 
}
.flexBox{
  display: flex;
  height: 200px;
  width: 400px;
  background-color: #dbdbdb;
  border-radius: 50px;
  margin: 0;
  flex-direction: column;
  justify-content: center;
}
.flexBox>p{
  margin:0 auto;
  font-size: 20px;
  font-weight: 500;
}
.sarviseLast{
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 30px;
}
.service_headTX > span{
   display: inline-block;
   font-size: 30px;
   font-weight: 800;
}