@charset "UTF-8";
/* ******************************************************************

	--header.css--
	本店のCSS（index.css）は .l-mega-menu を常時 display:none にしており、
	開閉のCSSルールを持たない（本店側は専用JSで直接styleを操作している）。
	ここでは js/script.js が付与する .is-open クラス、および
	PCでのホバー表示のみを補うクラスを定義する。

****************************************************************** */

/* ------------------------------------------------------------------
	カラー変数（あとで配色を変えたい時はここだけ触れば良いようにする）
	ベースはアクセント1色（ワイン）＋グレー系。
	候補色（#1a9fba/#f88696/#7ed9f4/#eff3bb）は --c-accent-2(pink) / --c-blue / --c-skyblue / --c-lime として登録。
	サイドバーの人気記事タイトル・マーカー・前後記事の矢印・記事本文の装飾（見出し／ボックス）など、
	差し色として狭い範囲だけに使用する。各色は soft（淡い背景用）／text（本文で読める濃さ）を揃えている。
-------------------------------------------------------------------*/
:root {
	--c-accent: #ae2256;
	--c-accent-soft: #F6E2E7;
	--c-accent-2: #f88696;
	--c-accent-2-soft: #fde3e8;
	--c-accent-2-text: #c14f68;
	--c-blue: #1a9fba;
	--c-blue-soft: #dcf1f5;
	--c-blue-text: #146b7e;
	--c-skyblue: #dae4e9;
	--c-skyblue-soft: #e7f9fd;
	--c-skyblue-text: #1c6c85;
	--c-lime: #eff3bb;
	--c-lime-soft: #f8fae0;
	--c-lime-text: #7a8730;
	--c-heading: #333333;
	--c-text: #545b63;
	--c-text-light: #666666;
	--c-muted: #909090;
	--c-border: #D2CBBE;
	--c-bg-muted: #f4f4f4;
	--c-bg-page: #f7f6f1;
}

/* PC：ホバーで表示 */
@media screen and (min-width: 1031px) {
	.l-main-navi-list__item:hover > .l-mega-menu {
		display: block !important;
	}
}

/* SP：タップで表示（js/script.js が .is-open を付け外しする） */
@media screen and (max-width: 1030px) {
	.l-mega-menu.is-open {
		display: block !important;
	}
}

/* 検索ボックスも同様に、本店CSSには開閉ルールが無いため補う */
.l-header-search__contents.is-open {
	display: block !important;
}

/* ハンバーガーメニューのオーバーレイも同様（本店CSSはアニメーションのみでdisplay指定が無い） */
.l-main-navi-overlay.is-on {
	display: block;
}

.l-main{
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: #333;
}

/* ------------------------------------------------------------------
	ヘッダー直下・パンくずの上に置く「オンラインショップを見にいく」バー
	参考: https://w-clinic.shop/blog/doctors-cosme/ の o--informationbar
-------------------------------------------------------------------*/
.p-shop-bar {
	padding: 9px 15px;
	background: var(--c-accent);
	text-align: center;
}
.p-shop-bar__link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em 1.4em;
	border: 1px solid #fff;
	border-radius: 60px;
	color: #fff !important;
	font-size: .8em;
	font-weight: bold;
	text-decoration: none !important;
	transition: opacity .2s;
}
.p-shop-bar__link:hover {
	opacity: .8;
}

/* コンテンツ部の背景（参照テーマのbody背景と同じライトグレー） */
.l-main:has(.p-blog-layout),
.home .l-main{
	background: var(--c-bg-page);
}

/* パンくず（nanadropのBreadcrumbsコンポーネント出力用。本店CSSには無いクラスなのでここで補う） */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 30px;
	padding: 0 15px;
	max-width: 1030px;
	font-size: 12px;
	color: #909090;
}
.breadcrumb li {
	display: inline;
}
.breadcrumb li + li::before {
	content: "/";
	margin: 0 6px;
}
.breadcrumb a {
	color: #909090;
}

/* ------------------------------------------------------------------
	下層固定ページのページタイトル（modules/doc-page-title.php）
	p-section-heading（英語ラベル＋日本語見出し）と同じ構成に統一
-------------------------------------------------------------------*/
.p-page-title {
	margin: 0 0 40px;
	text-align: center;
}
.p-page-title__en {
	margin: 0 0 .3em;
	color: var(--c-muted);
	font-family: "Crimson Text", serif;
	font-size: .8em;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.p-page-title__ja {
	margin: 0;
	color: var(--c-heading);
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: .04em;
}

.u-contents:has(.p-page-title){
	padding-top: 40px;
}

.u-contents:has(.p-top-special){
	padding-bottom: 0;
}



/* --------------------------------------------------
   グローバルナビ：リンク型の項目（よくある質問）を
   ボタン型の項目と同じ見た目に揃える
-------------------------------------------------- */
.l-main-navi-list__item > a.l-main-navi-list__link {
	box-sizing: border-box;
	width: 100%;
	line-height: 20px;
}

/* 下層メニューを持たない項目は矢印を非表示 */
.l-main-navi-list__item > a.l-main-navi-list__link::before {
	content: none;
}