/*! Writen  by SCSS */
.read {
  font-size: clamp(11px, 1.29vw, 16px); }
  @media screen and (max-width: 768px) {
    .read {
      font-size: clamp(11px, 1.82vw, 14px); } }
  @media screen and (max-width: 480px) {
    .read {
      font-size: 13px; } }

.main_text_wrap {
  aspect-ratio: 1600 / 780;
  width: 100%;
  padding-top: 4.07%;
  padding-left: 3.44%; }
  @media screen and (max-height: 780px) {
    .main_text_wrap {
      min-height: 100lvh; } }
  @media screen and (max-width: 768px) {
    .main_text_wrap {
      aspect-ratio: auto;
      min-height: 100lvh; } }
  @media screen and (max-width: 480px) {
    .main_text_wrap {
      padding-top: 50px;
      padding-left: 0;
      padding-right: 0; } }
  .main_text_wrap .main_text_inner {
    width: 48.1%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 480px) {
      .main_text_wrap .main_text_inner {
        width: 90%;
        margin-left: auto;
        margin-right: auto; } }
    .main_text_wrap .main_text_inner .main_text {
      width: 100%; }
      .main_text_wrap .main_text_inner .main_text img {
        width: 100%; }
    .main_text_wrap .main_text_inner .main_lead {
      font-size: 1.46vw;
      margin-top: 2em;
      line-height: 1; }
      @media screen and (max-width: 480px) {
        .main_text_wrap .main_text_inner .main_lead {
          margin-top: 2.5em;
          font-size: 18px;
          line-height: 1.6; } }

.main_image {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100lvh;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
  .top_scrolled .main_image {
    opacity: 0.3; }
  .main_image img {
    display: block;
    line-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom; }
    @media screen and (max-width: 480px) {
      .main_image img {
        object-position: 75% bottom; } }
  .main_image::after {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    background: url("../images/top/bg01.jpg") center/cover no-repeat;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
    .top_scrolled .main_image::after {
      opacity: 1; }

.main_lead_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(50px, 6.67%, 80px);
  padding-bottom: clamp(60px, 8.34%, 100px); }
  .main_lead_wrap .main_en_lead {
    max-width: 402px;
    width: 33.5%;
    margin-left: auto;
    margin-right: auto;
    line-height: 0;
    margin-bottom: clamp(60px, 8.34%, 100px); }
    @media screen and (max-width: 480px) {
      .main_lead_wrap .main_en_lead {
        width: 60%;
        margin-bottom: 30px; } }
  .main_lead_wrap .main_lead {
    font-size: clamp(24px, 3.87vw, 48px);
    letter-spacing: 0.1em;
    line-height: 1.46;
    margin-bottom: clamp(30px, 4.17%, 50px); }
    @media screen and (max-width: 480px) {
      .main_lead_wrap .main_lead {
        font-size: 24px;
        margin-bottom: 20px; } }
  .main_lead_wrap .main_read_wrap {
    display: flex;
    flex-direction: column;
    line-height: 3.75; }
    @media screen and (max-width: 480px) {
      .main_lead_wrap .main_read_wrap {
        gap: 1em;
        line-height: 2em; } }

.content_outer {
  background: #000; }

@media screen and (max-width: 480px) {
  .lead_image img {
    display: block;
    height: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    object-position: 30% top; } }

.sec_garage {
  padding-top: clamp(80px, 10%, 120px); }

.sec_order,
.sec_planning {
  padding-top: clamp(60px, 11.67%, 140px); }

.content_head_wrap {
  display: flex;
  flex-direction: column;
  font-size: clamp(24px, 3.22vw, 40px);
  margin-bottom: clamp(40px, 5.84%, 70px); }
  @media screen and (max-width: 768px) {
    .content_head_wrap {
      font-size: clamp(20px, 4.94vw, 36px); } }
  @media screen and (max-width: 480px) {
    .content_head_wrap {
      font-size: 20px;
      margin-bottom: 25px; } }
  .content_head_wrap .text {
    position: relative;
    z-index: 2;
    letter-spacing: 0.1em;
    margin-top: -0.5em;
    line-height: 1; }
    @media screen and (max-width: 480px) {
      .content_head_wrap .text {
        line-height: 1.4;
        letter-spacing: 0.15em; } }
  .sec_garage .content_head_wrap .head_en {
    width: 61.92%; }
    @media screen and (max-width: 480px) {
      .sec_garage .content_head_wrap .head_en {
        width: 87.11%; } }
  .sec_order .content_head_wrap {
    align-items: flex-end; }
    .sec_order .content_head_wrap .head_en {
      width: 71.09%; }
      @media screen and (max-width: 480px) {
        .sec_order .content_head_wrap .head_en {
          width: 100%; } }
  .sec_planning .content_head_wrap .head_en {
    width: 41.09%; }
    @media screen and (max-width: 480px) {
      .sec_planning .content_head_wrap .head_en {
        width: 57.8%; } }

.content_wrap {
  margin-bottom: clamp(50px, 6.67%, 80px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: calc(100% - 20px); }
  @media screen and (max-width: 768px) {
    .content_wrap {
      flex-direction: column;
      max-width: 100%; } }
  .content_wrap .image_box {
    width: 60%;
    position: relative;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      .content_wrap .image_box {
        width: 100%; } }
    .content_wrap .image_box img {
      width: 100%; }
  .content_wrap .text_box {
    width: 34.67%;
    position: relative;
    z-index: 1;
    margin-top: 5.34%;
    padding-top: 6%;
    padding-bottom: 4%; }
    @media screen and (max-width: 768px) {
      .content_wrap .text_box {
        padding-top: 60px;
        padding-bottom: 60px;
        width: 100%;
        margin-top: 0; } }
    @media screen and (max-width: 480px) {
      .content_wrap .text_box {
        padding-top: 30px;
        padding-bottom: 40px; } }
    .content_wrap .text_box::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: -1;
      width: 100vw;
      background-image: url("../images/top/bg_pattern.jpg");
      background-position: top left;
      background-size: 80px 80px;
      background-repeat: repeat; }
      @media screen and (max-width: 768px) {
        .content_wrap .text_box::before {
          width: calc(100% - 20px);
          background-size: 40px 40px; } }
      @media screen and (max-width: 480px) {
        .content_wrap .text_box::before {
          width: calc(100% - 10px); } }
    .content_wrap .text_box .text_inner {
      width: 100%; }
      @media screen and (max-width: 768px) {
        .content_wrap .text_box .text_inner {
          width: calc(100% - 60px);
          margin-left: auto;
          margin-right: auto; } }
      .content_wrap .text_box .text_inner .read {
        font-size: clamp(11px, 1.03vw, 16px);
        line-height: 3;
        margin-bottom: 9.62%; }
        @media screen and (max-width: 768px) {
          .content_wrap .text_box .text_inner .read {
            width: fit-content;
            line-height: 2.5;
            margin-left: auto;
            margin-right: auto;
            font-size: clamp(11px, 1.82vw, 14px);
            margin-bottom: 30px; } }
        @media screen and (max-width: 480px) {
          .content_wrap .text_box .text_inner .read {
            font-size: 13px;
            margin-bottom: 15px; } }
        .content_wrap .text_box .text_inner .read .text_lg {
          font-size: 1.2em; }
      @media screen and (max-width: 480px) {
        .content_wrap .text_box .text_inner .read_wrap {
          display: flex;
          flex-direction: column;
          gap: 0.8em;
          line-height: 2; } }
      .content_wrap .text_box .text_inner .more_button {
        width: 53.85%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vmax;
        border: 1px solid;
        padding: 5.38% 8.46%;
        gap: 0 26.31%; }
        @media screen and (max-width: 768px) {
          .content_wrap .text_box .text_inner .more_button {
            width: 38.47%;
            padding: 25px 45px; } }
        @media screen and (max-width: 480px) {
          .content_wrap .text_box .text_inner .more_button {
            max-width: 280px;
            width: 66.67%;
            padding: 15px 30px; } }
        .content_wrap .text_box .text_inner .more_button .text {
          width: 55.27%;
          line-height: 0; }
        .content_wrap .text_box .text_inner .more_button::after {
          content: "";
          display: block;
          width: 17.9%;
          height: fit-content;
          aspect-ratio: 34 / 7;
          border-right: 1px solid;
          border-bottom: 1px solid;
          transform: skewX(45deg); }
  .sec_garage .content_wrap, .sec_planning .content_wrap {
    margin-right: calc((100% - 1400px) / 2); }
    @media screen and (max-width: 1440px) {
      .sec_garage .content_wrap, .sec_planning .content_wrap {
        margin-right: auto; } }
    .sec_garage .content_wrap .text_box::before, .sec_planning .content_wrap .text_box::before {
      left: -57.69%; }
      @media screen and (max-width: 768px) {
        .sec_garage .content_wrap .text_box::before, .sec_planning .content_wrap .text_box::before {
          left: 0; } }
  .sec_order .content_wrap {
    flex-direction: row-reverse;
    margin-left: calc((100% - 1400px) / 2); }
    @media screen and (max-width: 1440px) {
      .sec_order .content_wrap {
        margin-left: auto; } }
    @media screen and (max-width: 768px) {
      .sec_order .content_wrap {
        flex-direction: column; } }
    .sec_order .content_wrap .text_box::before {
      right: -57.69%; }
      @media screen and (max-width: 768px) {
        .sec_order .content_wrap .text_box::before {
          right: 0; } }

.image_list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0 4.08%; }
  @media screen and (max-width: 768px) {
    .image_list {
      flex-wrap: wrap;
      gap: 30px 4%; } }
  @media screen and (max-width: 480px) {
    .image_list {
      gap: 10px 2%; } }
  .image_list .item {
    max-width: 200px;
    width: 16.67%; }
    @media screen and (max-width: 768px) {
      .image_list .item {
        width: 30%; } }
    @media screen and (max-width: 480px) {
      .image_list .item {
        width: 32%; } }

.bottom_image {
  padding-top: clamp(60px, 12.5%, 150px); }

/*# sourceMappingURL=top.css.map */