@charset "UTF-8";
/* ==========================================================================
   02-header.css (v3 - reference design準拠)
   - 上部 dark info bar (.l-header__bar) を非表示
   - SWELL p-mainVisual を home (front-page) で非表示
   - ロゴ: 改良 Mt Fuji アイコン + wordmark + 「三島くらしメディア」サブタイトル
   - ナビ簡素化、右CTAピル
   ========================================================================== */

/* --- 上部 dark info bar 非表示 ------------------------------------ */
/* SWELLの .l-header__bar はサイト description + RSS/検索アイコンの dark strip。
   参考デザインでは無いため非表示。 */
.l-header__bar {
	display: none;
}

/* --- SWELL p-mainVisual (#main_visual) を home (front-page) で非表示 --- */
/* template-home.html 内の .p-mishimaHero を使うため、SWELL customizer の MV は不要 */
.home #main_visual,
.home .p-mainVisual {
	display: none;
}

/* --- SWELL の post slider (新着記事カルーセル) を home で非表示 --- */
/* SWELL customizer の「投稿スライダー」がメインビジュアル直下に出るため、
   独自 .p-mishimaHero を使う home では不要。全種類のクラスを網羅して非表示。 */
.home .p-postSlider,
.home .p-postSlide,
.home #post_slider,
.home .swell-post-slider,
.home .swell-postSlider,
.home .post_slider,
.home .p-mainSlider,
.home .p-postList--slide,
.home .swiper-container.p-postSlide,
.home .top_slider,
.home .swell-block-postSlider,
.home .top__sliderArea,
.home .l-mainContent > .p-postSlider,
.home .l-mainContent > .post_slider {
	display: none !important;
}

/* --- Home: SWELL article-width (--article_size: 900px) 制約を解除 ----- */
/* SWELLは固定ページ content を 900px に制限する。home はメディア tap の
   全幅レイアウトのため、これを解除して full-bleed 化。
   各セクションは内部の .p-mishimaSection__inner で max-width: 1280px に制御。 */
.home .l-mainContent.l-article,
.home .l-mainContent__inner,
.home .l-content,
.home .post_content {
	max-width: 100%;
	padding-inline: 0;
}

.home .post_content {
	padding: 0;
}

/* --- アーカイブ/カテゴリ/タグ/検索/ブログindex/固定ページ: 幅制約を解除 ----- */
/* sidebar は functions.php の swell_is_show_sidebar フィルタで非表示済み。
   .l-mainContent.l-article + 内部の各 wrapper を full-width に強制。
   コンテナ 1280px は .l-mainContent__inner で中央寄せ。 */
.archive .l-content,
.blog .l-content,
.search .l-content,
.page .l-content {
	max-width: 100% !important;
	display: block !important;
	width: 100%;
}

.archive .l-mainContent.l-article,
.blog .l-mainContent.l-article,
.search .l-mainContent.l-article,
.page:not(.home) .l-mainContent.l-article {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
	flex-basis: 100% !important;
}

.archive .l-mainContent__inner,
.blog .l-mainContent__inner,
.search .l-mainContent__inner,
.page:not(.home) .l-mainContent__inner {
	max-width: var(--mishima-container-max);
	margin-inline: auto;
	padding-inline: var(--mishima-gutter);
	box-sizing: border-box;
	width: 100%;
}

/* SWELL の .p-homeContent はオフセット余白が付くため解除 */
.archive .p-homeContent,
.blog .p-homeContent,
.search .p-homeContent,
.archive .p-homeContent.l-parent,
.blog .p-homeContent.l-parent {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* SWELLの c-tabBody / l-parent も幅制約しているケースの解除 */
.archive .c-tabBody,
.blog .c-tabBody,
.search .c-tabBody,
.archive .c-tabBody__item,
.blog .c-tabBody__item,
.search .c-tabBody__item {
	max-width: 100%;
	width: 100%;
}

/* sidebar が DOM 上に残っている場合に備えて非表示 */
.archive .l-sidebar,
.blog .l-sidebar,
.search .l-sidebar,
.home .l-sidebar,
.page .l-sidebar {
	display: none !important;
}

/* SWELL の '.top #content { padding-top: 4em }' を home で解除 */
.home #content,
.home.top #content {
	padding-top: 0;
}

/* home でタイトルエリア (パンくず + ページタイトル) を非表示 */
.home .l-topTitleArea {
	display: none;
}

/* --- 下層ページ: パンくず & タイトルエリアの左右余白をロゴと揃える --- */
/* SWELLは .l-topTitleArea__inner / .p-breadcrumb がフルブリードで左寄せに
   なる場合があるため、コンテナと同じ max-width + gutter を適用してロゴと
   左端を一致させる。home は上で display:none 済み。 */
.l-topTitleArea__inner,
.p-breadcrumb__inner,
.l-topTitleArea .p-breadcrumb,
.p-breadcrumb__list,
ol.p-breadcrumb__list {
	max-width: var(--mishima-container-max);
	margin-inline: auto;
	padding-inline: var(--mishima-gutter);
	box-sizing: border-box;
}

/* SWELL がパンくずを .l-mainContent の外側に出す場合に備えて */
body:not(.home) .p-breadcrumb {
	width: 100%;
}

/* --- アーカイブ/カテゴリ等のページタイトル ----------------------------- */
/* SWELLの .c-pageTitle (data-style="b_bottom") は span 内 inline-block で
   下線が表示されるが、本テーマでは block + 全幅にして次セクションを押し下げる。
   またカテゴリの "– category –" subtitle と .p-termHead__desc は非表示にして
   タイトルだけシンプルに見せる。 */

/* h1 自体を block + full-width 化 (specificity 0,2,1 で SWELL を上書き)
   archive/blog/search/全固定ページに適用。home はタイトル領域非表示済み。 */
.archive h1.c-pageTitle,
.blog h1.c-pageTitle,
.search h1.c-pageTitle,
.page:not(.home) h1.c-pageTitle,
body.archive .l-mainContent h1.c-pageTitle,
body.blog .l-mainContent h1.c-pageTitle,
body.page:not(.home) .l-mainContent h1.c-pageTitle {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem) !important;
	padding: 0 !important;
	font-family: var(--mishima-font-jp);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 700;
	color: var(--pal-ink);
	letter-spacing: 0.04em;
	text-align: left;
	border: none;
	background: none;
	line-height: 1.3;
	white-space: normal !important;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* SWELL の data-style ::before のみ抑制 (::after は clearfix のため残す) */
.archive h1.c-pageTitle::before,
.blog h1.c-pageTitle::before,
.search h1.c-pageTitle::before,
.page:not(.home) h1.c-pageTitle::before {
	content: none !important;
	display: none !important;
}

/* SWELL h1.c-pageTitle[data-style=b_bottom] の border-bottom を消す */
.archive h1.c-pageTitle[data-style="b_bottom"],
.blog h1.c-pageTitle[data-style="b_bottom"],
.search h1.c-pageTitle[data-style="b_bottom"],
.page:not(.home) h1.c-pageTitle[data-style="b_bottom"] {
	border-bottom: none !important;
}

/* SWELL の .c-pageTitle__inner は float:left のため、後続要素が
   タイトル右に回り込んでフィルタやカレンダーが横に並ぶ。
   float を解除し、clearfix を残す。 */
.archive .c-pageTitle__inner,
.blog .c-pageTitle__inner,
.search .c-pageTitle__inner,
.page:not(.home) .c-pageTitle__inner {
	display: inline-block;
	float: none !important;
	border: none !important;
	padding: 0 !important;
	background: none !important;
	position: relative;
	max-width: 100%;
	white-space: normal;
	margin-bottom: 0 !important;
}

/* h1 自体に clearfix を保険として付与 (SWELL の ::after を上書き) */
.archive h1.c-pageTitle::after,
.blog h1.c-pageTitle::after,
.search h1.c-pageTitle::after,
.page:not(.home) h1.c-pageTitle::after {
	content: "" !important;
	display: block !important;
	clear: both !important;
	height: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	background: none !important;
}

/* JP タイトル直下の短いアクセント下線 */
.archive .c-pageTitle__inner::after,
.blog .c-pageTitle__inner::after,
.search .c-pageTitle__inner::after,
.page:not(.home) .c-pageTitle__inner::after {
	content: "";
	display: block;
	width: 2.5em;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--pal-accent-2);
	border-radius: 2px;
}

/* カテゴリ "– category –" sub-title は非表示 */
.c-pageTitle__subTitle,
.archive .c-pageTitle__subTitle,
.blog .c-pageTitle__subTitle {
	display: none !important;
}

/* カテゴリ description (.p-termHead) は非表示 */
.p-termHead,
.archive .p-termHead {
	display: none !important;
}

/* --- ヘッダー本体 ------------------------------------------------ */
.l-header {
	background: var(--mishima-color-bg);
	border-bottom: 1px solid var(--mishima-color-border-thin);
	transition: background var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow var(--mishima-dur-base) var(--mishima-ease);
}

.l-fixHeader {
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: var(--mishima-shadow-s);
}

.l-header__inner {
	max-width: var(--mishima-container-max);
	padding-inline: var(--mishima-gutter);
}

/* SWELL の logo ラッパー（.l-header__logo 内に .c-headLogo が入る） */
.l-header__logo {
	display: flex;
	align-items: center;
}

/* --- ロゴ: Mt Fuji アイコン + wordmark + サブタイトル --------------- */
.c-headLogo {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	max-width: none;
}

/* Mt Fuji + 雪冠（雪の境界が自然なジグザグ）SVG を ::before で挿入 */
.c-headLogo::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 4 L28 27 L4 27 Z' fill='%232A4960'/><path d='M16 4 L19.5 12 L17.5 11 L16 13 L14.5 11 L12.5 12 Z' fill='%23FFFFFF'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* wordmark + サブタイトル を縦積みで表示 */
.c-headLogo__link.-txt {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05em;
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-text);
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-decoration: none;
}

/* 「三島くらしメディア」サブタイトルを ::after で */
.c-headLogo__link.-txt::after {
	content: "三島くらしメディア";
	display: block;
	font-family: var(--mishima-font-jp);
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--mishima-color-text-mute);
	letter-spacing: 0.06em;
	line-height: 1.2;
}

/* SWELL の独立 c-catchphrase 出力は重複防止で非表示 */
.c-catchphrase {
	display: none;
}

/* --- グローバルナビ ---------------------------------------------- */
.c-gnav {
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	font-size: var(--mishima-fz-s);
}

.c-gnav a {
	color: var(--mishima-color-text);
	text-decoration: none;
	transition: color var(--mishima-dur-fast) var(--mishima-ease);
}

.c-gnav > .menu-item > a {
	padding-inline: 1em;
	position: relative;
}

.c-gnav > .menu-item > a:hover {
	color: var(--mishima-color-blue);
}

.c-gnav > .menu-item.current-menu-item > a,
.c-gnav > .menu-item.current_page_item > a,
.c-gnav > .menu-item.current-menu-parent > a,
.c-gnav > .menu-item.-current > a {
	color: var(--mishima-color-blue);
	font-weight: 700;
}

.c-gnav .sub-menu {
	background: var(--mishima-color-bg);
	border: 1px solid var(--mishima-color-border-thin);
	border-radius: var(--mishima-radius-m);
	box-shadow: var(--mishima-shadow-m);
	padding: var(--mishima-space-xs) 0;
	margin-top: 0.5em;
}

.c-gnav .sub-menu a {
	padding: 0.7em 1.2em;
	font-size: var(--mishima-fz-s);
}

.c-gnav .sub-menu a:hover {
	background: var(--mishima-color-blue-pale);
	color: var(--mishima-color-navy);
}

/* --- 右側CTAボタン (ヘッダー高さに合わせてコンパクト化) -------------- */
/* ヘッダー高は SWELL 標準で約 70-80px。ボタンは縦中央寄せで高さ 36px 前後に収める。 */
.c-headerRightBtn,
.l-header__cta,
.p-spMenu__btnArea a,
.l-header__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 38px;
	padding: 0 1.1em;
	margin-left: 0.8em;
	background: var(--mishima-grad-cta);
	color: var(--mishima-color-text-invert);
	font-family: var(--mishima-font-jp);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var(--mishima-radius-pill);
	box-shadow: var(--mishima-shadow-s);
	transition: transform var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow var(--mishima-dur-base) var(--mishima-ease);
	white-space: nowrap;
	align-self: center;
}

.c-headerRightBtn::after,
.l-header__cta::after,
.p-spMenu__btnArea a::after,
.l-header__contact a::after {
	content: "→";
	font-family: var(--mishima-font-en);
	font-size: 12px;
}

.c-headerRightBtn:hover,
.l-header__cta:hover,
.p-spMenu__btnArea a:hover,
.l-header__contact a:hover {
	transform: translateY(-1px);
	box-shadow: var(--mishima-shadow-m);
	color: var(--mishima-color-text-invert);
}

/* SP: ヘッダーCTAは小さくしすぎないよう微調整 */
@media (max-width: 599px) {
	.c-headerRightBtn,
	.l-header__cta {
		height: 34px;
		padding: 0 0.9em;
		font-size: 12px;
		margin-left: 0.4em;
	}
}

/* --- SP メニューボタン --------------------------------------------- */
.l-header__menuBtn {
	color: var(--mishima-color-blue);
}

.l-header__spNav {
	background: var(--mishima-color-cream);
}

.l-header__spNav a {
	color: var(--mishima-color-text);
	font-family: var(--mishima-font-jp);
}

/* --- お知らせバー (使う場合のフォールバック) -------------------- */
.c-infoBar {
	background: var(--mishima-color-blue);
	color: var(--mishima-color-text-invert);
	font-size: var(--mishima-fz-xs);
	letter-spacing: var(--mishima-ls-wide);
}

.c-infoBar a {
	color: var(--mishima-color-text-invert);
	text-decoration: underline;
	text-underline-offset: 3px;
}