@media (max-width: 860px), (orientation: landscape) and (max-width: 956px) {
  /* スマホ縦 or 横向き（956px以下）の両方に適用される */

  .top {
    height: 100svh;
  }

  .top-sp-logo {
    display: block;
    width: 98px;
    height: auto;
    position: absolute;
    top: -50px;

    left: 15px;
  }
  .top-footer {
    width: auto;
    height: 110px;
    background: #000000;
    color: #ffffff;
    display: block;
    gap: none;
    padding-top: 17px;
  }

  .top-title strong {
    font-size: 65px;
    position: absolute;
    top: 40px;
    right: 20px;
  }
  .top-title p {
    font-size: 60px;
    position: absolute;
    top: 60px;
    right: 140px;
  }

  .section1,
  .section2,
  .section3,
  .section4,
  .section5,
  .section6 {
    width: 100%;
    height: 850px;
    background-size: cover;
    background-position: top center;
  }
  .section-gradation1 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#ee9867e6, #644c7be6);
  }
  .section-gradation2 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#644c7be6, #303266e6);
  }
  .section-gradation3 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#1c2242e6, #7577c1e6);
  }
  .section-gradation4 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#8b7dcce6, #cea6dfe6, #fac5c3e6);
  }
  .section-gradation5 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#fac5c3e6, #edc39ce6, #93b4e7e6);
  }

  .hamburger_menu {
    width: 100%;
    overflow: auto;
    padding: 95px 40px 40px;
    height: 100vh;
    overflow-y: auto;
  }

  .hamburger_close img {
    width: 32px;
    height: 30px;
  }

  .hamburger_btns {
  }

  .hamburger_links,
  .hamburger_btns {
    width: 100%;
  }

  .hamburger_close {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .hamburger_btns a {
    display: block;
  }

  .hamburger_link {
    display: block;
    font-size: 20px;
    line-height: 18px;
    font-family: "Garamond", serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    width: fit-content; /* 広瀬追加を採用 */
  }

  .fab {
    font-size: 35px;
    color: #fff;
    padding-bottom: 20px;
  }
  .hamburger {
    width: 38px;
    top: 20px;
    left: 20px;
    gap: 10px;
  }

  .hamburger_btn1,
  .hamburger_btn2,
  .hamburger_btn3 {
    background: #fff;
    width: 250px;
    height: 65px;
    margin: 0px;
    margin-bottom: 20px;
    display: block;
  }

  .top-footer {
    display: none;
  }

  .top-footersp {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .topix {
    margin-left: 0px;
    margin-right: 0px;
  }
  .topix-sp-box {
    padding: 20px 15px;
  }
  .topix-title {
    text-align: left;
    padding-bottom: 20px;
    /* padding-top: 20px; */
    margin-left: 0;
    margin-right: 0;
  }
  .topic2 {
    font-size: 15px;
    height: 80px;
  }
  .topic2 ul li {
    margin-bottom: 15px;
  }

  .date {
    padding-bottom: 5px;
    display: block;
  }

  .topic2sp {
    display: block;
  }

  .logo {
    display: none;
  }

  .footer-right img {
    display: none;
  }

  .section-word {
    font-size: clamp(16px, 1.5vw + 12px, 28px);
    line-height: 150px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0 auto;

    height: 100%;
  }

  .section-word2 {
    font-size: clamp(16px, 2.5vw + 12px, 38px);
  }
  .section-word3 {
    font-size: clamp(14px, 2.2vw + 12px, 35px);
    line-height: 160%;
  }

  .section6 {
    width: 100%;
    height: 850px;
    background: linear-gradient(#93b4e7, #76cbff);
  }
  .section7 {
    width: 100%;
    height: 850px;
    background-color: #76cbff;
    background-image: url("../images/section7.png");
    background-size: 207px auto;
    background-position: left top;
  }
  .section7 strong {
    padding-top: 150px;
  }

  .section8 {
    width: 100%;
    height: 275px;
    background-image: url(../images/section8.png),
      linear-gradient(
        to top,
        #76cbff 0%,
        #76cbff 60%,
        #76cbff 60%,
        #76cbff 100%
      );
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: top, top;
    position: relative;
  }

  .message-scroll-container {
    padding-bottom: 0;
    padding-top: 0;
  }

  /* 静的セクション（TMCについて） */
  .message-static-section {
    position: relative;
    width: 100%;
    min-height: 60vh;
    background-image: url(../images/section8.png),
      linear-gradient(
        to top,
        #76cbff 0%,
        #76cbff 60%,
        #76cbff 60%,
        #76cbff 100%
      );
    background-size: 150%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, top;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }

  .section8 img {
    width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .section8 p {
    font-size: 18px;
    letter-spacing: 5%;
    display: block;
    padding-left: 0px;
    width: 120px;
    margin: 0 auto;
  }
  .section8-box {
    padding-top: 180px;
    width: 300px;
    display: block;
    margin: 0 auto;
  }

  .works {
    width: 100%;
    background-image: url("../images/section8-end.png"),
      linear-gradient(to top, white 0%, white 60%, #76cbff 60%, #76cbff 100%);
    background-repeat: no-repeat;
    background-position: top, top;
    background-size: 100% auto, 100% auto;
    padding-top: 100px;
  }
  .works_container {
    padding-bottom: 70px;
  }

  .works-box {
    margin-top: 120px;
    display: flex;
    gap: 10px;
    width: 100%;
    padding-right: 0;
    padding-top: 0;
    background: #fff;
  }
  .works-word {
    font-size: 50px;
    line-height: 50px;
    margin-top: 20px;
  }
  .works-word2 {
    padding-top: 71px;
    padding-right: 12px;
  }
  .mofumofu {
    width: 43vw;
    height: auto;
    padding-top: 53vw;
  }

  .q_blue {
    top: 125px;
    right: 20px;
    width: 70px;
    top: 24vw;
    right: 5vw;
    width: 18.667vw;
  }
  .q_yerrow {
    width: 112px;
    height: auto;
    bottom: 300px;
    left: -20px;
    width: 29.867vw;
    height: auto;
    bottom: 80vw;
    left: -5.333vw;
  }

  .slide {
    height: 800px;
  }

  .slides {
    padding-top: 0px;
    width: 100%;
  }

  .slides h1 {
    padding-bottom: 20px;
  }
  .slides-titlepc {
    display: none;
  }
  .slides-titlesp1 {
    display: block;
    font-size: 60px;
    font-family: "Gabarito", serif;
    font-weight: 800;
    width: fit-content;

    letter-spacing: 2.8px;
    line-height: 60px;
  }
  .indent {
    display: inline-block;
    margin-left: 2em;
  }

  .slide {
    /* width: 390px; */
    margin: 0 auto;
  }

  .slide-title::before,
  .slide-title::after {
    display: none;
  }

  .imgbox {
    border-radius: 0;
    height: unset;

    img {
      object-fit: cover;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-position: top;
    }
  }

  .box1 {
    position: relative;
  }
  .box2 {
    position: relative;
  }
  .box3 {
    position: relative;
  }
  .box4 {
    position: relative;
  }
  .box5 {
    position: relative;
  }
  .box6 {
    position: relative;
    height: unset;
  }

  /* .slide img {
    width: 100%;
    padding-bottom: 30px;
    padding-left: 0px;
    position: relative;
  } */

  /* .box1-img-sp {
    display: block;
  }
  .box2-img-sp {
    display: block;
  }
  .box3-img-sp {
    display: block;
  }
  .box4-img-sp {
    display: block;
  }
  .box5-img-sp {
    display: block;
  }
  .box6-img-sp {
    display: block;
  }

  .box1-img-pc {
    display: none;
  }
  .box2-img-pc {
    display: none;
  }
  .box3-img-pc {
    display: none;
  }
  .box4-img-pc {
    display: none;
  }
  .box5-img-pc {
    display: none;
  }
  .box6-img-pc {
    display: none;
  } */

  .slide-title {
    position: absolute;

    padding-top: 15px;
    padding-bottom: 0px;
    border-radius: 0 0 0 0;
    padding-right: 0px;
    width: 100%;
    height: 90px;
  }

  .box3 .slide-title {
    padding-top: 25px;
  }
  .box4 .slide-title {
    padding-top: 25px;
  }
  .box5 .slide-title {
    padding-top: 25px;
  }
  .box6 .slide-title {
    padding-top: 25px;
  }

  .slide-title p {
    font-size: 14px;
    letter-spacing: 5%;
  }

  .slide-title p::after {
    content: "";
    width: 45px;
    height: 1px;
    background: #999999;
    margin-left: 10px;
  }

  .slide-title strong {
    font-size: 26px;
    letter-spacing: 0;
  }

  .detail {
    font-size: 16px;
    line-height: 200%;
    font-weight: medium;
    font-weight: 500;
    font-family: "Noto Sans JP", serif;
    width: 100%;

    letter-spacing: 2px;
    margin: 0 auto;
    padding-bottom: 50px;
  }

  /* details_section */
  .details_section {
    position: sticky;
    padding: 0px;
    top: 120px;
  }

  .detail span {
    font-size: 18px;
    line-height: 200%;
    font-weight: bold;
    font-weight: 700;
    font-family: "Noto Sans JP", serif;
    letter-spacing: 0.9px;
  }

  .section-end_cloud {
    bottom: -150px;
    bottom: -23vw;
  }

  .balloon {
    width: 102px;
    height: 155px;
    bottom: -150px;
    left: 78px;
  }

  .work-with-us {
    margin-top: 0px;
  }

  .rainbow_area {
    height: 220px;
  }

  .rainbow {
    width: 400px;
    height: auto;
    left: -205px;
    bottom: -30px;
  }

  .onthesea_cloud {
    width: 305px;
    height: auto;
    right: -140px;
    bottom: -20px;
  }

  .us-title {
    text-align: center;
    top: 100px;
  }

  .us-title strong {
    font-size: 60px;
    font-family: "Gabarito", serif;
    font-weight: 700;
    margin: 0 auto;
    width: fit-content;
    color: #fff600;
    position: relative;
    z-index: 100;
  }

  .us-title p {
    font-size: 16px;
    margin: 0px;
    width: auto;
  }

  .crews-img {
    width: 85px;
    height: auto;
    top: -60px;
    top: -16vw;
    right: 10px;
  }

  .img-box {
    width: 100%;
    height: 1560px;
    position: relative;
  }

  .sea_bottom {
    margin-top: -3px;
  }

  /* ========== インタビュー＆ギャラリーエリア背景 ========== */

  .gallery_interview_wrap {
    background-image: url("../images/interview_bg_sp.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 90px;
    margin-top: -190px;
    padding-bottom: 150px;
  }

  .gallery {
    padding-bottom: 100px;
    padding-bottom: 17vw;
  }

  .gallery-title {
    font-size: 60px;
    font-family: "Gabarito", serif;
    font-weight: 700;
    line-height: 130%;
    width: fit-content;
    color: #fff600;
  }

  .gallery-slider {
    margin-top: 0;
  }
  .gallery-slider {
    overflow: hidden;
    backface-visibility: hidden;
  }

  .gallery-slides {
    display: flex;
    gap: 24px;
    transition: transform 0.5s ease;
  }

  .gallery-slide {
    /* width: 280px; */
    height: auto;
    background: #fff;
    margin: 0 auto;
  }

  .gallery-slide {
    flex: 0 0 calc(100vw - 120px); /* 画面幅から両サイド余白を差し引いた幅 */
  }

  .gallery-slide img {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .gallery-modal__dialog {
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
  }

  .modal__close {
    top: -20px;
    right: 0;
  }

  .gallery-modal__txt {
    padding: 9px;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
  }

  .slide-tag {
    padding: 7.5px 9px;
  }

  .gallery-modal__txt .slide-tag {
    padding: 7.5px 0 0 0;
  }

  .gallery-slide p {
    font-size: 12px;
    width: 280px;
    margin: 0 auto;
    padding: 9px;
  }
  .gallery-textsp {
    display: none;
  }

  .slide-tag {
    display: flex;
    gap: 5px;
  }
  .slide-tag .tmc {
    font-size: 10px;
  }
  .slide-tag .photo {
    font-size: 10px;
  }
  .slide-tag .office {
    font-size: 10px;
  }

  .tmc span {
    width: 52px;
    margin: 0 auto;
  }

  .tmc {
    width: 43px;
    height: 18px;
    background: #ff70b1;
    border-radius: 100px;
    padding-top: 1.5px;
    padding-left: 5px;
  }
  .photo {
    width: 50px;
    height: 18px;
    background: #00c7c7;
    border-radius: 100px;
    padding-top: 1.5px;
    padding-left: 5px;
  }
  .office {
    width: 60px;
    height: 18px;
    background: #fecb00;
    border-radius: 100px;
    padding-top: 1.5px;
    padding-left: 5px;
  }

  .interview {
    padding-top: 200px;
    padding-bottom: 180px;
  }
  /*
  .interview {
    width: 100%;
    height: 6200px;
    position: relative;
    background-image: url("../images/illust.png"),
      url("../images/interview-back.png"), url("../images/billsp.png"),
      linear-gradient(
        to bottom,
        #76cbff 0%,
        #ace66f 30%,
        #ace66f 30%,
        #ace66f 100%
      );
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 1400px, top, bottom, top;
    background-size: 768px auto, 768px auto, 768px auto, 100% 100%;
  } */

  /* .interview-box {
    width: 100%;
    height: 1850px;
  } */

  .interview-title {
    font-size: 60px;
    margin: 0 auto;
    padding-bottom: 70px;
    color: #fff600;
  }

  .data {
    width: 100%;
    position: relative;
    background: url("../images/tmc_data_bg_sp.png"),
      linear-gradient(
        to bottom,
        #97de4a00 0%,
        #97de4a00 5%,
        #97de4a 5%,
        #97de4a 100%
      );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 0px;
    margin-top: -350px;
    position: relative;
    z-index: 20;
    padding-top: 220px;
  }

  .data_container {
    position: relative;
    background: url("../images/tmc_data_building_sp.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center calc(100% + 150px);
    padding-bottom: 140px;
  }

  .data-title {
    padding-bottom: 50px;
    padding-top: 230px;
  }

  .data-title h2 {
    font-size: 60px;
  }

  .data-title p {
    font-size: 16px;
  }

  .tmc-data-grid {
    max-width: 400px;
    max-height: unset;
  }

  /* .percent-box {
    width: 100%;
    height: 2000px;
    position: relative;
  } */
  .percent-q {
    font-size: 24px;
    /* font-family: "Noto Sans JP", serif;
    font-weight: 700;
    line-height: 120%; */
    /* padding-top: 20px;
    padding-left: 20px; */
  }
  .percent-br {
    display: block;
  }
  .yes {
    font-size: 60px;
  }
  .math {
    font-size: 120px;
    width: 250px;
  }
  .mark {
    font-size: 60px;
  }

  .mark2 {
    font-size: 60px;
  }
  /*
  .percent1 {
    background: #fff;
    width: 360px;
    height: 633px;
    border-radius: 30px;
    position: static;
    margin: 0 auto;
  }

  .percent2 {
    background: #fff;
    width: 360px;
    height: 687px;
    border-radius: 30px;
    position: static;
    margin: 0 auto;
    margin-top: 10px;
  }
  .percent3 {
    background: #fff;
    width: 360px;
    height: 684px;
    border-radius: 30px;
    position: static;
    margin: 0 auto;
    margin-top: 10px;
  }
  .percent4 {
    background: #fff;
    width: 360px;
    height: 658px;
    border-radius: 30px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .percent5 {
    background: #fff;
    width: 360px;
    height: 510px;
    border-radius: 30px;
    margin-top: 300px;
    position: static;
    margin: 0 auto;
    margin-top: 10px;
  } */

  .percent1-box {
    /* flex-direction: column-reverse; */
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 0px;
  }
  .percent1-boxsp {
    display: block;
  }
  .percent1-boxpc {
    display: none;
  }
  .percent1-box img {
    width: 320px;
    height: auto;
  }

  .percent1-word {
    padding-top: 0;
  }

  .percent2 .percent-q {
    padding-bottom: 0;
  }

  .percent2 img {
    width: 293px;
    height: auto;
    padding-top: 0;
  }

  .percent3 img {
    width: 184px;
    height: auto;
    margin: 0 auto;
  }
  .percent3-box {
    gap: 40px;
    justify-content: center;
  }

  .percent3-ratio1 strong {
    font-size: 36px;
  }
  .percent3-ratio2 {
  }
  .percent3-ratio2 strong {
    font-size: 36px;
  }

  .ratio-font1 {
    font-size: 64px;
  }

  .ratio-font2 {
    font-size: 32px;
  }

  .ratio {
    font-size: 130px;
    padding: 0;
  }

  .koron {
    font-size: 110px;
  }

  .percent4sp {
    display: block;
    width: 293px;
    height: auto;
    padding-left: 20px;
  }

  .percent5-box {
    flex-wrap: wrap;
    justify-content: center;
  }

  .percent5-math {
    display: block;
    padding-top: 20px;
    margin-bottom: 20px;
  }
  /*

  .percent5-ratio1 {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-100px);
    color: #ff629e;
  } */

  .percent5-age1 {
    font-size: 40px;
  }
  .percent5-age1 span {
    font-size: 25px;
  }

  .percent5-math1 {
    font-size: 96px;
  }
  .percent5-math1 span {
    font-size: 32px;
  }

  .percent5-age2 {
  }
  .percent5-age2 span {
    font-size: 25px;
  }

  .percent5-math2 {
    font-size: 48px;
  }
  .percent5-math2 span {
    font-size: 24px;
  }

  /* .percent5-ratio2 {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(20px);
    color: #181818;
  } */

  /* .percent5-ratio3 {
    position: absolute;
    top: 260px;
    left: 50%;
    transform: translateX(65px);
    color: #181818;
  } */

  /* 各カード配置 */
  .card--1 {
    grid-area: card1;
    padding-left: 0;
    padding-bottom: 0;

    .percent-q {
      padding-left: 0;
    }
  }
  .card--2 {
    grid-area: card2;
    .percent-q {
      padding-bottom: 0;
    }
  }
  .card--3 {
    grid-area: card3;
  }
  .card--4 {
    grid-area: card4;

    .percent-q {
      padding-bottom: 0;
    }
  }
  .card--5 {
    grid-area: card5;
  }

  /* 共通スタイル */
  .card {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: auto;
    gap: 40px;
  }

  .wanted_entry {
    width: 100%;
    height: 3250px;
    background-image: url("../images/wanted-bottom1.png"),
      url("../images/wanted-bottom2.png"), url("../images/wanted-back.png"),
      url("../images/entry-left2.png"), url("../images/entry-left1.png"),
      url("../images/entry-right.png"), url("../images/wanted-earth.png"),
      linear-gradient(
        to bottom,
        #76cbff 0%,
        #76cbff 15%,
        #76cbff 15%,
        #76cbff 100%
      );
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
      no-repeat, no-repeat, no-repeat;

    background-position: calc(50% + 1px) 1200px, calc(50% + 180px) 1250px, top,
      -120px 1800px, 0px 1750px, right 1830px, 0 350px, top;

    background-size: 335px auto, 182px auto, 768px 1200px, 265px auto,
      250px auto, 180px auto, 768px 1400px, 100% 100%;
  }

  .wanted-title {
    padding: 50px 15px 0;
    width: 100%;
    display: inline-grid;
    /* width: 300px;
    padding-left: 45px; */
  }
  .wanted-title strong {
    font-size: 60px;
    font-family: "Gabarito", serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 10px 10px #00000040;
  }
  .wanted-title span {
    font-size: 16px;
    font-family: "M PLUS 1p", serif;
    font-weight: 700;
    color: #ffea00;
    text-shadow: 4px 4px #00000040;
    padding-left: 10px;
  }

  .wanted-model {
    display: block;
    padding-top: 50px;
    width: 360px;
    margin: 0 auto;
  }

  /* .wanted-model img {
    width: 360px;
    height: auto;
    text-shadow: 10px 10px #00000040;
  } */

  .wanted-people {
    left: 50%;
    bottom: -170px;

    width: 95%;
  }

  .wanted_bottom_img {
    width: 100%;
    height: auto;
    margin-top: -25px;
  }

  .wanted_container {
    background-size: 40%;
    padding-bottom: 50px;
  }

  .wanted_inner::before {
    background-size: 100%;
  }

  .entry_title_area {
    margin-top: 50px;
    width: 100%;
  }

  .entry {
    padding-bottom: 200px;
    padding-bottom: 26.144vw;
  }

  .entry-left1 {
    left: -10px;
    top: -53px;
    width: 176px;
    height: auto;
  }

  .entry-left2 {
    left: -170px;
    top: -26px;
    width: 295px;
    height: auto;
  }

  .entry-right {
    width: 200px;
    position: absolute;
    right: -86px;
    top: 3px;
  }

  .entry-title h2 {
    font-size: 60px;
    font-family: "Gabarito", serif;
    font-weight: 700;
    color: #fff600;
    text-align: center;
  }
  .entry-title p {
    font-size: 16px;
    font-family: "M PLUS 1p", serif;
    font-weight: 700;
    letter-spacing: 5%;
    color: #fff;
    text-align: center;
  }
  .entry-word {
    text-align: center;
  }

  .entry-word_txt {
    font-size: 16px;
  }
  .entry-word_txt::before,
  .entry-word_txt::after {
    bottom: -6px;
    height: 60px;
  }
  /* .slash {
    font-size: 48px;
    color: #3ba6e6;
    text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white,
      1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
  } */
  .entry-wordsp {
    display: flex;
    width: 390px;
    margin: 0 auto;
    padding-top: 50px;
  }
  .entry-wordsp p {
    font-size: 16px;
    font-family: "M PLUS 1p", serif;
    line-height: 180%;
    font-weight: 700;
    text-shadow: none;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white,
      1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
    text-align: center;
  }

  .entry-btns {
    display: block;

    width: 360px;
    margin: 0 auto;
    text-align: center;
  }
  .entry-btn {
    display: block;

    width: 360px;
    height: 300px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 10px 10px #3ba6e6;
    margin-bottom: 25px;
  }

  .btn-title1 img {
    display: block;
    width: 322px;
    height: auto;
    padding-top: 40px;
    margin: 0 auto;
  }
  .btn-title2 img {
    display: block;
    width: 322px;
    height: auto;
    margin: 0 auto;
    padding-top: 40px;
  }
  .btn-title3 img {
    display: block;
    width: 142px;
    height: auto;
    padding-top: 40px;
    margin: 0 auto;
  }
  .entry-btn {
    width: 360px;
    height: unset;
    padding-bottom: 40px;
  }

  .btn-title1 img,
  .btn-title2 img,
  .btn-title3 img {
    padding-top: 25px;
  }

  /* MESSAGE スクロールトリガーUI */
  .message-text.section-word {
    font-size: clamp(16px, 1.5vw + 12px, 28px);
    line-height: 150px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0 auto;
  }

  .message-text.section-word2 {
    font-size: clamp(16px, 2.5vw + 12px, 38px);
    writing-mode: horizontal-tb;
  }

  .message-text.section-word3 {
    font-size: clamp(14px, 2.2vw + 12px, 35px);
    line-height: 160%;
    writing-mode: horizontal-tb;
  }

  .message-text .section8-box {
    padding-top: 180px;
    text-align: center;
    margin: 0 auto;
  }

  .message-text .section8-box img {
    width: 280px;
    height: auto;
  }

  .message-text .section8-box p {
    font-size: 18px;
    text-align: center;
  }

  .anker {
    padding-top: 40px;
    margin-top: -40px;
  }
}

@media (max-width: 768px), (orientation: landscape) and (max-width: 956px) {
  /* interview　Slider SPサイズここから  */
  .iv3-viewport {
    height: 260px;
  }
  .iv3-item {
    width: 264px;
    height: 320px;
    padding: 15px;
    border-radius: 18px 18px 0 18px;
  }

  .view-slide {
    border-radius: 18px 18px 0 18px;
  }

  .view-slide img {
    width: 210px;
    height: 210px;
    bottom: 55px;
  }

  .view-rightbox {
    width: 204px;
    height: 90px;
    border-radius: 12px 0 0 0;
    padding: 10px;
  }
  .view-rightbox strong {
    font-size: 16px;
    line-height: 150%;
    -webkit-text-stroke-width: 0.5px;
  }

  .view-debut {
    font-size: 14px;
    padding-bottom: 7px;
  }
  .debut-years {
    font-size: 10px;
    padding: 4px;
  }

  .viewmore-tag {
    padding: 6px 6px 6px 10px;

    gap: 6px;
    border-radius: 9px 0 0 0;
  }
  .viewmore-tag img {
    width: 5px;
    height: 9px;
  }

  .viewmore-tag p {
    font-size: 20px;
    font-size: 12px;
    line-height: 120%;
  }

  .iv3-dots {
    gap: 15px;
    margin-top: -60px;
    z-index: 99;
    position: relative;
  }

  .iv3-dot.is-active {
    width: 45px;
    height: 45px;
  }
  .iv3-dot {
    width: 25px;
    height: 25px;
  }

  .iv3-arrow {
    width: 40px;
    height: 40px;
  }

  .arrow_prev {
    width: 15px;
  }
  .arrow_next {
    width: 15px;
  }

  /* interview　Slider　SPサイズここまで  */

  /* wanted modalここから  */
  body.is-modal-lock {
    overflow: hidden; /* 念のため */
  }
  .modal-jobs h1 {
    font-size: 18px;
  }

  .modal-couse p {
    font-size: 18px;
    line-height: 130%;
  }

  .wanted-modalbox-left strong,
  .wanted-modalbox-right strong {
    font-size: 18px;
    margin-bottom: 15px;
    width: 100%;
  }
  .wanted-modal-word {
    margin-top: 10px;
    margin-bottom: 25px;
  }

  .recruitment-targetbox {
    flex-wrap: wrap;
    gap: 10px;
  }
  .recruitment-target p {
    margin-top: 0;
    height: unset;
    padding: 6px;
  }
  .job-assignment p {
    font-size: 15px;
  }
  .job-assignment ul {
    font-size: 15px;
  }
  .br_txt_sp {
    display: block;
  }

  .watend-detail_tag_box {
    right: 0;
    bottom: 0;
  }
  .watend-detail_tag_tmc {
    font-size: 40px;

    top: -50px;
  }

  .watend-detail_tag {
    width: 280px;
    font-size: 12px;
  }

  .wanted-model_close {
    display: block;
    position: absolute;
    right: 5px;
    top: 0px;
    z-index: 99;
  }
  .close_icon {
    width: 30px;
    height: 30px;
  }
  .selection-characteristicsbox p,
  .submitted-documentsbox p,
  .recruiting-facultybox p,
  .features-recruitment p,
  .features-recruitmentbox p,
  .recruitment-target p {
    font-size: 14px;
    height: unset;
    margin-top: 0;
    padding: 3px;
  }

  .people-recruitingbox {
    padding-top: 0;
  }

  .wanted-poster {
    width: 360px;
    height: 514px;
    background-size: cover;
    margin-bottom: 40px;
    background-image: url(../images/wantedposter_sp.png);
  }

  .wanted-humman-box {
    padding-top: 80px;
  }

  .watendtop-tag {
    width: 220px;
    height: 30px;
    top: -20px;
    left: 15px;
    font-size: 16px;
    background-size: 100%;
    padding-left: 0;
    text-align: center;
    margin: 0 auto;
  }

  .wanted-model img {
    width: 278px;
    margin: 0 auto;
    text-align: center;
  }

  .job-name-en {
    font-size: 20px;
  }
  .job-name-ja {
    width: 278px;
    height: 48px;
    background-size: contain;
    -webkit-text-stroke: 0.5px black;
  }
  .job-name-ja span {
    font-size: 24px;
    line-height: 150%; /* 36px */
  }

  .job-detail {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 200%;
  }

  .br_txt_pc {
    display: none;
  }

  .br_txt_sp {
    display: block;
  }

  .watendtop-tagbottom {
    width: 189px;
    height: 25px;
    background-size: contain;
    bottom: 10px;
  }

  .wanted__content_wrap {
    top: 50px;
    width: 100%;
    padding: 15px;
  }

  .wanted__content,
  .wanted__content2 {
    width: 100%;
    height: calc(95svh - 80px);
    padding-bottom: 70px;
  }

  .wanted_logo {
    width: 200px;
    top: -8px;
    left: 10px;
  }

  .wanted-modalbox {
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 10px 10px 10px;
  }

  .wanted-modalbox-lefttop img {
    width: 100%;
  }
  .wanted-modalbox-left {
    width: 100%;
    padding: 0;
  }
  .wanted-modalbox-right {
    width: 100%;
    padding: 0;
  }

  .wanted-modalbox-lefttop {
    gap: 10px;
    flex-wrap: wrap;
  }

  .features-recruitmentbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .wanted-modalbox-left strong,
  .wanted-modalbox-right strong {
    font-size: 18px;
    margin-bottom: 15px;
    width: 100%;
  }
}

@media (max-width: 860px) {
  /* ---------- FISH ---------- */
  .fish1 {
    width: 39.9vw;
    top: -19vw;
    left: 0.11vw;
  }
  .fish2 {
    width: 73.9vw;
    top: 33.4vw;
  }
  .fish3 {
    width: 51.6vw;
    top: 108.6vw;
  }

  /* ---------- BUBBLE ---------- */
  .bubble1 {
    width: 14.1vw;
    top: 18.7vw;
    right: 8.6vw;
  }
  .bubble2 {
    width: 17.9vw;
    top: 47.1vw;
    left: 33.6vw;
  }
  .bubble3 {
    width: 11.3vw;
    top: 145.9vw;
    right: 65.2vw;
  }
  .bubble4 {
    width: 12.5vw;
    top: 177.5vw;
    right: 15.7vw;
  }

  /* ---------- PEOPLE ---------- */
  .people1 {
    width: 28vw;
    top: -15.4vw;
    left: calc(50% + 10.2vw);
  }
  .people2 {
    width: 9.5vw;
    top: 33.5vw;
    left: calc(50% - 42vw);
  }
  .people3 {
    width: 13.9vw;
    top: 36vw;
    left: calc(50% - 17.7vw);
  }
  .people4 {
    width: 18.5vw;
    top: 37.8vw;
    left: calc(50% + 28.8vw);
  }
  .people5 {
    width: 12vw;
    top: 69.4vw;
    left: calc(50% + 32.8vw);
  }
  .people6 {
    width: 6.8vw;
    top: 136vw;
    left: calc(50% - 46.2vw);
  }
  .people7 {
    width: 28vw;
    top: 116.8vw;
    left: calc(50% - 21.3vw);
  }
  .people8 {
    width: 33.2vw;
    top: 158.3vw;
    left: calc(50% - 4.4vw);
  }

  /* ---------- VECTOR ---------- */
  .vector1 {
    width: 50.2vw;
    top: -7.3vw;
    left: calc(50% - 18.9vw);
  }
  .vector2 {
    width: 44.6vw;
    top: 12vw;
    left: calc(50% - 44.6vw);
  }
  .vector3 {
    width: 50.5vw;
    top: 46.5vw;
    left: calc(50% + 6.7vw);
  }
  .vector4 {
    width: 50.5vw;
    top: 75.4vw;
    left: calc(50% + -11.9vw);
  }
  .vector5 {
    width: 42.8vw;
    top: 114.3vw;
    left: -10px;
    left: calc(50% - 52vw);
  }
  .vector6 {
    width: 57.4vw;
    top: 133.3vw;
    left: 45px;
    left: calc(50% - 40vw);
  }

  /* ---------- US WORD ---------- */
  .us-wordimg {
    width: 39.3vw;
    top: 9.2vw;
    left: calc(50% - 13.9vw);
  }
  .us-word1 {
    font-size: 4.27vw;
    width: 30vw;
    top: 26.7vw;
    left: calc(50% - 37.9vw);
  }
  .us-word2 {
    font-size: 5vw;
    width: 35.4vw;
    top: 60vw;
    left: calc(50% + 13vw);
  }
  .us-word3 {
    font-size: 4.03vw;
    width: 40.9vw;
    top: 86.5vw;
    left: calc(50% + -7.1vw);
  }
  .us-word4 {
    font-size: 4.6vw;
    width: 24.1vw;
    top: 127.1vw;

    left: calc(50% - 45vw);
  }
  .us-word5 {
    font-size: 5.3vw;
    width: 45vw;
    top: 155.5vw;
    left: 65px;
    left: calc(50% - 35vw);
  }

  /* modal  */

  .modal__content {
    width: 100%;
    padding: 15px;
    max-height: 95svh;
    padding: 0;
  }

  .modal-content-box {
    display: flex;
    flex-wrap: wrap;
    height: calc(100svh - 70px);
    max-height: calc(100svh - 70px);
    width: 100%;
    padding: 15px;
    margin-top: 55px;
    overflow-y: auto;
    justify-content: center;
  }

  .modal-content-card {
    order: 0;
    width: 100%;
    max-width: 360px;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #000;
  }
  .modal-content-card-btn {
  }

  .modal-content_txtarea {
    width: 100%;
  }
  .modal-team strong {
    font-size: 30px;
    line-height: 150%;
  }

  .modal-content-inbox1 p,
  .modal-content-inbox2 p,
  .modal-content-inbox3 p {
    font-size: 16px;
    line-height: 150%;
  }

  /* modal  */
}

/* SP　横向きサイズここから  */
@media (orientation: landscape) and (max-height: 450px) {
  .top {
    min-height: 700px;
  }

  .message-text.section-word {
    writing-mode: unset;
  }

  .works {
    padding-top: 0;
  }

  .works-box {
    margin-top: 200px;
    margin-top: 34vw;
    justify-content: center;
  }
  .slide {
    height: unset;
    z-index: 20;
  }
  .details_section {
    position: relative;
    top: 0px;
  }

  .details-section-spacer {
  }
  .section-end_cloud {
    bottom: -130px;
  }
  .slides-titlepc {
    display: block;
  }
  .slides-titlesp1 {
    display: none;
  }

  .slides h1 {
    font-size: 6.6vw;
    position: relative;
  }
  .mofumofu {
    width: 30vw;

    padding-top: 23vw;
  }

  .q_blue {
    top: 15.625vw;
    right: 2.5vw;
    width: 8.75vw;
  }
  .q_yerrow {
    width: 14vw;

    bottom: 51.5vw;
    left: 9.5vw;
  }
  .img-box {
    width: 100%;
    height: 1050px;
    position: relative;
  }

  /* 静的セクション（TMCについて） */
  .message-static-section {
    position: relative;
    width: 100%;
    min-height: 150vh;
    background-image: url(../images/section8.png),
      linear-gradient(
        to top,
        #76cbff 0%,
        #76cbff 60%,
        #76cbff 60%,
        #76cbff 100%
      );
    background-size: 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: bottom, top;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }

  /* ========== インタビュー＆ギャラリーエリア背景 ========== */

  .gallery_interview_wrap {
    background-image: url("../images/interview_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 120px;
    margin-top: -100px;
    position: relative;
    z-index: 15;
    padding-bottom: 300px;
    padding-bottom: 35vw;
  }

  .interview-title {
    color: #fff600;
  }

  .data {
    width: 100%;
    position: relative;
    background: url("../images/tmc_data_bg.png"),
      linear-gradient(
        to bottom,
        #97de4a00 0%,
        #97de4a00 10%,
        #97de4a 20%,
        #97de4a 100%
      );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 0px;
    margin-top: -500px;
    margin-top: -58vw;
    position: relative;
    z-index: 20;
    padding-top: 0px;
  }
  .data-title {
    padding-top: 465px;
    padding-top: 54vw;
  }

  .entry {
    padding-bottom: 200px;
  }

  .gallery-modal__dialog {
    max-width: 100%;
    width: 90vw;
    padding: 0 15px;
    max-height: 96dvh;
    overflow-y: auto;
    padding-top: 40px;
  }

  .modal__close {
    top: 20px;
    right: 10px;
  }

  .modal__content {
    width: 100%;

    padding-top: 55px;
    max-height: 100dvh;
  }
  .wanted__content_wrap {
    top: 30px;
    width: 100%;
    padding: 15px;
    height: 95dvh;
  }

  .modal-content-box {
    width: 100%;

    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .floating-banner {
    display: none;
  }

  .modal-content-card {
    width: 40%;
    height: auto;
    order: 2;
  }
  .modal-content_txtarea {
    width: calc(60% - 24px);
  }
  .modal-content-inbox1 p,
  .modal-content-inbox2 p,
  .modal-content-inbox3 p {
    font-size: 16px;
    line-height: 150%;
  }

  .modal-content-inbox3 {
    padding-bottom: 20px;
  }

  /* wanted-modal */
  .wanted-modal {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
  }

  .modal_content,
  .wanted__content2 {
    max-width: 100%;
    width: 100%;
    height: 95svh;
  }
  .wanted-modalbox {
    gap: 0px;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
  }

  .wanted-modalbox-left strong,
  .wanted-modalbox-right strong {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .wanted-modalbox-left {
    width: calc(60% - 15px);
    padding: 0;
  }

  .wanted-modalbox-right {
    width: 40%;

    padding-top: 0;
    margin-right: 0;
  }
  .wanted-modalbox-lefttop {
    gap: 10px;
  }

  .wanted-modalbox-lefttop img {
    width: 50%;
  }
  .wanted_logo {
    width: 300px;
    top: -25px;
    left: 20px;
  }
  .modal-jobs h1 {
    padding-top: 0;
  }

  .watend-detail_tag_box {
    bottom: 10px;
  }

  .selection-method strong {
    padding-top: 0;
  }

  /* wanted-modal */
}

@media (orientation: landscape) and (max-width: 812px) and (max-height: 450px) {
  /* iPhone SE横向きなど、小さめ横向きデバイス専用 */
  .wanted-model {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
  }
}