/*
 * rinnkugireから複写した旧ページ群(旧Homepage Builder製)の共通スタイル(2026-09-20)
 * 方針2-11(背景 #0b0231 に統一・背景画像は使わない)
 * 方針2-12(body直下は div.page-center で囲み、中央寄せ)
 * 方針2-13(絶対配置レイヤーは使わず、画像の行＋テキストカードの流れにする)
 * 方針2-17/2-20(img は display:block; max-width:100%; height:auto; margin:auto)
 */
body {
  background-color: #0b0231;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.page-center {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 12px 72px;
  box-sizing: border-box;
  background-color: #ffffcc;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* 元のレイヤーを縦位置の近い順にまとめた1行。幅が足りなければ折り返す */
.lg-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 22px;
}

.lg-img {
  flex: 0 1 auto;
  max-width: 100%;
}

.lg-text {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 760px;
  box-sizing: border-box;
  padding: 12px 18px;
  background-color: #fff8e0;
  border-radius: 8px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/*
 * 写真のギャラリー(CSS Grid)。元の写真は幅160px/320px/480pxの3種類にほぼ集約されるため、
 * 160px幅の列を敷き、写真の幅に応じて1〜3列分(.lg-w1/.lg-w2/.lg-w3)を占有させて列を揃える。
 * 列数は画面幅に応じて自動で増減する(スマホでは2列程度、大きい写真は幅いっぱいに縮む)。
 */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 160px);
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 14px;
  margin: 0 0 22px;
}

.lg-w1 { grid-column: span 1; }
.lg-w2 { grid-column: span 2; }
.lg-w3 { grid-column: span 3; }

.lg-grid .lg-img {
  max-width: 100%;
  min-width: 0;
}

/* 狭い画面: 列数を画面幅に合わせ、3列分の大きい写真も列いっぱいに収める(横はみ出し防止) */
@media (max-width: 600px) {
  .lg-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg-w2,
  .lg-w3 {
    grid-column: 1 / -1;
  }

  .lg-grid .lg-img img {
    max-width: 100%;
  }
}

.lg-single {
  margin: 0 0 22px;
}

/* 段落: 1字下げ(元ページの行頭スペースを段落の始まりとして扱う) */
.lg-para {
  margin: 0 0 0.7em;
  text-indent: 1em;
}

.lg-para:last-child {
  margin-bottom: 0;
}

/*
 * 本文と写真が並ぶ行(小さな写真1〜2枚のときだけ)もGrid: 写真の列 + 本文の列(1fr)。
 * 写真が左だけ(.lg-side-l)・右だけ(.lg-side-r)・両側(.lg-side-l.lg-side-r)の3通り。
 * 狭い画面(600px以下)では1列に積む。
 */
.lg-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px 18px;
  margin: 0 auto 22px;
  max-width: 100%;
}

.lg-side-l { grid-template-columns: auto minmax(0, 1fr); }
.lg-side-r { grid-template-columns: minmax(0, 1fr) auto; }
.lg-side-l.lg-side-r { grid-template-columns: auto minmax(0, 1fr) auto; }

.lg-side .lg-text {
  width: auto;
  max-width: none;
  margin: 0;
}

.lg-img-col {
  display: grid;
  gap: 14px;
  justify-items: center;
}

@media (max-width: 600px) {
  .lg-side,
  .lg-side-l,
  .lg-side-r,
  .lg-side-l.lg-side-r {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 本文中に埋め込まれていた画像だけの断片 */
.lg-inline-img {
  margin: 12px 0;
}

/* 独立した行として幅いっぱいに置く本文・見出し(細い縦長カードを作らない) */
.lg-text,
.lg-head {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

.lg-head {
  padding: 4px 18px;
  text-align: left;
  border-left: 5px solid #cc9933;
  margin-top: 8px;
}

/*
 * 文字サイズ・書体・太さ・色の統一(2026-09-20、ユーザー指示: 本文は14px程度)
 * 元ページには <font size="+2"> や <b> 全文太字、MS Pゴシック指定などが混在していたため、
 * カード内の全ての文字を同じ見た目に揃える。見出し(.lg-head)だけ少し大きい太字にして階層を残す。
 */
.lg-text,
.lg-text p,
.lg-text font,
.lg-text b,
.lg-text strong,
.lg-text span,
.lg-text td,
.lg-text div {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #3b2412 !important;
}

.lg-head,
.lg-head font,
.lg-head b,
.lg-head strong,
.lg-head span {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #7a4a10 !important;
}

/* 強調(元の太字)は、本文の中の語句としてだけ残す: 太字の語句は太く */
.lg-text a {
  font-weight: 700 !important;
}

.lg-text p {
  margin: 0.6em 0;
}

.lg-hr {
  flex: 1 1 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid #cc9933;
}

/* カード内に固定幅の表・横線が入れ子になっている旧ページがあるため、カード幅に収める */
.lg-text table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
}

.lg-text td,
.lg-text th {
  overflow-wrap: anywhere;
}

.lg-text hr {
  width: 100% !important;
  max-width: 100%;
}

.lg-text img {
  max-width: 100%;
  height: auto;
}

/* Word書き出し・表組みで作られた流し込み型の旧ページ: 全体を page-center で包み、固定幅の表・画像を幅に収める */
.lg-flow {
  overflow-wrap: anywhere;
}

.lg-flow table {
  max-width: 100% !important;
}

.lg-flow img {
  max-width: 100% !important;
  height: auto !important;
}

.lg-flow div,
.lg-flow p,
.lg-flow td {
  max-width: 100%;
  box-sizing: border-box;
}

/* 狭い画面では、入れ子の表を幅に収める(固定幅画像が表の最小幅を決めてしまうのを防ぐ) */
@media (max-width: 700px) {
  .lg-flow table {
    width: 100% !important;
    table-layout: fixed;
  }

  .lg-flow td,
  .lg-flow th {
    width: auto !important;
    min-width: 0;
  }
}

/* Word由来の nowrap(折り返し禁止)指定が、狭い画面で幅を押し広げるため無効化する */
.lg-flow span,
.lg-flow td,
.lg-flow p {
  white-space: normal !important;
}


/*
 * 内容ごとのコンテナ(2026-09-20): ヒーロー(.lg-hero)と、トピックごとの節(.lg-section)に集約。
 * 節の中は「見出し → 写真(Grid) → 本文」を同じ幅・同じ左端・同じ余白でそろえる。
 */
.lg-hero {
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}

.lg-hero .lg-single,
.lg-hero .lg-row {
  margin-bottom: 12px;
}

.lg-title {
  margin: 8px auto 4px;
  padding: 0 0 8px;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #7a4a10 !important;
  text-align: center;
  border: 0;
  border-bottom: 3px double #cc9933;
  max-width: 760px;
}

.lg-section {
  box-sizing: border-box;
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 16px 20px 8px;
  background-color: #fff8e0;
  border: 1px solid #e6cf99;
  border-radius: 12px;
}

/* 節の中では、本文・見出しは枠なしで同じ幅・左端にそろえ、写真は中央に置く */
.lg-section > .lg-text,
.lg-section > .lg-head,
.lg-section .lg-side .lg-text {
  max-width: none;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.lg-section > .lg-head {
  padding: 2px 0 2px 12px;
  margin-top: 0;
}

.lg-section > .lg-grid,
.lg-section > .lg-single,
.lg-section > .lg-row,
.lg-section > .lg-side {
  margin: 0 auto 16px;
}

.lg-section > .lg-side {
  max-width: 100%;
}

@media (max-width: 600px) {
  .lg-section { padding: 12px 12px 4px; border-radius: 10px; }
}

/* 写真のキャプション(figure + figcaption): 写真の上部に重ねて白文字で表示(写真の明暗に負けないよう影を付ける) */
.lg-figure {
  position: relative;
  margin: 0;
}

.lg-figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

/*
 * 元データに無い(欠けた)見出しロゴ画像を、代替文字(alt)の文言の文字見出しに置き換えた箇所の指定(2026-09-21)。
 * .lg-subtitle: 見出しの下の副題 / .lg-cell-title: 写真のグリッドの中に置いた見出し・副題(セル内は余白なしで中央)
 */
.lg-subtitle {
  max-width: 760px;
  margin: 4px auto 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #7a4a10;
}

.lg-cell-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lg-cell-title .lg-head,
.lg-cell-title .lg-subtitle {
  width: auto;
  max-width: none;
  margin: 0;
}

/* グリッドの狭い枠(幅160px)に置いた見出しは、余白を詰めて1行に収める */
.lg-cell-title .lg-head {
  padding: 4px 8px;
  white-space: nowrap;
}

/* 写真の下に付ける短い説明(2026-09-21 delfi.html) */
.lg-img-col .lg-cap { margin: 0; font-size: 12px; line-height: 1.5; text-align: center; max-width: 160px; }

/* 高さの違う写真を列に積んで空白を減らす並べ方(2026-09-21 delfi.html)。狭い画面では1列 */
.lg-mosaic { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; margin: 0 auto 22px; }