@charset "UTF-8";
/*
 * OCEANS 見出しのテキスト化（2026-09 SEO修正）
 * 読み込み: inc/oceans-headings.php（フロント・ブロックエディタ両方）
 *
 * 方針
 * - 以前は画像だった見出しを、テキスト＋CSS で同じ見た目にする
 * - 文字の太さは元画像の線の太さに合わせて見出しごとに 700 / 800 / 900（2026-09-30 見直し。以前は全部 900）
 *   Mac のヒラギノは 700=W6・800=W7・900=W8。ヒラギノが無い端末は Noto Sans JP で、700=Noto 700、800・900=Noto 900（下の @font-face。800 の Noto は無いので 900 になる）
 * - 大きさは元画像と同じ伸び方にする：PC は元画像の表示幅で固定、画面が狭いときは本文幅（92vw）に比例
 *   → font-size: min(PC の px, 92vw × 比率)
 * - 背景の図形は元の SVG から文字を除いたもの（img/headings/）か、CSS の clip-path
 */

/* ---- Noto Sans JP 900（見出し用サブセット）----
 * ascent/descent を Hiragino Sans（880/120）に合わせ、端末が違っても文字の上下位置がずれないようにする */
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('./fonts/noto-sans-jp-900-subset.woff2') format('woff2');
	ascent-override: 88%;
	descent-override: 12%;
	line-gap-override: 0%;
}
/* Noto Sans JP 700 の見出し用（2026-09-30。太さ 700 の見出し＝白帯で使う）
 * ファイルは本文用に style.min.css で読み込んでいるものと同じ（キャッシュが効く）。上下位置を 900 と同じくヒラギノに合わせるため別名にする
 * （'Noto Sans JP' のまま ascent を変えると本文の太字にも効いてしまう） */
@font-face {
	font-family: 'OC Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('./fonts/noto-sans-jp-v52-japanese-700.woff2') format('woff2');
	ascent-override: 88%;
	descent-override: 12%;
	line-gap-override: 0%;
}

/* ---- 本文の文字サイズ（余白の基準）----
 * 見出しは font-size が大きいので、SWELL の u-mb-20（=2em）を付けると余白が大きくなりすぎる。
 * 本文の 1em を px に確定させた --oc-base を使って、画像だったときと同じ余白にする。 */
@property --oc-base {
	syntax: '<length>';
	inherits: true;
	initial-value: 16px;
}
.post_content,
.editor-styles-wrapper {
	--oc-base: 1em;
}
.post_content .oc-mb-0,  .editor-styles-wrapper .oc-mb-0  { margin-bottom: 0 !important; }
.post_content .oc-mb-10, .editor-styles-wrapper .oc-mb-10 { margin-bottom: calc(var(--oc-base) * 1) !important; }
.post_content .oc-mb-15, .editor-styles-wrapper .oc-mb-15 { margin-bottom: calc(var(--oc-base) * 1.5) !important; }
.post_content .oc-mb-20, .editor-styles-wrapper .oc-mb-20 { margin-bottom: calc(var(--oc-base) * 2) !important; }
.post_content .oc-mb-30, .editor-styles-wrapper .oc-mb-30 { margin-bottom: calc(var(--oc-base) * 3) !important; }
.post_content .oc-mb-40, .editor-styles-wrapper .oc-mb-40 { margin-bottom: calc(var(--oc-base) * 4) !important; }

/* ---- 共通 ---- */
.post_content .oc-ttl,
.editor-styles-wrapper .oc-ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: none;
	background: none;
	/* font-weight: 900; 2026-09-30 見直し：Mac（W8）が元画像より 1 割ほど太かったので既定を 800（W7）に。太い見出しは個別に 900 */
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}
.post_content .oc-ttl::before,
.post_content .oc-ttl::after,
.editor-styles-wrapper .oc-ttl::before,
.editor-styles-wrapper .oc-ttl::after {
	content: none;
}

/* ---- ① 下層ページタイトル（黄色の平行四辺形・青文字）----
 * 元画像 835×133 を 417px 表示。黄色は y=0〜131、上辺 x=28〜833、下辺 x=1〜806 */
.post_content .oc-ttl-page,
.editor-styles-wrapper .oc-ttl-page {
	max-width: 417px;
	aspect-ratio: 835 / 133;
	background: #fff000;
	clip-path: polygon(3.353% 0, 99.88% 0, 96.65% 99.25%, 0.12% 99.25%);
	color: #005bab;
	font-size: min(45.6px, 10.06vw);
	letter-spacing: 0.01em;
	padding-top: 0.08em;
}

/* ---- ② 青帯＋三角柄・白文字 ----
 * 元画像 1450×201 を 725px 表示。背景は strength-s2-2-title.svg から文字を除いたもの */
.post_content .oc-ttl-banner,
.editor-styles-wrapper .oc-ttl-banner {
	max-width: 725px;
	aspect-ratio: 1450 / 201;
	background: url('./img/headings/banner-blue.svg') center / 100% 100% no-repeat;
	color: #fff;
	font-size: min(44.4px, 5.634vw);
	letter-spacing: 0.03em;
	/* 帯の本体は右下の影を除いた範囲（724.65 中 714.65×90）なので、中心を左上に寄せる */
	padding-right: 0.23em;
	padding-bottom: 0.2em;
}

/* ---- p → 見出しに変えた箇所（見た目は p のまま）----
 * SWELL の h2/h3 の装飾（背景・下線・上余白）を打ち消す。文字サイズ・色・余白クラスは元の p と同じものをブロックに付ける */
.post_content .oc-h-plain,
.editor-styles-wrapper .oc-h-plain {
	margin-top: 0;
	padding: 0;
	border: none;
	background: none;
	/* 見出しの既定値（SWELL: h2 1.4em/700/line-height 1.4 など）を p と同じ「親から継承」に戻す。
	   ブロックで指定した文字サイズ・太さ・行間（インライン style）や色クラスはこれより優先される */
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}
.post_content .oc-h-plain::before,
.post_content .oc-h-plain::after,
.editor-styles-wrapper .oc-h-plain::before,
.editor-styles-wrapper .oc-h-plain::after {
	content: none;
}

/* 見出し内の小さい文字（SWELL の文字サイズ「極小」= .swl-fz.u-fz-xs）は、元画像に合わせて 0.82 倍にする
 * 例：全身脱毛(ヒゲ+VIO含む)比較 の括弧部分 */
.post_content .oc-ttl .swl-fz.u-fz-xs,
.editor-styles-wrapper .oc-ttl .swl-fz.u-fz-xs {
	font-size: 0.82em !important;
}

/* ---- 見出し内の「oceans」ロゴ文字（インライン画像）---- */
.post_content .oc-ttl img.oc-word,
.editor-styles-wrapper .oc-ttl img.oc-word {
	display: inline-block;
	width: auto;
	max-width: none;
	margin: 0;
	vertical-align: baseline;
}

/* ---- ④ 黄色の平行四辺形・青文字（トップ「oceansの想い」）----
 * 元 SVG 714.65×90（715px 表示）。左上 18.72・右下 695.93 */
.post_content .oc-ttl-band,
.editor-styles-wrapper .oc-ttl-band {
	max-width: 715px;
	aspect-ratio: 714.65 / 90;
	background: #fff000;
	clip-path: polygon(2.62% 0, 100% 0, 97.38% 100%, 0 100%);
	color: #005bab;
	font-weight: 900; /* 元画像が太い（W8 でちょうど） */
	font-size: min(47.5px, 6.11vw);
	letter-spacing: 0.08em;
	/* 画像（oceans）と文字を並べるので flex ではなく行の高さで上下中央に：帯の高さ 90/714.65×715 ÷ 47.5 = 1.895em（うち上 0.1em） */
	display: block;
	line-height: 1.795;
	padding-top: 0.1em;
}
.post_content .oc-ttl-band img.oc-word,
.editor-styles-wrapper .oc-ttl-band img.oc-word {
	height: 0.85em;
	margin-right: 0.23em;
	vertical-align: -0.09em;
}

/* ---- ② の変形：「oceans3つのコンセプト」（oceans＋大きい 3 は画像、「つのコンセプト」は文字）---- */
/* 2026-09-30 見直し：「つのコンセプト」が元画像より幅 7%・高さ 5% 小さかった（字間が狭い）→ 文字を 5% 大きく・字間を広げる。
 * oceans3 の画像の大きさ・位置は変えない（px が同じになるよう em を換算）。行の幅が 22.6px 伸びるぶん左右の余白で相殺
 * 以前: font-size min(38.2px, 4.847vw) / letter-spacing 0.02em / line-height 2.288 / padding 0.15em 0.49em 0 0
 *       img: height 1.703em / margin -0.5em 0.2em -0.5em 0 / vertical-align 0.12em */
.post_content .oc-ttl-banner.is-concept,
.editor-styles-wrapper .oc-ttl-banner.is-concept {
	font-size: min(40.1px, 5.088vw);
	letter-spacing: 0.052em;
	/* 帯本体（上 90/100）の中央 43.7px → 行の高さ 2×43.7÷40.1、元画像に合わせて少し下げる */
	display: block;
	line-height: 2.18;
	padding: 0.143em 0 0 0.097em;
}
.post_content .oc-ttl-banner.is-concept img.oc-word,
.editor-styles-wrapper .oc-ttl-banner.is-concept img.oc-word {
	height: 1.621em; /* 元画像の 65px ÷ 40.1px */
	margin: -0.476em 0.19em -0.476em 0; /* 大きい 3 で行の高さが伸びないように上下を詰める（位置は vertical-align で決める） */
	vertical-align: 0.114em;
}

/* ---- トップのコンセプト見出し（以前は PC=帯の画像 / SP=テキスト h2 の二重）----
 * SP（〜959px）：ブロックの設定（文字サイズ・色・改行）のまま＝以前の SP 見出しと同じ
 * PC（960px〜）：以前の PC 画像と同じ帯（715×90）。is-yellow＝黄地に青文字、is-blue＝青地に黄文字 */
@media (min-width: 960px) {
	.post_content .oc-ttl-concept,
	.editor-styles-wrapper .oc-ttl-concept {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 715px;
		aspect-ratio: 714.65 / 90;
		margin: 0 auto !important;
		clip-path: polygon(2.62% 0, 100% 0, 97.38% 100%, 0 100%);
		font-size: 50px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
		letter-spacing: 0.065em !important;
		padding-top: 0.04em;
		white-space: nowrap;
	}
	.post_content .oc-ttl-concept.is-yellow { background: #fff000; color: #005bab !important; }
	/* is-blue：2026-09-30 見直しで太さ 800（元画像が W8 より 1 割細い） */
	.post_content .oc-ttl-concept.is-blue   { background: #005bab; color: #fff000 !important; font-size: 41.8px !important; font-weight: 800 !important; letter-spacing: 0.057em !important; padding-top: 0.1em; }
	.post_content .oc-ttl-concept.is-narrow { font-size: 49px !important; letter-spacing: 0.089em !important; }
	/* 以前の PC 画像の下余白（u-mb-10 = 16px）。見出しを包むグループ（u-mb-0）側に付ける */
	.post_content .wp-block-group:has(> .wp-block-group__inner-container > .oc-ttl-concept),
	.post_content .wp-block-group:has(> .oc-ttl-concept) {
		margin-bottom: calc(var(--oc-base) * 1) !important;
	}
}

/* ---- トップ「メンズに特化した専門サロンです！！」（以前は PC 用・SP 用の 2 画像）----
 * PC：900×78 の黄色、1 行 / SP：557×135 の黄色（本文幅まで）、2 行（[spbr] で改行） */
.post_content .oc-ttl-salon,
.editor-styles-wrapper .oc-ttl-salon {
	background: #fff000;
	color: #005bab;
	font-weight: 900; /* 元画像が太い（W8 でも 1 割細い） */
	max-width: 557px;
	aspect-ratio: 557 / 135;
	font-size: min(49.1px, 8.11vw);
	letter-spacing: 0.015em;
	/* 2 行（[spbr]）：箱の高さ 135/557×幅 = 2.749em、行送り 1.16×2 = 2.32em → 上に 0.215em */
	display: block;
	line-height: 1.16;
	padding-top: 0.215em;
	white-space: normal;
	margin-bottom: calc(var(--oc-base) * 4) !important;
}
@media (min-width: 960px) {
	.post_content .oc-ttl-salon,
	.editor-styles-wrapper .oc-ttl-salon {
		max-width: 900px;
		aspect-ratio: 900 / 78;
		font-size: 43.9px;
		letter-spacing: 0.05em;
		/* 1 行：箱の高さ 78/900×900 ÷ 43.9 = 1.777em */
		line-height: 1.777;
		padding-top: 0;
		white-space: nowrap;
		margin-bottom: calc(var(--oc-base) * 5) !important;
	}
}

/* ---- ① の変形 ----
 * is-small：眉毛ページのタイトル（元 SVG 500×65.99、左上 16.48・右下 483.52、PC のみ）
 * is-tall ：選ばれる理由の PC タイトル画像は下に透明の余白（835×152 のうち 19px）があったので、その分だけ下を空ける */
.post_content .oc-ttl-page.is-small,
.editor-styles-wrapper .oc-ttl-page.is-small {
	max-width: 500px;
	aspect-ratio: 500 / 65.99;
	clip-path: polygon(3.296% 0, 100% 0, 96.704% 100%, 0 100%);
	font-size: 33.5px;
	letter-spacing: 0.01em;
	padding-top: 0.12em;
}
.post_content .oc-ttl-page.is-tall,
.editor-styles-wrapper .oc-ttl-page.is-tall {
	margin-bottom: calc(var(--oc-base) * 2 + 9.5px) !important;
}

/* ---- ③ 白地＋青枠の斜め帯・青文字（料金「脱毛部位・シングルパーツ」、初めての方「〇〇パーツ体験料金」）----
 * 元画像 1462×211 を 731px 表示。背景は price-s1-title-2.webp の文字部分を白で塗ったもの */
.post_content .oc-ttl-white,
.editor-styles-wrapper .oc-ttl-white {
	max-width: 731px;
	aspect-ratio: 1462 / 211;
	background: url('./img/headings/banner-white.png') center / 100% 100% no-repeat;
	color: #005bab;
	font-weight: 700; /* 2026-09-30 見直し：元画像が細い（W8 の 8 割）→ Mac W6・Windows Noto 700 */
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "OC Noto Sans JP", "Noto Sans JP", "Helvetica Neue", Arial, Meiryo, sans-serif;
	font-size: min(40.6px, 5.11vw);
	letter-spacing: 0.01em;
	padding-left: 0.22em;
	padding-bottom: 0.02em;
}

/* ---- 初めての方「ご予約・ご相談の流れ」（水色文字＋上下の線、白い六角形）----
 * 元画像 1500×214 を 749px 表示。背景は元画像の文字部分を白で塗ったもの */
.post_content .oc-ttl-reserve,
.editor-styles-wrapper .oc-ttl-reserve {
	max-width: 749px;
	aspect-ratio: 1500 / 214;
	background: url('./img/headings/reserve-bg.png') center / 100% 100% no-repeat;
	color: #00adba;
	/* 2026-09-30 見直し：Mac で字面が元画像より 7% 高かった → 文字を 5% 小さく、幅は字間で保つ
	 * 以前: font-size min(48.5px, 5.957vw) / letter-spacing -0.02em / padding-left 0.1em / padding-top 0.08em */
	font-size: min(46px, 5.65vw);
	letter-spacing: 0.037em;
	padding-left: 0.105em;
	padding-top: 0.084em;
}

/* ---- 初めての方「未成年の方へ／必ず同意書をお持ちください」（白文字 2 行）----
 * 元画像 1211×198 を 713px 表示。行送り 65.4px（1.267em）は画像の高さ（2.259em）より大きいので、
 * 箱の高さは画像と同じ比率に固定（min-height:0 ではみ出しを許す）し、文字だけ上に 0.1375em ずらす */
.post_content .oc-ttl-note,
.editor-styles-wrapper .oc-ttl-note {
	display: block;
	max-width: 713px;
	aspect-ratio: 1211 / 198;
	min-height: 0;
	color: #fff;
	font-size: min(51.6px, 6.653vw);
	letter-spacing: 0.1em;
	line-height: 1.267;
	white-space: nowrap; /* 改行は <br> の位置だけ */
	transform: translateY(-0.1375em);
}

/* ---- 画像のまま見出しにしたもの（有料フォント複数・装飾が強い）----
 * 見出しブロックの中に画像を 1 枚だけ置く。見た目は元の画像ブロックと同じ（位置・幅のクラスも元のまま付ける） */
.post_content .oc-ttl-img,
.editor-styles-wrapper .oc-ttl-img {
	margin-top: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-size: inherit;
	line-height: 0;
	letter-spacing: 0;
	text-align: center;
}
.post_content .oc-ttl-img::before,
.post_content .oc-ttl-img::after,
.editor-styles-wrapper .oc-ttl-img::before,
.editor-styles-wrapper .oc-ttl-img::after {
	content: none;
}
.post_content .oc-ttl-img img,
.editor-styles-wrapper .oc-ttl-img img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* ---- 画面には出さない見出し（背景画像に文字が描かれている箇所の、文字の代わり）---- */
.post_content .oc-vh,
.editor-styles-wrapper .oc-vh {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- 選ばれる理由「高品質なサービスを納得価格で通いやすい」（トップの黄色い箱と同じ作り、大きさ違い）----
 * PC：950×78・1 行 / SP：585.16×129.15・2 行 */
.post_content .oc-ttl-salon.is-reason,
.editor-styles-wrapper .oc-ttl-salon.is-reason {
	max-width: 585px;
	aspect-ratio: 585.16 / 129.15;
	font-size: min(43.6px, 6.857vw);
	letter-spacing: 0.05em;
	line-height: 1.193;
	padding-top: 0.288em;
	margin-bottom: 0 !important;
}
@media (min-width: 960px) {
	.post_content .oc-ttl-salon.is-reason,
	.editor-styles-wrapper .oc-ttl-salon.is-reason {
		max-width: 950px;
		aspect-ratio: 950 / 78;
		font-size: 44.4px;
		letter-spacing: 0.064em;
		line-height: 1.757;
		padding-top: 0.04em;
		margin-bottom: 0 !important;
	}
}

/* ---- h2 → p に変えた箇所（PC/SP 二重の見出しの PC 側など）：h2 のときの行の高さ・太さを保つ ---- */
.post_content .oc-p-as-h2,
.editor-styles-wrapper .oc-p-as-h2 {
	line-height: 1.4;
	font-weight: 700;
	margin-top: 0;
}
/* 眉毛「初回限定」のリボン：元の画像ブロックと同じく絶対配置（SWELL の .post_content h2{position:relative} に負けないように） */
.post_content .oc-ttl-img.wax-eyebrowwax-price-header {
	position: absolute;
}

/* ---- 子テーマ既存の「p にだけ効く」指定を、p → 見出しに変えた箇所にも効かせる（style_both.css と同じ値）---- */
.price-guarantee-header .oc-h-plain {
	transform: scaleX(.93);
}
@media (max-width: 959px) {
	.price-guarantee-header .oc-h-plain {
		transform: scaleX(.9) translateX(-2px);
		white-space: nowrap;
	}
	/* 元の p の指定は、ブロック側の文字揃え（has-text-align-left など）があるとそちらが勝っていた → 揃え指定のないものだけ */
	.beg-reserve-col-text .oc-h-plain:not([class*="has-text-align-"]) {
		text-align: center;
	}
}

/* ---- 子テーマ既存の .beg-section-title（帯を下の枠に重ねる負の余白・SP の幅 95%）を、見出しにしても保つ ----
 * .oc-ttl の width:100% などより優先させる。SP は幅が 95%（本文幅の）なので文字も 95/100 に */
.post_content .oc-ttl.beg-section-title {
	margin-bottom: -52.5px !important;
}
@media (max-width: 959px) {
	.post_content .oc-ttl.beg-section-title {
		width: 95%;
		margin: 0 auto -7vw !important;
		font-size: min(40.6px, 4.855vw);
	}
}