@charset "UTF-8";
/* ==========================================================================
   08-singular.css
   記事詳細ページ (single)・固定ページで使う SWELL クラスを調整。
   .l-article / .p-articleHead / .p-articleThumb / .p-breadcrumb /
   .p-toc / .p-authorBox 等。
   ========================================================================== */

/* ==========================================================================
   Contact Form 7 - お問い合わせフォーム (.m-cf7Form)
   /contact/ ページで [contact-form-7 id="103"] が出力する form template の
   wrapper クラス。レスポンシブ + 日本語ラベル前提のスタイル。
   ========================================================================== */
.m-cf7Form {
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	font-family: var(--mishima-font-jp);
}

.m-cf7Form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.m-cf7Form__row label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 14px;
	font-weight: 600;
	color: var(--pal-ink);
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0;
}

.m-cf7Form__req,
.m-cf7Form__optional {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.2em 0.6em;
	border-radius: var(--mishima-radius-pill);
	line-height: 1.3;
}

.m-cf7Form__req {
	background: var(--pal-accent-2);
	color: #fff;
}

.m-cf7Form__optional {
	background: var(--pal-line);
	color: var(--pal-ink-2);
}

/* CF7 が wrap する <span class="wpcf7-form-control-wrap"> も block 化 */
.m-cf7Form .wpcf7-form-control-wrap,
.m-cf7Form span.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.m-cf7Form input[type="text"],
.m-cf7Form input[type="email"],
.m-cf7Form input[type="url"],
.m-cf7Form input[type="tel"],
.m-cf7Form textarea,
.m-cf7Form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	font-size: 15px;
	font-family: var(--mishima-font-jp);
	color: var(--pal-ink);
	background: #fff;
	border: 1px solid var(--pal-line);
	border-radius: 8px;
	transition: border-color var(--mishima-dur-fast) var(--mishima-ease),
	            box-shadow var(--mishima-dur-fast) var(--mishima-ease);
}

.m-cf7Form input[type="text"]:focus,
.m-cf7Form input[type="email"]:focus,
.m-cf7Form input[type="url"]:focus,
.m-cf7Form input[type="tel"]:focus,
.m-cf7Form textarea:focus {
	outline: none;
	border-color: var(--pal-accent-2);
	box-shadow: 0 0 0 3px rgba(31, 90, 143, 0.15);
}

.m-cf7Form textarea {
	min-height: 180px;
	resize: vertical;
	line-height: 1.6;
}

.m-cf7Form ::placeholder {
	color: var(--pal-ink-3);
	opacity: 1;
}

.m-cf7Form__submitRow {
	display: flex;
	justify-content: center;
	margin-top: 0.5rem;
}

.m-cf7Form__btn,
.m-cf7Form input[type="submit"].m-cf7Form__btn,
.m-cf7Form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 0.95em 2em;
	background: var(--mishima-grad-cta);
	color: #fff;
	font-family: var(--mishima-font-jp);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	border: none;
	border-radius: var(--mishima-radius-pill);
	cursor: pointer;
	box-shadow: var(--mishima-shadow-s);
	transition: transform var(--mishima-dur-base) var(--mishima-ease),
	            box-shadow var(--mishima-dur-base) var(--mishima-ease);
	-webkit-appearance: none;
	appearance: none;
}

.m-cf7Form__btn:hover,
.m-cf7Form .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--mishima-shadow-m);
}

/* CF7 のバリデーション・送信メッセージ */
.wpcf7 .wpcf7-response-output {
	margin: 1.5em 0 0 !important;
	padding: 0.8em 1.2em;
	border-radius: 8px;
	font-size: 14px;
	font-family: var(--mishima-font-jp);
}

.wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: 12px;
	font-weight: 500;
	margin-top: 4px;
}

@media (max-width: 599px) {
	.m-cf7Form { gap: 1rem; }
	.m-cf7Form__btn,
	.m-cf7Form .wpcf7-submit {
		width: 100%;
		min-width: 0;
		padding: 0.85em 1.2em;
	}
}

/* ==========================================================================
   固定ページ全般 (about / writers / contact 等)
   ページ本文に余白を確保し、見出しを統一。
   ========================================================================== */
.page:not(.home) .post_content,
.page:not(.home) .l-mainContent__inner > .p-homeContent,
.page:not(.home) .p-articleBody {
	max-width: 920px;
	margin-inline: auto;
}

.page:not(.home) .post_content > h2,
.page:not(.home) .l-mainContent .post_content > h2 {
	font-family: var(--mishima-font-jp);
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	color: var(--pal-ink);
	border: none;
	background: none;
	padding: 0;
	margin: 2rem 0 0.8rem;
	border-left: 4px solid var(--pal-accent-2);
	padding-left: 0.7em;
	line-height: 1.4;
}

.page:not(.home) .post_content > h2::before,
.page:not(.home) .post_content > h2::after {
	content: none !important;
	display: none !important;
}

.page:not(.home) .post_content > h3 {
	font-family: var(--mishima-font-jp);
	font-size: 1.15rem;
	color: var(--pal-ink);
	border: none;
	background: none;
	padding: 0;
	margin: 1.5rem 0 0.5rem;
	border-bottom: 1px solid var(--pal-line);
	padding-bottom: 0.3em;
	line-height: 1.4;
}

.page:not(.home) .post_content > h3::before,
.page:not(.home) .post_content > h3::after {
	content: none !important;
	display: none !important;
}

.page:not(.home) .post_content > p {
	font-size: 15px;
	line-height: 1.85;
	color: var(--pal-ink-2);
	margin: 0 0 1em;
}


/* --- パンくず ---------------------------------------------------------- */
.p-breadcrumb {
	font-family: var(--mishima-font-en);
	font-size: var(--mishima-fz-xs);
	color: var(--mishima-color-text-sub);
	letter-spacing: var(--mishima-ls-wide);
	padding-block: var(--mishima-space-s);
}

.p-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.8em;
	list-style: none;
	padding: 0;
	margin: 0;
}

.p-breadcrumb__item a {
	color: var(--mishima-color-text-sub);
	text-decoration: none;
}

.p-breadcrumb__item a:hover {
	color: var(--mishima-color-water-deep);
	text-decoration: underline;
}

.p-breadcrumb__text {
	color: var(--mishima-color-text);
}

/* --- 記事トップ（タイトル + メタ） ------------------------------------- */
.l-topTitleArea {
	background: var(--mishima-color-cream);
	padding-block: var(--mishima-space-l);
}

.c-pageTitle {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-2xl);
	line-height: var(--mishima-lh-tight);
	letter-spacing: 0.03em;
	color: var(--mishima-color-text);
	max-width: var(--mishima-container-max);
	margin: 0 auto;
	padding-inline: var(--mishima-gutter);
}

.p-articleHead {
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--mishima-gutter);
	padding-block: var(--mishima-space-m);
}

.p-articleMetas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mishima-space-s);
	font-family: var(--mishima-font-en);
	font-size: var(--mishima-fz-xs);
	color: var(--mishima-color-text-mute);
	letter-spacing: var(--mishima-ls-wide);
}

.p-articleMetas .cat-link {
	background: var(--mishima-color-water);
	color: var(--mishima-color-text-invert);
	padding: 0.2em 0.9em;
	border-radius: var(--mishima-radius-pill);
	font-family: var(--mishima-font-jp);
	text-decoration: none;
}

/* --- アイキャッチ ----------------------------------------------------- */
.p-articleThumb {
	max-width: var(--mishima-container-max);
	margin: 0 auto var(--mishima-space-l);
	padding-inline: var(--mishima-gutter);
}

.p-articleThumb__img,
.p-articleThumb img {
	width: 100%;
	height: auto;
	border-radius: var(--mishima-radius-l);
	box-shadow: var(--mishima-shadow-m);
}

/* --- 記事本体 ---------------------------------------------------------- */
/* .l-article / .l-content 自体は幅制約を入れない。
   本文の読みやすい幅は .single .post_content 側で個別指定する。 */
.l-article,
.l-content {
	max-width: 100%;
	margin-inline: auto;
	padding-inline: 0;
}

.l-content {
	font-size: var(--mishima-fz-base);
	line-height: var(--mishima-lh-loose);
	color: var(--mishima-color-text);
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
}

.l-content > p {
	margin-block: 1.2em;
}

.l-content h2 {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-xl);
	line-height: var(--mishima-lh-tight);
	color: var(--mishima-color-text);
	margin: var(--mishima-space-l) 0 var(--mishima-space-s);
	padding: 0.3em 0 0.4em 0.8em;
	border-left: 4px solid var(--mishima-color-water);
	background: linear-gradient(90deg, var(--mishima-color-water-thin) 0%, transparent 60%);
	border-radius: 0 var(--mishima-radius-s) var(--mishima-radius-s) 0;
}

.l-content h3 {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-l);
	color: var(--mishima-color-water-deep);
	margin: var(--mishima-space-m) 0 var(--mishima-space-s);
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--mishima-color-border);
}

.l-content h4 {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-text);
	margin: var(--mishima-space-m) 0 0.6em;
}

.l-content a {
	color: var(--mishima-color-water-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--mishima-color-water-mid);
}

.l-content a:hover {
	text-decoration-color: var(--mishima-color-water-deep);
}

.l-content blockquote {
	border-left: 3px solid var(--mishima-color-fuji);
	background: var(--mishima-color-fuji-thin);
	padding: var(--mishima-space-s) var(--mishima-space-m);
	border-radius: 0 var(--mishima-radius-s) var(--mishima-radius-s) 0;
	color: var(--mishima-color-text-sub);
	font-style: normal;
}

.l-content ul,
.l-content ol {
	padding-left: 1.4em;
}

.l-content li {
	margin-block: 0.4em;
}

.l-content img {
	border-radius: var(--mishima-radius-m);
}

/* インラインコード／pre */
.l-content code {
	font-family: var(--mishima-font-en);
	font-size: 0.92em;
	background: var(--mishima-color-bg-alt);
	padding: 0.15em 0.45em;
	border-radius: 4px;
	color: var(--mishima-color-accent-deep);
}

.l-content pre {
	background: var(--mishima-color-water-deep);
	color: var(--mishima-color-text-invert);
	padding: var(--mishima-space-m);
	border-radius: var(--mishima-radius-m);
	overflow-x: auto;
}

/* --- 目次 -------------------------------------------------------------- */
.p-toc {
	background: var(--mishima-color-cream);
	border: 1px solid var(--mishima-color-border);
	border-radius: var(--mishima-radius-m);
	padding: var(--mishima-space-s) var(--mishima-space-m);
	margin-block: var(--mishima-space-m);
}

.p-toc__ttl {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-water-deep);
	margin: 0 0 var(--mishima-space-xs);
	letter-spacing: var(--mishima-ls-wide);
}

.p-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: mishima-toc;
}

.p-toc__list li {
	padding-block: 0.35em;
	position: relative;
}

.p-toc__link {
	color: var(--mishima-color-text);
	text-decoration: none;
	font-size: var(--mishima-fz-s);
	transition: color var(--mishima-dur-base) var(--mishima-ease);
}

.p-toc__link:hover,
.p-toc__link.current {
	color: var(--mishima-color-water-deep);
}

/* --- 記事下ブロック ---------------------------------------------------- */
.l-articleBottom {
	max-width: 860px;
	margin: var(--mishima-space-l) auto;
	padding-inline: var(--mishima-gutter);
}

.p-articleFoot {
	margin-block: var(--mishima-space-m);
}

/* --- 著者ボックス（mobile-first: 縦積み中央寄せ。600+ で横並び） ------- */
.p-authorBox {
	background: var(--mishima-color-cream);
	border: 1px solid var(--mishima-color-border-thin);
	border-radius: var(--mishima-radius-l);
	padding: var(--mishima-space-m);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mishima-space-s);
	margin-block: var(--mishima-space-l);
	text-align: center;
}

.p-authorBox__l {
	justify-self: center;
}

.p-authorBox__l img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--mishima-shadow-s);
	display: block;
}

.p-authorBox__name {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-text);
	margin: 0 0 0.3em;
}

.p-authorBox__desc {
	font-size: var(--mishima-fz-s);
	color: var(--mishima-color-text-sub);
	line-height: var(--mishima-lh-base);
	margin: 0;
}

/* --- サイドバーのプロフィール ----------------------------------------- */
.p-profileBox {
	background: var(--mishima-color-bg);
	border: 1px solid var(--mishima-color-border);
	border-radius: var(--mishima-radius-m);
	padding: var(--mishima-space-m);
	text-align: center;
}

/* --- サイドバーのウィジェット ----------------------------------------- */
.l-sidebar .c-widget {
	margin-bottom: var(--mishima-space-l);
}

.l-sidebar .c-widget__title {
	font-family: var(--mishima-font-jp);
	font-weight: 700;
	font-size: var(--mishima-fz-m);
	color: var(--mishima-color-text);
	margin: 0 0 var(--mishima-space-s);
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--mishima-color-water);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   single 記事ページ専用調整
   - サイドバーは functions.php で is_singular('post') 時に非表示済み
   - フローティング SNS シェアボタンを非表示
   - サイドバー検索 widget も保険として非表示
   - 本文の最大幅を確保
   ========================================================================== */

/* 左側のフローティング SNS シェアボタン (.c-shareBtns.-fix) を非表示 */
.single .c-shareBtns.-fix,
.single .p-fixSnsBtns,
body.single .c-shareBtns.-fix,
body.single .p-fixSnsBtns {
	display: none !important;
}

/* 右側のサイドバー全般を保険として非表示 */
.single .l-sidebar,
.single #sidebar,
body.single .l-sidebar,
body.single #sidebar {
	display: none !important;
}

/* sidebar-on のレイアウト幅を解除 (sidebar 非表示時に main を全幅化) */
.single .l-mainContent.l-article,
.single.-sidebar-on .l-mainContent {
	max-width: 100% !important;
	width: 100% !important;
}

/* PC では container 幅を確保し、本文だけ読みやすい幅に */
.single .l-mainContent__inner {
	max-width: var(--mishima-container-max, 1180px);
	margin-inline: auto;
	padding-inline: var(--mishima-gutter);
	box-sizing: border-box;
	width: 100%;
}

/* 記事ヘッダ: 縦並び日付を解除して水平 metas に統一 */
.single .p-articleHead.c-postTitle {
	display: block;
	max-width: 100%;
	margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
	padding: 0;
}

.single .c-postTitle__ttl {
	font-family: var(--mishima-font-jp);
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--pal-ink);
	margin: 0 0 0.6em;
	letter-spacing: 0.02em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* SWELL の vertical 日付スタック (__y / __md) を非表示 */
.single .c-postTitle__date {
	display: none !important;
}

/* p-articleMetas の整形 */
.single .p-articleMetas.-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-family: var(--mishima-font-jp);
	font-size: 13px;
	color: var(--pal-ink-2);
}

/* カテゴリバッジ: 空っぽの濃紺ボックスを文字付きフラットチップに */
.single .p-articleMetas .c-categoryList {
	display: inline-flex;
	gap: 0.4em;
	flex-wrap: wrap;
}

.single .p-articleMetas .c-categoryList__link {
	display: inline-block;
	padding: 0.32em 0.95em;
	background: var(--pal-accent-2);
	color: #fff;
	font-family: var(--mishima-font-jp);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--mishima-radius-pill);
	text-decoration: none;
	letter-spacing: 0.04em;
	box-shadow: none;
	background-image: none;
}

.single .p-articleMetas .c-categoryList__link:hover {
	background: var(--pal-ink);
	color: #fff;
}

/* 公開日・更新日を整える */
.single .p-articleMetas__times.c-postTimes {
	display: inline-flex;
	gap: 0.8em;
	font-size: 12px;
	color: var(--pal-ink-2);
	letter-spacing: 0.04em;
	font-family: var(--mishima-font-en);
}

/* 記事ヘッダ + 本文を 820px の中央寄せカラムに統一 (sidebar なし時の読みやすさ重視) */
.single .p-articleHead.c-postTitle,
.single .p-articleMetas.-top,
.single .post_content,
.single .p-articleThumb {
	max-width: 820px;
	margin-inline: auto;
}

.single .post_content {
	font-family: var(--mishima-font-jp);
	font-size: 16px;
	line-height: 1.85;
	color: var(--pal-ink);
}

/* PC で読みやすい幅、タブレットで広げる */
@media (min-width: 1024px) {
	.single .p-articleHead.c-postTitle,
	.single .p-articleMetas.-top,
	.single .post_content,
	.single .p-articleThumb {
		max-width: 860px;
	}
	.single .post_content {
		font-size: 17px;
		line-height: 1.9;
	}
}

.single .post_content > p {
	margin: 0 0 1.2em;
}

/* SWELL 親テーマの -sidebar-on を強制的に -sidebar-off と同じ振る舞いに */
.single.-sidebar-on .l-content,
body.single.-sidebar-on .l-mainContent {
	max-width: 100% !important;
	width: 100% !important;
}

/* ==========================================================================
   この記事を書いた人 (.p-authorBox)
   SWELL デフォは padding:5vw で巨大、avatar 中央、本文と SNS 別段。
   情報量が少ない場合に間延びするので、横並びコンパクトに整える。
   ========================================================================== */
.single .l-articleBottom__section.-author {
	margin-block: clamp(2rem, 4vw, 3rem) 0;
}

.single .l-articleBottom__title.c-secTitle {
	font-family: var(--mishima-font-jp);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 700;
	color: var(--pal-ink);
	margin: 0 0 1rem;
	padding: 0 0 0 0.7em;
	border-left: 3px solid var(--pal-accent-2);
	border-bottom: none;
	line-height: 1.4;
}

.single .l-articleBottom__title.c-secTitle::before,
.single .l-articleBottom__title.c-secTitle::after {
	content: none !important;
	display: none !important;
}

.single .p-authorBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem) !important;
	background: var(--pal-surface);
	border: 1px solid var(--pal-line) !important;
	border-radius: var(--mishima-radius-l) !important;
}

.single .p-authorBox__l {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	margin: 0 !important;
	text-align: center;
	flex: 0 0 auto;
}

.single .p-authorBox .avatar {
	width: 64px !important;
	height: 64px !important;
	border-width: 1px !important;
	margin: 0;
}

.single .p-authorBox__name {
	display: block;
	font-family: var(--mishima-font-jp);
	font-size: 13px;
	font-weight: 600;
	color: var(--pal-ink);
	margin-top: 0.4em;
	letter-spacing: 0.02em;
}

.single .p-authorBox__r {
	flex: 1;
	min-width: 0;
	width: auto !important;
	font-family: var(--mishima-font-jp);
	font-size: 14px;
	color: var(--pal-ink-2);
	line-height: 1.7;
}

.single .p-authorBox__desc {
	width: 100%;
}

.single .p-authorBox__desc:empty {
	display: none;
}

/* SNS アイコンリスト: 著者プロフが空のときは右寄せ・小さめに */
.single .p-authorBox__iconList {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.single .p-authorBox__iconList .c-iconList__link {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--pal-line);
	border-radius: 50%;
	color: var(--pal-ink-2);
	font-size: 14px;
	transition: background var(--mishima-dur-fast) var(--mishima-ease),
	            color var(--mishima-dur-fast) var(--mishima-ease);
}

.single .p-authorBox__iconList .c-iconList__link:hover {
	background: var(--pal-accent-2);
	color: #fff;
}

/* 右ブロックの内容が「URLアイコン1個だけ」の場合に左寄せのまま見せる
   (description が空でアイコンしかない時にぽつんと出る対策) */
.single .p-authorBox__r > *:first-child:last-child.p-authorBox__iconList {
	margin-left: auto !important;
}

@media (max-width: 599px) {
	.single .p-authorBox {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.single .p-authorBox__r {
		width: 100% !important;
		text-align: center;
	}
	.single .p-authorBox__iconList {
		justify-content: center;
	}
}

@media (max-width: 599px) {
	.single .l-mainContent__inner { padding-inline: 16px; }
	.single .p-articleMetas.-top { font-size: 12px; }
}