/*
Theme Name:   coursilte Child
Theme URI:    https://coursilte.com/
Description:  coursilte コーポレートサイト用 Blocksy 子テーマ
Author:       coursilte
Template:     blocksy
Version:      1.0.0
Text Domain:  coursilte-child
*/

/* ==========================================================
   目次
   0. デザイントークン
   1. ベース（フォント・背景・Blocksyの余白リセット）
   2. 共通パーツ（セクション・見出し・ボタン・表示アニメーション）
   3. トップ：ヒーロー
   4. トップ：バナー
   5. トップ：お知らせ
   6. トップ：コンセプト
   7. トップ：事業内容
   8. トップ：会社概要
   9. トップ：お問い合わせ（CF7）
   10. ヘッダー・フッター補助
   11. 動きを減らす設定への対応
   12. 下層ページ：ページ見出し・ページ内ナビ
   13. 事業内容ページ：共通
   14. 事業内容ページ：表・注記
   15. 事業内容ページ：デモ・料金・FAQ・CTA
   16. プライバシーポリシー
   17. フッター
   18. スマホメニュー（オフキャンバス）
   19. 調整（セクション上余白など）
   ========================================================== */


/* ==========================================================
   0. デザイントークン
   ========================================================== */
:root {
	--cs-ink: #1F2E30;        /* 本文・見出し */
	--cs-ink-2: #33474A;      /* 本文（やや弱め） */
	--cs-muted: #4D6B71;      /* 補足テキスト */
	--cs-teal-d: #2E4C52;     /* ブランド濃色（面・ボタン） */
	--cs-teal: #658991;       /* ブランド基本色 */
	--cs-mint: #9BDCDD;       /* ミント */
	--cs-mint-l: #E3F2F1;     /* ミント淡 */
	--cs-cream: #F6F4EE;      /* ベース背景 */
	--cs-white: #FFFFFF;
	--cs-orange: #E78722;     /* アクセント */
	--cs-orange-l: #F2A65A;   /* アクセント淡（濃色面の上） */
	--cs-orange-d: #A95510;   /* アクセント濃（明るい面の上の文字） */
	--cs-line: #DCE3E2;       /* 罫線 */

	--cs-font-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
	--cs-font-en: 'Outfit', 'Zen Kaku Gothic New', sans-serif;

	--cs-wrap: 1200px;                         /* コンテンツ最大幅 */
	--cs-gutter: clamp(20px, 4vw, 56px);       /* 左右余白 */
	--cs-sec-y: clamp(72px, 10vw, 128px);      /* セクション上下余白 */
	--cs-radius: 20px;
	--cs-radius-s: 12px;
	--cs-ease: cubic-bezier(.2, .7, .2, 1);

	/* Blocksy側のフォント変数も上書き */
	--theme-font-family: var(--cs-font-ja);
}


/* ==========================================================
   1. ベース
   ========================================================== */
body {
	font-family: var(--cs-font-ja);
	color: var(--cs-ink);
	background-color: var(--cs-cream);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 1;
}

/* カスタムHTMLで組んだセクションは、Blocksyのコンテンツ幅・ブロック間余白を無効化 */
.entry-content > .cs-sec,
.entry-content > .wp-block-group.cs-sec,
.cs-sec {
	max-width: none;
	margin-block: 0 !important;
}
.entry-content > .cs-sec.alignfull {
	margin-inline: 0;
	width: auto;
}
.cs-sec,
.cs-sec *,
.cs-sec *::before,
.cs-sec *::after {
	box-sizing: border-box;
}
.cs-sec img {
	max-width: 100%;
	height: auto;
	display: block;
}


/* ==========================================================
   2. 共通パーツ
   ========================================================== */

/* --- セクション --- */
.cs-sec {
	position: relative;
	padding: var(--cs-sec-y) var(--cs-gutter);
	font-size: 17px;
	line-height: 1.9;
	letter-spacing: .03em;
}
@media (max-width: 600px) {
	.cs-sec { font-size: 16px; }
}
.cs-wrap {
	max-width: var(--cs-wrap);
	margin-inline: auto;
}
.cs-sec p {
	margin: 0;
}

/* --- セクション見出し（英字の透かし＋日本語） --- */
.cs-head {
	position: relative;
	overflow-x: clip;
	display: grid;
	justify-items: center;
	align-items: center;
	text-align: center;
	margin: 0 auto clamp(40px, 6vw, 64px);
}
/* 英字と日本語を同じ位置に重ねる（日本語が手前） */
.cs-head__en,
.cs-head .cs-head__ja {
	grid-area: 1 / 1;
}
.cs-head__lead {
	grid-row: 2;
}
.cs-head__en {
	display: block;
	font-family: var(--cs-font-en);
	font-weight: 700;
	font-size: clamp(34px, 8vw, 92px);
	line-height: .9;
	letter-spacing: -.02em;
	color: rgba(46, 76, 82, .08);
	white-space: nowrap;
	user-select: none;
	transform: translateX(-48px);
	opacity: 0;
	transition: transform 1.2s var(--cs-ease), opacity 1.2s var(--cs-ease);
}
.cs-head .cs-head__ja {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--cs-font-ja);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 36px);
	line-height: 1.4;
	letter-spacing: .08em;
	color: var(--cs-ink);
}
.cs-head .cs-head__lead {
	margin: 16px 0 0 !important;
	color: var(--cs-ink-2);
}
/* 濃色の面の上 */
.cs-head--light .cs-head__en {
	color: rgba(255, 255, 255, .08);
}
.cs-sec .cs-head--light .cs-head__ja {
	color: var(--cs-white);
}
/* JSが無い環境では最初から表示 */
html:not(.cs-js) .cs-head__en,
.cs-head.is-in .cs-head__en {
	transform: none;
	opacity: 1;
}

/* --- ボタン --- */
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 52px;
	padding: 0 30px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-family: var(--cs-font-ja);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .06em;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--cs-ease);
}
.cs-btn:hover {
	transform: translateY(-2px);
}
.cs-btn:focus-visible {
	outline: 3px solid var(--cs-orange);
	outline-offset: 3px;
}
.cs-btn--primary {
	background: var(--cs-teal-d);
	color: var(--cs-white) !important;
}
.cs-btn--primary:hover {
	background: var(--cs-ink);
}
.cs-btn--ghost {
	background: transparent;
	border-color: var(--cs-teal-d);
	color: var(--cs-teal-d) !important;
}
.cs-btn--ghost:hover {
	background: var(--cs-teal-d);
	color: var(--cs-white) !important;
}
.cs-btn--accent {
	background: var(--cs-orange-l);
	color: var(--cs-ink) !important;
}
.cs-btn--accent:hover {
	background: var(--cs-orange);
}
.cs-btn--sm {
	min-height: 44px;
	padding: 0 22px;
	font-size: 15px;
}
.cs-btn__ext {
	font-family: var(--cs-font-en);
	font-weight: 600;
}

/* --- スクロールで表示（JSが .cs-js と .is-in を付与） --- */
.cs-js .cs-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--cs-ease), transform .9s var(--cs-ease);
	transition-delay: var(--cs-delay, 0s);
}
.cs-js .cs-reveal.is-in {
	opacity: 1;
	transform: none;
}


/* ==========================================================
   3. トップ：ヒーロー
   ========================================================== */
.cs-hero {
	overflow: hidden;
	min-height: min(100svh, 900px);
	display: flex;
	align-items: center;
	padding-top: calc(var(--cs-sec-y) + 60px);  /* 透明ヘッダーの高さ分 */
	padding-bottom: calc(var(--cs-sec-y) * .8);
	background: var(--cs-cream);
}

/* 動くグラデーション（ぼかした色面） */
.cs-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cs-hero__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
}
.cs-hero__blob--1 {
	width: 620px;
	height: 620px;
	top: -140px;
	right: -100px;
	background: var(--cs-mint);
	opacity: .75;
	animation: csDrift1 18s ease-in-out infinite alternate;
}
.cs-hero__blob--2 {
	width: 520px;
	height: 520px;
	bottom: -240px;
	right: 14%;
	background: var(--cs-teal);
	opacity: .3;
	animation: csDrift2 22s ease-in-out infinite alternate;
}
.cs-hero__blob--3 {
	width: 360px;
	height: 360px;
	top: 36%;
	right: 6%;
	background: var(--cs-orange-l);
	opacity: .45;
	animation: csDrift3 16s ease-in-out infinite alternate;
}
@keyframes csDrift1 {
	to { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes csDrift2 {
	from { transform: scale(1.1); }
	to   { transform: translate(-140px, -60px) scale(.9); }
}
@keyframes csDrift3 {
	to { transform: translate(-60px, 100px) scale(1.2); }
}

.cs-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.cs-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.cs-hero__label {
	font-family: var(--cs-font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .24em;
	color: var(--cs-orange-d);
}
.cs-sec .cs-hero__title {
	margin: 0;
	font-family: var(--cs-font-ja);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 58px);
	line-height: 1.35;
	letter-spacing: .02em;
	color: var(--cs-ink);
}
.cs-hero__line {
	display: block;
	white-space: nowrap;
}
.cs-hero__mark {
	color: var(--cs-teal-d);
}

/* 1文字ずつ表示（文字ごとに少しずつ遅らせて、下から浮かび上がる） */
.cs-hero__chars {
	display: block;
}
.cs-ch {
	display: inline-block;
	animation: csChar .8s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--base, 0s) + var(--i, 0) * .06s);
}
@keyframes csChar {
	from { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}
/* 読み上げ用（画面には表示しない） */
.cs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cs-hero__text {
	max-width: 34em;
	font-size: 18px;
	line-height: 2;
	color: var(--cs-ink-2);
}
.cs-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* 読み込み時の出現（1行ずつ） */
.cs-hero__up {
	animation: csUp .9s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: var(--cs-delay, 0s);
}
@keyframes csUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* デバイス（PCとスマホは枠ごと画像）。スマホをPCの右手前に重ねる */
.cs-hero__devices {
	position: relative;
	aspect-ratio: 3 / 2;
	animation: csUp 1.2s cubic-bezier(.2, .7, .2, 1) .5s both;
}
.cs-hero__pc,
.cs-hero__sp {
	position: absolute;
	display: block;
	height: auto;
	max-width: none;
	will-change: transform;
	filter: drop-shadow(0 22px 30px rgba(31, 46, 48, .22));
}
.cs-hero__pc {
	left: 0;
	top: 6%;
	width: 88%;
	animation: csFloat 6s ease-in-out infinite;
}
.cs-hero__sp {
	right: 0;
	bottom: 0;
	width: 27%;
	animation: csFloat 6s ease-in-out -3s infinite;
}
@keyframes csFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

/* スクロール案内 */
.cs-hero__scroll {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--cs-font-en);
	font-size: 11px;
	letter-spacing: .3em;
	color: var(--cs-ink-2);
}
.cs-hero__scroll::after {
	content: "";
	width: 1px;
	height: 44px;
	background: var(--cs-teal-d);
	animation: csScroll 2s ease-in-out infinite;
}
@keyframes csScroll {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 900px) {
	.cs-hero {
		min-height: 0;
		padding-top: calc(var(--cs-sec-y) + 48px);
	}
	.cs-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.cs-hero__devices {
		max-width: 520px;
		width: 100%;
		margin-inline: auto;
	}
	.cs-hero__scroll {
		display: none;
	}
	.cs-hero__blob--1 { width: 420px; height: 420px; }
	.cs-hero__blob--2 { width: 360px; height: 360px; }
	.cs-hero__blob--3 { width: 260px; height: 260px; }
}
/* スマホ・タブレット：見出し → 説明 → 画像 → ボタンの順に並べる */
@media (max-width: 900px) {
	.cs-hero__inner {
		gap: 28px;
	}
	.cs-hero__copy {
		display: contents;
	}
	.cs-hero__devices {
		order: 1;
		max-width: 420px;
		margin-block: 8px;
	}
	.cs-hero__btns {
		order: 2;
	}
}
@media (max-width: 560px) {
	.cs-hero__label { font-size: 11px; letter-spacing: .12em; }
	.cs-sec .cs-hero__title { font-size: clamp(26px, 8.2vw, 36px); }
	.cs-hero__text { font-size: 16px; }
	.cs-hero__btns .cs-btn { flex: 1 1 100%; }
}


/* ==========================================================
   4. トップ：バナー
   ========================================================== */
.cs-banners {
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(40px, 6vw, 64px);
}
.cs-banners__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.cs-bnr {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 240px;
	padding: clamp(24px, 3.2vw, 40px);
	border-radius: var(--cs-radius);
	text-decoration: none !important;
	transition: transform .4s var(--cs-ease);
}
.cs-bnr:hover {
	transform: translateY(-4px);
}
.cs-bnr:focus-visible {
	outline: 3px solid var(--cs-orange);
	outline-offset: 4px;
}
.cs-bnr__bg-en {
	position: absolute;
	right: -.06em;
	bottom: -.22em;
	font-family: var(--cs-font-en);
	font-weight: 700;
	font-size: clamp(64px, 8vw, 112px);
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	pointer-events: none;
	transition: transform .8s var(--cs-ease);
}
.cs-bnr:hover .cs-bnr__bg-en {
	transform: translateX(-12px);
}
.cs-bnr__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cs-bnr__label {
	font-family: var(--cs-font-en);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .2em;
}
.cs-bnr__title {
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.4;
}
.cs-bnr__desc {
	font-size: 15px;
	line-height: 1.7;
}
.cs-bnr__foot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cs-bnr__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cs-bnr__tag {
	font-size: 12px;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid currentColor;
}
.cs-bnr__note {
	font-weight: 700;
	font-size: 13px;
}
.cs-bnr__cta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	border-radius: 999px;
	white-space: nowrap;
	transition: gap .3s var(--cs-ease);
}
.cs-bnr:hover .cs-bnr__cta {
	gap: .9em;
}

/* プラグイン（濃色） */
.cs-bnr--plugin,
.cs-bnr--plugin:hover,
.cs-bnr--plugin:focus {
	background: var(--cs-teal-d);
	color: var(--cs-mint-l) !important;
}
.cs-bnr--plugin .cs-bnr__desc { color: #CFE3E1; }
.cs-bnr--plugin .cs-bnr__bg-en { color: #36585F; }
.cs-bnr--plugin .cs-bnr__label { color: var(--cs-orange-l); }
.cs-bnr--plugin .cs-bnr__title { color: var(--cs-white); }
.cs-bnr--plugin .cs-bnr__tag { color: #CFE3E1; border-color: #6F9399; }
.cs-bnr--plugin .cs-bnr__cta { background: var(--cs-orange-l); color: var(--cs-ink); }

/* LP（明色） */
.cs-bnr--lp,
.cs-bnr--lp:hover,
.cs-bnr--lp:focus {
	background: var(--cs-white);
	border: 1.5px solid var(--cs-line);
	color: var(--cs-ink-2) !important;
}
.cs-bnr--lp .cs-bnr__desc { color: var(--cs-ink-2); }
.cs-bnr--lp .cs-bnr__bg-en { color: #EFEDE6; }
.cs-bnr--lp .cs-bnr__label { color: var(--cs-muted); }
.cs-bnr--lp .cs-bnr__title { color: var(--cs-ink); }

.cs-bnr--lp .cs-bnr__note { color: var(--cs-teal-d); }
.cs-bnr--lp .cs-bnr__cta { background: var(--cs-teal-d); color: var(--cs-white); }

@media (max-width: 860px) {
	.cs-banners__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================
   5. トップ：お知らせ（グループブロック＋最新の投稿ブロック）
   ========================================================== */
.entry-content .wp-block-latest-posts {
	max-width: 880px;
	margin: 0 auto !important;
	padding: 8px clamp(20px, 3vw, 40px);
	list-style: none;
	background: var(--cs-white);
	border-radius: var(--cs-radius);
	border: 1px solid var(--cs-line);
}
/* 次のセクションとの間隔：グループにcs-secが無い場合も余白を確保 */
.entry-content .wp-block-latest-posts {
	margin-bottom: var(--cs-sec-y) !important;
}
.cs-news .wp-block-latest-posts {
	margin-bottom: 0 !important;
}
.entry-content .wp-block-latest-posts li {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	align-items: baseline;
	gap: 4px 24px;
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--cs-line);
}
.entry-content .wp-block-latest-posts li:last-child {
	border-bottom: none;
}
.entry-content .wp-block-latest-posts__post-date {
	order: -1;
	font-family: var(--cs-font-en);
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--cs-muted);
}
.entry-content .wp-block-latest-posts__post-title {
	font-weight: 700;
	color: var(--cs-ink) !important;
	text-decoration: none;
	transition: color .3s;
}
.entry-content .wp-block-latest-posts__post-title:hover {
	color: var(--cs-teal) !important;
}
.entry-content .wp-block-latest-posts__post-excerpt {
	grid-column: 2;
	margin: 0;
	font-size: 15px;
	color: var(--cs-ink-2);
}
@media (max-width: 600px) {
	.entry-content .wp-block-latest-posts li {
		grid-template-columns: minmax(0, 1fr);
	}
	.entry-content .wp-block-latest-posts__post-excerpt {
		grid-column: 1;
	}
}


/* ==========================================================
   6. トップ：コンセプト
   ========================================================== */
.cs-concept {
	background: var(--cs-teal-d);
	color: #DCEDEC;
	overflow: hidden;
}
.cs-concept::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	left: -160px;
	bottom: -260px;
	border-radius: 50%;
	background: var(--cs-teal);
	opacity: .35;
	filter: blur(60px);
	pointer-events: none;
}
.cs-concept__inner {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}
.cs-concept__catch {
	font-weight: 700;
	font-size: clamp(18px, 3vw, 34px) !important;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--cs-white);
	margin-bottom: clamp(32px, 5vw, 48px) !important;
}
.cs-concept__text {
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	font-size: 17px;
	line-height: 2.1;
}
@media (max-width: 600px) {
	.cs-concept__inner {
		text-align: left;
	}
	.cs-concept__catch {
		text-align: center;
	}
}


/* ==========================================================
   7. トップ：事業内容
   ========================================================== */
.cs-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 32px);
}
.cs-svc {
	display: flex;
	flex-direction: column;
	background: var(--cs-white);
	border-radius: var(--cs-radius);
	border: 1px solid var(--cs-line);
	overflow: hidden;
}
.cs-svc__img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cs-cream);
}
/* PC・スマホのモックアップ画像（背景透過）は、切らずに全体を収める */
.cs-svc__img:has(img[src*="coursilte-shopping"]),
.cs-svc__img:has(img[src*="coursilte-website"]),
.cs-svc__img:has(img[src*="coursilte-homepage"]),
.cs-svc__img:has(img[src*="グラフィックデザイン例"]),
.cs-svc__img:has(img[src*="%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BE%8B"]) {
	background: var(--cs-cream);
}
.cs-svc__img img[src*="coursilte-shopping"],
.cs-svc__img img[src*="coursilte-website"],
.cs-svc__img img[src*="coursilte-homepage"],
.cs-svc__img img[src*="グラフィックデザイン例"],
.cs-svc__img img[src*="%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BE%8B"],
.cs-svc__img--mock img {
	object-fit: contain;
	padding: 6% 8% 4%;
}
.cs-svc__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--cs-ease);
}
.cs-svc:hover .cs-svc__img img {
	transform: scale(1.04);
}
.cs-svc__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 3vw, 36px);
}
.cs-svc__en {
	font-family: var(--cs-font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--cs-orange-d);
}
.cs-sec .cs-svc__title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.4;
	color: var(--cs-ink);
}
.cs-svc__text {
	flex: 1;
	font-size: 16px;
	color: var(--cs-ink-2);
}
.cs-svc__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
@media (max-width: 860px) {
	.cs-services__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================
   8. トップ：会社概要
   ========================================================== */
.cs-company {
	background: var(--cs-mint-l);
}
.cs-company__list {
	max-width: 880px;
	margin: 0 auto;
	padding: 8px clamp(20px, 3vw, 48px);
	background: var(--cs-white);
	border-radius: var(--cs-radius);
}
.cs-company__row {
	display: grid;
	grid-template-columns: 10em minmax(0, 1fr);
	gap: 4px 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--cs-line);
}
.cs-company__row:last-child {
	border-bottom: none;
}
.cs-company__row dt {
	font-weight: 700;
	color: var(--cs-teal-d);
}
.cs-company__row dd {
	margin: 0;
	color: var(--cs-ink);
}
.cs-company__row a {
	color: var(--cs-teal-d);
	text-underline-offset: 3px;
}
@media (max-width: 600px) {
	.cs-company__row {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px 0;
	}
	.cs-company__row dt {
		font-size: 15px;
	}
}


/* ==========================================================
   9. トップ：お問い合わせ（グループブロック＋CF7）
   ========================================================== */
.wpcf7 {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 56px);
	background: var(--cs-white);
	border-radius: var(--cs-radius);
	border: 1px solid var(--cs-line);
}
.cs-form__row {
	display: grid;
	grid-template-columns: 13em minmax(0, 1fr);
	align-items: start;
	gap: 8px 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--cs-line);
}
.cs-form__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	font-weight: 700;
	font-size: 16px;
	color: var(--cs-ink);
}
.cs-req,
.cs-opt {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 4px;
	letter-spacing: .06em;
	white-space: nowrap;
}
.cs-req {
	background: var(--cs-orange-d);
	color: var(--cs-white);
}
.cs-opt {
	background: var(--cs-line);
	color: var(--cs-muted);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--cs-font-ja);
	font-size: 16px;
	color: var(--cs-ink);
	background: var(--cs-cream);
	border: 1.5px solid transparent;
	border-radius: var(--cs-radius-s);
	transition: border-color .3s, background-color .3s;
}
.wpcf7 textarea {
	min-height: 200px;
	resize: vertical;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	background: var(--cs-white);
	border-color: var(--cs-teal);
}
.wpcf7 ::placeholder {
	color: #7C8F92;
}
/* チェックボックス */
.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	padding-top: 10px;
}
.wpcf7-list-item {
	margin: 0;
}
.wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.wpcf7 input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--cs-teal-d);
}
/* 同意・送信 */
.cs-form__agree {
	padding: 28px 0 8px;
	text-align: center;
}
.cs-form__agree a {
	color: var(--cs-teal-d);
	text-underline-offset: 3px;
}
.cs-form__submit,
.cs-form__submit > p {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 16px;
	margin: 0;
}
.wpcf7 input.wpcf7-submit {
	display: block;
	margin: 0 auto;
	min-width: 240px;
	min-height: 56px;
	padding: 0 40px;
	font-family: var(--cs-font-ja);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .12em;
	color: var(--cs-white);
	background: var(--cs-teal-d);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .3s, transform .3s var(--cs-ease);
}
.wpcf7 input.wpcf7-submit:hover {
	background: var(--cs-ink);
	transform: translateY(-2px);
}
.wpcf7 input.wpcf7-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}
.wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}
.cs-form__recaptcha {
	margin-top: 20px !important;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	color: var(--cs-muted);
}
.cs-form__recaptcha a {
	color: inherit;
}
.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #B3261E;
}
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: var(--cs-radius-s);
	font-size: 14px;
}
/* reCAPTCHAのバッジは非表示（フォーム下に表記を入れているため） */
.grecaptcha-badge {
	visibility: hidden;
}
@media (max-width: 700px) {
	.cs-form__row {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px 0;
	}
	.cs-form__label {
		padding-top: 0;
	}
	.wpcf7 input.wpcf7-submit {
		width: 100%;
	}
}


/* ==========================================================
   10. ヘッダー・フッター補助
   ========================================================== */
/* ヘッダーのSHOPボタン（Blocksyのボタン要素に追加CSSクラス cs-header-shop を付与） */
.cs-header-shop .ct-button,
.ct-header-cta .ct-button {
	font-family: var(--cs-font-en);
	font-weight: 600;
	letter-spacing: .08em;
	border-radius: 999px;
}


/* ==========================================================
   11. 動きを減らす設定への対応
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
	.cs-hero__blob,
	.cs-hero__pc,
	.cs-hero__sp,
	.cs-hero__scroll::after {
		animation: none;
	}
	.cs-hero__up,
	.cs-hero__devices,
	.cs-ch {
		animation: none;
	}
	.cs-js .cs-reveal,
	.cs-head__en {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.cs-btn,
	.cs-bnr,
	.cs-bnr__bg-en,
	.cs-svc__img img {
		transition: none;
	}
	.cs-btn:hover,
	.cs-bnr:hover {
		transform: none;
	}
}


/* ==========================================================
   12. 下層ページ：ページ見出し・ページ内ナビ
   ========================================================== */
.cs-pagehead {
	padding-top: calc(var(--cs-sec-y) * .8);
	/* 下に続くページ内ナビ（高さ約54px＋下の余白）を、このエリアの中に収める分の余白を足す */
	padding-bottom: calc(var(--cs-sec-y) * .4 + 100px);
	background: var(--cs-mint-l);
}
.cs-pagehead .cs-head {
	margin-bottom: 0;
}

/* ページ内ナビ：単独のカスタムHTMLブロックとして本文の直下に置くと、スクロールしても上に残る */
.cs-subnav {
	position: sticky;
	top: var(--cs-subnav-top, 12px);
	z-index: 20;
	display: flex;
	justify-content: center;
	padding: 0 var(--cs-gutter);
	/* 直前のページ見出しエリア（ミント）の中に重ねて表示 */
	margin-block: -100px 0 !important;
	max-width: none !important;
	pointer-events: none;
}
.admin-bar .cs-subnav {
	--cs-subnav-top: 44px;
}
.cs-subnav__list {
	pointer-events: auto;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--cs-line);
	border-radius: 999px;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}
.cs-subnav__list::-webkit-scrollbar {
	display: none;
}
.cs-subnav__list li {
	margin: 0;
	flex: 0 0 auto;
}
.cs-subnav__list a {
	display: block;
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--cs-teal-d);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s, color .3s;
}
.cs-subnav__list a:hover,
.cs-subnav__list a.is-current {
	background: var(--cs-teal-d);
	color: var(--cs-white);
}
.cs-subnav__list a:focus-visible {
	outline: 3px solid var(--cs-orange);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	.cs-subnav {
		justify-content: flex-start;
	}
	.cs-subnav__list a {
		padding: 9px 14px;
		font-size: 14px;
	}
}


/* ==========================================================
   13. 事業内容ページ：共通
   ========================================================== */
.cs-svcd {
	scroll-margin-top: 80px;
}
.cs-svcd--white {
	background: var(--cs-white);
}
.cs-svcd--cream {
	background: var(--cs-cream);
}
/* 同じ事業の続きのブロックは上余白を詰める */
.cs-svcd--cont {
	padding-top: 0;
}
/* キャンペーン帯のように、直後のブロックと近づけたいもの */
.cs-svcd--tight {
	padding-bottom: 32px;
}

/* ブロック内の小見出し */
.cs-sec .cs-h3 {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--cs-ink);
	text-align: center;
}
.cs-sec .cs-h3::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 3px;
	background: var(--cs-orange);
}
.cs-sec .cs-h4 {
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: var(--cs-teal-d);
}
.cs-block {
	margin-top: clamp(56px, 8vw, 96px);
}
.cs-block:first-child {
	margin-top: 0;
}

/* リード（テキスト＋画像の2カラム） */
.cs-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}
.cs-lead--rev .cs-lead__img {
	order: -1;
}
.cs-sec .cs-lead__title {
	margin: 0 0 24px;
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--cs-ink);
}
.cs-lead__text {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	color: var(--cs-ink-2);
}
.cs-lead__img {
	border-radius: var(--cs-radius);
	overflow: hidden;
	background: transparent;
}
/* 画像は元の縦横比のまま、切らずに全体を表示（透過画像は背景がそのまま透ける） */
.cs-lead__img img {
	width: 100%;
	height: auto;
}
.cs-lead__img:has(img[src*="coursilte-shopping"]),
.cs-lead__img:has(img[src*="coursilte-website"]),
.cs-lead__img:has(img[src*="coursilte-homepage"]),
.cs-lead__img--mock {
	background: transparent;
	border-radius: 0;
	aspect-ratio: auto;
}
.cs-lead__img img[src*="coursilte-shopping"],
.cs-lead__img img[src*="coursilte-website"],
.cs-lead__img img[src*="coursilte-homepage"],
.cs-lead__img--mock img {
	height: auto;
	object-fit: contain;
}
@media (max-width: 860px) {
	.cs-lead {
		grid-template-columns: minmax(0, 1fr);
	}
	.cs-lead--rev .cs-lead__img {
		order: 0;
	}
}

/* 特長カード */
.cs-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.cs-feature {
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--cs-radius);
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
}
.cs-svcd--white .cs-feature {
	background: var(--cs-cream);
	border-color: transparent;
}
.cs-sec .cs-feature__title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: var(--cs-ink);
}
.cs-feature__title::before {
	content: "";
	flex: 0 0 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--cs-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cs-sec .cs-feature__title:last-child {
	margin-bottom: 0;
}
.cs-feature__text {
	font-size: 16px;
	color: var(--cs-ink-2);
}

/* 箇条書き */
.cs-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cs-list li {
	position: relative;
	margin: 0;
	padding-left: 1.4em;
}
.cs-list li::before {
	content: "";
	position: absolute;
	left: .2em;
	top: .78em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-teal);
}

/* 本文ボックス（理由・一貫性など） */
.cs-note-box {
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--cs-radius);
	background: var(--cs-mint-l);
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	color: var(--cs-ink-2);
}
.cs-narrow {
	max-width: 880px;
	margin-inline: auto;
}
.cs-center {
	text-align: center;
}
.cs-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}


/* ==========================================================
   14. 事業内容ページ：表・注記
   ========================================================== */
.cs-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--cs-radius-s);
	border: 1px solid var(--cs-line);
	background: var(--cs-white);
}
.cs-table-wrap + .cs-table-hint {
	display: none;
	margin-top: 8px !important;
	font-size: 13px;
	color: var(--cs-muted);
}
.cs-sec .cs-table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	border: none;
	font-size: 15px;
	line-height: 1.6;
}
.cs-table th,
.cs-table td {
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid var(--cs-line);
	text-align: center;
	vertical-align: middle;
	color: var(--cs-ink);
	background: transparent;
}
.cs-table thead th {
	font-weight: 700;
	font-size: 14px;
	color: var(--cs-white);
	background: var(--cs-teal-d);
	white-space: nowrap;
}
.cs-table tbody th {
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}
.cs-table tbody tr:last-child th,
.cs-table tbody tr:last-child td {
	border-bottom: none;
}
.cs-table td.is-left,
.cs-table th.is-left {
	text-align: left;
}
/* 自社の行を強調 */
.cs-table tr.is-own th,
.cs-table tr.is-own td {
	background: var(--cs-mint-l);
	font-weight: 700;
}
.cs-table tr.is-own th {
	color: var(--cs-orange-d);
}
.cs-table--price td:nth-child(2) {
	white-space: nowrap;
}
.cs-table--wrap tbody th {
	white-space: normal;
	min-width: 14em;
}
/* 比較表のロゴ（高さを揃えて左寄せ） */
.cs-table .cs-table__logo {
	display: block;
	width: auto;
	height: 26px;
	max-width: 140px;
	object-fit: contain;
	object-position: left center;
}
.cs-table img.cs-table__logo[src*="coursilte_logo"] {
	height: 40px;
	max-width: 170px;
}
.cs-table .cs-table__logo + small {
	margin-top: 6px;
}
@media (max-width: 700px) {
	.cs-table .cs-table__logo {
		height: 22px;
		max-width: 110px;
	}
	.cs-table img.cs-table__logo[src*="coursilte_logo"] {
		height: 32px;
		max-width: 140px;
	}
}
.cs-table small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--cs-muted);
}
.cs-tables {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.cs-notes {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.8;
	color: var(--cs-muted);
}
.cs-notes li {
	margin: 0;
}
@media (max-width: 700px) {
	.cs-table-wrap + .cs-table-hint {
		display: block;
	}
}

/* シミュレーターへの導線 */
.cs-simlink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 40px;
	padding: clamp(24px, 3vw, 32px) clamp(24px, 4vw, 40px);
	border-radius: var(--cs-radius);
	background: var(--cs-teal-d);
	color: var(--cs-mint-l);
}
.cs-simlink__title {
	font-weight: 700;
	font-size: clamp(18px, 2vw, 22px);
	color: var(--cs-white);
}
.cs-simlink__text {
	font-size: 15px;
}


/* ==========================================================
   15. 事業内容ページ：デモ・料金・FAQ・CTA
   ========================================================== */

/* 正直にお伝えすること */
.cs-honest {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 960px;
	margin: 0 auto;
}
.cs-honest__item {
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--cs-radius);
	border: 1.5px dashed var(--cs-teal);
	background: transparent;
}
.cs-sec .cs-honest__title {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 18px;
	color: var(--cs-teal-d);
}
.cs-honest__text {
	font-size: 16px;
	color: var(--cs-ink-2);
}
@media (max-width: 760px) {
	.cs-honest {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* デモサイト */
.cs-demos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.cs-demo {
	display: flex;
	flex-direction: column;
	border-radius: var(--cs-radius);
	overflow: hidden;
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	text-decoration: none !important;
	color: var(--cs-ink);
	transition: transform .4s var(--cs-ease);
}
.cs-demo:hover {
	transform: translateY(-4px);
}
.cs-demo:focus-visible {
	outline: 3px solid var(--cs-orange);
	outline-offset: 4px;
}
.cs-demo__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cs-mint-l);
}
.cs-demo__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .8s var(--cs-ease);
}
.cs-demo:hover .cs-demo__img img {
	transform: scale(1.04);
}
.cs-demo__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
}
.cs-demo__name {
	font-weight: 700;
	font-size: 16px;
}
.cs-demo__go {
	font-weight: 700;
	font-size: 14px;
	color: var(--cs-teal-d);
	white-space: nowrap;
}
@media (max-width: 860px) {
	.cs-demos {
		grid-template-columns: minmax(0, 1fr);
		max-width: 480px;
		margin-inline: auto;
	}
}

/* 料金 */
.cs-price {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--cs-radius);
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	text-align: center;
}
.cs-svcd--white .cs-price {
	background: var(--cs-cream);
	border-color: transparent;
}
.cs-price__label {
	font-weight: 700;
	color: var(--cs-teal-d);
}
.cs-price__num {
	margin: 4px 0 12px !important;
	font-family: var(--cs-font-en);
	font-weight: 700;
	font-size: clamp(40px, 5vw, 56px);
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--cs-ink);
}
.cs-price__num small {
	font-family: var(--cs-font-ja);
	font-size: .38em;
	font-weight: 700;
	margin-left: .2em;
}
.cs-price__text {
	color: var(--cs-ink-2);
}

/* キャンペーン（期間終了後はこのブロックごと削除） */
.cs-campaign {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 24px;
	padding: 22px 28px;
	border-radius: var(--cs-radius);
	background: #FDF1E4;
	border: 1.5px solid var(--cs-orange-l);
	text-align: center;
}
.cs-campaign__tag {
	font-weight: 700;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cs-orange-d);
	color: var(--cs-white);
}
.cs-campaign__text {
	font-weight: 700;
	color: var(--cs-ink);
}
.cs-campaign__text b {
	font-family: var(--cs-font-en);
	font-size: 1.5em;
	color: var(--cs-orange-d);
}

/* サポート */
.cs-support {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}
.cs-support__img {
	border-radius: var(--cs-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--cs-mint-l);
}
.cs-support__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-support__price {
	margin-top: 24px !important;
	padding-top: 20px;
	border-top: 1px solid var(--cs-line);
	font-weight: 700;
	color: var(--cs-ink);
}
.cs-support__price span {
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: var(--cs-muted);
}
@media (max-width: 860px) {
	.cs-support {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 制作の流れ（順番がある内容のみ番号付き） */
.cs-flow {
	counter-reset: csflow;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cs-flow li {
	counter-increment: csflow;
	position: relative;
	margin: 0;
	padding: 24px 16px 20px;
	border-radius: var(--cs-radius-s);
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	text-align: center;
}
.cs-svcd--white .cs-flow li {
	background: var(--cs-cream);
	border-color: transparent;
}
.cs-flow li::before {
	content: counter(csflow);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--cs-teal-d);
	color: var(--cs-white);
	font-family: var(--cs-font-en);
	font-weight: 700;
	font-size: 16px;
}
.cs-flow__title {
	display: block;
	font-weight: 700;
	color: var(--cs-ink);
}
.cs-flow__text {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--cs-ink-2);
}
@media (max-width: 860px) {
	.cs-flow {
		grid-template-columns: minmax(0, 1fr);
	}
	.cs-flow li {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 0 16px;
		text-align: left;
		padding: 18px 20px;
	}
	.cs-flow li::before {
		grid-row: span 2;
		margin: 0;
	}
	.cs-flow__text {
		margin-top: 2px;
	}
}

/* 制作物グリッド */
.cs-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.cs-item {
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--cs-radius);
	background: var(--cs-cream);
}
.cs-svcd--cream .cs-item {
	background: var(--cs-white);
}
.cs-sec .cs-item__title {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 18px;
	color: var(--cs-ink);
}
.cs-item__text {
	font-size: 16px;
	color: var(--cs-ink-2);
}

/* よくあるご質問（アコーディオン） */
.cs-faq {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cs-faq__item {
	border-radius: var(--cs-radius-s);
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	overflow: hidden;
}
.cs-faq__q {
	position: relative;
	display: block;
	padding: 20px 56px 20px 24px;
	font-weight: 700;
	color: var(--cs-ink);
	cursor: pointer;
	list-style: none;
}
.cs-faq__q::-webkit-details-marker {
	display: none;
}
.cs-faq__q::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--cs-teal-d);
	border-bottom: 2px solid var(--cs-teal-d);
	transform: rotate(45deg);
	transition: transform .3s var(--cs-ease), margin-top .3s var(--cs-ease);
}
.cs-faq__item[open] .cs-faq__q::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.cs-faq__q:focus-visible {
	outline: 3px solid var(--cs-orange);
	outline-offset: -3px;
}
.cs-faq__a {
	padding: 0 24px 22px;
	color: var(--cs-ink-2);
}

/* ページ末尾の相談CTA */
.cs-cta {
	background: var(--cs-teal-d);
	color: var(--cs-mint-l);
	text-align: center;
	overflow: hidden;
}
.cs-sec .cs-cta__title {
	position: relative;
	margin: 0 0 16px;
	font-weight: 700;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.5;
	color: var(--cs-white);
}
.cs-cta__text {
	position: relative;
}
.cs-cta .cs-btns {
	position: relative;
}
.cs-cta .cs-btn--ghost {
	border-color: #CFE3E1;
	color: var(--cs-white) !important;
}
.cs-cta .cs-btn--ghost:hover {
	background: var(--cs-white);
	color: var(--cs-teal-d) !important;
}
.cs-cta__hours {
	font-weight: 400;
	font-size: 13px;
}


/* ==========================================================
   16. プライバシーポリシー
   ========================================================== */
.cs-policy__body {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--cs-radius);
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	color: var(--cs-ink-2);
}
.cs-policy__body > p + p {
	margin-top: 1em;
}
.cs-sec .cs-policy__h {
	margin: 40px 0 12px;
	padding-left: 14px;
	border-left: 4px solid var(--cs-orange);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: var(--cs-ink);
}
.cs-policy__body .cs-list {
	margin-top: 12px;
}
.cs-policy__body a {
	color: var(--cs-teal-d);
	text-underline-offset: 3px;
}
.cs-policy__contact {
	margin-top: 12px !important;
	padding: 20px 24px;
	border-radius: var(--cs-radius-s);
	background: var(--cs-cream);
}
.cs-policy__date {
	margin-top: 40px !important;
	text-align: right;
	font-size: 14px;
	color: var(--cs-muted);
}

@media (prefers-reduced-motion: reduce) {
	.cs-demo,
	.cs-demo__img img,
	.cs-faq__q::after {
		transition: none;
	}
	.cs-demo:hover {
		transform: none;
	}
}


/* ==========================================================
   17. フッター（Blocksyフッタービルダー＋ウィジェット）
   ========================================================== */
.ct-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--cs-ink);
	color: #B9C9C8;
	font-family: var(--cs-font-ja);
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: .03em;
}
/* Blocksyのフッター背景（初期値：パレット6）より優先させる */
footer.ct-footer,
[data-footer] .ct-footer {
	background-color: var(--cs-ink) !important;
	background-image: none !important;
}
.ct-footer [data-row],
.ct-footer [data-row] > div {
	background-color: transparent !important;
	background-image: none !important;
}
/* 背景の英字（見出しの透かしと同じ演出） */
.ct-footer::before {
	content: "coursilte";
	position: absolute;
	right: -.04em;
	bottom: -.28em;
	font-family: var(--cs-font-en);
	font-weight: 700;
	font-size: clamp(96px, 16vw, 240px);
	line-height: 1;
	letter-spacing: -.03em;
	color: rgba(255, 255, 255, .03);
	white-space: nowrap;
	pointer-events: none;
}
/* 上下の余白：Blocksyは行の内側のコンテナにも余白（--container-spacing）を付けているため、
   行そのものは0にして、内側のコンテナで余白を一括管理する */
.ct-footer [data-row] {
	position: relative;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ct-footer [data-row="middle"] > div {
	--container-spacing: 0px;
	padding-top: clamp(28px, 3.5vw, 40px) !important;
	padding-bottom: clamp(16px, 2.5vw, 24px) !important;
}
.ct-footer [data-row="bottom"] {
	border-top: 1px solid rgba(255, 255, 255, .1) !important;
}
.ct-footer [data-row="bottom"] > div {
	--container-spacing: 0px;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	min-height: 0 !important;
}
.ct-footer [data-row="bottom"] .ct-footer-copyright p {
	margin: 0;
}
/* 各列・ウィジェットの最後の要素の下に余白を残さない */
.ct-footer [data-column] > *:last-child,
.ct-footer .ct-widget:last-child,
.ct-footer .cs-ft > *:last-child:not(a) {
	margin-bottom: 0 !important;
}
.ct-footer .ct-widget + .ct-widget,
.ct-footer .widget + .widget {
	margin-top: 0;
}
.ct-footer .widget-title {
	display: none;
}

/* 見出し */
.cs-ft-title {
	margin: 0 0 16px !important;
	font-family: var(--cs-font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .2em;
	color: var(--cs-orange-l);
}
.cs-ft-nav .cs-ft-title + ul + .cs-ft-title,
.cs-ft-nav ul + .cs-ft-title {
	margin-top: 32px !important;
}

/* ロゴ・連絡先 */
.cs-ft-logo {
	display: inline-block;
}
.cs-ft-logo img {
	display: block;
	width: 160px;
	height: auto;
}
.cs-ft-tagline {
	margin: 16px 0 24px !important;
	font-weight: 700;
	font-size: 15px;
	color: var(--cs-white);
}
.cs-ft-info {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cs-ft-info > div {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 12px;
}
.cs-ft-info dt {
	font-size: 13px;
	color: #87A0A3;
}
.cs-ft-info dd {
	margin: 0;
	color: #DCE7E6;
}
.ct-footer .cs-ft a {
	color: #DCE7E6;
	text-decoration: none;
	transition: color .3s;
}
.ct-footer .cs-ft a:hover {
	color: var(--cs-orange-l);
}
.ct-footer .cs-ft a:focus-visible {
	outline: 2px solid var(--cs-orange-l);
	outline-offset: 3px;
	border-radius: 4px;
}

/* LINE */
.ct-footer a.cs-ft-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 10px 20px;
	border-radius: 999px;
	background: #06C755;
	color: var(--cs-white);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	transition: transform .3s var(--cs-ease), background-color .3s;
}
.ct-footer a.cs-ft-line:hover {
	background: #05B04B;
	color: var(--cs-white);
	transform: translateY(-2px);
}

/* メニュー */
.cs-ft-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cs-ft-nav li {
	margin: 0;
}
.cs-ft-ext {
	margin-left: .4em;
	font-family: var(--cs-font-en);
	font-size: 12px;
}

/* お知らせ（最新の投稿ブロック） */
.ct-footer .wp-block-latest-posts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}
.ct-footer .wp-block-latest-posts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ct-footer .wp-block-latest-posts li:first-child {
	padding-top: 0;
}
.ct-footer .wp-block-latest-posts__post-date {
	order: -1;
	font-family: var(--cs-font-en);
	font-size: 13px;
	color: #87A0A3;
}
.ct-footer .wp-block-latest-posts__post-title {
	color: #DCE7E6;
	text-decoration: none;
	line-height: 1.6;
	transition: color .3s;
}
.ct-footer .wp-block-latest-posts__post-title:hover {
	color: var(--cs-orange-l);
}

/* コピーライト */
.ct-footer .ct-footer-copyright {
	font-family: var(--cs-font-en);
	font-size: 13px;
	letter-spacing: .06em;
	color: #87A0A3;
}

/* ページトップへ戻るボタン（旧サイトのオレンジを継承） */
.ct-back-to-top {
	background-color: var(--cs-orange) !important;
	color: var(--cs-white) !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 16px rgba(31, 46, 48, .2) !important;
}
.ct-back-to-top svg {
	fill: currentColor !important;
}
.ct-back-to-top:hover {
	background-color: var(--cs-orange-d) !important;
}

@media (max-width: 999px) {
	.ct-footer [data-row="middle"] [data-column] + [data-column] {
		margin-top: 8px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ct-footer a.cs-ft-line {
		transition: none;
	}
	.ct-footer a.cs-ft-line:hover {
		transform: none;
	}
}


/* ==========================================================
   18. スマホメニュー（オフキャンバス）
   ========================================================== */
#offcanvas .ct-panel-inner {
	background-color: var(--cs-teal-d) !important;
}
#offcanvas .mobile-menu a,
#offcanvas .ct-menu-link {
	color: var(--cs-white) !important;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .08em;
}
#offcanvas .mobile-menu a:hover,
#offcanvas .current-menu-item > a,
#offcanvas .current-menu-item > .ct-menu-link {
	color: var(--cs-orange-l) !important;
}
#offcanvas .mobile-menu li {
	border-color: rgba(255, 255, 255, .12) !important;
}
#offcanvas .ct-toggle-close {
	--theme-icon-color: var(--cs-white);
	color: var(--cs-white) !important;
}


/* ==========================================================
   19. 調整（セクション上余白など）
   ========================================================== */
/* 英字見出しの上の余白を半分に */
.cs-concept,
.cs-services,
.cs-company {
	padding-top: calc(var(--cs-sec-y) / 2);
}
/* お問い合わせ：グループにcs-secが無くても上余白を確保 */
.cs-head--contact {
	padding-top: calc(var(--cs-sec-y) / 2);
	scroll-margin-top: 24px;
}
.cs-sec .cs-head--contact {
	padding-top: 0;
}

/* スマホ：見出しの英字（背景）を大きくして、日本語との存在感の差をつける。
   長い英字（SHOPPING SITE / PRIVACY POLICY）は2行に折り返して収める */
@media (max-width: 600px) {
	.cs-head__en {
		font-size: clamp(52px, 17vw, 80px);
		line-height: .88;
		white-space: normal;
		max-width: 100%;
	}
}