/* ==========================================================================
   固定ページの地と、写真の帯（2026-10-20）
   --------------------------------------------------------------------------
   経緯:
     1 回目 薄い色のにじみ … オーナー「あんまりわからん」
     2 回目 青緑のうねる帯（SmartHR の帯を手本）… 「ニョロってなってる背景無しだなあ」
     3 回目 3 案（A 面で分ける / B 写真の帯 / C ロゴの形）を同じ会社概要で見比べ
            → **B と C を採用。B は横幅 100%**
   ここに入っているもの:
     C … Remind のマーク（4 つに分かれた形）の影を、ページの右上と中ほどの左に、大きく薄く。単色・静止
     B … 節の切れ目に、横幅いっぱいの写真＋紺の覆い＋欧文の見出し（PHP は remind_photo_band()）
   動きは付けない。色は紺 #003678 と緑 #28a08c だけ。
   ========================================================================== */
main.t-container {
  position: relative;
  isolation: isolate;
}

/* ── C ロゴの形 ─────────────────────────────────────────────────────────
   マークの画像（assets/images/mark-hd.png）を型抜きに使い、色は CSS で塗る。
   本文の外側に大きく置き、本文の後ろに来る部分は薄いので字は読める。 */
main.t-container::before,
main.t-container::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: url("../images/mark-hd.png") center / contain no-repeat;
          mask: url("../images/mark-hd.png") center / contain no-repeat;
}
main.t-container::before {
  top: 520px;
  right: calc(50% - 50vw - 220px);
  width: 760px;
  height: 820px;
  background-color: rgba(0, 54, 120, .07);
  transform: rotate(-8deg);
}
main.t-container::after {
  top: 52%;
  left: calc(50% - 50vw - 260px);
  width: 680px;
  height: 730px;
  background-color: rgba(40, 160, 140, .08);
  transform: rotate(12deg);
}
@media (max-width: 1023px) {
  main.t-container::before { width: 360px; height: 390px; right: -150px; top: 380px; }
  main.t-container::after  { width: 320px; height: 345px; left: -150px; }
}

/* 関連するページの箱を、灰から薄い青に */
.block-navigation-page { background-color: #eef3f9; }

/* ── B 写真の帯 ─────────────────────────────────────────────────────────
   横幅 100%。本文の列（.main）は横にはみ出した分を切る設定（lower.css の
   `.rm-measured .main{overflow-x:clip}`）なので、帯のある列だけ外し、
   ページ全体の横スクロールは html で止める。 */
html { overflow-x: clip; }
.rm-measured .main:has(.photo-band) { overflow-x: visible; }
.photo-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  height: 360px;
  margin: 104px calc(50% - 50vw) 72px;
  background:
    linear-gradient(90deg, rgba(0, 31, 69, .86) 0%, rgba(0, 54, 120, .55) 50%, rgba(0, 54, 120, .12) 100%),
    var(--band-photo) center 35% / cover no-repeat;
}
.photo-band__en {
  margin: 0 0 48px max(24px, calc(50vw - 600px));
  color: #fff;
  font-family: "Figtree", "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -.01em;
}
.photo-band__en small {
  display: block;
  margin-top: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  opacity: .9;
}
/* 会社概要は見出しの上に欧文の小見出し（ページ内リンクの行き先）がある。帯と二重になるので見た目だけ消す */
.photo-band + .rm-shoulder { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
@media (max-width: 1023px) {
  .photo-band { height: 220px; margin: 64px calc(50% - 50vw) 44px; }
  .photo-band__en { margin: 0 0 26px 20px; font-size: 44px; }
  .photo-band__en small { margin-top: 10px; font-size: 13px; }
}