@charset "UTF-8";
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.8;
  background-color: #0E152F;
  background-image: url(../images/bg@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
}

a[target=_blank]:not(.ic_none) {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/ic_link.svg) no-repeat right center;
}

h2 {
  font-size: 2.8rem;
  line-height: 2;
}

/* マウスストーカー */
#mouse-stalker {
  pointer-events: none;
  position: fixed;
  top: -17px;
  left: -17px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 0.1s;
  transition-timing-function: ease-out;
  z-index: 99999;
}
#mouse-stalker.is_active {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px #0FB1C6;
  top: -50px;
  left: -50px;
  width: 90px;
  height: 90px;
  transition: 0.2s;
}
#mouse-stalker.is_active::before {
  position: absolute;
  content: "CLICK";
  color: #fff;
  font-size: 1.4rem;
  text-shadow: 0 0 10px #0E152F;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* 背景アニメーション */
#star_lights {
  z-index: -1;
  mix-blend-mode: screen;
}

/* スクロールダウン */
.scrolldown {
  position: absolute;
  bottom: 20px;
  left: 50px;
}
.scrolldown span {
  position: absolute;
  left: -10px;
  bottom: 95px;
  color: #FFFFFF;
  font-size: 1.2rem;
  writing-mode: vertical-rl;
}
.scrolldown::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 80px;
  background: #FFFFFF;
  z-index: 1;
}
.scrolldown::before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0FB1C6;
  animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove {
  0% {
    bottom: 75px;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

.inner {
  margin: auto;
  width: 80vw;
  max-width: 1000px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: 1.4rem;
}

/* 下層ページのアンカーリンク ヘッダー分の余白 */
.secBasic {
  padding-top: 100px !important;
}

.arrow_bottom {
  position: relative;
  padding-right: 40px;
}
.arrow_bottom::after {
  /* 擬似要素で矢印アイコンをつくる */
  content: "";
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  /* 矢印アイコンの位置を設定 */
  position: absolute;
  top: 48%;
  right: 20px;
  transform: translateY(-50%) rotate(135deg); /* rotate(45deg)で矢印を回転（向きを変更）させる */
}

.scbox {
  /* min-height: 100vh; */
}

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: radial-gradient(#0E152F, #000);
  z-index: 9999999;
  text-align: center;
  color: #0FB1C6;
}
#splash #splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #0FB1C6;
}
#splash #splash-logo {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 5px;
}

#totop {
  position: fixed;
  bottom: 7vh;
  right: 3vw;
}

header {
  background: linear-gradient(237deg, #161945 93%, transparent 80%);
  position: fixed;
  z-index: 999;
  width: 80vw;
  right: 0;
  padding: 2rem 5rem;
  align-items: center;
}
header div.header_lang a, header div.header_contact a {
  color: #fff;
  padding: 1.2rem 2rem;
  border-radius: 5px;
  display: block;
  line-height: 1;
}
header div.header_logo {
  margin-left: 5rem;
  max-width: 278px;
}
header div.header_contact {
  margin-right: 2rem;
}
header div.header_contact a {
  background: #0fb1c6;
}
header div.header_lang {
  position: relative;
}
header div.header_lang > a {
  border: 1px solid #fff;
  cursor: pointer;
  padding-right: 40px;
}
header div.header_lang ul {
  padding-top: 10px;
  position: absolute;
  top: 24px;
  left: 0;
  height: 0;
  width: 420px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
header div.header_lang ul:hover {
  height: auto;
  cursor: pointer;
}
header div.header_lang ul li a {
  padding: 1rem;
}
header div.header_lang > a:hover + ul {
  height: auto;
  cursor: pointer;
}
header div.header_lang .acd-check {
  display: none;
}
header div.header_lang .acd-label {
  color: #fff;
  padding: 1.2rem 2rem;
  border-radius: 5px;
  display: block;
  line-height: 1;
  border: 1px solid #fff;
  cursor: pointer;
  padding-right: 40px;
}
header div.header_lang .acd-content {
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: 0.5s;
  visibility: hidden;
}
header div.header_lang .acd-check:checked + .acd-label + .acd-content {
  /* height: 420px; */
  height: auto;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}
header div.header_nav {
  margin-left: 5rem;
  /* ハンバーガーアイコンの設置スペース */
  /* ハンバーガーメニューのアイコン */
  /* アイコンがクリックされたら真ん中の線を透明にする */
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  /* メニューのデザイン*/
  /* アイコンがクリックされたらメニューを表示 */
}
header div.header_nav .drawer_hidden {
  display: none;
}
header div.header_nav .drawer_open {
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
header div.header_nav .drawer_open span,
header div.header_nav .drawer_open span:before,
header div.header_nav .drawer_open span:after {
  content: "";
  display: block;
  height: 2px;
  width: 40px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}
header div.header_nav .drawer_open span:before {
  bottom: 10px;
}
header div.header_nav .drawer_open span:after {
  top: 10px;
}
header div.header_nav #drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
header div.header_nav #drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(35deg);
}
header div.header_nav #drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-35deg);
}
header div.header_nav .nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: -1;
  background: #0E152F;
  transition: 0.5s;
  padding: 12rem 0 6rem;
  overflow: auto;
}
header div.header_nav .nav_content .inner {
  width: 80vw;
  max-width: 1000px;
}
header div.header_nav .nav_content .nav_product {
  width: 50%;
  width: calc(100% - 280px);
}

header div.header_nav .nav_content .nav_other {
  width: 280px;
}

header div.header_nav .nav_content .nav_product .flex {
  justify-content: left;
  row-gap: 0;
  column-gap: 28px;
}

header div.header_nav .nav_content .nav_product p {
  color: #fff;
  position: relative;
  margin: 0;
  margin-top: 3rem;
}
header div.header_nav .nav_content .nav_product p::before {
  content: url(../images/ic_product.svg);
  position: absolute;
  bottom: 0;
}
header div.header_nav .nav_content .nav_product dl {
  max-width: 140px;
  margin: initial;
  margin-top: 6rem;
}

header div.header_nav .nav_content .nav_product dl {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 184px;
}

header div.header_nav .nav_content .nav_product dl dt {
  transition: 0.3s;
}
header div.header_nav .nav_content .nav_product dl dd {
  color: #fff;
  border-bottom: 1px solid #495272;
  margin: initial;
  padding-bottom: 1.5rem;
  margin-top: 2rem;
  transition: 0.3s;
}
header div.header_nav .nav_content .nav_product dl:hover dt {
  transform: scale(1.1);
}
header div.header_nav .nav_content .nav_product dl:hover dd {
  color: #0FB1C6;
  border-bottom: 1px solid #0FB1C6;
}
header div.header_nav .nav_content ul {
  width: 398px;
  max-width: 100%;
  margin: 0;
}
header div.header_nav .nav_content ul li:not(.link_other) a {
  border-bottom: 1px solid #495272;
  color: #A0A6BA;
  display: block;
  line-height: 1.2;
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
  transition: 0.3s;
}
header div.header_nav .nav_content ul li:not(.link_other) a span {
  color: #fff;
  font-size: 2.6rem;
  transition: 0.3s;
}
header div.header_nav .nav_content ul li:not(.link_other) a:hover {
  color: #fff;
  border-bottom: 1px solid #0FB1C6;
}
header div.header_nav .nav_content ul li:not(.link_other) a:hover span {
  color: #0FB1C6;
}
header div.header_nav .nav_content ul .link_other {
  margin-bottom: 1rem;
}
header div.header_nav .nav_content ul .link_other a {
  color: #A0A6BA;
  border-bottom: none;
  display: inline-block;
  transition: 0.3s;
}
header div.header_nav .nav_content ul .link_other a:hover {
  color: #0FB1C6;
}
header div.header_nav #drawer_input:checked ~ .nav_content {
  left: 0; /* メニューを画面に入れる */
}

#first-view {
  margin-bottom: 20rem;
  position: relative;
  height: 100vh;
  width: 100%;
}
#first-view .first-view_bg .bg_img img {
  margin: 0;
  position: absolute;
  z-index: -1;
  opacity: 0.2;
  filter: brightness(150%);
}
#first-view .first-view_bg .bg_img::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 40%;
  left: 0;
  bottom: -147px;
  background: linear-gradient(180deg, transparent, #0d1533, transparent);
}
#first-view .first-view_bg .video {
  position: absolute;
  z-index: -10;
  bottom: -50px;
  width: 100%;
  /* filter: brightness(130%); */
}
#first-view .first-view_bg .video video {
  width: 100%;
}
#first-view .first-view_bg .video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 40%;
  left: 0;
  top: -60px;
  background: linear-gradient(180deg, transparent, #0a1742, transparent);
}
#first-view .first-view_bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  left: 0;
  bottom: -50px;
  background: linear-gradient(0deg, #0e142f, transparent);
}
#first-view .logo img {
  margin: auto;
  padding-top: 12rem;
  filter: drop-shadow(0px 0px 17px rgba(107, 159, 255, 0.4));
}
#first-view .rin {
  position: absolute;
}
#first-view .rin img {
  width: 28.90625vw;
  filter: drop-shadow(6px 8px 17px rgba(0, 107, 195, 0.4));
}

.incline {
  perspective: 400;
  -moz-perspective: 400;
  -webkit-perspective: 400;
  -o-perspective: 400;
  -ms-perspective: 400;
}
.incline .incline_inner {
  transform: rotateX(8deg);
  -moz-transform: rotateX(8deg);
  -webkit-transform: rotateX(8deg);
  -o-transform: rotateX(8deg);
  -ms-transform: rotateX(8deg);
  transform-origin: bottom left;
}

.link_bnr {
  gap: 32px;
  flex-wrap: nowrap;
  justify-content: center;
}
.link_bnr:not(:last-of-type) {
  margin-bottom: 32px;
}
.link_bnr a {
  display: block;
  box-shadow: 0 3px 13px #000000;
  transition: 0.3s;
  max-width: 300px;
}
.link_bnr a:not(.youtube) {
  border: 3px solid #0FB1C6;
  border-radius: 5px;
}
.link_bnr a.new {
  position: relative;
}
.link_bnr a.new::before {
  content: url(../images/ic_new.svg);
  position: absolute;
}
.link_bnr a:hover {
  box-shadow: 0 0 13px #0FB1C6;
  filter: drop-shadow(0px 0px 17px rgba(107, 159, 255, 0.4));
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  width: 100%;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal__content iframe {
  width: 50vw;
  height: 28.125vw;
}

.lead {
  background: url(../images/im_lead_bg.png) no-repeat center;
  background-size: 100%;
  height: 500px;
  position: relative;
  margin: 20rem 0;
}
.lead h2 {
  color: #fff;
  text-shadow: 0px 0px 26px #0fb1c6;
  filter: drop-shadow(0px 0px 17px rgba(107, 159, 255, 0.7));
  font-size: 3.3rem;
  letter-spacing: 12px;
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  margin: 0;
  width: 90%;
}

.contact {
  max-width: 242px;
  position: fixed;
  bottom: -20px;
  z-index: 99;
  transition: 0.3s;
}
.contact.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.product {
  /* background: linear-gradient(-45deg, #ABB2C6, #B4CACE, #D3C7B8, #B4CACE, #ABB2C6); */
  background-image: radial-gradient(at 80% -20%, #d5e6f3 10%, transparent 40%), radial-gradient(at 0% 70%, #b0d4f3, transparent 50%), radial-gradient(at 0% 0%, #c1ede0, transparent), radial-gradient(at 80% 40%, #dcc09d, transparent 40%), radial-gradient(at 100% 100%, #c0e3e4, transparent);
  background-size: 150% 150%;
  background-attachment: fixed;
  animation: gradient 8s ease infinite;
  display: block;
  color: #0E152F;
  overflow: hidden;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.product .inner {
  padding: 20rem 0;
}
.product .pd_ttl p {
  font-weight: bold;
  font-size: 2rem;
}
.product .pd_ttl p::before {
  content: "";
  display: block;
  background: #0a1742;
  width: 30px;
  height: 1px;
  margin: 2rem 0 1rem;
}
.product .pd_content {
  flex-wrap: nowrap;
  margin: 0 auto 108px auto;
  align-items: center;
  gap: 10rem;
}
.product .pd_content:last-of-type {
  margin-bottom: 0;
}
.product .pd_content:nth-child(2n+1) .pd_img {
  order: 2;
}
.product .pd_content:nth-child(2n+1) .pd_text {
  order: 1;
}
.product .pd_img, .product .pd_text {
  width: 50%;
}
.product .pd_img {
  max-width: 500px;
}
.product .pd_text {
  max-width: 400px;
  text-align: center;
}
.product .pd_text h3 span {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1rem;
  display: block;
}
.product .btn {
  position: relative;
  display: inline-block;
  transition: 0.3s;
  margin-top: 2rem;
  border-radius: 999px;
  z-index: 2;
}
.product .btn::before {
  content: "";
  /* display: inline-block; */
  position: absolute;
  top: 50%;
  left: -85%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background: #0FB1C6;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 2rem;
  transition: 0.3s ease-out;
  z-index: -1;
}
.product .btn::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 1px #0E152F;
  border-right: solid 1px #0E152F;
  position: absolute;
  top: 50%;
  left: -60%;
  margin-top: -4px;
  transform: rotate(45deg);
}
.product .btn:hover {
  /* background: #0FB1C6; */
}
.product .btn:hover::before {
  width: 200px;
}

footer {
  background: #0E152F;
  padding: 5rem 0;
  position: relative;
}
footer a, footer p {
  color: #fff;
  letter-spacing: initial;
  line-height: 1.8;
  text-decoration: none;
}
footer .footer_top {
  margin-bottom: 4rem;
  justify-content: flex-end;
  gap: 5rem;
}
footer .footer_bottom .flex {
  justify-content: flex-end;
  gap: 5rem;
}
footer .footer_bottom p {
  text-align: right;
  margin-top: 2rem;
}
footer #totop {
  position: fixed;
  /* bottom: 260px; */
  bottom: 50px;
  right: 3vw;
  filter: drop-shadow(0px 0px 3px #0E152F);
}

/* =============================
    トップ製品スライダー
   ============================= */
.slide-box {
  height: 100%;
  position: relative;
  display: flex;
  margin: 0 0 0 auto;
  padding: 0;
  flex-wrap: nowrap;
  width: 80vw;
}

/* スライド部分 */
.slide {
  position: relative;
  width: 65%;
  margin: 0;
  padding: 0;
  margin-right: 7rem;
  /* .slick-track {
      width: calc(600 / 1280 * 100vw) !important;
  } */
}
.slide .item {
  position: relative;
  /* height: 100%; */
  height: 68.75vh;
}
.slide .item a {
  display: block;
}
.slide .item::before {
  display: block;
  /* padding-top: 39%; */
  padding-top: 100%;
  content: "";
}
.slide .item .image {
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  /* width: 100%; */
  width: 39.0625vw;
  filter: drop-shadow(10px 8px 17px rgba(107, 159, 255, 0.4));
}
.slide .slick-slide {
  width: 46.875vw !important;
  position: absolute !important;
  left: 100px !important;
}

.slide > .slick-list > .slick-track {
  max-width: 100%;
}

.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

/* サムネイル部分 */
.slide-navigation {
  line-height: 0;
  position: relative;
  width: 20%;
  margin: 0;
  padding: 0;
  /* margin-left: 10rem; */
  margin-top: 8rem;
}
.slide-navigation::before {
  content: "製品一覧";
  color: #fff;
  position: absolute;
  top: -20px;
  font-size: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* max-height: 110px; */
  margin: 0;
  padding: 0;
  transition: 0.3s;
}
.slide-navigation .item .image::before {
  display: block;
  /* padding-top: 25%; */
  padding-top: 80%;
  content: "";
}
.slide-navigation .item .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.9;
  /* background: #000; */
  background: linear-gradient(0deg, #0E152F 27%, transparent 100%);
}
.slide-navigation .slick-track {
  /* max-width: 140px; */
  width: 10.9375vw;
}

.slick-vertical .slick-slide {
  /* max-width: 140px; */
  width: 10.9375vw !important;
  border: none !important;
}

.slide-navigation .slick-current .image::after {
  opacity: 0;
}
.slide-navigation .slick-current .image:hover {
  filter: drop-shadow(0px 0px 10px rgba(107, 159, 255, 0.7));
}

.slide-navigation .slick-current + .slick-slide .image::after {
  opacity: 0;
}
.slide-navigation .slick-current + .slick-slide .image:hover {
  filter: drop-shadow(0px 0px 10px rgba(107, 159, 255, 0.7));
}

.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
}
.slide-navigation .item .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
}

/* 矢印 */
.slick-vertical .slick-slide {
  border: 0 solid transparent;
}

.slick-arrow {
  z-index: 99;
}

.slick-prev {
  top: 25px;
  bottom: auto;
  left: 0;
  right: 0;
  margin: auto;
}

.slick-prev:before {
  content: none !important;
}

.slick-next {
  top: 53% !important;
  bottom: 5px;
  left: 0;
  right: 0 !important;
  margin: 0 auto;
}

.slick-next:before {
  content: "MORE" !important;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: inline-block;
  font-size: 1.4rem !important;
  box-shadow: 0 0 6px #fff;
  transition: 0.3s;
  padding: 2.4rem 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.product_slid {
  position: relative;
  justify-content: flex-end;
  height: 35.15625vw;
}
.product_slid .mainImage {
  position: absolute;
  width: 50%;
  height: 31.25vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.product_slid .mainImage a {
  position: absolute;
  top: calc(50% - 30px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 39.0625vw;
  height: auto;
}
.product_slid .mainImage a img {
  filter: drop-shadow(10px 8px 17px rgba(107, 159, 255, 0.4));
}
.product_slid .subImage {
  margin-right: calc(270 / 1920 * 100vw);
  margin-top: calc(40 / 1920 * 100vw);
  /* &::before {
      content: "MORE" !important;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 50%;
      width: 64px;
      height: 64px;
      display: inline-block;
      font-size: 1.4rem !important;
      box-shadow: 0 0 6px #fff;
      transition: .3s;
      padding: 2rem 1rem;
      position: absolute;
      bottom: 30px;
      right: 7.5vw;
      z-index: 1;
  } */
}
.product_slid .subImage p {
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  margin: 0;
}
.product_slid .subImage .subImage_ct {
  list-style: none;
  display: block;
  padding: 0;
  height: calc(550 / 1920 * 100vw);
  /* height: 28.90625vw; */
  overflow-y: scroll;
  --sb-track-color: #232b58;
  --sb-thumb-color: #106385;
  --sb-size: 4px;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  margin-top: 1rem;
}
.product_slid .subImage .subImage_ct::-webkit-scrollbar {
  width: var(--sb-size);
}
.product_slid .subImage .subImage_ct::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}
.product_slid .subImage .subImage_ct::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
}
.product_slid .subImage .subImage_ct li {
  transition: 0.3s;
  margin-top: -1rem;
}
.product_slid .subImage .subImage_ct li img {
  display: block;
  width: 11.71875vw;
  cursor: pointer;
}
.product_slid .subImage .subImage_ct li:hover {
  filter: drop-shadow(0px 0px 10px rgba(107, 159, 255, 0.7));
}
.product_slid .subImage .subImage_ct::after {
  content: "";
  background: linear-gradient(0deg, #0E152F 35%, transparent 100%);
  position: absolute;
  bottom: 23px;
  width: 11.71875vw;
  height: 15%;
  opacity: 0.9;
}
.product_slid .subImage .btn_more {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: inline-block;
  font-size: 1.4rem !important;
  box-shadow: 0 0 6px #fff;
  transition: 0.3s;
  padding: 2rem 1rem;
  position: absolute;
  bottom: 30px;
  /* right: 7.5vw; */
  right: calc(345 / 1920 * 100vw);
  cursor: pointer;
}
.product_slid .subImage .btn_more_pc {
  display: block;
}
.product_slid .subImage .btn_more_sp {
  display: none;
}

@media screen and (max-width: 768px) {
  body {
    background-position: center;
  }
  header {
    width: 100vw;
    width: 100%;
    background: #161945;
    justify-content: flex-end !important;
  }
  header div.header_logo {
    margin-left: 0;
    width: 200px;
  }
  header div.header_nav {
    margin-left: 2rem;
  }
  header div.header_nav .nav_content .nav_product {
    width: 100%;
    margin-bottom: 5rem;
  }
  header div.header_nav .nav_content ul {
    width: 100%;
  }
  #first-view {
    height: auto;
    margin-bottom: 10rem;
  }
  #first-view .logo img {
    padding-top: 10rem;
  }
  #first-view .rin {
    position: absolute;
    left: -20px;
    top: 210px;
    z-index: 1;
  }
  #first-view .rin img {
    width: 40vw;
  }
  #first-view .first-view_bg .video::before {
    top: -32px;
  }
  .contact {
    max-width: 192px;
    bottom: -30px;
    left: -20px;
  }
  .product_slid {
    justify-content: center;
    height: auto;
  }
  .product_slid .mainImage {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    height: auto;
    width: 77.6470588235vw;
    max-width: 500px;
  }
  .product_slid .mainImage a {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .product_slid .subImage {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-right: 0;
    margin: 4rem 2rem;
  }
  .product_slid .subImage .subImage_wrapper {
    display: flex;
    width: 82.3529411765vw;
    overflow-x: scroll;
    --sb-track-color: #232b58;
    --sb-thumb-color: #106385;
    --sb-size: 4px;
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
  .product_slid .subImage .subImage_wrapper::-webkit-scrollbar {
    height: var(--sb-size);
  }
  .product_slid .subImage .subImage_wrapper::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
  }
  .product_slid .subImage .subImage_wrapper::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
  }
  .product_slid .subImage .subImage_wrapper .subImage_ct {
    display: flex;
    height: auto;
    margin-top: 0;
    overflow-y: initial;
  }
  .product_slid .subImage .subImage_wrapper .subImage_ct::after {
    background: linear-gradient(270deg, #0E152F 35%, transparent 100%);
    right: 0;
    bottom: 20px;
    height: 100px;
    width: 50px;
  }
  .product_slid .subImage .subImage_wrapper .subImage_ct li {
    width: 130px;
  }
  .product_slid .subImage .subImage_wrapper .subImage_ct li img {
    width: 130px;
  }
  .product_slid .subImage .btn_more {
    bottom: 25%;
    right: -20px;
  }
  .product_slid .subImage .btn_more_pc {
    display: none;
  }
  .product_slid .subImage .btn_more_sp {
    display: block;
  }
  footer .footer_bottom p {
    text-align: center;
  }
  /* footer #totop {
    bottom: 340px;
  } */
}
@media screen and (max-width: 425px) {
  header {
    padding: 1rem 1.5rem;
  }
  header.flex {
    justify-content: center;
    gap: 1.5rem;
  }
  header div.header_lang ul {
    background: #161945;
  }
  header div.header_lang .acd-label {
    padding: 1rem;
    padding-right: 40px;
    font-size: 1.4rem;
  }
  #first-view .logo img {
    width: 70%;
  }
  #first-view .first-view_bg .video {
    top: 53vh;
  }
  #first-view .first-view_bg .video::before {
    height: 20%;
    top: -28px;
  }
  #first-view .first-view_bg::before {
    bottom: 28vh;
    background: linear-gradient(0deg, transparent, #0e142f, transparent);
  }
  .slide-box {
    flex-wrap: wrap;
    width: 100vw;
    width: 100%;
  }
  .slide {
    width: 100%;
  }
  .slide-navigation {
    width: 100%;
    margin-top: 0;
  }
  .product_slid .subImage p {
    width: 30%;
  }
  .lead h2 {
    font-size: 2.2rem;
    letter-spacing: 5px;
  }
  .incline {
    perspective: none;
    -moz-perspective: none;
    -webkit-perspective: none;
    -o-perspective: none;
    -ms-perspective: none;
  }
  .incline .incline_inner {
    transform: initial;
    -moz-transform: initial;
    -webkit-transform: initial;
    -o-transform: initial;
    -ms-transform: initial;
    transform-origin: initial;
  }
  .link_bnr {
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
  }
  .product .btn::before {
    /* left: 50px; */
    left: 7.0588235294vw;
  }
  .product .btn::after {
    /* left: 70px; */
    left: 11.7647058824vw;
  }
  .product .inner {
    padding: 10rem 0;
  }
  .product .pd_content {
    flex-wrap: wrap;
    gap: 3rem;
  }
  .product .pd_content:nth-child(2n) .pd_img {
    order: 2;
  }
  .product .pd_content:nth-child(2n) .pd_text {
    order: 1;
  }
  .product .pd_img, .product .pd_text {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */

/* trivis */
.trivis_kv {
    text-align: center;
    color: #fff;
    margin-top: -10rem;
    margin-bottom: 5rem;
}
.trivis_kv img {
    width: 250px;
    margin: auto;
    max-width: 100%;
}
.trivis_kv h2 {
    font-size: 3.6rem !important;
    font-weight: bold;
}
.trivis_kv p {
    font-size: 2rem !important;
}


/* 朱栗凛 アニメーション */
#first-view .rin.pc {
  bottom: calc(50 / 1920 * 100vw);
  left: calc(280 / 1920 * 100vw);
  z-index: 10;
}
#first-view .rin.pc img {
  height: calc(600 / 1920 * 100vw);
  width: inherit;
  filter: drop-shadow(rgba(0, 77, 125, 0.9) -3px 5px 20px);
}

/* New Release アイコン */
.new_release {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  font-size: 1.4rem;
  background: #3cb1c6;
  border-radius: 3px;
}
.new_release_nav {
  display: block;
  margin-right: 0;
  margin-bottom: 1rem;
}

/* USER REPORT */

/* 扉ページ */
#report_thum_list{
  margin: 254px auto;
  width: 72%;
  max-width: 840px;
  display: flex;
  gap: 46px;
}

@media screen and (max-width: 768px) {
  #report_thum_list{
    margin-top: 112px;
    flex-direction: column;
  }
}

.userreport .secBasic .generalBlock__outer {
  max-width: 830px;
}
.userreport p {
  color: #fff;
}
.userreport .notes {
  font-size: 1.4rem;
}
.userreport_kv {
  text-align: center;
  color: #fff;
  margin-bottom: 5rem;
}
.userreport_kv img {
  width: 250px;
  margin: auto;
  max-width: 100%;
}
.userreport_kv h2 {
  font-size: 5.3rem !important;
  font-weight: bold;
  margin-bottom: 1rem;
}
.userreport_kv p {
  font-size: 3.3rem !important;
  margin-top: 0;
}
.userreport #lead h2 {
  color: #fff;
  text-align: center;
}
.userreport #lead .info_staff {
  display: flex;
  gap: 2rem;
  color: #fff;
  max-width: 640px;
  margin: auto;
}
.userreport #lead .info_staff p {
  text-align: center;
}
.userreport #lead .info_staff p span {
  font-size: 1.3rem;
}
.userreport #information3 .info03_img {
  float: left;
  max-width: 300px;
  margin-right: 3rem;
}

@media screen and (max-width: 768px) {
  .userreport #lead .info_staff p {
    font-size: 1.4rem;
  }
  .userreport #information3 .info03_img {
    float: initial;
    max-width: 100vw;
    margin-right: 0;
  }
  .userreport_kv h2 {
    font-size: 3rem !important;
  }
  .userreport_kv p {
    font-size: 2rem !important;
  }
}

/* fp9200 追加 20231206 */
#sec_cmet h3 {
  font-size: 2.4rem;
  font-weight: bold;
}

/* ledia8 */
.pageLedia8 {
  color: #fff;
}
.pageLedia8 .images_w550 {
  width: 550px;
  margin: auto;
  max-width: 100%;
}
.pageLedia8 #information1 dl {
  gap: 40px;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.pageLedia8 #information1 dt {
  width: 70%;
}
.pageLedia8 #information1 dd {
  width: 30%;
}
.pageLedia8 #information1 dl h3 {
  font-size: 2.2rem;
}
.pageLedia8 #information1 dl h3 span {
  font-size: 4.6rem;
  color: #0FB1C6;
  padding-right: 1rem;
}
.pageLedia8 #information2 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLedia8 #information3 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLedia8 #information4 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLedia8 #information5 div {
  flex-wrap: nowrap;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .pageLedia8 #information1 dl {
    flex-wrap: wrap;
  }
  .pageLedia8 #information2 div, .pageLedia8 #information3 div, .pageLedia8 #information4 div, .pageLedia8 #information5 div {
    flex-wrap: wrap;
  }
  .pageLedia8 #information1 dt {
    width: 100%;
  }
  .pageLedia8 #information1 dd {
    width: 100%;
  }
}

/* lediaps */

.pageLediaqs {
  color: #fff;
}
#catch .lediaps_catch {
  font-size: 40px;
  letter-spacing: 7px;
}
.pageLediaqs .images_w550 {
  width: 550px;
  margin: auto;
  max-width: 100%;
}
.pageLediaqs .images_w440 {
  padding-bottom: 1rem;
  width: 440px;
  margin: auto;
  max-width: 100%;
}
.pageLediaqs .images_w600 {
  width: 600px;
  margin: auto;
  max-width: 100%;
}
.pageLediaqs #information1 .sec01_title {
  margin: 0 auto;
}
.pageLediaqs #information1 img {
  margin-top: 5rem;
}
.pageLediaqs #information1 p {
  text-align: center;
}
.pageLediaqs #information2 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLediaqs #information2 img {
  margin-top: 5rem;
}
.pageLediaqs #information3 span {
  font-size: 1.8rem;
  color: #0FB1C6;
}
.pageLediaqs #information3 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLediaqs #information3 div p {
  margin-top: 5rem;
}
.pageLediaqs #information4 span {
  font-size: 1.8rem;
  color: #0FB1C6;
  margin-right: 2rem;
}
.pageLediaqs #information4 .item {
  width: 29%;
}
.pageLediaqs #information4 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageLediaqs #information4 .top50 {
  margin-top: 5rem;
}
.pageLediaqs #information5 div {
  flex-wrap: nowrap;
  gap: 40px;
}

@media screen and (max-width: 767px) {
  .pageLediaqs #information3 .flex {
      flex-direction: column;
      align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .pageLediaqs #information4 div {
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  .pageLediaqs #information4 .flex .item {
      flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .pageLediaqs #information5 .flex {
      flex-direction: column;
      align-items: center;
  }
}
@media screen and (max-width: 425px) {
  br.pc{
    display : none ;
  }
}

/* miyabic7circuit */

.pageMiyabi7circutit {
  color: #fff;
}
.pageMiyabi7circutit .images_w550 {
  width: 550px;
  margin: auto;
  max-width: 100%;
}
.pageMiyabi7circutit #information1 img {
  margin-top: 5rem;
}
.pageMiyabi7circutit #information2 img {
  margin-top: 5rem;
}
.pageMiyabi7circutit #information3 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageMiyabi7circutit #information3 .bottom50 {
  margin-bottom: 5rem;
}
.pageMiyabi7circutit #information3 div p {
  background-color: #0FB1C6;
  padding: 2rem 0 2rem 3rem;
  margin-top: 5rem;
  font-size: 1.8rem;
}
.pageMiyabi7circutit #information3 div img {
  width: 65%;
}
.pageMiyabi7circutit #information4 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageMiyabi7circutit #information4 .bgblue p {
  background-color: #0FB1C6;
  padding: 2rem 0 2rem 3rem;
  margin-top: 5rem;
  font-size: 1.8rem;
}
.pageMiyabi7circutit #information4 img {
  margin-top: 5rem;
}
.pageMiyabi7circutit #information5 div {
  flex-wrap: nowrap;
  gap: 40px;
}
.pageMiyabi7circutit #information5 img {
  margin-top: 5rem;
}
.pageMiyabi7circutit #information6 div {
  background-color: #EDD9E8;
  flex-wrap: nowrap;
  gap: 40px;
  margin-top: 3rem;
  padding: 1.2rem 3rem;
}
.pageMiyabi7circutit #information6 div .fcpink {
  color: #A5057F;
  font-size: 1.8rem;
  font-weight: bold;
}
.pageMiyabi7circutit #information6 div .fcblack {
  color: black;
}

@media screen and (max-width: 767px) {
  .pageMiyabi7circutit #information4 .flex {
      flex-direction: column;
      align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .pageMiyabi7circutit #information5 .flex {
      flex-direction: column;
      align-items: center;
  }
}

/*branch*/
.pageMiyabi_branch .images_w550 {
  width: 500px;
  margin: auto;
  padding-bottom: 40px;
  max-width: 100%;
}
.branch_bg {
    margin: 30px calc(50% - 50vw);
    padding: 15rem calc(50vw - 53% + 8px);
    background-image: url(../images/miyabi/miyabi_bg@2x.png);
    background-size: cover;
}
.pageMiyabi_branch .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bt {
  text-align: center;
}
.pageMiyabi_branch .detail {
  text-align: center;
}
.pageMiyabi_branch .center{
  padding-top: 50px;
  margin: 0 auto;
  width: 200px;
}
.pageMiyabi_branch .container_02 {
  display: flex;

}
.pageMiyabi_branch .nav {
  margin-left: 50px;
  color: #0E152F;
  text-align: center;
}
.pageMiyabi_branch .contents .arrow_right {
  position: relative;
  padding-left: 25px;
}

.pageMiyabi_branch .contents .arrow_right {
  position: relative;
  display: inline-block;
  padding-left: 22px;
}
.pageMiyabi_branch .contents .arrow_right:before {
  content: '';
  width: 50px;
  height: 50px;
  background: #0FB1C6;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;

}
.pageMiyabi_branch .contents .arrow_right:after{
  content: '';
  width: 15px;
  height: 15px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 15px;
  right: 8px;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .pageMiyabi_branch .container {
    display:block;
  }
}
@media screen and (max-width: 767px) {
  .pageMiyabi_branch .container .img_sp {
    padding-top: 100px;
  }
}

/*information4*/
.sp {
  display: none;
}
.asahidenshi_kv {
  margin: 180px 20px 20px;
}
.userreport #lead .asahidenshi_staff {
  max-width: 100%;
}
#information4 .sec04_flex {
  display: flex;
}
#information4 .sec04_flex .sec04_document {
  width: 70%;
}
#information4 .sec04_flex .sec04_document p{
  margin-top: 0;
}
#information4 .sec04_flex span {
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}
#information4 .sec04_flex img {
  width: 200px;
  /* height: fit-content; */
  margin-right: 20px;
}
#information6 .sec06_flex {
  display: flex;
  margin: 20px 0;
  align-items: flex-start;
}

#information6 .sec06_flex p {
  width: 70%;
}
#information6 .sec06_flex span {
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}
#information6 .sec06_flex img {
  width: 200px;
  /* height: fit-content; */
  margin: 16px 20px 16px 0;
}


@media screen and (max-width: 767px) {
      .secBasic .pc
      {
        display: none;
      }
      .userreport #lead .asahidenshi_staff {
        flex-wrap: wrap;
      }
      .userreport #lead .asahidenshi_staff div {
        width: calc(46% - 20px);
        margin: 10px;
        box-sizing: border-box;
      }
      #information4 .sec04_flex{
        display:flex;
        align-items: flex-start;
        gap: 10px;
        flex-direction: column;
      }
      #information4 .sec04_flex span {
        display: none;
      }
      #information4 .sec04_flex img {
        width: 100%;
      }
      #information4 .sec04_flex .sec04_document {
        width: auto;
        margin: 0 auto 16px;
      }
      #information4 .sec04_flex .sec04_document p {
        margin: 0;
      }
      #information4 .sp {
        margin-top: 0;
      }
      #information6 .sec06_flex{
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 20px auto;
        flex-direction: column;
      }
      #information6 .sec06_flex span {
        display: none;
      }
      #information6 .sec06_flex img {
        min-width:  160px;
        width: 100%;
        /* height: fit-content;
        float: left; */
      }
      #information6 .sec06_flex p {
        width: auto;
        /* margin: 16px auto; */
      }
      #information6 .sp {
        margin-top: 0;
      }

        /*
  * LEDIA6
  */
  .generalBlock .high-power__img {
    width: 100%;
  }
  /* information3 */
  .pageLedia6 #information3 ul {
    flex-direction: column;
    padding: 0 15vw;
  }
  .pageLedia6 #information2 .pictBlock {
    padding-left: 10px;
  }
  .pageLedia6 #information2 .pictBlock ul {
    position: static;
    flex-direction: row;
    padding-top: 10px;
  }
    /*
  * LEDIA7
  */
  /* information3 */
  .pageLedia7 #information3 .pictBlock {
    gap: 10px;
  }
  .pageLedia7 #information3 .pictBlock p {
    padding: 5px;
  }
  .pageLedia7 #information3 .pictBlock img {
    width: 100%;
  }
  /* pictBlock2 */
  .pageLedia7 #information3 .pictBlock2 {
    gap: 10px;
  }
  .pageLedia7 #information3 .pictBlock2 li {
    gap: 10px;
    padding: 10px;
  }
  .pageLedia7 #information3 .pictBlock2 li:nth-of-type(1) {
    flex: 0.88;
  }
  .pageLedia7 #information3 .pictBlock2 li:nth-of-type(2) {
    flex: 2;
  }
  /* information4 */
  /* wrap1 */
  .pageLedia7 #information4 .wrap1 ul {
    gap: 2vw;
  }
  .pageLedia7 #information4 .wrap1 li {
    padding: 5px;
  }
  /* wrap2 */
  .pageLedia7 #information4 .wrap2 ul {
    gap: 2vw;
  }
  .pageLedia7 #information4 .wrap2 li {
    padding: 5px;
  }
  .pageLedia7 #information5 .pictBlock2 {
    display: block;
  }
  .pageLedia7 #information5 .pictBlock2 li {
    padding-top: 10px;
  }

}

.mb56 {
  margin-bottom: 56px;
}