/* ============================

   ============================ */

/* 共通 */

/* 基本設定 */

html,
body {
  overflow-x: clip;
  overscroll-behavior-y: none;
  background-color: #000;
}

html {
  font-family: "Noto Sans JP", Meiryo, "MS Pゴシック", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "Raleway", sans-serif;
  height: -webkit-fill-available;
  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
}

body {
  img {
    max-block-size: fit-content;
  }
}

[type="button"] {
  cursor: pointer;
}

.br_txt_pc {
  display: block;
}

.br_txt_sp {
  display: none;
}

.container {
  background-color: #76cbff;
  position: relative;
}
.wrap {
  background-color: #76cbff;
  position: relative;
}

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

html.is-modal-lock,
body.is-modal-lock {
  overscroll-behavior: contain; /* モバイルのゴム戻り連鎖を少し抑える用 */
}
html.is-modal-lock,
body.is-modal-lock {
  overscroll-behavior: contain; /* モバイルのゴムスクロール防止にちょっと効く */
}

/* ========== TOP ========== */
.top {
  width: 100%;
  height: 100vh;
  background-image: url(../images/background-top.png);
  background-size: cover;

  background-position: top center;
  position: relative;
  z-index: 999;
}

.top-sp-logo {
  display: none;
}

/* hamburger */

/* 1) bodyを固定するクラス */
.no-scroll {
  overflow: hidden;
  height: 100vh; /* iOS系の勝手スクロール防止 */
}

/* ハンバーガーアイコン自体は開いてる間フェードアウトでOK */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 19.5px;
  width: 49px;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 10000;
  cursor: pointer;
}

.hamburger span {
  border-bottom: 2px solid #ffffff;
  filter: drop-shadow(1px 1px 3px #0000007c);
}
.hamburger.open2 {
  opacity: 0;
  transition: 0.5s;
}

/* menu */
/* 2) メニューを画面にかぶせるようにする */
.hamburger_menu {
  position: fixed; /* ← absoluteだとページに追従しちゃうのでfixed推奨 */
  top: 0;
  left: -100%;
  width: 330px;
  height: 100vh; /* 端末高いっぱい。前は850px固定だった */
  background: #000000cc;
  transition: left 0.7s ease;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  /* 内部だけスクロールさせたいので、子に余白つくる or 下でoverflow指定する */
}

/* スクロールさせたいコンテンツ全体をラップすると管理しやすい */
.hamburger_menu {
  /* 余白ぶんを引いて縦スクロールできるようにする */
  padding-top: 30px; /* 上のcloseボタン領域 */
  padding-bottom: 30px;
  overflow-y: auto; /* ← メニュー内はスクロールOK */
}

/* 開いたらスライドイン */
.hamburger_menu.open {
  left: 0;
}
/* 3) メニュー内スクロールを許可する領域 */

/*
.hamburger_close {
  padding-left: 258px;
  padding-top: 30px;
} */

/* 閉じるボタン位置はfixedじゃなくてメニュー内で右上っぽく */
.hamburger_close {
  margin-left: auto;
  margin-right: 20px;
  margin-bottom: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger_close img {
  width: 42px;
  height: 40px;
}
.hamburger_links {
  width: 250px;
  margin: 0 auto;
}
.hamburger_links,
.hamburger_btns {
  width: 250px;
  margin: 0 auto;
  color: #fff;
}
.hamburger_btns {
  padding-top: 16px;
}

.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;
}
.hamburger_link:hover {
  border-bottom: 1px solid #fff;
}

.fab {
  font-size: 35px;
  color: #fff;
  padding-bottom: 20px;
}

.hamburger_btn1,
.hamburger_btn2,
.hamburger_btn3 {
  background: #fff;
  width: 250px;
  height: 65px;
  margin: 0 auto 20px;
  display: block;
}
.hamburger_btn1 img {
  width: 56px;
  height: auto;
  display: block;
  margin: 0 auto;
  padding-top: 11px;
}
.hamburger_btn1 span {
  width: 144px;
  display: block;
  margin: 0 auto;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  padding-top: 5px;
  color: #2a2a2a;
}
.hamburger_btn2 strong {
  display: block;
  width: 105px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 100%;
  font-family: "Garamond", serif;
  font-weight: 700;
  color: #2a2a2a;
  padding-top: 8.5px;
}
.hamburger_btn2 span {
  display: block;
  width: 160px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 18px;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  color: #2a2a2a;
  padding-top: 5px;
}
.hamburger_btn3 strong {
  display: block;
  width: 120px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 100%;
  font-family: "Garamond", serif;
  font-weight: 700;
  color: #2a2a2a;
  padding-top: 23.5px;
}

/* タイトル */
.top-title {
  color: #fffefe;
  text-shadow: -4px 4px #00000040;
  writing-mode: vertical-lr;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}
.top-title strong {
  font-size: 95px;

  position: absolute;
  top: 30px;
  right: 80px;
}
.top-title p {
  font-size: 90px;

  position: absolute;
  top: 52px;
  right: 200px;
}

/* トップフッター */
.top-footer {
  width: 100%;
  /* height: 120px; */
  background: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 40px;

  position: absolute;
  left: 0;
  bottom: 0;
  padding-top: 17px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 17px;
}

.logo_area {
}
.logo {
  width: 154px;
  height: 55px;
}
.footer-right {
  display: flex;
}

.footer-right img {
  width: 226px;
  height: 75px;
}

/* トピックス */
.topix-title {
  font-size: 22px;
  font-family: "Garamond", serif;
  font-weight: 700;
  margin-left: 30px;
  margin-right: 20px;
}

.topix {
  font-size: 16px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  width: 600px;
  overflow-y: auto;
}

.topic1 {
  border-bottom: 1px solid #fff;

  padding-bottom: 10px;
  margin-bottom: 10px;
  display: block;
}
.topic1 a:hover,
.topic2 a:hover {
  width: fit-content;
  border-bottom: 1px solid #fff;
}
.topix ul li {
}
.date {
  padding-right: 10px;
  display: inline-block;
}

/* ========== SECTION ========== */
.section-word {
  font-size: 3.47vw;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  line-height: 100px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 59.03vw;
}

/* ====================== MESSAGE スクロールトリガーUI ====================== */
.message-section {
  position: relative;
  width: 100%;
  /* 7つのメッセージアイテム(各100vh) + 上下パディング(各50vh) + 静的セクション(100vh) = 900vh */
  min-height: 100vh;
  z-index: 0;
}

.message-fixed-display {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.message-fixed-display.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.message-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.message-bg.active {
  opacity: 1;
  pointer-events: auto;
}

.message-scroll-container {
  position: relative;
  z-index: 15;
  padding-top: 50vh; /* 最初のメッセージがビューポート中央から始まる */
  padding-bottom: 50vh; /* 最後のメッセージがビューポート中央で終わる */
}

.message-item {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.message-text {
  text-align: center;
  padding: 0 5%;
  width: 100%;
  color: #fff;
  margin: 0;
}

/* section8（divとして使用される場合）のための特別なスタイル */
.message-item[data-index="7"] .message-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メッセージセクション内のテキストスタイル */
.message-text.section-word,
.message-text.section-word2,
.message-text.section-word3 {
  font-size: 3.47vw;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.message-text.section-word2,
.message-text.section-word3 {
  font-size: 5.21vw;
}

.message-text.section-word3 {
  font-family: "Noto Sans JP", serif;
}

/* section8のスタイル */
.message-text .section8-box {
  padding-top: 0;
  width: 45.42vw;
  margin: 0 auto;
}

.message-text .section8-box p {
  font-size: 4.38vw;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
}

/* 既存のsection1-8スタイルを.message-bg用に調整 */
.message-bg.section1,
.message-bg.section2,
.message-bg.section3,
.message-bg.section4,
.message-bg.section5,
.message-bg.section6 {
  background-size: cover;
  background-position: center center;
  background-blend-mode: multiply;
}

.message-bg.section1 {
  background-image: url(../images/section1.png);
  background-blend-mode: multiply;
}

.message-bg.section2 {
  background-image: url(../images/section2.png);
  background-blend-mode: multiply;
}

.message-bg.section3 {
  background-image: url(../images/section3.png);
  background-blend-mode: multiply;
}

.message-bg.section4 {
  background-image: url(../images/section4.png);
  background-blend-mode: multiply;
}

.message-bg.section5 {
  background-image: url(../images/section5.png);
  background-blend-mode: multiply;
}

.message-bg.section6 {
  background: linear-gradient(#93b4e7, #76cbff);
}

.message-bg.section7 {
  background-color: #76cbff;
  background-image: url("../images/section7.png");
  background-repeat: no-repeat;
  background-size: 30.56vw auto;
  background-position: left top;
}

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

.message-static-section .section8-box {
  padding-top: 0;
  width: 45.42vw;
  margin: 0 auto;
  text-align: center;
}

.message-static-section .section8-box p {
  font-size: 4.38vw;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
}

/* グラデーションレイヤー */
.message-bg .section-gradation1 {
  width: 100%;
  height: 100%;
  background: linear-gradient(#ee9867e6, #644c7be6);
}

.message-bg .section-gradation2 {
  width: 100%;
  height: 100%;
  background: linear-gradient(#644c7be6, #303266e6);
}

.message-bg .section-gradation3 {
  width: 100%;
  height: 100%;
  background: linear-gradient(#1c2242e6, #7577c1e6);
}

.message-bg .section-gradation4 {
  width: 100%;
  height: 100%;
  background: linear-gradient(#8b7dcce6, #cea6dfe6, #fac5c3e6);
}

.message-bg .section-gradation5 {
  width: 100%;
  height: 100%;
  background: linear-gradient(#fac5c3e6, #edc39ce6, #93b4e7e6);
}

/* 広瀬優先: 画像レイヤーは sectionX、グラデは section-gradationX を別クラスで運用 */
.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {
  width: 100%;
  height: 59.03vw;
  background-size: cover;
  background-position: top center;
}
.section1 {
  background-image: url(../images/section1.png);
}
.section2 {
  background-image: url(../images/section2.png);
}
.section3 {
  background-image: url(../images/section3.png);
}
.section4 {
  background-image: url(../images/section4.png);
}
.section5 {
  background-image: url(../images/section5.png);
}
.section6 {
  background: linear-gradient(#93b4e7, #76cbff);
}

/* 見出しの別書体 */
.section-word2 {
  font-size: 5.21vw;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 59.03vw;
}
.section-word3 {
  font-size: 5.21vw;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* アニメ（両者共通をマージ） */
.section-word,
.section-word2,
.section-word3 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.section-word.is-visible,
.section-word2.is-visible,
.section-word3.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* グラデ（必要に応じてHTMLで併用） */
.section-gradation1 {
  width: 100%;
  height: 59.03vw;
  background: linear-gradient(#ee9867e6, #644c7be6);
}
.section-gradation2 {
  width: 100%;
  height: 59.03vw;
  background: linear-gradient(#644c7be6, #303266e6);
}
.section-gradation3 {
  width: 100%;
  height: 59.03vw;
  background: linear-gradient(#1c2242e6, #7577c1e6);
}
.section-gradation4 {
  width: 100%;
  height: 59.03vw;
  background: linear-gradient(#8b7dcce6, #cea6dfe6, #fac5c3e6);
}
.section-gradation5 {
  width: 100%;
  height: 59.03vw;
  background: linear-gradient(#fac5c3e6, #edc39ce6, #93b4e7e6);
}

/* section7 */
.section7 {
  width: 100%;
  height: 59.03vw;
  background-color: #76cbff;
  background-image: url("../images/section7.png");
  background-repeat: no-repeat;
  background-size: 30.56vw auto;
  background-position: left top;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section7 strong {
  padding-top: 358px;
}

/* section8 */
.section8 {
  width: 100%;
  background-image: url(../images/section8.png),
    linear-gradient(to top, #76cbff 0%, #76cbff 60%, #76cbff 60%, #76cbff 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: top, top;
  position: relative;
}
.section8-img {
  width: 100%;
  height: 895px;
}
.section8 img {
  width: 100%;
}
.section8 p {
  font-size: 4.38vw;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
}
.section8-box {
  padding-top: 580px;
  width: 45.42vw;
  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;
  position: relative;
  z-index: 4;
}

.works_container {
  position: relative;
  width: 100%;
}

.works_container_inner {
  width: 100%;
  position: relative;
  display: flex;

  justify-content: flex-end;
}
.works_top_cloud {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.works-box_img_area {
  position: relative;
}

.q_blue {
  position: absolute;
  top: 115px;
  right: -55px;
  width: 135px;
  top: 7.986vw;
  right: -3.819vw;
  width: 9.375vw;
}

.q_yerrow {
  position: absolute;
  width: 424px;
  height: auto;
  bottom: 240px;
  left: -500px;
  width: 29.444vw;
  height: auto;
  bottom: 16.667vw;
  left: 0;
}

.works-box {
  display: flex;
  justify-content: flex-end;
  gap: 179px;
  width: 100%;
  z-index: 10;
  position: relative;
  margin-top: 30vw;
  padding-right: 150px;
  background: #fff;
}

.works-word {
  font-size: 6.94vw;
  line-height: 100%;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  color: #00a4e5;
  writing-mode: vertical-lr;
  position: relative;
  margin-top: 100px;
}

.works-word2 {
  padding-top: 71px;
  padding-right: 34px;
  writing-mode: vertical-lr;
  white-space: nowrap;
}
.mofumofu {
  width: 24.65vw;
  height: auto;
  padding-top: 19.24vw;
  max-width: none;
  display: block; /* 余計な下マージン防止 */
  object-fit: contain; /* 元比率を保持 */
}

@media screen and (min-width: 1600px) {
  .works-box {
    gap: 8.95vw;
    width: 100%;

    margin-top: 30vw;
    padding-right: 7.5vw;
  }
  .works-word {
    font-size: 6.94vw;
    line-height: 5vw;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    color: #00a4e5;
    writing-mode: vertical-lr;
    position: relative;
    margin-top: 5vw;
  }

  .works-word2 {
    padding-top: 3.55vw;
    padding-right: 1.7vw;
    writing-mode: vertical-lr;
    white-space: nowrap;
  }
  .mofumofu {
    width: 24.65vw;
    height: 100%;
    padding-top: 19.24vw;
  }
}
/* ========== SLIDES / DETAIL ========== */
.slides-wrapper {
  position: relative;
  width: 100%;
}

.slides {
  padding-top: 200px;
  position: relative;
  z-index: 5;
  will-change: transform; /* パフォーマンス最適化 */

  /* 林 1024 */
  background-color: #fff;
}

/* 林 1024 */
/* .slides::before {
  content: "";
  position: absolute;
  bottom: -43vw;
  left: 0px;
  width: 100%;
  height: 970px;
  height: 67vw;
  background-image: url(../images/section-end_cloud.png);
  background-size: contain;
  background-repeat: no-repeat;
} */

.section-end_cloud {
  position: absolute;
  bottom: -225px;
  left: 0px;
  width: 100%; /* 画像サイズ */
}

@media screen and (min-width: 1600px) {
  .section-end_cloud {
    bottom: -18vw;
  }
}

.slides h1 {
  font-size: 9.6vw;
  font-family: "Gabarito", serif;
  line-height: 130%;
  font-weight: 800;
  padding-bottom: 74px;
  margin: 0 auto;
  width: fit-content;
  letter-spacing: 12.6px;
  position: sticky;
  top: 0;
}
.slides-titlesp1,
.slides-titlesp2 {
  display: none;
}

.slide {
  width: 100%;
  max-width: 1200px;
  height: 900px;
  margin: 0 auto;
  position: relative;
}

.box1-img-pc,
.box2-img-pc,
.box3-img-pc,
.box4-img-pc,
.box5-img-pc,
.box6-img-pc {
  width: 100%;
  height: auto;
  position: relative;
}

.box2-img-pc {
  border-radius: 0;
}

.slide-title {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding-top: 23px;
  padding-bottom: 23px;

  border-radius: 0 30px 0 0;
  width: 675px;
  height: 135px;
}

.slide-title::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0px;
  width: 30px; /* 画像サイズ */
  height: 30px;
  background-image: url(../images/Subtract.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.slide-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -30px;
  width: 30px; /* 画像サイズ */
  height: 30px;
  background-image: url(../images/Subtract.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.slide-title p {
  font-size: 16px;
  line-height: 140%;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  color: #999;
  display: flex;
  align-items: center;
}
.slide-title p::after {
  content: "";
  width: 45px;
  height: 1px;
  background: #999;
  margin-left: 10px;
}
.slide-title strong {
  font-size: 48px;
  line-height: 150%;
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  color: #000;
  letter-spacing: 4.8px;
}

/* 詳細テキスト（共通） */
.detail {
  font-size: 16px;
  line-height: 200%;

  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  width: 100%;
  letter-spacing: 0.8px;

  padding: 30px 15px 120px;
}

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

/* reveal アニメ（追加） */
.slide .detail {
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 120px;
}
.slide .detail .reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
  opacity: 0.001;
  transition: opacity 0.3s linear;
  transition-delay: calc(var(--delay, 0ms) + 200ms);
}
.slide .detail .reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--delay, 0ms + 4000ms);
}
.slide .detail .reveal.is-inview {
  opacity: 1;
}
.slide .detail .reveal.is-inview::after {
  transform: translateX(101%);
}
@media (prefers-reduced-motion: reduce) {
  .slide .detail .reveal {
    opacity: 1;
    transition: none;
  }
  .slide .detail .reveal::after {
    transition: none;
    transform: translateX(101%);
  }
}

.details_section_last {
  position: relative;
}

/* details_section */
.details_section {
  position: sticky;
  padding-top: 50px;
  top: 8vw;
}

.details_section:last-child {
  margin-bottom: 0;
}

/* スペーサー: .slidesのtranslateY移動時の余裕スペース */
.details-section-spacer {
  height: 22vh;
  pointer-events: none; /* クリックイベントを無視 */
}
/*
.details_section:nth-of-type(1) {
  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(2) {

  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(3) {

  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(4) {

  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(5) {

  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(6) {

  top: 140px;
  top: 9.722vw;
}
.details_section:nth-of-type(7) {

  top: 140px;
  top: 9.722vw;
} */

.balloon {
  width: 216px;
  height: 329px;
  position: absolute;
  bottom: -250px;
  left: 320px;
}

/* ========== WORK WITH US ========== */

.work-with-us {
  width: 100%;
  background-color: #76cbff;
  position: relative;
  z-index: 4;
  margin-top: -200px;
}

.work-with-us_wrap {
  width: 100%;

  position: relative;
}

.rainbow_area {
  height: 560px;
  height: 48vw;
  width: 100%;
  position: relative;
}

.rainbow {
  position: absolute;

  left: -530px;
  bottom: -95px;
  width: 1074px;
  height: 511px;
}

.onthesea_cloud {
  position: absolute;
  width: 815px;
  height: 375px;
  right: -260px;
  bottom: -60px;
}

.us-title_wrap {
  position: relative;
  width: 100%;
}
.us-title {
  margin: 0 auto;
  position: absolute;
  z-index: 100;
  top: 156px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.sea_top {
  width: 100%;
  height: auto;
}
.sea_bottom {
  margin-top: -20px;
  width: 100%;
  height: auto;
}

.us-title h2 {
  font-size: 13.89vw;
  font-size: min(13.8vw, 200px);
  font-family: "Gabarito", serif;
  font-weight: 700;
  margin: 0 auto;
  text-align: center;
  color: #fff600;
  position: relative;
  z-index: 100;
}
.us-title p {
  font-size: 40px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  margin: 0 auto;
  width: fit-content;
  color: #fff;
  letter-spacing: 0.05em;
}

.crews-img {
  width: 170px;
  height: auto;
  position: absolute;
  top: -95px;
  right: 65px;
}

.img-box {
  width: 100%;
  height: 1500px;
  position: relative;
  background-color: #0084d5;
  margin-top: -10px;
}

@media screen and (min-width: 1600px) {
  .sea_top {
    width: 100%;
    max-height: 750px;
  }
  .sea_bottom {
    margin-top: -20px;
    width: 100%;
    height: 590;
  }
}

/* 20251028merge */
.fish1 {
  width: 355px;
  height: auto;
  position: absolute;
  top: -300px;
  left: 1px;
  z-index: 20;
}
.fish2 {
  width: 660px;
  height: auto;
  position: absolute;
  top: 302px;
  left: 0;
  z-index: 10;
}
.fish3 {
  width: 460px;
  height: auto;
  position: absolute;
  top: 1387px;
  right: 0;
  z-index: 10;
}

.fish4 {
  display: none;
}

.bubble1,
.bubble2,
.bubble3,
.bubble4 {
  opacity: 0.7;
  mix-blend-mode: screen;
}

.bubble1 {
  width: 126px;
  height: auto;
  position: absolute;
  top: 165px;
  right: 77px;
  z-index: 20;
}
.bubble2 {
  width: 160px;
  height: auto;
  position: absolute;
  top: 412px;
  left: 300px;
  z-index: 20;
}
.bubble3 {
  width: 101px;
  height: auto;
  position: absolute;
  top: 1279px;
  right: 565px;
  z-index: 20;
}
.bubble4 {
  width: 112px;
  height: auto;
  position: absolute;
  top: 1551px;
  right: 136px;
  z-index: 20;
}

.people1 {
  width: 245px;
  height: auto;
  position: absolute;
  top: -132px;
  left: calc(50% + +90px);
  z-index: 30;
}
.people2 {
  width: 83px;
  height: auto;
  position: absolute;
  top: 307px;
  left: calc(50% + -375px);
  z-index: 30;
}
.people3 {
  width: 124px;
  height: auto;
  position: absolute;
  top: 337px;
  left: calc(50% + -158px);
  z-index: 30;
}
.people4 {
  width: 165px;
  height: auto;
  position: absolute;
  top: 412px;
  left: calc(50% + +400px);
  z-index: 30;
}
.people5 {
  width: 113px;
  height: auto;
  position: absolute;
  top: 680px;
  left: calc(50% + 400px);
  z-index: 30;
}
.people6 {
  width: 60px;
  height: auto;
  position: absolute;
  top: 945px;
  left: calc(50% + -605px);
  z-index: 30;
}
.people7 {
  width: 208px;
  height: auto;
  position: absolute;
  top: 900px;
  left: calc(50% + -276px);
  z-index: 30;
}
.people8 {
  width: 289px;
  height: auto;
  position: absolute;
  top: 1173px;
  left: calc(50% + -195px);
  z-index: 30;
}

.vector1 {
  width: 437px;
  height: auto;
  position: absolute;
  top: -67px;
  left: calc(50% + -173px);
  z-index: 20;
}
.vector2 {
  width: 389px;
  height: auto;
  position: absolute;
  top: 110px;
  left: calc(50% + -406px);
  z-index: 20;
}
.vector3 {
  width: 440px;
  height: auto;
  position: absolute;
  top: 461px;
  left: calc(50% + +180px);
  z-index: 20;
}
.vector4 {
  width: 436px;
  height: auto;
  position: absolute;
  top: 694px;
  left: calc(50% + +10px);
  z-index: 20;
}
.vector5 {
  width: 321px;
  height: auto;
  position: absolute;
  top: 840px;
  left: calc(50% + -625px);
  z-index: 20;
}
.vector6 {
  width: 453px;
  height: auto;
  position: absolute;
  top: 969px;
  left: calc(50% + -444px);
  z-index: 20;
}

.us-wordimg {
  width: 344px;
  height: auto;
  position: absolute;
  top: 82px;
  left: calc(50% - 124px);
  z-index: 30;
}
.us-word1 {
  font-size: 38px;
  font-family: "Murecho", serif;
  font-weight: 700;
  line-height: 120%;
  margin: 0 auto;
  width: 275px;
  color: #18a7ff;
  position: absolute;
  top: 240px;
  left: calc(50% - 351px);
  z-index: 30;
}
.us-word2 {
  font-size: 48px;
  font-family: "BIZ UDPGothic", serif;
  font-weight: 700;
  line-height: 135%;
  margin: 0 auto;
  width: 328px;
  color: #18a7ff;
  text-align: center;
  position: absolute;
  top: 575px;
  left: calc(50% + 215px);
  z-index: 30;
}
.us-word3 {
  font-size: 36px;
  font-family: "Yu Gothic", serif;
  font-weight: 700;
  line-height: 120%;
  margin: 0 auto;
  width: 375px;
  color: #18a7ff;
  position: absolute;
  top: 795px;
  left: calc(50% + 35px);
  z-index: 30;
}
.us-word4 {
  font-size: 40px;
  font-family: "BIZ UDPGothic", serif;
  font-weight: 700;
  line-height: 100%;
  margin: 0 auto;
  width: 200px;
  color: #18a7ff;
  position: absolute;
  top: 945px;
  left: calc(50% - 565px);
  z-index: 30;
}
.us-word5 {
  font-size: 48px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  line-height: 120%;
  margin: 0 auto;
  width: 384px;
  color: #18a7ff;
  position: absolute;
  top: 1133px;
  left: calc(50% - 415px);
  z-index: 30;
}

.people1,
.people2,
.people3,
.people4,
.people5,
.people6,
.people7,
.people8,
.vector1,
.vector2,
.vector3,
.vector4,
.vector5,
.vector6,
.us-wordimg,
.us-word1,
.us-word2,
.us-word3,
.us-word4,
.us-word5 {
  opacity: 0;
  visibility: hidden;
}
/* 20251028mergeここまで */

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

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

/* ========== ギャラリー ========== */

.gallery {
  padding-bottom: 275px;
  /* padding-top: 50px; */
}

.gallery-title {
  font-size: 200px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 130%;
  width: fit-content;
  color: #fff600;
}
.gallery-slides {
  display: flex;
  gap: 30px;
  transition: transform 0.5s ease;
}

.gallery-slides > .gallery-slide:not([data-clone="1"]):nth-of-type(1) {
  /* … */
}

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

.gallery-slide {
  width: 750px;
  background: #fff;
  margin: 0 auto;
  cursor: pointer;
}
.gallery-slide {
  flex: 0 0 750px; /* ← これが超大事：縮ませない＆基準幅を 750px に */
  width: 750px; /* 補助。なくてもOKだが併記推奨 */
  max-width: none; /* どこかで max-width:100% が当たってる場合の保険 */
  box-sizing: border-box;
}

/* .gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
} */

.gallery-slide img {
  display: block;
  width: 100% !important;
  height: 422px !important;
  min-height: 422px !important;
  max-height: 422px !important;
  object-fit: cover !important;
  object-position: center !important;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.gallery-slide[data-clone="1"] img {
  user-select: none;
}
.gallery-slide p {
  font-size: 14px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 150%;
  margin: 0 auto;
  color: #000;
  width: 690px;
  padding: 24px;
}

.slide-tag {
  display: flex;
  gap: 8px;
  padding: 20px 24px 24px;
}
.slide-tag .tmc,
.slide-tag .photo,
.slide-tag .office {
  font-size: 16px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 150%;
  color: #fff;
}
.tmc {
  width: 68px;
  height: 32px;
  background: #ff70b1;
  border-radius: 100px;
  padding-top: 4px;
  padding-left: 8px;
}
.photo {
  width: 79px;
  height: 32px;
  background: #00c7c7;
  border-radius: 100px;
  padding-top: 4px;
  padding-left: 8px;
}
.office {
  width: 96px;
  height: 32px;
  background: #fecb00;
  border-radius: 100px;
  padding-top: 4px;
  padding-left: 8px;
}
.tmc span {
  width: 52px;
  margin: 0 auto;
}

.gallery-slider {
  margin-top: -20px;
}

/* ========== INTERVIEW（背景サイズは広瀬優先） ========== */

.interview {
  width: 100%;

  position: relative;
  padding-top: 275px;
  padding-bottom: 100px;
}
.interview-box {
  width: 100%;
}
.interview-title {
  font-size: 200px;
  font-family: "Gabarito", serif;
  line-height: 130%;
  font-weight: 700;
  color: #48cf38;
  margin: 0 auto;

  padding-bottom: 70px;
  text-align: center;
}

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

@media screen and (min-width: 1600px) {
  .works {
  }
  .gallery_interview_wrap {
    background-size: cover;
    background-position: 50% 300px;
    margin-top: -410px;

    padding-bottom: 530px;
  }
  .interview {
    padding-top: 450px;
  }

  .data {
    margin-top: -620px;
  }
}

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

.data-title {
  /* width: 944px; */
  margin: 0 auto;
  padding-top: 650px;
  padding-top: 45vw;
  padding-bottom: 70px;
  pointer-events: none;
}

@media (min-width: 1441px) {
  .data {
    background-size: 100%;
  }

  .data_container {
    background-size: 100%;
  }

  .data-title {
  }
}

.data-title h2 {
  font-size: 200px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 130%;
  color: #fff600;
  text-align: center;
}
.data-title p {
  font-size: 40px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  line-height: 180%;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
}

.percent-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* height: 2000px; */
  /* position: relative; */
}

.tmc-data-grid {
  display: grid;
  justify-content: center;
  max-width: 1200px;
  max-height: 1200px;
  margin: 0 auto;
  gap: 55px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "card1 card1 card2"
    "card3 card4 card2"
    "card3 card5 card5";
}
/* 共通スタイル */
.card {
  background-color: #fff;
  border-radius: 30px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}

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

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

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

.percent-q {
  font-size: 24px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 120%;
  /* padding-top: 40px;
  padding-left: 24px; */
}
.percent-br,
.percent1-boxsp,
.percent4sp {
  display: none;
}
.yes {
  font-size: 90px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  color: #ff629e;
  letter-spacing: 0.05em;
}

.numbers {
  display: flex;
  align-items: baseline;
}
.math {
  font-size: 130px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  color: #ff629e;
  letter-spacing: 0.05em;
  display: inline-block;
  width: 270px;
}
.mark {
  font-size: 60px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  color: #181818;
  letter-spacing: 0.05em;
  display: inline-block;
}
.mark2 {
  font-size: 64px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 150%;
  color: #181818;
  letter-spacing: 0.05em;
}

.percent1 {
  /* background: #fff;
  width: 779px;
  height: 360px;
  border-radius: 30px; */
  /* position: absolute;
  bottom: 1512px;
  left: calc(50% - 600px); */
}
.percent2 {
  /* background: #fff;
  width: 360px;
  height: 784px;
  border-radius: 30px; */
  /* position: absolute;
  bottom: 1088px;
  right: calc(50% - 600px);  */
}
.percent3 {
  /* background: #fff;
  width: 360px;
  height: 784px; */
  /* border-radius: 30px;
  position: absolute;
  bottom: 664px; */
}
.percent4 {
  /* background: #fff;
  width: 360px;
  height: 360px;
  border-radius: 30px;
  margin: 443px auto 0; */
}
.percent5 {
  /* background: #fff;
  width: 779px;
  height: 360px;
  border-radius: 30px;
  position: absolute;
  bottom: 664px;
  right: calc(50% - 600px); */
}

.percent1-box {
  display: flex;
  gap: 50px;
  padding-top: 28px;
}
.percent1-box img {
  width: 379px;
  height: auto;
}
.percent1-word {
  padding-top: 30px;
}

/* .percent2 .percent-q {
  padding-bottom: 66px;
} */
.percent2 .yes,
.percent2 strong {
  /* padding-left: 26px; */
}
.percent2 img {
  width: 293px;
  height: auto;
  padding-top: 52px;
}

.percent3 img {
  width: 184px;
  height: auto;
  margin-top: 50px;
  /* margin-left: 88.5px; */
}
.percent3-box {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.percent3-ratio1 {
  display: block;
  position: absolute;
  top: 33px;
  right: -27px;
}
.percent3-ratio1 strong {
  font-size: 36px;
  line-height: 100%;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #181818;
  font-family: "Noto Sans JP", serif;
}
.percent3-ratio2 {
  display: block;
  position: absolute;
  bottom: 46px;
  left: 48px;
}

.percent3-ratio2 strong {
  font-size: 36px;
  line-height: 100%;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  font-family: "Noto Sans JP", serif;
}
.ratio-font1 {
  font-size: 64px;
  line-height: 100%;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: "Gabarito", serif;
}
.ratio-font2 {
  font-size: 32px;
  line-height: 100%;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: "Gabarito", serif;
}

.graph1 {
  display: block;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  position: relative;
}

.graph2_box {
  position: relative;
  width: 264px;
  height: 264px;
}

.graph2 {
  width: 264px;
  height: 264px;
  border-radius: 50%;
  position: relative;
  z-index: 0;
}

.ratio {
  font-size: 160px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  color: #ff629e;
  letter-spacing: 0.08em;
  /* padding-left: 80px; */
  padding-top: 30px;
  padding-bottom: 30px;
}
.koron {
  color: #686868;
  font-size: 128px;
}
.four {
  color: #45b7ee;
}

.percent4 .yes {
  /* padding-left: 37.5px; */
}
.percent4 .math {
  /* padding-left: 37.5px; */
}

.percent5-box {
  /* padding-left: 56px; */
  display: flex;
  gap: 40px;
  position: relative;
  align-items: center;
  justify-content: center;
}

.percent5-ratio1 {
  position: absolute;
  bottom: 19px;
  left: 12px;
  color: #ff629e;
}
.percent5-ratio1,
.percent5-ratio2,
.percent5-ratio3 {
  z-index: 2;
}

.percent5-age1 {
  font-size: 40px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 90%;
  letter-spacing: 0.05em;
}
.percent5-age1 span {
  font-size: 25px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 90%;
  letter-spacing: 0.05em;
}

.percent5-math1 {
  font-size: 96px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 90%;
  letter-spacing: 0.05em;
}
.percent5-math1 span {
  font-size: 32px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 90%;
  letter-spacing: 0.05em;
}

.percent5-age2 {
  font-size: 32px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.05em;
}
.percent5-age2 span {
  font-size: 25px;
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.05em;
}

.percent5-math2 {
  font-size: 48px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.05em;
}

.percent5-math2 span {
  font-size: 24px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.05em;
}

.percent3-ratio1 .percent,
.percent3-ratio2 .percent {
  font-size: 32px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.05em;
}

.percent3-ratio2 .percent {
  color: #fff;
}

.percent5-ratio2 {
  position: absolute;
  top: 0;
  right: -7px;
  color: #181818;
}
.percent5-ratio3 {
  position: absolute;
  top: 95px;
  right: 9px;
  color: #181818;
}
/* =========================================================
   Safari対応：カスタムプロパティ（角度アニメ可能）
========================================================= */
@property --reveal {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* =========================================================
   共通設定
   ========================================================= */
/* 12時方向を起点とする（0deg＝右なので -90degにする） */
:root {
  --start: 90deg; /* 12時起点 */
  --tweak: 0deg; /* 必要なら ±で微調整 */
}
/* =========================================================
   円グラフ1（男女比）
   ========================================================= */
:root {
  --start: 0deg; /* 12時起点 */
  --tweak: -0deg; /* 必要なら ±で微調整 */
}

/* ---- graph1 ---- */
.graph1 {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 50%;

  --male: 38;
  --aMale: calc(var(--male) * 3.6deg);
  --eps: 0.5deg; /* 内部境界の重なり */
  --wrap: 1deg; /* 0°/360°の継ぎ目の重なり（←追加） */

  background: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    /* 0°の少し手前からブルーを開始して継ぎ目を埋める */ #45b7ee
      calc(-1 * var(--wrap)) var(--aMale),
    /* ピンクは内部境界を少し重ね、終端を360°より先まで伸ばす */ #ff629e
      calc(var(--aMale) - var(--eps)) calc(360deg + var(--wrap))
  );
}

/* マスク（起点はそのまま） */
.graph1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    transparent var(--reveal),
    black 0
  );
  mask: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    transparent var(--reveal),
    black 0
  );
  --reveal: 360deg;
}

/* 再生アニメーション */
.graph1.is-play::after {
  --reveal: 0deg;
  animation: pie-reveal 1.2s ease-out forwards;
}

@keyframes pie-reveal {
  from {
    --reveal: 0deg;
  }
  to {
    --reveal: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graph1.is-play::after {
    animation: none;
    --reveal: 360deg;
  }
}

/* ===== 円グラフ2（年代比） ===== */
.graph2 {
  --c20: #45b7ee;
  --c30: #ff70a7;
  --c4050: #ffea00;

  --p20: 16;
  --p30: 23;
  --p4050: 61;

  --a20: calc(var(--p20) * 3.6deg);
  --a30: calc(var(--p30) * 3.6deg);
  --a4050: calc(var(--p4050) * 3.6deg);

  --eps: 0.5deg;
  --wrap: 1deg;

  width: 270px;
  height: 270px;
  border-radius: 50%;
  position: relative;

  background: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    /* 最初の20代を 0°より少し手前から開始 */ var(--c20) calc(-1 * var(--wrap))
      var(--a20),
    /* 内部境界は -eps で重ねる */ var(--c30) calc(var(--a20) - var(--eps))
      calc(var(--a20) + var(--a30)),
    /* 最後のセグメントを 360°より先まで延長 */ var(--c4050)
      calc(var(--a20) + var(--a30) - var(--eps)) calc(360deg + var(--wrap))
  );

  /* マスクの起点は同じでOK */
  --reveal: 0deg;
  -webkit-mask: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    #000 0 var(--reveal),
    transparent 0
  );
  mask: conic-gradient(
    from calc(var(--start) + var(--tweak)),
    #000 0 var(--reveal),
    transparent 0
  );
}

/* アニメーション定義（共通） */
@keyframes pie-reveal {
  to {
    --reveal: 360deg;
  }
}
.graph2.is-animating {
  animation: pie-reveal 1.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .graph1.is-play::after {
    animation: none;
    --reveal: 360deg;
  }
  .graph2 {
    animation: none !important;
    --reveal: 360deg;
  }
}

/* 数字のちらつき防止 */
.percent5-math1,
.percent5-math2 {
  will-change: contents;
}

/* ========== WANTED / ENTRY ========== */

.wanted_entry_container {
  background-color: #76cbff;
  width: 100%;
  position: relative;
  z-index: 20;
}

.wanted {
  width: 100%;
  position: relative;
  z-index: 20;
}

.wanted_bottom {
  position: relative;
  z-index: 0;
}

.wanted_bottom_people {
  position: relative;
  z-index: 10;
}

.wanted-people {
  position: absolute;
  left: 50%;
  bottom: -190px;
  width: 1370px;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none; /*追記重なり対応 */
}

.wanted_bottom_img {
  width: 100%;
  height: auto;
  margin-top: -230px;
  display: inline-block;
  pointer-events: none; /*追記重なり対応 */
}

.wanted_container {
  background-image: url("../images/block.png");
  background-repeat: repeat;
  position: relative;
  background-size: 25%;
  padding-bottom: 132px;
  z-index: 5;
}
.wanted_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.wanted_inner::before {
  content: "";
  background-image: url("../images/noise.png");
  background-repeat: repeat;
  background-size: 25%;
  background-blend-mode: overlay;
  opacity: 0.5; /* ←ここで透明度調整（0.0〜1.0） */
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.wanted_container::before {
  content: "";
  background-color: #cab89e;
  height: 19px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.wanted_container::after {
  content: "";
  background-color: #cab89e;
  height: 19px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.wanted-title {
  width: 880px;
  padding-left: 45px;
}
.wanted-title strong {
  font-size: 200px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  color: #fff;
  text-shadow: 10px 10px #00000040;
}
.wanted-title span {
  font-size: 40px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  color: #ffea00;
  text-shadow: 4px 4px #00000040;
  padding-left: 38px;
}
.wanted-model {
  display: flex;
  gap: 90px;
  padding-top: 101px;
  width: 1200px;
  margin: 0 auto;
}
.wanted-model img {
  width: 555px;
  height: auto;
  text-shadow: 10px 10px #00000040;
}

/* entry */

.entry {
  padding-bottom: 400px;
  position: relative;
  z-index: 25;
}

.entry_title_area {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.entry-left1 {
  position: absolute;
  left: 100px;
  top: -53px;
  width: 337px;
  height: auto;
}

.entry-left2 {
  position: absolute;
  left: -200px;
  top: 3px;
  width: 459px;
  height: auto;
}

.entry-right {
  position: absolute;
  right: -200px;
  top: 3px;
  width: 460px;
  height: auto;
}

.entry-title {
  position: relative;
  /* width: 600px; */
  margin: 0 auto;
  z-index: 10;
}

.entry-title h2 {
  font-size: 200px;
  font-family: "Gabarito", serif;
  font-weight: 700;
  color: #fff600;
  text-align: center;
  line-height: 100%;
}
.entry-title p {
  font-size: 63px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
}
.entry-word {
  text-align: center;
}

.entry-word_txt {
  position: relative;
  display: inline-block;
  color: #000;
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
}

.entry-word_txt::before {
  content: "";
  background-image: url(../images/slash.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -30px;
  bottom: 6px;
  width: 32px;
  height: 43px;
}
.entry-word_txt::after {
  content: "";
  background-image: url(../images/slash.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -30px;
  bottom: 6px;
  width: 32px;
  height: 43px;
  transform: scaleX(-1);
}

.entry-wordsp {
  display: none;
}

.outline-text {
  position: relative;
  display: inline-block;
  z-index: 0;
  color: #000;
}

.outline-text::before {
  content: attr(data-text);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: 5px #fff;
  /* filter: drop-shadow(3px 3px 0px #fff); */
}
.entry-btns {
  display: flex;
  gap: 22px;
  width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
}
.entry-btn {
  display: block;
  width: 385px;
  height: 300px;
  background: #fff;
  border-radius: 50px;
  box-shadow: 10px 10px #3ba6e6;
}
.btn-title1 p,
.btn-title2 p,
.btn-title3 p {
  font-size: 32px;
  font-family: "M PLUS 1p", serif;
  line-height: 120%;
  font-weight: 700;
  padding-top: 40px;
  margin: 0 auto;
}
.btn-title1 p {
  width: 256px;
}
.btn-title2 p {
  width: 352px;
}
.btn-title3 p {
  width: 211px;
}
.btn-title1 img,
.btn-title2 img {
  display: block;
  width: 322px;
  height: auto;
  margin: 0 auto;
  padding-top: 40px;
}
.btn-title3 img {
  display: block;
  width: 142px;
  height: auto;
  margin: 0 auto;
  padding-top: 40px;
}

/* ========== FOOTER ========== */
/*

/* <link  rel="stylesheet" href="assets/css/footer_style.css"  type="text/css" media="all" charset="UTF-8" /> */

/* ========== スライダー ========== */
.box_img_sp {
  display: none;
}

.iv3-slider {
  position: relative;
  /* JSが幅をセットします（例: フル幅） */
  margin: 0 auto;
  padding-top: 50px;
}
.iv3-viewport {
  position: relative;
  width: 100%;
  height: 530px;
}
.iv3-track {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iv3-item {
  position: absolute;
  width: 440px;
  height: 530px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  border: 1px solid #000;
  border-radius: 30px 30px 0 30px;
  overflow: clip;
  background-color: #f1f4f7;
  padding: 24px;
  cursor: pointer;
}

.iv3-track {
  display: flex;
  gap: 24px;
}
.iv3-item {
  flex: 0 0 440px; /* ← JSの fallbackSlideW と合わせる or 実幅に合わせる */
  max-width: none;
  transform-origin: 50% 50%; /* 扇の中心がズレにくい */
  will-change: transform;
}

.iv3-viewport {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.iv3-item,
.iv3-viewport {
  user-select: none;
  -webkit-user-select: none;
}

.iv3-item img {
  -webkit-user-drag: none;
}
.iv3-item_wrap {
  width: 100%;
  height: 100%;
}

.iv3-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iv3-arrow {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* SPでは常時タッチ優先にしたい場合はブレークポイントで */
@media (max-width: 768px) {
  .iv3-viewport {
    touch-action: none;
  } /* ページ縦スクロールが干渉しない構成なら有効 */
}

/* 実機の取りこぼし対策（SPのみ強め設定） */
@media (pointer: coarse) {
  .iv3-viewport {
    touch-action: none; /* 横操作を最優先 */
    overscroll-behavior: contain; /* ゴム戻り連鎖を遮断 */
  }
  .iv3-item,
  .iv3-viewport {
    user-select: none;
    -webkit-user-select: none;
  }
  .iv3-item img {
    pointer-events: none;
    -webkit-user-drag: none;
  }
}

.arrow_prev {
  width: 21px;
  height: auto;
}
.arrow_next {
  width: 21px;
  height: auto;
  transform: rotate(180deg);
}

.iv3-prev {
  left: -12px;
}
.iv3-next {
  right: -12px;
}

.iv3-dots {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: -25px;
  align-items: center;
}
.iv3-dot {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
.iv3-dot.is-active {
  opacity: 1;
  width: 95px;
  height: 95px;
  border: 2px solid #fff;
}
.iv3-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.gallery-arrow {
  display: none;
}

.gallery-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.gallery-modal.is-active--1 {
  display: block;
}
.gallery-modal.is-inactive--1 {
  display: none;
}

.modal__overlay {
  z-index: -1;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.gallery-modal__dialog {
  position: absolute;
  z-index: 1;
  max-width: 980px;
  width: 80vw;
  margin: 0 auto;

  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gallery-modal__txt {
  padding: 24px 24px 0;
  background: #fff;
}
.modal__close {
  position: absolute;
  top: -30px;
  right: -30px;
  border: 0;
  background: none;
  font-size: 28px;
  cursor: pointer;
}
.gallery-modal__media {
  width: 100%;
  background: #fff;
}
.gallery-modal__media img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-footersp {
  display: none;
}

.slide-title1 strong {
  position: relative;
}
.slide-title2 strong {
  position: relative;
}
.slide-title3 strong {
  position: relative;
}
.slide-title4 strong {
  position: relative;
}
.slide-title5 strong {
  position: relative;
}
.slide-title6 strong {
  position: relative;
}

.imgbox {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  width: 100%;
  height: 500px;
}

.box1-imgbox {
  background-color: #e9bfc0;
}
.box3-imgbox {
  background-color: #ffd2e4;
}
.box4-imgbox {
  background-color: #b6f4f5;
}
.box5-imgbox {
  background-color: #fffb86;
}
.box6-imgbox {
  background-color: #fff;
}

.slide_btn {
  width: 260px;
  height: 55px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 4px 4px 0 0 #000;

  color: #000;
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 20px;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;

  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-top: 10px;
}

.slide_btn:hover {
  box-shadow: none;
  transform: translate(4px, 4px);
}

.link_icons {
  width: 25px;
  height: 25px;
}

.gallery-slide p {
  width: 690px;
}

.view-rightbox {
  width: 339px;
  height: 152px;
  background-color: #f1f4f7;
  border-radius: 30px 0px 0px 0px;
  position: absolute;
  bottom: -1px;
  right: -1.5px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  padding: 18px;
}

.view-rightbox strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  font-family: "M PLUS 1p", serif;
  line-height: 150%;
  letter-spacing: 0.05em;

  -webkit-text-stroke: 1px black;
}
.view-debut {
  font-size: 20px;
  font-weight: 700;
  font-family: "Gabarito", serif;
  line-height: 150%;
  padding-bottom: 10px;
}
.debut-years {
  color: #000;
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
  border: 1px solid #000;
  background-color: #fff;
  padding: 5px;
  display: inline-block;
  /* width: 111px; */
}

.viewmore-tag {
  position: absolute;
  border-radius: 15px 0 0 0;
  border: 1px solid #000;
  background: #fff694;
  display: inline-flex;
  padding: 10px 10px 10px 15px;
  align-items: center;
  gap: 10px;
  right: -1px;
  bottom: -1px;
}

.viewmore-tag p {
  font-size: 20px;
  font-weight: 700;
  font-family: "Gabarito", serif;
}
.viewmore-tag img {
  width: 9px;
  height: 15px;
}

.detail {
  padding-top: 20px;
}
.slide-title p {
  padding-left: 15px;
}
.slide-title strong {
  padding-left: 15px;
}

.view-slide {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 30px 30px 0px 30px;
  position: relative;
  border: 1px solid #000;
}

.view-slide img {
  display: block;
  width: 330px;
  height: 330px;
  position: absolute;

  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
}

.view-slide1-bk {
  background-image: url("../images/card_slidebk1.png");
}

.view-slide2-bk {
  background-image: url("../images/card_slidebk2.png");
}

.view-slide3-bk {
  background-image: url("../images/card_slidebk3.png");
}

.view-slide4-bk {
  background-image: url("../images/card_slidebk4.png");
}
.view-slide5-bk {
  background-image: url("../images/card_slidebk5.png");
}
.view-slide6-bk {
  background-image: url("../images/card_slidebk6.png");
}

.font-color-slide1 {
  color: #48cf38;
}
.font-color-slide2 {
  color: #009eff;
}
.font-color-slide3 {
  color: #ff70b1;
}
.font-color-slide4 {
  color: #009eff;
}
.font-color-slide5 {
  color: #ff70b1;
}
.font-color-slide6 {
  color: #ff70b1;
}

.modal-content-box {
  width: 957px;
  height: 600px;
  margin: 0 auto;
  background-image: url("../images/graphpaper.png");
  background-repeat: repeat;
  box-shadow: 10px 10px 0 #0000007d;
  display: flex;
  padding: 30px 24px;
  gap: 24px;
  position: relative;
  border: 1px solid #000;
}

.modal-content-card {
  width: 390px;
  height: auto;
  order: 2;
  object-fit: contain;
}

.modal-content-card-btn {
  width: 56px;
  height: 55px;
  background: #fff;
  border: 1px solid #000;
  position: absolute;
  top: -55px;
  left: -1px;
}

.modal-content-card-btn img {
  display: block;
  width: 28px;
  height: auto;
  margin: 0 auto;
  padding-top: 13px;
}

.modal-team {
  padding-bottom: 35px;
}
.modal-team strong {
  display: block;
  font-size: 35px;
  font-weight: 700;
  font-family: "M PLUS 1p", serif;
  line-height: 150%;
  letter-spacing: 5%;
  -webkit-text-stroke: 1px black;
}
.modal-team-fixe {
  display: flex;
  gap: 15px;
}
.modal-team-name {
  font-size: 20px;
  font-weight: 700;
  font-family: "Gabarito", serif;
  line-height: 150%;
}
.modal-team-math {
  font-size: 16px;
  font-weight: 700;
  font-family: "M PLUS 1p", serif;
  border: 1px solid #000;
  padding: 5px;
  background-color: #fff;
  line-height: 120%;
}

.modal-content-inbox1 {
  padding-bottom: 31px;
}
.modal-content-inbox2 {
  padding-bottom: 31px;
}
.modal-content-inbox3 {
}

.inbox-tag {
  width: 116px;
  height: 36px;
  background-color: #fff264;
  border: 1px solid #000;
  border-radius: 0px 10px 0px 0px;
  margin-bottom: 5px;
}
.inbox-tag2 {
  width: 96px;
  height: 36px;
  background-color: #fff264;
  border: 1px solid #000;
  border-radius: 0px 10px 0px 0px;
  margin-bottom: 5px;
}
.inbox-tag3 {
  width: 196px;
  height: 36px;
  background-color: #fff264;
  border: 1px solid #000;
  border-radius: 0px 10px 0px 0px;
  margin-bottom: 5px;
}
.inbox-tag strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 120%;
  padding: 6px;
}
.inbox-tag2 strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 120%;
  padding: 6px;
}
.inbox-tag3 strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 120%;
  padding: 6px;
}

.modal-content-inbox1 p {
  font-size: 18px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 180%;
  letter-spacing: 0.02em;
}
.modal-content-inbox2 p {
  font-size: 18px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 180%;
  letter-spacing: 0.02em;
}
.modal-content-inbox3 p {
  font-size: 18px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 180%;
  letter-spacing: 0.02em;
}

.wanted-poster {
  width: 555px;
  height: 790px;
  background-image: url(../images/wantedposter.png);
  background-size: 555px 790px;
  background-repeat: no-repeat;
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.25));
  position: relative;
  cursor: pointer;
}

.watendtop-tag {
  width: 250px;
  height: 33px;
  background-image: url(../images/wanted-tag.svg);
  position: absolute;
  top: 11px;
  left: -30px;
}

.watendtop-tag {
  font-size: 16px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 200%;
  letter-spacing: 5%;
  color: #fff;
  padding-left: 27px;
}

.wanted-humman-box {
  padding-top: 162px;
  width: 430px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.wanted-humman-box img {
  width: 430px;
  height: auto;
}
.job-name-en {
  font-size: 32px;
  font-weight: 400;
  font-family: "Holtwood One SC", serif;
  line-height: 150%;
  color: #6c5138;
  width: fit-content;
  margin: 0 auto;
}
.job-name-ja {
  background-image: url(../images/wanted-frame.svg);
  background-size: 430px auto;
  background-repeat: no-repeat;
  width: 430px;
  height: 74px;
  font-size: 40px;
  font-weight: 700;
  font-family: "M PLUS 1p", serif;
  line-height: 150%;
  letter-spacing: 15%;
  -webkit-text-stroke: 1px black;
  color: #d7584d;
  margin: 0 auto;
}
.job-name-ja span {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  padding-top: 7px;
}

.job-detail {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 200%;
  letter-spacing: 0.05em;
  padding-top: 16px;
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
}

.watendtop-tagbottom {
  width: 250px;
  height: 33px;
  background-image: url(../images/wanted-tag-bottom.svg);
  position: absolute;
  bottom: 20px;
  right: -18px;
}
.job-name-color {
  color: #5885d8;
}
.watend-detail_tag_box {
  position: absolute;
  bottom: 25px;
  right: -35px;
  z-index: 10;
}

.watend-detail_tag_tmc {
  color: rgba(108, 81, 56, 0.5);
  font-family: "Holtwood One SC";
  font-size: 96px;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 4.8px;
  position: absolute;
  top: -130px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.watend-detail_tag {
  width: 360px;
  height: 40px;
  background-image: url(../images/wanted-tag.svg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;

  font-weight: 700;
  line-height: 120%;
}

.watend-detail_arrow {
  width: 8px;
  height: 15px;
}

/*----------------------------------------------

# 0.2 modal window

----------------------------------------------*/

.modal {
  display: none;

  height: 100vh;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 99999;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;
}

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);

  z-index: 99999;
  max-height: 90vh;
}

.wanted__content {
  background-image: url(../images/modal-wantedbk.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: bottom;
  width: 1200px;
  max-height: 800px;
  height: calc(95vh - 100px);

  position: relative;
  overflow-y: auto;
}

.wanted_logo {
  position: absolute;
  top: -67px;
  left: 0px;
  width: 550px;
  z-index: 5;
}

.wanted__content_wrap {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 99999;
}

.wanted-modalbox {
  display: flex;
  gap: 60px;
  padding: 40px 40px 0;
}

.wanted-modalbox-left {
  /* padding-left: 38px;
  padding-top: 39px; */
}
.wanted-modalbox-lefttop {
  display: flex;
  gap: 30px;
}
.wanted-modalbox-lefttop img {
  width: 255px;
  height: auto;
}
.wanted-modalbox-left strong {
  display: block;
  width: 550px;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 100%;
  color: #6c5138;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}
.wanted-modalbox-right strong {
  display: block;
  width: 515px;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 100%;
  color: #6c5138;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

.modal-jobs h1 {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 100%;
  color: #6c5138;
  padding-top: 11.5px;
}
.modal-couse {
  padding-bottom: 19px;
}

.modal-couse p {
  display: block;
  font-size: 24px;
  font-weight: 900;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding-top: 5px;
  color: #d7584d;
}

.modal-couse span {
  font-size: 15px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
}

.modal-form p {
  display: block;
  width: 62px;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
}

.wanted-modal-word {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 160%;
  letter-spacing: 5%;
  margin-top: 20px;
  margin-bottom: 25px;
}
.job-assignment ul {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 160%;
  letter-spacing: 5%;
  padding-top: 10px;
}
.job-assignment p {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 160%;
  letter-spacing: 5%;
  padding-top: 10px;

  span {
    font-size: 12px;
  }
}

.selection-method strong {
  padding-top: 20px;
}

.selection-method ol {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 170%;
  letter-spacing: 5%;
  padding-top: 10px;
}

.wanted-modalbox-right {
  /* padding-top: 39px; */
}

.selection-characteristicsbox {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.selection-characteristicsbox p {
}

.submitted-documents strong {
  padding-top: 22px;
}
.submitted-documentsbox {
  display: flex;
  gap: 20px;
}
.submitted-documentsbox p {
}

.submitted-documents-word {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 170%;
  letter-spacing: 5%;
  padding-top: 10px;
}

.recruitment-targetbox {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.recruitment-target strong {
  padding-top: 20px;
}
.recruitment-target p {
}

.recruiting-faculty strong {
  padding-top: 20px;
}

.recruiting-facultybox {
  display: flex;
  gap: 20px;
}
.recruiting-facultybox p {
}

.recruiting-faculty-word {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 170%;
  letter-spacing: 5%;
  display: flex;
  padding-top: 12px;
}

.people-recruiting strong {
  padding-top: 20px;
}
.people-recruitingbox {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 170%;
  letter-spacing: 5%;
  display: flex;
  padding-top: 12px;
}

.features-recruitment strong {
  padding-top: 20px;
}
.features-recruitment p {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 170%;
  letter-spacing: 5%;
  display: flex;
  /* margin-top: 12px; */
}
.features-recruitmentbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.features-recruitmentbox p {
  /* width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 0.06em;
  padding: 0 6px; */
}

.features-recruitmentbox,
.features-recruitmentbox2,
.selection-characteristicsbox,
.submitted-documentsbox,
.submitted-documentsbox2,
.recruitment-targetbox,
.recruiting-facultybox,
.recruitment-targetbox2,
.recruiting-facultybox2 {
  margin-top: 10px;

  p {
    display: flex;
    width: fit-content;
    height: 28px;
    background: #4a93c6;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-family: "Noto Sans JP", serif;
    line-height: 150%;
    letter-spacing: 0;
    padding: 0 6px;
    align-items: center;
  }
}

.wanted__content2 {
  background-image: url(../images/modal-wantedbk2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: bottom;
  width: 1200px;
  height: 85vh;
  position: relative;
  overflow-y: auto;
  padding-bottom: 80px;
}
.wanted-model_close {
  display: block;
  position: absolute;
  right: -30px;
  top: -30px;
  z-index: 99;
}
.close_icon {
  width: 60px;
  height: 60px;
}

.modal_content {
  max-height: 95%;
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.25));
}

.modal-couse-color p {
  color: #5885d8;
}

.job-assignment2 p {
  font-size: 14px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 180%;
  letter-spacing: 4%;
  padding-left: 20px;
}

.job-assignment3 {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", serif;
  line-height: 160%;
  letter-spacing: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.job-assignment2 {
  li {
    margin-bottom: 10px;
  }
}

.job-assignment2 h1 {
  font-size: 16px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 200%;
  letter-spacing: 5%;
  padding-bottom: 10px;
  span {
    font-size: 12px;
    margin-left: 10px;
  }
}

.job-assignment2-bottom {
  padding-top: 15px;
}

.selection-method {
  padding-bottom: 25px;
}
.selection-characteristicsbox2 {
  display: flex;
  gap: 10px;
}
.selection-characteristicsbox2 p {
  /* display: flex;
  width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding: 0 6px;
  align-items: center; */
}
.submitted-documentsbox2 p {
  /* display: flex;
  width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding: 0 6px;
  align-items: center; */
}
.recruitment-targetbox2 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.recruitment-targetbox2 p {
  /* display: flex;
  width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding: 0 6px;
  align-items: center; */
}

.recruiting-facultybox2 {
  /* display: flex;
  width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding: 0 6px;
  align-items: center; */
}

.features-recruitmentbox2 {
  display: flex;
  gap: 20px;
}

.features-recruitmentbox2 p {
  /* display: flex;
  width: fit-content;
  height: 28px;
  background: #4a93c6;
  border-radius: 6px;
  color: #fff;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", serif;
  line-height: 150%;
  letter-spacing: 5%;
  padding: 0 6px;
  align-items: center; */
}

@media (max-width: 1280px) {
  .top-title strong {
    font-size: 6vw;
    top: 2vw;
    right: 7vw;
  }
  .top-title p {
    font-size: 5.5vw;
    top: 5vw;
    right: 15vw;
  }
  .topix {
    font-size: 15px;
  }
  .top-footer {
    width: 100%;
    display: flex;
    padding-right: 25px;
    padding-left: 25px;
    gap: 40px;
  }

  .logo_area {
    width: 120px;
  }
  .logo {
    width: 12svw;
    height: auto;
    max-width: none;
    display: block;
    object-fit: contain;
  }

  .footer-right {
    width: calc(100% - 120px);
    height: 45px;
  }
  .footer-right img {
    width: 150px;
    height: auto;
  }
  .topix {
    width: 445px;
    overflow-y: auto;
    height: 80px;
  }

  .works-box {
    gap: 11vw;
    padding-right: 18vw;
  }

  .details_section {
    top: 6vw;
    padding: 20px;
  }
  .slides h1 {
    font-size: 6vw;
  }

  .imgbox {
    height: 300px;
    img {
      height: auto;
    }
  }

  .message-static-section {
    min-height: 100vh;

    background-position: center;
  }

  .slide {
    height: 550px;
    background-color: #fff;
    border-radius: 30px;
  }
  .slide {
    .detail {
      padding-bottom: 20px;
    }
  }

  .slide-title {
    height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .slide-title p {
    width: 100%;
  }
  .slide-title strong {
    font-size: 38px;
  }
  .section-end_cloud {
    bottom: -240px;
    bottom: -19vw;
  }

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

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

  .rainbow_area {
    height: 220px;
    height: 32vw;
  }

  .rainbow {
    width: 45vw;
    height: auto;
    left: -16.532vw;
    bottom: -4vw;
  }

  .onthesea_cloud {
    /* width: 600px;
    height: auto;
    right: -140px;
    bottom: -20px; */
    width: 48.387vw;
    height: auto;
    right: -11.29vw;
    bottom: -4vw;
  }

  .gallery-modal__dialog {
    max-height: 90svh;
    max-width: 900px;
  }

  .gallery-modal__media {
  }
  .gallery-modal__txt {
    padding: 0;
  }

  .modal__content {
    height: 95svh;
  }
  .modal__close {
    top: -20px;
    right: -15px;
  }

  .modal-content-box {
    height: calc(95svh - 70px);
    max-height: 95svh;

    padding: 15px;
    margin-top: 55px;
    overflow-y: auto;
    justify-content: end;
  }

  .modal-content-card-btn {
    top: 0;
  }

  .tmc-data-grid {
    transform: scale(0.8) translateY(-200px);
    justify-content: center;
  }

  .card {
    padding: 30px;
  }
  .card--2 {
    .percent-q {
      padding-bottom: 0;
    }
  }
  .percent3 img {
    width: 150px;
  }

  .data-title h2,
  .gallery-title,
  .interview-title,
  .wanted-title strong,
  .entry-title h2 {
    font-size: min(13.8vw, 200px);
  }
  .entry-title p {
    font-size: min(4vw, 40px);
  }
  .wanted-title span {
    display: block;
    padding-left: 0;
  }

  .percent1-box {
    gap: 20px;
  }

  .wanted_container {
    padding-bottom: 35px;
  }

  .wanted-model {
    width: 100%;
    gap: 30px;
    justify-content: center;
  }

  .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%;
  }

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

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

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

  .wanted-people {
    position: absolute;
    left: 50%;
    bottom: -140px;
    width: 90%;
  }

  .wanted_bottom_img {
    width: 100%;
    height: auto;
    margin-top: -180px;
    display: inline-block;
  }

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

  /* wanted modalここから  */
  .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;
  }

  .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%;
  }

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

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

  .wanted_logo {
    width: 200px;
    top: -8px;
    left: 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-modal */
  .wanted-modal {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
  }

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

  .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 ここまで */

  .entry {
    margin-top: 100px;
  }
  .entry-title {
    padding-bottom: 80px;
  }

  .entry-word {
    width: 100%;
    text-align: center;
  }

  .entry-word_txt {
    font-size: 24px;
  }
  .entry-word_txt::before,
  .entry-word_txt::after {
    bottom: -5px;
  }
  .entry-btns {
    justify-content: center;
    gap: 20px;
    width: 100%;
  }
  .entry-btn {
    width: 280px;
    height: 280px;
  }
  .btn-title1 p,
  .btn-title2 p,
  .btn-title3 p {
    font-size: 22px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }

  .btn-title1 img,
  .btn-title2 img {
    width: 80%;
  }

  .img-box {
    height: 1050px;
  }

  /* ========== FISH ========== */
  .fish1 {
    width: 24.24vw;
    height: auto;
    position: absolute;
    top: -20.49vw;
    left: 0.07vw;
    z-index: 20;
  }
  .fish2 {
    width: 45.07vw;
    height: auto;
    position: absolute;
    top: 20.63vw;
    left: 0;
    z-index: 10;
  }
  .fish3 {
    width: 31.41vw;
    height: auto;
    position: absolute;
    top: 94.78vw;
    right: 0;
    z-index: 10;
  }
  .fish4 {
    display: none;
  }
  /* ========== BUBBLE ========== */
  .bubble1,
  .bubble2,
  .bubble3,
  .bubble4 {
    opacity: 0.7;
    mix-blend-mode: screen;
  }

  .bubble1 {
    width: 8.6vw;
    height: auto;
    position: absolute;
    top: 11.27vw;
    right: 5.26vw;
    z-index: 20;
  }
  .bubble2 {
    width: 10.93vw;
    height: auto;
    position: absolute;
    top: 28.14vw;
    left: 20.49vw;
    z-index: 20;
  }
  .bubble3 {
    width: 6.9vw;
    height: auto;
    position: absolute;
    top: 87.34vw;
    right: 38.59vw;
    z-index: 20;
  }
  .bubble4 {
    width: 7.64vw;
    height: auto;
    position: absolute;
    top: 105.94vw;
    right: 9.29vw;
    z-index: 20;
  }
  /* ========== PEOPLE ========== */
  .people1 {
    width: 16.73vw;
    height: auto;
    position: absolute;
    top: -9.02vw;
    left: calc(50% + 6.15vw);
    z-index: 30;
  }
  .people2 {
    width: 5.67vw;
    height: auto;
    position: absolute;
    top: 20.99vw;
    left: calc(50% - 25.61vw);
    z-index: 30;
  }
  .people3 {
    width: 8.47vw;
    height: auto;
    position: absolute;
    top: 23.03vw;
    left: calc(50% - 10.79vw);
    z-index: 30;
  }
  .people4 {
    width: 11.27vw;
    height: auto;
    position: absolute;
    top: 28.14vw;
    left: calc(50% + 27.32vw);
    z-index: 30;
  }
  .people5 {
    width: 7.72vw;
    height: auto;
    position: absolute;
    top: 46.44vw;
    left: calc(50% + 27.32vw);
    z-index: 30;
  }
  .people6 {
    width: 4.1vw;
    height: auto;
    position: absolute;
    top: 64.49vw;
    left: calc(50% - 41.32vw);
    z-index: 30;
  }
  .people7 {
    width: 14.22vw;
    height: auto;
    position: absolute;
    top: 61.46vw;
    left: calc(50% - 18.85vw);
    z-index: 30;
  }
  .people8 {
    width: 19.73vw;
    height: auto;
    position: absolute;
    top: 80.1vw;
    left: calc(50% - 13.32vw);
    z-index: 30;
  }
  /* ========== VECTOR（0.7縮小・1025px基準）========== */
  .vector1 {
    width: 29.84vw;
    height: auto;
    position: absolute;
    top: -4.58vw;
    left: calc(50% - 11.82vw);
    z-index: 20;
  }

  .vector2 {
    width: 26.56vw;
    height: auto;
    position: absolute;
    top: 7.51vw;
    left: calc(50% - 27.73vw);
    z-index: 20;
  }

  .vector3 {
    width: 30.05vw;
    height: auto;
    position: absolute;
    top: 31.51vw;
    left: calc(50% + 12.29vw);
    z-index: 20;
  }

  .vector4 {
    width: 29.77vw;
    height: auto;
    position: absolute;
    top: 47.36vw;
    left: calc(50% + 0.69vw);
    z-index: 20;
  }

  .vector5 {
    width: 21.93vw;
    height: auto;
    position: absolute;
    top: 57.37vw;
    left: calc(50% - 42.68vw);
    z-index: 20;
  }

  .vector6 {
    width: 30.94vw;
    height: auto;
    position: absolute;
    top: 66.11vw;
    left: calc(50% - 30.32vw);
    z-index: 20;
  }

  /* ========== US WORD ========== */
  .us-wordimg {
    width: 23.5vw;
    height: auto;
    position: absolute;
    top: 5.6vw;
    left: calc(50% - 8.47vw);
    z-index: 30;
  }

  .us-word1 {
    font-size: 2.59vw;
    font-family: "Murecho", serif;
    font-weight: 700;
    line-height: 120%;
    margin: 0 auto;
    width: 18.78vw;
    color: #18a7ff;
    position: absolute;
    top: 16.39vw;
    left: calc(50% - 23.96vw);
    z-index: 30;
  }

  .us-word2 {
    font-size: 3.28vw;
    font-family: "BIZ UDPGothic", serif;
    font-weight: 700;
    line-height: 135%;
    margin: 0 auto;
    width: 22.41vw;
    color: #18a7ff;
    text-align: center;
    position: absolute;
    top: 39.27vw;
    left: calc(50% + 14.68vw);
    z-index: 30;
  }

  .us-word3 {
    font-size: 2.46vw;
    font-family: "Yu Gothic", serif;
    font-weight: 700;
    line-height: 120%;
    margin: 0 auto;
    width: 25.61vw;
    color: #18a7ff;
    position: absolute;
    top: 54.29vw;
    left: calc(50% + 2.39vw);
    z-index: 30;
  }

  .us-word4 {
    font-size: 2.73vw;
    font-family: "BIZ UDPGothic", serif;
    font-weight: 700;
    line-height: 100%;
    margin: 0 auto;
    width: 13.66vw;
    color: #18a7ff;
    position: absolute;
    top: 64.49vw;
    left: calc(50% - 38.59vw);
    z-index: 30;
  }

  .us-word5 {
    font-size: 3.28vw;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    line-height: 120%;
    margin: 0 auto;
    width: 26.24vw;
    color: #18a7ff;
    position: absolute;
    top: 77.39vw;
    left: calc(50% - 28.34vw);
    z-index: 30;
  }
}

/* SP時は1カラム縦積み */
@media (max-width: 950px) {
  .tmc-data-grid {
    max-width: 100%;
    max-height: unset;
    padding: 0 15px;
    gap: 15px;
    transform: none;
    grid-template-columns: 1fr;
    grid-template-areas:
      "card1"
      "card2"
      "card3"
      "card4"
      "card5";
  }

  .percent-q {
    display: block;
    width: 100%;
  }
  .percent1-box {
    justify-content: space-between;
    align-items: center;
  }
  .percent3-box {
    justify-content: space-between;
    align-items: center;
    img {
      margin-top: 0;
    }
  }
  .percent5-box {
    justify-content: space-between;
    align-items: center;
  }

  .card--2 {
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: unset;

    .yes {
      display: inline-block;
    }
  }
}

/* 画面が縦長（幅/高さが 3/4 以下）＝かなり縦長 */
@media (orientation: portrait) and (max-aspect-ratio: 3/4) {
  /* 細長い縦画面だけ */
}