/* ----------------------------------------product_info---------------------------------------- */
#product {
  overflow: hidden;
}

/* main */
#product .main {}

#product .main h2 {
  margin: 0 auto 1em;
}

@media screen and (max-width: 768px) {
  #product {
    padding: 0 0 0 var(--side-padding);
    overflow: hidden;
  }

  #product .main {
    padding: 0 var(--side-padding) 0 0;
  }

  #product .main h2 {
    font-size: 1.32em;
  }
}

/* top */
#product .top {
  --width: 45%;
  --gap: 2em;
  gap: var(--gap);
}

#product .top .text {
  width: var(--width);
}

#product .top .video {
  width: calc(100% - var(--width) - var(--gap));
}

#product .top .video img {}

@media screen and (max-width: 768px) {
  #product .top {
    padding: 0 var(--side-padding) 0 0;
  }

  #product .top .text {
    width: 100%;
  }

  #product .top .video {
    width: 100%;
  }
}

/* info */
#product .info {
  --width: 450px;
  --gap: 6em;
  gap: var(--gap);
  margin: 4em auto 0;
}

#product .info .text {
  width: var(--width);
}

#product .info .text .box:not(:last-child) {
  margin: 0 0 4em;
}

#product .info .text .box h2 {
  font-size: 1.2em;
  padding: 0.3em 0;
  margin: 0 auto 0.5em;
}

#product .info .text .box h2.line_even:before {
  border-bottom: 1.8em solid #00195E;
}

#product .info .text .box p {}

#product .info .img {
  width: calc(100% - var(--width) - var(--gap));
}

#product .info .img h3 {
  text-align: center;
  margin: 0 auto 2em;
}

#product .info .img ul {
  --num: 4;
  --gap: 1.5em;
  gap: var(--gap);
}

#product .info .img ul li {
  width: calc(100% / var(--num) - var(--gap) * (var(--num) - 1) / var(--num));
  text-align: center;
}

#product .info .img ul li img {
  width: 100%
}

#product .info .img ul li p {}

@media screen and (max-width: 768px) {
  #product .info {
    padding: 0 var(--side-padding) 0 0;
  }

  #product .info .img {
    width: 100%;
  }

  #product .info .text .box h2 {
    margin: 0 auto 1.5em;
  }

  #product .info .img ul {
    --gap: 1em;
  }
}

/* top_img */
#product .top_img {
  margin: 4em auto;
}

#product .top_img .title {
  top: 0;
  left: 0;
  width: 50%;
}

#product .top_img .text {
  bottom: 0;
  right: 0;
  text-align: right;
}

#product .top_img .text h3 {
  margin: 0 auto 0.5em;
}

@media screen and (max-width: 768px) {
  #product .top_img {
    padding: 0 var(--side-padding) 0 0;
    margin: 4em auto 16em;
  }

  #product .top_img .text {
    top: 100%;
    right: var(--side-padding);
  }
}

/* item */
#product .item {
  margin: 8em auto 0;
}

#product .item h2 {
  margin: 0 auto 2em;
}

#product .item h2 img,
#product .item h2 svg {
  height: 1.2em;
  padding: 0 0 0 1.5em;
}

#product .item .list {
  --num: 6;
  --gap: 2em;
  gap: var(--gap);
}

#product .item .list a {
  width: calc(100% / var(--num) - var(--gap) * (var(--num) - 1) / var(--num));
  text-align: center;
}

#product .item .list a img {}

#product .item .list a p {
  color: #81C0E9;
}

#product .item .list a .single_arrow {
  --arrow-width: 1em;
  --arrow-height: 1px;
  --arrow-weight: 6px;
  --arrow-deg: 45deg;
  position: relative;
  display: inline-block;
  width: var(--arrow-width);
  height: var(--arrow-height);
  background-color: #E97C00;
}

#product .item .list a .single_arrow:before,
#product .item .list a .single_arrow:after {
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 4);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--arrow-weight);
  height: var(--arrow-height);
  background-color: #E97C00;
  transition: ease-in 0.2s;
  z-index: -1;
}

#product .item .list a .single_arrow:before {
  top: calc(50% - var(--arrow-height) * 2.4);
  transform: rotate(var(--arrow-deg));
}

#product .item .list a .single_arrow:after {
  top: calc(50% + var(--arrow-height) * 1.4);
  transform: rotate(calc(-1 *var(--arrow-deg)));
}

@media screen and (max-width: 768px) {
  #product .item .list {
    --num: 2;
    padding: 0 var(--side-padding) 0 0;
  }
}

/* data */
#product .data {
  margin: 8em auto 0;
}

#product .data .first {
  --width: 50%;
  --gap: 5em;
  gap: var(--gap);
  margin: 0 auto 4em;
}

#product .data .first .text {
  width: var(--width);
}

#product .data .first .text h3 {
  margin: 0 auto 2em;
}

#product .data .first .text p {}

#product .data .first .img {
  width: calc(100% - var(--width) - var(--gap));
}

#product .data .first .img img {}

#product .data .second {
  --arrow-width: 176px;
  --gap: 4em;
  gap: var(--gap);
}

#product .data .second .arrow_box {
  width: var(--arrow-width);
}

#product .data .second .arrow_box ul.arrow_ul {}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li {
  --arrow-width: 1em;
  position: relative;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
  transition: ease-in 0.2s;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:hover,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li.active a.arrow_a {
  color: #E97C00;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:before,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:after {
  --arrow-height: 0.1em;
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 2);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 6px;
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:before {
  top: calc(50% - var(--arrow-height));
  transform: rotate(45deg);
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:after {
  top: calc(50% + var(--arrow-height));
  transform: rotate(-45deg);
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:hover:before,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:hover:after,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li.active a.arrow_a:before,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li.active a.arrow_a:after {
  left: calc(100% + var(--arrow-width) - var(--arrow-height) * 2);
  background-color: #E97C00;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a span {
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--arrow-width);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li a.arrow_a:hover span,
#product .data .second .arrow_box ul.arrow_ul li.arrow_li.active a.arrow_a span {
  width: calc(100% + var(--arrow-width));
  background-color: #E97C00;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul {
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul li {
  --border: 0.5em;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul li a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--border) + 0.3em);
  transition: ease-in 0.2s;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--border);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul li a:hover {
  color: #E97C00;
}

#product .data .second .arrow_box ul.arrow_ul li.arrow_li ul li a:hover:before {
  width: calc(100% + var(--border) + 0.3em);
  background-color: #E97C00;
}

#product .data .second .graph_box {
  width: calc(100% - var(--arrow-width) - var(--gap));
  overflow: hidden;
  position: relative;
  min-height: 400px;
}

#product .data .second .graph_box .graph {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(1em);
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

#product .data .second .graph_box .graph.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  position: relative;
}

#product .data .second .graph_box span {
  color: var(--bg-color);
  font-weight: bold;
  background: #E97C00;
  padding: 0.5em 1em;
}

#product .data .second .graph_box .flex {
  --gap: 2em;
  gap: var(--gap);
}

#product .data .second .graph_box .flex .img {
  width: calc(50% - var(--gap) / 2);
}

#product .data .second .graph_box .flex .img .base {}

#product .data .second .graph_box .flex .img .timeline {
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  transition: ease-in 1s 0.5s;
}

#product .data .second .graph_box .graph.active .flex .img .timeline {
  width: 100%;
}

#product .data .second .graph_box .flex .img .timeline img {
  height: 100%;
  object-fit: cover;
  object-position: left;
}

#product .data .second .graph_box .flex .text {
  width: calc(50% - var(--gap) / 2);
}

#product .data .second .graph_box .flex .text p {}

@media screen and (max-width: 1200px) {
  #product .data .second .graph_box .flex {
    --gap: 0;
  }

  #product .data .second .graph_box .flex .img {
    width: calc(50% - var(--gap) / 2);
    width: 100%;
  }

  #product .data .second .graph_box .flex .text {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #product .data {
    padding: 0 var(--side-padding) 0 0;
  }

  #product .data .first .text {
    width: 100%;
  }

  #product .data .first .img {
    width: 100%;
  }

  #product .data .second {
    --gap: 2em;
  }

  #product .data .second .arrow_box {
    width: 100%;
  }

  #product .data .second .graph_box {
    width: 100%;
  }

  #product .data .second .graph {
    width: 100% !important;
  }

  #product .data .second .graph_box .graph {
    margin: 0 auto 2em;
  }
}

/* drive */
#product .drive {
  margin: 8em auto 0;
}

#product .drive h3 {
  margin: 0 auto 2em;
}

.lang-jp #product .drive h3 img {
  height: 2.2em;
}

#product .drive h3 img {
  height: 8.7em;
}

#product .drive .flex {
  --width: 40%;
  --gap: 6em;
  gap: var(--gap);
}

#product .drive .flex .img {
  position: relative;
  width: var(--width);
}

#product .drive .flex .img:before,
#product .drive .flex .img:after {
  content: "";
  position: absolute;
  top: 48.6%;
  left: 56.3%;
  transform: translate(-50%, -50%);
  width: 1%;
  height: 35.5%;
  /* background-color: #014893; */
  filter: blur(2px);
  transition: ease-in 0.5s 0.1s;
}

#product .drive .flex .img:after {
  filter: blur(6px);
}

#product .drive .flex .img.active1:before,
#product .drive .flex .img.active1:after {
  background-color: #014893;
}

#product .drive .flex .img.active2:before,
#product .drive .flex .img.active2:after {
  background-color: #3fe269;
}

#product .drive .flex .img img {
  width: 80%;
  margin: 0 auto;
}

#product .drive .flex .text {
  width: calc(100% - var(--width) - var(--gap));
}

#product .drive .flex .text .box {
  margin: 4em auto 0;
  cursor: pointer;
}

#product .drive .flex .text .box1 {}

#product .drive .flex .text .box h4 {
  position: relative;
  font-weight: bold;
  margin: 0 auto 0.5em;
}

#product .drive .flex .text .box h4:before {
  content: "";
  position: absolute;
  top: calc(50% - 1em);
  left: 0%;
  transform: translate(-50%, -50%);
  width: 3em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(8px);
  box-shadow: 0px 0px 25px 10px var(--bg-color) inset;
  transition: ease-in 0.5s 0.1s;
  z-index: -1;
}

#product .drive .flex .text .box:hover h4:before {
  width: 4em;
}

#product .drive .flex .text .box1 h4:before {
  background-color: #014893;
}

#product .drive .flex .text .box2 h4:before {
  background-color: #3fe269;
}

#product .drive .flex .text .box p {}

@media screen and (max-width: 768px) {
  #product .drive {
    padding: 0 var(--side-padding) 0 0;
  }

  #product .drive .flex {
    --gap: 2em;
  }

  #product .drive .flex .img {
    width: 100%;
  }

  #product .drive .flex .text {
    width: 100%;
  }
}

/* table_box */
#product .table_box {
  margin: 8em auto 0;
}

@media screen and (max-width: 768px) {
  #product .table_box {
    padding: 0 var(--side-padding) 0 0;
  }
}


/* ----------------------------------------technology_info---------------------------------------- */
#technology_info {}

.point_box {
  margin: 8em 0 0;
}

.point_box .title {
  margin: 0 auto 2em;
}

.point_box .title span {
  position: relative;
  display: inline-block;
  height: 1.2em;
}

.point_box .title span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2em);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #014893;
  box-shadow: 0px 0px 25px 10px var(--bg-color) inset;
  filter: blur(2px);
  z-index: -1;
}

.point_box .title span img {
  height: 100%;
}

.point_box .title h3 {
  margin: 1em 0 2em;
}

.point_box.point01 .title h3,
.point_box.point02 .title h3 {
  height: 6em;
}

.point_box.point03 .title h3 {
  height: 9em;
}

.point_box .title h3 img {
  height: 100%;
}

/* point01 */
.point_box.point01 .title p {
  width: 50%;
}

.point_box.point01 .content {
  --width: 30%;
  --gap: 6em;
  /* gap: var(--gap); */
}

.point_box.point01 .content .img {
  width: var(--width);
}

.point_box.point01 .content .img img {}

.point_box.point01 .content .text {
  width: calc(100% - var(--width));
  padding: 0 0 0 var(--gap);
}

.point_box.point01 .content .text .box {}

.point_box.point01 .content .text .box:not(:last-child) {
  margin: 0 0 2em;
}

.point_box.point01 .content .text .box h4 {
  margin: 0 auto 1em;
}

.point_box.point01 .content .text .box h4:before {
  width: calc(100% + var(--gap) * 2);
  left: calc(-1 * var(--gap) * 2);
}

.point_box.point01 .content .text .box:nth-child(even) h4:before {
  border-bottom: 1.8em solid #00195E;
}

.point_box.point01 .content .text .box h4:after {
  width: calc(100% + var(--gap) * 2);
  left: calc(-1 * var(--gap) * 2);
}

.point_box.point01 .content .img {}

.point_box.point01 .content .img img {}

/* point02 */
.point_box.point02 {
  --img-width: 300px;
}

.point_box.point02 .title {
  width: calc(100% - var(--img-width) - 2em);
}

.point_box.point02 .title p {
  width: 90%;
}

.point_box.point02 .img {
  width: var(--img-width);
}

/* point03 */
.point_box.point03 {
  --img-width: 420px;
}

.point_box.point03 .title {
  width: calc(100% - var(--img-width) - 2em);
}

.point_box.point03 .title p {
  width: 90%;
}

.point_box.point03 .title ul {
  list-style: disc;
  padding: 2em;
  margin: 0 auto;
}

.point_box.point03 .title ul li {}

.point_box.point03 .img {
  width: var(--img-width);
  gap: 1em;
}

@media screen and (max-width: 768px) {
  .point_box {
    padding: 0 var(--side-padding) 0 0;
  }
}

@media screen and (max-width: 768px) {
  .point_box.point01 .title p {
    width: 100%;
  }

  .point_box.point01 .content .img {
    width: 80%;
    margin: 0 auto;
  }

  .point_box.point01 .content .text {
    width: 100%;
    padding: 0;
    margin: 4em auto 0;
  }

  .point_box.point02 .title {
    width: 100%;
  }

  .point_box.point02 .title p {
    width: 100%;
  }

  .point_box.point02 .img {
    width: 80%;
    margin: 0 auto;
    margin: -6em auto 2em;
  }

  .point_box.point03 .title {
    width: 100%;
  }

  .point_box.point03 .title p {
    width: 100%;
  }

  .point_box.point03 .img {
    width: 80%;
    margin: 0 auto;
  }
}