/* ============================================================
   基本設定
   ============================================================ */
:root {
  /* 画面に見せる列数（初回に表示される列数 = 16枚 / 4行 = 4列） */
  --cols-visible: 4;
  /* 各セットの総列数（5列目に隠れた4枚を含む） */
  --cols-total: 5;
  /* アイテム間の余白 */
  --gap: 0px;
  /* 1アイテムの横幅。可視4列がちょうど画面幅に収まるように計算 */
  --item-w: calc((100vw - (var(--cols-visible) - 1) * var(--gap)) / var(--cols-visible));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.75);
  font-family:"Noto Sans JP", sans-serif;
}

/* ============================================================
   ヒーロー（スライダーの表示窓）
   ============================================================ */
.hero-section {
  position: relative;   /* オーバーレイの基準 */
  width: 100%;
  height: 100vh;      /* 縦4枚が画面の高さに収まるように */
  height: 100svh;     /* モバイルのアドレスバー対応 */
  overflow: hidden;   /* はみ出した列・クローンセットを隠す */
  position: relative;
}

/* 文字を載せるための影（オーバーレイ）
   スライダーの上に重ねて、後から置く文字を読みやすくする */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;          /* スライダーより前面 */
  pointer-events: none; /* クリックは背面へ通す */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.15) 70%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

/* 1セット目＋クローンを横並びにして、ここごと左へ動かす */
.slider-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  height: 100%;
  will-change: transform;
}

/*小さい文字*/
.top-f-s {
  color: #ecedec;
  font-size: 1.0rem;
  margin-bottom:60px;
}

/*文字をスライドの上に載せる*/
.hero-section > .p-ab {
    position: absolute;
    z-index: 3;          /* 影(::after)より前面 */
    bottom: 5%;
    left: 5%;
}

/* ============================================================
   ヒーロー上のUI（文字・画像・SCROLL）のフェードイン
   ------------------------------------------------------------
   初期は透明。ズームイン完了後に JS が .hero-section へ
   .ui-visible を付けてフェードインさせる
   ============================================================ */
.hero-section > .p-ab,
.hero-section > .scroll-indicator {
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-section.ui-visible > .p-ab,
.hero-section.ui-visible > .scroll-indicator {
  opacity: 1;
}

/* ============================================================
   スクロール誘導（右下）
   ============================================================ */
.scroll-indicator {
  position: absolute;
  z-index: 3;          /* 影(::after)より前面 */
  right: 4%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll-label {
  color: #d7d8d7;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

/* 黄色い半円マーク2つを載せる箱 */
.scroll-marks {
  --mark-w: 13px;    /* 半円の幅（＝半径） */
  --mark-h: 27px;    /* 半円の高さ */
  --mark-gap: 5px;   /* 2つの間隔 */
  --step: calc(var(--mark-w) + var(--mark-gap)); /* 1つ分の移動量 */
  position: relative;
  width: calc(var(--mark-w) * 2 + var(--mark-gap));
  height: var(--mark-h);
}

/* 右向きの半円（D字型：左が平ら・右が丸い） */
.scroll-marks .mark {
  position: absolute;
  top: 0;
  width: var(--mark-w);
  height: var(--mark-h);
  background: #edff00;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

/* 左のマーク（初期位置：左） */
.scroll-marks .mark:nth-child(1) {
  left: 0;
  animation: scrollMarkA 2.6s ease-in-out infinite;
}

/* 右のマーク（初期位置：右） */
.scroll-marks .mark:nth-child(2) {
  left: var(--step);
  animation: scrollMarkB 2.6s ease-in-out infinite;
}

/* 左マーク: 右へ進んで、右の位置に収まる（入れ替わり）→ 静止2秒 */
@keyframes scrollMarkA {
  0%   { transform: translateX(0);          opacity: 1; }
  20%  { transform: translateX(var(--step)); opacity: 1; }
  100% { transform: translateX(var(--step)); opacity: 1; }
}

/* 右マーク: 右へ抜けて消え、左へ回り込んで現れる（入れ替わり）→ 静止2秒 */
@keyframes scrollMarkB {
  0%    { transform: translateX(0);                       opacity: 1; }
  12%   { transform: translateX(calc(var(--step) * 0.9)); opacity: 0; }
  12.01%{ transform: translateX(calc(var(--step) * -1));  opacity: 0; }
  20%   { transform: translateX(calc(var(--step) * -1));  opacity: 1; }
  100%  { transform: translateX(calc(var(--step) * -1));  opacity: 1; }
}

/* アニメーション抑制設定では動かさない */
@media (prefers-reduced-motion: reduce) {
  .scroll-marks .mark { animation: none; }
}

/* ============================================================
   グリッド（5列×4行。列優先で敷き詰める）
   ============================================================ */
.slide-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-total), var(--item-w));
  grid-template-rows: repeat(4, 1fr);   /* 4行を画面高で均等割り */
  grid-auto-flow: column;   /* 上から下→次の列、の順で配置 */
  gap: var(--gap);
  height: 100%;
}

.slide-item {
  overflow: hidden;
}

.slide-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   初回アニメーション（1セット目のみ制御）
   ------------------------------------------------------------
   ・initial-show（1〜4列目/16枚）… 最初は縮小＋透明 → ズームイン
   ・initial-hidden（5列目/4枚） … 最初は非表示。ループ開始時に表示
   ・クローンセットは常時表示（画面外にあるので見えない）
   ============================================================ */
.first-set .initial-show {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.first-set .initial-show.is-visible {
  opacity: 1;
  transform: scale(1);
}

.first-set .initial-hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.first-set .initial-hidden.is-visible {
  opacity: 1;
}

/* ============================================================
   無限ループ
   ------------------------------------------------------------
   --loop-distance / --loop-duration は JS から実測値をセット
   ============================================================ */
@keyframes slideLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--loop-distance))); }
}

.slider-track.is-looping {
  animation: slideLoop var(--loop-duration) linear infinite;
}

/* アクセシビリティ: アニメーション抑制設定の場合はループを止める */
@media (prefers-reduced-motion: reduce) {
  .slider-track.is-looping {
    animation: none;
  }
}

/* ============================================================
   COMPANY セクション
   ============================================================ */
.company-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #eeefee;
  color: rgba(0, 0, 0, 0.75);
}

/* パララックス背景（波模様）。
   cover で常にセクション全体を覆う（幅が狭くても隙間が出ず、中身が必ず背景内に収まる）。
   要素を高め(160%)＋top:-30% にして、パララックスで動いても上下に隙間が出ないようにする。 */
.company-bg {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;
  background: url("../images/top-section_1bg.jpg") center center / cover no-repeat;
  background-color: #eeefee;      /* 万一の余白は下地色と馴染ませる */
  will-change: transform;
  z-index: 0;
}

/* 中身のレイアウト（左：黄色い模様 / 右：テキスト） */
.company-inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 10vh 5%;
  display: flex;
  align-items: center;
  gap: 4%;
}

/* 左：黄色い模様 */
.company-visual {
  flex: 0 0 45%;
  display: flex;
  justify-content: center;
}
.company-visual img {
  width: 70%;
  height: auto;
  max-width: 500px;
}

/* 右：テキスト */
.company-content {
  flex: 1 1 auto;
}

.company-label {
  font-family: "Elms Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.25em;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 2.4em; 
}

.company-title {
  font-size: 1.85rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 1.6em;
}

.company-lead {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 1.8em;
}

.company-lead-en {
  font-family: "Elms Sans", sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin-bottom: 5.8em;
}

/* ============================================================
   View ボタン（同形ボタンは共通クラス .btn-view）
   ・ホバーで矢印が右へ消え、次の矢印が左から入る
   ============================================================ */
.btn-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  max-width: 380px;
  padding: 0.6em 0.2em 0.85em;
  border-bottom: 1px solid #333;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.btn-view__label {
  font-weight: 500;
}

/* 矢印の窓（はみ出しを隠して、出入りを見せる） */
.btn-view__arrow {
  position: relative;
  width: 44px;
  height: 12px;
  overflow: hidden;
}

.btn-view__arrow .arw {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 通常時：現在の矢印は中央、次の矢印は左の外で待機 */
.btn-view__arrow .arw--current { transform: translateX(0); }
.btn-view__arrow .arw--next    { transform: translateX(-140%); }

/* ホバー：現在の矢印は右へ抜け、次の矢印が左から入る */
.btn-view:hover .arw--current { transform: translateX(140%); }
.btn-view:hover .arw--next    { transform: translateX(0); }

/* ============================================================
   スクロールで表示領域に入ったら下から上へフェードイン
   ・初期は少し下＋透明 → is-inview で定位置＋不透明
   ・要素ごとに遅延をつけて順番に出す
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-section.is-inview .reveal-up {
  opacity: 1;
  transform: translateY(0);
}

/* 順番に出すためのディレイ */
.company-section.is-inview .company-visual .reveal-up { transition-delay: 0.05s; }
.company-section.is-inview .company-label   { transition-delay: 0.15s; }
.company-section.is-inview .company-title   { transition-delay: 0.28s; }
.company-section.is-inview .company-lead    { transition-delay: 0.40s; }
.company-section.is-inview .company-lead-en { transition-delay: 0.50s; }
.company-section.is-inview .btn-view        { transition-delay: 0.60s; }

/* レスポンシブ（狭い画面では縦積み） */
@media (max-width: 768px) {
  .company-inner {
    flex-direction: column;
    align-items: center;
    gap: 6vh;
    padding: 12vh 8%;
  }
  .company-visual { flex: none; width: 60%; }
  .company-visual img { width: 100%; }
  .company-title { font-size: 1.3rem; }

  /* スマホは縦長のスマホ用背景画像に切り替え */
  .company-bg {
    background-image: url("../images/top-section_1bg-sp.png");
  }
}

/* アニメーション抑制設定では動きを無効化 */
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .company-bg { transform: none !important; }
}

/* ============================================================
   BUSINESS FIELD セクション（Re NEXT）
   ============================================================ */
.rn-section {
  /*--rn-orange: #ff4b22;*/
  --rn-grey: #d9d9d6;
  position: relative;
  overflow: hidden;
  /*background: var(--rn-orange);*/
  background-image: url(../images/top-section_2bg.jpg);
  background-size: 100% 100%;
  height: 1750px;
  color: #cbceca;
  padding: 9vh 0 12vh;
}

/* PCでオレンジ領域に入ったら本来のカーソルを消す（丸が代わり） */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .rn-section.cursor-on,
  .rn-section.cursor-on a { cursor: none; }
}

/* 左の巨大テキスト Re NEXT */
.rn-bigtext {
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #e9e5de;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}

/* 中身 */
.rn-inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5%;
}

.rn-head { 
  padding-left: 15%;
  padding-top: 15%;
}

.rn-label {
    font-family: "Elms Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    margin-bottom: 2.4rem;
}

.rn-head-cols {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 6%;
  flex-wrap: wrap;
}

.rn-copy {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.04em;
}

.rn-copy-sub {
  max-width: 24em;
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.03em;
}

/* ---------- 3つの領域シェイプ（三角配置） ---------- */
.rn-fields {
  position: relative;
  max-width: 1000px;
  height: 800px;
  margin: 3vh auto 0;
}

/* 中央のグロー */
/*.rn-glow {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 236, 150, 0.95) 0%,
    rgba(255, 180, 60, 0.7) 22%,
    rgba(255, 110, 30, 0.35) 45%,
    rgba(255, 75, 34, 0) 68%);
  pointer-events: none;
  z-index: 0;
}*/

/* 各領域（＝反応範囲となる矩形。シェイプより少し大きめ） */
.rn-field {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  padding: 1.4em 1.8em;
  text-decoration: none;
  color: #cbceca;
}
.rn-field--resort { top: 20px;  left: 62.5%; transform: translateX(-50%); }
.rn-field--social { bottom: -20px; left: 3%; }
.rn-field--life   { bottom: -20px; right: -20%; }

.rn-field__labels {
  text-align: center;
  line-height: 1.5;
}
.rn-field__labels .en {
  display: block;
  font-family: "Elms Sans", sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  opacity: 0.85;
}
.rn-field__labels .ja {
  display: block;
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* シェイプ（模様を覗く窓）。clip-path/border-radius で形を作る */
.rn-shape {
  position: relative;
  display: block;
  width: 330px;
  height: 330px;
  overflow: hidden;
}
/* フラットトップ六角形（上下が水平辺、左右が頂点）。正六角形の比 W:H≒1:0.866 */
.rn-shape--hex {
  width: 358px;
  height: 314px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.rn-shape--squircle { border-radius: 30% / 30%; }
.rn-shape--circle   { border-radius: 50%; }

/* シェイプ＋FABをまとめる包み（FABをシェイプ右下に重ねる基準） */
.rn-shape-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* シェイプ右下の丸い「→」ボタン（SPのみ表示。PCはマウス追従カーソルを使用）
   ・円：白ベースの半透明フロスト（上が白く、下へフェードして背景オレンジが透ける）
   ・矢印：セクションのオレンジ赤（#ff4b22） */
.rn-fab {
  display: none;                 /* PCでは非表示 */
  position: absolute;
  right: 0;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #ff4b22;                /* 矢印色 */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transform: translate(34%, 26%);
  z-index: 2;
  pointer-events: none;          /* リンクは親<a>が担う */
}
.rn-fab svg {
  width: 24px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* 六角形は左右が頂点・下辺が斜めのため、右下コーナーが欠けている。
   デザイン実測に合わせ、右下の斜めエッジ〜下辺付近（中心 横91%/縦88%）に配置。 */
.rn-field--resort .rn-fab {
  right: auto;
  bottom: auto;
  left: 91%;
  top: 88%;
  transform: translate(-50%, -50%);
}

/* 模様レイヤー（左下へ無限ループ移動） */
.rn-pat {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
/* background-size はタイルの縦横比に合わせる（比が崩れると継ぎ目が出るため）。
   ループのずらし量は「1タイル分」= background-size と同値にしてシームレスに。 */
/* シェイプ拡大に合わせてタイルも拡大（各シェイプ内で約1.3枚＝繰り返しが綺麗に見える）。
   縦横比はPNG実寸に一致させて歪ませない。ループ量は background-size と同値。 */
.rn-pat--resort {
  background-image: url("../images/pattern_resort.png");
  background-size: 650px 650px;     /* タイル 355:316（比 1.123）・六角形358幅の約0.78 */
  animation: rnPatResort 60s linear infinite;
}
.rn-pat--social {
  background-image: url("../images/pattern_social.png");
  background-size: 850px 850px;     /* タイル 313:313（正方形）・四角330幅の約0.78 */
  animation: rnPatSocial 78s linear infinite;
}
.rn-pat--life {
  background-image: url("../images/pattern_life.png");
  background-size: 257px 305px;     /* タイル 283:336（比 0.842）・丸330幅の約0.78 */
  animation: rnPatLife 22s linear infinite;
}

/* 背景位置を1タイル分ずらして左下へ（シームレスループ）。
   ずらし量は必ず background-size と同値にすること。 */
@keyframes rnPatResort { to { background-position: -650px 650px; } }
@keyframes rnPatSocial { to { background-position: -850px 850px; } }
@keyframes rnPatLife   { to { background-position: -257px 305px; } }

/* ---------- 右下の英文キャプション ---------- */
.rn-caption {
  font-family: "Elms Sans", sans-serif;
  margin-top: 10vh;
  text-align: right;
  font-size: 0.84rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  line-height: 2;
  
}

/* ============================================================
   マウス追従カーソル（グレーの丸 → View ボタン）
   ============================================================ */
.rn-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(217, 217, 214, 0.9);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  z-index: 50;
  opacity: 0;                 /* 通常は非表示。領域内で表示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1a1a1a;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1),
              height 0.35s cubic-bezier(0.16,1,0.3,1),
              background 0.35s ease, opacity 0.25s ease;
}
.rn-cursor.is-visible { opacity: 1; }

/* View 化（シェイプ範囲に入ったとき）：広がって背景ぼかし */
.rn-cursor.is-view {
  width: 168px;
  height: 168px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.rn-cursor__view,
.rn-cursor__sub,
.rn-cursor__arrow {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rn-cursor.is-view .rn-cursor__view,
.rn-cursor.is-view .rn-cursor__sub,
.rn-cursor.is-view .rn-cursor__arrow {
  opacity: 1;
  transform: translateY(0);
}

.rn-cursor__view { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 0.4em; }
.rn-cursor__sub  { font-size: 0.5rem; letter-spacing: 0.12em; margin-bottom: 0.7em; white-space: nowrap; }
.rn-cursor__arrow svg { width: 34px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ---------- レスポンシブ（縦積み・カーソル追従なし） ---------- */
@media (max-width: 900px) {
   .rn-section {
    height: 2000px;
  }
  .rn-head { padding-left: 15%; padding-top: 5%; }
  .rn-bigtext { font-size: 22vw; /*opacity: 0.5;*/ }
  .rn-fields {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    padding-top: 4vh;
  }
 
  .rn-field { position: static; transform: none; }
  .rn-field--resort,
  .rn-field--social,
  .rn-field--life { top: auto; left: auto; right: auto; }
  .rn-glow { top: 50%; }
  .rn-cursor { display: none; }
  .rn-fab { display: flex; }        /* SPでは各シェイプ右下に「→」ボタンを表示 */
  .rn-caption { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-pat { animation: none !important; }
}

@media (max-width: 1500px) {
   .rn-bigtext {
    width: 15%;
    top: 34%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 1300px) {
p.rn-label {
    font-size: 0.9rem;
}

.rn-bigtext img {
    width: 100%;
    height: auto;
    display: block;
}

p.rn-copy {
    font-size: 1.35rem;
}

p.rn-copy-sub {
    font-size: 1.0rem;
    margin-top: 30px;
}

.rn-fields {
    max-width: 800px;
}

span.rn-shape.rn-shape--hex {
    width: 300px;
    height: 250px;
}

span.rn-shape.rn-shape--squircle {
    width: 300px;
    height: 300px;
}


.rn-shape {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 999px) {
a.rn-field.rn-field--resort {
    left: 55%;
}

.rn-field--resort {
    left: 62.5%;
}


a.rn-field.rn-field--social {
    left: 5%;
}

a.rn-field.rn-field--life {
    right: -5%;
}



}


/* ============================================================
   MESSAGE / NEWS / FOOTER セクション
   ============================================================ */
.msg-section {
  position: relative;
  background: #ececea;
  color: #1a1a1a;
}

/* ロゴマーク（差し替え用のプレースホルダ） */
.ul-logo__mark {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: conic-gradient(from -20deg, #2b6cff, #17c0eb, #ffd21e, #ff5e3a, #12c99b, #2b6cff);
  flex: none;
}

/* ---------- 上部：暗いテクスチャ背景の MESSAGE ---------- */
.msg-hero {
  position: relative;
  overflow: hidden;
  background: #1b2531;
  /* 幅は常に100%。高さは背景画像(1500×1568)の比率で確保し、
     画像を横幅100%・縦もフルで表示する（max-height は付けない＝幅が縮まない） */
  width: 100%;
  aspect-ratio: 1500 / 1568;
  min-height: 620px;
}
.msg-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/top-section-3bg_06.jpg");
  background-size: 100% 100%;      /* 幅100%・縦もフル表示（ヒーロー比=画像比なので歪まない） */
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.msg-logo-top {
  position: absolute;
  top: 26px;
  right: 4%;
  z-index: 3;
}

.msg-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 96px 6% 60px;
  top: 14%;
}

.msg-text {
  position: relative;
  z-index: 2;
  width: 44%;
  padding-top: 170px;      /* 少し下げる */
  color: #cbceca;
}
.msg-label {
  font-family: "Elms Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  margin-bottom: 2.2em;
}
.msg-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-bottom: 0.9em;
  color: #cbceca;
}
.msg-en {
  font-family: "Elms Sans", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 3.4em;
}




/* 中央写真（表示領域に入るとスーッとズームイン） */
.msg-photo {
  position: absolute;
  top: 240px;              /* 少し下げる */
  left: 31%;
  width: 40%;
  max-width: 550px;
  z-index: 1;
}
.msg-photo img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(0.72);          /* 初期は少し小さく */
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* 表示領域に入ったらスーッと等倍へズームイン */
.msg-photo.is-inview img {
  transform: scale(1);
}

.btn-view.top-msg {
  max-width: 245px;
  color: #cbceca;
}

/* ---------- 下部：左コピー + 右 NEWS パネル ---------- */
.msg-lower {
  position: relative;
  background: #ececea;
  display: block;
    height: 800px;
}
.msg-lower__inner {
  position: relative;
  max-width: 1500px;
  height: 100%;                    /* コピーの縦位置基準を .msg-lower 全高に */
  margin: 0 auto;
  padding: 0 6%;
}

@media (max-width: 1250px) {
.msg-label {
    font-size: 1.2rem;
  }

.msg-hero__inner{
  top:5%; 
}
.msg-title {
    font-size: 3.8rem;
  }

.msg-photo {
    left: 34%;
}

}

@media (max-width: 999px) {
    .msg-photo {
        left: 36%;
    }
}


/* NEWS パネル（暗い青。上へ重ねて暗い背景にかぶせる）
   .msg-lower（＝コンテンツ幅いっぱい／スクロールバー分は含まない）の右端に
   絶対配置でスナップ。100vw を使わないので、どの環境でもピタッと右端に寄る */
.news-panel {
  position: absolute;
  right: 0;
  top: -30%;                     /* 上の暗い背景へ重ねる */
  width: min(55%, 1000px);
  z-index: 2;
  background: #3a4c5e;
  color: #fff;
  padding: 10% 11% 11%;
}
.news-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 2.2em;
}
.news-list { list-style: none; }
.news-item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.news-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item:hover::after { transform: scaleX(1); }   /* ホバーでアンダーライン */

.news-item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "date headline new"
    "cat  cat      cat";
  gap: 4px 22px;
  align-items: start;
  padding: 22px 4px;
  text-decoration: none;
  color: #cbceca;
}
.news-date {
  grid-area: date;
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.news-day { display: block; }
.news-headline {
  grid-area: headline;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.7;
}
.news-new { grid-area: new; }
/* カテゴリーは日付の下＝左端に配置 */
.news-cat {
  grid-area: cat;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: #768087;
  margin-top: 1.4em;
}
.news-new {
  align-self: start;
  background: #edff00;
  color: #364a5a;
  font-size: 0.6rem;
  font-weight: bold;
  font-family: "Elms Sans", sans-serif;
  letter-spacing: 0.05em;
  padding: 0.45em 0.95em;
  border-radius: 999px;
}
.news-viewall { margin-top: 2.6em; max-width: 200px; }

/* 左下のコピー */
.msg-lower__copy {
  position: absolute;
    left: 6%;
    bottom: 140px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.75);
}

/* View ボタンの色違い（暗い背景用） */
.btn-view--light {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* ---------- フッター ---------- */
.site-footer { 
  background: #ececea;
  font-family: "Elms Sans", sans-serif;
  padding-top: 60px;
}
.site-footer__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 6% 46px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 26px;
}
.footer-slogan {
  font-size: clamp(1.6rem, 3vw, 4rem);
  font-weight: bold;
  letter-spacing: 3px;
  color: rgba(0, 0, 0, 0.75);

}
.footer-logo { display: flex; align-items: center; gap: 12px; }
.ul-logo__text {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.75);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
}
.footer-nav a {
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #333;
  text-decoration: none;
  margin-right: 1.7em;
  padding-bottom: 4px;              /* 下線を出す余白 */
}
/* ホバー時：下からふわっと下線が現れる（フェード＋少し下から上へ） */
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.footer-nav a:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.footer-nav a:last-child { margin-right: 0; }
.footer-copy { font-size: 0.65rem; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.75); font-weight:bold ;}



/* ---------- レスポンシブ ---------- */

@media (max-width: 999px) {
 .company-title { font-size: 1.35rem; }

 .company-lead {
    font-size: 1.15rem;
  }

  .company-label {
    font-size: 0.9rem;
  }

/* メッセージの修正 */
.msg-hero__inner {
  top:0%
}

.msg-title {
        font-size: 3rem;
}

.msg-label {
    margin-bottom: 1.2em;
    font-size: 1.1rem;
}

  /* デザイン準拠：フッターナビは3列 */
  nav.footer-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 22px;
    row-gap: 14px;
}

.footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-bottom { flex-direction: column; align-items: flex-start; }

.footer-nav a {
        display: block;
        width: auto;
        margin: 0;
        padding-bottom: 6px;
        border-bottom: solid 1px;
    }

  /* フッターロゴ（アイコン＋URBAN LiKE）はデザイン実測 ≈168px に合わせる */
  .footer-logo img { width: 170px; height: auto; }
}

@media (max-width: 900px) {
  .msg-hero { aspect-ratio: auto; max-height: none; min-height: 0; }
  .msg-hero__inner { padding: 50px 6% 120px; }
  .msg-text { width: 100%; padding-top: 0px; }
  .msg-title {
    margin-bottom: 0.7em;
    line-height: 1.3;
  }
  .msg-photo {
    position: static;
    width: 78%;
    max-width: 420px;
    margin: 40px auto 25px;
  }
  .msg-photo img { transform: none !important; }
  /* NEWS → 少年コピー の順に縦積み（デザイン準拠） */
  .msg-lower { height: auto; display: flex; flex-direction: column; }
  .msg-lower__inner { order: 2; height: auto; padding-top: 8px; margin-left: 0;}
  /* デザイン準拠：パネルは左端まで届かせず、左に約7.5%の余白を残す（右端は画面端まで）。
     さらにヒーロー下部（Viewの下の暗い写真部分）へ少し重ね、左帯の上側に
     MESSAGEの背景写真が食い込むようにする（下側は明るい背景）。 */
  .news-panel { order: 1; position: relative; z-index: 3; width: auto; margin: -50px 0 0 7.5%; }
  .msg-lower__copy { position: static; left: auto; bottom: auto; padding: 34px 0% 10px; }
  .news-panel { padding: 44px 7% 50px; }   /* 上書き（縦の余白を圧縮） */

  /* NEWS各項目：デザイン準拠で縦積み（日付＋NEW → 見出し → カテゴリ） */
  .news-item a {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date     new"
      "headline headline"
      "cat      cat";
    gap: 18px 12px;
    align-items: center;
    padding: 28px 2px 24px;
  }
  .news-day { display: inline; margin-left: 0.5em; }   /* 日付と [ Mon ] を同じ行に・間に余白 */
  .news-date { font-size: 0.8rem; align-self: center; }
  .news-headline { grid-area: headline; font-size: 1rem; line-height: 1.6; align-self: start; }
  .news-cat { margin-top: 0; font-size: 0.62rem; }
  .news-new { align-self: center; justify-self: end; }

  /*.footer-nav a { display: inline-block; margin: 0 1.4em 0.8em 0; }*/
}

/* ============================================================
   スマホ向け微調整
   ============================================================ */
@media (max-width: 768px) {
  /* ヒーロースライダー：スマホは 2列表示 / 全3列(6行) の並びに変更
     初期は左2列(12枚)、3列目(6枚)はループで登場。19,20枚目は非表示。 */
  :root {
    --cols-visible: 2;   /* 画面に見せる列数 */
    --cols-total: 3;     /* 各セットの総列数（3列目に隠れた6枚を含む） */
  }
  .slide-grid { grid-template-rows: repeat(6, 1fr); }   /* 縦6枚 */
  .slide-item:nth-child(19),
  .slide-item:nth-child(20) { display: none; }          /* 19,20枚目はスマホ非表示 */

  /* ヒーローのロゴ(URBAN LiKE)が画面からはみ出すので画面幅に収める */
  .hero-section > .p-ab {
    left: 5%;
    right: 5%;
    bottom: 6%;
  }
  .hero-section > .p-ab img {
    width: 100%;
    height: auto;
    max-width: 700px;
  }
  .top-f-s { font-size: 0.85rem; margin-bottom: 26px; }

  /* 本文の手動改行(<br>)による中途半端な折り返しを避け、自然に折り返す ←折り返したらダメなので無効化 */
  /*.company-lead br,
  .company-lead-en br,
  .msg-lower__copy br { display: none; }*/

  .msg-lower__copy {
        padding: 34px 0% 10px;
        font-size: 1.3rem;
    }


  /*3領域背景変更*/
.rn-section {
    background-image: url(../images/top-section_2bg-sp.png);
}

  /* 3領域シェイプが画面幅ぎりぎりなので少し縮める */
  .rn-shape { width: 250px; height: 250px; }
  span.rn-shape.rn-shape--squircle {
        width: 250px;
        height: 250px;
    }
    span.rn-shape.rn-shape--hex {
        width: 250px;
        height: 200px;
    }

    /*Re next の文字*/
    .rn-bigtext {
        width: 25%;
        top: 30%;
    }

    /*3領域の余白*/
    .rn-head {
        padding-left: 30%;
        padding-top: 5%;
    }

    .rn-fields {
        padding-left: 30%;
    }

  /*小さい文字の調整（デザイン実測 ≈7.5px に合わせる）*/
    .rn-caption {
        text-align: left;
        padding-left: 3%;
        font-size: 0.47rem;
      }

      /*メッセージブロックの調整*/
.msg-hero {
        aspect-ratio: auto;
        max-height: 1500px;
        min-height: 0;
        /* height: 1500px; */
    }


    .msg-hero__inner {
    top: 8%;
    text-align: center;
    /* Viewの下に暗い写真の余白を確保（デザイン準拠：View→NEWSの間に余白） */
    /*padding-bottom: 300px;*/
    padding: 125px 6% 300px;
}

.msg-hero__bg {
    position: absolute;
    background-image: url(../images/top-section-3bg_06-sp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 0;
    inset: 0px;
    background-position: center center;
}

.btn-view-block > a {
    text-align: center;
    margin: 50px auto;
}

.msg-title {
    /* iPhone SE等の狭い端末で「想像を超える、」が折り返さないよう可変に。
       約417px以上では3rem（48px）を維持し、それ未満で縮小。 */
    font-size: clamp(2.2rem, 11.5vw, 3rem);
}

.msg-label {
    font-size: 0.85rem;
}

.msg-en {
  font-size: 0.7rem;
    line-height: 2.5;
}

/*ニュースパネルの修正*/
.news-panel { margin: -200px 0 0 7.5%; }


}

@media (max-width: 400px) {
.company-title {
        font-size: 1.1rem;
    }

.company-lead {
    font-size: 0.85rem;
  }

  .company-lead-en {
    font-size: 0.5rem;
}

.company-visual {
        width: 100%;
    }

/*RE NEXTブロックと3領域の調整*/
    .rn-section {
        height: auto;
    }

.rn-head,.rn-fields  {
        padding-left: 35%;
      }

.rn-bigtext {
        top: 20%;
        width: 30%;
    }

    span.rn-shape.rn-shape--hex {
        width: 215px;
        height: 185px;
    }

    span.rn-shape.rn-shape--squircle {
        width: 186px;
        height: 186px;
    }

    .rn-shape {
        width: 190px;
        height: 190px;
    }

    p.rn-copy {
        font-size: 1.2rem;
    }

    p.rn-copy-sub {
        font-size: 0.87rem;
    }

    .rn-fields {
        padding-top: 0vh;
    }

    .rn-field {
    padding: 0.4em 0em;
}

.rn-field__labels .en {
    font-size: 0.45rem;
}

.rn-field__labels .ja {
    font-size: 0.9rem;
  }

  .rn-caption {
    font-size: 0.47rem;
  }

}