"/* ==========================================================
   OMAI UI KIT
   RESPONSIVE CSS
   PC / SP IMAGE SWITCHING
   MOBILE ONE COLUMN
   FINAL CLEAN VERSION
========================================================== */


/* ==========================================================
   01. Responsive Image
   PC / SP画像切り替え
========================================================== */

.om-responsive-image-wrap {
  display: block !important;
  width: 100%;
  max-width: 1120px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border:  0 !important;
  box-sizing: border-box;
}

.om-responsive-image {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.om-responsive-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}


/* PC画像 */
.om-responsive-image__pc {
  display: block;
}

/* SP画像 */
.om-responsive-image__sp {
  display: none !important;
}


/* ==========================================================
   02. Smartphone
   768px以下
========================================================== */

@media screen and (max-width: 768px) {
	
  /* ========================================================
     02-01. 基本リセット
     ページ幅だけをリセットする
     ※ bodyの木目背景は消さない
  ======================================================== */

  html {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    /* bodyの木目背景はテーマ側を維持 */
  }


  /* ========================================================
     02-02. Page Wrapper
     スマホでは画面幅いっぱい
     背景はbodyを透過
  ======================================================== */

  .l-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 20px 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;
    background-image: none !important;
  }


  /* ========================================================
     02-03. Header
     ヘッダー自体は白
  ======================================================== */

  .l-header {
    background: #fff !important;
    background-image: none !important;
  }


  /* ========================================================
     02-04. Main
     ★ 本文全体だけ白
     ★ bodyの木目はここでは見せない
  ======================================================== */

  .l-main,
  .l-main.l-main-wide,
  .l-main.u-border {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    background: #fff !important;
    background-image: none !important;
  }


  /* ========================================================
     02-05. Main Inner
  ======================================================== */

  .dividerBottom {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    background: #fff !important;
    background-image: none !important;
  }


  /* ========================================================
     02-06. H1
     左右15px
  ======================================================== */

  .dividerBottom > h1.heading-primary {

    width: 100% !important;
    max-width: 100% !important;

    margin: 15px 0 !important;

    padding: 0px 15px !important;

    box-sizing: border-box !important;

    background: #fff !important;
    background-image: none !important;
  }


  /* ========================================================
     02-07. Page Contents
  ======================================================== */

  .postContents,
  .postContents > .content {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: #fff !important;
    background-image: none !important;
  }


  /* ========================================================
     02-08. WordPress Group
  ======================================================== */

  .postContents .wp-block-group,
  .postContents .wp-block-group__inner-container {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     02-09. OMAI 1 COLUMN
  ======================================================== */

  .postContents .om-onecolumn,
  .postContents .om-onecolumn__inner,
  .postContents .om-onecolumn__section {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     02-10. OMAI SECTION
     子要素が親幅を超えないようにする
  ======================================================== */

  .om-onecolumn__section > *,
  .om-onecolumn__inner > *,
  .wp-block-group__inner-container > * {

    max-width: 100%;
    box-sizing: border-box;
  }


  /* ========================================================
     02-11. H2〜H5
     本文幅いっぱい + 左右15px
  ======================================================== */

  .postContents .content h2,
  .postContents .content h3,
  .postContents .content h4,
  .postContents .content h5 {

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     02-12. 通常本文
  ======================================================== */

  .postContents .content > p,
  .postContents .content > ul,
  .postContents .content > ol {

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }


  /* ========================================================
     02-13. 通常画像
  ======================================================== */

  .postContents .content img {

    max-width: 100% !important;
    height: auto;

    box-sizing: border-box;
  }


  /* ========================================================
     02-14. 通常figure
     Responsive Image以外
  ======================================================== */

  .postContents .content figure:not(.om-responsive-image-wrap) {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
  }


  /* ========================================================
     02-15. Responsive Image
     SP画像だけ画面端まで
  ======================================================== */

  .postContents .om-responsive-image-wrap {

    display: block !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;
    border: 0 !important;
  }

  .postContents .om-responsive-image {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }


  /* PC画像OFF */
  .postContents .om-responsive-image__pc {
    display: none !important;
  }


  /* SP画像ON */
  .postContents .om-responsive-image__sp {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
  }


  /* ========================================================
     02-16. 本文内の一般セクション
     背景は親の白を継承
     inheritによる木目復活はさせない
  ======================================================== */

  .postContents section,
  .postContents .wp-block-group,
  .postContents .om-onecolumn,
  .postContents .om-onecolumn__inner,
  .postContents .om-onecolumn__section {

    background-color: transparent;
  }


  /* ========================================================
     02-17. 商品・レビュー等
     既存テーマ / OMAI CSSを優先
     背景や幅を強制的に変更しない
  ======================================================== */

  .postContents .om-product,
  .postContents .om-review,
  .postContents .om-faq,
  .postContents .om-cta {

    box-sizing: border-box;
  }


  /* ========================================================
     02-18. Header / Breadcrumb
     本文と混ざらないようにする
  ======================================================== */

  .breadcrumb,
  .breadcrumbList,
  .l-breadcrumb {

    box-sizing: border-box;
  }


  /* ========================================================
     02-19. Footer
     bodyの木目を残す
     footer自体のテーマデザインは変更しない
  ======================================================== */

  .l-footer,
  .l-footerTop,
  .l-footerBottom {

    box-sizing: border-box;
  }

}


/* ==========================================================
   03. IMPORTANT
   このCSSでは以下を意図的にしない

   ・bodyのbackgroundを白にしない
   ・bodyのbackground-imageをnoneにしない
   ・.l-mainをbackground: inheritにしない
   ・サイト全体を100vwにしない
   ・商品/レビュー/FAQの既存背景を強制変更しない

   背景ルール：

   body
     ↓
   木目背景

   l-main
     ↓
   白背景

   postContents
     ↓
   白背景

   Responsive Image
     ↓
   100vwフルブリード

========================================================== */"