/**
 * 熟成発酵ザクロゼリー（jukusei-hakkou-zakuro-jelly）専用スタイル
 * このページ（single-product.php / post_name = jukusei-hakkou-zakuro-jelly）のみに
 * 適用される、余白・ページ幅ガイドライン反映用CSS。
 * functions.php の nini_link_styles() で post_name を条件に読み込み。
 */

/* カートエリア：下に150pxあける */
.buy-area {
	margin-bottom: 150px;
}

/* 見出し・段落の行間
   ※本文(post_content)内に埋め込まれたインラインの<style>タグで
   「#product-detail .slim-content p, li, th, td { line-height:1.8; ... }」
   という、こちらより詳細度が高いルールが定義されており、通常の指定では
   上書きできないため !important を付与 */
#product-detail h1,
#product-detail h2,
#product-detail h3,
#product-detail h4,
#product-detail h5,
#product-detail h6,
#product-detail p {
	line-height: normal !important;
}

/* スリムコンテンツレイアウト（PCのみ：768px以上） */
@media (min-width: 768px) {
	.slim-content {
		max-width: 920px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* h2見出し（「About」「How to use」等の大見出し） */
#product-detail h2 {
	font-weight: bold;
	margin-top: 100px;
	margin-bottom: 90px;
}

/* h3見出し（通常のセクション見出しのみ対象。
   「栄養補助食品」の赤ラベル(.bg-danger)と
   ギフトボックス小見出し(.h4指定)は対象外） */
#product-detail h3.wp-block-heading:not(.bg-danger) {
	font-weight: bold;
	margin-top: 100px;
	margin-bottom: 20px;
	margin-left: -10px;
	margin-right: -10px;
}

/* 段落：下に40pxあける */
#product-detail p {
	margin-bottom: 40px;
}

/* 段組み（画像のみのカラム）：左右のマージンを-10px、下マージンを30pxとる
   ※本文内の埋め込み<style>で「#product-detail .slim-content figure { margin-left:0; margin-right:0; }」
   が同じ詳細度・後読み込みで指定されており上書きできないため !important を付与 */
#product-detail .row figure,
#product-detail .slim-content figure {
	margin-left: -10px !important;
	margin-right: -10px !important;
	margin-bottom: 30px !important;
}

/* グレーエリア：四方の余白20px、左右マージン-30px
   （.slim-content の左右30pxパディングを打ち消し、全幅に見せる）
   ※.slim-content の直下にある bg-beige のみを対象とする
   ※明示的な競合ルールは見当たらないが、他の項目同様に!importantで確実に上書き */
#product-detail .slim-content>div.bg-beige {
	margin-left: -30px !important;
	margin-right: -30px !important;
}

#product-detail .slim-content div.bg-beige,
#product-detail .slim-content div.bg-light {
	padding: 20px !important;
}

#product-detail .slim-content div.bg-beige>h3,
#product-detail .slim-content div.bg-beige>h4 {
	margin-top: 0px !important;
}

#product-detail .slim-content div.bg-beige>p {
	margin-bottom: 0px !important;
}

#product-detail .slim-content div.bg-light>figure {
	margin-top: 0px !important;
}

#product-detail .slim-content div.bg-light>p:last-child {
	margin-bottom: 0px !important;
}

/* 四角見出し（グレーエリア内などのボックス見出し）：下マージン20px */
#product-detail h3.bg-beige,
#product-detail h4.bg-beige {
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 600;
	border-radius: 5px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

@media (min-width: 768px) {

	#product-detail h3.bg-beige,
	#product-detail h4.bg-beige {
		margin-left: -10px;
		margin-right: -10px;
	}
}

.pl20 {
	padding-left: 20px !important;
}

.pr20 {
	padding-right: 20px !important;
}

@media (min-width: 768px) {
	#product-detail #jelly-stick {
		width: 50% !important;
		margin-right: 20px !important;
	}
}

#product-detail li {
	margin-bottom: auto !important;
}

@media (min-width: 768px) {
	#gochuui h4 {
		font-size: 30px !important;
	}

	#gochuui p,
	#gochuui li {
		font-size: 24px !important;
	}
}