@charset "UTF-8";

/*-------------------------------------------------------------------------------------
Base style
-------------------------------------------------------------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
}

html {
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  font-family:
    "acumin-pro", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial",
    "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1.5;
  height: -webkit-fill-available;
  color: #fefefe;
  background-color: #383432;
  font-feature-settings: "palt";
}

body.overflow-hidden {
  overflow: hidden;
}

main.overflow-hidden {
  overflow: hidden;
}

a,
button {
  cursor: pointer;
  border: none;
  outline: none;
  user-select: none;
  background: none;
  box-shadow: none;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/*-------------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------------*/
.header {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 6rem 8rem 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
}

.header-logo a h1 {
  display: inline-block;
  font-size: 4rem;
  font-weight: 900;
  transition: color 0.3s ease;
  display: inline-block;
  text-decoration: none;
  list-style: none;
  color: #fefefe;
  margin: 0;
  line-height: 1;
}

.header-logo a h1:hover {
  color: #898585;
}

.header-nav ul {
  font-size: 1.6rem;
  font-weight: 700;
  color: #898585;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header-nav ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  list-style: none;
  transition: color 0.3s ease;
  color: #898585;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 1rem;
}

.header-nav ul li a:hover {
  color: #fefefe;
}

.header-nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 繊細に見せるなら1pxがおすすめ */
  background-color: #fefefe;
  /* アニメーションの設定 */
  transform: scaleX(0); /* 横幅を0にする */
  transform-origin: left; /* 左端を起点にする */
  transition: transform 0.3s ease; /* 0.3秒かけて伸びる */
}

.header-nav ul li a:hover::after {
  transform: scaleX(1);
}

.header-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*-------------------------------------------------------------------------------------
common
-------------------------------------------------------------------------------------*/
.role-wrapper,
.mission-title,
.process-title,
.work-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
}

.inline-emoji {
  width: 1.6em; /* 文字の大きさに合わせて自動調整（1.2倍くらいが綺麗） */
  height: auto;
  vertical-align: middle; /* 文字の真ん中の高さに合わせる */
  margin-left: 4px; /* 文字との間に少し隙間を作る */
  display: inline-block;
}

.role-wrapper .role,
.role-wrapper .role-span,
.role-wrapper .role2 {
  color: #898585;
}

.role {
  font-size: 6.4rem;
  color: #fefefe;
  font-weight: 900;
}

.role-span {
  font-size: 6.4rem;
  color: #fefefe;
  font-weight: 700;
  padding-left: 20px;
}

.role2 {
  font-size: 3.2rem;
  color: #fefefe;
  margin-left: 20px;
  font-weight: 700;
}
/* ============================
   Line reveal (DADO風) - SAFE版
   ※元のタイポ(文字サイズ/行間)は一切変更しない
============================ */

/* pの中でも崩れないように spanで組む前提 */
.js-split .line-mask {
  display: block;
  overflow: hidden; /* clipだと環境差が出るので hidden 推奨 */
  padding: 0;
  margin: 0;
}

.js-split .line {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;

  /* 余計な余白を足さない */
  padding: 0;
  margin: 0;

  /* 元のタイポを完全継承 */
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* スクロール進捗で出す版（GPUで軽い） */
.js-split .line {
  transform: translateY(calc(110% - (var(--p, 0) * 110%)));
  opacity: var(--p, 0);
  transition: none; /* JSで進捗を作るのでtransitionは切る */
  will-change: transform, opacity;
}

/* トークン類もタイポは触らない（保険） */
.js-split .tok {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 追加：ブロックの行で余計な隙間が出ないように */
.js-split .line-mask,
.js-split .line {
  border: 0;
}

/* 追加：要素トークン（imgや装飾span）でbaselineズレしにくくする */
.js-split .el-tok {
  display: inline-flex;
  align-items: baseline;
}

/*-------------------------------------------------------------------------------------
fv style
-------------------------------------------------------------------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.fv {
  padding: 10rem 8rem 0px;
  background-image: url("../images/fv-bg.png");
  background-size: cover;
  height: 100vh;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    /* 一番上は透明 */ #383432 15%,
    /* 15%の位置からくっきり（不透明） */ #383432 85%,
    /* 85%の位置までくっきり */ transparent 100% /* 一番下は再び透明 */
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #383432 15%,
    #383432 85%,
    transparent 100%
  );
}

.fv-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 0 auto;
  width: 100%;
}

.fv-left {
  position: relative;
}

.neon img {
  width: 100%;
  max-width: 870px;
}

.catchcopy-img {
  width: 100%;
  max-width: 870px;
  height: auto;
}

/*-------------------------------------------------------------------------------------
mission style
-------------------------------------------------------------------------------------*/
.mission {
  background-image: url("../images/about-bg.png");
  background-size: cover;
  height: 100vh;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    /* 一番上は透明 */ #383432 15%,
    /* 15%の位置からくっきり（不透明） */ #383432 85%,
    /* 85%の位置までくっきり */ transparent 100% /* 一番下は再び透明 */
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #383432 15%,
    #383432 85%,
    transparent 100%
  );
}

.mission-title p {
  color: #fefefe;
}

.mission-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  padding: 18rem 8rem;
  text-align: left;
  gap: 30px;
  justify-content: center;
}

.lifune {
  font-size: 5rem;
  font-weight: 900;
}

.lifune-description {
  font-size: 2rem;
}

.mission-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 5rem;
  align-items: flex-end;
}

.mission-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fefefe;
  max-width: 510px;
  width: 100%;
}

.under-560 {
  display: none;
}

.btn-ghost {
  display: inline-block;
  text-decoration: none;
  height: auto;
  padding: 3rem 8.7rem;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fefefe;
  border: 2.5px solid #fefefe;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  background-color: rgba(254, 254, 254, 1);
  color: #404040;
}

/*-------------------------------------------------------------------------------------
process style
-------------------------------------------------------------------------------------*/
.process {
  background-image: url("../images/worldmapbg.png");
  background-size: cover;
  min-height: 100vh; /* 最低でも画面いっぱいの高さは確保しつつ... */
  height: auto;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    /* 一番上は透明 */ #383432 15%,
    /* 15%の位置からくっきり（不透明） */ #383432 85%,
    /* 85%の位置までくっきり */ transparent 100% /* 一番下は再び透明 */
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #383432 15%,
    #383432 85%,
    transparent 100%
  );
  background-position: center top;
}

.process-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 18rem 8rem;
  text-align: left;
  gap: 30px;
}

.process-title p {
  color: #fefefe;
}

.process-title .role2 {
  font-size: 2rem;
  font-weight: 400;
}

.process-text {
  padding-top: 5rem;
  font-size: 1.7rem;
  line-height: 1.7;
}

.proposals-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-self: center;
  width: 100%;
  margin-top: 8rem;
}

.step-num {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20rem; /* かなり大きく */
  font-weight: bold;
  color: rgba(230, 80, 24, 1); /* オレンジ色（少し透過させると馴染みます） */
  z-index: 1;
}

.step-num1 {
  left: 25%;
}

.proposal-list .under-1300 {
  display: none;
}

.proposal-items {
  position: relative; /* 数字や背景の基準点 */
  height: 350px; /* 矢印の高さに合わせて調整 */
  display: flex;
  align-items: center;

  /* 矢印画像を背景として設定 */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  padding-left: 23rem;
}

.proposal-item1 {
  background-image: url("../images/process1.svg"); /* 保存した矢印画像 */
}
.proposal-item2 {
  background-image: url("../images/process2.svg"); /* 保存した矢印画像 */
}
.proposal-item3 {
  background-image: url("../images/process3.svg"); /* 保存した矢印画像 */
}

.proposal-list {
  list-style: none;
  padding: 0;
}

.proposal-list li {
  font-size: 2rem;
  display: flex;
  white-space: nowrap; /* 改行を防ぐ */
}

.proposal-list li:not(:last-child) {
  margin-bottom: 1.5rem;
}

.proposal-list img {
  margin-right: 15px;
  font-size: 1.5rem;
}

.proposal-list .under-1300 {
  font-weight: 900;
}

/*-------------------------------------------------------------------------------------
work style
-------------------------------------------------------------------------------------*/
.work {
  background-image: url("../images/fv-bg.png");
  background-size: cover;
  height: 100vh;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    /* 一番上は透明 */ #383432 15%,
    /* 15%の位置からくっきり（不透明） */ #383432 85%,
    /* 85%の位置までくっきり */ transparent 100% /* 一番下は再び透明 */
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #383432 15%,
    #383432 85%,
    transparent 100%
  );
  overflow: hidden;
}

.work-title p {
  color: #fefefe;
  padding-bottom: 2rem;
}

.work-title .role2 {
  font-size: 2rem;
  font-weight: 400;
}

.work-wrapper {
  padding: 12rem 8rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  gap: 30px;
}

/* スクロールエリア */
.work-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.work-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.work-scroll-wrapper::-webkit-scrollbar-thumb {
  display: none;
}

/* ナビゲーション全体の配置 */
.work-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding: 0 5%;
}

/* 進捗バーの土台（細いグレーの線） */
.scrollbar-track {
  flex: 1; /* ボタン以外の余った幅をすべて使う */
  height: 1.5px; /* 画像に合わせて細めに */
  background-color: #fefefe;
  position: relative;
  margin-right: 4rem;
}

/* 動く赤い線（進捗度） */
.scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%; /* JSで計算 */
  background-color: #e65018;
  transition: width 0.2s ease-out;
}

/* ボタンのスタイル */
.scroll-buttons {
  display: flex;
  gap: 15px;
}

.scroll-buttons button {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  border: 1.5px solid #fefefe;
  color: #fefefe;
  cursor: pointer;
  overflow: hidden; /* はみ出しをカット */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  transition: opacity 0.3s;
}

/* 矢印（span）の基本設定 */
.arrow {
  display: inline-block;
  font-size: 1.8rem;
  transition: transform 0.3s ease; /* 0.3秒かけて滑らかに動く */
}

/* 右ボタンが素早く動くアニメーション */
@keyframes slideNext {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50px);
  }
}

.next-btn:hover .arrow {
  animation: slideNext 0.4s; /* 0.4秒で上記50px移動 */
}

/* 左ボタン用 */
@keyframes slidePrev {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}

.prev-btn:hover .arrow {
  animation: slidePrev 0.4s;
}

/* ボタンをクリックした瞬間（アクティブ状態）の動き */
.scroll-buttons button:active {
  /* 0.95倍に少しだけ縮小させる */
  transform: scale(0.95);
  /* 少しだけ下にずらして「押し込む」感を出す（任意） */
  margin-top: 2px;
  /* 影を少し薄くして、ボタンが画面に近づいたように見せる */
  box-shadow: none;
  /* 変化の速度を調整（クリック時は一瞬、離すと戻る） */
  transition: transform 0.1s;
}

.work-list {
  display: flex;
  gap: 110px; /* カード同士の隙間 */
  width: max-content;
  height: 100%;
}

.work-item {
  display: flex;
  gap: 8rem;
  align-items: stretch;
  flex-shrink: 1;
}

.work-image img {
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* 右側のテキストエリア */
.work-info {
  display: flex;
  flex-direction: column;
}

.work-info dl dt {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1.2rem;
  color: #fefefe;
  border-bottom: 1px solid rgba(137, 133, 133, 1);
  padding-bottom: 2.4rem;
}

.work-info dl dd {
  font-size: 1.4rem;
  line-height: 1.7;
  margin-top: 1.2rem;
  color: #fefefe;
  border-bottom: 1px solid rgba(137, 133, 133, 1);
  padding-bottom: 2.4rem;
}

.work-info dl {
  display: grid;
  /* 1列目(dt)は104px固定、2列目(dd)は残りの幅すべて */
  grid-template-columns: 104px 1fr;
  row-gap: 2.4rem; /* ペア同士の上下の隙間 */
  border-top: 1px solid rgba(137, 133, 133, 1);
  padding-top: 2.4rem;
  margin: 0;
  height: 100%;
  max-width: 52rem;
}

/*-------------------------------------------------------------------------------------
contact style
-------------------------------------------------------------------------------------*/
.contact-title {
  display: none;
}

.contact-section {
  padding: 18rem 8rem 8rem;
}

.contact-intro p {
  line-height: 1.5;
  font-size: 2.4rem;
  margin: 0 auto 6rem;
}

.contact-intro p .inline-emoji {
  width: 1.7em;
  margin-left: 0px;
  vertical-align: -0.3em;
}

.contact-form .form-grid,
.contact-intro p {
  max-width: 80rem;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 5rem;
  margin: 0 auto;
}

.form-group label {
  font-size: 2rem;
  font-weight: 700;
  color: #fefefe;
  margin-bottom: 1rem;
  display: block;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: rgba(217, 217, 217, 0.2); /* 画像のグレー半透明を再現 */
  border: none;
  padding: 2rem;
  color: #fefefe;
  font-size: 1.6rem;
}

.full-width {
  grid-column: 1 / 3;
}

/* カプセル型の送信ボタン */
.form-submit {
  margin-top: 2rem;
  max-width: 80rem;
  width: 100%;
  height: 64px;
  margin: 2rem auto 0;
  background: transparent;
  border: 2px solid #fefefe;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
  background: url("/wp-content/themes/Lifune-portfolio/assets/images/contact.svg");
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35px auto;
  background-color: transparent;
}

.form-submit:hover {
  opacity: 0.4;
}

.required {
  font-size: 0.7em;
  position: relative;
  top: -0.4em;
  margin-left: 4px;
  color: #e65018;
  font-weight: 700;
}

/* Turnstile中央寄せ */
.cf-turnstile,
.wpcf7 .cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 40px auto;
}

/*-------------------------------------------------------------------------------------
footer style
-------------------------------------------------------------------------------------*/

.contact-fin-text-wrapper {
  padding: 22rem 8rem 8rem;
  display: flex;
  flex-direction: column;
  gap: 9.5rem;
  justify-content: center;
  align-items: center;
}

.contact-fin-text {
  font-size: 2.4rem;
  line-height: 1.5;
  color: #fefefe;
  width: auto;
}

/*-------------------------------------------------------------------------------------
footer style
-------------------------------------------------------------------------------------*/
footer {
  background-color: #383432;
  padding: 11rem 8rem 3.2rem;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* --- 自動スクロール部分 --- */
.footer-top {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10rem;
  justify-content: space-between; /* ティッカーとボタンを両端に */
  gap: 20px;
}

.ticker-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 10px 0;
}

.ticker-content {
  display: inline-block;
  animation: ticker 20s linear infinite;
}

.ticker-text {
  font-size: 11.2rem;
  font-weight: 900;
  padding-right: 100px; /* 文字同士の隙間 */
  line-height: 1.2; /* 文字の上下に適切な空間を作る */
  display: inline-block; /* paddingを正しく適用させる */
  vertical-align: middle;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* 半分まで行ったらループ */
}

.footer-arrow-btn {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0; /* Flexboxの中で潰されるのを防ぐ（重要！） */
  min-width: 150px;
  border: 1px solid #fefefe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    background 0.3s ease; /* 枠の拡大用 */
  overflow: hidden;
}

/* ホバー時に丸を一回り大きくする */
.footer-arrow-btn:hover {
  transform: scale(1.2);
}

.arrow-icon {
  display: inline-block;
  transition: transform 0.1s ease-out; /* 追従を滑らかにする */
  pointer-events: none; /* マウスイベントが矢印に吸われないようにする */
}

/* --- 下部ナビゲーション --- */
.footer-bottom {
  padding: 0;
}

.footer-logo {
  display: inline-block;
}

.footer-logo a {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 3.2rem;
  transition: color 0.3s ease;
  display: inline-block;
  text-decoration: none;
  color: #898585;
}

.footer-logo a:hover {
  color: #fefefe;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  padding: 0;
  margin-bottom: 27px;
}

/* ナビゲーションのリンク全体に適用 */
.footer-nav ul li a {
  position: relative;
  text-decoration: none;
  color: #898585;
  font-size: 2rem;
  padding-bottom: 5px; /* 文字と線の隙間 */
  display: inline-block;
  transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
  color: #fefefe;
}

/* 線の土台（最初は幅0で見えない） */
.footer-nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 繊細に見せるなら1pxがおすすめ */
  background-color: #fefefe;

  /* アニメーションの設定 */
  transform: scaleX(0); /* 横幅を0にする */
  transform-origin: left; /* 左端を起点にする */
  transition: transform 0.3s ease; /* 0.3秒かけて伸びる */
}

/* ホバーした時に線を100%に伸ばす */
.footer-nav ul li a:hover::after {
  transform: scaleX(1);
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-social {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.threads-link img,
.x-link img {
  width: 18px;
  height: auto;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.threads-link img:hover,
.x-link img:hover {
  opacity: 1;
}

.copyright {
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #898585;
}

/*-------------------------------------------------------------------------------------
404 style
-------------------------------------------------------------------------------------*/

.text-404-wrapper {
  padding: 22rem 8rem 8rem;
  display: flex;
  flex-direction: column;
  gap: 9.5rem;
  justify-content: center;
  align-items: center;
}

.text-404 {
  display: flex;
  color: #fefefe;
  justify-content: center;
  font-size: 2.4rem;
  line-height: 1.5;
}

/*-------------------------------------------------------------------------------------
responsive style min-width
-------------------------------------------------------------------------------------*/
/* Large devices 992px and up */
@media (min-width: 992px) {
  .container {
    padding: 0 20px;
  }
}

/* X-Large devices 1200px and up */
@media (min-width: 1200px) {
}

/* XX-Large devices 1400px and up */
@media (min-width: 1400px) {
  .mission-wrapper,
  .process-wrapper,
  .work-wrapper,
  footer {
    max-width: 195rem;
    justify-content: center;
  }
}

/* XX-Large devices 1800px and up */
@media (min-width: 1800px) {
  .proposal-items {
    padding-left: 25rem;
  }
}

/* XX-Large devices 1855px and up */
@media (min-width: 1855px) {
  .proposal-items {
    padding-left: 27rem;
  }
}

/* XX-Large devices 1940px and up */
@media (min-width: 1940px) {
  .proposal-items {
    padding-left: 28rem;
  }
}

/*-------------------------------------------------------------------------------------
responsive style max-width
-------------------------------------------------------------------------------------*/
/* XX-Large devices 1690px and down */
@media (max-width: 1690px) {
  .role {
    white-space: nowrap;
  }

  .role2 {
    white-space: nowrap;
  }

  .proposal-items {
    padding-left: 19rem;
  }
  .step-num {
    left: 10%;
  }
  .step-num1 {
    left: 17%;
  }
}

/* XX-Large devices 1550px and down */
@media (max-width: 1550px) {
  .fv-left,
  .fv-right {
    flex: 1 1 0;
    min-width: 0; /* ←これ重要（縮めるため） */
  }

  .proposal-items {
    padding-left: 15rem;
  }
  .step-num {
    left: 5%;
  }
  .step-num1 {
    left: 10%;
  }
}

/* XX-Large devices 1440px and down */
@media (max-width: 1440px) {
  .role {
    font-size: 5rem;
  }

  .lifune {
    font-size: 3rem;
  }

  .proposal-items {
    padding-left: 11rem;
  }
  .step-num {
    left: 0%;
  }
  .step-num1 {
    left: 5%;
  }
}

/* XX-Large devices 1300px and down */
@media (max-width: 1300px) {
  .header {
    padding: 6rem 3rem 0px;
  }

  .fv {
    padding: 15rem 3rem 0;
  }

  .mission-wrapper,
  .work-wrapper,
  footer {
    padding: 6rem 3rem;
    justify-content: center;
  }

  .process {
    padding: 6rem 3rem;
  }

  footer {
    padding-bottom: 0;
  }

  .process {
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #383432 0%,
      #383432 100%,
      transparent 100%
    );
    padding: 6rem 3rem;
    min-height: 0;
  }

  .process-wrapper {
    padding: 0;
    gap: 0;
  }
  .proposals-wrapper {
    width: auto;
    display: flex;
    align-items: center;
  }

  .process-text {
    font-size: 1.5rem;
  }

  .proposal-list .under-1300 {
    display: block;
    color: #898585;
    font-size: 3rem;
    line-height: 2;
    text-align: center;
  }

  .proposal-item1,
  .proposal-item2,
  .proposal-item3 {
    background-image: none;
    height: auto;
  }

  .proposal-items {
    display: flex;
    flex-direction: row;
    padding: 0;
  }

  .step-num {
    position: relative;
    left: 0%;
    top: 0%;
    transform: translateY(0%);
    font-size: 16rem;
  }

  .proposal-list {
    margin-left: 0;
    text-align: left;
    z-index: 2;
    font-size: 2.2rem;
    margin-right: 3rem;
  }

  .proposal-list li {
    font-size: 1.2rem;
    justify-content: flex-start;
  }

  .proposal-list li:not(:last-child) {
    margin-bottom: 8px;
  }

  .work-scroll-wrapper {
    padding: 0;
  }

  .work-image img {
    max-width: 500px;
  }
  .work-info dl dd {
    font-size: 1.2rem;
  }

  .contact-section {
    padding: 18rem 3rem 8rem;
  }

  .contact-fin-text-wrapper {
    padding: 22rem 3rem 8rem;
  }
}

/* XX-Large devices 950px and down */
@media (max-width: 950px) {
  .mission-text-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 10rem;
  }

  .btn-ghost {
    align-self: flex-end;
  }

  .step-num {
    padding-right: 5px;
    font-size: 10rem;
  }
}

/* Medium devices 768px and down */
@media (max-width: 768px) {
  .neon {
    display: none;
  }

  .fv-wrapper {
    padding-top: 10rem;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10rem;
  }

  .header {
    padding: 4rem 3rem 0px;
  }

  .role-span {
    padding-left: 10px;
  }

  .role2 {
    margin-left: 10px;
  }

  .role {
    font-size: 4rem;
  }

  .role-span {
    font-size: 4rem;
  }

  .role2 {
    font-size: 2rem;
  }

  .process-title .role2,
  .work-title .role2 {
    font-size: 1.4rem;
  }

  .ticker-text {
    font-size: 12vw;
  }
  .footer-arrow-btn {
    width: 100px;
    height: 100px;
    min-width: 100px;
  }
  .footer-nav ul li a {
    font-size: 1.2rem;
  }
  .threads-link img,
  .x-link img {
    width: 12px;
  }
  .footer-nav ul {
    margin-bottom: 0;
    padding-bottom: 12px;
  }
  .footer-logo a {
    margin-bottom: 1.2rem;
  }
  .footer-top {
    margin-bottom: 1rem;
  }
}

/* Medium devices 700px and down */
@media (max-width: 700px) {
  .proposals-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 4rem;
  }

  .proposal-list li {
    font-size: 1.2rem;
  }

  .step-num {
    padding-right: 20px;
    font-size: 6rem;
  }

  .step-num1 {
    left: -5%;
  }

  .step-num2 {
    left: -1%;
  }

  .step-num3 {
    left: 1%;
  }

  .contact-fin-text-wrapper {
    padding: 22rem 3rem 4rem;
  }
}

/* small devices 560px and down */
@media (max-width: 560px) {
  .role {
    font-size: 3rem;
  }

  .under-560 {
    display: block;
  }

  .del-under-560 {
    display: none;
  }

  .lifune-description {
    font-size: 1.8rem;
  }

  .mission-text {
    font-size: 1.2rem;
  }

  .btn-ghost {
    padding: 2.5rem 7rem;
    align-self: center;
  }

  .process-text {
    font-size: 1.2rem;
  }

  .contact-intro p {
    font-size: 1.4rem;
  }

  .form-group label {
    font-size: 1.2rem;
  }

  .form-grid {
    gap: 2rem 2rem;
  }
}

/* small devices 410px and down */
@media (max-width: 410px) {
  .role-span {
    padding-left: 5px;
  }

  .role2 {
    margin-left: 5px;
  }

  .role {
    font-size: 2.6rem;
  }

  .role-span {
    font-size: 3rem;
  }

  .role2 {
    font-size: 1.4rem;
  }

  .process-title .role2,
  .work-title .role2 {
    font-size: 1.2rem;
  }

  .btn-ghost {
    padding: 2.3rem 6rem;
    font-size: 2rem;
  }
}