/* ============================================
   ABOUT PAGE - about.css
   myteams 会社概要ページ専用スタイル
   ============================================ */

#philosophy,
#message,
#company-profile,
#access {
  scroll-margin-top: 90px;
}

/* ─────────────────────────────────
   01. FV / ABOUT US - Photo Grid
   ───────────────────────────────── */
.about-fv {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 450px;
  max-height: 700px;
  overflow: hidden;
  background: #111;
}

.about-fv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  position: absolute;
  top: -5%;
  left: -2%;
  right: -2%;
  bottom: -5%;
  z-index: 1;
}

.about-fv-col {
  overflow: hidden;
  position: relative;
}

.about-fv-col-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  will-change: transform;
}

/* 左列: 下方向にゆっくりスライド */
.about-fv-col:nth-child(1) .about-fv-col-inner {
  animation: slideDown 40s linear infinite;
}

/* 中央列: 上方向にスライド */
.about-fv-col:nth-child(2) .about-fv-col-inner {
  animation: slideUp 35s linear infinite;
}

/* 右列: 下方向にさらにゆっくり */
.about-fv-col:nth-child(3) .about-fv-col-inner {
  animation: slideDown 45s linear infinite;
}

@keyframes slideDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

@keyframes slideUp {
  0% { transform: translateY(0%); }
  100% { transform: translateY(-50%); }
}

  .about-fv-img {
    width: 100%;
    aspect-ratio: 16 / 9; /* さらに高さを減らし、横長のシネマライクな比率にする */
    object-fit: cover;
    object-position: center 25%; /* 頭が切れないように、トリミング位置を少し上に調整 */
    flex-shrink: 0;
  }

/* Dark overlay */
.about-fv::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.6) 40%,
      rgba(0, 0, 0, 0.7) 70%,
      rgba(0, 0, 0, 0.8) 100%
    );
  z-index: 2;
  pointer-events: none;
}

/* FV center text */
.about-fv-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  color: #fff;
  width: 90%;
  max-width: 700px;
  padding: 20px; /* 余白を最小限に */
}

.about-fv-label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-bottom: 12px;
}.about-fv-title {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 700; /* 900から700へ少し細くする */
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-shadow: 0 3px 15px rgba(0,0,0,0.4);
}@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─────────────────────────────────
   03. PHILOSOPHY
   ───────────────────────────────── */
  .philosophy-block {
    position: relative;
    overflow: hidden;
    padding: 60px 0; /* 広すぎたカード間のスペースを適度なバランスに調整 */
  }
  
  .philosophy-block .container {
    position: relative;
    z-index: 2;
    background: #fff; /* 元の美しい純白カードに戻す */
    padding: 60px 60px 80px; /* カード内の余白を元の美しいバランスに */
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04); /* 元の上品なふんわりシャドウ */
}



/* 巨大背景英字 (水平中央配置) */
.philosophy-bg-text {
  position: absolute;
  top: -20px; /* カードの上部に配置（少しはみ出るくらい） */
  left: 50%; /* 水平中央 */
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  text-align: center;
  
  /* 下からすっと浮かび上がる上品なアニメーション */
  opacity: 0;
  transform: translate(-50%, 30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0.2s;
}
.philosophy-bg-text.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

  /* ツートンスプリット基盤（左上は白、右下は黒に分割） */
  .philosophy-block .container {
    background: linear-gradient(135deg, #fff 90%, #000 90%);
    position: relative;
    z-index: 2;
    overflow: hidden; /* 角丸からはみ出ないように */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
  }

  /* ホバー時は上品な浮遊感（アイデア②）のみ控えめに残す */
  .philosophy-block .container:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
  }

  /* 全ての要素を最前面に配置（デフォルト） */
  .philosophy-block .container > * {
    position: relative;
    z-index: 1;
  }

  

  /* 右下の「黒」背景だけをテーマカラーに染め上げるマジックレイヤー（スクリーン合成） */
  .philosophy-block .container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    border-radius: 8px;
  }

  /* 【MISSION】右下を赤に */
  .philosophy-mission .container::after {
    background: linear-gradient(135deg, transparent 90%, var(--color-primary) 90%);
  }

  /* 【VISION】右下をネイビーに */
  .philosophy-vision .container::after {
    background: linear-gradient(135deg, transparent 90%, #003366 90%);
  }

  /* 【VALUE】右下をダークグレーに */
  .philosophy-value .container::after {
    background: linear-gradient(135deg, transparent 90%, #333333 90%);
  }

  /* 巨大英文字のテーマカラー（先ほど消えてしまっていたため復活） */
  .philosophy-mission .philosophy-bg-text {
    color: var(--color-primary);
  }
  .philosophy-vision .philosophy-bg-text {
    color: #003366;
  }
  .philosophy-value .philosophy-bg-text {
    color: #333333;
  }
  
  /* VISION block */
  .philosophy-vision {
    background: #f8fafc; /* 少し青みがかった明るいグレー（HooCome風） */
  }

  /* MISSION block */
  .philosophy-mission {
    background: #f8fafc;
  }
  
  /* VALUE block */
  .philosophy-value {
    background: #f8fafc; /* 統一して明るい背景にする */
    padding-bottom: 180px; /* 下のブランドビジュアルとの間に余白を作る */
  }.philosophy-heading {
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #111;
  }
  
  /* カード中央上部の小さいロゴ */
  .philosophy-heading::before {
    content: '';
    display: block;
    width: 32px; /* 24pxから少し拡大 */
    height: 32px; /* 24pxから少し拡大 */
    background-image: url('../image/00-common/rogo02.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto 16px; /* ロゴが大きくなった分、下の余白も少し広げる */
  }
  
  .philosophy-body {
    max-width: 680px;
    margin: 0 auto;
    font-size: 16px; /* 文字を大きくして読みやすく */
    font-weight: 500;
    letter-spacing: 0.04em; /* 文字間隔を広げてゆったりと */
    line-height: 2.2; /* 行間を広げて文章の圧迫感をなくす */
    color: #333;
    text-align: left;
  }
  
  /* 強調キーワードをさらに引き立たせる */
  .philosophy-body strong {
    color: var(--color-primary); /* 2026-08-27 中村様のご要望で赤の色付けを追加 */
    font-size: 1.15em; /* 周りより15%大きくしてメリハリを出す */
    font-weight: 700; /* 太字にして王道の読みやすさを確保 */
    text-decoration: underline;
    text-underline-offset: 5px; /* 文字から少し離して窮屈さをなくす */
    text-decoration-thickness: 1px; /* 極細のラインで洗練された印象に */
    font-style: italic; /* 少し斜めにして言葉に「勢い」と「抜け感」をプラス */
  }

.philosophy-body p {
  margin: 0;
}

  /* --- Card Entrance Animation (Reveal) --- */
  .philosophy-card-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.96); /* 下から少し縮んだ状態で待機 */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .philosophy-card-animate.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* ふんわりと実寸大に広がりながら定位置へ */
  }

/* Scroll fade-in animation */
.philosophy-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.philosophy-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for body text */
.philosophy-animate:nth-child(2) {
  transition-delay: 0.2s;
}


/* ─────────────────────────────────
   04. MESSAGE
   ───────────────────────────────── */
.message-section {
  padding: 140px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.message-section .container {
  max-width: 1000px; /* グリッドの幅と統一して左端を揃える */
  padding: 0 4vw;
  margin: 0 auto;
}

.message-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr; /* テキストの割合をさらに大きくする */
  gap: 40px; /* テキストと画像の隙間を狭くする */
  align-items: flex-start;
  max-width: 1000px; /* 幅を制限して全体を中央に寄せる */
  margin: 0 auto;
}

.message-text {
  order: 1;
}

.message-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); /* 少し小さく調整 */
  font-weight: 700; /* 900から700へ少し細くする */
  line-height: 1.4;
  margin-bottom: 50px;
  color: #111;
  position: relative;
}

/* 濃い特大ロゴを背景に配置 */
.message-heading::before {
  content: '';
  position: absolute;
  top: -100px; /* さらに上へ */
  left: -90px; /* さらに左へ */
  width: 250px; /* もっと大きく */
  height: 250px;
  background-image: url('../image/00-common/rogo02.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: -1; /* テキストの背面に */
  opacity: 0.08; /* ブランドカラーの赤が綺麗に見える濃さの透かし */
}

/* Red accent line under heading */
.message-heading::after {
  content: '';
  display: block;
  width: 70px;
  height: 4px;
  background: var(--color-primary);
  margin-top: 25px;
}

.message-body {
  font-size: 16px;
  line-height: 2.2;
  color: #333;
  margin-bottom: 45px;
}

/* 代表メッセージの強調は「赤＋太字」だけに留める。
   理念ブロック（下線＋イタリック＋1.15倍）と同じ装飾にすると、
   一人称の語りが広告のように見えてしまうため。2026-08-27 */
.message-body strong {
  color: var(--color-primary);
  font-weight: 700;
}

.message-body p {
  margin: 0;
  font-size: 16px;
}

.message-signature {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 全体を右寄せに */
  gap: 8px;
}
.sig-en {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--color-primary); /* 赤でアクセント */
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.sig-ja {
  display: flex;
  align-items: baseline;
  gap: 15px;
  border-bottom: 2px solid #111; /* 黒い下線で引き締める */
  padding-bottom: 8px;
  padding-left: 20px; /* 下線の長さを確保 */
}
.sig-role {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}
.sig-name {
  /* 2026-08-27 代表署名は明朝体に統一（career / recruit-coordinator と揃える）。
     経営者のメッセージという文脈に合い、ゴシック主体のサイトの中で
     「特別な箇所」であることが伝わる */
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  color: #111;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.message-photo {
  order: 2;
  position: relative;
}

  /* RED accent rectangle behind photo */
  .message-photo-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 500px; /* 写真の最大サイズを小さく抑える */
    margin: 0 auto;
  }
  
  .message-photo-wrapper::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    border-radius: 8px;
    z-index: 0;
  }
  
  .message-photo-wrapper img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3 / 4; /* 2/3の縦長から、標準的な3/4に変更して威圧感を軽減 */
    object-fit: cover;
    /* 2026-09-03 写真を差し替えたので切り取り位置も合わせ直した（80% → 65%）。
       この枠は下の transform で左右反転している。反転後の位置は「100 − この値」
       になるため、数値を上げると顔は左へ動く。
       元写真では中村様が右を向いており、反転すると左（本文の側）を向く。
       視線の先に余白ができるよう、顔が右寄り（反転後58%あたり）に来る65%にした。 */
    object-position: 65% 30%;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transform: scaleX(-1); /* 左右反転 */
    filter: brightness(0.85) contrast(1.05); /* 少し暗く、かつパキッとさせて全体に馴染ませる */
  }


/* ─────────────────────────────────
   05. COMPANY TABLE
   ───────────────────────────────── */
.company-section {
  padding: 100px 0;
  background: #f9f9f9;
}

.company-table {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
  /* 本文の基準16px（旧1.05rem=16.8px） */
  font-size: 1rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.04);
}

.company-table tr {
  border-bottom: 1px solid #f0f0f0;
}
.company-table tr:last-child {
  border-bottom: none;
}

.company-table th {
  padding: 28px 35px;
  width: 25%;
  font-weight: 700;
  color: #333;
  background: #fafafa;
  vertical-align: top;
  white-space: nowrap;
}

.company-table td {
  padding: 28px 35px;
  line-height: 2;
  color: #333;
}


/* ─────────────────────────────────
   06. ACCESS
   ───────────────────────────────── */
.access-section {
  padding: 100px 0;
  background: #fff;
}
/* ACCESSの右側ウォーターマーク（ロゴ）を少し上に調整 */
.access-section.watermark-right::after {
  top: 30%;
}

.access-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

.access-map iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.access-info {
  padding: 10px 0;
}

.access-address {
  font-size: 1.15rem;
  line-height: 2;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

  .access-station {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    padding: 25px 30px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary); /* デフォルト（本社）は赤 */
  }
  
  /* 支店（BRANCH）の駅情報の左ラインは、バッジの色に合わせてダークグレーに */
  .location-branch + .access-grid .access-station {
    border-left-color: #333333;
  }

.access-station strong {
  color: #333;
}


/* ─────────────────────────────────
   RESPONSIVE - SP
   ───────────────────────────────── */

  /* =========================================
     ACCESS Section Headings
     ========================================= */
  .location-heading {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
  }
  .location-heading-ja {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    margin: 0;
  }
  .location-heading-en {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #999;
    letter-spacing: 0.05em;
    margin-left: 10px;
  }


@media (max-width: 768px) {
  /* FV */
  .about-fv {
    height: 60vh;
    min-height: 400px;
  }
  .about-fv-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-fv-col:nth-child(3) {
    display: none;
  }
  .about-fv-content {
    /* 見出し1行目がはみ出して右にずれるため、幅を広げ左右余白を詰める */
    padding: 35px 10px;
    width: 94%;
  }
  .about-fv-title {
    /* 1行目「半径5m以内を幸せにできる、」が枠内に収まる上限に合わせる */
    font-size: clamp(1.15rem, 5.85vw, 2rem);
  }/* Philosophy */
  .philosophy-block {
    /* 2026-08-27 見出しから次の中身まで142px空いていたため詰める（上のみ） */
    padding: 16px 15px 30px;
  }
  .philosophy-block .container {
    /* 英字タイトル(MISSION等)を表示したため、上に呼吸を持たせる */
    padding: 52px 25px 60px;
    /* 2026-08-27 右下の三角を小さくする。
       カード幅が317pxしかないモバイルでは、90%指定だと三角が
       本文領域まで食い込み「大切にします。」等が読めなくなっていた */
    background: linear-gradient(135deg, #fff 96%, #000 96%);
    /* カード上部にブロック固有色の細いラインを引く。
       三角と違い本文と重ならず、3枚の識別性が上がる */
    border-top: 4px solid var(--card-accent, #333);
    overflow: hidden;
  }
  .philosophy-mission .container { --card-accent: var(--color-primary); }
  .philosophy-vision .container  { --card-accent: #003366; }
  .philosophy-value .container   { --card-accent: #333333; }

  .philosophy-bg-text {
    /* 2026-08-27 モバイルでも表示する。
       これは背景の透かしではなくカードの正式なタイトル（MISSION/VISION/VALUE）で、
       非表示だとカードのタイトルが丸ごと消え、3枚の識別もできなかった。
       PCの72pxは大きすぎるため画面幅に合わせて縮小する */
    display: block;
    font-size: clamp(30px, 9.5vw, 40px);
    line-height: 1.1;
    margin-bottom: 10px;
  }.philosophy-heading {
    font-size: clamp(18px, 4.6vw, 24px);
    margin-bottom: 26px;
    line-height: 1.5;
    text-wrap: balance;
  }
  .philosophy-body {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    padding: 0;
  }
  .philosophy-value {
    padding-bottom: 120px; /* SPでも下のブランドビジュアルとの間に余白を作る */
  }

  /* Message */
  .message-section {
    padding: 80px 0;
  }
  .message-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .message-text {
    display: contents; /* 子要素をフラットに配置してorderを効かせる */
  }
  .message-heading {
    order: 1;
    font-size: clamp(1.5rem, 6vw, 2rem);
    text-align: left;
    margin-bottom: 0;
  }
  .message-heading::after {
    margin: 18px 0 0;
  }
  .message-photo {
    order: 2;
    width: 100%;
    margin: 15px 0 20px;
  }
  .message-photo-wrapper {
    max-width: 280px; /* SPでは写真が縦長で威圧感が出るため、少し小さく抑える */
  }
  .message-photo-wrapper::before {
    top: 20px;
    left: -15px;
  }
  .message-body {
    order: 3;
    font-size: 15px; /* SPも少し読みやすく */
    line-height: 1.9;
    margin-bottom: 15px;
  }
  .message-signature {
    order: 4;
    text-align: right;
  }

  /* Company */
  .company-section {
    padding: 80px 0;
  }
  .company-table th {
    display: block;
    width: 100%;
    padding: 15px 20px 5px;
    background: transparent;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .company-table td {
    display: block;
    padding: 5px 20px 18px;
    font-size: 0.9375rem; /* モバイル本文の基準15px（旧0.95rem=15.2px） */
  }

  /* Access */
  .access-section {
    padding: 80px 0;
  }
  .access-grid {
    grid-template-columns: 1fr;
  }
  .access-map iframe {
    height: 280px;
  }

}


/* ─────────────────────────────────
   prefers-reduced-motion
   ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-fv-col-inner {
    animation: none !important;
  }.philosophy-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .brand-marquee-track {
    animation: none !important;
  }
}

/* ─────────────────────────────────
   07. BRAND VISUAL & MARQUEE
   ───────────────────────────────── */
.brand-visual-section {
  position: relative;
  width: 100%;
  overflow: hidden; /* 水平方向にはみ出す文字をカット */
  background: #fff;
  padding-bottom: 30px; /* CTAセクションまでの余白 */
}

.brand-visual-photo {
  position: relative;
  width: 100%;
  height: clamp(650px, 60vw, 850px); /* さらに縦幅を広く拡張 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/04-about/company05.webp'); /* チームからビル(company05)に変更 */
  background-attachment: fixed; /* 画像を固定してパララックス効果に */
  background-size: 120%; /* coverから少し拡大して余白を作る */
  background-position: center 25%; /* ビルが綺麗に見えるように位置を調整 */
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); /* 上部の斜め角度も15%の急角度に戻す */
  z-index: 1;
  filter: grayscale(100%) contrast(1.1); /* スタイリッシュにモノクロ化 */
}

.brand-marquee-container {
  position: absolute;
  bottom: 20px; /* 下に下げて、写真と白背景の境界線をまたぐように配置 */
  width: 100%;
  z-index: 2; /* 写真より手前へ */
  display: flex;
  pointer-events: none;
  mix-blend-mode: difference; /* 写真（暗）の上では白く、白背景の上では黒く反転させる魔法のプロパティ */
}

.brand-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: brandMarquee 50s linear infinite;
  will-change: transform;
}

.brand-marquee-text {
  font-size: clamp(80px, 8vw, 140px); /* 少し小さく調整 */
  font-weight: 700; /* 900から700へ落としてスッキリと */
  letter-spacing: -0.04em;
  color: #fff; /* mix-blend-mode: difference と組み合わせるため必ず白 */
  line-height: 0.9;
  padding: 0 40px;
  text-transform: uppercase;
}

@keyframes brandMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .brand-visual-section {
    padding-bottom: 20px; /* CTAセクションまでの余白 */
  }
  .brand-visual-photo {
    height: clamp(450px, 110vw, 550px); /* SPもさらに縦幅を広く */
    background-size: 150%; /* SPでは縦幅が大きいため少し強めに拡大 */
    background-position: center 15%; /* 頭が見切れないように調整 */
    background-attachment: fixed; /* SPでも画像を固定 */
    clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); /* 上部の斜め角度も12%の急角度に戻す */
  }
  .brand-marquee-container {
    bottom: 10px; /* SPでもまたぐように調整 */
    margin-top: 0;
  }
  .brand-marquee-text {
    font-size: clamp(48px, 10vw, 64px); /* SP版も少し小さく調整 */
    padding: 0 20px;
  }
}

/* ==================================================
   2026-08-27 モバイルの強調は本文と同じサイズにする
   ================================================== */
@media (max-width: 768px) {
  /* 1行20字前後のモバイルでは、行の途中で文字サイズが変わると
     行の高さが不揃いに見える（PCは1行40字あるため目立たない）。
     赤を追加したことでサイズによる強調は役割を終えており、
     代表メッセージ側（本文と同サイズ）とも揃う。
     赤・太字・下線・斜体は維持する */
  .philosophy-body strong {
    font-size: 1em;
  }
}

/* ==================================================
   2026-08-27 PHILOSOPHY見出し（about.html のインラインstyleから移設）
   ================================================== */
.philosophy-head-block {
  background: #f8fafc;
  padding: 70px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-head-block .c-section-header {
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  /* 同じページの COMPANY / ACCESS は親のpadding-topが0なのに、
     PHILOSOPHYだけ70px積まれていて広すぎた。
     モバイルでは画面高の11%を余白だけで使う計算になるため詰める */
  .philosophy-head-block {
    padding-top: 32px;
  }

  .philosophy-head-block .c-section-header {
    margin-bottom: 24px;
  }
}