/* === 【書籍LP共通ベース】 === */
/* 意図: SWELLのレイアウトを使わず全幅で表示するための基本スタイル */

/* SWELLのヘッダー・フッター・サイドバーを非表示 */
.books-lp .l-header,
.books-lp .l-fixHeader,
.books-lp .l-footer,
.books-lp .l-scrollTop,
.books-lp .l-fixSide,
.books-lp #fix_bottom_menu,
.books-lp .p-fixBtnWrap {
  display: none !important;
}

/* メインコンテンツを全幅に */
.books-lp__main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* SWELLの管理バー分のマージンをリセット */
.books-lp {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* wp:html ブロックの余分なマージンを除去 */
.books-lp__main .wp-block-html {
  margin: 0;
  padding: 0;
}

/* 画像は幅いっぱい */
.books-lp__main img {
  max-width: 100%;
  height: auto;
}

/* === 【書籍LP: SWELL グローバルスタイルの影響排除】 === */
/* 意図: SWELL は :root に --swl-fz--content:4.2vw を設定し body/コンポーネントの font-size を
   vw ベースにするため、書籍LP配下ではフォントが巨大化する。本番は destyle.css のみで
   browser 既定の 16px 固定なので、.books-lp スコープで 16px に戻す。
   font-family は各 LP CSS 側で * { font-family: 'MyFont', sans-serif } を指定しているため
   ここでは触らない。 */
.books-lp,
.books-lp__main {
  font-size: 16px;
}

/* インラインアイコン(_book 行のアイコン等)が lazyload プレースホルダーで
   親幅まで広がる問題を防ぐ。書籍購入リンク行のアイコンは固有サイズのまま。 */
.books-lp__main ._book img {
  width: auto;
  max-width: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* === 【書籍LP-PC: Xアイコンのみ原寸が大きい問題の補正】 === */
/* 意図: Twitter→X 移行で dementialifestyle 由来の 75x75 の x アイコンを流用したため、
   PC サイドバーの .flex_all 内で Facebook/LINE(25x25) より大きく表示される。
   同カラム内で揃えるため SNS アイコンを幅 25px に固定する。 */
.books-lp-pc .flex_all .sns_all img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* === 【書籍LP-SP: 本番との描画差分の補正】 === */
/* 意図: SWELL の lazysizes + 画像最適化が働く環境では、本番(destyle + lazyload.js) と異なり
   一部画像がインライン自然サイズではなく親幅まで拡大される。SP LP でロゴとあとがき画像が
   肥大化するため、SP ビューポートのみ上限を明示する。 */
@media (max-width: 960px) {
  .books-lp-sp header .logo img {
    max-width: 80px;
    height: auto;
    display: block;
  }
  /* あとがきの書影画像。flex 子で 95% 指定だが、placeholder 状態では幅計算が
     狂って隣接テキストに被る。block+左揃え+自然比率維持に揃える。 */
  .books-lp-sp .max_wid.oreng .atogaki .atogaki_a {
    width: 100%;
    display: block;
  }
  .books-lp-sp .max_wid.oreng .atogaki .atogaki_a img {
    display: block;
    width: 60%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }

  /* FV 下オレンジ帯の書影 (.obi img): 本来は scale(3.3) + 左方向 translate で中央寄せだが
     SP で本文テキストに重なるため、右端に寄せて縮小配置する。 */
  .books-lp-sp .max_wid.oreng .obi {
    align-items: center;
    position: relative;
  }
  .books-lp-sp .max_wid.oreng .obi h1 {
    width: 55%;
  }
  .books-lp-sp .max_wid.oreng .obi img {
    width: 40%;
    max-width: 180px;
    height: auto;
    margin-left: auto;
    margin-right: 0;
    transform: none;
    align-self: center;
  }
}