@charset "UTF-8";
/* [ FX JAPAN LIMITED ] setting */
/* ===============================
	[ 共通設定 ]
=============================== */
img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .pcnone {
    display: none;
  }

  .spnone {
    display: inline;
  }
}
@media only screen and (max-width: 768px) {
  .pcnone {
    display: inline;
  }

  .spnone {
    display: none;
  }
}
.fxjpltd-wrap {
  position: relative;
  width: 100%;
  height: auto;
  color: #fff;
  overflow: hidden;
}

.section-cat-ttl {
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(2rem, 2vw, calc(2.8rem * 1.2));
  font-weight: 700;
  line-height: 1.786;
}

.section-ttl {
  font-weight: 700;
}
.section-ttl span {
  display: block;
  color: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 769px) {
  .section-ttl {
    font-size: clamp(2.4rem, 2.29vw, calc(3.2rem * 1.2));
    line-height: 1.563;
  }
  .section-ttl span {
    font-size: clamp(1.2rem, 1.14vw, 1.6rem);
  }
}
@media only screen and (max-width: 768px) {
  .section-ttl {
    font-size: clamp(2.4rem, 6.4vw, calc(3.2rem * 1.2));
    line-height: 1.5;
  }
  .section-ttl span {
    font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  }
}

/* [ テキスト ] */
@media screen and (min-width: 769px) {
  .xlarge-txt {
    font-size: clamp(1.8rem, 1.71vw, calc(2.4rem * 1.2));
    line-height: 1.3 !important;
  }
}
@media only screen and (max-width: 768px) {
  .xlarge-txt {
    font-size: clamp(1.8rem, 4.8vw, calc(2.4rem * 1.2));
    line-height: 1.3 !important;
  }
}

@media screen and (min-width: 769px) {
  .large-txt {
    font-size: clamp(1.8rem, 1.43vw, calc(2.0rem * 1.2));
    line-height: 1.3 !important;
  }
}
@media only screen and (max-width: 768px) {
  .large-txt {
    font-size: clamp(1.8rem, 4.8vw, calc(2.0rem * 1.2));
    line-height: 1.3 !important;
  }
}

@media screen and (min-width: 769px) {
  .norm-txt {
    font-size: clamp(1.4rem, 1.14vw, 1.6rem);
    line-height: 2 !important;
  }
}
@media only screen and (max-width: 768px) {
  .norm-txt {
    font-size: clamp(1.4rem, 3.73vw, 1.6rem);
    line-height: 1.857 !important;
  }
}

/* [ 色指定 ] */
.bg-blk {
  background: #000;
}

.bg-red {
  background: #B90023;
}

[class^="bg-grad-"] {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) {
  [class^="bg-grad-"] {
    padding: 1.79vw 0 3.57vw;
  }
}
@media only screen and (max-width: 768px) {
  [class^="bg-grad-"] {
    padding: 5.33vw 0 25.07vw;
  }
}

.bg-grad-red-linear01 {
  background-image: linear-gradient(315deg, #660011, #b90023);
}

.bg-grad-red-linear02 {
  background-image: linear-gradient(90deg, #660011, #b90023 50%, #660011);
}

.bg-grad-blk-linear {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), black 30%);
}

.bg-grad-blk-linear02 {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, black 80%);
}

.bg-grad-gy-radial {
  background-image: radial-gradient(circle farthest-side at 50% 0%, #333333, rgba(0, 0, 0, 0));
}

.txt-wh {
  color: #fff !important;
}

.txt-red {
  color: #B90023 !important;
}

.txt-blk {
  color: #000 !important;
}

@media screen and (min-width: 769px) {
  .pc-mb0 {
    margin-bottom: 0 !important;
  }

  .pc-mb25 {
    margin-bottom: 1.79vw !important;
  }

  .pc-mb30 {
    margin-bottom: 2.14vw !important;
  }

  .pc-mb40 {
    margin-bottom: 2.86vw !important;
  }

  .pc-mb50 {
    margin-bottom: 3.57vw !important;
  }

  .pc-mb55 {
    margin-bottom: 3.93vw !important;
  }

  .pc-mb60 {
    margin-bottom: 4.29vw !important;
  }

  .pc-mb75 {
    margin-bottom: 5.36vw !important;
  }

  .pc-mb100 {
    margin-bottom: 7.14vw !important;
  }

  .pc-mb150 {
    margin-bottom: 10.71vw !important;
  }

  .pc-mt40 {
    margin-top: 2.86vw !important;
  }

  .pc-mt50 {
    margin-top: 3.57vw !important;
  }

  .pc-mt55 {
    margin-top: 3.93vw !important;
  }
}
@media only screen and (max-width: 768px) {
  .sp-mb10 {
    margin-bottom: 2.67vw !important;
  }

  .sp-mb20 {
    margin-bottom: 5.33vw !important;
  }

  .sp-mb25 {
    margin-bottom: 6.67vw !important;
  }

  .sp-mb30 {
    margin-bottom: 8vw !important;
  }

  .sp-mb40 {
    margin-bottom: 10.67vw !important;
  }

  .sp-mb50 {
    margin-bottom: 13.33vw !important;
  }

  .sp-mb75 {
    margin-bottom: 20vw !important;
  }

  .sp-mt20 {
    margin-top: 5.33vw !important;
  }
}
/* [ infinity-scroll ] */
.infinity-scroll {
  width: 100%;
  overflow: hidden;
}
.infinity-scroll .inner {
  display: flex;
  width: 500%;
}
.infinity-scroll .scroll-list {
  display: flex;
  gap: 1.71vw;
  width: 50%;
  padding: 0 0.86vw;
  box-sizing: border-box;
  list-style: none;
  animation: scroll-infinity 60s linear infinite 0.5s both;
}
.infinity-scroll .scroll-list .scroll-item img {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .infinity-scroll .inner {
    width: 900%;
  }
  .infinity-scroll .scroll-list {
    gap: 2.4vw;
    padding-left: 1.2vw;
    padding-right: 1.2vw;
  }
}

@keyframes scroll-infinity {
  to {
    transform: translateX(-100%);
  }
}
/* [ リンクボタン ] */
.red-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #B90023;
  border-radius: 5px;
  transition: all 0.4s ease;
}
.red-btn span {
  color: #fff;
  font-weight: 700;
}
@media (hover: hover) {
  .red-btn:hover {
    background: #fff;
  }
  .red-btn:hover span {
    color: #B90023;
  }
}
@media screen and (min-width: 769px) {
  .red-btn {
    min-height: 80px;
  }
  .red-btn span {
    font-size: clamp(1.6rem, 1.43vw, 2rem);
  }
}
@media only screen and (max-width: 768px) {
  .red-btn {
    min-height: 50px;
  }
  .red-btn span {
    font-size: clamp(1.6rem, 4.27vw, 2rem);
  }
}

/* [ 全画面 ] */
.full-image {
  position: relative;
  width: 100%;
  height: auto;
}

/* [ コンテンツ半分 ] */
.cnt-half {
  display: flex;
  align-items: stretch;
}
.cnt-half .cnt-half-item {
  width: 50%;
}
.cnt-half .cnt-half-item img {
  width: 100%;
}
.cnt-half.reverse {
  flex-direction: row-reverse;
}

@media screen and (min-width: 769px) {
  .pc-cnt-half {
    display: flex;
    align-items: stretch;
  }
  .pc-cnt-half .cnt-half-item {
    width: 50%;
  }
  .pc-cnt-half .cnt-half-item img {
    width: 100%;
  }
  .pc-cnt-half.reverse {
    flex-direction: row-reverse;
  }
}
/* [ 最下部注意書き] */
.note {
  background: #330000;
}
.note .rwd-notes-list01:last-child {
  margin-bottom: 0 !important;
}
@media screen and (min-width: 769px) {
  .note {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 768px) {
  .note {
    padding: 40px 0;
  }
}

/* ===============================
	[ 各ページ設定 ]
=============================== */
/*----------------------------
共通アニメーション設定
----------------------------*/
.scroll, .scroll_up, .scroll_down, .scroll_left, .scroll_right {
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
}

/* アニメーションを無効にする設定（動きに敏感なユーザー向け） */
@media (prefers-reduced-motion: reduce) {
  .scroll, .scroll_up, .scroll_down, .scroll_left, .scroll_right {
    transition: none;
    transform: none;
  }
}
/*----------------------------
スクロールアニメーション（個別）
----------------------------*/
@media screen and (min-width: 769px) {
  .scroll_up {
    --y: 100px;
  }

  .scroll_down {
    --y: -100px;
  }

  .scroll_left {
    --x: -100px;
  }

  .scroll_right {
    --x: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .scroll_up {
    --y: 50px;
  }

  .scroll_down {
    --y: -50px;
  }

  .scroll_left {
    --x: -50px;
  }

  .scroll_right {
    --x: 50px;
  }
}
/*----------------------------
アニメーションON時のスタイル
----------------------------*/
.scroll.on,
.scroll_up.on,
.scroll_down.on,
.scroll_left.on,
.scroll_right.on {
  opacity: 1;
  transform: translate(0, 0) !important;
}

/* ===============================
	[ 各ページ設定 ]
=============================== */
@media screen and (min-width: 769px) {
  .page-ttl {
    width: auto;
    max-height: 71px;
  }
}
@media only screen and (max-width: 768px) {
  .page-ttl {
    width: 40%;
    min-width: 154px;
    height: auto;
  }
}

.main-image {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  z-index: +2;
}
.main-image .trans-top {
  animation: trans-top 4s ease;
}
.main-image .main-change {
  position: relative;
  height: auto;
  overflow: hidden;
  animation: main-change 1s 5s forwards;
  opacity: 0;
}
.main-image .main-change .change-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.main-image .main-change .change-image.item2 {
  opacity: 0;
  animation: image-switch 20s 10s infinite;
}
@keyframes image-switch {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.main-image .rwd-main-content-group {
  z-index: +1;
}
.main-image .rwd-main-content-group img {
  opacity: 0;
  animation: main-txt-fade 1s 6s forwards;
}
.main-image .rwd-main-content-group p {
  opacity: 0;
  animation: main-txt-fade 1s 7s forwards;
}
@media screen and (min-width: 769px) {
  .main-image {
    padding-top: 7.14vw;
  }
  .main-image .trans-top {
    width: 64.2%;
  }
  @keyframes trans-top {
    0% {
      opacity: 0;
      transform: translateY(6.43vw);
    }
    25% {
      opacity: 1;
      transform: translateY(6.43vw);
    }
    40% {
      opacity: 1;
      transform: translateY(6.43vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-image .main-change {
    width: 57.1%;
    margin-top: -9.5vw;
    aspect-ratio: 749 / 495;
  }
  .main-image .main-change .change-image.item1 {
    background-image: url("../img/index/img_002.png");
  }
  .main-image .main-change .change-image.item2 {
    background-image: url("../img/index/img_003.png");
  }
  @keyframes main-change {
    0% {
      opacity: 0;
      transform: translateY(2.14vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-image .rwd-main-content-group {
    margin-top: -8% !important;
  }
  .main-image .rwd-main-content-group img {
    max-width: 606px !important;
  }
  @keyframes main-txt-fade {
    0% {
      opacity: 0;
      transform: translateY(7.14vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media only screen and (max-width: 768px) {
  .main-image {
    padding-top: 16vw;
  }
  .main-image .trans-top {
    width: 90%;
    max-width: none !important;
  }
  @keyframes trans-top {
    0% {
      opacity: 0;
      transform: translateY(13.33vw);
    }
    25% {
      opacity: 1;
      transform: translateY(13.33vw);
    }
    40% {
      opacity: 1;
      transform: translateY(13.33vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-image .main-change {
    width: calc(100% + 9.375%);
    margin-top: -16vw;
    aspect-ratio: 125 / 86;
  }
  .main-image .main-change .change-image.item1 {
    animation-delay: 0s;
    background-image: url("../img/index/img_002_sp.png");
  }
  .main-image .main-change .change-image.item2 {
    animation-delay: 5s;
    background-image: url("../img/index/img_003_sp.png");
  }
  @keyframes main-change {
    0% {
      opacity: 0;
      transform: translateY(2.14vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-image .rwd-main-content-group {
    margin-top: -16.5% !important;
  }
  .main-image .rwd-main-content-group img {
    width: 90%;
  }
  @keyframes main-txt-fade {
    0% {
      opacity: 0;
      transform: translateY(7.14vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.bg-main {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 1400px;
  height: auto;
  max-height: 694px;
  aspect-ratio: 700 / 347;
  transform: translateX(-50%);
  z-index: +1;
}

.image-mv .rwd-movie-area {
  position: relative;
}
.image-mv .rwd-movie-area iframe {
  z-index: +2;
}
@media screen and (min-width: 769px) {
  .image-mv .rwd-movie-area::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -100px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(315deg, #660011, #b90023);
  }
}

@media screen and (min-width: 769px) {
  #design .infinity-scroll {
    margin-top: -10.71vw;
  }
  #design .image-360 {
    margin-top: -1.5vw;
  }
}
@media only screen and (max-width: 768px) {
  #design .infinity-scroll {
    margin-top: -16.71vw;
  }
  #design .image-360 {
    margin-top: -3vw;
  }
}

#feature .feature-video {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
#feature .feature-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#feature .img-frame {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
#feature .img-frame .item01,
#feature .img-frame .item02,
#feature .img-frame .item03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
#feature .img-frame .item01 {
  background-image: url("../img/index/img_006_1.jpg");
  animation: slide-anime01 20s infinite;
}
#feature .img-frame .item02 {
  background-image: url("../img/index/img_006_2.jpg");
  animation: slide-anime02 20s infinite;
}
#feature .img-frame .item03 {
  background-image: url("../img/index/img_006_3.jpg");
  animation: slide-anime03 20s infinite;
}
@media screen and (min-width: 769px) {
  #feature .feature-video {
    aspect-ratio: 7 / 3;
  }
  #feature .img-frame {
    aspect-ratio: 202 / 127;
    margin-top: -4.64vw;
  }
}
@media only screen and (max-width: 768px) {
  #feature .feature-video {
    aspect-ratio: 25 / 14;
  }
  #feature .bg-grad-red-linear02 {
    padding-bottom: 8vw;
  }
  #feature .img-frame {
    aspect-ratio: 85 / 56;
  }
}

@keyframes slide-anime01 {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-anime02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-anime03 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#technology {
  overflow: hidden;
}
#technology .tech-detail {
  position: relative;
  z-index: +3;
}
@media screen and (min-width: 961px) {
  #technology .tech-content {
    position: relative;
    width: 100%;
    max-width: 1400px;
    padding-top: min(50px, 3.57vw);
    margin: 0 auto;
  }
  #technology .tech-content .tech-item:nth-of-type(1) {
    position: relative;
    width: calc(50% + min(100px, 7.14vw));
    max-width: 793px;
    z-index: +2;
  }
  #technology .tech-content .tech-item:nth-of-type(1) img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 793 / 500;
  }
  #technology .tech-content .tech-item:nth-of-type(2) {
    width: calc(50% - min(125px, 8.93vw));
    max-width: 793px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.79vw 0.71vw 6.43vw min(125px, 8.93vw);
    z-index: +1;
  }
  #technology .tech-content .tech-item:nth-of-type(2)::after {
    content: '';
    width: 50vw;
    height: 100%;
    display: block;
    background-image: linear-gradient(90deg, #660011, #b90023 50%, #660011);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #technology .tech-detail {
    margin-top: -1.79vw;
  }
}
@media only screen and (max-width: 960px) {
  #technology .tech-content {
    display: flex;
    flex-direction: column-reverse;
  }
  #technology .tech-content .tech-item {
    position: relative;
  }
  #technology .tech-content .tech-item:nth-of-type(1) {
    position: relative;
    margin-right: calc(9.375% / 2);
    z-index: +2;
  }
  #technology .tech-content .tech-item:nth-of-type(2) {
    padding: 20px 18px 40px 20px;
    margin-left: calc(9.375% / 2);
  }
  #technology .tech-content .tech-item:nth-of-type(2)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 119 / 142;
    background-image: linear-gradient(90deg, #660011, #b90023 50%, #660011);
    z-index: -1;
  }
}
@media only screen and (max-width: 960px) and (769px <= width <= 960px) {
  #technology .tech-detail {
    margin-top: 6vw;
  }
}

#interview {
  position: relative;
  width: 100%;
  height: auto;
}
#interview .bg-grad-red-linear02 {
  position: relative;
  height: 10px;
  padding: 0;
  z-index: +1;
}
#interview .bg-interview {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#interview .rwd-main-content-group {
  z-index: +1;
}
@media screen and (min-width: 769px) {
  #interview {
    aspect-ratio: 56 / 27;
  }
  #interview .rwd-grid:has(.red-btn) {
    padding-bottom: 150px;
  }
  #interview .bg-interview {
    background: url("../img/index/img_014.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  #interview {
    max-height: 600px;
    aspect-ratio: 75 / 116;
    padding-bottom: 20vw;
  }
  #interview .bg-interview {
    background: url("../img/index/img_014_sp.jpg") center/cover no-repeat;
  }
  #interview .rwd-main-content-group {
    padding-top: 5.33vw;
  }
  #interview .rwd-main-content-group:has(.red-btn) {
    padding: 0;
  }
}

.design {
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .design {
    padding-top: 7.14vw;
  }
}
@media only screen and (max-width: 768px) {
  .design {
    padding-top: 10.67vw;
  }
}
.design .page-ttl {
  aspect-ratio: 225 / 71;
}
@media screen and (min-width: 769px) {
  .design .bg-grad-red-linear02 {
    padding: 38px 0 !important;
  }
}
@media only screen and (max-width: 768px) {
  .design .bg-grad-red-linear02 {
    padding: 25px 0 !important;
  }
}
.design #design-main {
  position: relative;
  z-index: +2;
}
.design .infinity-scroll {
  width: 105%;
}
@media screen and (min-width: 769px) {
  .design .infinity-scroll {
    transform: rotate(-5deg) translate(-20px, -25px) !important;
  }
}
@media only screen and (max-width: 768px) {
  .design .infinity-scroll {
    transform: rotate(-5deg) translate(-5px, 10px) !important;
  }
}
.design .full-image:has(.bg-design-symbol) .bg-design-symbol {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("../img/design/img_002.jpg") center/cover no-repeat;
}
@media screen and (min-width: 769px) {
  .design .full-image:has(.bg-design-symbol) {
    aspect-ratio: 2 / 1;
    padding-top: 63px;
  }
}
@media only screen and (max-width: 768px) {
  .design .full-image:has(.bg-design-symbol) {
    display: flex;
    flex-direction: column-reverse;
  }
  .design .full-image:has(.bg-design-symbol) .bg-design-symbol {
    position: inherit;
    aspect-ratio: 125 / 92;
    margin-top: -2.5em;
  }
  .design .full-image:has(.bg-design-symbol) .bg-design-symbol::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 36%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), black 80%);
    transform: scale(1, -1);
  }
  .design .full-image:has(.bg-design-symbol) .rwd-main-content-group {
    padding-top: 10.67vw;
  }
}
.design .full-image:has(.bg-design-track) .bg-design-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .design .full-image:has(.bg-design-track) {
    aspect-ratio: 7 / 3;
  }
  .design .full-image:has(.bg-design-track) .bg-design-track {
    background: url("../img/design/img_005.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-track) .rwd-main-content-group {
    height: 100%;
  }
  .design .full-image:has(.bg-design-track) .rwd-main-content-group .rwd-grid {
    height: 100%;
    align-items: center;
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
  }
}
@media only screen and (max-width: 768px) {
  .design .full-image:has(.bg-design-track) {
    aspect-ratio: 25 / 38;
  }
  .design .full-image:has(.bg-design-track) .bg-design-track {
    background: url("../img/design/img_005_sp.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-track) .rwd-main-content-group {
    padding-top: 10.67vw;
  }
}
.design .full-image:has(.bg-design-hatch) .bg-design-hatch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .design .full-image:has(.bg-design-hatch) {
    aspect-ratio: 2 / 1;
  }
  .design .full-image:has(.bg-design-hatch) .bg-design-hatch {
    background: url("../img/design/img_008.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-hatch) .rwd-main-content-group {
    height: 100%;
  }
  .design .full-image:has(.bg-design-hatch) .rwd-main-content-group .rwd-grid {
    height: 100%;
    align-items: center;
  }
}
@media only screen and (max-width: 768px) {
  .design .full-image:has(.bg-design-hatch) {
    aspect-ratio: 75 / 112;
  }
  .design .full-image:has(.bg-design-hatch) .bg-design-hatch {
    background: url("../img/design/img_008_sp.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-hatch) .rwd-main-content-group {
    padding-top: 10.67vw;
  }
}
.design .full-image:has(.bg-design-carbon) .bg-design-carbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .design .full-image:has(.bg-design-carbon) {
    aspect-ratio: 2 / 1;
  }
  .design .full-image:has(.bg-design-carbon) .bg-design-carbon {
    background: url("../img/design/img_013.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-carbon) .rwd-main-content-group {
    height: 100%;
  }
  .design .full-image:has(.bg-design-carbon) .rwd-main-content-group .rwd-grid {
    height: 100%;
    align-items: center;
  }
}
@media only screen and (max-width: 768px) {
  .design .full-image:has(.bg-design-carbon) {
    aspect-ratio: 375 / 653;
  }
  .design .full-image:has(.bg-design-carbon) .bg-design-carbon {
    background: url("../img/design/img_013_sp.jpg") center/cover no-repeat;
  }
  .design .full-image:has(.bg-design-carbon) .rwd-main-content-group {
    padding-top: 10.67vw;
  }
}
.design .pc-cnt-half .cnt-half-item:nth-of-type(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .design .pc-cnt-half .cnt-half-item:nth-of-type(2) > div {
    width: 71.5%;
  }
}
@media only screen and (max-width: 768px) {
  .design .pc-cnt-half .cnt-half-item:nth-of-type(2) > div {
    width: 90.625%;
    padding: 6.67vw 0;
  }
}
.design .design-logo-year .logo-year {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .design .design-logo-year .logo-year-img {
    width: 87.1%;
    max-width: 1220px;
    margin: 0 auto;
  }
  .design .design-logo-year .logo-year-img img {
    width: 91.5%;
  }
  .design .design-logo-year .rwd-grid {
    margin-top: -7.14vw;
  }
  .design .design-logo-year .logo-year {
    padding: 0 50px;
  }
}
@media only screen and (max-width: 768px) {
  .design .design-logo-year .logo-year-img {
    width: 97%;
  }
  .design .design-logo-year .logo-year {
    padding: 6.67vw;
    margin-top: -0.5em;
  }
}
.design .hatch-image {
  position: relative;
  margin-top: -11.43vw !important;
  z-index: +1;
}
.design #design-color .design-color-perf {
  display: flex;
}
@media screen and (min-width: 769px) {
  .design #design-color .design-color-perf .perf-item:nth-of-type(2), .design #design-color .design-color-perf .perf-item:nth-of-type(3) {
    width: 34.1%;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(1) {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 24px;
    order: 2;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(2) {
    order: 1;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(3) {
    order: 3;
  }
}
@media only screen and (max-width: 768px) {
  .design #design-color:has(.reverse) .pc-cnt-half {
    display: flex;
    flex-direction: column-reverse;
  }
  .design #design-color .design-color-perf {
    flex-wrap: wrap;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(1) {
    width: 100%;
    padding: 6.67vw;
    order: 3;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(2) {
    width: 50%;
    order: 1;
  }
  .design #design-color .design-color-perf .perf-item:nth-of-type(3) {
    width: 50%;
    order: 2;
  }
  .design #design-color .stitch {
    flex-direction: column !important;
  }
}

.feature .page-ttl {
  aspect-ratio: 269 / 71;
}
.feature .feature-main {
  position: relative;
  z-index: +1;
}
.feature .bg-feature-main {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .feature .bg-grad-red-linear02 {
    padding: 38px 0 !important;
  }
  .feature .feature-main {
    padding-top: 7.14vw;
  }
  .feature .feature-main .bg-feature-main {
    width: 71.6%;
    aspect-ratio: 1003 / 650;
  }
}
@media only screen and (max-width: 768px) {
  .feature .bg-grad-red-linear02 {
    padding: 6.67vw 0;
  }
  .feature .feature-main {
    padding-top: 45%;
  }
  .feature .feature-main .bg-feature-main {
    width: 100%;
    aspect-ratio: 375 / 242;
  }
  .feature .feature-main .rwd-main-content-group .rwd-grid {
    gap: 6px;
  }
  .feature .feature-main .rwd-main-content-group .rwd-grid .rwd-grid-item {
    width: calc((100% - (6px * 2)) / 3);
  }
}

.technology {
  overflow: hidden;
}
.technology .page-ttl {
  aspect-ratio: 417 / 71;
}
@media only screen and (max-width: 768px) {
  .technology .page-ttl {
    width: 73.8%;
  }
}
.technology .bg-grad-red-linear02 {
  padding: 38px 0 !important;
}
.technology .section-ttl span {
  color: #fff !important;
}
@media screen and (min-width: 769px) {
  .technology .red-btn {
    max-width: 291px;
  }
}
.technology .tech-main {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.technology .tech-main .tech-main-wrap {
  position: relative;
  z-index: +1;
}
.technology .tech-main .bg-tech-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .technology .tech-main {
    aspect-ratio: 2 / 1;
    padding-top: 7.14vw;
  }
  .technology .tech-main .bg-tech-main img {
    min-height: 500px;
    object-fit: cover;
    object-position: right;
  }
}
@media only screen and (max-width: 768px) {
  .technology .tech-main {
    aspect-ratio: 375 / 242;
    padding-top: 45%;
  }
}
@media screen and (min-width: 769px) {
  .technology #connext {
    display: flex;
    gap: 67px;
  }
  .technology #connext .connext-img {
    width: calc(100% - (41.6% + 67px));
  }
  .technology #connext .connext-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 25 / 16;
    object-fit: contain;
  }
  .technology #connext .connext-txt-wrap {
    width: 41.6%;
  }
  .technology #connext .connext-txt-wrap .connext-txt {
    display: flex;
    flex-direction: column;
    width: 86%;
  }
  .technology #connext .connext-txt-wrap .connext-txt .red-btn {
    align-self: center;
  }
}
@media only screen and (max-width: 768px) {
  .technology #connext .connext-txt-wrap {
    width: 90.625%;
    margin: 0 auto;
  }
}
.technology #ride {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.technology #ride .ride-wrap {
  position: relative;
  z-index: +1;
}
.technology #ride .ride-wrap .ride-txt {
  display: flex;
  flex-direction: column;
}
.technology #ride .ride-wrap .ride-txt iframe {
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
}
.technology #ride .ride-wrap .ride-txt .red-btn {
  align-self: center;
}
@media screen and (min-width: 769px) {
  .technology #ride {
    aspect-ratio: 70 / 51;
    padding-top: 7.14vw;
  }
  .technology #ride .bg-ride {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .technology #ride .bg-ride img {
    min-height: 900px;
    object-fit: cover;
    object-position: right;
  }
}
@media only screen and (max-width: 768px) {
  .technology #ride {
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
  }
}
.technology #engine .bg-grad-red-linear02 .section-ttl span {
  color: rgba(255, 255, 255, 0.5) !important;
}
.technology #engine .engine-main {
  background-image: url("../img/technology/img_007.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.technology #engine .engine-main .engine-wrap {
  position: relative;
  box-sizing: border-box;
  z-index: +1;
}
.technology #engine .engine-main .engine-wrap .rwd-main-content-group .norm-txt .large-txt {
  display: block;
}
@media screen and (min-width: 769px) {
  .technology #engine .engine-wrap {
    padding: 3.57vw 0 7.14vw;
  }
}
@media only screen and (max-width: 768px) {
  .technology #engine .engine-wrap {
    padding: 4.53vw 0 13.33vw;
  }
}

.interview .page-ttl {
  aspect-ratio: 511 / 58;
}
@media screen and (min-width: 769px) {
  .interview .page-ttl {
    max-width: 705px;
  }
}
@media only screen and (max-width: 768px) {
  .interview .page-ttl {
    width: 75.7%;
  }
}
.interview .bg-grad-red-linear02 {
  padding: 38px 0 !important;
}
.interview .section-ttl span {
  color: #fff !important;
}
.interview .red-btn {
  max-width: 291px;
}
.interview .interview-main {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.interview .interview-main .interview-main-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: +1;
}
.interview .interview-main .bg-interview-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.interview .interview-main .interview-main-txt {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .interview .interview-main {
    aspect-ratio: 350 / 163;
    padding-top: 5.29vw;
  }
}
@media only screen and (max-width: 768px) {
  .interview .interview-main {
    aspect-ratio: 375 / 227;
    padding-top: 10.67vw;
  }
}
.interview #developer-profile .prof-ttl {
  color: #B90023;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .interview #developer-profile .prof-ttl {
    font-size: clamp(1.8rem, 1.71vw, calc(2.4rem * 1.2));
  }
}
@media only screen and (max-width: 768px) {
  .interview #developer-profile .prof-ttl {
    font-size: clamp(1.8rem, 4.8vw, calc(2.4rem * 1.2));
  }
}
.interview #developer-profile .prof-wrap .prof-content {
  position: relative;
  z-index: +1;
}
.interview #developer-profile .prof-wrap .prof-content:nth-of-type(1)::after {
  left: -24px;
  transform: scale(-1, 1);
}
.interview #developer-profile .prof-wrap .prof-content:nth-of-type(2)::after {
  right: -24px;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail {
  color: #000;
  padding: 2.14vw;
  box-sizing: border-box;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt p {
  width: 50%;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt p:nth-of-type(1) {
  font-weight: 700;
}
.interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt p:nth-of-type(2) {
  line-height: 1.571;
  border-left: 5px solid #B90023;
  padding-left: 0.71vw;
}
@media screen and (min-width: 769px) {
  .interview #developer-profile .prof-wrap {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
  }
  .interview #developer-profile .prof-wrap .prof-content {
    width: 28.2%;
    min-width: 300px;
  }
  .interview #developer-profile .prof-wrap .prof-content::after {
    content: '';
    position: absolute;
    top: 50px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(315deg, #660011, #b90023);
    z-index: -1;
  }
  .interview #developer-profile .prof-wrap .prof-content .prof-txt p:nth-of-type(1) {
    font-size: clamp(1.8rem, 1.43vw, calc(2.0rem * 1.2));
  }
  .interview #developer-profile .prof-wrap .prof-content .prof-txt p:nth-of-type(2) {
    font-size: clamp(1.2rem, 1vw, calc(1.4rem * 1.2));
  }
}
@media only screen and (max-width: 768px) {
  .interview #developer-profile .prof-wrap {
    width: 90.625%;
    margin: 0 auto;
  }
  .interview #developer-profile .prof-wrap .prof-content {
    width: 100%;
  }
  .interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail {
    padding: 6.67vw;
  }
  .interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt p:nth-of-type(1) {
    font-size: clamp(1.8rem, 4.8vw, calc(2.0rem * 1.2));
  }
  .interview #developer-profile .prof-wrap .prof-content .prof-item .prof-detail .prof-txt p:nth-of-type(2) {
    font-size: clamp(1.2rem, 3.2vw, calc(1.4rem * 1.2));
  }
}
.interview [id^="question-"] .bg-grad-red-linear02 {
  padding: 0 !important;
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .bg-grad-red-linear02 {
    height: 10px !important;
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .bg-grad-red-linear02 {
    height: 5px !important;
  }
}
.interview [id^="question-"] .question-ttl {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  z-index: +3;
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .question-ttl {
    aspect-ratio: 14 / 3;
    padding-top: 3.93vw;
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .question-ttl {
    aspect-ratio: 375 / 233;
    padding-top: 10.67vw;
  }
}
.interview [id^="question-"] .question-ttl .bg-question {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.interview [id^="question-"] .question-ttl .question-num {
  position: relative;
  color: #C5C5C5;
  font-weight: 700;
}
.interview [id^="question-"] .question-ttl .question-num::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #B90023;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .question-ttl .question-num::after {
    font-size: clamp(8rem, 7.14vw, calc(10.0rem * 1.2));
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .question-ttl .question-num::after {
    font-size: clamp(8rem, 21.33vw, calc(10.0rem * 1.2));
  }
}
.interview [id^="question-"] .question-ttl .section-ttl {
  line-height: 1.563 !important;
}
.interview [id^="question-"] .question-subttl {
  position: relative;
  text-align: center;
}
.interview [id^="question-"] .question-subttl::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  height: 2px;
  background: #B90023;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .question-subttl {
    font-size: clamp(1.8rem, 1.43vw, calc(2.0rem * 1.2));
  }
  .interview [id^="question-"] .question-subttl::after {
    width: 18%;
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .question-subttl {
    font-size: clamp(1.8rem, 4.8vw, calc(2.0rem * 1.2));
  }
  .interview [id^="question-"] .question-subttl::after {
    width: 54.7%;
  }
}
.interview [id^="question-"] .answerer {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .answerer {
    gap: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .answerer {
    gap: 10px;
  }
}
.interview [id^="question-"] .answerer .answerer-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .interview [id^="question-"] .answerer .answerer-icon {
    gap: 10px;
    width: 7.9%;
  }
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .answerer .answerer-icon {
    gap: 5px;
    width: 11.7%;
    min-width: 40px;
  }
}
.interview [id^="question-"] .answerer .answerer-icon img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.interview [id^="question-"] .answerer .answerer-icon p {
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .interview [id^="question-"] .answerer .answerer-icon p {
    font-size: 1.4rem;
  }
}
.interview [id^="question-"] .answerer .answerer-txt {
  flex: 1;
}
.interview #question-1 .question-num::after {
  content: "01";
}
@media screen and (min-width: 769px) {
  .interview #question-1 .bg-question {
    background: url("../img/interview/img_005.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-1 .bg-question {
    background: url("../img/interview/img_005_sp.jpg") center/cover no-repeat;
  }
}
.interview #question-2 .question-num::after {
  content: "02";
}
@media screen and (min-width: 769px) {
  .interview #question-2 .bg-question {
    background: url("../img/interview/img_008.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-2 .bg-question {
    background: url("../img/interview/img_008_sp.jpg") center/cover no-repeat;
  }
}
.interview #question-3 .question-num::after {
  content: "03";
}
@media screen and (min-width: 769px) {
  .interview #question-3 .bg-question {
    background: url("../img/interview/img_011.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-3 .bg-question {
    background: url("../img/interview/img_011_sp.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-4 .question-ttl {
    aspect-ratio: 375 / 197;
  }
}
.interview #question-4 .question-num::after {
  content: "04";
}
@media screen and (min-width: 769px) {
  .interview #question-4 .bg-question {
    background: url("../img/interview/img_014.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-4 .bg-question {
    background: url("../img/interview/img_014_sp.jpg") center/cover no-repeat;
  }
}
.interview #question-5 .question-num::after {
  content: "05";
}
@media screen and (min-width: 769px) {
  .interview #question-5 .bg-question {
    background: url("../img/interview/img_017.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-5 .bg-question {
    background: url("../img/interview/img_017_sp.jpg") center/cover no-repeat;
  }
}
.interview #question-6 .question-num::after {
  content: "06";
}
@media screen and (min-width: 769px) {
  .interview #question-6 .bg-question {
    background: url("../img/interview/img_020.jpg") center/cover no-repeat;
  }
}
@media only screen and (max-width: 768px) {
  .interview #question-6 .bg-question {
    background: url("../img/interview/img_020_sp.jpg") center/cover no-repeat;
  }
}

.spec .page-ttl {
  aspect-ratio: 200 / 71;
}
@media screen and (min-width: 769px) {
  .spec {
    padding-top: 7.14vw;
  }
  .spec .bg-grad-red-linear02 {
    padding: 38px 0 !important;
  }
}
@media only screen and (max-width: 768px) {
  .spec {
    padding-top: 10.67vw;
  }
  .spec .bg-grad-red-linear02 {
    padding: 6.67vw 0;
  }
}
.spec #boat-image {
  position: relative;
  z-index: +2;
}
.spec #boat-image .color-name::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #666;
  background-image: linear-gradient(135deg, #660011, #b90023 50%, black 50%);
  vertical-align: middle;
  margin-right: 5px;
}
.spec #equip-list .rwd-table-type01 th,
.spec #key-parameters .rwd-table-type01 th,
.spec #price .rwd-table-type01 th {
  background: #333 !important;
}
.spec #price {
  padding-bottom: 7.14vw;
}
.spec #price .section-ttl span {
  display: inline-block;
  color: #fff;
}