@charset "UTF-8";

/* =========================
   0) Variables / Base
   ========================= */
:root {
  --container-max: 1000px;
  --gutter: 16px;
  --header-h: 64px;
}

html {
  font-size: 16px;
}
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }
}

/* 画像/動画は縮む */
img,
video {
  max-width: 100%;
  height: auto;
}

/* 視覚的に隠す（SR用） */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* =========================
   1) Typography / Base
   ========================= */
body {
  /* ※過去の width:1000px を廃止（後で wrap/main で管理） */
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  margin: 0; /* 中央寄せはラッパーで */
  border-bottom: 10px solid rgb(123, 234, 235);
}

h1 {
  text-align: center;
  margin: 100px 0 50px;
  text-decoration-line: underline;
}
h2,
p {
  text-align: center;
}
ul li {
  line-height: 1.8;
}
header {
  margin-top: 8px;
}

/* =========================
   2) Global width utilities
   ========================= */
.wrap,
.container {
  width: min(92vw, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 各ページの本文コンテナ（<main>に適用） */
main {
  inline-size: min(92vw, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================
   3) Header（ヘッダー共通） 　menu.cssへ移動
   ========================= */

/* =========================
   4) Components
   ========================= */

/* トップページタイトル */
.me {
  text-align: center;
  border-bottom: double;
  margin-bottom: 50px;
}

/* ========== Top：帯・名言カード（最終版） ========== */

/* UAの既定でズレるのを防止 */
blockquote {
  margin: 0;
  padding: 0;
}

/* ===== 帯（左右→縦へ切替＆可変フォント） ===== */
.quote {
  width: min(88vw, 700px);
  margin: 0 auto 20px;
  background: linear-gradient(90deg, rgb(250, 250, 89) 10%, #fff 50%, #000 90%) padding-box;
  background-repeat: no-repeat;
}
@media (max-width: 800px) {
  .quote {
    background: linear-gradient(180deg, rgb(250, 250, 89) 10%, #fff 50%, #000 90%) padding-box;
  }
}
@media (max-width: 480px) {
  .quote {
    width: min(84vw, 700px);
  }
}

.quote__text {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCは左右2分割 */
  align-items: center;
  gap: 16px;
  min-height: 110px;
  padding: 16px 20px;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 22px);
  text-align: center;
}
.quote__text span {
  display: grid;
  place-items: center;
}
.quote__left {
  color: #281d69;
}
.quote__right {
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .quote__text {
    grid-template-columns: 1fr; /* 縦2段 */
    grid-template-rows: 1fr 1fr;
    row-gap: 8px;
    min-height: 120px;
    padding: 20px 16px;
  }
  .quote__right {
    white-space: normal;
  } /* スマホで折返し可 */
}

/* 出典リンク（本文幅の中で右寄せ） */
.oumura_shin,
.nomura_katuya,
.tyosyo,
.link {
  inline-size: 100%;
  margin: 0 auto 50px;
  text-align: right;
  font-size: 0.85em;
  font-style: normal;
  color: #666;
  text-decoration: underline;
}

/* ===== 名言カード群 ===== */

/* セクション幅を本文に揃える */
.quote-group {
  width: min(92vw, 1000px);
  margin: 24px auto;
  display: grid;
  gap: 24px;
  padding-inline: 16px; /* 端の食い付き防止（任意） */
}
@media (min-width: 900px) {
  .quote-group {
    padding-inline: 20px;
  }
}

/* 行：モバイル1列、PCは2列 */
.quote-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: stretch;
}
@media (min-width: 900px) {
  .quote-row {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}

/* ボックス共通：固定幅/高さを撤廃して崩れ防止 */
.quote-box,
.illustration-box {
  width: 100%;
  height: auto; /* 文字量で伸びる */
  min-height: 220px; /* 見た目の下限 */
  margin: 0; /* 行の gap に任せる */
  padding: clamp(14px, 2.2vw, 24px);
  box-sizing: border-box;
  display: flex; /* 中央揃え */
  align-items: center;
  justify-content: center;
}

/* 色バリエーション */
.box-1 {
  background: #f4f1f8;
  color: #2d2d2d;
}
.box-2 {
  background: #cde8f2;
  color: #2a2a2a;
}
.box-3 {
  background: #fefbe9;
  color: #333;
}

/* 見出しの可変タイポ */
.quote-box h2 {
  margin: 0;
  text-align: center;
  font-style: italic;
  line-height: 1.6;
  font-size: clamp(15px, 1.3vw, 22px);

  /* ← ここがポイント */
  word-break: normal; /* CJKの通常改行に戻す */
  overflow-wrap: normal; /* “どこでも改行” を無効化 */
  line-break: strict; /* 句読点の行頭禁止を強める */
  text-wrap: balance; /* 行長をバランス良く（対応ブラウザ） */
}

/* ピンポイントで改行禁止したいとき用 */
.nbp {
  white-space: nowrap;
}

.box-3 h2 {
  font-size: clamp(16px, 1.2vw, 20px);
}

/* 画像ボックス */
.illustration-box img {
  max-width: min(100%, 520px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* スマホ時は1列＆少しコンパクト */
@media (max-width: 768px) {
  .quote-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .quote-box,
  .illustration-box {
    min-height: 260px;
    padding: clamp(10px, 4vw, 18px);
  }
}

/* タブレット～PCでの行間ちょい増量 */
@media (min-width: 768px) {
  .quote-box h2 {
    line-height: 1.8;
  }
}

/* ===== コメント ===== */
.comment-wrapper {
  display: flex;
  justify-content: center;
}
.comment {
  max-width: 700px;
  text-align: left;
  padding: 1em 1.5em 10px;
}
.work-goals p,
.comment p {
  text-indent: 1em;
}

/* 目標・やりたいこと */
.work-goals,
.want {
  max-width: 600px;
  text-align: left;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* 車名 */
.car {
  width: 600px;
  background: rgba(182, 180, 182, 0.267);
}

/* レイアウトの基本 */
.container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 50px;
}
dl {
  flex: 1;
}
dt {
  font-weight: bold;
  color: #007acc;
  margin-top: 1.5em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
dd {
  margin-left: 1em;
  padding: 0.4em;
  color: #333;
  background: #fce6e6;
  border-left: 1px solid #007acc;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .quote-group {
    padding: 1em;
  }
  .quote-row {
    flex-direction: column;
    align-items: center;
  }
  .quote-box,
  .illustration-box {
    width: 100%;
  }
  .quote-box {
    margin: 1em 0;
  }

  .container {
    flex-direction: column;
    align-items: center;
  }
  .img-pc,
  .img-chara {
    width: 100%;
  }
}

/* =========================
   Works page (HTML 構造準拠)
   ========================= */
.page-works main.container {
  width: min(96vw, 1440px);
  margin-inline: auto;
  padding-block-start: clamp(10px, 2.2vh, 24px);
  padding-bottom: 80px;
}

/* 見出し+注記（左）／カード（右） */
.page-works .works-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}
.page-works .works-header {
  max-width: 800px;
  margin: 0;
}
.page-works .works-header h1 {
  margin: 0 0 6px;
  text-align: left;
}
.page-works .works-note {
  margin: 6px 0 20px;
  color: #666;
  font-size: 0.9rem;
}

@media (min-width: 900px) {
  .page-works .works-header {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}
@media (max-width: 900px) {
  .page-works .works-layout {
    grid-template-columns: 1fr;
  }
}

/* カードグリッド */
.page-works .work-grid {
  --col-min: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
  justify-items: stretch;
}
@media (max-width: 480px) {
  .page-works .work-grid {
    --col-min: 280px;
  }
}

/* カード本体（a 包含型 / figure+div 型 の両対応） */
.page-works .work-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  min-height: 180px;
  transition: box-shadow 0.15s ease, transform 0.06s ease;
}
@media (hover: hover) {
  .page-works .work-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}

/* クリック領域（カード全体がリンクのタイプ） */
.page-works .work-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.page-works a,
.page-works a:visited {
  color: inherit;
  text-decoration: none;
}
.page-works .work-link:hover .work-title {
  text-decoration: underline;
}
.page-works .work-link:focus-visible {
  outline: 3px solid #7aa7ff;
  outline-offset: 3px;
  border-radius: 10px;
}

/* サムネ（どちらの型でも <figure class="work-thumb"> ） */
.page-works .work-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  margin: 0 0 10px;
  background: #f2f2f2;
  overflow: hidden;
}
.page-works .work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 画像だけがリンクのカードもフォーカス可視化 */
.page-works .work-thumb a:focus-visible {
  outline: 3px solid #7aa7ff;
  outline-offset: 3px;
  border-radius: 8px;
}

/* 画像がないときのプレースホルダ */
.page-works .work-thumb.placeholder {
  display: grid;
  place-items: center;
}
.page-works .work-thumb.placeholder::after {
  content: 'No Image';
  color: #888;
  font-size: 0.9rem;
}

/* 文章領域（figure の後に .work-body が来る型用） */
.page-works .work-body {
  padding: 12px 0 0;
}

/* タイポ＆折り返しを統一（左寄せ） */
.page-works .work-title,
.page-works .work-meta,
.page-works .work-desc {
  text-align: left;
}

.page-works .work-title {
  margin: 0 0 8px;
  color: #111;
  font-size: 1.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* タイトルは最大2行で省略（任意） */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.page-works .work-meta {
  margin: 0 0 10px;
  color: #555;
  font-size: 0.95rem;
}
.page-works .work-desc {
  margin: 0;
  color: #2b2b2b;
  font-size: 1rem;
  line-height: 1.75;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* バッジ */
.page-works .badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  border: 1px solid #bbb;
  border-radius: 999px;
  background: #f5f5f5;
  color: #444;
  font-size: 0.75rem;
}
.page-works .badge--wip {
  border-color: #d4b106;
  background: #fffbe6;
  color: #8c6d1f;
}

/* ========== Case Study（SAMURAI） ========== */
.page-works .work-card--case {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.page-works .case {
  margin-top: 8px;
}
.page-works .case__header {
  margin-bottom: 12px;
}
.page-works .case__title {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
}
.page-works .case__role {
  margin: 0.25rem 0 0.5rem;
  color: #333;
}
.page-works .case__meta {
  margin: 0.5rem 0 0;
  padding-left: 1.2em;
  line-height: 1.8;
}

/* PCヒーロー：大きく見えすぎないよう最大幅を軽く抑える */
.page-works .case__hero {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  background: #f7f7f7;
  max-width: 960px; /* 好みで 880-1040px 程度 */
  margin-inline: auto;
}
.page-works .case__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-works .case__caption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 6px;
  text-align: center;
}

/* セクション */
.page-works .case__section {
  margin: 18px 0;
}
.page-works .case__heading {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.page-works .case__points,
.page-works .case__bullets {
  margin: 8px 0;
  padding-left: 1.2em;
  line-height: 1.8;
}

/* ギャラリー */
.page-works .case__gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.page-works .case__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f4f4;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.page-works .case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モバイル調整 */
@media (max-width: 560px) {
  .page-works .work-card {
    padding: 12px;
  }
  .page-works .work-title {
    -webkit-line-clamp: 3;
  } /* 画面が狭いときは3行まで */
  .page-works .case__hero {
    max-width: 100%;
  }
}

/* --- Works（カード：画像 → テキストの縦並び固定） --- */
.page-works .works-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .page-works .works-layout {
    grid-template-columns: 1fr;
  }
}

.page-works .work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* カード本体は縦積み */
.page-works .work-card {
  display: flex;
  flex-direction: column;
}

/* 全体リンク型でも横並び化されないように */
.page-works .work-card > .work-link {
  display: block;
}

/* サムネイルはカード上段、本文は下段 */
.page-works .work-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  margin: 0 0 10px;
  background: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 480px) {
  .page-works .work-thumb {
    aspect-ratio: 4 / 3;
  }
}
.page-works .work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストは左寄せ＆自然改行 */
.page-works .work-title,
.page-works .work-meta,
.page-works .work-desc {
  text-align: left;
  white-space: normal; /* nowrapの打消し */
  word-break: normal; /* 日本語は自然改行 */
  overflow-wrap: anywhere; /* 長い英数は途中で折る */
}
.page-works .work-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #111;
}
.page-works .work-meta {
  margin: 0 0 10px;
  color: #555;
  font-size: 0.9rem;
}
.page-works .work-desc {
  margin: 0;
  color: #2b2b2b;
  line-height: 1.75;
}

/* Case Study セクションの画像もはみ出さないように */
.page-works .case__hero img,
.page-works .case__thumb img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 予期せぬ float の影響を避ける（保険） */
.page-profile *,
.page-works * {
  float: none;
}

/* ===== Works：ヘッダー（サイトのナビ）直下にゆとりを作る ===== */
.page-works main.container {
  /* 上側だけ少し余白。端末に応じて増減 */
  padding-block-start: clamp(10px, 2.2vh, 24px);
}

/* Sticky見出しの追従開始位置も、サイトヘッダー分＋少し余白で計算 */
@media (min-width: 900px) {
  .page-works .works-header {
    position: sticky;
    top: calc(var(--header-h, 64px) + 10px); /* これでヘッダーにかぶらない */
  }
}

/* 見出しブロック自体にも少しだけ内側余白を足したい場合（任意） */
.page-works .works-header {
  padding-block: 6px 0;
}

/* Works 見出し：左寄せ＆左起点での折り返しを強制 */
.page-works .works-header {
  text-align: left; /* 親で左寄せ */
}

.page-works .works-header h1,
.page-works .works-header .works-note {
  text-align: left; /* 念のため子にも指定（継承上書き対策） */
  white-space: normal; /* nowrap を打ち消し */
  word-break: normal; /* 日本語は自然改行、英数は単語優先 */
  overflow-wrap: anywhere; /* 長い英数は必要なら途中で改行 */
}

/* 余白と読み幅の整え（任意） */
.page-works .works-header h1 {
  margin: 0 0 8px;
}
.page-works .works-header .works-note {
  margin: 6px 0 20px;
  max-width: 38ch; /* 行の長さを抑えて読みやすく（好みで調整） */
  text-wrap: pretty;
}

/* モバイルでも必ず左寄せ */
@media (max-width: 900px) {
  .page-works .works-header {
    text-align: left;
    margin-inline: 0;
  }
}

/* Works > Case Study：本文はすべて左寄せ＆左起点で折り返し */
.page-works .work-card--case {
  text-align: left; /* 親で強制 */
}

/* 見出しの余白（控えめ） */
.page-works .work-card--case .case__title {
  margin: 0 0 6px;
}
.page-works .work-card--case .case__heading {
  margin: 14px 0 6px;
}

/* 親でまず左寄せに戻す */
.page-works .work-card.work-card--case {
  text-align: left;
}

/* 見出し・本文・メタ・箇条書き・キャプションを左寄せに固定 */
.page-works .work-card.work-card--case .case__header,
.page-works .work-card.work-card--case .case__section,
.page-works .work-card.work-card--case .case__title,
.page-works .work-card.work-card--case .case__role,
.page-works .work-card.work-card--case .case__meta,
.page-works .work-card.work-card--case .case__points,
.page-works .work-card.work-card--case .case__bullets,
.page-works .work-card.work-card--case .case__caption,
.page-works .work-card.work-card--case .case__section p,
.page-works .work-card.work-card--case .case__header p,
.page-works .work-card.work-card--case .case__points li,
.page-works .work-card.work-card--case .case__bullets li {
  text-align: left;
  white-space: normal; /* 折返しを許可 */
  word-break: normal; /* 日本語は自然改行 */
  overflow-wrap: anywhere; /* 長い英数などは途中で折る */
  text-wrap: pretty;
}

/* 本文の読み幅（お好みで 56–66ch くらいに微調整可） */
.page-works .work-card.work-card--case .case__role,
.page-works .work-card.work-card--case .case__section p {
  max-width: 60ch;
  margin-inline: 0; /* 中央寄せ用の auto を防ぐ */
}

/* 箇条書きのインデント・行間 */
.page-works .work-card.work-card--case .case__meta,
.page-works .work-card.work-card--case .case__points,
.page-works .work-card.work-card--case .case__bullets {
  padding-left: 1.2em;
  line-height: 1.8;
  margin: 8px 0;
}

/* サムネイル群も左寄せに（中央揃えの影響を遮断） */
.page-works .work-card.work-card--case .case__gallery {
  text-align: left;
}

/* ===== Works：カード列数（幅で変化） ===== */
.page-works .work-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr; /* スマホ：1列 */
}

/* タブレット〜ノートPC */
@media (min-width: 960px) {
  .page-works .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 広め画面（ウルトラワイド含む） */
@media (min-width: 1440px) {
  .page-works .work-grid {
    gap: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-works .work-card {
  width: 100%;
  max-width: none;
}

.page-works .works-header {
  margin-top: 24px; /* 今より+15〜20px 程度 */
}

.page-works .work-card:hover .work-title {
  color: #003f2f; /* あなたのメインカラー系 */
  text-decoration: underline;
}

/* =========================
   6) PC / Dream pages
   ========================= */
.page-pc .case-summary,
.page-dream .case-summary {
  width: 92vw;
  max-width: 1000px;
  margin: 16px auto 20px;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
.page-pc .case-title,
.page-dream .case-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
}
.page-pc .case-meta,
.page-dream .case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.page-pc .case-lead,
.page-dream .case-lead {
  margin: 0;
  color: #333;
}

/* PCページ：縦並び基準 */
.page-pc .container {
  display: block;
  width: 92vw;
  max-width: 1120px;
  margin: 16px auto 40px;
}
.page-pc .pc-heading {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 1.3rem;
  border-bottom: 1px solid #ddd;
}
.page-pc .pc-subtitle {
  margin: 10px 0 6px;
  font-size: 1.1rem;
}
.page-pc .pc-block {
  margin: 22px 0;
}

/* 使用環境：2カラム */
.page-pc .pc-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 24px;
  align-items: start;
  min-width: 0;
}
.page-pc .spec-list {
  margin: 0;
  max-width: 720px;
  margin-inline: auto;
}
.page-pc .spec-list dt {
  font-weight: 700;
  color: #007acc;
  margin-top: 16px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}
.page-pc .spec-list dd {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: #fce6e6;
  color: #333;
  border-left: 2px solid #007acc;
}

/* PCページの figure 既定マージンを完全に殺す */
.page-pc .img-stack > figure,
.page-pc figure.pc-shot {
  margin: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important; /* ← UAの 40px を確実に上書き */
  width: 100%;
}

/* 念のため列いっぱいに広げる */
.page-pc .img-stack {
  display: grid;
  gap: clamp(24px, 2.8vw, 36px);
  align-items: stretch;
  width: 100%;
}

.page-pc .pc-shot {
  display: grid;
  grid-template-rows: clamp(220px, 40vw, 360px) auto; /* 上段=画像の枠高さ */
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  gap: 8px; /* 画像とキャプションの隙間 */
  padding: 10px;
}

/* 画像は枠いっぱいに */
.page-pc .pc-shot > img {
  grid-row: 1 / 2;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 重要：切り抜かずに収める */
  display: block;
}

.page-pc .pc-shot > figcaption {
  border-top: 1px solid #ececec;
  padding-top: 6px;
  grid-row: 2 / 3;
  font-size: 0.85rem;
  color: #666;
  padding: 6px 8px 10px;
  text-align: right;
  margin: 0; /* 右に突出しないよう保険 */
}

/* PCページのfigcaptionだけ、共通 .link の影響を打ち消す */
.page-pc .pc-shot figcaption.link {
  inline-size: auto; /* 幅100%を解除 */
  width: auto; /* 念のため */
  max-width: 100%;
  margin: 6px 0 0; /* 共通の margin: 0 auto 50px を打ち消し */
  box-sizing: border-box; /* これで padding を足してもハミ出さない */
  padding: 8px 16px 10px; /* 右寄せのまま“息継ぎ”用の余白 */
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .page-pc .container {
    /* 好みで 12–20px 程度。もし --gutter を使っているならそれでもOK */
    padding-inline: 16px;
  }
  .page-pc .pc-layout {
    grid-template-columns: 1fr;
  }
  .page-pc .img-stack {
    width: min(100%, 720px);
    margin: 16px auto 0;
  }
  .page-pc .pc-shot,
  .page-pc .img-stack {
    box-sizing: border-box;
  }
}
.page-pc .img-area {
  max-width: 720px;
  margin: 16px auto 0;
}
.page-pc .img-area img {
  width: 100%;
  height: auto;
  display: block;
}
.page-pc .pc-shot .img-pc {
  aspect-ratio: 1200 / 720;
  object-fit: contain;
}
.page-pc .pc-shot .img-chara {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ===== Profile: 強制で縦積み・左揃えに戻すガード ===== */

/* main.container を確実に単列に */
.page-profile main.container {
  display: block !important; /* flex/grid を打ち消し */
  width: min(92vw, 860px);
  margin: 20px auto 48px;
  padding-inline: 12px;
}

/* 直下の各セクションを100%幅・縦積みに固定 */
.page-profile main.container > * {
  display: block !important;
  width: 100% !important;
  max-width: 860px;
  margin-inline: auto;
  float: none !important;
}

/* セクション本体の横並び化を抑止 */
.page-profile .profile-hero,
.page-profile .profile-hero--solo,
.page-profile .block-card {
  display: block !important;
}

/* 誤って grid 定義が当たっても単列に */
.page-profile .container {
  grid-template-columns: none !important;
}

/* 左揃えを徹底（center を上書き） */
.page-profile main.container,
.page-profile .profile-hero--solo,
.page-profile .block-card {
  text-align: left !important;
}

/* 箇条書きは縦並び＆見やすいインデントに */
.page-profile ul {
  list-style: disc;
  padding-left: 1.2em;
}
.page-profile .chips {
  list-style: none;
  padding-left: 0;
}

/* 行間と段落の余白（読みやすさ） */
.page-profile p {
  line-height: 1.9;
  margin: 0.45em 0;
}
.page-profile li {
  line-height: 1.9;
}
/* =========================
   Profile 微調整（中央寄せ＋アクセント）
   ========================= */

/* コンテナ：きちんと中央＆読み幅を少しだけ絞る */
.page-profile main.container {
  display: block !important;
  width: min(92vw, 860px);
  margin: 32px auto 64px;
  padding: 0 16px;
}

/* Hero は中央寄せ、本文ブロックは左揃えのまま */
.page-profile .profile-hero--solo {
  text-align: center !important;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}
.page-profile .profile-hero--solo .hero-text {
  max-width: 720px;
  margin-inline: auto;
}

/* 見出しに薄いアクセント（ブランドの黄→白→墨グラデ） */
:root {
  --brand-yellow: #faf959; /* やわらかい黄 */
  --brand-ink: #111111;
}
.page-profile .hero-title {
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.page-profile .hero-title::after {
  content: '';
  display: block;
  width: 160px;
  height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--brand-yellow), #fff 60%, var(--brand-ink));
  border-radius: 2px;
  opacity: 0.55;
}

/* カードは左揃え＋うっすら色の下線でセクションを区切る */
.page-profile .block-card {
  text-align: left !important;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.page-profile .section-title {
  margin: 0 0 10px;
  font-size: 1.12rem;
  position: relative;
  padding-bottom: 6px;
}
.page-profile .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-yellow), #d1d5db);
  border-radius: 2px;
  opacity: 0.8;
}

/* テキストの読みやすさ */
.page-profile p {
  line-height: 1.9;
  margin: 0.5em 0;
}
.page-profile li {
  line-height: 1.9;
}
.page-profile .lead {
  color: #222;
  font-weight: 600;
}
.page-profile .muted {
  color: #6b7280;
}

/* chips の並びを整える（改行時の詰まり防止） */
.page-profile .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-profile .chips li {
  padding: 0.35rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fafafa;
  font-size: 0.95rem;
}

/* ===== Profile：折り返しは左揃えに統一 ===== */

/* Hero も含め、テキストは左揃え */
.page-profile .profile-hero--solo,
.page-profile .profile-hero--solo .hero-text,
.page-profile .block-card,
.page-profile .section-title,
.page-profile p,
.page-profile li,
.page-profile .chips {
  text-align: left !important;
}

/* 見出し下線も左起点に（中央から変更） */
.page-profile .hero-title::after {
  margin: 10px 0 0; /* ← auto をやめて左基点 */
}

/* 文章の改行挙動：日本語は自然改行、英数は必要時のみ単語内折り */
.page-profile p,
.page-profile li {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere; /* 長い英数だけ途中で折る保険 */
}

/* コンテナは中央配置のまま（本文は左揃え） */
.page-profile main.container {
  margin-left: auto;
  margin-right: auto;
}

/* 小画面：余白を少し増やして中央寄せをキープ */
@media (max-width: 480px) {
  .page-profile main.container {
    margin: 20px auto 48px;
    padding: 0 14px;
  }
  .page-profile .profile-hero--solo {
    padding: 18px 14px;
  }
}

/* =========================
   8) Contact page
   ========================= */
.page-contact .grid-2 {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .page-contact .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.page-contact .hint {
  margin: 4px 0 0;
}

.page-contact .contact-form {
  max-width: 720px;
  margin: 0 auto 48px;
}
.page-contact .field {
  display: block;
  margin: 14px 0;
}
.page-contact .field label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 6px;
}
.page-contact .field .hint {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #777;
}

.page-contact .grid-2 {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.page-contact input[type='text'],
.page-contact input[type='email'],
.page-contact select,
.page-contact textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  box-sizing: border-box;
}
.page-contact textarea {
  min-height: 120px;
  resize: vertical;
}
.page-contact input:focus-visible,
.page-contact select:focus-visible,
.page-contact textarea:focus-visible {
  outline: 3px solid #7aa7ff;
  outline-offset: 2px;
  border-color: #7aa7ff;
}
.page-contact .actions {
  margin-top: 16px;
}
.page-contact .btn-submit {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: transform 0.06s ease, box-shadow 0.15s ease;
}
.page-contact .btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.page-contact .contact-layout {
  display: block;
}
.page-contact .container > .contact-columns {
  display: block;
}
.page-contact .container {
  display: block !important;
}
.page-contact .contact-tip {
  max-width: 720px;
  margin: 12px auto;
  padding: 12px 16px;
  background: #f8fbff;
  border: 1px solid #dbe8ff;
  border-radius: 10px;
}
.page-contact .contact-tip.is-open > summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
  text-align: center;
  font-weight: 700;
  margin: 0 0 8px;
}
.page-contact .contact-tip.is-open > summary::-webkit-details-marker {
  display: none;
}
.page-contact .contact-tip ul {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.8;
}

/* =========================
   A) PCカスタマイズ：右に寄って見える余白を補正
   ========================= */
.page-pc .container {
  inline-size: min(92vw, 1000px);
  margin-inline: auto;
  /* 左右のインナー余白を明示（モバイル時に効く） */
  padding-inline: clamp(12px, 4vw, 16px);
  box-sizing: border-box;
}

/* 概要パネルやカードの左右バランスを揃える */
.page-pc .case-summary,
.page-pc .block-card {
  padding: 14px 16px; /* 左右にしっかり余白 */
  box-sizing: border-box;
  text-align: left; /* 文章は左揃え */
}

/* 長い英数でも右側へ突き抜けないよう保険 */
.page-pc .case-title,
.page-pc .case-lead,
.page-pc .case-meta {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* さらに狭い幅でのにじみ対策（任意） */
@media (max-width: 480px) {
  .page-pc .case-summary,
  .page-pc .block-card {
    padding-inline: 16px;
  }
}

/* =========================
   B) Contact：左揃え & 左から自然に折り返し
   ========================= */
.page-contact .container {
  inline-size: min(92vw, 1000px);
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 16px);
  box-sizing: border-box;
}

/* 見出し・本文・カード・フォームすべて左揃えに統一 */
.page-contact .contact-hero,
.page-contact .contact-hero .title,
.page-contact .contact-hero .lead,
.page-contact .block-card,
.page-contact .block-card p,
.page-contact .section-title,
.page-contact .contact-form,
.page-contact .contact-form label,
.page-contact .contact-form .hint,
.page-contact .contact-tip summary,
.page-contact .contact-tip ul {
  text-align: left;
}

/* 自然な折り返し（日本語は通常改行、英数は単語優先で限界時に分割） */
.page-contact .contact-hero,
.page-contact .block-card,
.page-contact .contact-form {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* カード内の左右余白をしっかり確保 */
.page-contact .block-card {
  padding: 16px;
  box-sizing: border-box;
}

/* メールアドレスのボタンは左寄せでOK（中央にしたい場合は text-align:center; を親に） */
.page-contact .mail .btn {
  display: inline-block;
}

/* フォーム：入力要素を100%幅にして右側の圧迫感を解消 */
.page-contact .contact-form input[type='text'],
.page-contact .contact-form input[type='email'],
.page-contact .contact-form select,
.page-contact .contact-form textarea {
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
}

/* 2カラム→1カラム（狭幅時）。左右均等の余白で“右に寄って見える”のを防ぐ */
.page-contact .contact-form .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .page-contact .contact-form .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 箇条書きの左インデントも明示 */
.page-contact .contact-tip ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

/* 受付状況専用ボックス */
.availability-box {
  max-width: 680px; /* 文章ボックスを少し細く */
  margin-inline: auto;
  padding: 1.5rem 1.8rem;
}

.availability-box p {
  text-align: left !important; /* 左寄せ強制 */
  line-height: 1.7;
}

/* 行間と余白を少し詰める */
.availability-box .section-title {
  margin-bottom: 0.8rem;
}

/* ボタンの並び（上下間隔） */
.availability-box .cta {
  margin-top: 1.2rem;
}
/* =========================
   9) Lightbox (no library)
   ========================= */
.lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 1000;
}
.lb-backdrop.is-open {
  display: block;
}
.lb-dialog {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1001;
}
.lb-dialog.is-open {
  display: grid;
  place-items: center;
  padding: 24px;
}
.lb-figure {
  max-width: 96vw;
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto min-content;
  gap: 8px;
}
.lb-figure img {
  max-width: 96vw;
  max-height: 84vh;
  border-radius: 10px;
  background: #111;
  display: block;
  object-fit: contain;
}
.lb-caption {
  color: #eee;
  font-size: 0.95rem;
  text-align: center;
}
.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.lb-close {
  top: 16px;
  right: 16px;
  transform: none;
}
.lb-prev {
  left: 16px;
}
.lb-next {
  right: 16px;
}
.lb-close:focus-visible,
.lb-prev:focus-visible,
.lb-next:focus-visible {
  outline: 3px solid #7aa7ff;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .lb-prev,
  .lb-next {
    top: 45%;
  }
}

blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

/* === 1) はみ出しの温床を先に潰す（全ページ共通） === */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
} /* 画面を右に押し出す横スクロールを抑止 */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
} /* 画像のはみ出し防止 */

/* 画像や長い単語での横ズレを予防（必要箇所だけに効くよう控えめ） */
p,
li,
dd,
.work-desc,
.hero-title,
.lead {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* === 2) コンテナの“中央寄せ＋左右ガター”を強制 === */
:root {
  --container-max: 1000px; /* 既存値を尊重。必要なら調整 */
  --gutter: 16px; /* モバイルの左右余白の下限 */
}
.container {
  inline-size: min(100%, var(--container-max));
  margin-inline: auto; /* 常に中央 */
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ヘッダー内のインナーも同じ思想で中央寄せ＋ガター */
.site-header__inner {
  inline-size: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* === 3) Profile/Top などのカード系が“右に寄りがち”問題の矯正 === */
/* どの幅でもカードは中央に。外側の余白は親の .container に任せる */
.page-profile .profile-hero,
.page-profile .block-card,
.page-top .block-card,
.page-works .works-header,
.page-works .work-card,
.quote-box,
.note-box {
  /* あなたのボックス系のクラスがあれば追加 */
  margin-inline: auto; /* 中央に置く */
}

/* Work のカード／ギャラリーなどは 1カラム時に“端から端まで”ではなく
   ガターを残しつつ均等に伸びるよう調整 */
.page-works .work-grid {
  padding-inline: var(--gutter);
}

/* === 4) モバイル最適化（600px以下想定） === */
@media (max-width: 600px) {
  /* コンテナは幅100%だがガターは残す */
  .container {
    inline-size: 100%;
    padding-inline: var(--gutter);
  }

  /* 1カラム系のボックスが右に貼り付かないように */
  .page-profile .profile-hero,
  .page-profile .block-card,
  .page-top .block-card,
  .quote-box,
  .note-box {
    width: 100%;
  }

  /* Works カードのグリッドは1列固定＋ガター */
  .page-works .work-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* === 5) うっかりはみ出しがちな犯人を個別でケア === */
/* 表やプリ要素がある場合のガード（あれば有効化） */
/*
table { width: 100%; border-collapse: collapse; }
pre, code { white-space: pre-wrap; word-break: break-word; }
*/

/* もし .case__gallery 内の画像が親より大きい場合に備えて */
.case__gallery img {
  max-width: 100%;
  height: auto;
}

/* PCページの概要パネルを“中央に・中身は左寄せ・ガター付き”に補正 */
.page-pc .case-summary {
  width: 100%; /* 行幅は親いっぱい */
  max-width: 720px; /* 読み幅（好みで 640–760px） */
  margin: 12px auto 20px; /* 中央配置 */
  padding: 14px 16px; /* 内側ガター */
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box; /* パディングで横に伸びない */
  text-align: left; /* ここだけ左寄せに固定 */
}

/* 見出し・リスト・リード文の細部（好みで） */
.page-pc .case-summary .case-title {
  margin: 0 0 8px;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.3;
}
.page-pc .case-summary .case-meta {
  margin: 0 0 10px;
  padding-left: 1.1em; /* 箇条書きの左ぶれ防止 */
  list-style: disc;
}
.page-pc .case-summary .case-lead {
  margin: 0;
  line-height: 1.8;
  word-break: normal;
  overflow-wrap: anywhere; /* 長い英数の折返し保険 */
}

/* さらに“画面幅きわ”に触れないよう、モバイルでは外側ガターを強めに */
@media (max-width: 480px) {
  .page-pc .case-summary {
    max-width: 100%;
    padding: 14px 18px; /* 少し広めの左右内側余白 */
  }
}

/* ===== Contact：ヒーローとメール行だけ中央寄せ ===== */
.page-contact .contact-hero {
  text-align: center;
  margin-block: clamp(12px, 3vw, 24px);
}
.page-contact .contact-hero .title {
  margin: 0 0 6px;
}
.page-contact .contact-hero .lead {
  /* 読み幅を絞って中央に */
  max-width: 60ch;
  margin: 0 auto;
}

/* メールアドレス行を中央寄せ */
.page-contact .mail {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}
.page-contact .mail .btn {
  display: inline-block; /* 念のため */
}

/* 補助：小さな説明文も中央に（任意） */
.page-contact .block-card .mini {
  text-align: center;
}

/* 送信ボタンが無効のときの見た目 */
.actions .btn[disabled],
.actions .btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* メールリンクの無効風スタイル */
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* ← click をJSで拾うために有効のまま */
}

/* 同意未チェック時に「メールで送る」を無効風に */
.btn.is-disabled,
.btn[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* PCページの「概要パネル」内テキストを左寄せ＆自然改行 */
.page-pc .case-summary .case-lead {
  text-align: left;
  margin: 10px 0 0;
  line-height: 1.8;

  /* 折り返し系：日本語は自然改行、長い英数は適宜折り */
  white-space: normal; /* nowrap対策 */
  word-break: normal; /* 日本語は句読点で自然改行 */
  overflow-wrap: anywhere; /* 収まらない長い英数を途中で折る保険 */
}

/* 念のためセクション自体も左寄せ（中央配置したい時は箱だけ中央） */
.page-pc .case-summary {
  max-width: 1000px; /* 好みで調整 */
  margin: 16px auto 20px; /* 箱は中央、文面は左 */
  text-align: left;
}