/* ==========================================================
   environment.css
   ========================================================== */

/* ----------------------------------------
   共通見出し（Study Program / Daily Schedule / Welfare）
   ※ two-pillars の p-env__ttl 相当
   ---------------------------------------- */
.p-env__ttl {
  text-align: left;
  margin-block-end: 1.5rem;
}

/* .p-env__ttl .c-ttl__en の display は共通 .c-ttl__en (block) と同値のため削除
   ※SPの font-size 上書き（下部メディアクエリ）は実差のため残置 */

.p-env__ttl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 0.5rem;
  flex-wrap: wrap;
}

.p-env__ttl-row .c-ttl__ja {
  display: inline;
  font-size: 1rem;
  line-height: 1.4;
}

.p-env__ttl-row .c-ttl__dots {
  display: flex;
  align-items: center;
  margin: 0;
  margin-block: 0;
  padding: 0;
  line-height: 1;
  transform: translateY(7px);
}

.p-env__ttl-row .c-ttl__dots span {
  display: block;
  flex-shrink: 0;
}

/* SP: JAの文字サイズ・上マージンが下層ページ共通CSS（customize.css）で変わったため、
   PC向けに調整されていたtransform: translateY(7px)（JAとの縦中央を合わせるための
   オフセット）がJAより下にズレる原因になった。SPのみtransformを打ち消し、
   align-items:centerの自然な縦中央揃えに任せる（PCのtranslateY(7px)は変更しない）。 */
@media (max-width: 768px) {
  .p-env__ttl-row .c-ttl__dots {
    transform: none;
  }
}

/* ----------------------------------------
   グレー背景ゾーン
   ---------------------------------------- */
.p-env-gray {
  padding-block-end: 10rem; /* 160px */
}

/* ----------------------------------------
   Study Program
   ---------------------------------------- */
.p-env-study {
  /* ページ先頭の開始間隔は共通CSS（customize.css の .p-page-bg padding-block-start /
     --page-content-gap）で一元管理。ここでの重複指定は撤去済み。 */
  /* .p-page-bg の負のマージンにより、ブラウザのネイティブハッシュスクロールが
     fixed ヘッダーに被る問題の補正。#support（ラッパー外）は不要のため対象外。 */
  scroll-margin-top: calc(var(--header-h, 80px) + var(--anchor-gap, 40px));
}

/* 見出し + テキスト（左） / 画像（右） */
.p-env-study__head {
  display: flex;
  align-items: flex-start;
  gap: 6%;
  margin-block-end: 5rem; /* 80px */
}

.p-env-study__head-text {
  flex: 0 0 51%; /* "Study Program" が折り返さない幅 */
}

.p-env-study__head-img {
  flex: 1;
  /* 元画像(environment_img01.png)の実寸比率(520:388)で高さを固定。
     動画(environment.mp4, 1920×1080=16:9)は実寸比率が異なるため、
     img時代と同じ height:auto 任せにすると高さ・セクション位置がズレる。
     ここでボックスの縦横比を固定し、中身側は object-fit:cover で
     変形させずに埋める（img/video 共通）。 */
  aspect-ratio: 520 / 388;
}

.p-env-study__head-img img,
.p-env-study__head-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.p-env-study__body {
  font-size: 1rem;
  line-height: 1.9;
  margin: 60px 0 0;
}

/* 資格取得テーブル */
.p-env-study__table-wrap {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: none; /* 外枠ボーダーなし */
}

.p-env-study__table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.p-env-study__table th {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--font-color);
  text-align: left;
  vertical-align: middle;
  width: 300px;
  padding: 2.8125rem 2.4rem; /* 45px */
  border-bottom: 1px solid #E4E9F0;
  border-top: none;
  border-left: none;
  border-right: none; /* TH-TD間の縦ボーダーなし */
}

.p-env-study__table td {
  font-size: 1rem; /* 16px */
  vertical-align: middle;
  padding: 2.8125rem 2rem; /* 45px */
  border-bottom: 1px solid #E4E9F0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.p-env-study__table tr.--last th,
.p-env-study__table tr.--last td {
  border-bottom: none;
}

/* ----------------------------------------
   Welfare
   ---------------------------------------- */
.p-env-welfare {
  margin-block-start: 18.2rem;
  scroll-margin-top: calc(var(--header-h, 80px) + var(--anchor-gap, 40px));
}

/* 見出し：左38%画像 / 右55%テキスト */
.p-env-welfare__head {
  display: flex;
  align-items: flex-start;
  gap: 7%;
  margin-block-end: 5rem; /* 80px */
}

.p-env-welfare__head-img {
  flex: 0 0 38%;
}

.p-env-welfare__head-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.p-env-welfare__head-text {
  flex: 0 0 55%;
}

.p-env-welfare__body {
  font-size: 1rem;
  line-height: 1.9;
  margin: 60px 0 0;
    padding-right: 20px;
}

/* 福利厚生リストボックス（3列） */
.p-env-welfare__list-box {
  background: #fff;
  border-radius: 10px;
  padding: 2.8125rem 3.125rem; /* 45px 50px */
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0 3rem;
  align-items: center;
}

.p-env-welfare__list-label {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--font-color);
  white-space: nowrap;
  align-self: center;
  margin-right: 5.2rem;
}

.p-env-welfare__list {
  list-style: disc;
  padding-inline-start: 0.0rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
}

/* 2カラム画像エリア */
.p-env-welfare__cols2 {
  display: flex;
  gap: 4%;
  margin-block-start: 3.75rem; /* 60px */
}

.p-env-welfare__col2-item {
  flex: 0 0 48%;
}

.p-env-welfare__col2-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-block-end: 1.875rem; /* 30px */
}

.p-env-welfare__col2-ttl {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: var(--font-color);
  margin-block: 0 0.75rem;
  line-height: 1.5;
}

.p-env-welfare__col2-body {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

/* ----------------------------------------
   Support（白背景）
   ---------------------------------------- */
.p-env-support {
  background: #fff;
  padding-block: 10rem; /* 160px */
}

/* 1280px 画像（b-inner 外に出して幅確保） */
.p-env-support__img {
  max-width: 1280px;
  margin-inline: auto;
  width: 94%;
  margin-block: 5rem 1.875rem; /* 30px below */
}

.p-env-support__img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.p-env-support__text {
  font-size: 1rem;
  line-height: 1.9;
  margin-block: 2.5rem 5.5rem; /* 80px */
}

/* 研修テーブル */
.p-env-support__table-wrap {
  border: 1px solid #E4E9F0;
  border-radius: 10px;
  overflow: hidden;
  margin-block-end: 5rem; /* 80px */
}

.p-env-support__table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  /* :where(table){border:1px solid} を上書き */
  border: none;
}

/* ヘッダー行
   :where(th,td){border:1px solid} を全リセットしてから必要なボーダーだけ付与 */
.p-env-support__table thead th {
  background: #E4E9F0;
  padding: 1.3rem 0.72rem;
  text-align: center;
  font-weight: normal; /* TH は太字なし */
  border: none;
  border-right: 1px solid #fff; /* TH間白1px */
}

.p-env-support__table thead th:last-child {
  border-right: none;
}

/* ボディ */
.p-env-support__table tbody td {
  border: none;
  border-bottom: 1px solid #E4E9F0;
  border-right: 1px solid #E4E9F0;
  padding: 1.275rem 0.72rem;
  vertical-align: middle;
}

.p-env-support__table tbody tr:last-child td {
  border-bottom: none;
}

.p-env-support__table tbody .--month {
  text-align: center;
  font-weight: 600;
}

.p-env-support__table tbody .--time {
  text-align: center;
}

.p-env-support__table tbody .--content {
  text-align: left;
  padding-left: 20px;
  border-right: none;
}

/* エルダー制度ボックス */
.p-env-support__elder {
  background: rgba(130, 190, 223, 0.15);
  border-radius: 10px;
  padding: 2.8125rem 3.125rem; /* 45px 50px */
  display: flex;
  align-items: center;
  gap: 4rem;
}

.p-env-support__elder-ttl {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--font-color);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.7;
    margin-right:  1.4rem;
}

.p-env-support__elder-body {
  font-size: 1rem;
  line-height: 1.9;
}

.p-env-support__elder-body p {
  margin: 0;
}

/* ----------------------------------------
   Daily Schedule（薄グレー背景）
   ---------------------------------------- */
.p-env-daily {
  background: #F9F9F9;
  padding-block: 10rem 12.5rem; /* top 160px */
}

/* 見出し + 右画像 */
.p-env-daily__head {
  max-width: 1200px;
  width: 94%;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 5%;
  margin-block-end: 5rem; /* 80px */
}

.p-env-daily__head-text {
  flex: 0 0 51.5%;
}

.p-env-daily__head-img {
  flex: 1;
}

.p-env-daily__head-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.p-env-daily__head-body {
  font-size: 1rem;
  line-height: 1.9;
  margin: 60px 0 0;
}

/* 1200px ボックス群 */
.p-env-daily__boxes {
  max-width: 1200px;
  width: 94%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
}

.p-env-daily__box {
  background: rgba(130, 190, 223, 0.15);
  border-radius: 10px;
  /* 上paddingのみ+15px。左右・下paddingは既存値のまま個別指定に分解 */
  padding-block-start: calc(2.5rem + 12px); /* 40px + 15px */
  padding-block-end: 2.5rem; /* 40px（不変） */
  padding-inline: 3.125rem; /* 50px（不変） */
}

.p-env-daily__box-ttl {
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  color: var(--font-color);
  margin-block: 0 3.125rem; /* 50px */
}

/* ----------------------------------------
   タイムライン
   ---------------------------------------- */
.p-env-timeline {
  /* スクロール専用の外側コンテナ。グリッド定義・横罫線(::before)は内側の
     .p-env-timeline__track 側に持たせる（理由は下記コメント参照）。 */
  position: relative;
  overflow-x: auto;
}

/* グリッド本体（9列）を内包する内側ラッパー。
   .p-env-timeline（外側・overflow-x:auto）は自身の幅が親(.p-env-daily__box)の
   表示幅までしか広がらず、9列分の実幅（スクロール対象のコンテンツ幅）そのものには
   ならない。そのため横罫線(::before)を.p-env-timeline自身に描くと、線の幅が
   「表示中の見える範囲」までしかできず、スクロールで後から見える部分の罫線が
   消えていた（SP実機で確認）。この内側ラッパーに9列グリッドと横罫線を移し、
   SPのみ width:max-content で9列分の実幅ぴったりに広げることで、
   スクロール後も罫線が最終項目まで連続して表示されるようにする。 */
.p-env-timeline__track {
  display: grid;
  /* minmax(0,1fr)：1fr単体だと各列の自動最小幅が中身（吹き出し・本文の
     white-space:nowrap分）の min-content になり、9列合計がコンテナ幅を
     超えて.p-env-timeline自身の overflow-x:auto が働いてしまっていた
     （PCで本来不要な内部横スクロールの主因）。0を明示することで列は
     コンテナ幅ぴったりまで縮められるようになる。SPは別途
     .p-env-timeline__item{min-width:90px}で下限を確保するため無関係。 */
  grid-template-columns: repeat(9, minmax(0, 1fr));
  position: relative;
}

/* 各時間帯（列）の横位置を個別調整するためのフック。
   --p-env-timeline-item-x はデフォルト0（現状の位置を維持）。
   時間帯ごとに個体識別できる既存クラスがなかったため、環境ページ側で
   .p-env-timeline__item--{事業所}-{時刻} の個別クラスを最小限追加済み。
   ●・横罫線（.p-env-timeline::before）・縦罫線（.p-env-timeline__dot-row::after）は
   すべてこのアイテム内部（またはその中心基準）にあるため、アイテムごと平行移動しても
   ●と横線・縦線の交わり方は崩れない。個別の横位置調整は、対象の
   --p-env-timeline-item-x にのみ値を指定すれば良く、他の項目には影響しない。 */
.p-env-timeline__item {
  --p-env-timeline-item-x: 0px;
  /* グリッドセル自体の自動最小幅（min-content）をリセット。中身（吹き出し・
     本文）が列幅より広い場合、この指定がないと列がその分だけ広がり
     9列合計がコンテナをはみ出す。SPは.p-env-timeline__item{min-width:90px}
     が後勝ちで上書きするため、この指定はSPの横スクロール仕様に影響しない。 */
  min-width: 0;
  transform: translateX(var(--p-env-timeline-item-x));
}

/*ストーリーの10:00だけ右へ20px */
.p-env-timeline__item--story-1000 {
  --p-env-timeline-item-x: 17px;
}
/*ストーリーの11:00 */
.p-env-timeline__item--story-1100 {
  --p-env-timeline-item-x: 15px;
}
/*ストーリーの12:00 */
.p-env-timeline__item--story-1200 {
  --p-env-timeline-item-x: -27px;
}
/*ストーリーの13:00 */
.p-env-timeline__item--story-1300 {
  --p-env-timeline-item-x: -38px;
}
/*ストーリーの14:00 */
.p-env-timeline__item--story-1400 {
  --p-env-timeline-item-x: -35px;
}
/*ストーリーの15:00 */
.p-env-timeline__item--story-1500 {
  --p-env-timeline-item-x: -38px;
}
/*ストーリーの16:00 */
.p-env-timeline__item--story-1600 {
  --p-env-timeline-item-x: -20px;
}
/*ストーリーの17:30 */
.p-env-timeline__item--story-1730 {
  --p-env-timeline-item-x: 5px;
}
/*ストーリーの19:00 */
.p-env-timeline__item--story-1900 {
  --p-env-timeline-item-x: -6px;
}


/*リズムストーリーの09:30だけ右へ20px */
.p-env-timeline__item--rhythm-0930 {
  --p-env-timeline-item-x: 18px;
}
/*リズムストーリーの09:40だけ右へ20px */
.p-env-timeline__item--rhythm-0940 {
  --p-env-timeline-item-x: 19px;
}
/*リズムストーリーの10:00 */
.p-env-timeline__item--rhythm-1000 {
  --p-env-timeline-item-x: 28px;
}
/*リズムストーリーの12:00 */
.p-env-timeline__item--rhythm-1200 {
  --p-env-timeline-item-x: 25px;
}
/*リズムストーリーの13:00 */
.p-env-timeline__item--rhythm-1300 {
  --p-env-timeline-item-x: 13px;
}
/*リズムストーリーの14:00 */
.p-env-timeline__item--rhythm-1400 {
  --p-env-timeline-item-x: 15px;
}
/*リズムストーリーの15:00 */
.p-env-timeline__item--rhythm-1500 {
  --p-env-timeline-item-x: 25px;
}
/*リズムストーリーの17:30 */
.p-env-timeline__item--rhythm-1730 {
  --p-env-timeline-item-x: -17px;
}
/*リズムストーリーの18:30 */
.p-env-timeline__item--rhythm-1830 {
  --p-env-timeline-item-x: 1px;
}
/*リズムストーリーの17:30：後ろ2列目のため右側の余白が少なく、狭いPC幅
   （900px/769px実測）で+61pxのままだと右端をはみ出す。広いPC幅（概ね1024px以上）
   では従来通り61pxを維持しつつ、769px〜1024pxの範囲だけ線形に20pxまで
   縮小するclamp()にして、狭いPCだけ移動量を抑える（見た目は広いPC幅では不変）。 */
.p-env-timeline__item--rhythm-1730 {
  --p-env-timeline-item-x: clamp(20px, calc(20px + (100vw - 769px) * 0.16), 61px);
}
/*リズムストーリーの18:30：grid最終列（9列目）のため右側に余白が全くなく、
   正方向へのtranslateXは1pxでもそのままコンテナ右端を超えてしまう。
   45px→0pxへ縮小（他の項目は変更していない）。 */
.p-env-timeline__item--rhythm-1830 {
  --p-env-timeline-item-x: 0px;
}

/* 横ライン：ドット中心を通る（label-area 4rem + dot半径 5px）
   padding-block-end は height 内側なので加算不要。
   .p-env-timeline（スクロール外側）ではなく .p-env-timeline__track（グリッド内側）
   の疑似要素にすることで、線の幅が9列分の実幅に追従するようにする。 */
.p-env-timeline__track::before {
  content: '';
  position: absolute;
  top: calc(4rem + 5px);
  left: 0;
  right: 0;
  height: 1px;
  background: #B6C1CF;
  z-index: 0;
}

/* ラベルエリア（固定高さで縦位置を揃える） */
.p-env-timeline__label-area {
  height: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block-end: 0.75rem;
}

/* バルーンラベル */
.p-env-timeline__label {
  display: inline-block;
  background: #58A9DB;
  color: #fff;
  /* min(0.75rem,12px)：ルートfont-sizeは変更せず、この吹き出しの文字サイズ
     だけ1440px時点の見た目（12px）を上限にキャップ。769〜1599pxは元々
     0.75rem=12px固定なので挙動は不変、html{font-size:1vw}が効く1600px以上
     でだけ12pxで頭打ちにする（1920pxで肥大化していたのはこれが原因）。 */
  font-size: min(0.75rem, 12px);
  line-height: 1.4;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  margin-block-end: 1.2rem; /* PC: ▼先端から●まで約30px確保 */
}

/* ▼ 矢印 */
.p-env-timeline__label::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #58A9DB;
}

/* 「残業ほぼありません」（リズムストーリー18:30）のみ、角丸ボックスを左へ36px移動。
   ▼(::after)は現在位置（●の真上）を維持するため、ボックスの移動量と同じだけ
   逆方向に打ち消すオフセットを追加している（▼自体の位置・形・大きさは無変更）。
   他の吹き出しには影響しない（このitemクラスの中でのみ有効）。 */
.p-env-timeline__item--rhythm-1830 .p-env-timeline__label {
  transform: translateX(-44px);
}

.p-env-timeline__item--rhythm-1830 .p-env-timeline__label::after {
  transform: translateX(calc(-50% + 44px));
}

/* ドット行 */
.p-env-timeline__dot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  position: relative;
  z-index: 1;
}

/* 各●から下への縦罫線 30px */
.p-env-timeline__dot-row::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 30px;
  background: #B6C1CF;
  z-index: 0;
}

.p-env-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--font-color);
  flex-shrink: 0;
  position: relative;
  z-index: 2; /* 横線・縦線より前面 */
}

/* 時間 */
.p-env-timeline__time {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: #E89196;
  font-size: 1rem;
  text-align: center;
  margin-block-start: 2.375rem; /* PC: 縦線末端(25px下)から13px gap = 38px */
}

/* コメント */
.p-env-timeline__text {
  /* min(0.875rem,14px)：本文側も同様に1440px時点の見た目（14px）で頭打ち。
     769〜1599pxは元々0.875rem=14px固定なので挙動は不変。 */
  font-size: min(0.875rem, 14px);
  text-align: center;
  line-height: 1.5;
  margin-block-start: 1.25rem; /* 20px */
  color: var(--font-color-03);
  white-space: nowrap;
}

/* ScrollHint: PCでは非表示 */
@media (min-width: 769px) {
  .p-env-timeline .scroll-hint-icon,
  .p-env-support__table-wrap .scroll-hint-icon { display: none !important; }
}

/* ScrollHint: SPアイコン調整 */
@media (max-width: 768px) {
  .p-env-timeline .scroll-hint-icon,
  .p-env-support__table-wrap .scroll-hint-icon {
    height: 90px !important;
  }
  .p-env-timeline .scroll-hint-text,
  .p-env-support__table-wrap .scroll-hint-text {
    margin-top: 0 !important;
  }
}

/* ----------------------------------------
   SP（768px以下）
   ---------------------------------------- */
@media (max-width: 768px) {

  .p-env-gray {
    padding-block-end: 5rem;
  }



  .p-env-study__head {
    flex-direction: column;
    gap: 1.5rem;
    margin-block-end: 2.5rem;
  }

  .p-env-study__head-text,
  .p-env-study__head-img {
    flex: none;
    width: 100%;
  }
    .p-env-study__body {
      margin: 40px 0 0;
    }

  .p-env-study__table th {
    font-size: 1rem;
    width: auto;
    min-width: 100px;
    padding: 1.25rem 1rem;
  }

  .p-env-study__table td {
    padding: 1.25rem 1rem;
  }

  /* Welfare */
  .p-env-welfare {
    margin-block-start: 5.5rem;
  }

  .p-env-welfare__head {
    flex-direction: column;
    gap: 1.875rem;
    margin-block-end: 2rem;
  }

  .p-env-welfare__head-img,
  .p-env-welfare__head-text {
    flex: none;
    width: 100%;
  }
    .p-env-welfare__body {
     padding-right: 0px;
     margin: 40px 0 0;
    }
    
  .p-env-welfare__list-box {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }

  .p-env-welfare__list-label {
    white-space: normal;
  }

  .p-env-welfare__list {
    list-style-position: inside;
  }

  .p-env-welfare__cols2 {
    flex-direction: column;
    gap: 2.5rem;
  }

  .p-env-welfare__col2-item {
    flex: none;
    width: 100%;
  }

  /* Support */
  .p-env-support {
    padding-block: 4rem;
  }

  .p-env-support__img {
    margin-block: 2.5rem 1.875rem;
  }

  .p-env-support__text {
    margin-block-end: 2.5rem;
  }

  .p-env-support__table-wrap {
    overflow-x: auto;
    margin-block-end: 2.5rem;
  }

  .p-env-support__table {
    min-width: 560px;
  }

  .p-env-support__elder {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.25rem;
  }

  .p-env-support__elder-ttl {
    white-space: normal;
  }

  /* Daily Schedule */
  .p-env-daily {
    padding-block: 4rem 8rem;
  }

  .p-env-daily__head {
    flex-direction: column;
    gap: 1.5rem;
    margin-block-end: 2.5rem;
  }

  .p-env-daily__head-text,
  .p-env-daily__head-img {
    flex: none;
    width: 100%;
  }

  .p-env-daily__box {
    /* 上paddingのみ+20px。左右・下paddingは既存値のまま個別指定に分解 */
    padding-block-start: calc(1.5rem + 20px); /* 24px + 20px */
    padding-block-end: 1.5rem; /* 24px（不変） */
    padding-inline: 1rem; /* 16px（不変） */
      margin-bottom: 
  }

  .p-env-daily__box-ttl {
    font-size: 1.25rem;
    margin-block-end: 1.75rem;
  }



  /* タイムライン：横スクロール
     grid-template-columns は PC用に repeat(9, minmax(0, 1fr)) へ変更したが、
     SPでは列の自動最小幅を明示的に0にしてしまうと、.p-env-timeline__item の
     min-width:90px が効いていても列同士の配置間隔（トラック幅）自体は
     35px程度まで潰れてしまい、90px幅のitem同士が大きく重なって左に
     詰まって見える原因になっていた。SPは repeat(9, 1fr) に戻し、
     min-content（＝item の min-width:90px）を列幅の自動最小値として
     再び反映させることで、修正前と同じ間隔・スクロール幅に戻す。 */
  .p-env-timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* width:max-content：内側ラッパー自身の幅を9列分の実コンテンツ幅ぴったりに
     広げる（外側 .p-env-timeline の表示幅には縛られない）。これにより
     .p-env-timeline__track::before の横罫線もスクロール後の最終項目まで
     途切れず連続する。
     列幅は repeat(9,1fr) ではなく明示的な 90px 固定に変更：1fr は
     width:max-content 適用時に「各列のmax-content」基準で列幅が決まり、
     item の min-width:90px より広がってしまい（実測96〜108px）、修正前の
     間隔と変わってしまうため、90px固定にして修正前と同じ列幅・間隔を維持する。 */
  .p-env-timeline__track {
    grid-template-columns: repeat(9, 90px);
    width: max-content;
  }

  .p-env-timeline__item {
    min-width: 90px;
  }

  /* ラベルをposition:absoluteにしてグリッド列幅の制約から解放 */
  .p-env-timeline__label-area {
    position: relative;
    overflow: visible;
  }

  /* bottom:23px → ▼先端がlabel-area底辺から15px上、●中心まで約20px確保 */
  .p-env-timeline__label {
    position: absolute;
    bottom: 23px;
    margin-block-end: 0; /* PC用marginをリセット */
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
    line-height: 1.5;
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
  }

  /* ▼ 矢印：width/height:0 の三角形で明示再宣言 */
  .p-env-timeline__label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid #58A9DB;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    display: block;
  }

  /* 「残業ほぼありません」（リズムストーリー18:30）のみ、角丸ボックスを左へ45px移動（SP）。
     ▼(::after)は現在位置を維持するため逆方向に打ち消すオフセットを追加。PCと同じ考え方。 */
  .p-env-timeline__item--rhythm-1830 .p-env-timeline__label {
    transform: translateX(calc(-50% - 45px));
  }

  .p-env-timeline__item--rhythm-1830 .p-env-timeline__label::after {
    transform: translateX(calc(-50% + 45px));
  }

  .p-env-timeline__time {
    font-size: 0.875rem;
    margin-block-start: 2.1875rem; /* SP: 縦線末端(25px下)から10px gap = 35px */
  }

  .p-env-timeline__text {
    font-size: 0.75rem; /* 12px: 1行収まりを優先 */
  }
}