html {
  overflow-x: hidden;
}

body {
  font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  /* scroll-behavior: smooth; */
  height: 100%;
}

.header {
  display: block;
  padding: 30px 0;
  position: fixed;
  top: 0;
  transition: 0.2s;
  width: 100%;
  z-index: 100;
}

.header.add_color {
  background-color: rgb(10 67 102 / 0.8);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 94%;
}

.header_logo {
  width: 139px;
}

.header_logo a {
  display: flex;
}

.header_btn {
  position: relative;
  height: 20px;
  width: 46px;
  z-index: 1000;
}

.header_btn span {
  border-top: 3px solid #fff;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
  height: 3px;
  width: 100%;
}

.header_btn span:last-of-type {
  top: unset;
  bottom: 0;
}

.header_btn.is_active span {
  bottom: 0;
  transform: rotate(45deg);
}

.header_btn.is_active span:last-of-type {
  top: 0;
  transform: rotate(-45deg);
}

.header_nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  width: 100%;
  z-index: 0;
}

.header_nav.is_active {
  background-color: rgb(19 39 53 / 0.8);
  backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}

.header_nav_wrap {
  background-color: #6a7d91;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  max-width: 532px;
  margin: 0 0 0 auto;
  padding: 4% 0;
  height: 100%;
  width: 100%;
}

.header_nav_inner {
  margin: 0 auto;
  overflow-x: hidden;
  width: 80%;
}

.header_nav_items {
  margin: 0 0 18%;
}

.header_nav_item {
  margin: 0 0 10%;
}

.header_nav_item a {
  display: block;
  line-height: 1.6em;
  padding: 0 0 3%;
  position: relative;
  text-decoration: none;
  transition: 0.2s;
}

.header_nav_items > li:nth-of-type(1) a {
  width: 10%;
}

.header_nav_items > li:nth-of-type(2) a {
  width: 21%;
}

.header_nav_items > li:nth-of-type(3) a {
  width: 23.6%;
}

.header_nav_items > li:nth-of-type(4) a {
  width: 14%;
}

.header_nav_items > li:nth-of-type(5) a {
  width: 67%;
}

.header_nav_items > li:nth-of-type(6) a {
  width: 72%;
}

.header_nav_item a::after {
  border-bottom: 1px solid #fff;
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-102%);
  transition: 0.2s;
  height: 1px;
  width: 100%;
}

.header_nav_item.is_active a::after {
  transform: translateX(0);
}
.header_nav_item a:hover::after {
  transform: translateX(0);
}

.header_lists > li:not(:last-of-type) {
  margin: 0 0 4%;
}

.header_list a {
  display: block;
  line-height: 1.6em;
  text-decoration: none;
  transition: 0.6s;
}

.header_lists > li:nth-of-type(1) a {
  width: 13%;
}

.header_lists > li:nth-of-type(2) a {
  width: 32%;
}

.header_lists > li:nth-of-type(3) a {
  width: 19%;
}

.header_list a:hover {
  border-bottom: 1px solid #fff;
  padding: 0 0 1%;
}

.loading {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99999;
}

.loading.noDisplay {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.loading_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.loading_logo {
  transition: 1.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
  width: 17.5%;
}

.loading_logo.is_active {
  opacity: 1;
  visibility: visible;
}

.floating_btn {
  display: block;
  position: fixed;
  bottom: 5%;
  left: 0;
  transform: translateX(-100%);
  transition: 0.6s;
  width: 25.44%;
  z-index: 100;
}

.floating_btn.is_active {
  transform: translateX(0);
}

.floating_btn img {
  border-radius: 0 15px 15px 0;
}

.mv {
  background-image: url('../img/mv_bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  transition: 0.4s;
}

.mv_cover {
  /* background: linear-gradient(180deg, transparent 0%, rgb(10 67 102 / 40%) 80%); */
  background: linear-gradient(180deg, transparent 0%, #263f4c 100%);
  padding: 0 0 140vh;
  position: relative;
  transition: 1s;
}

.mv_inner {
  display: flex;
  justify-content: space-between;
  padding: 0 3.4% 0 7%;
  opacity: 1;
  visibility: visible;
  transition: 0.4s;
}

.mv_inner.noDisplay {
  opacity: 0;
  visibility: hidden;
}

.mv_bg02 {
  background-image: url('../img/mv_bg03.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center bottom;
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  height: 100%;
  width: 100vw;
}

.mv_bg02.change_bg {
  opacity: 1;
  visibility: visible;
}

.mv_bg02.flowing {
  /* background-size: 130vw; */
  background-size: 125vw;
  background-position: center 100.04%;
  background-attachment: unset;
  transition: none;
  height: 100%;
  width: 100vw;
}

.mv_item.scroll-reset {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
  transform: none !important;
}

.mv_titleWrap {
  position: relative;
  width: 50%;
}

.mv_title {
  padding: 50vh 0 0;
  position: sticky;
  top: 0;
}

.mv_item {
  padding: 120vh 0 0;
  width: 40.2%;
}

.mv_item_head {
  margin: 0 0 6%;
  width: 20%;
}

.mv_item_text {
  width: 100%;
}

.fadeInUp {
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
}

.fadeInUp.is_active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.blur_fadeIn {
  filter: blur(20px);
  opacity: 0;
}

.blur_fadeIn.is_active {
  animation: blurAnimation 1s linear forwards;
  opacity: 1;
}

@keyframes blurAnimation {
  100% {
    filter: blur(0);
  }
}

.content {
  background-color: #9ea9bf;
}

.content_wrap {
  background-image: url('../img/content_bg.jpg');
  background-size: cover;
  background-position: center top;
}

.content_inner {
  margin: 0 auto;
  max-width: 1700px;
  padding: 14% 0 20%;
  width: 90%;
}

.content_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
}

.content_title {
  width: 20%;
}

.content_head_text {
  width: 52.4%;
}

.content_items {
  position: relative;
}

.content_items_inner {
  padding: 6% 0;
  width: 90%;
}

.content_items_inner.swiper {
  position: unset;
}

.content_item {
  background: linear-gradient(90deg, rgba(183, 191, 205, .8) 0%, rgba(245, 250, 248, .8) 100%);
  border: 1px solid #fff;
  box-shadow: 30px 30px 50px #00000030;
  border-radius: 40px;
  box-sizing: border-box;
  padding: 2.4%;
  pointer-events: none;
  transform: scale(0.86) !important;
  transition: 0.2s;
  opacity: 0.8;
}

.content_item.swiper-slide-active {
  border: 1px solid #fff;
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) !important;
}

.content_item_img {
  margin: 0 0 8%;
}

.content_item_title {
  margin: 0 auto 1%;
  text-align: center;
}

.content_item_title01 {
  width: 68%;
}

.content_item_title02 {
  width: 47%;
}

.content_item_title03 {
  width: 37%;
}

.content_item_name {
  margin: 0 auto 5%;
  text-align: center;
}

.content_item_name01 {
  width: 50%;
}

.content_item_name02 {
  width: 42%;
}

.content_item_name03 {
  width: 61.2%;
}

.content_item_control {
  margin: 0 0 2%;
}

.content_item_control input {
  width: 100%;
}

.content_item_control input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 10px;
  height: 2px;
  background: #fff;
}

.content_item_control input[type='range']::-webkit-slider-track {
  background: #fff;
  height: 2px;
  border-radius: 10px;
}

.content_item_control input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background-color: #6a7d91;
  border-radius: 50%;
  border: none;
  transition: 0.2s ease-in-out;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -4px;
}

/* Firefox用のスタイル */
.content_item_control input[type='range']::-moz-range-track {
  background: #fff;
  height: 2px;
  border-radius: 10px;
  border: none;
}

.content_item_control input[type='range']::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background-color: #6a7d91;
  border-radius: 50%;
  border: none;
  transition: 0.2s ease-in-out;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -4px;
}

/* 再生済み部分のスタイル（Webkit） */
.content_item_control input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #6a7d91 0%, #6a7d91 var(--progress, 0%), #fff var(--progress, 0%), #fff 100%);
  height: 2px;
  border-radius: 10px;
}

.content_item_time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content_item_time p {
  font-size: 12px;
  color: #6a7d91;
  margin: 1% 0 0;
  text-align: center;
}

.content_item_buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .content_item_buttons button:first-of-type {
  transform: rotate(180deg);
} */

.content_item_button.btn_start {
  box-shadow: 6px 6px 30px #00000030;
  border-radius: 50px;
  width: 30%;
}

.content_item_button .audio_icon {
  display: none;
}

.content_item_button .audio_icon.is_active {
  display: block;
}

.content_items_inner .swiper-button-next:after,
.content_items_inner .swiper-button-prev:after {
  content: unset;
}

.content_items_inner .swiper-button-prev,
.content_items_inner .swiper-button-next {
  background-image: url('../img/content_item_select.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: '';
  height: 58px;
  width: 50px;
}

.content_items_inner .swiper-button-prev {
  left: 0;
  transform: rotate(180deg);
}

.content_items_inner .swiper-button-next {
  right: 0;
}

.features {
  background-image: url('../img/features_bg.jpg');
  background-size: cover;
  background-position: center top;
  background-color: #fff;
  padding: 0 0 6%;
}

.features_inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 11% 0;
  width: 90%;
}

.features_items {
  width: 46%;
}

.features_title {
  margin: 0 0 6%;
  width: 20.725%;
}

.title_fadeIn svg g > path {
  opacity: 0;
  transition: 0.2s;
  transform: translateY(-30%);
}

.title_fadeIn svg g > path:nth-of-type(1) {
  transition-delay: 0.02s;
}

.title_fadeIn svg g > path:nth-of-type(2) {
  transition-delay: 0.04s;
}

.title_fadeIn svg g > path:nth-of-type(3) {
  transition-delay: 0.06s;
}

.title_fadeIn svg g > path:nth-of-type(4) {
  transition-delay: 0.08s;
}

.title_fadeIn svg g > path:nth-of-type(5) {
  transition-delay: 0.1s;
}

.title_fadeIn svg g > path:nth-of-type(6) {
  transition-delay: 0.12s;
}

.title_fadeIn svg g > path:nth-of-type(7) {
  transition-delay: 0.14s;
}

.title_fadeIn svg g > path:nth-of-type(8) {
  transition-delay: 0.16s;
}

.title_fadeIn {
  filter: none;
}

.title_fadeIn.is_active {
  animation: none;
}

.title_fadeIn.is_active svg g > path {
  opacity: 1;
  transform: translateY(0);
}

.features_head {
  line-height: 1.8em;
  margin: 0 0 6%;
  width: 72%;
}

.text_fadeIn {
  filter: none;
}

.text_fadeIn.is_active {
  animation: none;
}

.text_fadeIn svg g > path {
  display: inline-block;
  opacity: 0;
  transition: 0.2s;
  transform: translateY(-10%);
}

.text_fadeIn svg g > path:nth-of-type(1) {
  transition-delay: 0.02s;
}

.text_fadeIn svg g > path:nth-of-type(2) {
  transition-delay: 0.04s;
}

.text_fadeIn svg g > path:nth-of-type(3) {
  transition-delay: 0.06s;
}

.text_fadeIn svg g > path:nth-of-type(4) {
  transition-delay: 0.08s;
}

.text_fadeIn svg g > path:nth-of-type(5) {
  transition-delay: 0.1s;
}

.text_fadeIn svg g > path:nth-of-type(6) {
  transition-delay: 0.12s;
}

.text_fadeIn svg g > path:nth-of-type(7) {
  transition-delay: 0.14s;
}

.text_fadeIn svg g > path:nth-of-type(8) {
  transition-delay: 0.16s;
}

.text_fadeIn svg g > path:nth-of-type(9) {
  transition-delay: 0.18s;
}

.text_fadeIn svg g > path:nth-of-type(10) {
  transition-delay: 0.2s;
}

.text_fadeIn svg g > path:nth-of-type(11) {
  transition-delay: 0.22s;
}

.text_fadeIn svg g > path:nth-of-type(12) {
  transition-delay: 0.24s;
}

.text_fadeIn svg g > path:nth-of-type(13) {
  transition-delay: 0.26s;
}

.text_fadeIn svg g > path:nth-of-type(14) {
  transition-delay: 0.28s;
}

.text_fadeIn svg g > path:nth-of-type(15) {
  transition-delay: 0.3s;
}

.text_fadeIn svg g > path:nth-of-type(16) {
  transition-delay: 0.32s;
}

.text_fadeIn svg g > path:nth-of-type(17) {
  transition-delay: 0.34s;
}

.text_fadeIn svg g > path:nth-of-type(18) {
  transition-delay: 0.36s;
}

.text_fadeIn svg g > path:nth-of-type(19) {
  transition-delay: 0.38s;
}

.text_fadeIn svg g > path:nth-of-type(20) {
  transition-delay: 0.4s;
}

.text_fadeIn svg g > path:nth-of-type(21) {
  transition-delay: 0.42s;
}

.text_fadeIn svg g > path:nth-of-type(22) {
  transition-delay: 0.44s;
}

.text_fadeIn svg g > path:nth-of-type(23) {
  transition-delay: 0.46s;
}

.text_fadeIn svg g > path:nth-of-type(24) {
  transition-delay: 0.48s;
}

.text_fadeIn.is_active svg g > path {
  opacity: 1;
  transform: translateY(0);
}

.features_text {
  color: #fff;
  font-size: 24px;
  line-height: 2em;
  letter-spacing: 6px;
}

.point {
  background-color: #fff;
  padding: 8% 0 0;
}

.point01 {
  background-image: url('../img/point01_bg.jpg');
  background-size: contain;
  background-position: left top;
  margin: 0 0 3.2%;
}

.point02 {
  background-image: url('../img/point02_bg.jpg');
  background-size: contain;
  background-position: right top;
  margin: 0 0 6%;
}

.point_inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 10% 0 3%;
  width: 90%;
}

.point02 .point_inner {
  padding: 25.4% 0 5%;
}

.point_item {
  width: 100%;
}

.point_item.point_right {
  margin: 0 0 0 auto;
}

.point_item_title {
  margin: 0 0 2%;
  width: 7.4%;
}

.point_item.point_right .point_item_title {
  margin: 0 0 2% auto;
}

.point_item_head {
  line-height: 1.8em;
  margin: 0 0 3.4% auto;
  width: 39%;
}

.point02 .point_item_head {
  line-height: 1.8em;
  margin: 0 auto 3.4% 0;
  width: 39%;
}

.point_item_text {
  line-height: 2em;
}

.point_item.point_right .point_item_head,
.point_item.point_right .point_item_text {
  text-align: right;
}

.point01 .point_item_text {
  margin: 0 0 0 auto;
  width: 53.867%;
}

.point02 .point_item_text {
  margin: 0 auto 0 0;
  width: 50.534%;
}

.product {
  background-color: #fff;
}

.product01 {
  background-image: url('../img/product01_bg.jpg');
  background-size: cover;
  background-position: center top;
  display: block;
  text-decoration: none;
  margin: 0 0 1%;
  width: 100%;
}

.product02 {
  background-image: url('../img/product02_bg.jpg');
  background-size: cover;
  background-position: center top;
  display: block;
  text-decoration: none;
  margin: 0 0 1%;
  width: 100%;
}

.product_inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18% 0;
  width: 90%;
}

.product_item_title {
  margin: 0 0 2%;
  width: 10.8%;
}

.product_item.product_right .product_item_title {
  margin: 0 0 2% auto;
}

.product_item_head {
  margin: 0 0 1.6%;
  width: 33.334%;
}

.product_item_text {
  margin: 0 0 3.4%;
  width: 19%;
}

.product02 .product_item_head {
  margin: 0 0 1.6% auto;
}

.product02 .product_item_text {
  margin: 0 0 3.4% auto;
}

.product_item_button {
  border: 2px solid #fff;
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
  width: 20.467%;
}

.product_item_button.btn_blue:hover {
  border: 2px solid #647d92;
}

.product_item_button.btn_orange:hover {
  border: 2px solid #d3c39d;
}

.product_item_button:before {
  content: '';
  -webkit-transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
}

.product_item_button.btn_blue:before {
  background-color: #647d92;
}

.product_item_button.btn_orange:before {
  background-color: #d3c39d;
}

.product_item_button:hover:before {
  left: 0;
}

.product_item_button svg {
  position: relative;
  z-index: 10;
}

.product_item_button svg .cls-4.arrow {
  transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform: translateX(0);
}

.product_item_button:hover svg .cls-4.arrow {
  transform: translateX(16%);
}

.product_item_button svg .cls-6.arrow {
  transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform: translateX(0);
}

.product_item_button:hover svg .cls-6.arrow {
  transform: translateX(-16%);
}

.product_item.product_right .product_item_button {
  margin: 0 0 0 auto;
}

.product01_modal {
  background-color: #ffffff60;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.product01_modal.is_active {
  opacity: 1;
  visibility: visible;
}

.product01_modal_inner {
  background-color: #936f1ca1;
  backdrop-filter: blur(10px);
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.6s;
  transition: 0.6s;
  transform: translateX(-50%);
  width: 88%;
}

.product01_modal.is_active .product01_modal_inner {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.product_modal_close {
  position: absolute;
  height: 60px;
  width: 60px;
}

.product01_modal_close {
  top: 3%;
  right: 1.4%;
}

.product02_modal_close {
  position: absolute;
  top: 3%;
  left: 1.4%;
}

.product_modal_close::before {
  border-top: 1px solid #fff;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: rotate(45deg);
  height: 1px;
  width: inherit;
}

.product_modal_close::after {
  border-top: 1px solid #fff;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: rotate(-45deg);
  height: 1px;
  width: inherit;
}

.product_modal_close:hover::before {
  animation: product_modal_close_before 1s;
  transition-delay: 0.2s;
}

@keyframes product_modal_close_before {
  0% {
    transform: rotate(45deg);
  }
  50% {
    bottom: 20%;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(-45deg);
  }
}

.product_modal_close:hover::after {
  animation: product_modal_close_after 1s;
}

@keyframes product_modal_close_after {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    top: 20%;
    transform: rotate(0);
  }
  100% {
    top: 0;
    transform: rotate(45deg);
  }
}

.product01_modal_contents {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: 0 6% 0 auto;
  padding: 8% 0 4%;
  width: 80%;
}

.product01_modal_img {
  position: relative;
  width: 76%;
}

.product_modal_buttons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: absolute;
  bottom: 6%;
  left: 0;
  width: 58%;
}

.product_modal_button {
  margin: 0 0 2%;
  opacity: 1;
  transition: 0.2s;
  width: 48%;
}

.product_modal_button .cls-13,
.product_modal_button .cls-15 {
  transition: 0.2s;
}

.product_modal_button:hover .cls-13 {
  fill: #936f1ca1 !important;
}

.product_modal_button:hover .cls-15 {
  fill: #002642a1 !important;
}

.product01_modal_items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
}

.product01_modal_item_head01 {
  margin: 0 auto 6%;
  width: 44%;
}

.product01_modal_item_head02 {
  margin: 0 auto 6%;
  width: 48%;
}

.product01_modal_item_head03 {
  margin: 0 auto 6%;
  width: 50%;
}

.product01_modal_item_scale {
  margin: 0 auto 4%;
  position: relative;
  width: 92%;
}

.product01_modal_item_bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  overflow-x: hidden;
  width: 100%;
}

.product01_modal_item_bar::before {
  background-image: url('../img/product_modal_list_dot.svg');
  background-size: 100%;
  background-position: center;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: inherit;
  width: 9px;
}

.product01_modal_item_bar01 {
  right: 33%;
  width: 56%;
}

.product01_modal_item_bar02 {
  right: 40%;
  width: 46%;
}

.product01_modal_item_bar03 {
  right: 43%;
  width: 43%;
}

.product01_modal_item_barLine {
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateX(100%);
  transition-delay: 1s;
  transition-duration: 0.8s;
}

.product01_modal.is_active .product01_modal_item_barLine {
  transform: translateX(0);
}

.product02_modal {
  background-color: #ffffff60;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.product02_modal.is_active {
  opacity: 1;
  visibility: visible;
}

.product02_modal_inner {
  background-color: #002642a1;
  backdrop-filter: blur(10px);
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.6s;
  transition: 0.6s;
  transform: translateX(50%);
  margin: 0 0 0 auto;
  width: 88%;
}

.product02_modal.is_active .product02_modal_inner {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.product02_modal_contents {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0 6%;
  padding: 8% 0 4%;
  width: 80%;
}

.product02_modal_img {
  position: relative;
  width: 76%;
}

.product02_modal_items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
}

.product02_modal_item_head01 {
  margin: 0 auto 6%;
  width: 44%;
}

.product02_modal_item_head02 {
  margin: 0 auto 6%;
  width: 48%;
}

.product02_modal_item_head03 {
  margin: 0 auto 6%;
  width: 50%;
}

.product02_modal_item_scale {
  margin: 0 auto 4%;
  position: relative;
  width: 92%;
}

.product02_modal_item_bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  overflow-x: hidden;
  width: 100%;
}

.product02_modal_item_bar::before {
  background-image: url('../img/product_modal_list_dot.svg');
  background-size: 100%;
  background-position: center;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: inherit;
  width: 9px;
}

.product02_modal_item_bar01 {
  right: 38%;
  width: 53%;
}

.product02_modal_item_bar02 {
  right: 8%;
  width: 44%;
}

.product02_modal_item_bar03 {
  right: 10%;
  width: 36%;
}

.product02_modal_item_barLine {
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateX(100%);
  transition-delay: 1s;
  transition-duration: 0.8s;
}

.product02_modal.is_active .product02_modal_item_barLine {
  transform: translateX(0);
}

.footer {
  background-color: #fff;
  padding: 3.4% 0 1.4%;
}

.footer_head {
  max-width: 580px;
  margin: 0 auto 4%;
  text-align: center;
  width: 92%;
}

.footer_logo {
  display: block;
  max-width: 195px;
  margin: 0 auto 2%;
  width: 100%;
}

.footer_links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3%;
  margin: 0 auto 2%;
  max-width: 500px;
  width: 92%;
}

.footer_links > li:nth-of-type(1) {
  width: 15.2%;
}

.footer_links > li:nth-of-type(2) {
  width: 40%;
}

.footer_links > li:nth-of-type(3) {
  width: 23.6%;
}

.footer_link a {
  text-decoration: none;
}

.footer_copy {
  max-width: 270px;
  margin: 0 auto;
  text-align: center;
  width: 92%;
}

.is_pc {
  display: block;
}

.is_sp {
  display: none;
}

@media screen and (max-width: 1400px) {
  .header {
    padding: 2.142857vw 0;
  }

  .header_logo {
    width: 9.928571vw;
  }

  .header_btn {
    height: 1.428571vw;
    width: 3.285714vw;
  }

  .header_btn span {
    border-top: 0.214286vw solid #fff;
    height: 0.214286vw;
  }

  .header_nav.is_active {
    backdrop-filter: blur(0.714286vw);
  }

  .header_nav_wrap {
    max-width: 38vw;
  }

  .header_nav_item a {
    font-size: 1.714286vw;
  }

  .header_nav_item.is_active a,
  .header_nav_item a:hover {
    border-bottom: 0.071429vw solid #fff;
  }

  .header_list a {
    font-size: 0.857143vw;
  }

  .header_list a:hover {
    border-bottom: 0.071429vw solid #fff;
  }

  .mv_title {
    padding: 50vh 0 0;
  }

  .mv_item {
    padding: 120vh 0 0;
  }

  .floating_btn img {
    border-radius: 0 1.071429vw 1.071429vw 0;
  }

  .blur_fadeIn {
    filter: blur(1.428571vw);
  }

  .content_inner {
    max-width: 121.428571vw;
  }

  .content_item {
    border: 0.071429vw solid #fff;
    box-shadow: 2.142857vw 2.142857vw 3.571429vw #00000030;
    border-radius: 2.857143vw;
  }

  .content_item.swiper-slide-active {
    border: 0.071429vw solid #fff;
  }

  .content_item_control input[type='range'] {
    border-radius: 0.714286vw;
    height: 0.142857vw;
  }

  .content_item_control input[type='range']::-webkit-slider-track {
    height: 0.142857vw;
    border-radius: 0.714286vw;
  }

  .content_item_control input[type='range']::-webkit-slider-thumb {
    height: 0.714286vw;
    width: 0.714286vw;
    box-shadow: 0.071429vw 0.071429vw 0 0 rgba(0, 0, 0, 0.2);
    margin-top: -0.285714vw;
  }

  .content_item_control input[type='range']::-moz-range-track {
    height: 0.142857vw;
    border-radius: 0.714286vw;
  }

  .content_item_control input[type='range']::-moz-range-thumb {
    height: 0.714286vw;
    width: 0.714286vw;
    box-shadow: 0.071429vw 0.071429vw 0 0 rgba(0, 0, 0, 0.2);
    margin-top: -0.285714vw;
  }

  .content_item_control input[type='range']::-webkit-slider-runnable-track {
    height: 0.142857vw;
    border-radius: 0.714286vw;
  }

  .content_item_time p {
    font-size: 0.857143vw;
  }

  .content_item_button.btn_start {
    box-shadow: 0.428571vw 0.428571vw 2.142857vw #00000030;
    border-radius: 3.571429vw;
  }

  .content_items_inner .swiper-button-prev,
  .content_items_inner .swiper-button-next {
    height: 4.142857vw;
    width: 3.571429vw;
  }

  .features_inner {
    max-width: 107.142857vw;
  }

  .features_head {
    color: #fff;
    font-size: 2.428571vw;
    line-height: 1.8em;
    letter-spacing: 0.428571vw;
    margin: 0 0 6%;
  }

  .features_text {
    font-size: 1.714286vw;
    letter-spacing: 0.428571vw;
  }

  .point01,
  .point02 {
    background-size: 56%;
  }

  .point_inner {
    max-width: 107.142857vw;
  }

  .product_inner {
    max-width: 107.142857vw;
  }

  .product_item_button {
    border: 0.142857vw solid #fff;
  }

  .product_item_button.btn_blue:hover {
    border: 0.142857vw solid #647d92;
  }

  .product_item_button.btn_orange:hover {
    border: 0.142857vw solid #d3c39d;
  }

  .footer_logo {
    max-width: 13.928571vw;
  }

  .product_modal_close {
    height: 4.285714vw;
    width: 4.285714vw;
  }

  .product01_modal_inner {
    width: 94%;
  }

  .product01_modal_contents {
    margin: 0 auto;
    width: 92%;
  }

  .product01_modal_item_bar::before,
  .product02_modal_item_bar::before {
    width: 0.642857vw;
  }

  .product02_modal_inner {
    width: 94%;
  }

  .product02_modal_contents {
    margin: 0 auto;
    width: 92%;
  }
}

@media screen and (max-width: 768px) {
  .is_pc {
    display: none;
  }

  .is_sp {
    display: block;
  }

  body {
    overflow-x: hidden;
  }

  .header {
    padding: 4% 0;
  }

  .header_logo {
    width: 20%;
  }

  .header_btn {
    height: 2.864583vw;
    width: 6.933333vw;
  }

  .header_btn span {
    border-top: 0.390625vw solid #fff;
    height: 0.390625vw;
  }

  .header_nav_wrap {
    max-width: 80%;
  }

  .header_nav_item {
    margin: 0 0 9%;
  }

  .header_nav_item a {
    font-size: 4.266667vw;
  }

  .header_list a {
    font-size: 3.2vw;
  }

  .header_nav_item.is_active a,
  .header_nav_item a:hover {
    border-bottom: 0.266667vw solid #fff;
    padding: 0 0 3%;
  }

  .header_lists > li:nth-of-type(1) a {
    width: 21%;
  }

  .header_lists > li:nth-of-type(2) a {
    width: 54%;
  }

  .header_lists > li:nth-of-type(3) a {
    width: 33%;
  }

  .mv {
    background-image: url('../img/mv_bg_sp.jpg');
    background-position: center;
  }

  .is_ios .mv {
    background-image: none !important;
    background-attachment: initial !important;
    position: relative;
  }

  .is_ios .mv::before {
    background-image: url('../img/mv_bg_sp.jpg');
    background-size: cover;
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    z-index: -1;
  }

  .mv_bg02 {
    background-image: url('../img/mv_bg03_sp.jpg');
    background-size: 317vw;
  }

  .is_ios .mv_bg02 {
    background-attachment: initial !important;
  }

  .loading_logo {
    width: 24%;
  }

  .floating_btn {
    width: 46%;
  }

  .mv_cover {
    padding: 0 0 120vh;
  }

  .mv_bg02.flowing {
    background-size: 317vw;
  }

  .mv_inner {
    flex-direction: column;
    padding: 0 3.4%;
  }

  .mv_inner.noDisplay {
    opacity: 1;
    visibility: visible;
  }

  .mv_titleWrap {
    width: 100%;
  }

  .mv_title {
    padding: 48vh 0 0;
  }

  .mv_item {
    padding: 80vh 0 0;
    margin: 0 auto;
    width: 92%;
  }

  .mv_item_head {
    margin: 0 0 6%;
    width: 23%;
  }

  .floating_btn img {
    border-radius: 0 1.6vw 1.6vw 0;
  }

  .content {
    margin: -1px 0 0;
  }

  .content_inner {
    padding: 20% 0 50%;
  }

  .content_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 auto 12%;
    width: 94%;
  }

  .content_title {
    margin: 0 0 6%;
    width: 40%;
  }

  .content_head_text {
    width: 100%;
  }

  .content_items_inner {
    padding: 6% 10%;
    width: 80%;
  }

  .content_item {
    border-radius: 5.333333vw;
    padding: 8.4%;
    margin: 0 0 5%;
  }

  .content_items_inner .swiper-button-prev,
  .content_items_inner .swiper-button-next {
    height: 8.533333vw;
    width: 7.466667vw;
  }

  .content_items_inner .swiper-button-prev {
    left: -2%;
  }

  .content_items_inner .swiper-button-next {
    right: -2%;
  }

  .content_item_time p {
    font-size: 3.2vw;
  }

  .content_item_button.btn_start {
    border-radius: 13.333333vw;
  }

  .content_item_control input[type='range'] {
    border-radius: 2.666667vw;
    height: 0.533333vw;
  }

  .content_item_control input[type='range']::-webkit-slider-track {
    border-radius: 2.666667vw;
    height: 0.533333vw;
  }

  .content_item_control input[type='range']::-webkit-slider-thumb {
    height: 2.666667vw;
    width: 2.666667vw;
    margin-top: -1.066667vw;
  }

  .content_item_control input[type='range']::-moz-range-track {
    border-radius: 2.666667vw;
    height: 0.533333vw;
  }

  .content_item_control input[type='range']::-moz-range-thumb {
    height: 2.666667vw;
    width: 2.666667vw;
    border-radius: 50%;
    margin-top: -1.066667vw;
  }

  .content_item_control input[type='range']::-webkit-slider-runnable-track {
    border-radius: 2.666667vw;
    height: 0.533333vw;
  }

  .features {
    background-image: url('../img/features_bg_sp.jpg');
    background-size: 100%;
    padding: 0 0 14%;
  }

  .features_inner {
    max-width: 100%;
    padding: 61% 0 8%;
  }

  .features_items {
    width: 100%;
  }

  .features_head {
    font-size: 4.8vw;
    letter-spacing: 1.066667vw;
    margin: 0 0 6%;
  }

  .features_text {
    font-size: 3.2vw;
    letter-spacing: 0.8vw;
    line-height: 2.4em;
  }

  .point {
    padding: 0;
  }

  .point01 {
    background-image: url('../img/point01_bg_sp.jpg');
    background-position: left top;
    margin: 0;
    padding: 0 0 3.2%;
  }

  .point02 {
    background-image: url('../img/point02_bg_sp.jpg');
    background-position: right top;
    margin: 0;
    padding: 0 0 6%;
  }

  .point01,
  .point02 {
    background-size: 84%;
    padding: 0 0 16%;
  }

  .point01 .point_inner {
    padding: 72% 0 0;
    max-width: 100%;
  }

  .point02 .point_inner {
    padding: 50% 0 0;
    max-width: 100%;
  }

  .point_item.point_right {
    margin: 0;
  }

  .point_item_title {
    margin: 0 0 4.6%;
    width: 18%;
  }

  .point_item.point_right .point_item_title {
    margin: 0 0 4.8% auto;
    width: 18%;
  }

  .point_item.point_right .point_item_head,
  .point_item.point_right .point_item_text {
    text-align: right;
  }

  .point_item_head {
    margin: 0 0 5.4% auto;
    width: 74%;
  }

  .point02 .point_item_head {
    margin: 0 auto 5.4% 0;
    width: 74%;
  }

  .point01 .point_item_text {
    margin: 0 auto;
    width: 100%;
  }

  .point02 .point_item_text {
    margin: 0 auto;
    width: 100%;
  }

  .product01 {
    background-image: url('../img/product01_bg_sp.jpg');
    margin: 0 0 1%;
  }

  .product02 {
    background-image: url('../img/product02_bg_sp.jpg');
    margin: 0;
  }

  .product_inner {
    max-width: 100%;
    width: 90%;
  }

  .product01 .product_inner {
    padding: 60% 0 5%;
  }

  .product02 .product_inner {
    padding: 10% 0 54%;
  }

  .product_item_title {
    margin: 0 0 4%;
    width: 22%;
  }

  .product_item_head {
    margin: 0 0 1.6%;
    width: 75.334%;
  }

  .product_item_text {
    margin: 0 0 5.4%;
    width: 45%;
  }

  .product_item.product_right .product_item_title {
    margin: 0 0 4% auto;
  }

  .product02 .product_item_text {
    margin: 0 0 5.4% auto;
  }

  .product_modal_buttons {
    bottom: 3%;
    width: 100%;
  }

  .product_item_button {
    border: 0.266667vw solid #fff;
    width: 50%;
  }

  .product_modal_button:hover .cls-13 {
    fill: #d3c39d !important;
  }

  .product_modal_button:hover .cls-15 {
    fill: #647d92 !important;
  }

  .product01_modal {
    background-color: transparent;
  }

  .product01_modal_inner {
    background-color: transparent;
    width: 100%;
  }

  .product01_modal_close {
    top: 2%;
    right: 2%;
    width: 8vw;
    height: 8vw;
  }

  .product01_modal_contents {
    flex-direction: column-reverse;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  .product01_modal_img {
    background-color: #d3c39d;
    display: flex;
    align-items: center;
    height: 50vh;
    width: 100%;
  }

  .product01_modal_img_inner {
    margin: 0 auto;
    padding: 0;
    position: relative;
    max-width: 470px;
    width: 78%;
  }

  .product01_modal_box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 50vh;
  }

  .product01_modal_box_inner {
    box-sizing: border-box;
    background-color: #97722f90;
    display: flex;
    justify-content: space-between;
    padding: 6%;
    position: relative;
    margin: 0 auto;
    max-width: 550px;
    width: 94%;
  }

  .product01_modal_product {
    width: 50%;
  }

  .product01_modal_items {
    width: 44%;
  }

  .product01_modal_item_bar::before,
  .product02_modal_item_bar::before {
    width: 1.066667vw;
  }

  .is_ios .product01_modal_item_bar::before,
  .is_ios .product02_modal_item_bar::before {
    content: unset;
  }

  .product02_modal {
    background-color: transparent;
  }

  .product02_modal_inner {
    background-color: transparent;
    width: 100%;
  }

  .product02_modal_close {
    top: 2%;
    right: 2%;
    left: unset;
    width: 8vw;
    height: 8vw;
  }

  .product02_modal_contents {
    flex-direction: column-reverse;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  .product02_modal_img {
    background-color: #647d92;
    display: flex;
    align-items: center;
    height: 50vh;
    width: 100%;
  }

  .product02_modal_img_inner {
    margin: 0 auto;
    padding: 0;
    position: relative;
    max-width: 470px;
    width: 78%;
  }

  .product02_modal_box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 50vh;
  }

  .product02_modal_box_inner {
    box-sizing: border-box;
    background-color: #1c3c5690;
    display: flex;
    justify-content: space-between;
    padding: 6%;
    position: relative;
    margin: 0 auto;
    max-width: 550px;
    width: 94%;
  }

  .product02_modal_product {
    width: 50%;
  }

  .product02_modal_items {
    width: 44%;
  }

  .footer {
    padding: 8% 0 4%;
  }

  .footer_head {
    font-size: 2.666667vw;
    margin: 0 auto 10%;
  }

  .footer_logo {
    max-width: 100%;
    margin: 0 auto 5%;
    width: 26%;
  }

  .footer_links {
    justify-content: space-between;
    gap: 0;
    margin: 0 auto 4%;
    width: 76%;
  }

  .footer_copy {
    max-width: 100%;
    width: 52%;
  }
}