/* =========================================================
   M-Style 商品詳細ページ専用CSS
   template-mstyle-product.php を選んだ固定ページだけで使用
   ========================================================= */

.mstyle-product-page {
  --mh-navy: #5F768A;
  --mh-text: #4d5668;
  --mh-line: #dceaf7;
  --mh-light: #f6faff;
  --mh-photo: #eef3f7;
  --mh-photo-border: #dce3e9;

  width: 100%;
  background: #fff;
  color: var(--mh-text);
}

/* =========================================================
   M-Style 5大特長 テーマカラー
   D案・WEB用
   見出し／罫線／MORE に使用
   本文色は --mh-text の共通グレーを使用
   ========================================================= */

/* 1. 電気代ゼロの家 / energy */
.mstyle-product-page.mstyle-feature-1 {
  --mh-navy: #5F768A;
}

/* 2. 修繕費7割減の家 / maintenance */
.mstyle-product-page.mstyle-feature-2 {
  --mh-navy: #5C6965;
}

/* 3. 美しさが生涯続く家 / beauty */
.mstyle-product-page.mstyle-feature-3 {
  --mh-navy: #886B5A;
}

/* 4. 人を健康にする家 / health */
.mstyle-product-page.mstyle-feature-4 {
  --mh-navy: #B35D5D;
}

/* 5. 家事時間激減の家 / housework */
.mstyle-product-page.mstyle-feature-5 {
  --mh-navy: #AD7F35;
}

.mstyle-product-page,
.mstyle-product-page * {
  box-sizing: border-box;
}

.mstyle-product-inner {
  width: min(750px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 100px;
}

/* WordPress/Cocoon側の見出し装飾が商品本文へ入り込まないように限定解除 */
.mstyle-product-page .mstyle-product-article h1,
.mstyle-product-page .mstyle-product-article h2,
.mstyle-product-page .mstyle-product-article h3 {
  background: none;
  border: 0;
  box-shadow: none;
}

/* パンくず */
.mstyle-product-page .mh-breadcrumb {
  margin: 0 0 4px;
  color: #7a8492;
  font-size: 12px;
  line-height: 1.7;
}

.mstyle-product-page .mh-breadcrumb a {
  color: #5f6f86;
  text-decoration: none;
}

.mstyle-product-page .mh-breadcrumb a:hover {
  text-decoration: underline;
}

.mstyle-product-page .mh-breadcrumb-sep {
  margin: 0 8px;
}

.mstyle-product-page .mh-breadcrumb-current {
  color: #8c949e;
}

/* =========================================================
   Cocoonの自動表示を商品詳細ページだけ非表示
   ========================================================= */

/* 本文内にCocoonが自動生成する目次 */
body.mstyle-product-template .toc,
body.mstyle-product-template .toc-widget-box {
  display: none !important;
}

/* Cocoonのサイドバー（スマホ時は本文下へ回り込むことがある） */
body.mstyle-product-template #sidebar,
body.mstyle-product-template .sidebar {
  display: none !important;
}

/* 本文全体 */
.mstyle-product-page .mh-product {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* 大タイトル部分 */
.mstyle-product-page .mh-product-intro {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 55px;
  align-items: start;
  margin: 0;
}

.mstyle-product-page .mh-main-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--mh-photo);
  border: 1px solid var(--mh-photo-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #9aa4ad;
  font-size: 14px;
}

.mstyle-product-page .mh-main-photo img,
.mstyle-product-page .mh-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mstyle-product-page .mh-intro-text h1 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--mh-navy);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.mstyle-product-page .mh-intro-text p {
  margin: 0;
  color: var(--mh-text);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

.mstyle-product-page .mh-text-section p {
  margin: 0;
  color: var(--mh-text);
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.02em;
}

/* 小タイトルセット本文：行間1.6 */
.mstyle-product-page .mh-feature-text p {
  margin: 0;
  color: var(--mh-text);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* 中タイトル */
.mstyle-product-page .mh-section,
.mstyle-product-page .mh-text-section {
  margin-top: 66px;
}

/* 大タイトル写真の下から最初の中タイトルまで 38px */
.mstyle-product-page .mh-product-intro + .mh-section {
  margin-top: 38px;
}

.mstyle-product-page .mh-section-title {
  position: relative;
  margin: 0;
  padding: 0 0 2px;
  color: var(--mh-navy);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
}

.mstyle-product-page .mh-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--mh-navy);
}

/* 写真＋文章 */
.mstyle-product-page .mh-feature {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 48px;
  align-items: start;
  padding: 0;
  border-bottom: 0;
}

.mstyle-product-page .mh-feature-reverse {
  grid-template-columns: 1fr 140px;
}

.mstyle-product-page .mh-feature-reverse .mh-feature-photo {
  grid-column: 2;
  grid-row: 1;
}

.mstyle-product-page .mh-feature-reverse .mh-feature-text {
  grid-column: 1;
  grid-row: 1;
}

/* 中タイトルの罫線から最初の小タイトルセットまで 24px */
.mstyle-product-page .mh-section-title + .mh-feature {
  margin-top: 24px;
}

/* 小タイトルセット同士は罫線なし・20pxあき */
.mstyle-product-page .mh-feature + .mh-feature {
  margin-top: 20px;
}

.mstyle-product-page .mh-feature-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #9aa4ad;
  font-size: 14px;
}

.mstyle-product-page .mh-feature-text h3 {
  margin: 0 0 12px;
  padding: 0;
  color: var(--mh-navy);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
}

/* more */
.mstyle-product-page .mh-more {
  margin-top: 11px;
}

.mstyle-product-page .mh-more summary {
  width: fit-content;
  margin-left: auto;
  color: var(--mh-navy);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.mstyle-product-page .mh-more summary::-webkit-details-marker {
  display: none;
}

.mstyle-product-page .mh-more summary::after {
  content: " \2192";
}

.mstyle-product-page .mh-more[open] summary::after {
  content: " \2191";
}

.mstyle-product-page .mh-more-body {
  margin-top: 8px;
  padding: 0;
  background: transparent;
}

/* =========================================================
   文字だけパターン（グループ不要）
   線あり：H2に mh-section-title
   線なし：H3をそのまま使用
   ========================================================= */

/* 線あり見出し：上38px */
.mstyle-product-page .mstyle-product-article > .mh-section-title {
  margin: 38px 0 0 !important;
  margin-block-start: 38px !important;
  margin-block-end: 0 !important;
}

/* 大タイトル直後の最初の線あり見出しも38px */
.mstyle-product-page .mh-product-intro + .mh-section-title {
  margin-top: 38px !important;
  margin-block-start: 38px !important;
}

/* 線あり見出し → 本文：8px */
.mstyle-product-page .mstyle-product-article > .mh-section-title + p,
.mstyle-product-page .mstyle-product-article > .mh-section-title + .wp-block-paragraph {
  margin-top: 8px !important;
  margin-block-start: 8px !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  color: var(--mh-text);
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
}

/* 線なし小見出し：上20px */
.mstyle-product-page .mstyle-product-article > h3.wp-block-heading {
  margin: 20px 0 0 !important;
  margin-block-start: 20px !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/* 線なし小見出し → 本文：8px */
.mstyle-product-page .mstyle-product-article > h3.wp-block-heading + p,
.mstyle-product-page .mstyle-product-article > h3.wp-block-heading + .wp-block-paragraph {
  margin-top: 8px !important;
  margin-block-start: 8px !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  color: var(--mh-text);
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
}


/* =========================================================
   WordPress標準ブロック（Gutenberg）対応
   カラム・画像・見出し・段落・詳細ブロックに
   mh-feature / mh-feature-photo / mh-feature-text / mh-more
   を付けて使うための調整
   ========================================================= */

/* Cocoon / WordPress側の本文幅・ブロック幅の影響を受けにくくする */
.mstyle-product-page .mstyle-product-article {
  --wp--style--block-gap: 0px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 「カラム」ブロックを商品詳細用の2カラムとして固定 */
.mstyle-product-page .wp-block-columns.mh-feature {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* WordPressが各カラムへ付ける50%幅を解除 */
.mstyle-product-page .wp-block-columns.mh-feature > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 写真側は140px四方 */
.mstyle-product-page .wp-block-columns.mh-feature > .wp-block-column.mh-feature-photo {
  width: 140px !important;
  max-width: 140px !important;
  aspect-ratio: 1 / 1;
}

.mstyle-product-page .mh-feature-photo .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mstyle-product-page .mh-feature-photo .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 小タイトル：WordPressの見出しブロックでも16pxに固定 */
.mstyle-product-page .mh-feature-text h3.wp-block-heading,
.mstyle-product-page .mh-feature-text h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/* 本文：14px・行間1.6 */
.mstyle-product-page .mh-feature-text > p,
.mstyle-product-page .mh-feature-text .wp-block-paragraph {
  margin: 0 !important;
  color: var(--mh-text);
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
}

/* WordPress標準「詳細」ブロックを more 表示にする */
.mstyle-product-page details.wp-block-details.mh-more {
  margin-top: 11px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mstyle-product-page details.wp-block-details.mh-more > summary {
  display: block;
  width: fit-content;
  margin-left: auto;
  padding: 0;
  color: var(--mh-navy);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.mstyle-product-page details.wp-block-details.mh-more > summary::marker {
  content: "";
}

.mstyle-product-page details.wp-block-details.mh-more > summary::-webkit-details-marker {
  display: none;
}

.mstyle-product-page details.wp-block-details.mh-more > summary::after {
  content: " \2192";
}

.mstyle-product-page details.wp-block-details.mh-more[open] > summary::after {
  content: " \2191";
}

/* 開いた文章は白背景のまま、直前本文の続きとして表示 */
.mstyle-product-page details.wp-block-details.mh-more > :not(summary) {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-text);
  font-size: 14px !important;
  line-height: 1.6 !important;
}


/* 文字だけパターンでは「詳細」にCSSクラスを付けなくても more 表示 */
.mstyle-product-page .mstyle-product-article > p + details.wp-block-details,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details {
  margin-top: 11px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details > summary,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details > summary {
  display: block;
  width: fit-content !important;
  max-width: none !important;
  margin-left: auto !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer;
  list-style: none !important;
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details > summary::marker,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details > summary::marker {
  content: "";
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details > summary::-webkit-details-marker,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details > summary::after,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details > summary::after {
  content: " \2192";
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details[open] > summary::after,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details[open] > summary::after {
  content: " \2191";
}

.mstyle-product-page .mstyle-product-article > p + details.wp-block-details > :not(summary),
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details > :not(summary) {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   商品本文の縦余白ルール
   Gutenberg/Cocoonの自動ブロック間隔をリセットし、
   基本20px・例外のみ個別指定
   ========================================================= */

/* トップレベルの自動ブロック間隔を0にする */
.mstyle-product-page .mstyle-product-article > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* 線あり見出し → 写真セット：20px */
.mstyle-product-page .mh-section-title + .wp-block-columns.mh-feature,
.mstyle-product-page .mh-section-title + .mh-feature {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* 写真セット → 写真セット：20px */
.mstyle-product-page .wp-block-columns.mh-feature + .wp-block-columns.mh-feature,
.mstyle-product-page .mh-feature + .mh-feature {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* 写真セット → 線なし見出し：20px */
.mstyle-product-page .wp-block-columns.mh-feature + h3.wp-block-heading,
.mstyle-product-page .mh-feature + h3.wp-block-heading {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* 写真セット → 線あり見出し：38px */
.mstyle-product-page .wp-block-columns.mh-feature + .mh-section-title,
.mstyle-product-page .mh-feature + .mh-section-title {
  margin-top: 38px !important;
  margin-block-start: 38px !important;
}

/* 本文 → more：11px */
.mstyle-product-page .mstyle-product-article > p + details.wp-block-details,
.mstyle-product-page .mstyle-product-article > .wp-block-paragraph + details.wp-block-details {
  margin-top: 11px !important;
  margin-block-start: 11px !important;
}

/* more → 次の線なし見出し：20px */
.mstyle-product-page details.wp-block-details + h3.wp-block-heading {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* more → 次の線あり見出し：38px */
.mstyle-product-page details.wp-block-details + .mh-section-title {
  margin-top: 38px !important;
  margin-block-start: 38px !important;
}


/* =========================================================
   Gutenbergの「コンテンツ幅」制限を商品ページ内だけ解除
   ========================================================= */

.mstyle-product-page .mstyle-product-article > * {
  width: 100% !important;
  max-width: none !important;
}

.mstyle-product-page .mh-feature,
.mstyle-product-page .wp-block-columns.mh-feature {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.mstyle-product-page .mh-feature-text,
.mstyle-product-page .mh-feature-text > *,
.mstyle-product-page .wp-block-column.mh-feature-text,
.mstyle-product-page .wp-block-column.mh-feature-text > * {
  width: 100% !important;
  max-width: none !important;
}

/* mh-feature-text内の標準「詳細」ブロックを自動で more 表示 */
.mstyle-product-page .mh-feature-text details.wp-block-details {
  margin-top: 11px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mstyle-product-page .mh-feature-text details.wp-block-details > summary {
  display: block;
  width: fit-content !important;
  max-width: none !important;
  margin-left: auto !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer;
  list-style: none !important;
}

.mstyle-product-page .mh-feature-text details.wp-block-details > summary::marker {
  content: "";
}

.mstyle-product-page .mh-feature-text details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.mstyle-product-page .mh-feature-text details.wp-block-details > summary::after {
  content: " \2192";
}

.mstyle-product-page .mh-feature-text details.wp-block-details[open] > summary::after {
  content: " \2191";
}

.mstyle-product-page .mh-feature-text details.wp-block-details > :not(summary) {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   任意写真パターン
   横幅いっぱい：mh-photo-wide
   50:50 2枚：mh-photo-pair
   写真そのものの余白は0、ブロック間は20px
   ========================================================= */

/* 横幅いっぱい写真 */
.mstyle-product-page .wp-block-image.mh-photo-wide {
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  margin-block-start: 20px !important;
  margin-block-end: 0 !important;
}

.mstyle-product-page .wp-block-image.mh-photo-wide img {
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
}

/* 50:50の2枚写真 */
.mstyle-product-page .wp-block-columns.mh-photo-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  margin-block-start: 20px !important;
  margin-block-end: 0 !important;
}

.mstyle-product-page .wp-block-columns.mh-photo-pair > .wp-block-column {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mstyle-product-page .mh-photo-pair .wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.mstyle-product-page .mh-photo-pair .wp-block-image img {
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
}

/* 任意写真の次に線なし見出しが来る場合：20px */
.mstyle-product-page .wp-block-image.mh-photo-wide + h3.wp-block-heading,
.mstyle-product-page .wp-block-columns.mh-photo-pair + h3.wp-block-heading {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* 任意写真の次に線あり見出しが来る場合：38px */
.mstyle-product-page .wp-block-image.mh-photo-wide + .mh-section-title,
.mstyle-product-page .wp-block-columns.mh-photo-pair + .mh-section-title {
  margin-top: 38px !important;
  margin-block-start: 38px !important;
}


/* =========================================================
   任意写真＋小見出し＋本文（50:50）
   外側：mh-photo-text
   写真側：mh-photo-text-photo
   文章側：mh-photo-text-body
   ========================================================= */

.mstyle-product-page .wp-block-columns.mh-photo-text {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  margin-block-start: 20px !important;
  margin-block-end: 0 !important;
}

.mstyle-product-page .wp-block-columns.mh-photo-text > .wp-block-column {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 写真側：元画像の比率をそのまま使う */
.mstyle-product-page .mh-photo-text-photo .wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.mstyle-product-page .mh-photo-text-photo .wp-block-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* 文章側：小見出し */
.mstyle-product-page .mh-photo-text-body h3.wp-block-heading,
.mstyle-product-page .mh-photo-text-body h3 {
  margin: 0 0 8px !important;
  margin-block-start: 0 !important;
  margin-block-end: 8px !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/* 文章側：本文 */
.mstyle-product-page .mh-photo-text-body > p,
.mstyle-product-page .mh-photo-text-body .wp-block-paragraph {
  margin: 0 !important;
  color: var(--mh-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
}

/* 文章側：more */
.mstyle-product-page .mh-photo-text-body details.wp-block-details {
  margin-top: 11px !important;
  margin-block-start: 11px !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details > summary {
  display: block;
  width: fit-content !important;
  max-width: none !important;
  margin-left: auto !important;
  padding: 0 !important;
  color: var(--mh-navy) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer;
  list-style: none !important;
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details > summary::marker {
  content: "";
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details > summary::after {
  content: " \2192";
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details[open] > summary::after {
  content: " \2191";
}

.mstyle-product-page .mh-photo-text-body details.wp-block-details > :not(summary) {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* このパターン → 線なし見出し：20px */
.mstyle-product-page .wp-block-columns.mh-photo-text + h3.wp-block-heading {
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

/* このパターン → 線あり見出し：38px */
.mstyle-product-page .wp-block-columns.mh-photo-text + .mh-section-title {
  margin-top: 38px !important;
  margin-block-start: 38px !important;
}


/* =========================================================
   小写真パターンの縦長写真版
   外側カラムに mh-photo-fixed140 を追加して使用
   左写真：mh-feature mh-photo-fixed140
   右写真：mh-feature mh-feature-reverse mh-photo-fixed140
   写真幅は140px固定、縦横比は元画像のまま
   ========================================================= */

.mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
  > .wp-block-column.mh-feature-photo {
  width: 140px !important;
  max-width: 140px !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: visible;
}

.mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
  .mh-feature-photo .wp-block-image {
  width: 140px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
  .mh-feature-photo .wp-block-image img {
  display: block;
  width: 140px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}




/* =========================================================
   M-Style 5大特長 共通ナビ
   パンくずと同程度に控えめな文字リンク
   ========================================================= */

.mstyle-product-page .mh-feature-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0 0 34px;
  color: #7a8492;
  font-size: 12px;
  line-height: 1.8;
}

.mstyle-product-page .mh-feature-nav a {
  color: #6f7b89;
  font-size: 12px;
  line-height: 1.8;
  text-decoration: none;
  white-space: nowrap;
}

.mstyle-product-page .mh-feature-nav a:hover {
  text-decoration: underline;
}

.mstyle-product-page .mh-feature-nav a.is-current {
  color: var(--mh-navy);
  font-weight: 600;
}

.mstyle-product-page .mh-feature-nav-sep {
  display: inline-block;
  margin: 0 8px;
  color: #b8bec5;
  font-weight: 400;
}

/* =========================================================
   M-Style 前後ページナビ
   ========================================================= */

.mstyle-product-page .mh-feature-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 60px 0 0;
  padding-top: 22px;
  border-top: 1px solid #d9dde2;
}

.mstyle-product-page .mh-feature-pager a {
  display: block;
  color: var(--mh-navy);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}

.mstyle-product-page .mh-feature-pager a span {
  display: block;
  margin-bottom: 2px;
  color: #8a9199;
  font-size: 11px;
}

.mstyle-product-page .mh-feature-pager-next {
  text-align: right;
}


/* スマートフォン */
@media screen and (max-width: 767px) {

  .mstyle-product-page .mh-feature-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 28px;
    overflow: visible;
  }

  .mstyle-product-page .mh-feature-nav a {
    min-width: 0;
    min-height: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.9;
  }

  .mstyle-product-page .mh-feature-nav-sep {
    margin: 0 6px;
    line-height: 1.9;
  }

  .mstyle-product-page .mh-feature-pager {
    gap: 14px;
    margin-top: 48px;
  }

  .mstyle-product-page .mh-feature-pager a {
    font-size: 12px;
  }

  .mstyle-product-inner {
    width: calc(100% - 40px);
    max-width: 750px;
    padding: 24px 0 70px;
  }

  .mstyle-product-page .mh-breadcrumb {
    margin-bottom: 4px;
  }

  .mstyle-product-page .mh-product-intro {
    display: block;
    margin-bottom: 54px;
  }

  .mstyle-product-page .mh-main-photo {
    width: 100%;
    max-width: 300px;
    margin: 0 0 24px;
  }

  .mstyle-product-page .mh-intro-text h1 {
    margin-bottom: 15px;
  }

  .mstyle-product-page .mh-section {
    margin-top: 50px;
  }

  .mstyle-product-page .mstyle-product-article > .mh-section-title {
    margin-top: 38px !important;
    margin-block-start: 38px !important;
  }

  .mstyle-product-page .mh-product-intro + .mh-section-title {
    margin-top: 38px !important;
    margin-block-start: 38px !important;
  }

  .mstyle-product-page .mh-section-title {
    margin-bottom: 0;
  }

  .mstyle-product-page .mh-feature,
  .mstyle-product-page .mh-feature-reverse {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
    padding: 0;
  }

  .mstyle-product-page .mh-feature-photo,
  .mstyle-product-page .mh-feature-reverse .mh-feature-photo {
    order: 1;
    width: min(70%, 140px);
  }

  .mstyle-product-page .mh-feature-text,
  .mstyle-product-page .mh-feature-reverse .mh-feature-text {
    order: 2;
  }

  /* WordPress標準カラムもスマホでは1列 */
  .mstyle-product-page .wp-block-columns.mh-feature,
  .mstyle-product-page .wp-block-columns.mh-feature-reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .mstyle-product-page .wp-block-columns.mh-feature > .wp-block-column.mh-feature-photo,
  .mstyle-product-page .wp-block-columns.mh-feature-reverse > .wp-block-column.mh-feature-photo {
    width: min(70%, 140px) !important;
    max-width: 140px !important;
  }


  /* 任意写真2枚はスマホでは縦並び */
  .mstyle-product-page .wp-block-columns.mh-photo-pair {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .mstyle-product-page .wp-block-image.mh-photo-wide,
  .mstyle-product-page .wp-block-columns.mh-photo-pair {
    margin-top: 20px !important;
    margin-block-start: 20px !important;
    margin-block-end: 0 !important;
  }


  /* 任意写真＋文章はスマホでは縦並び */
  .mstyle-product-page .wp-block-columns.mh-photo-text {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 20px !important;
    margin-block-start: 20px !important;
    margin-block-end: 0 !important;
  }

  /* 縦長写真版もスマホでは140px幅・元画像比率のまま */
  .mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
    > .wp-block-column.mh-feature-photo,
  .mstyle-product-page .wp-block-columns.mh-feature.mh-feature-reverse.mh-photo-fixed140
    > .wp-block-column.mh-feature-photo {
    width: 140px !important;
    max-width: 140px !important;
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
    .mh-feature-photo .wp-block-image,
  .mstyle-product-page .wp-block-columns.mh-feature.mh-feature-reverse.mh-photo-fixed140
    .mh-feature-photo .wp-block-image {
    width: 140px !important;
    height: auto !important;
  }

  .mstyle-product-page .wp-block-columns.mh-feature.mh-photo-fixed140
    .mh-feature-photo .wp-block-image img,
  .mstyle-product-page .wp-block-columns.mh-feature.mh-feature-reverse.mh-photo-fixed140
    .mh-feature-photo .wp-block-image img {
    width: 140px !important;
    height: auto !important;
    object-fit: contain !important;
  }

}

/* =========================================================
   FIX: 140px写真・高さ自動
   外側ブロックの種類に依存せず効かせる
   ========================================================= */

.mstyle-product-page .mh-feature.mh-photo-fixed140 .mh-feature-photo {
  width: 140px !important;
  max-width: 140px !important;
  min-width: 140px !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.mstyle-product-page .mh-feature.mh-photo-fixed140 .mh-feature-photo .wp-block-image,
.mstyle-product-page .mh-feature.mh-photo-fixed140 .mh-feature-photo figure {
  width: 140px !important;
  max-width: 140px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mstyle-product-page .mh-feature.mh-photo-fixed140 .mh-feature-photo img {
  display: block !important;
  width: 140px !important;
  max-width: 140px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 右写真でも同じ指定を維持 */
.mstyle-product-page .mh-feature.mh-feature-reverse.mh-photo-fixed140 .mh-feature-photo {
  width: 140px !important;
  max-width: 140px !important;
  min-width: 140px !important;
  aspect-ratio: auto !important;
  height: auto !important;
}


/* =========================================================
   小写真パターンの横長写真版
   Cocoon 2カラム対応
   外側カラムに mh-photo-fixed210 を追加して使用
   左写真：mh-feature mh-photo-fixed210
   右写真：mh-feature mh-feature-reverse mh-photo-fixed210
   写真幅は210px固定、縦横比は元画像のまま
   ========================================================= */

/* Cocoon 2カラムを商品詳細用グリッドにする */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210 {
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
}

/* 右写真 */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-feature-reverse.mh-photo-fixed210 {
  grid-template-columns: minmax(0, 1fr) 210px !important;
}

/* Cocoon左右カラムが持つ50%幅を解除 */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
> .wp-block-cocoon-blocks-column-left,
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
> .wp-block-cocoon-blocks-column-right {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex-basis: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 左写真：写真を左、文章を右 */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210:not(.mh-feature-reverse)
.mh-feature-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210:not(.mh-feature-reverse)
.mh-feature-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* 右写真：文章を左、写真を右
   Cocoonの「左カラム／右カラム」ではなく、
   mh-feature-photo / mh-feature-text の役割で配置する */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-feature-reverse.mh-photo-fixed210
.mh-feature-text {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.wp-block-cocoon-blocks-column-2.mh-feature.mh-feature-reverse.mh-photo-fixed210
.mh-feature-photo {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* 写真側だけを210px固定 */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
.mh-feature-photo {
  width: 210px !important;
  max-width: 210px !important;
  min-width: 210px !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* 写真ブロック */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
.mh-feature-photo .wp-block-image,
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
.mh-feature-photo figure {
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 写真そのもの */
.wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
.mh-feature-photo img {
  display: block !important;
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210,
  .wp-block-cocoon-blocks-column-2.mh-feature.mh-feature-reverse.mh-photo-fixed210 {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
  .mh-feature-photo {
    order: 1 !important;
    width: 210px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
  .mh-feature-text {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
  .mh-feature-photo .wp-block-image,
  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
  .mh-feature-photo figure,
  .wp-block-cocoon-blocks-column-2.mh-feature.mh-photo-fixed210
  .mh-feature-photo img {
    width: 210px !important;
    max-width: 100% !important;
    height: auto !important;
  }
}