/* ===== minimal extract for member_photo_detail (fixed) ===== */

/* 背景色（インラインstyleが上書きされても負けないようにimportant） */
body#main.stretched {
  background-color: #888 !important;
}

/* 汎用 */
.center { text-align: center !important; }
.col-padding { padding: 4rem; }
.line { clear: both; position: relative; width: 100%; margin: 4rem 0; border-top: 1px solid #EEE; }

/* セクション */
.section {
  position: relative;
  width: 100%;
  margin: 60px 0;
  padding: 60px 0;
	background-color: #FFFFFF;
  overflow: hidden;
}
.section .container { z-index: 2; }
.section .container + .video-wrap { z-index: 1; }

/* ダークセクション（本文で .section dark を使用） */
.section.dark {
	background-color: #FFFFFF;
  color: #EEE;
}
.section.dark a { color: inherit; }

/* 縦中央揃え（ヒーロー） */
.vertical-middle {
  z-index: 3;
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100%;
  justify-content: center;
  flex-flow: column;
}

/* 強調見出しブロック（画像下の大見出し） */
.emphasis-title { margin: 0 0 50px; }
.emphasis-title h1,
.emphasis-title h2 {
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* アンカー誘導の下矢印（ヒーロー末尾に使用） */
.one-page-arrow {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  height: 32px;
  font-size: 32px;
  text-align: center;
  color: #222;
}

/* コンテンツ領域 */
#content { position: relative; background-color: #FFF; }
.content-wrap { position: relative; padding: 80px 0; overflow: hidden; }

/* タイトルブロック（左罫線の見出し） */
.title-block {
  padding: 2px 0 3px 20px;
  border-left: 18px solid #888;
  margin-bottom: 30px;
}
.title-block h1,
.title-block h2,
.title-block h3,
.title-block h4 { margin-bottom: 0; }
.title-block > span {
  display: block;
  margin-top: 4px;
  color: #555;
  font-weight: 300;
}
.title-block h1 { line-height:1.4em;}
/* フィーチャーボックス（アイコン＋テキストの情報列） */
.feature-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.fbox-icon {
  width: 5.5rem;
  height: 4rem;
  padding: 0 0.75rem;
}
.fbox-icon i,
.fbox-icon img {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF;
  border-radius: 50%;
  background-color: #888;
  font-size: 1.75rem;
  line-height: 4rem;
  text-align: center;
}
.fbox-content {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  padding: 0 0.75rem;
}
.fbox-content h3 {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0;
  color: #333;
}
.fbox-plain .fbox-icon i,
.fbox-plain .fbox-icon img {
  border: none;
  background-color: transparent !important;
  color: #888;
  border-radius: 0;
}
.fbox-plain .fbox-icon i { font-size: 3rem; line-height: 1; }

/* ポートフォリオ系（このページでは薄く使っているため最低限） */
.grid-container,
.portfolio { position: relative; overflow: hidden; }

/* 画像ホバー */
.gallery-img:hover { filter: opacity(70%); cursor: pointer; }

/* 入力フォーカス（本文内の text input） */
input[type="text"]:focus  {
  border: 2.5px solid #888;
  outline: 0;
  box-shadow: none;
}

/* =========================
   Bootstrapボタンのテーマ反映
   ========================= */

/* 1) テーマカラー（ブラウン系） */
:root {
  --fp-accent: #111;     /* メイン */
  --fp-accent-dk: #888;  /* ダーク */
  --fp-accent-txt: #FFF; /* 文字色 */
}

/* 2) アウトライン・ダークを “ブラウン” に */
/* .btn-outline-dark {
  background-color: var(--fp-accent);
  border-color: var(--fp-accent);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--fp-accent-txt) !important;
  background-color: var(--fp-accent) !important;
  border-color: var(--fp-accent) !important;
  box-shadow: none;
} */
/* 3) .btn-secondary（モーダルのCloseボタンなど）をテーマ寄せ */
.btn-secondary {
  color: var(--fp-accent-txt);
  background-color: var(--fp-accent);
  border-color: var(--fp-accent);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: var(--fp-accent);
  background-color: var(--fp-accent-dk);
  border-color: var(--fp-accent-dk);
  box-shadow: none;
}

/* 4) フォーカスリング控えめ */
.btn:focus {
  box-shadow: 0 0 0 .15rem rgba(141,110,99,.25);
}

/* ちょい補助 */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

:root{
  --fp-accent: #111;     /* メイン */
  --fp-accent-dk: #888;  /* 濃いめ */
  --fp-accent-txt: #ffffff; /* 文字色 */
}

/* Bootstrapの変数で上書き（最優先） */
/* .btn-outline-dark{
  --bs-btn-color: var(--fp-accent);
  --bs-btn-border-color: var(--fp-accent);
  --bs-btn-hover-color: var(--fp-accent-txt);
  --bs-btn-hover-bg: var(--fp-accent);
  --bs-btn-hover-border-color: var(--fp-accent);
  --bs-btn-active-color: var(--fp-accent-txt);
  --bs-btn-active-bg: var(--fp-accent-dk);
  --bs-btn-active-border-color: var(--fp-accent-dk);
  --bs-btn-focus-shadow-rgb: 141,110,99;
} */

/* 念のためのフォールバック（古いビルド対策） */
/* .btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--fp-accent) !important;
  background-color: var(--fp-accent) !important;
  border-color: var(--fp-accent) !important;
  box-shadow: none;
} */

/* CTAカード：罫線＋影＋角丸 */
.section.bg-white .container{
  background: #fff;
  border: 1px solid rgba(141,110,99,.35);   /* ブラウン寄りの罫線 */
  border-radius: 12px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),            /* 外側の柔らかい影 */
    0 1px 0 rgba(255,255,255,.6) inset;     /* 罫線に“厚み”用の内側ハイライト（任意） */
  padding: 40px 32px;
}

/* カード内のボタン間隔など微調整（任意） */
.section.bg-white .btn{ margin-top: .25rem; }

/* --- .section.dark を白背景に（最優先オーバーライド） --- */
.section.dark{
  background-color:#fff !important;
  color:#333 !important;
}

/* 見出し・本文の色も通常トーンに戻す（必要箇所だけ） */
.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4,
.section.dark p,
.section.dark .title-block h1,
.section.dark .title-block span{
  color:#1a1a1a !important;
}

/* 区切り線は薄いグレーに */
.section.dark .line{ border-top-color:#eee; }

/* タイトルブロックのアクセントはそのまま */
.section.dark .title-block{ border-left-color:#888; }

/* ▼ 白いカード（CTA）の影を“右＋下”に寄せる */
.section.bg-white .container{
  /* 角と罫線はそのまま */
  border-radius: 20px;
  border: 1px solid rgba(170, 170, 170, .35);

  /* 影を右＆下に強め、上・左は極力出さない */
  /* 1つ目：下方向の柔らかい影 / 2つ目：右方向の柔らかい影 */
  box-shadow:
    0 16px 26px -12px rgba(0,0,0,.20),
    16px 0 26px -12px rgba(0,0,0,.12);
}

/* ▼ レシピ本体のカード（PC側 row.g-0…）も右＋下に寄せる */
.row.g-0.align-items-stretch.rounded.shadow{
  border-radius: 20px !important;
  border: 1px solid rgba(141,110,99,.25);
  background: #fff; /* section.dark を白化したのでここも白 */
  box-shadow:
    0 16px 26px -12px rgba(0,0,0,.20),
    16px 0 26px -12px rgba(0,0,0,.12);
}

/* スマホ時に同様の影を付ける（行レイアウト版） */
@media (max-width: 991.98px){
  .section .row.align-items-stretch,
  .section .row:not(.g-0){
    border-radius: 20px;
    border: 1px solid rgba(141,110,99,.25);
    background: #fff;
    box-shadow:
      0 16px 26px -12px rgba(0,0,0,.20),
      16px 0 26px -12px rgba(0,0,0,.12);
  }
}
.section { overflow: visible; } /* もしくは .section.bg-white だけに適用でもOK */

/* =========================
   btn-outline-dark 調整版
   ========================= */
.btn-outline-dark {
  color: #ffffff !important;             /* 常時文字色は白 */
  background-color: var(--fp-accent);    /* 通常時はブラウン系（#8d6e63） */
  border-color: var(--fp-accent);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: #ffffff !important;             /* hoverでも白文字 */
  background-color: var(--fp-accent-dk) !important;  /* hover時は濃いブラウン */
  border-color: var(--fp-accent-dk) !important;
  box-shadow: none;
}
/* === 白カード（NO./アイコンのパネル）の天地余白を強制的に確保 === */

/* 原因①: .pb-0 が !important で下パディングを0にしている → 強制上書き */
.section.m-0 > .container.pb-0{
  padding-bottom: clamp(24px, 8vw, 56px) !important; /* 最少24px〜画面に応じて拡張 */
}
/* 上側も最低量を保証 */
.section.m-0 > .container{
  padding-top: clamp(28px, 6.5vw, 64px) !important;
  padding-inline: clamp(16px, 4.5vw, 48px) !important; /* 左右も少し余裕 */
}

/* 原因②: .fbox-content の inline 負マージンを打ち消す */
@media (max-width: 1200px){
  .section.m-0 > .container .fbox-content{
    margin-top: 0 !important;
  }
}
@media (max-width: 768px){
  .section.m-0 > .container .fbox-content{
    margin-left: 0 !important;
  }
}

/* 行間（縦方向の隙間）を常に確保 */
.section.m-0 > .container .row{
  row-gap: 1.75rem;                      /* 行同士の間隔 */
}
@media (max-width: 575.98px){
  .section.m-0 > .container .row{ row-gap: 2rem; }
}

/* 区切り線の上下も痩せないように */
.section.m-0 > .container .line{
  margin-block: clamp(16px, 4vw, 28px) !important;
}

/* 影が切れないように（親でカットされている場合の保険） */
.section{ overflow: visible; }
/* 白カード（NO./仕様アイコンパネル）の天地余白を強制確保 */
.section.m-0 > .container{
  padding-top: 30px !important;   /* 上に30px */
  padding-bottom: 30px !important;/* 下に30px */
}

/* 行間も詰まりすぎないように調整 */
.section.m-0 > .container .row{
  row-gap: 1.5rem; /* アイコン行の間隔 */
}
/* 枠線の内側（上下）に常に空間を確保：約30px */
.row.g-0.align-items-stretch.rounded.shadow{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* スマホ側（.g-0 でない行）も同様に */
@media (max-width: 991.98px){
  .section .row.align-items-stretch,
  .section .row:not(.g-0){
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}
/* ===== NO.〜アイコンのカードを下のレシピカードと横幅を完全一致させる ===== */

/* 上カード(.section.m-0 > .container) と下カード(.row.g-0...) を同じ幅に */
.section.m-0 > .container,
.section .container > .row.g-0.align-items-stretch.rounded.shadow{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  /* .container と同じ最大幅をブレークポイントごとに適用 */
  max-width: 100% !important;
}

@media (min-width: 576px){
  .section.m-0 > .container,
  .section .container > .row.g-0.align-items-stretch.rounded.shadow { max-width: 540px !important; }
}
@media (min-width: 768px){
  .section.m-0 > .container,
  .section .container > .row.g-0.align-items-stretch.rounded.shadow { max-width: 720px !important; }
}
@media (min-width: 992px){
  .section.m-0 > .container,
  .section .container > .row.g-0.align-items-stretch.rounded.shadow { max-width: 960px !important; }
}
@media (min-width: 1200px){
  .section.m-0 > .container,
  .section .container > .row.g-0.align-items-stretch.rounded.shadow { max-width: 1140px !important; }
}
@media (min-width: 1400px){
  .section.m-0 > .container,
  .section .container > .row.g-0.align-items-stretch.rounded.shadow { max-width: 1320px !important; }
}

/* 左右の見え方を完全一致（containerの左右パディング相当） */
.section.m-0 > .container{ padding-left: 12px !important; padding-right: 12px !important; }
.section .container > .row.g-0.align-items-stretch.rounded.shadow{
  /* .row の負マージンを打ち消さず、container相当の見え方に固定 */
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 12px !important; padding-right: 12px !important;
}
/* ▼ NO〜アイコンカードの“下の線”をカード内側に見せる */
.section.m-0 > .container > .line{
  display: block !important;
  border-top: 1px solid #e9e6e4 !important;

  /* カード内側に引き込む（行のすぐ下に見える位置）*/
  margin-top: -14px !important;   /* ← 上に少し吸い上げてカード内側へ */
  margin-bottom: 24px !important; /* 次要素との余白 */
  margin-left: 12px !important;   /* container の内側paddingと合わせる */
  margin-right: 12px !important;
}

/* 画面が狭いときは左右/吸い上げ量を少しタイトに */
@media (max-width: 575.98px){
  .section.m-0 > .container > .line{
    margin-top: -12px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}
/* ===== NO.〜アイコンカード内の線と余白を調整 ===== */

/* 横幅が広い時（PC想定） */
@media (min-width: 992px){
  /* 上側の線（カード内） */
  .section.m-0 > .container .fbox-content > .line{
    margin-top: 30px !important;   /* アイコン情報との間隔を均一に */
    margin-bottom: 30px !important;
  }
  /* 下側の線（カード内） */
  .section.m-0 > .container > .line{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* 横幅が狭い時（スマホ想定） */
@media (max-width: 991.98px){
  /* 下側の線にカード下端との余白を追加 */
  .section.m-0 > .container > .line{
    margin-bottom: 40px !important;  /* 下端に十分な余白 */
  }
}
@media (min-width: 992px){
  /* 上の線（情報エリアとの間を少しだけ狭く） */
  .section.m-0 > .container .fbox-content > .line{
    margin-bottom: 20px !important;   /* ← 情報エリアとの距離 */
  }
  /* 下の線（情報エリアとの距離） */
  .section.m-0 > .container > .line{
    margin-top: 20px !important;      /* ← 情報エリアとの距離 */
  }
}

/* SP/タブレット（横幅が狭い時）：下線の“下側”とカード枠の距離を上側と同じに */
@media (max-width: 991.98px){
  /* 上側はカード上枠→上線が 30px（= padding-top:30px）なので、
     下側も下線→カード下枠の距離を 30px に合わせる */
  .section.m-0 > .container > .line{
    margin-bottom: 30px !important;   /* 下線の下の空間をカード枠まで 30px */
  }
  /* 情報エリアと線の距離はやや広め（読みやすさ）で統一 */
  .section.m-0 > .container .fbox-content > .line{
    margin-bottom: 24px !important;   /* 上線〜情報距離 */
  }
  .section.m-0 > .container > .line{
    margin-top: 24px !important;      /* 情報〜下線距離 */
  }
}
/* ===========================================
   NO〜アイコンカード：線まわりの最終調整
   =========================================== */

/* PC（横幅が広い時）：上線/下線と情報エリアの距離を統一（= 20px） */
@media (min-width: 992px){
  /* 上の線（情報エリアとの間を少しだけ狭く） */
  .section.m-0 > .container .fbox-content > .line{
    margin-bottom: 20px !important;   /* ← 情報エリアとの距離 */
  }
  /* 下の線（情報エリアとの距離） */
  .section.m-0 > .container > .line{
    margin-top: 20px !important;      /* ← 情報エリアとの距離 */
  }
}

/* SP/タブレット（横幅が狭い時）：下線の“下側”とカード枠の距離を上側と同じに */
@media (max-width: 991.98px){
  /* 上側はカード上枠→上線が 30px（= padding-top:30px）なので、
     下側も下線→カード下枠の距離を 30px に合わせる */
  .section.m-0 > .container > .line{
    margin-bottom: 30px !important;   /* 下線の下の空間をカード枠まで 30px */
  }
  /* 情報エリアと線の距離はやや広め（読みやすさ）で統一 */
  .section.m-0 > .container .fbox-content > .line{
    margin-bottom: 24px !important;   /* 上線〜情報距離 */
  }
  .section.m-0 > .container > .line{
    margin-top: 24px !important;      /* 情報〜下線距離 */
  }
}

/* ───────── カード内下線を常に“カード本体”に描く ───────── */

/* 広い幅：カード本体＝.container */
.section.m-0 > .container{
  --card-pad-x: 12px;     /* 左右のカード内余白に合わせる */
  --card-pad-y: 30px;     /* 上下のカード内余白に合わせる */
  position: relative;
}
@media (min-width: 992px){
  /* 下線を .container の内側に描画 */
  .section.m-0 > .container::after{
    content:"";
    position:absolute;
    left:  var(--card-pad-x);
    right: var(--card-pad-x);
    bottom: var(--card-pad-y);          /* 下枠から一定距離（=上枠→上線と対称） */
    height:1px;
    background:#e9e6e4;
  }
  /* もし .container直下の .line を併用していたら消す（外側に出るため） */
  .section.m-0 > .container > .line{ display:none !important; }
}

/* 狭い幅：カード本体＝.row.align-items-stretch.rounded.shadow（または .row:not(.g-0)） */
@media (max-width: 991.98px){
  /* .container に描いた下線は使わない */
  .section.m-0 > .container::after{ content:none !important; }

  /* カード本体を基準に下線を描く */
  .section .container > .row.align-items-stretch.rounded.shadow,
  .section .container > .row.align-items-stretch:not(.g-0){
    position:relative;
  }
  .section .container > .row.align-items-stretch.rounded.shadow::after,
  .section .container > .row.align-items-stretch:not(.g-0)::after{
    content:"";
    position:absolute;
    left:  var(--card-pad-x,12px);
    right: var(--card-pad-x,12px);
    bottom: var(--card-pad-y,30px);
    height:1px;
    background:#e9e6e4;
  }

  /* 外側の .line は非表示（カード外へはみ出すため） */
  .section.m-0 > .container > .line{ display:none !important; }
}

/* ===== 狭い幅だけ：タイトル＆写真の横幅を他セクションと揃える ===== */
@media (max-width: 991.98px){

  /* 1) タイトルの 80% ラッパーを無効化し、左右12pxで .container と同じ見え方に */
  .section.dark .container > div[style*="width:80%"]{
    width: 100% !important;
    padding-left: 12px !important;   /* .container の左右パディングに合わせる */
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2) 見出しブロックも同様に内側パディングを付与 */
  .section.dark .title-block,
  .section.dark .emphasis-title{
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 3) 画像の 350px 指定を打ち消して常に等幅表示 */
  .section.dark .emphasis-title img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== モーダル画像を枠内に収める ===== */
.modal-photo-container {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.modal-photo-container img {
  max-width: 100%;     /* 横幅はモーダル枠に収める */
  max-height: 80vh;    /* 画面の縦80%以内に制御 */
  height: auto;
  object-fit: contain; /* 縦横比を崩さず収める */
  display: block;
  margin: 0 auto;
}

/* ===== Mobile rail: 画面いっぱい - 左右5px で統一（~576px） ===== */
@media (max-width: 575.98px){
  :root{ --rail: 5px; }

  /* 1) すべてのセクション内 .container をレールに合わせる */
  .section .container,
  .section.m-0 > .container,
  .section.bg-white .container{
    max-width: 100% !important;          /* 固定 max-width を無効化 */
    width: 100% !important;
    padding-left: var(--rail) !important; /* 左右5px */
    padding-right: var(--rail) !important;
    margin-left: auto !important;         /* 中央寄せ */
    margin-right: auto !important;
  }
  .bg-white{
    padding-left: var(--rail) !important; /* 左右5px */
    padding-right: var(--rail) !important;
  }

  /* 2) タイトル周り：inline の width:80%/画像350px を打ち消し、レールに揃える */
  .section.dark .container > div[style*="width:80%"]{
    width: 100% !important;
    padding-left: var(--rail) !important;
    padding-right: var(--rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .section.dark .title-block,
  .section.dark .emphasis-title{
    padding-left: var(--rail) !important;
    padding-right: var(--rail) !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
  .section.dark .emphasis-title img{
    display:block;
    width:100% !important;    /* 350px などを無効化 */
    height:auto !important;
    max-width:100% !important;
    margin:0 auto;
  }

  /* 3) NOカード/レシピカードの行をフル幅化（負マージンを抑止） */
  .section .container > .row,
  .row.g-0.align-items-stretch.rounded.shadow,
  .section .container > .row.align-items-stretch:not(.g-0){
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* 4) CTAカードの内側パディングはレールに合わせて軽めに（見やすさ保持） */
  .section.bg-white .container{
    padding-left: calc(var(--rail) + 11px) !important; /* 元32pxを縮める */
    padding-right: calc(var(--rail) + 11px) !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
/* ==========================================================
   SP時：レシピセクション（材料/作り方/ワンポイント）を左右5pxに揃える
   対象：feature-box 内の fbox-content 直下にある .row（= レシピカードの行）
   ========================================================== */
@media (max-width: 575.98px){
  :root{ --rail: 5px; }

  /* 行そのものを“画面幅 − 10px(=左右5px)”に */
  .feature-box .fbox-content > .row{
    margin-left: var(--rail) !important;
    margin-right: var(--rail) !important;
    width: auto !important;               /* 100%固定を解除し margin を有効化 */
  }

  /* 列に横パディングを必ず付与（inline の padding:20px 0 を上書き） */
  .feature-box .fbox-content > .row > [class*="col-"]{
    padding-left:  var(--rail) !important;
    padding-right: var(--rail) !important;
  }

  /* 列内の文章ブロックもレールに合わせて安全側に */
  .reciepe_text_box,
  .reciepe_text_center,
  .reciepe_text{
    padding-left:  var(--rail) !important;
    padding-right: var(--rail) !important;
  }
  .reciepe_text_box {
    padding-left: 1em;   /* レシピ全体の左右余白を維持 */
    padding-right: 1em;
  }
  .reciepe_text_box_onePoint {
    margin:0;
    padding:0;
    padding-left: 0.36em;   /* レシピ全体の左右余白を維持 */
    padding-right: 0em;
  }


  .section.dark .title-block {
    text-align: left !important;   /* 中央寄せを強制解除 */
    border-left: 14px solid #888;
    padding-left: clamp(14px, 3.2vw, 18px) !important;
  }
  .section.dark .title-block h1,
  .section.dark .title-block span{
  display:block;
  text-align:left !important;
}
}

/* =========================================================
   no-card セクション：カード表現を完全無効化（PC/SP 両方）
   使い方: <div class="section m-0 no-card"> ... </div>
   ========================================================= */

/* 1) コンテナ本体のカード装飾を全解除（枠/角丸/影/背景/擬似線） */
body#main .section.no-card > .container,
body#main .section.no-card.bg-white > .container,
body#main .section.m-0.no-card > .container{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  /* 余白はレイアウトに合わせて。要らなければ 0、5pxレールに乗せるなら var(--rail,5px) */
  padding-left: var(--rail, 0) !important;
  padding-right: var(--rail, 0) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* コンテナに描いていた下線を抑止 */
body#main .section.no-card > .container::after{ content: none !important; }

/* 2) コンテナ直下の .row（カード化を打ち消す） */
body#main .section.no-card > .container > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* カード化しているクラスが付いていても打ち消す */
body#main .section.no-card > .container > .row.rounded,
body#main .section.no-card > .container > .row.shadow,
body#main .section.no-card > .container > .row.g-0.align-items-stretch.rounded.shadow{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important;
}
/* 行に付与される擬似線（SP用 ::after 等）も抑止 */
body#main .section.no-card > .container > .row::after{
  content: none !important;
}

/* 3) 既存の「SPで row をカード化する」ルールを no-card では上書き否定 */
@media (max-width: 991.98px){
  body#main .section.no-card .container > .row.align-items-stretch,
  body#main .section.no-card .container > .row.align-items-stretch:not(.g-0){
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
  }
  body#main .section.no-card .container > .row.align-items-stretch::after,
  body#main .section.no-card .container > .row.align-items-stretch:not(.g-0)::after{
    content: none !important;
  }
}

/* 4) no-card セクション内の水平線は通常通り表示（外側 .line を有効化） */
body#main .section.no-card > .container > .line{
  display: block !important;
  border-top: 1px solid #e9e6e4 !important;
  margin: 24px 0 !important;
}

/* タイトルブロックの本文を左揃えに */
.title-block {
  text-align: left !important;   /* 中央寄せを強制解除 */
}

/* タイトル自体も左揃え */
.title-block h1,
.title-block span {
  text-align: left !important;
  display: block;
}

.reciepe_text_left{
  /* 親が flex なので、この要素だけ水平センターへ */
  align-self: center;

  /* テキストは常に左揃え */
  text-align: left !important;

  /* ブロック化して幅を制御 → 中央配置 + 左頭揃えが両立 */
  display: inline-block;

  /* 画面に応じた最大幅（中央に置いたまま、行長を適度に制限） */
  max-width: min(92%, 720px);   /* スマホでは 92% まで、PCでは 720px を上限に */
  width: auto;

  /* 余白・行高はお好みで */
  margin: 0;
  line-height: 1.35;
}

/* もう少しきっちり分けたい場合（PCは少し広め、SPは詰める） */
@media (min-width: 992px){
  .reciepe_text_left{ max-width: min(80%, 820px); }
}
@media (max-width: 575.98px){
  .reciepe_text_left{ max-width: 92%; }
}
.reciepe_text {
  text-align: left;
  margin: 0 0 0.6em 0;      /* 下に少し余白、必要に応じて */
  padding-left: 1.4em;      /* 番号部分の幅 */
  text-indent: -1.1em;      /* 1行目だけ左に引っ込める */
  line-height: 1.6;         /* 行間を少し広げると読みやすい */
}
/* スマホ時：番号ぶら下げインデントがはみ出さないように調整 */
@media (max-width: 575.98px){
  :root{ --rail: 5px; } /* 既存の5pxレール */

  /* レシピ本文の外側余白を確保（左端に当たらないように、番号分も足す） */
  .reciepe_text_box{
    box-sizing: border-box;
    padding-left: calc(var(--rail) + 1.2em) !important; /* ← ここがポイント */
    padding-right: var(--rail) !important;
    max-width: 100%;
  }

  /* ぶら下げインデント（番号幅と同値にする） */
  .reciepe_text{
    box-sizing: border-box;
    margin: 0 0 .6em 0;
    line-height: 1.6;
    padding-left: 1.6em;     /* 番号の幅 */
    text-indent: -1.2em;     /* 1行目だけ番号分引っ込める（左にはみ出さない） */

    /* はみ出し対策（長い語や英数字） */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}