@charset "UTF-8";
/* ============================================================
   SWELL CHILD (COMICAL) - theme.css
   全ページ共通の上書き。SWELL標準のヘッダー・フッターを
   design/Main.dc.html の見た目（案B）に寄せます。

   注意:
   SWELLのマークアップに依存する部分は、クラス名が変わっても
   なるべく崩れないよう、複数のセレクタや属性セレクタで
   重ねがけしています。それでも合わない部分は
   docs/CUSTOMIZER.md の手順でカスタマイザー側から設定してください。
   ============================================================ */

:root {
	--cmcl-ink: #2b2f7a;
	--cmcl-ink-deep: #1e2160;
	--cmcl-pink: #ff6fb0;
	--cmcl-blue: #7fa6ff;
	--cmcl-link: #c4327b;
	--cmcl-link-hover: #b83a75;
	--cmcl-footer-text: #c6cbf0;
}

/* ------------------------------------------------------------
   1. 本文の基本
   ------------------------------------------------------------ */
body {
	font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: var(--cmcl-ink);
}

/* 本文リンク色（#c4327b は本文サイズでコントラストAA） */
.post_content a:not(.cmcl-btn):not([class*="btn"]),
.l-content a:not(.cmcl-btn):not([class*="btn"]):not([class*="gnav"]):not([class*="logo"]) {
	color: var(--cmcl-link);
}

.post_content a:not(.cmcl-btn):hover,
.l-content a:not(.cmcl-btn):hover {
	color: var(--cmcl-link-hover);
}

/* キーボードフォーカスを必ず見えるように */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--cmcl-link);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   2. トップページを全幅で使う
   ------------------------------------------------------------
   SWELL の #content.l-container は max-width 1296px ＋ 左右padding
   なので、そのままだとトップの見開きが1200pxに縮みます。
   トップページ（body.cmcl-is-front）だけ枠を外して全幅にします。
   ------------------------------------------------------------ */
.cmcl-is-front #content,
.cmcl-is-front #content.l-content,
.cmcl-is-front #content.l-container {
	max-width: none;
	padding: 0;
}

.cmcl-is-front #content > .cmcl-front {
	width: 100%;
}

/* SWELL の .l-content は下に余白（96px）を持っていて、
   トップの最後のコマとフッターの間に白い帯ができます。
   フッター手前の余白は CONTACT セクションの下パディング（64px）が受け持つので、
   トップページでは余白を消します。 */
.cmcl-is-front .l-content,
.cmcl-is-front #content.l-content {
	margin-bottom: 0;
}

/* トップページはサイドバーを使いません。
   中身が空でも SWELL の余白（SPで54px）が残り、
   最後のコマとフッターの間に白い帯ができるので消します。 */
.cmcl-is-front #content > .l-sidebar {
	display: none;
}

/* ------------------------------------------------------------
   3. ヘッダー（ロゴ左・ナビ右・下に濃紺の太線）
   ------------------------------------------------------------
   SWELL 2.17〜2.19 の実際のマークアップ:
     header#header.l-header
       > .l-header__bar            … 上部の細いバー（カスタマイザーで非表示推奨）
       > .l-header__inner.l-container
           > .l-header__logo > .c-headLogo > .c-headLogo__link（画像なら .c-headLogo__img）
           > nav#gnav.l-header__gnav.c-gnavWrap > ul.c-gnav > li.menu-item > a > span.ttl
           > .w-header（ヘッダー内ウィジェット・PCのみ）
           > .l-header__customBtn / .l-header__menuBtn（SPのボタン）
   クラス名が変わっても崩れにくいよう、旧名（.c-headerLogo 等）や
   属性セレクタも併記しています。
   ------------------------------------------------------------ */
#header,
.l-header,
.l-header__inner {
	background: #ffffff;
}

#header,
.l-header {
	border-bottom: 4px solid var(--cmcl-ink);
	box-shadow: none;
}

.l-header__inner.l-container,
#header .l-header__inner {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ------------------------------------------------------------
   3-1. トップページの透過ヘッダーを打ち消す（保険）
   ------------------------------------------------------------
   functions.php の cmcl_disable_top_transparent_header() で
   そもそも `-transparent` が付かないようにしていますが、
   親テーマのバージョン差などでフックが効かなかった場合に備えて
   CSS でも打ち消します（SWELL 側は !important を使う箇所があるため、
   こちらも同じ強さで上書きしています）。
   ------------------------------------------------------------ */
.cmcl-is-front .l-header.-transparent,
.cmcl-is-front .l-header.-transparent[data-spfix="0"],
.cmcl-is-front .l-header.-transparent[data-spfix="1"] {
	position: relative !important;
	top: auto;
	left: auto;
	background: #ffffff !important;
	transition: none;
}

.cmcl-is-front .l-header.-transparent .l-header__inner,
.cmcl-is-front .l-header.-transparent[data-spfix="0"] .l-header__inner {
	max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
	color: var(--cmcl-ink);
}

.cmcl-is-front .l-header.-transparent .c-gnav > li > a::after {
	background: var(--cmcl-ink);
}

/* 透過時ロゴ（.-top）ではなく通常ロゴ（.-common）を出す */
.cmcl-is-front .l-header.-transparent .c-headLogo__img.-common,
.cmcl-is-front .l-header.-transparent[data-spfix="0"] .c-headLogo__img.-common {
	display: block;
}

.cmcl-is-front .l-header.-transparent .c-headLogo__img.-top {
	display: none;
}

/* 透過ヘッダー用に隠されるSPナビを元に戻す */
.cmcl-is-front .l-header.-transparent .l-header__spNav {
	opacity: 1;
	visibility: visible;
}

/* ロゴ（左寄せ・高さを揃える）
   SWELL側に .-txt .c-headLogo__link 等があるため、
   .l-header を前置して詳細度で勝たせています。 */
.l-header__logo {
	margin-right: auto;
}

.l-header .c-headLogo,
.l-header .c-headerLogo,
.l-header [class*="headLogo"] {
	color: var(--cmcl-ink);
}

.l-header .c-headLogo__link,
.l-header .c-headerLogo__link,
.l-header [class*="headLogo"] a,
.l-header .-txt .c-headLogo__link {
	color: var(--cmcl-ink);
	font-weight: 900;
	text-decoration: none;
}

/* ロゴの大きさは SWELL のカスタマイザー（ヘッダー > ロゴ > 画像サイズ）で決めます。
   SWELL は `--logo_size_pc / --logo_size_sp / --logo_size_pcfix` を CSS 変数にして
   `.c-headLogo{height:var(--logo_size_*)}` ＋ `.c-headLogo__img{height:100%}` で効かせています。
   1.2.1 までは子テーマ側で `max-height:49px` を掛けていたため、
   カスタマイザーで大きくしても 49px 止まりでした（1.2.2 で撤去）。
   ここでは高さに触れず、横幅だけ「縦横比のまま」に保ちます。 */
.l-header .c-headLogo__img,
.l-header .c-headLogo img,
.l-header .c-headerLogo img,
.l-header [class*="headLogo"] img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* SWELL は画像ロゴのリンクに `padding:10px 0` を入れているため、
   カスタマイザーで 100px にしても実際の絵は 80px にしかなりません。
   「設定した数値＝ロゴの高さ」になるよう、この余白は持たせません
   （上下の余白は .l-header__logo 側の padding が受け持ちます）。 */
.l-header .-img .c-headLogo__link,
.l-header .c-headLogo__link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
}

/* ロゴを大きくしてもヘッダーが片寄らないように、縦位置を中央で揃えます */
.l-header__inner.l-container,
#header .l-header__inner {
	align-items: center;
}

.l-header .c-headLogo {
	display: flex;
	align-items: center;
	/* SWELL の既定は 400px。ロゴの横長比（約3.7:1）だと
	   画像サイズ 110px で横 407px になり、そこで頭打ちになってしまうため少し広げます。 */
	max-width: min(440px, 46%);
}

/* ロゴ 100〜120px でもナビが折り返さないよう、
   ロゴの右余白とナビ項目の左右余白を少し詰めます。 */
@media (min-width: 960px) {
	.l-header .l-header__logo {
		margin-right: 16px;
		padding: 12px 0;
	}

	.l-header .c-gnav > li > a {
		padding-left: 14px;
		padding-right: 14px;
		white-space: nowrap;
	}
}

/* スマホでもロゴ（logo_size_sp 40〜80px）が収まるようにします */
@media (max-width: 959px) {
	.l-header .c-headLogo {
		max-width: min(280px, 60%);
	}

	.l-header .l-header__logo {
		padding: 8px 0;
	}
}

/* グローバルナビ（右寄せ・太字） */
.l-header__gnav,
.c-gnavWrap {
	margin-left: auto;
}

/* SWELL側に .c-gnav > .menu-item > a { color: inherit } があるため、
   .l-header を前置して詳細度で勝たせています。 */
.l-header .c-gnav > li > a,
.l-header .c-gnav > .menu-item > a,
.l-header .c-gnav > li > a .ttl,
.l-header nav a {
	color: var(--cmcl-ink);
	font-size: 16px;
	font-weight: 700;
}

.l-header .c-gnav > li > a:hover,
.l-header .c-gnav > .menu-item > a:hover,
.l-header .c-gnav > li > a:hover .ttl,
.l-header nav a:hover {
	color: var(--cmcl-link-hover);
}

/* SWELLのナビ下線エフェクト・サブメニューを濃紺に */
.l-header .c-gnav > li > a::after,
.l-header .c-gnav .sub-menu {
	background-color: var(--cmcl-ink);
}

.l-header .c-gnav .sub-menu a,
.l-header .c-gnav .sub-menu a .ttl {
	color: #ffffff;
}

/* ヘッダーのContactボタン
   ・グローバルメニューの「お問い合わせ」に CSSクラス cmcl-nav-cta を付けるか、
   ・ヘッダー内ウィジェット（.w-header）にリンクを置くか、
   どちらでもピル型ボタンになります（docs/CUSTOMIZER.md 参照）。 */
.l-header .c-gnav > li.cmcl-nav-cta > a,
.l-header .w-header a,
.l-header [class*="headerButton"] a,
.l-header .c-headerButton__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	background: var(--cmcl-blue);
	border: 3px solid var(--cmcl-ink);
	border-radius: 999px;
	box-shadow: 4px 4px 0 var(--cmcl-ink);
	color: var(--cmcl-ink-deep);
	font-size: 16px;
	font-weight: 900;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.l-header .c-gnav > li.cmcl-nav-cta > a .ttl {
	color: var(--cmcl-ink-deep);
	font-weight: 900;
}

.l-header .c-gnav > li.cmcl-nav-cta > a:hover,
.l-header .w-header a:hover,
.l-header [class*="headerButton"] a:hover,
.l-header .c-headerButton__link:hover {
	color: var(--cmcl-ink-deep);
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--cmcl-ink);
}

.l-header .c-gnav > li.cmcl-nav-cta > a::after {
	display: none;
}

/* スマホのボタン・メニュー */
.l-header__menuBtn .c-iconBtn,
.l-header__customBtn .c-iconBtn,
.l-header .c-iconBtn {
	color: var(--cmcl-ink);
}

.p-spMenu a,
.p-spMenu .ttl {
	font-weight: 700;
}

/* SWELLの追尾ボタンもピル型に寄せる */
.p-fixBtnWrap .c-fixBtn {
	border-radius: 999px;
}

/* ------------------------------------------------------------
   4. フッター（濃紺・ロゴは白い台紙にのせる）
   ------------------------------------------------------------
   SWELL の実際のマークアップ:
     footer#footer.l-footer > .l-footer__inner
        > .w-footer（フッターウィジェット。ロゴ画像はここに置く）
        > .l-footer__foot > .l-container
             > ul.l-footer__nav（フッターメニュー）
             > p.copyright
   ------------------------------------------------------------ */
#footer,
.l-footer,
.l-footer__inner,
.l-footer__foot {
	background: var(--cmcl-ink-deep);
	color: #ffffff;
}

#footer,
.l-footer {
	border-top: 5px solid var(--cmcl-ink);
}

.l-footer,
.l-footer a,
.l-footer p,
.l-footer li,
.l-footer .c-widget__title {
	color: #ffffff;
}

.l-footer a:hover {
	color: var(--cmcl-blue);
}

/* フッターロゴ（フッターウィジェットに置いた画像）を白い台紙にのせる */
.l-footer .cmcl-footer-logo img,
.l-footer .c-footerLogo img,
.l-footer [class*="footerLogo"] img {
	width: auto;
	max-height: 41px;
	height: auto;
}

.l-footer .cmcl-footer-logo,
.l-footer .c-footerLogo,
.l-footer [class*="footerLogo"] {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	background: #ffffff;
	border-radius: 14px;
}

/* フッターの余白（SWELLの初期値は0なので、メニューと©が上の境界線に
   くっついて見えます。上40px / 下32px、メニューと©の間は16pxあけます） */
.l-footer .l-footer__foot > .l-container,
.l-footer .l-footer__foot .l-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 40px;
	padding-bottom: 32px;
}

/* フッターメニュー（タップ領域 44px を確保） */
.l-footer .l-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.l-footer .l-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border: 0 !important; /* SWELLは項目間に白い縦線（border-left/right）を引く。モックには無いので消す */
	font-size: 16px;
	font-weight: 700;
}

.l-footer .l-footer__nav li:first-child a {
	border-left: 0 !important;
}

/* コピーライトは少し薄い青白 */
.l-footer .copyright,
.l-footer .c-copyright,
.l-footer__copyright {
	color: var(--cmcl-footer-text);
	font-size: 14px;
	line-height: 1.7;
}

/* スマホはフッターの余白を少し詰める */
@media screen and (max-width: 959px) {
	.l-footer .l-footer__foot > .l-container,
	.l-footer .l-footer__foot .l-container {
		gap: 14px;
		padding-top: 32px;
		padding-bottom: 24px;
	}

	/* フッターメニューは縦1列（中央ぞろえ）。
	   横並びのままだと4項目が2行に折り返して
	   「TOP　　会社概要」／「プライバシーポリシー　　お問い合わせ」のように
	   行ごとに穴の位置がずれます。項目数が5〜6に増えても崩れないよう、
	   1項目1行・高さ44pxの縦リストにします。 */
	.l-footer .l-footer__nav {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.l-footer .l-footer__nav > li {
		display: block;
		width: 100%;
		margin: 0;
	}

	.l-footer .l-footer__nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		padding-right: 0;
		padding-left: 0;
		text-align: center;
	}
}

/* ------------------------------------------------------------
   5. 下層ページ（見出し帯＋コマ枠）
   ------------------------------------------------------------
   会社概要（/office/）・お問い合わせ（/contact/）・お知らせ一覧（/news/）・
   個別記事など、トップページ以外のページをトップと同じ「漫画の見開き」の
   見た目に寄せます。テンプレートの差し替えはせず、SWELL が出すマークアップを
   そのまま使っています。

   SWELL の実際のマークアップ:
     #top_title_area.l-topTitleArea           … タイトル帯（ヘッダー直下）
       > img.l-topTitleArea__img              … 背景画像（未設定でも no_img.png が入る）
       > .l-topTitleArea__body.l-container
           > h1.c-pageTitle                   … ページタイトル
     #breadcrumb.p-breadcrumb                 … ぱんくず
     #content.l-content.l-container
       > main#main_content.l-mainContent.l-article
           > .l-mainContent__inner
               > .post_content                … 本文（固定ページ・個別記事）
               > .p-homeContent               … 記事一覧（お知らせ）

   目印のクラスは functions.php の cmcl_body_class() が #body_wrap に付けます
   （SWELL は body ではなく #body_wrap に body_class を出力します）。
     .cmcl-has-band      … この節のレイアウトを使うページ
     .cmcl-page-<slug>   … ページごとの微調整用（例: .cmcl-page-office）
   帯の小さなラベル（COMPANY / CONTACT）は、cmcl_page_eyebrow_css() が
   `#body_wrap{--cmcl-eyebrow:"COMPANY"}` を出し、下の ::before が描きます。
   変数が無いときは content: none になり、チップそのものが作られません。
   ------------------------------------------------------------ */

.cmcl-has-band {
	--cmcl-pink-pale: #fff6fa;
	--cmcl-pink-soft: #ffe7f1;
	--cmcl-blue-soft: #e4ecff;
	--cmcl-rule: #b9bde6;
	--cmcl-red: #c8102e;
	--cmcl-bw: 6px;
	--cmcl-page-w: 1000px;
	--cmcl-page-gutter: 24px;

	background-color: var(--cmcl-pink-pale);
	background-image: radial-gradient(rgba(255, 111, 176, 0.32) 1.6px, transparent 1.7px);
	background-size: 10px 10px;
}

/* ヘッダー・フッターは自前の背景を持っているので、網点は本文だけに見えます。 */
.cmcl-has-band #content,
.cmcl-has-band #top_title_area,
.cmcl-has-band #breadcrumb {
	background-color: transparent;
}

/* 5-1. タイトル帯 ------------------------------------------- */
.cmcl-has-band #top_title_area.l-topTitleArea {
	position: relative;
	display: block;
	width: min(var(--cmcl-page-w), 100% - var(--cmcl-page-gutter) * 2);
	min-height: 0;
	margin: 40px auto 0;
	padding: 0;
	background: var(--cmcl-ink);
	border: var(--cmcl-bw) solid var(--cmcl-ink);
	box-shadow: 8px 8px 0 var(--cmcl-pink);
	overflow: hidden;
}

/* 背景画像（未設定でも SWELL が no_img.png を入れる）と暗幕フィルターは使いません */
.cmcl-has-band .l-topTitleArea__img {
	display: none;
}

.cmcl-has-band .l-topTitleArea.c-filterLayer::before {
	content: none;
}

/* 網点（トップの帯と同じ青ドット） */
.cmcl-has-band #top_title_area.l-topTitleArea::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(var(--cmcl-blue) 1.6px, transparent 1.7px);
	background-size: 8px 8px;
	opacity: 0.18;
	pointer-events: none;
}

.cmcl-has-band .l-topTitleArea__body.l-container {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: none;
	padding: 26px 30px;
	color: #ffffff;
	text-shadow: none;
}

/* 小さなラベル（COMPANY / CONTACT）。
   --cmcl-eyebrow が無いページでは content: none になり、要素ごと出ません。 */
.cmcl-has-band .l-topTitleArea__body.l-container::before {
	content: var(--cmcl-eyebrow, none);
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 6px 18px;
	background: #ffffff;
	color: var(--cmcl-ink);
	border-radius: 999px;
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1.6;
}

.cmcl-has-band .l-topTitleArea__body .c-pageTitle {
	margin: 0;
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	color: #ffffff;
	-webkit-text-stroke: 1px #ffffff;
	text-shadow: 4px 4px 0 var(--cmcl-pink);
}

.cmcl-has-band .l-topTitleArea__body .c-pageTitle__inner {
	padding-top: 0;
}

.cmcl-has-band .l-topTitleArea__body .c-pageTitle__subTitle {
	display: block;
	margin-left: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.08em;
	-webkit-text-stroke: 0;
	text-shadow: none;
}

/* タイトルがコンテンツ内に出る設定のとき（SWELL の「タイトル位置＝コンテンツ内」）も
   同じ帯に見えるようにします。固定ページ・一覧は PHP 側で必ず上に出していますが、
   個別記事は SWELL の設定に従うため、両方に効かせています。 */
.cmcl-has-band .l-mainContent__inner > .c-pageTitle,
.cmcl-has-band .l-mainContent__inner > .c-postTitle {
	margin: 0 0 24px;
	padding: 22px 26px;
	background: var(--cmcl-ink);
	border: var(--cmcl-bw) solid var(--cmcl-ink);
	box-shadow: 8px 8px 0 var(--cmcl-pink);
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #ffffff;
	text-shadow: 4px 4px 0 var(--cmcl-pink);
}

/* 個別記事のタイトルは `.p-articleHead.c-postTitle` に日付バッジが同居します。
   SWELL の既定は絶対配置ぎみでタイトルに重なるため、横並びに組み直します。 */
.cmcl-has-band .l-mainContent__inner > .c-postTitle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
}

.cmcl-has-band .l-mainContent__inner > .c-postTitle .c-postTitle__date {
	position: static;
	order: -1;
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 12px;
	background: #ffffff;
	border: 0;
	border-radius: 10px;
	color: var(--cmcl-ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 1;
	text-shadow: none;
}

.cmcl-has-band .l-mainContent__inner > .c-postTitle .c-postTitle__ttl {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* 5-2. ぱんくず ---------------------------------------------- */
.cmcl-has-band #breadcrumb.p-breadcrumb {
	background: none;
	box-shadow: none;
	padding: 10px 0 0;
}

.cmcl-has-band .p-breadcrumb__list {
	width: min(var(--cmcl-page-w), 100% - var(--cmcl-page-gutter) * 2);
	max-width: none;
	margin-inline: auto;
	padding: 0;
	font-size: 12px;
	color: var(--cmcl-ink);
}

/* 5-3. コンテンツ領域 ---------------------------------------- */
.cmcl-has-band #content.l-content.l-container,
.cmcl-has-band #content.l-container {
	width: min(var(--cmcl-page-w), 100% - var(--cmcl-page-gutter) * 2);
	max-width: none;
	margin-inline: auto;
	margin-bottom: 64px;
	padding: 22px 0 0;
}

/* サイドバーは使いません（PHP 側でも出さないようにしています。これは保険） */
.cmcl-has-band #content > .l-sidebar {
	display: none;
}

.cmcl-has-band .l-mainContent,
.cmcl-has-band.-sidebar-on .l-mainContent {
	width: 100%;
	max-width: 100%;
}

/* 本文を1つのコマに見立てる */
.cmcl-has-band .l-mainContent__inner > .post_content,
.cmcl-has-band .l-mainContent__inner > .p-homeContent {
	margin: 0;
	padding: 44px 48px;
	background: #ffffff;
	border: var(--cmcl-bw) solid var(--cmcl-ink);
	box-shadow: 8px 8px 0 var(--cmcl-ink);
}

.cmcl-has-band .l-mainContent__inner > .p-homeContent {
	margin-top: 0;
}

.cmcl-has-band .post_content {
	color: var(--cmcl-ink);
	font-size: 16px;
	line-height: 1.8;
}

.cmcl-has-band .post_content p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--cmcl-ink);
}

/* 見出し（トップの帯・見出しと同じトーン） */
.cmcl-has-band .post_content h2 {
	margin: 44px 0 20px;
	padding: 0 0 10px;
	background: none;
	border: 0;
	border-bottom: 5px solid var(--cmcl-pink);
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: var(--cmcl-ink);
}

.cmcl-has-band .post_content h2::before,
.cmcl-has-band .post_content h2::after {
	content: none;
}

.cmcl-has-band .post_content h3 {
	margin: 36px 0 16px;
	padding: 2px 0 2px 16px;
	background: none;
	border: 0;
	border-left: 6px solid var(--cmcl-blue);
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--cmcl-ink);
}

.cmcl-has-band .post_content h3::before,
.cmcl-has-band .post_content h3::after {
	content: none;
}

.cmcl-has-band .post_content h4 {
	margin: 28px 0 12px;
	font-size: 17px;
	font-weight: 900;
	color: var(--cmcl-ink);
}

.cmcl-has-band .post_content ul,
.cmcl-has-band .post_content ol {
	margin: 16px 0;
	padding-left: 1.4em;
	font-size: 16px;
	line-height: 1.8;
}

.cmcl-has-band .post_content li {
	margin-bottom: 6px;
}

.cmcl-has-band .post_content dl {
	margin: 16px 0;
}

.cmcl-has-band .post_content dt {
	margin-top: 12px;
	font-weight: 900;
	color: var(--cmcl-ink);
}

.cmcl-has-band .post_content dd {
	margin: 4px 0 0;
	padding-left: 1em;
}

/* 5-4. 表（会社概要） ---------------------------------------- */
.cmcl-has-band .post_content .wp-block-table,
.cmcl-has-band .post_content figure.wp-block-table {
	margin: 0;
	overflow-x: auto;
}

.cmcl-has-band .post_content table {
	width: 100%;
	border-collapse: collapse;
	border: 3px solid var(--cmcl-ink);
	line-height: 1.9;
}

.cmcl-has-band .post_content table th,
.cmcl-has-band .post_content table td {
	padding: 16px 24px;
	border: 1px solid var(--cmcl-ink);
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	color: var(--cmcl-ink);
	word-break: break-word;
}

.cmcl-has-band .post_content table th {
	background: var(--cmcl-pink-pale);
	font-weight: 900;
}

.cmcl-has-band .post_content table td {
	background: #ffffff;
	font-weight: 400;
}

/* 会社概要の表は左の列が見出し（th ではなく td で作られています）。
   トップページの会社概要表と同じ「薄いピンクの見出し列」にします。 */
.cmcl-page-office .post_content table td:first-child {
	width: 34%;
	background: var(--cmcl-pink-pale);
	font-weight: 900;
}

/* 会社概要の表は「PCのみ表示」で作られているため、
   そのままではスマホで本文が空になります（SWELL の .pc_only は
   959px 以下で display:none!important）。このページに限って表示を戻します。
   ※ ブロックの「PCのみ表示」を外すのが本来の直し方です（docs/CUSTOMIZER.md）。 */
.cmcl-page-office .post_content .wp-block-table.pc_only {
	display: block !important;
}

/* 中身が空の段落（ブロックエディタで残りがちな空行）は詰めます */
.cmcl-has-band .post_content p.wp-block-paragraph:empty {
	display: none;
}

/* 5-5. お問い合わせ（Contact Form 7） ------------------------ */
/* フォーム（または表）の前に置く吹き出し。
   ・ページ本文のいちばん上に段落を書くと、その段落が吹き出しになります
     （functions.php の cmcl_lead_paragraph_bubble()）。
   ・段落が無いお問い合わせページだけ、カスタマイザーの一文が入ります
     （functions.php の cmcl_contact_intro()）。 */
.cmcl-has-band .cmcl-page-bubble {
	position: relative;
	margin: 0 0 40px;
	padding: 22px 26px;
	background: var(--cmcl-blue-soft);
	border: 5px solid var(--cmcl-ink);
	border-radius: 26px;
}

.cmcl-has-band .cmcl-page-bubble::before {
	content: "";
	position: absolute;
	left: 42px;
	bottom: -26px;
	width: 0;
	height: 0;
	border-top: 26px solid var(--cmcl-ink);
	border-right: 22px solid transparent;
}

.cmcl-has-band .cmcl-page-bubble::after {
	content: "";
	position: absolute;
	left: 49px;
	bottom: -16px;
	width: 0;
	height: 0;
	border-top: 18px solid var(--cmcl-blue-soft);
	border-right: 15px solid transparent;
}

.cmcl-has-band .cmcl-page-bubble p {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--cmcl-ink);
}

/* 段落を2つ以上書いたときだけ行間をあけます */
.cmcl-has-band .cmcl-page-bubble p + p {
	margin-top: 14px;
}

/* 吹き出しの中のリンクは、本文のリンクと同じ見た目に揃えます */
.cmcl-has-band .cmcl-page-bubble a {
	color: var(--cmcl-link);
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmcl-has-band .cmcl-page-bubble a:hover {
	color: var(--cmcl-link-hover);
}

.cmcl-has-band .wpcf7 {
	color: var(--cmcl-ink);
}

.cmcl-has-band .wpcf7-form > p {
	margin: 0 0 26px;
}

.cmcl-has-band .wpcf7-form label {
	display: block;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.8;
	color: var(--cmcl-ink);
}

.cmcl-has-band .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.cmcl-has-band .wpcf7-form input[type="text"],
.cmcl-has-band .wpcf7-form input[type="email"],
.cmcl-has-band .wpcf7-form input[type="tel"],
.cmcl-has-band .wpcf7-form input[type="url"],
.cmcl-has-band .wpcf7-form input[type="number"],
.cmcl-has-band .wpcf7-form input[type="date"],
.cmcl-has-band .wpcf7-form select,
.cmcl-has-band .wpcf7-form textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	background: #ffffff;
	border: 3px solid var(--cmcl-ink);
	border-radius: 10px;
	box-shadow: none;
	color: var(--cmcl-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	transition: box-shadow 0.12s ease;
}

.cmcl-has-band .wpcf7-form textarea {
	min-height: 200px;
	resize: vertical;
}

.cmcl-has-band .wpcf7-form input:focus,
.cmcl-has-band .wpcf7-form select:focus,
.cmcl-has-band .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--cmcl-ink);
	box-shadow: 0 0 0 4px var(--cmcl-blue);
}

/* キーボード操作のときは、共通のフォーカス表示も重ねて必ず見えるようにします */
.cmcl-has-band .wpcf7-form input:focus-visible,
.cmcl-has-band .wpcf7-form select:focus-visible,
.cmcl-has-band .wpcf7-form textarea:focus-visible {
	outline: 3px solid var(--cmcl-link);
	outline-offset: 2px;
}

.cmcl-has-band .wpcf7-form input[type="checkbox"],
.cmcl-has-band .wpcf7-form input[type="radio"] {
	width: 22px;
	min-height: 22px;
	height: 22px;
	margin-right: 8px;
	accent-color: var(--cmcl-pink);
}

.cmcl-has-band .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 20px 0 0;
}

/* 送信ボタン（トップページと同じピンクのピル） */
.cmcl-has-band .wpcf7-form .wpcf7-submit,
.cmcl-has-band .wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 240px;
	min-height: 60px;
	padding: 12px 40px;
	background: var(--cmcl-pink);
	border: 4px solid var(--cmcl-ink);
	border-radius: 999px;
	box-shadow: 6px 6px 0 var(--cmcl-ink);
	color: #ffffff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cmcl-has-band .wpcf7-form .wpcf7-submit:hover,
.cmcl-has-band .wpcf7-form .wpcf7-submit:focus-visible {
	color: #ffffff;
	transform: translate(2px, 2px);
	box-shadow: 4px 4px 0 var(--cmcl-ink);
}

/* 送信中・押せないとき */
.cmcl-has-band .wpcf7-form.submitting .wpcf7-submit,
.cmcl-has-band .wpcf7-form .wpcf7-submit:disabled,
.cmcl-has-band .wpcf7-form .wpcf7-submit[disabled] {
	background: #a15a80;
	border-color: #6d7093;
	box-shadow: 6px 6px 0 #6d7093;
	color: #ffffff;
	cursor: not-allowed;
	transform: none;
}

.cmcl-has-band .wpcf7-spinner {
	margin-left: 14px;
	vertical-align: middle;
}

/* 入力エラー */
.cmcl-has-band .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	color: var(--cmcl-red);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.cmcl-has-band .wpcf7-form input.wpcf7-not-valid,
.cmcl-has-band .wpcf7-form textarea.wpcf7-not-valid,
.cmcl-has-band .wpcf7-form select.wpcf7-not-valid {
	border-color: var(--cmcl-red);
}

/* 送信結果のメッセージ（水色のパネル。エラーのときは赤枠） */
.cmcl-has-band .wpcf7 form .wpcf7-response-output {
	margin: 28px 0 0;
	padding: 16px 20px;
	background: var(--cmcl-blue-soft);
	border: 3px solid var(--cmcl-ink);
	border-radius: 12px;
	color: var(--cmcl-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.cmcl-has-band .wpcf7 form.invalid .wpcf7-response-output,
.cmcl-has-band .wpcf7 form.unaccepted .wpcf7-response-output,
.cmcl-has-band .wpcf7 form.failed .wpcf7-response-output,
.cmcl-has-band .wpcf7 form.aborted .wpcf7-response-output,
.cmcl-has-band .wpcf7 form.spam .wpcf7-response-output {
	background: #ffeef1;
	border-color: var(--cmcl-red);
	color: var(--cmcl-red);
}

.cmcl-has-band .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 5-6. お知らせ一覧・個別記事 -------------------------------- */
.cmcl-has-band .p-postList.-type-card .p-postList__item {
	padding: 0 0.5em;
}

.cmcl-has-band .p-postList__link {
	display: block;
	height: 100%;
	background: #ffffff;
	border: 3px solid var(--cmcl-ink);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--cmcl-pink);
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cmcl-has-band .p-postList__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--cmcl-pink);
}

.cmcl-has-band .p-postList__body {
	padding: 14px 16px 18px;
}

.cmcl-has-band .p-postList__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--cmcl-ink);
}

.cmcl-has-band .p-postList__times,
.cmcl-has-band .p-postList__meta {
	color: var(--cmcl-ink);
}

.cmcl-has-band .c-postThumb__cat {
	background: var(--cmcl-pink);
	color: #ffffff;
	font-weight: 700;
}

.cmcl-has-band .c-pagination .page-numbers {
	border: 3px solid var(--cmcl-ink);
	border-radius: 999px;
	color: var(--cmcl-ink);
	font-weight: 700;
}

.cmcl-has-band .c-pagination .page-numbers.current {
	background: var(--cmcl-pink);
	color: #ffffff;
}

/* 個別記事は、本文のコマの下に並ぶ SWELL のパーツ（シェアボタン・関連記事・
   コメント欄など）も、うすい枠の白いカードにして背景から浮かせます。 */
.cmcl-has-band .p-articleFoot,
.cmcl-has-band .c-shareBtns.-bottom,
.cmcl-has-band .l-articleBottom__section {
	margin-top: 24px;
	padding: 22px 24px;
	background: #ffffff;
	border: 3px solid var(--cmcl-ink);
	border-radius: 14px;
}

.cmcl-has-band .l-articleBottom__section > .c-secTitle,
.cmcl-has-band .l-articleBottom__section > h2 {
	color: var(--cmcl-ink);
	font-family: "Kaisei Decol", "Noto Sans JP", serif;
}

/* 個別記事の日付・カテゴリー */
.cmcl-has-band .c-postTimes,
.cmcl-has-band .p-articleHead .c-categoryList__link {
	color: var(--cmcl-ink);
}

/* 5-7. スマートフォン（959px以下） --------------------------- */
@media screen and (max-width: 959px) {
	.cmcl-has-band {
		--cmcl-page-gutter: 16px;
		--cmcl-bw: 5px;
	}

	.cmcl-has-band #top_title_area.l-topTitleArea {
		margin-top: 24px;
		box-shadow: 6px 6px 0 var(--cmcl-pink);
	}

	.cmcl-has-band .l-topTitleArea__body.l-container {
		gap: 10px;
		padding: 20px 18px;
	}

	.cmcl-has-band .l-topTitleArea__body .c-pageTitle {
		font-size: 24px;
		text-shadow: 3px 3px 0 var(--cmcl-pink);
	}

	.cmcl-has-band .l-topTitleArea__body.l-container::before {
		padding: 5px 14px;
		font-size: 12px;
	}

	.cmcl-has-band .l-mainContent__inner > .c-pageTitle,
	.cmcl-has-band .l-mainContent__inner > .c-postTitle {
		padding: 18px 18px;
		font-size: 22px;
		box-shadow: 6px 6px 0 var(--cmcl-pink);
	}

	.cmcl-has-band #content.l-content.l-container,
	.cmcl-has-band #content.l-container {
		margin-bottom: 48px;
		padding-top: 18px;
	}

	.cmcl-has-band .l-mainContent__inner > .post_content,
	.cmcl-has-band .l-mainContent__inner > .p-homeContent {
		padding: 26px 18px;
		box-shadow: 6px 6px 0 var(--cmcl-ink);
	}

	.cmcl-has-band .post_content h2 {
		margin-top: 32px;
		font-size: 21px;
	}

	.cmcl-has-band .post_content h3 {
		margin-top: 26px;
		font-size: 18px;
	}

	/* 表は縦積み（ラベルの上に内容） */
	.cmcl-has-band .post_content table,
	.cmcl-has-band .post_content table tbody,
	.cmcl-has-band .post_content table tr,
	.cmcl-has-band .post_content table th,
	.cmcl-has-band .post_content table td {
		display: block;
		width: auto;
	}

	.cmcl-has-band .post_content table {
		border-width: 3px;
	}

	.cmcl-has-band .post_content table th,
	.cmcl-has-band .post_content table td {
		padding: 12px 14px;
		border: 0;
		border-bottom: 1px solid var(--cmcl-ink);
		font-size: 15px;
	}

	.cmcl-page-office .post_content table td:first-child {
		width: auto;
	}

	.cmcl-has-band .post_content table tr:last-child td:last-child,
	.cmcl-has-band .post_content table tr:last-child th:last-child {
		border-bottom: 0;
	}

	.cmcl-has-band .cmcl-page-bubble {
		margin-bottom: 34px;
		padding: 16px 18px;
		border-radius: 20px;
	}

	.cmcl-has-band .cmcl-page-bubble p {
		font-size: 16px;
	}

	.cmcl-has-band .cmcl-page-bubble::before {
		left: 28px;
	}

	.cmcl-has-band .cmcl-page-bubble::after {
		left: 34px;
	}

	/* 送信ボタンは全幅 */
	.cmcl-has-band .wpcf7-form .wpcf7-submit,
	.cmcl-has-band .wpcf7-form input[type="submit"] {
		width: 100%;
		min-width: 0;
		min-height: 56px;
		font-size: 17px;
	}

	.cmcl-has-band .p-postList__link {
		box-shadow: 4px 4px 0 var(--cmcl-pink);
	}

	.cmcl-has-band .p-articleFoot,
	.cmcl-has-band .c-shareBtns.-bottom,
	.cmcl-has-band .l-articleBottom__section {
		padding: 16px 14px;
	}
}

/* ------------------------------------------------------------
   6. 動きを減らす設定のとき
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.l-header .c-headerButton__link,
	.l-header [class*="headerButton"] a,
	.l-header .c-gnav > li.cmcl-nav-cta > a {
		transition: none;
	}

	.l-header .c-headerButton__link:hover,
	.l-header [class*="headerButton"] a:hover,
	.l-header .c-gnav > li.cmcl-nav-cta > a:hover {
		transform: none;
	}
}