@charset "UTF-8";
/* ==========================================================================
   EIKICHI チームビルディング
   Notion「デザインルール」準拠のスタイルシート

   ＝ 積み木 ＝
   地はどのページも白。その上に、色の付いた四角い積み木（.block）を積む。
   面と面の境目はすべて直線。波・円弧・スカラップは使わない。

   色は設計書で指定されているものだけ。
     赤 #e71f18 ／ 橙 #ff9f05 ／ 黄 #fff100 ／ 青 #05c5ff
   （黒は面には使わない）
   TOP・利用企業一覧・お問い合わせはこの4色を巡回させ、
   サービスの各ページは、そのサービスの2色（メイン＋アクセント）だけで積む。

   そのほか設計書の決めごと：
   - 見出し 40px / 最小 16px、375px以下では 見出し 24px / 最小 10px
   - 斜体禁止、字間は最大 3px、数字は日本語フォント
   - 版面は 1400px。本文とフォームだけ 800px
   - 角丸コンテンツ多め
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */

:root {
	/* 積み木に使う色 */
	--c-red: #e71f18;
	--c-orange: #ff9f05;
	--c-yellow: #fff100;
	--c-blue: #05c5ff;

	/*
	 * ヒーローだけで使う2色。いただいた「ヒーローモック2」の実測値。
	 * 設計書の指定色には無いので、要確認としてNotionに残してある。
	 */
	--c-hero-blue: #00a1e9;
	--c-grid: #8cc9e5;
	/* フッターの黒。モックの実測 */
	--c-footer: #000000;

	--red: var(--c-red);
	--black: #000000;
	--white: #ffffff;

	/*
	 * 役割で持つ色。サービスページでは body の style から差し替わる。
	 * ブランドのページのメインは赤。
	 */
	--main: var(--c-red);
	--on-main: var(--white);
	--accent: var(--white);
	--on-accent: var(--black);

	/* フォント */
	--font-en-head: "Archivo Black", "Noto Sans JP", sans-serif;
	--font-en: "Playfair Display", "Noto Sans JP", serif;
	--font-jp-head: "M PLUS 2", "Noto Sans JP", sans-serif;
	--font-jp: "Noto Sans JP", sans-serif;
	/* 大きく見せる数字（料金・電話番号・手順番号）だけ Dela Gothic One */
	--font-num: "Dela Gothic One", "M PLUS 2", sans-serif;

	/*
	 * 文字サイズ：375px→1280px の線形補間。
	 * 上限が設計書の指定（見出し40px／最小16px）、
	 * 下限が375px以下の指定（見出し24px／最小10px）。
	 */
	--fs-display: clamp(24px, 17.37px + 1.77vw, 40px);
	--fs-h2: clamp(22px, 17.03px + 1.33vw, 34px);
	--fs-h3: clamp(18px, 15.51px + 0.66vw, 24px);
	--fs-h4: clamp(17px, 15.76px + 0.33vw, 20px);
	--fs-body: clamp(15px, 14.17px + 0.22vw, 17px);
	--fs-small: clamp(12px, 10.34px + 0.44vw, 16px);
	--fs-label: clamp(11px, 9.34px + 0.44vw, 15px);
	/* 料金・電話番号など、大きく見せる数字 */
	--fs-num: clamp(32px, 18.5px + 3.6vw, 64px);

	/* 余白：コンテンツ同士の余白は基本的に統一する */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--section-y: clamp(48px, 3vw + 32px, 88px);
	--gap: clamp(16px, 1.6vw + 8px, 24px);
	/* 積み木の中の余白 */
	--block-pad: clamp(28px, 3vw + 12px, 64px);

	/*
	 * 角丸。積み木なので、四隅そろえて控えめに。
	 * まるっこくすると、姉妹サイトのキュートポップに寄ってしまう。
	 */
	--r-sm: 8px;
	--r: 14px;
	--r-lg: 20px;
	--r-pill: 999px;

	/* レイアウト */
	--container: 1400px;
	--container-narrow: 800px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 64px;
}

@media (min-width: 900px) {
	:root {
		--header-h: 84px;
	}
}

/* --------------------------------------------------------------------------
   2. 積み木の色

   .block は「色の付いた四角」。どの色になるかは .is-◯◯ で決める。

   **黄（#fff100）の面だけ黒文字、それ以外はすべて白文字**（ご指定）。
   明るさから計算するのはやめて、決めごとをここに書いてある。
   -------------------------------------------------------------------------- */

.is-c1 {
	--block-bg: var(--c-red);
	--block-fg: var(--white);
}

.is-c2 {
	--block-bg: var(--c-orange);
	--block-fg: var(--white);
}

.is-c3 {
	--block-bg: var(--c-yellow);
	--block-fg: var(--black);
}

.is-c4 {
	--block-bg: var(--c-blue);
	--block-fg: var(--white);
}

/* サービスページ用。色は body の style から入ってくる */
.is-main {
	--block-bg: var(--main);
	--block-fg: var(--on-main);
}

.is-accent {
	--block-bg: var(--accent);
	--block-fg: var(--on-accent);
}

/*
 * 色の付いた面の上に、白い積み木を置くとき。
 * 変数は親から引き継がれるので、白へ戻すのも明示的に書く。
 */
.is-white {
	--block-bg: var(--white);
	--block-fg: var(--black);
}

.block {
	background: var(--block-bg, var(--white));
	color: var(--block-fg, var(--black));
	border-radius: var(--r);
}

/* 版面いっぱいの大きな積み木 */
.block--wide {
	padding: var(--block-pad);
	border-radius: var(--r-lg);
}

/*
 * 節そのものに色を敷くとき。
 * 画面いっぱいの色の面になり、切り替えは円弧か直線のどちらか。
 */
.section.is-c1,
.section.is-c2,
.section.is-c3,
.section.is-c4,
.section.is-main,
.section.is-accent,
.page-header {
	background: var(--block-bg);
	color: var(--block-fg);
}

/* --------------------------------------------------------------------------
   面の切り替え

   使えるのは「円弧」と「直線」の2つだけ。
   直線のときは何も置かない（節と節が突き当たる）。
   -------------------------------------------------------------------------- */

.arc {
	line-height: 0;
	position: relative;
	/* 境目に、拡大の端数で1pxの線が出ないように重ねる */
	margin-block: -1px;
}

.arc svg {
	width: 100%;
	height: clamp(48px, 6vw, 112px);
	display: block;
}

.arc--from-white {
	background: var(--white);
}

.arc--from-main {
	background: var(--main);
}

.arc--from-accent {
	background: var(--accent);
}

.arc--to-white svg path {
	fill: var(--white);
}

.arc--to-main svg path {
	fill: var(--main);
}

.arc--to-accent svg path {
	fill: var(--accent);
}

/* 色を .is-◯◯ で受け取るとき */
.arc--to-block svg path {
	fill: var(--block-bg);
}

/* --------------------------------------------------------------------------
   3. リセット / ベース
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	overflow-x: clip;
}

body {
	margin: 0;
	/* 地はどのページも白 */
	background: var(--white);
	color: var(--black);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	/* 見出しと並べたときに痩せて見えないよう、本文はやや太めに */
	font-weight: 500;
	/* 行間は詰めすぎず、あけすぎない */
	line-height: 1.75;
	letter-spacing: 0.04em;
	text-align: center;
	font-feature-settings: "palt" 1;
	overflow-wrap: anywhere;
	word-break: normal;
	/* 禁則処理 */
	line-break: strict;
	overflow-x: clip;
}

/* 斜体禁止 */
i,
em,
cite,
address,
dfn,
var {
	font-style: normal;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * <picture> は webp を先に渡すための入れ物でしかない。
 * 箱として数えると、中の img に高さの上限が効かず、はみ出す。
 */
picture {
	display: contents;
}

a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.28em;
}

a:hover {
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure,
dl,
dd {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-jp-head);
	font-weight: 800;
	line-height: 1.45;
	/* 字間は最大3px。見出しは締めて組む */
	letter-spacing: 0.02em;
	/* 狭い画面で最後の1文字だけが次の行に落ちるのを防ぐ */
	text-wrap: balance;
}

.section-head__lead,
.page-header__lead,
.cta__lead {
	text-wrap: pretty;
}

p {
	margin: 0;
}

/* 行間を詰めるかわりに、段落の切れ目は広く取る */
p + p {
	margin-top: 1.7em;
}

strong,
b {
	font-weight: 700;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/*
 * 数字はすべて日本語フォントで組む。
 * 大きく見せる数字（.num--display）だけ Dela Gothic One。
 */
.num {
	font-family: var(--font-jp);
	font-feature-settings: normal;
}

.num--display {
	font-family: var(--font-num);
	font-weight: 400;
	letter-spacing: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--s-3) var(--s-5);
	background: var(--black);
	color: var(--white);
	border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   4. レイアウト部品
   -------------------------------------------------------------------------- */

.container {
	width: min(100% - var(--gutter) * 2, var(--container));
	margin-inline: auto;
}

/* 本文とフォームだけ、狭い版面で組む */
.container--narrow {
	width: min(100% - var(--gutter) * 2, var(--container-narrow));
	margin-inline: auto;
}

.section {
	position: relative;
	padding-block: var(--section-y);
}

/* 積み木を続けて積むところは、間を詰める */
.section--tight {
	padding-block: var(--s-3);
}

.section--tight + .section:not(.section--tight) {
	padding-top: var(--section-y);
}

.section__block {
	margin-top: var(--s-9);
}

.section__foot {
	margin-top: var(--s-7);
}

/* --------------------------------------------------------------------------
   5. 見出し / ラベル
   -------------------------------------------------------------------------- */

.section-head {
	margin-bottom: var(--s-7);
	text-align: left;
}

/*
 * 節の見出し。大きな英字（Archivo Black）の横に日本語を置く。
 * ポップの印象は、この英字の大きさで出す（モック「何で遊ぶ？」の方向）。
 * 寸法はモック（1920px幅）の実測値。
 */
.section-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	/* 英字と日本語のあいだ。モックの実測で 1920:47 */
	column-gap: clamp(10px, 2.45vw, 47px);
	row-gap: 0.1em;
	text-align: left;
}

.section-head__en {
	font-family: var(--font-en-head);
	/* 英字はすべて頭文字のみ大文字 */
	text-transform: none;
	/* モックの実測で 1920:138（大文字の高さ100px から逆算） */
	font-size: clamp(32px, 7.2vw, 138px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: inherit;
}

.section-head__title {
	font-size: clamp(19px, 3.2vw, 62px);
	line-height: 1.3;
}

/*
 * 小さなラベル。いまは使っていないが、部品として残してある。
 */
.label {
	display: inline-block;
	font-family: var(--font-en-head);
	font-size: var(--fs-label);
	/* 英字はすべて頭文字のみ大文字。text-transform では変えない */
	text-transform: none;
	letter-spacing: 0.14em;
	line-height: 1;
	padding: 0.62em 1.1em 0.55em;
	border-radius: var(--r-sm);
	/*
	 * 色の面の上では、その面の色を反転させる。
	 * 白い地の上（--block-* が無いところ）ではブランドの赤。
	 */
	background: var(--block-fg, var(--main));
	color: var(--block-bg, var(--on-main));
	margin-bottom: var(--s-5);
}

.section-head__lead {
	margin-top: var(--s-5);
	font-size: var(--fs-body);
	text-align: left;
}

/*
 * キャッチコピー。「EIKICHI チームビルディングとは」の頭に置く一行。
 * ヒーローには出さない（ヒーローはモックどおり絵だけ）。
 */
.catchcopy {
	margin: calc(var(--s-7) * -1 + var(--s-2)) auto var(--s-7);
	/* 広い画面では1行で読ませる。折れるとキャッチコピーに見えなくなる */
	max-width: 34em;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h3);
	line-height: 1.5;
	text-wrap: balance;
}

/* 原稿の意味のまとまりで改行しているので、行の途中で切れないようにする */
.statement {
	max-width: 60em;
	margin-inline: auto;
}

.statement p + p {
	margin-top: 1.9em;
}

/* --------------------------------------------------------------------------
   6. ヘッダー / ナビ
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-header__inner {
	width: min(100% - var(--gutter) * 2, var(--container));
	margin-inline: auto;
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--s-5);
}

.site-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.site-logo__img {
	height: clamp(26px, 2.4vw, 38px);
	width: auto;
}

.nav {
	display: none;
	margin-left: auto;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 28px);
}

.nav__list > .menu-item {
	position: relative;
}

.nav__list > .menu-item > a {
	display: block;
	padding-block: var(--s-3);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	text-decoration: none;
	white-space: nowrap;
}

.nav__list > .menu-item > a:hover,
.nav__list > .current-menu-item > a,
.nav__list > .current-menu-ancestor > a {
	color: var(--c-red);
}

/* 提供サービスの子メニュー */
.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 17em;
	padding: var(--s-3);
	background: var(--white);
	border: 2px solid var(--c-red);
	border-radius: var(--r);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.16s ease, visibility 0.16s ease;
}

.nav .menu-item-has-children:hover .sub-menu,
.nav .menu-item-has-children:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
}

.nav .sub-menu a {
	display: block;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	text-decoration: none;
}

.nav .sub-menu a:hover {
	background: var(--c-red);
	color: var(--white);
}

.header__cta {
	display: none;
}

.header__contact {
	display: inline-block;
	padding: var(--s-3) var(--s-5);
	background: var(--c-red);
	color: var(--white);
	border-radius: var(--r-sm);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	text-decoration: none;
	white-space: nowrap;
}

/* 色を足さずに、少し沈めるだけにする */
.header__contact:hover {
	filter: brightness(0.85);
}

/* ハンバーガー */
.nav-toggle {
	margin-left: auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	border: 2px solid var(--c-red);
	color: var(--c-red);
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 5px;
	width: 20px;
}

/*
 * 三本線には幅を持たせる。親まかせにすると、Safari が button に当てる
 * align-items: center で幅0に潰れて見えなくなる（姉妹サイトで実際に起きた）。
 */
.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* 引き出しメニュー */
.drawer {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 99;
	padding: var(--s-7) var(--gutter) var(--s-9);
	background: var(--white);
	overflow-y: auto;
	text-align: left;
}

.drawer__list > .menu-item > a {
	display: block;
	padding: var(--s-4) 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h4);
	text-decoration: none;
}

.drawer__list .sub-menu {
	padding: var(--s-2) 0 var(--s-4);
}

.drawer__list .sub-menu a {
	display: block;
	padding: var(--s-3) 0 var(--s-3) var(--s-5);
	font-size: var(--fs-body);
	text-decoration: none;
}

.drawer__list .sub-menu a::before {
	content: "└";
	margin-right: var(--s-2);
	color: var(--c-red);
}

.drawer__cta {
	display: grid;
	gap: var(--s-3);
	margin-top: var(--s-7);
}

.drawer__tel {
	margin-top: var(--s-6);
	text-align: center;
}

.drawer__tel a {
	font-size: clamp(28px, 7vw, 36px);
	color: var(--c-red);
	text-decoration: none;
}

.drawer__tel-hours {
	display: block;
	font-size: var(--fs-small);
}

@media (min-width: 900px) {
	.nav,
	.header__cta {
		display: block;
	}

	.nav-toggle,
	.drawer {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   7. ヒーロー

   2026-09-16 にいただいた「ヒーローモック3（PC）」「ヒーローモックモバイル」のとおり。
   白い地 ＋ キャラクター4体 ＋ まわりの積み木 ＋ 赤い英文 ＋ 赤い帯。

   絵として貼らずに組み直しているのは、画面幅に追従させるためと、
   文章をあとから直せるようにするため。寸法はモック（1920px幅）の実測値。
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background-color: var(--white);
	overflow: hidden;
}

/*
 * キャラクターを置く舞台。赤い帯の上までの高さ（1920:1124）。
 * 足もとはここからはみ出して、赤い帯の下に隠れます。
 */
.hero__stage {
	position: relative;
	aspect-ratio: 1920 / 1124;
}

.hero__chara {
	position: absolute;
	width: var(--w);
	left: var(--left);
	top: var(--top);
	height: auto;
	/* 大きさと左右の位置は PHP 側（eikichi_hero_charas）から流し込む */
}

/* まわりの積み木。キャラクターのうしろに置きます */
.hero__blocks {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__block {
	position: absolute;
	height: auto;
}

/*
 * 置き場所と大きさは、モックの実測（1920px幅のとき）。
 * 向きもモックに合わせて、傾けたり左右を反転させています。
 */
.hero__block--1 {
	left: 12.5%;
	top: 17.26%;
	width: 12.19%;
	transform: scaleX(-1) rotate(12deg);
}

.hero__block--2 {
	left: 63.02%;
	top: 1.42%;
	width: 10.36%;
	transform: rotate(35deg);
}

.hero__block--3 {
	left: 88.49%;
	top: 36.48%;
	width: 17.5%;
	transform: rotate(-10deg);
}

.hero__block--4 {
	left: -2.5%;
	top: 48%;
	width: 16%;
	transform: scaleX(-1) rotate(-18deg);
}

.hero__block--5 {
	left: 57.19%;
	top: 74.64%;
	width: 9.84%;
	transform: rotate(-6deg);
}

/* 赤い帯。ここでキャラクターの足もとが切れます（1920:120） */
.hero-band {
	position: relative;
	z-index: 5;
	height: clamp(24px, 6.25vw, 120px);
	background: var(--c-red);
}

@media (max-width: 599.98px) {
	/*
	 * 手のひらの画面（ご指定 2026-09-16）。モバイルのモックのとおり。
	 *   ・キャラクターは足もとまで見せる
	 *   ・まわりの積み木は、モックに無いので出さない
	 */
	.hero__blocks {
		display: none;
	}

	/*
	 * 大きさはモバイルのモックの実測（キャラクターの大きさが画面の 1.73 倍）。
	 * これ以上大きくすると、左右の2人が切れてしまいます。
	 */
	.hero__stage {
		width: 173%;
		margin-left: -36.5%;
		aspect-ratio: 1920 / 1455;
	}

	.hero__chara {
		/* 大きさと置き場所は、スマホのモックに合わせた別の値 */
		width: var(--w-sp);
		left: var(--left-sp);
		top: var(--top-full);
	}

	.hero-band {
		height: 8.46vw;
	}
}

/* --------------------------------------------------------------------------
   ヒーローの文章（白い面）

   2026-09-16 のモックで、青いドームをやめて白い面になりました。
   文章は左、積み木の車は右。文字の大きさは前のままです（ご指定）。
   -------------------------------------------------------------------------- */

.hero-statement {
	position: relative;
	z-index: 4;
	background: var(--white);
	color: var(--black);
	/* モックの実測で 1920:82 */
	padding-top: clamp(28px, 4.3vw, 82px);
	padding-bottom: var(--section-y);
	text-align: left;
}

.hero-statement__inner {
	/* 左 1920:113 / 右 1920:48 */
	padding-inline: clamp(16px, 5.9vw, 113px) clamp(16px, 2.5vw, 48px);
}

@media (min-width: 900px) {
	.hero-statement__inner {
		display: grid;
		/* 文章と車の割り付けは、モックの実測 */
		grid-template-columns: minmax(0, 1fr) 41%;
		align-items: start;
		column-gap: clamp(16px, 1.5vw, 28px);
	}
}

.hero-statement__title {
	/* ほかの見出しと同じ大きさにそろえる（ご指定） */
	font-size: var(--fs-display);
	line-height: 1.45;
	color: var(--black);
	letter-spacing: 0.04em;
}

.hero-statement__body {
	margin-top: var(--s-6);
	text-align: left;
	font-size: var(--fs-body);
	line-height: 1.9;
	letter-spacing: 0.06em;
}

.hero-statement__body p + p {
	margin-top: 1.2em;
}

/* **…** で囲んだところは、白い面なので赤で目立たせる */
.hero-statement__body strong {
	color: var(--c-red);
	font-weight: 700;
}

.hero-statement .section__foot {
	text-align: left;
}

.hero-statement__car {
	margin: 0;
	line-height: 0;
	/* モックの実測で 5.4度 かたむいています */
	rotate: 5.4deg;
}

.hero-statement__car img {
	width: 100%;
	height: auto;
}

@media (max-width: 899.98px) {
	/* 狭い画面では、見出しは中央（モバイルのモックのとおり） */
	.hero-statement {
		text-align: center;
	}

	.hero-statement__title {
		text-align: center;
	}

	.hero-statement__car {
		margin-top: var(--s-6);
	}
}

/* --------------------------------------------------------------------------
   8. ボタン / テキストリンク
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-6);
	border-radius: var(--r-sm);
	border: 2px solid currentColor;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn__arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* 白い地の上 */
.btn--primary {
	background: var(--c-red);
	border-color: var(--c-red);
	color: var(--white);
}

.btn--primary:hover {
	filter: brightness(0.85);
}

.btn--outline {
	background: transparent;
	border-color: currentColor;
}

.btn--outline:hover {
	background: currentColor;
	color: var(--white);
	filter: none;
}

/*
 * 色の面の上に置く［詳しく見る］。白い塗りに、その面の色の字にします
 * （ご指定 2026-09-18）。--sec-on は面の地の色で、eikichi_world_style が
 * セクションに入れています。
 */
.btn--on-color {
	background: var(--white);
	border-color: var(--white);
	color: var(--sec-on, var(--c-red));
}

.btn--on-color:hover {
	filter: brightness(0.9);
}

/*
 * 積み木の上に置くボタンは、その積み木の色を反転させる。
 * 面の色が何であっても、まぎれずに読める。
 */
.block .btn--primary {
	background: var(--block-fg);
	border-color: var(--block-fg);
	color: var(--block-bg);
}

.block .btn--primary:hover {
	opacity: 0.85;
	background: var(--block-fg);
	border-color: var(--block-fg);
	color: var(--block-bg);
}

.btn-note {
	display: block;
	margin-top: var(--s-2);
	font-size: var(--fs-small);
}

.more {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
}

.more__arrow {
	transition: transform 0.15s ease;
}

.more:hover .more__arrow {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   9. カード（積み木）
   -------------------------------------------------------------------------- */

.cards {
	display: grid;
	gap: var(--gap);
}

/* サービスは2×2。設計書「カード2×2」 */
.cards--service {
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.cards--service {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 3つのときは横一列。2列だと1枚だけ下に取り残される */
@media (min-width: 1000px) {
	.cards--service-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card--service {
	display: flex;
}

/* カードそのものがサービスの色の積み木 */
.card--service .card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--s-5);
	text-decoration: none;
	transition: transform 0.18s ease;
}

.card--service .card__link:hover {
	transform: translateY(-4px);
}

.card--cooking .card__link {
	--block-bg: var(--c-yellow);
	--block-fg: var(--black);
}

.card--art .card__link {
	--block-bg: var(--c-orange);
	--block-fg: var(--white);
}

/* お料理は黄、拳は赤（ご指定）。4枚が別の色になる */
.card--fist .card__link {
	--block-bg: #ed0510;
	--block-fg: var(--white);
}

.card--jump .card__link {
	--block-bg: var(--c-blue);
	--block-fg: var(--white);
}

/*
 * 絵の縦横比がまちまち（縦長の人物と、手足を広げた横長の人物）なので、
 * 置き場所の大きさをそろえて、その中に収める。
 * 白い窓を開けて、そこに絵を置く。
 *
 * 絵は絶対配置で置いている。ふつうに流し込むと、
 * 縦並びの flex や grid の都合で高さの指定が効かず、
 * 頭だけが見えて切れてしまうため。
 */
.card__figure {
	position: relative;
	display: block;
	height: clamp(180px, 20vw, 260px);
	flex: 0 0 auto;
	overflow: hidden;
	margin-bottom: var(--s-5);
	background: var(--white);
	border-radius: var(--r-sm);
}

/* 箱に収める（object-fit: contain）。切り取らない。
   幅と高さは calc で書き下す。画像のような置換要素は、
   inset を四方に指定しても引き伸ばされず、元の大きさのままになるため。 */
.card__chara {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	width: calc(100% - var(--s-4) * 2);
	height: calc(100% - var(--s-4) * 2);
	object-fit: contain;
}

.card__body {
	display: flex;
	flex-direction: column;
	/* ラベルや「詳しく見る」が横いっぱいに伸びないよう、中央で止める */
	align-items: center;
	flex: 1 1 auto;
	padding-inline: var(--s-3);
}

.card__title {
	display: block;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h3);
	line-height: 1.4;
}

.card__catch {
	display: block;
	margin-top: var(--s-3);
	font-size: var(--fs-small);
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: auto;
	padding-top: var(--s-5);
	padding-bottom: var(--s-2);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
}

.card--service .card__link:hover .card__arrow {
	transform: translateX(4px);
}

.card__arrow {
	transition: transform 0.15s ease;
}

/* 利用企業は3×2（一覧ページは同じ形のまま全件） */
.cards--client {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-3);
}

@media (min-width: 700px) {
	.cards--client {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gap);
	}
}

.card--client {
	display: grid;
	place-items: center;
	min-height: clamp(88px, 10vw, 120px);
	padding: var(--s-5);
}

.card__client-name {
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.clients__note {
	margin-top: var(--s-6);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   10. 下層ページの見出し / パンくず
   -------------------------------------------------------------------------- */

/*
 * 下層ページの見出し。全ページ共通の顔。
 * 画面いっぱいの色の面を、下だけ円弧で切る。
 */
.page-header {
	position: relative;
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(64px, 8vw, 128px);
}

/*
 * 円弧は左右に6%はみ出させて作っている。
 * 親の側で横のはみ出しを切っておく（html / body の overflow-x: clip）。
 */
.page-header__arc {
	position: absolute;
	left: -6%;
	right: -6%;
	bottom: -1px;
	height: clamp(32px, 4vw, 64px);
	background: var(--white);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}

/*
 * ページ名の英字。節の見出しと同じ扱いで、ここが一番大きい。
 * 読み上げには出さない（日本語の見出しと二重になるため）。
 */
.page-header__en {
	font-family: var(--font-en-head);
	text-transform: none;
	font-size: clamp(40px, 6.2vw, 119px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	margin-bottom: clamp(4px, 0.5vw, 10px);
}

.page-header__title {
	font-size: clamp(19px, 3.2vw, 62px);
	line-height: 1.3;
}

.page-header__catch {
	margin-top: var(--s-5);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h3);
}

.page-header__lead {
	margin-top: var(--s-5);
	font-size: var(--fs-body);
}

/*
 * パンくず。版面の中央ではなく、画面の左上の端に小さく置きます（ご指定）。
 * 読み手が見る情報ではなく、迷ったときの目印なので、目立たせません。
 */
.breadcrumb {
	padding-block: var(--s-3);
	font-size: var(--fs-small);
	opacity: 0.7;
}

.breadcrumb__inner {
	padding-inline: clamp(12px, 1.6vw, 30px);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--s-2);
	text-align: left;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: var(--s-2);
	opacity: 0.5;
}

.breadcrumb__item a {
	text-decoration: none;
}

.breadcrumb__item a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. サービスページ
   -------------------------------------------------------------------------- */

.service-intro {
	display: grid;
	gap: var(--gap);
	align-items: center;
	justify-content: center;
	padding-block: var(--s-6);
}

@media (min-width: 900px) {
	.service-intro {
		/*
		 * 本文は読みやすい長さで止めて、余った幅を絵に渡す。
		 * 1fr auto にすると、3行しかない本文が横いっぱいに広がって
		 * 上下に大きな空きができてしまう。
		 */
		grid-template-columns: minmax(0, 46em) auto;
		gap: var(--s-9);
		text-align: left;
	}
}

.service-intro__chara {
	height: clamp(180px, 20vw, 260px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
}

/* 「〇〇から生まれる、チームの変化」 */
.benefits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
}

.benefits__item {
	padding: var(--s-3) var(--s-5);
	background: var(--block-fg, var(--main));
	color: var(--block-bg, var(--white));
	border-radius: var(--r-sm);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	line-height: 1.4;
}

.scenes {
	margin-top: var(--s-8);
}

.scenes__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--s-5);
}

.scenes__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2) var(--s-3);
}

.scenes__item {
	padding: var(--s-2) var(--s-4);
	border: 2px solid currentColor;
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
}

/* サービスの流れ。1段ごとに色を入れ替えて、積み木を積んだ見た目にする */
.flow {
	display: grid;
	gap: var(--s-3);
	text-align: left;
	max-width: 900px;
	margin-inline: auto;
}

.flow__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-5);
	align-items: start;
	padding: var(--s-5) var(--s-6);
	/* 地は白のまま、色は枠で出す。説明文を読みやすくするため */
	border: 3px solid var(--main);
}

/* 分数は、そのページの色の四角に載せる */
.flow__time {
	display: grid;
	place-items: center;
	width: clamp(56px, 8vw, 76px);
	height: clamp(56px, 8vw, 76px);
	border-radius: var(--r-sm);
	background: var(--main);
	color: var(--on-main);
	line-height: 1;
}

.flow__min {
	font-size: clamp(20px, 2.4vw, 28px);
}

.flow__unit {
	font-size: var(--fs-label);
	margin-top: 2px;
}

.flow__title {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	font-size: var(--fs-h4);
}

.flow__no {
	font-size: 1.2em;
	line-height: 1;
	color: var(--main);
}

.flow__text {
	margin-top: var(--s-2);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   12. 料金
   -------------------------------------------------------------------------- */

.plans {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.plans {
		grid-template-columns: repeat(3, 1fr);
	}

	.plans--single {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
	}
}

.plan {
	display: flex;
	flex-direction: column;
	padding: var(--s-7) var(--s-6);
}

.plan__name {
	font-size: var(--fs-h3);
}

.plan__catch {
	margin-top: var(--s-2);
	font-size: var(--fs-small);
}

.plan__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--s-1);
	margin-top: var(--s-5);
	line-height: 1;
}

.plan__yen {
	font-family: var(--font-num);
	font-size: clamp(20px, 2.4vw, 30px);
}

.plan__amount {
	font-size: var(--fs-num);
}

.plan__per {
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
}

.plan__tax {
	margin-top: var(--s-2);
	font-size: var(--fs-small);
}

.plan__items {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: 2px solid currentColor;
	font-size: var(--fs-small);
	text-align: left;
}

.plan__items li {
	padding-left: 1.4em;
	position: relative;
}

.plan__items li::before {
	content: "■";
	position: absolute;
	left: 0;
	font-size: 0.7em;
	top: 0.5em;
}

.plan .btn {
	margin-top: var(--s-6);
	align-self: center;
}

/* 白いプランの上でも、ボタンはそのページの色にする */
.plan .btn--primary {
	background: var(--main);
	border-color: var(--main);
	color: var(--on-main);
}

.plan .btn--primary:hover {
	filter: brightness(0.85);
	opacity: 1;
}

.options {
	margin-top: var(--s-8);
}

.options__title {
	font-size: var(--fs-h4);
	margin-bottom: var(--s-4);
}

.options__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	font-size: var(--fs-small);
}

.options__list li {
	padding: var(--s-2) var(--s-5);
	border: 2px solid currentColor;
	border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   12-2. ABOUT

   「EIKICHIの定義」は、いただいた図（青いグラデーションの円が5つ）の
   中身を組み直したもの。図の色が指定の色に入っていないのと、
   狭い画面で字が読めなくなるため、絵ではなく組み版で作っている。
   -------------------------------------------------------------------------- */

/*
 * EIKICHIの定義。いただいた積み木のイラストを、01〜05の順に並べます。
 *
 * 下ぞろえにして、1つずつ決めた分だけ持ち上げています（定義.png の段差）。
 * 言葉の位置と大きさは、いただいたSVGの中の値を％に直して style で入れています。
 * cqw を使うので、並びが細くなっても文字だけ大きく残る、ということが起きません。
 */
.defs {
	list-style: none;
	margin: clamp(24px, 3vw, 56px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
}

.defs__item {
	container-type: inline-size;
	position: relative;
	flex: 0 0 auto;
	width: var(--w);
	/* 積み木どうしを少し重ねる（定義.png のとおり） */
	margin-inline: -0.6%;
	margin-bottom: var(--drop);
	line-height: 0;
}

.defs__shape {
	display: block;
	width: 100%;
	height: auto;
}

.defs__no,
.defs__word {
	position: absolute;
	line-height: 1;
	color: var(--black);
	/* SVGは文字の下端（ベースライン）で位置が決まっているので、その分だけ上へ */
	transform: translateY(-0.78em);
	white-space: pre-line;
	pointer-events: none;
}

.defs__no {
	font-family: var(--font-en-head);
	letter-spacing: 0.02em;
}

.defs__word {
	font-family: var(--font-jp-head);
	font-weight: 800;
}

@media (max-width: 699.98px) {
	/*
	 * 狭い画面では横に5つ並べると小さくなりすぎるので、2つずつ。
	 * 段差もやめて、下ぞろえにします。
	 */
	.defs__item {
		width: 44%;
		margin-inline: 0;
		margin-bottom: clamp(12px, 4vw, 24px);
	}
}
.effects {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.effects {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.effects {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * 効果の箱。地の色は置かず、1pxの枠線で囲みます（ご指定）。
 * 白い地に細い線だけなので、中の字がそのまま読めます。
 */
.effect {
	padding: var(--s-6);
	border: 1px solid var(--black);
	border-radius: var(--r);
	background: var(--white);
	color: var(--black);
}

.effect__title {
	font-size: var(--fs-h3);
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-4);
	/* 見出しの下の線も、枠に合わせて細くする */
	border-bottom: 1px solid currentColor;
}

.effect__list {
	display: grid;
	gap: var(--s-2);
	font-size: var(--fs-small);
	text-align: left;
}

.effect__list li {
	position: relative;
	padding-left: 1.5em;
}

.effect__list li::before {
	content: "◉";
	position: absolute;
	left: 0;
}

/* --------------------------------------------------------------------------
   13. 共通していること（提供サービス一覧）
   -------------------------------------------------------------------------- */

.points {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.points {
		grid-template-columns: repeat(3, 1fr);
	}
}

.point {
	padding: var(--s-6);
}

.point__title {
	font-size: var(--fs-h4);
}

.point__text {
	margin-top: var(--s-3);
	font-size: var(--fs-small);
	text-align: left;
}

/* --------------------------------------------------------------------------
   14. お問い合わせへの誘導（赤い面）

   2026-09-16 にいただいた「フッターモック.jpg」の実測（1920px幅のとき）。
   赤い面の下は、フッターの白い面に直線で突き当たります。
   -------------------------------------------------------------------------- */

.cta-band {
	/* 上の面とぴったり突き当てる。角丸から上の面の色がのぞく */
	margin-top: 0;
	/* ページごとのテーマカラー。指定が無いときはブランドの赤 */
	background: var(--cta-bg, var(--c-red));
	color: var(--cta-fg, var(--white));
	/* 上の角だけ大きく落とす。モックの実測で 1920:115 */
	border-radius: clamp(28px, 6vw, 115px) clamp(28px, 6vw, 115px) 0 0;
	/* 文字の上 1920:76、下 1920:74 */
	padding-top: clamp(30px, 3.95vw, 76px);
	padding-bottom: clamp(30px, 3.85vw, 74px);
}

.cta {
	/* 左右の余白は、モックの実測で 1920:223 */
	padding-inline: clamp(20px, 11.6vw, 223px);
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	/* 文章は左、ボタンは右。上でそろえる（モックのとおり） */
	align-items: start;
	text-align: left;
}

@media (min-width: 900px) {
	/* 文章は左端、ボタンは右端まで離します（モックのとおり） */
	.cta {
		/* ボタンの列は、モックの実測で 1920:478 */
		grid-template-columns: auto clamp(240px, 24.9vw, 478px);
		justify-content: space-between;
		column-gap: clamp(32px, 4vw, 76px);
	}
}

.cta__en {
	font-family: var(--font-en-head);
	text-transform: none;
	/* 文字の大きさは、前のままにします（ご指定 2026-09-16） */
	font-size: clamp(30px, 3.75vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.01em;
}

.cta__title {
	margin-top: clamp(4px, 0.6vw, 12px);
	font-size: clamp(17px, 1.95vw, 37px);
	line-height: 1.25;
}

.cta__tel {
	margin-top: clamp(14px, 1.7vw, 33px);
	display: grid;
	gap: clamp(3px, 0.45vw, 9px);
}

.cta__tel-link {
	/*
	 * 電話番号は太くしません。モックでも見出しより軽く組んであります。
	 * 太字にすると、見出しと同じ強さになって順番が読めなくなります。
	 */
	font-weight: 400;
	font-size: clamp(22px, 2vw, 38px);
	line-height: 1.1;
	text-decoration: none;
	letter-spacing: 0.02em;
	/* 途中で折らない */
	white-space: nowrap;
}

.cta__tel-hours {
	font-size: clamp(12px, 0.95vw, 18px);
}

.cta__actions {
	display: grid;
	/* ボタンのあいだ。モックの実測で 1920:28 */
	gap: clamp(12px, 1.45vw, 28px);
	width: 100%;
}

/*
 * ボタン2つ。塗りと線で、どちらが本命かを分けています。
 * 高さはモックの実測で 1920:127。
 */
.cta-btn {
	display: grid;
	place-items: center;
	min-height: clamp(52px, 6.6vw, 127px);
	padding: 0.6em 1em;
	border-radius: clamp(12px, 1.8vw, 34px);
	border-style: solid;
	border-width: clamp(2px, 0.3vw, 6px);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(14px, 1.05vw, 20px);
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cta-btn--fill {
	background: var(--cta-fg, var(--white));
	color: var(--cta-bg, var(--c-red));
	border-color: var(--cta-fg, var(--white));
}

.cta-btn--outline {
	background: transparent;
	color: var(--cta-fg, var(--white));
	border-color: var(--cta-fg, var(--white));
}

.cta-btn:hover {
	transform: translateY(-2px);
}

.cta-btn--outline:hover {
	background: var(--cta-fg, var(--white));
	color: var(--cta-bg, var(--c-red));
}

/* --------------------------------------------------------------------------
   15. フォーム
   -------------------------------------------------------------------------- */

.contact-tel {
	padding: var(--s-6);
	margin-bottom: var(--s-8);
}

.contact-tel__label {
	font-size: var(--fs-small);
}

.contact-tel__number a {
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.2;
	text-decoration: none;
}

.contact-tel__hours {
	font-size: var(--fs-small);
}

.form {
	display: grid;
	gap: var(--s-6);
	text-align: left;
}

/* 人には見えない欄（自動送信よけ） */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__label {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-small);
	margin-bottom: var(--s-2);
}

.form__required {
	padding: 2px var(--s-3);
	background: var(--c-red);
	color: var(--white);
	border-radius: var(--r-sm);
	font-size: var(--fs-label);
	line-height: 1.6;
}

.form__note {
	margin-bottom: var(--s-2);
	font-size: var(--fs-small);
	opacity: 0.8;
}

.form__input {
	width: 100%;
	padding: var(--s-4);
	background: var(--white);
	color: var(--black);
	border: 2px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--r-sm);
	font: inherit;
	font-size: var(--fs-body);
}

.form__input:focus {
	border-color: var(--c-red);
	outline: none;
	box-shadow: 0 0 0 3px rgba(231, 31, 24, 0.18);
}

.form__input--textarea {
	resize: vertical;
	line-height: 1.75;
}

/* 日程が決まっていないときのチェック欄。カレンダーの下に置きます */
.form__check {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-3);
	font-size: var(--fs-small);
	cursor: pointer;
}

.form__check input {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--c-red);
}

/* チェックを入れているあいだ、カレンダーは休みます */
.form__input:disabled {
	background: rgba(0, 0, 0, 0.05);
	opacity: 0.7;
	cursor: not-allowed;
}

.form__row.is-error .form__input {
	border-color: var(--c-red);
	background: #fff6f6;
}

.form__error {
	margin-top: var(--s-2);
	color: var(--c-red);
	font-size: var(--fs-small);
	font-weight: 700;
}

.form-error--all {
	padding: var(--s-4) var(--s-5);
	margin-bottom: var(--s-6);
	border: 2px solid var(--c-red);
	border-radius: var(--r-sm);
	color: var(--c-red);
	font-weight: 700;
	text-align: left;
}

.form__policy {
	font-size: var(--fs-small);
}

.form__submit {
	text-align: center;
	margin-top: var(--s-3);
}

.form-done {
	padding: var(--s-8) var(--s-6);
	border: 3px solid var(--c-red);
	border-radius: var(--r-lg);
}

.form-done__title {
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h3);
	margin-bottom: var(--s-4);
}

.search-form {
	display: flex;
	gap: var(--s-3);
	justify-content: center;
}

.search-form__field {
	padding: var(--s-3) var(--s-4);
	border: 2px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--r-sm);
	font: inherit;
}

.search-form__submit {
	padding: var(--s-3) var(--s-5);
	background: var(--c-red);
	color: var(--white);
	border-radius: var(--r-sm);
	font-family: var(--font-jp-head);
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   16. 本文（管理画面から入れた内容）
   -------------------------------------------------------------------------- */

.entry {
	text-align: left;
}

.entry > * + * {
	margin-top: 1.7em;
}

.entry h2 {
	font-size: var(--fs-h2);
	margin-top: 2em;
}

.entry h3 {
	font-size: var(--fs-h3);
	margin-top: 2em;
}

.entry ul,
.entry ol {
	padding-left: 1.4em;
	list-style: disc;
}

.entry ol {
	list-style: decimal;
}

.entry li + li {
	margin-top: 0.5em;
}

.entry a {
	color: var(--c-red);
}

.entry img {
	border-radius: var(--r);
}

.entry table th,
.entry table td {
	padding: var(--s-3);
	border: 1px solid rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   17. 一覧・ページ送り
   -------------------------------------------------------------------------- */

.post-list {
	display: grid;
	gap: var(--s-3);
	text-align: left;
}

.post-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-5);
	border: 2px solid var(--c-red);
	border-radius: var(--r);
	text-decoration: none;
}

.post-list__link:hover {
	background: var(--c-red);
	color: var(--white);
}

.post-list__title {
	font-family: var(--font-jp-head);
	font-weight: 800;
}

.post-list__date {
	font-size: var(--fs-small);
}

.pagination {
	margin-top: var(--s-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--s-3);
	border: 2px solid var(--c-red);
	border-radius: var(--r-sm);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--c-red);
	color: var(--white);
}

/* --------------------------------------------------------------------------
   18. フッター（白い面）

   2026-09-16 にいただいた「フッターモック.jpg」の実測（1920px幅のとき）。
   赤いCTAの下に、直線で白い面が続きます。
   下には、定義（ABOUT）で使った積み木を並べます。下は切れたままです。
   -------------------------------------------------------------------------- */

.site-footer {
	/* CTAの赤とぴったり突き当てる。あいだに余白は入れない */
	margin-top: 0;
	position: relative;
	background: var(--white);
	color: var(--black);
	/* 項目が縦に並ぶので、ここは左揃えのほうが読みやすい */
	text-align: left;
	/* 積み木が下からはみ出した分を切る */
	overflow: hidden;
}

/* 下に並ぶ積み木。文字の下に敷きます */
.footer__blocks {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	z-index: 0;
	pointer-events: none;
}

.footer__block {
	position: absolute;
	height: auto;
}

/*
 * 置き場所と大きさは、モックの絵の位置から逆算した値です。
 * （モックの中の絵の左端・上端・幅を測り、SVGの余白ぶんを戻して出しています）
 */
.footer__block--1 {
	left: 0.49vw;
	width: 17.77vw;
	bottom: -7.08vw;
}

.footer__block--2 {
	left: 14.94vw;
	width: 14.5vw;
	bottom: -4.06vw;
}

.footer__block--3 {
	left: 27.31vw;
	width: 17.67vw;
	bottom: -6.4vw;
}

.footer__block--4 {
	left: 42.3vw;
	width: 13.05vw;
	bottom: -5.24vw;
}

.footer__block--5 {
	left: 54.33vw;
	width: 14.81vw;
	bottom: -15.97vw;
}

/* 文字は積み木の上に */
.footer__inner,
.footer__bottom {
	position: relative;
	z-index: 1;
}

.footer__inner {
	/* 左右の余白は、モックの実測で 1920:97 */
	padding-inline: clamp(16px, 5.05vw, 97px);
	padding-top: clamp(20px, 2.1vw, 40px);
	/* 積み木を置く場所をあける。モックの実測で 1920:171 */
	padding-bottom: clamp(130px, 8.9vw, 171px);
}

.footer__grid {
	display: grid;
	gap: clamp(32px, 3.4vw, 56px);
}

@media (min-width: 900px) {
	.footer__grid {
		/* モックの実測の割り付け。ロゴ / Menu / Service / Conntact */
		grid-template-columns: 37.8fr 14.5fr 24.1fr 23.6fr;
		gap: 0;
	}

	/* 英字の見出しの行は、ロゴより少し下から始まります */
	.footer__col {
		padding-top: clamp(0px, 1.7vw, 32px);
	}
}

.footer__logo-link {
	display: inline-block;
	line-height: 0;
}

.footer__logo {
	/* モックの実測で 1920:200 */
	width: clamp(120px, 10.4vw, 200px);
	height: auto;
}

.footer__tagline {
	margin-top: clamp(10px, 1.45vw, 28px);
	font-family: var(--font-jp-head);
	font-weight: 800;
	/* 文字の大きさは、前のフッターのまま（ご指定 2026-09-16） */
	font-size: clamp(13px, 0.95vw, 18px);
	letter-spacing: 0.04em;
}

/* SNS。黒い丸の中に白い印（モックのとおり） */
.footer__social {
	margin-top: clamp(10px, 0.7vw, 14px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(7px, 0.7vw, 13px);
}

.footer__social-link {
	display: grid;
	place-items: center;
	/* モックの実測で 1920:79 */
	width: clamp(40px, 4.1vw, 79px);
	height: clamp(40px, 4.1vw, 79px);
	border-radius: 50%;
	background: var(--black);
	color: var(--white);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.footer__social-link:hover {
	transform: translateY(-2px);
	background: var(--c-red);
}

.footer__social-icon {
	width: 55%;
	height: 55%;
}

/* 列の見出し。節の見出しと同じで、英字を大きく出す */
.footer__heading {
	font-family: var(--font-en-head);
	text-transform: none;
	/* 文字の大きさは、前のフッターのまま（ご指定 2026-09-16） */
	font-size: clamp(22px, 2.3vw, 44px);
	line-height: 1;
	letter-spacing: -0.01em;
	margin-bottom: clamp(16px, 2.7vw, 52px);
}

.footer__list {
	display: grid;
	gap: clamp(7px, 0.75vw, 14px);
	/* 文字の大きさは、前のフッターのまま（ご指定 2026-09-16） */
	font-size: clamp(13px, 0.95vw, 18px);
	line-height: 1.5;
}

.footer__list a {
	text-decoration: none;
}

.footer__list a:hover {
	text-decoration: underline;
}

.footer__list--cv {
	margin-top: clamp(18px, 3.8vw, 73px);
}

.footer__tel a {
	font-weight: 400;
	/* 文字の大きさは、前のフッターのまま（ご指定 2026-09-16） */
	font-size: clamp(21px, 1.8vw, 34px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-decoration: none;
	/* 電話番号は途中で折らない */
	white-space: nowrap;
}

.footer__hours {
	margin-top: clamp(8px, 1.8vw, 34px);
	font-size: clamp(12px, 0.9vw, 17px);
}

/* いちばん下の一行。列より外側まで広げる（モックのとおり） */
.footer__bottom {
	padding: 0 clamp(12px, 1.8vw, 35px) clamp(12px, 1.1vw, 21px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(8px, 0.8vw, 15px) clamp(16px, 1.5vw, 28px);
	/* 文字の大きさは、前のフッターのまま（ご指定 2026-09-16） */
	font-size: clamp(11px, 0.8vw, 15px);
}

.footer__bottom p {
	margin: 0;
}

.footer__bottom a {
	text-decoration: none;
}

.footer__bottom a:hover {
	text-decoration: underline;
}

.footer__bottom-right {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(10px, 2.6vw, 50px);
}

@media (max-width: 899.98px) {
	/*
	 * 積み木の並び（大きさ・左右の位置・高さの差）は、広い画面と同じです。
	 * 狭い画面では、置く「高さ」だけを変えます（ご指定 2026-09-18）。
	 *
	 *   資料ダウンロード
	 *   （すこし空ける）
	 *   ■■■  ← 積み木はこの空間に立てる
	 *   ───  ← 運営会社の行から下は白。積み木の足もとはここで切れる
	 *   運営：株式会社シクミーズ／プライバシーポリシー／©
	 */

	/*
	 * 積み木を、いちばん下の一行の上まで引き上げます。
	 * 上げすぎると足もとが白帯より上で終わって、宙に浮いて見えます。
	 * いちばん浅い2番（-4.06vw）の足が白帯に入る高さに収めています。
	 */
	.footer__blocks {
		bottom: clamp(40px, 12vw, 48px);
		/*
		 * 積み木を大きく（ご指定 2026-09-18）。
		 * 並びは広い画面のままで、全体をそのまま拡大します。広い画面では
		 * 右の3割に電話番号が入るので左69%に収めていますが、狭い画面は
		 * 1列なので右が空きます。そこまで使い切る倍率にしています。
		 */
		transform: scale(1.44);
		transform-origin: left bottom;
	}

	/* 運営会社の行から下は白。積み木の足もとを、この白で隠します */
	.footer__bottom {
		background: var(--white);
	}

	/*
	 * 積み木を置く場所。積み木は vw で大きくなるので、ここも vw で広げないと
	 * 画面が広いときに「資料ダウンロード」へ食い込みます。
	 * 「資料ダウンロード」との間は空けません（ご指定 2026-09-18）。
	 */
	.footer__inner {
		padding-bottom: calc(30vw + 4px);
	}
}

/*
 * 440px より狭いと、いちばん下の一行が2行に折り返します。
 * 白帯がその分厚くなるので、積み木を置く場所はここまで広げなくて済みます。
 */
@media (max-width: 440px) {
	.footer__inner {
		padding-bottom: calc(24vw + 4px);
	}
}
/* --------------------------------------------------------------------------
   24. サービスページの顔（4枚のモックの形）

   ロゴタイプ → キャッチ → 大きい写真 → 小さい写真3枚 → 本文。
   組み方は4つとも同じで、地の色と飾りだけがサービスごとに変わります。
   寸法はモック（1920px幅）の実測値。
   -------------------------------------------------------------------------- */

.svc {
	/* 既定は白い地に黒い字。サービスごとに下で入れ替える */
	--svc-bg: var(--white);
	--svc-fg: var(--black);

	position: relative;
	background: var(--svc-bg);
	color: var(--svc-fg);
	/* 飾りが画面の外へ出た分を切る */
	overflow: hidden;
	padding-top: clamp(12px, 1.4vw, 26px);
	padding-bottom: clamp(40px, 4.6vw, 88px);
	text-align: center;
}

/*
 * 地の色は、サービスごとに style 属性で流し込みます（管理画面の「世界観」）。
 * ここに書かないのは、サービスが増えてもCSSを書き足さずに済むようにするためです。
 */

.svc .breadcrumb {
	position: relative;
	z-index: 3;
	padding-top: 0;
	margin-bottom: clamp(10px, 1.2vw, 22px);
}

.svc__inner {
	position: relative;
	z-index: 2;
	/* モックの実測で、写真のカードは 1920:1328 */
	width: min(1328px, 100% - clamp(28px, 3vw, 56px) * 2);
	margin-inline: auto;
}

.svc__title {
	margin: 0;
	line-height: 0;
	text-align: center;
}

/* img は block なので、中央に置くには margin が要る */
.svc__logo {
	margin-inline: auto;
	width: auto;
	/* モックの実測は 1920:155。ひとまわり小さくしている */
	height: clamp(52px, 6.2vw, 118px);
}

.svc__title-text {
	font-size: clamp(22px, 2.6vw, 50px);
	line-height: 1.2;
}

.svc__catch {
	margin-top: clamp(8px, 0.9vw, 17px);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(16px, 1.75vw, 33px);
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* 大きい写真。モックの実測で 1328×676、角丸40px、黒枠3px */
.svc__main {
	margin: clamp(18px, 2.2vw, 42px) 0 0;
	aspect-ratio: 1328 / 676;
	border: 3px solid var(--black);
	border-radius: clamp(16px, 2.1vw, 40px);
	overflow: hidden;
	background: var(--white);
}

.svc__main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 小さい写真3枚。モックの実測で 419×280、間は42px */
.svc__thumbs {
	list-style: none;
	margin: clamp(10px, 1.2vw, 22px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.2vw, 22px);
}

.svc__thumb {
	aspect-ratio: 419 / 280;
	border: 3px solid var(--black);
	border-radius: clamp(12px, 1.5vw, 28px);
	overflow: hidden;
	background: var(--white);
}

.svc__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc__body {
	margin-top: clamp(20px, 2.4vw, 46px);
	font-size: var(--fs-body);
	text-align: center;
}

.svc__body p + p {
	margin-top: 1.6em;
}

/*
 * 本文の強調は、色を変えずに太さだけで出します（4枚のモックとも同じ）。
 * 地の色がサービスごとに違うので、色で強調すると4ページで揃わなくなります。
 */
.svc__body strong {
	color: inherit;
}

/*
 * 面と面の切り替え。
 *
 * サービスごとに形は1つだけ（ご指定）。
 *   お料理 … スカラップ ／ 拳 … 右上がりの斜め ／ ジャンプ … 波
 *
 * 地は上の面の色、形は下の面の色。形をくぐった先が次の面になります。
 */
.wdiv {
	line-height: 0;
}

.wdiv svg {
	display: block;
	width: 100%;
}

/*
 * 下の面との境目に細い線が出ないよう、下端2pxを下の面の色で塗っておきます。
 * SVGの高さが小数になったときに、地の色が1pxだけ残ってしまうためです。
 */
.wdiv {
	box-shadow: inset 0 -2px 0 currentColor;
}

/*
 * 上下を返した切り替え。形が下へふくらみます。
 * 地と形の色が入れ替わっているので、細い線を消すのは上端です。
 */
.wdiv--flip svg {
	transform: scaleY(-1);
}

.wdiv--flip {
	box-shadow: inset 0 2px 0 currentColor;
}

/* 姉妹サイトと同じ寸法。帯の高さは 幅/17 */
.wdiv--cooking svg {
	height: auto;
	aspect-ratio: 17 / 1;
}

.wdiv--fist svg {
	height: clamp(64px, 8vw, 155px);
}

.wdiv--jump svg {
	height: clamp(56px, 7vw, 135px);
}

/* 切り替えのすぐ下に来るCTAは、角を丸めない（形が二重になるため） */
.wdiv + .cta-band {
	border-radius: 0;
}
/* 分のかわりに順番を出す段は、「分」が無いぶん字を寄せる */
.flow__time--no .flow__min {
	padding-inline: 0.1em;
}

/* --------------------------------------------------------------------------
   25. ページごとの面の色（サービスの4ページ）

   色は data.php の 'sections' から style 属性で流し込みます。
   ここに書いてあるのは「流し込まれた色をどう使うか」だけです。
   -------------------------------------------------------------------------- */

.section--world {
	background: var(--sec-bg);
	color: var(--sec-fg);

	/*
	 * 面の上に置くものは、面の色を反転させます。
	 * ラベルやタイルが、面の色が何であってもまぎれずに読めます。
	 */
	--block-bg: var(--sec-bg);
	--block-fg: var(--sec-fg);
}

/* 流れのカードは白いまま。枠と分数のタイルで面の色を出す */
.section--world .flow__item {
	background: var(--white);
	color: var(--black);
	border-color: var(--sec-fg);
}

/*
 * ラベルの字は --sec-on。地が透けている面では、地の色をそのまま使うと
 * 字が消えてしまうためです。
 */
.section--world .benefits__item {
	background: var(--sec-fg);
	color: var(--sec-on, var(--sec-bg));
}

.section--world .flow__time {
	background: var(--sec-fg);
	color: var(--sec-on, var(--sec-bg));
}

/* 料金のカードも白いまま */
.section--world .plan {
	background: var(--white);
	color: var(--black);
	--block-bg: var(--white);
	--block-fg: var(--black);
}

/* 白い面のときは、枠が消えないよう薄い線を足す */
.section--world .flow__item,
.section--world .plan {
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   27. ページ送り
   -------------------------------------------------------------------------- */

.pager {
	margin-top: clamp(32px, 3.4vw, 64px);
}

.pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(6px, 0.6vw, 12px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pager__link {
	display: grid;
	place-items: center;
	min-width: clamp(38px, 2.8vw, 54px);
	min-height: clamp(38px, 2.8vw, 54px);
	padding: 0 0.5em;
	border: 3px solid var(--c-red);
	border-radius: var(--r-sm);
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(14px, 1.05vw, 20px);
	line-height: 1;
	text-decoration: none;
	color: var(--c-red);
	background: var(--white);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pager__link:hover,
.pager__link.is-current {
	background: var(--c-red);
	color: var(--white);
}

/* --------------------------------------------------------------------------
   28. ABOUT の書き出し

   いただいたアートボードのとおり、白い地に見出しと本文だけ。
   上に色の面は置きません。
   -------------------------------------------------------------------------- */

.section--statement {
	text-align: center;
}

.statement__title {
	margin: 0 0 clamp(20px, 2.4vw, 46px);
	font-size: clamp(22px, 2.6vw, 50px);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   29. キャラクター

   見出しの右に1体、サービスの顔ではロゴタイプの左右に1体ずつ。
   飾りなので、文字には重ならない場所（見出しの右の余白）にだけ置きます。
   写真の上には置きません（写真が隠れて見づらくなるため）。
   -------------------------------------------------------------------------- */

/* 見出しの右。見出しの下端にそろえて、上へ伸ばします */
.section-head--chara .section-head__row {
	--chara-w: clamp(72px, 11vw, 190px);

	position: relative;
	/* キャラクターの分だけ右をあけて、長い見出しが折り返してもかぶらないように */
	padding-right: calc(var(--chara-w) + clamp(8px, 1.6vw, 28px));
	min-height: calc(var(--chara-w) * 0.55);
}

.section-head__chara {
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--chara-w);
	height: var(--chara-w);
	pointer-events: none;
}

.section-head__chara picture,
.section-head__chara-img,
.page-header__chara picture,
.page-header__chara-img,
.svc__chara picture,
.svc__chara-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* ページの見出し（お問い合わせ）。色の面の右下に */
.page-header__chara {
	position: absolute;
	right: max(clamp(16px, 4vw, 64px), calc((100% - var(--container)) / 2));
	bottom: clamp(24px, 4vw, 60px);
	width: clamp(64px, 11vw, 180px);
	height: clamp(64px, 11vw, 180px);
	pointer-events: none;
	z-index: 1;
}

/*
 * サービスの顔。ロゴタイプの左右に1体ずつ。
 * 下の写真にかからない高さに抑えています。
 */
.svc__chara {
	position: absolute;
	top: 0;
	width: clamp(44px, 10vw, 190px);
	height: clamp(44px, 10vw, 190px);
	z-index: 1;
	pointer-events: none;
}

.svc__chara--left {
	left: clamp(0px, 4vw, 80px);
}

.svc__chara--right {
	right: clamp(0px, 4vw, 80px);
}

.svc__title,
.svc__catch {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   19. 動き
   -------------------------------------------------------------------------- */

[data-eikichi-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-eikichi-reveal="in"] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	[data-eikichi-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   20. 写真

   現行サイトから取り込んだ、実際の開催風景。
   絵よりも写真のほうが「どんな日になるか」が伝わるので、
   カードの絵柄も写真にしている。
   -------------------------------------------------------------------------- */

.photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

@media (min-width: 800px) {
	.photos {
		grid-template-columns: repeat(4, 1fr);
	}
}

.photos--grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
	.photos--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.photos__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--white);
}

.photos__img {
	width: 100%;
	/* 縦横比がまちまちなので、そろえて切る。人が中心に写っている */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.photos__caption {
	display: block;
	padding: var(--s-3) var(--s-4);
	background: var(--white);
	color: var(--black);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-align: left;
}

/* 導入事例の、いちばん上の1枚 */
.case-hero {
	margin-bottom: var(--gap);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.case-hero__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   21. 導入事例のカード
   -------------------------------------------------------------------------- */

.cards--case {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 700px) {
	.cards--case {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.cards--case {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card--case .card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	transition: transform 0.18s ease;
}

.card--case .card__link:hover {
	transform: translateY(-4px);
}

.card--case .card__figure {
	height: auto;
	background: none;
	margin-bottom: var(--s-4);
	border-radius: var(--r);
	overflow: hidden;
}

.card--case .card__photo {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card--case .card__body {
	align-items: center;
	padding-inline: 0;
}

.card--case .card__title {
	font-size: var(--fs-h4);
}

.card--case .card__more {
	color: var(--c-red);
	padding-top: var(--s-4);
}

/* 利用企業のロゴを出すカード */
.card--client-logo {
	padding: var(--s-5);
	border: 2px solid rgba(0, 0, 0, 0.12);
}

.card__logo {
	width: 100%;
	max-width: 220px;
	height: auto;
	object-fit: contain;
}

/*
 * サービスカードの写真は、窓いっぱいに敷く。
 * 白い余白を残すと、絵を置いていたときの名残に見える。
 */
.card--service .card__photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   22. 利用企業一覧＝導入事例

   開催風景の写真がある会社は写真で。押すとその日のページへ。
   写真が無い会社は、ロゴか社名で並べる。
   -------------------------------------------------------------------------- */

.card--client-photo {
	display: flex;
	background: none;
	padding: 0;
	min-height: 0;
}

.card--client-photo .card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	transition: transform 0.18s ease;
}

.card--client-photo .card__link:hover {
	transform: translateY(-4px);
}

.card--client-photo .card__figure {
	position: relative;
	height: auto;
	background: none;
	margin-bottom: var(--s-4);
	border-radius: var(--r);
	overflow: hidden;
}

.card--client-photo .card__photo {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card--client-photo .card__body {
	align-items: center;
	padding-inline: 0;
}

.card--client-photo .card__client-name {
	font-size: var(--fs-small);
}

.card--client-photo .card__catch {
	margin-top: var(--s-2);
	font-size: var(--fs-label);
	opacity: 0.75;
}

/* 写真もロゴも無い会社は、これまでどおり色の積み木で */
.card--client-name .card__link,
.card--client-logo .card__link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/*
 * 色の面の上に置くボタンも、積み木と同じように色を反転させる。
 * ここを入れないと、青い面に赤いボタンが乗るような組み合わせが出る。
 */
.section.is-c1 .btn--primary,
.section.is-c2 .btn--primary,
.section.is-c3 .btn--primary,
.section.is-c4 .btn--primary,
.section.is-main .btn--primary,
.section.is-accent .btn--primary,
.page-header .btn--primary {
	background: var(--block-fg);
	border-color: var(--block-fg);
	color: var(--block-bg);
}

/* --------------------------------------------------------------------------
   23. 提供サービス（モック「何で遊ぶ？」）

   黄色の面に、1件ずつ縦に積む。
     写真の白いカード → サービス名 → キャッチ → 詳しく見る
   寸法はモック（1920px幅）の実測値。
   -------------------------------------------------------------------------- */

.section--services {
	/* 上の角だけ大きく落とす。モックの実測で 1920:70 */
	border-radius: clamp(24px, 3.65vw, 70px) clamp(24px, 3.65vw, 70px) 0 0;
	padding-top: clamp(28px, 3.8vw, 74px);
	padding-bottom: clamp(48px, 6vw, 115px);
	/* キャラクターが画面の外へ出た分を切る */
	overflow: hidden;
}

/*
 * 1画面に1枚が収まるように、カードの大きさは画面の「高さ」から決めます。
 * 幅から決めると、横長の画面でカードが縦にはみ出してしまうためです。
 */
/*
 * 2×2の4枚並べ（ご指定）。組み方はそのまま、並べ方だけ変えています。
 * カードの大きさは、列の幅から決まります。
 */
.services {
	--card-h: min(42vh, 470px);

	display: grid;
	gap: clamp(40px, 5vh, 72px) clamp(24px, 2.6vw, 50px);
	margin-top: clamp(28px, 4.5vh, 72px);
}

@media (min-width: 900px) {
	.services {
		grid-template-columns: repeat(2, 1fr);
	}
}

.services__item {
	/* 位置の基準は .services__media。ここでは作らない */
	position: static;
}

.services__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* 写真とキャラクターの入れ物。キャラクターはこの箱を基準に置く */
.services__media {
	display: block;
	position: relative;
}

/* 写真の白いカード。黒い枠つき（モックの実測で 3px） */
.services__figure {
	display: block;
	position: relative;
	/* かたちはモックの実測どおり 1420:675。大きさは画面の高さで決める */
	width: min(100%, calc(var(--card-h) * 1420 / 675));
	margin-inline: auto;
	aspect-ratio: 1420 / 675;
	background: var(--white);
	border: 3px solid var(--black);
	border-radius: clamp(16px, 2.1vw, 40px);
	overflow: hidden;
}

.services__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 飾りのキャラクター。カードの左右にはみ出して立つ。
 * 押せる場所ではないので、当たり判定は外してある。
 */
/*
 * 飾りのキャラクター。版面（1400px）の外、画面の端まで出す。
 * モックでは、カードの左右にはみ出して立っている。
 * 50% - 50vw で、版面の外側＝画面の端まで届く。
 */
.services__chara {
	position: absolute;
	top: -13%;
	/* カードの高さに合わせる。だいたいカードの 0.56 倍 */
	width: min(22vw, calc(var(--card-h) * 0.56));
	pointer-events: none;
	z-index: 2;
}

.services__chara--left {
	left: calc(50% - 50vw);
}

/*
 * 右のキャラクターは、カードの下のほうに立たせる。
 * モックでは、左は上・右は下と、互い違いに置いてある。
 */
.services__chara--right {
	right: calc(50% - 50vw);
	top: auto;
	/* モックの実測で、カードの下端より 1920:143 下（675の21%） */
	bottom: -21%;
}

.services__chara-img {
	width: 100%;
	height: auto;
}

/*
 * 狭い画面。
 * ここだけは、画面の高さ（vh）をいっさい使いません。
 * スマートフォンはURLバーが出たり隠れたりして vh が変わるので、
 * そのたびに字や写真の大きさが動いてしまうためです。
 */
@media (max-width: 699.98px) {
	.services {
		/* 60vw ＝ 写真が版面いっぱいに出る大きさ */
		--card-h: 60vw;

		gap: 44px;
		margin-top: 24px;
	}

	/* 写真にかぶって読みにくくならないよう、小さく端に寄せる */
	.services__chara {
		width: 78px;
		top: -8%;
	}

	.services__name {
		margin-top: 12px;
	}

	.services__logo {
		width: min(64%, 210px);
		height: auto;
	}

	.services__catch {
		margin-top: 8px;
		font-size: clamp(14px, 3.9vw, 20px);
	}

	.services__more {
		margin-top: 14px;
		font-size: clamp(13px, 3.6vw, 18px);
	}
}

/* サービス名（いただいたロゴタイプ） */
.services__name {
	display: block;
	margin-top: clamp(12px, 2vh, 24px);
	text-align: center;
}

/*
 * ロゴタイプは、幅ではなく高さでそろえます。
 * 「お料理ファシリテ〜ション」と「拳」では字数がまるで違うので、
 * 幅をそろえると、字の大きさがばらばらに見えるためです。
 */
.services__logo {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: min(9vh, 96px);
	object-fit: contain;
}

/* ロゴタイプが無いサービスの、文字での組み方 */
.services__name-text {
	display: inline-block;
	color: var(--main);
	line-height: 1;
}

.services__name-main {
	display: block;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(34px, 5.2vw, 100px);
	letter-spacing: 0.06em;
}

.services__name-sub {
	display: block;
	margin-top: 0.15em;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(16px, 2.3vw, 44px);
	letter-spacing: 0.04em;
}

.services__item--art .services__name-text {
	color: var(--c-orange);
}

.services__item--fist .services__name-text,
.services__item--cooking .services__name-text {
	color: var(--c-red);
}

/*
 * 4つともロゴタイプがそろったので、この文字組みはいまは出ません。
 * 画像が欠けたときの受け皿として残しています。
 * 水色は黄色の地にのせるとまるで読めない（1.5:1）ので黒で出します。
 */
.services__item--jump .services__name-text {
	color: var(--black);
}

.services__catch {
	display: block;
	margin-top: clamp(8px, 1.4vh, 18px);
	text-align: center;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(14px, 2.6vh, 28px);
	letter-spacing: 0.1em;
	color: var(--black);
}

.services__more {
	display: block;
	width: fit-content;
	margin: clamp(14px, 2.4vh, 32px) auto 0;
	padding-bottom: 0.5em;
	border-bottom: 3px solid currentColor;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(13px, 2.2vh, 24px);
	letter-spacing: 0.08em;
	color: var(--c-red);
	transition: transform 0.15s ease;
}

/*
 * 「詳しく見る」は全部このまま赤。モックの色です。
 * サービスごとに色を変えると、橙と水色が黄色の地に沈んで読めなくなります。
 * 何のサービスかは、上のロゴタイプの色でもう分かります。
 */

.services__link:hover .services__more {
	transform: translateY(-2px);
}

/* 利用企業の記事の見出し */
.entry__title {
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: var(--fs-h3);
	line-height: 1.4;
	margin-bottom: var(--s-5);
}

@media (max-width: 699.98px) {
	/* 狭い画面では見出しが細く折り返さないよう、キャラクターを小さく */
	.section-head--chara .section-head__row {
		--chara-w: 56px;
	}

	.page-header__chara {
		width: 52px;
		height: 52px;
		bottom: 44px;
	}
}

/* --------------------------------------------------------------------------
   29-2. キャラクターを大きく（2026-09-14 ご指定）

   上の 29. の大きさを上書きします。
   見出しの右のキャラクターは、版面の外の余白まで少しはみ出させて、
   見出しの文字をなるべく押し縮めないようにしています。
   -------------------------------------------------------------------------- */

.section-head--chara .section-head__row {
	--chara-w: clamp(120px, 16vw, 300px);

	padding-right: calc(var(--chara-w) * 0.7);
	min-height: calc(var(--chara-w) * 0.6);
}

.section-head__chara {
	right: calc(var(--chara-w) * -0.25);
}

.page-header__chara {
	width: clamp(100px, 16vw, 280px);
	height: clamp(100px, 16vw, 280px);
}

/* サービスの顔。左右の余白に立たせ、写真の角に少しかかる大きさに */
.svc__chara {
	width: clamp(90px, 15vw, 290px);
	height: clamp(90px, 15vw, 290px);
	z-index: 3;
}

.svc__chara--left {
	left: -7vw;
}

.svc__chara--right {
	right: -7vw;
}

@media (max-width: 699.98px) {
	.section-head--chara .section-head__row {
		--chara-w: 92px;

		padding-right: calc(var(--chara-w) * 0.8);
	}

	.section-head__chara {
		right: -8px;
	}

	.page-header__chara {
		width: 84px;
		height: 84px;
		bottom: 36px;
	}

	.svc__chara {
		width: 72px;
		height: 72px;
	}

	.svc__chara--left {
		left: -6px;
	}

	.svc__chara--right {
		right: -6px;
	}
}

@media (max-width: 699.98px) {
	/*
	 * 狭い画面では、キャラクターを英字の横（右上）に立たせ、
	 * 日本語の見出しはその下から横いっぱいに組みます。
	 * 右をあけて並べると、日本語が細く折り返して読みにくくなるためです。
	 */
	.section-head--chara .section-head__row {
		--chara-w: 88px;

		padding-right: 0;
		min-height: 0;
	}

	.section-head--chara .section-head__en {
		padding-right: calc(var(--chara-w) + 8px);
		min-height: calc(var(--chara-w) * 0.7);
		display: flex;
		align-items: flex-end;
	}

	.section-head--chara .section-head__title {
		flex-basis: 100%;
	}

	.section-head__chara {
		top: 0;
		bottom: auto;
		right: -4px;
	}
}

@media (max-width: 699.98px) {
	/* 英字の行をキャラクターと同じ高さにして、日本語の見出しにかからないように */
	.section-head--chara .section-head__en {
		min-height: var(--chara-w);
	}
}

/* 積み木のキャラクターは少し傾ける（角度は eikichi_deco_tilt()）。足もとを軸に回すと、置いた場所から浮きません */
.is-tilted {
	transform-origin: center bottom;
}

/* --------------------------------------------------------------------------
   29-3. 人のキャラクターをもっと大きく（2026-09-14 ご指定）

   人のキャラクターは手足が細く、積み木と同じ大きさだと見づらいので、
   ひとまわり以上大きくしています。積み木は 29-2. の大きさのまま。
   -------------------------------------------------------------------------- */

.section-head--person .section-head__row {
	--chara-w: clamp(170px, 23vw, 430px);

	padding-right: calc(var(--chara-w) * 0.62);
	min-height: calc(var(--chara-w) * 0.55);
}

.section-head--person .section-head__chara {
	right: calc(var(--chara-w) * -0.3);
}

.svc__chara.is-person {
	width: clamp(130px, 19vw, 360px);
	height: clamp(130px, 19vw, 360px);
}

.svc__chara--left.is-person {
	left: -12vw;
}

.svc__chara--right.is-person {
	right: -12vw;
}

@media (max-width: 699.98px) {
	.section-head--person .section-head__row {
		--chara-w: 124px;

		padding-right: 0;
		min-height: 0;
	}

	.section-head--person .section-head__chara {
		right: -10px;
	}

	.svc__chara.is-person {
		width: 100px;
		height: 100px;
	}

	.svc__chara--left.is-person {
		left: -14px;
	}

	.svc__chara--right.is-person {
		right: -14px;
	}
}

/* --------------------------------------------------------------------------
   29-4. キャラクターを見出しのすぐ横に（2026-09-14 ご指定）

   これまでは版面の右端にそろえていたので、見出しが短いと
   文字とキャラクターのあいだが大きく空いていました。
   キャラクターを見出しの並びに入れ、日本語の見出しのすぐ右に立たせます。
   見出しの長さに合わせて位置が変わるので、どのページでも余白がそろいます。
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.section-head--person .section-head__row {
		flex-wrap: nowrap;
		/* 右端の予約はやめ、キャラクターが上へ伸びる分だけ上をあけます */
		padding-right: 0;
		min-height: 0;
		padding-top: calc(var(--chara-w) * 0.45);
	}

	.section-head--person .section-head__title {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* 並びの中の「場所取り」。幅だけ持って、絵はここから上へはみ出させます */
	.section-head--person .section-head__chara {
		order: 3;
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		flex: 0 0 auto;
		align-self: flex-end;
		width: calc(var(--chara-w) * 0.72);
		height: 0;
		margin-left: clamp(0px, 0.6vw, 12px);
	}

	.section-head--person .section-head__chara picture,
	.section-head--person .section-head__chara > .section-head__chara-img {
		position: absolute;
		left: calc(var(--chara-w) * -0.08);
		/* 絵の足もとを、見出しの下端より少し下に */
		bottom: calc(var(--chara-w) * -0.12);
		width: var(--chara-w);
		height: var(--chara-w);
	}
}

@media (min-width: 700px) {
	/* 英字は途中で折らない（「Effe / ct」のように割れないように） */
	.section-head--person .section-head__en {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/*
	 * 場所取りの幅は細くして、日本語の見出しを押し縮めないようにします。
	 * 絵はその右へはみ出して立ちます（版面の外の余白に入ります）。
	 */
	.section-head--person .section-head__chara {
		width: calc(var(--chara-w) * 0.4);
	}

	.section-head--person .section-head__chara picture,
	.section-head--person .section-head__chara > .section-head__chara-img {
		left: calc(var(--chara-w) * -0.06);
	}
}

/* --------------------------------------------------------------------------
   29-5. キャラクターを見出しの文字のすぐ後ろに（29-4. を置きかえ）

   キャラクターを見出し（h2）の中に入れ、最後の文字の右に立たせます。
   ・見出しは途中で折らず、長くて入らないときは英字の下の段へまるごと移ります
   ・見出しの右に、キャラクターの幅ぶんの余白をとってから並べるので、
     画面の端で絵が切れません
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.section-head--person .section-head__row {
		flex-wrap: wrap;
		padding-right: 0;
		min-height: 0;
		padding-top: calc(var(--chara-w) * 0.45);
	}

	.section-head--person .section-head__title {
		position: relative;
		flex: 0 0 auto;
		white-space: nowrap;
		/* キャラクターが立つ分。これが入らなければ見出しごと次の段へ移ります */
		margin-right: calc(var(--chara-w) * 0.78);
	}

	.section-head--person .section-head__title .section-head__chara {
		order: 0;
		position: absolute;
		top: auto;
		right: auto;
		left: 100%;
		bottom: calc(var(--chara-w) * -0.14);
		width: var(--chara-w);
		height: var(--chara-w);
		margin-left: calc(var(--chara-w) * -0.12);
	}

	.section-head--person .section-head__title .section-head__chara picture,
	.section-head--person .section-head__title .section-head__chara > .section-head__chara-img {
		position: static;
		width: 100%;
		height: 100%;
	}
}

@media (min-width: 700px) {
	/* 文字に重ならないよう、見出しの最後の文字から少しだけ離して立たせる */
	.section-head--person .section-head__title .section-head__chara {
		margin-left: clamp(2px, 0.4vw, 8px);
	}
}

@media (max-width: 699.98px) {
	/* 画面の端で絵が切れないように */
	.section-head--person .section-head__chara {
		right: 0;
	}
}

@media (min-width: 700px) {
	/* キャラクターの幅をまるごと確保して、画面の端で切れないようにする */
	.section-head--person .section-head__title {
		margin-right: calc(var(--chara-w) + 8px);
	}
}

/* --------------------------------------------------------------------------
   29-6. 人のキャラクターの見出しは、文字とキャラクターをひとまとまりで中央に
         （2026-09-14 ご指定）

   見出しの文字とキャラクターを寄せたうえで、そのまとまりを版面の中央に置きます。
   左に寄せたままだと、キャラクターの分だけ左にずれて見えるためです。
   積み木のキャラクターの見出しは、これまでどおり左ぞろえ・右端に積み木です。
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.section-head--person,
	.section-head--person .section-head__row,
	.section-head--person .section-head__lead {
		text-align: center;
	}

	.section-head--person .section-head__row {
		justify-content: center;
	}
}
/* --------------------------------------------------------------------------
   29-7. 人のキャラクターの見出し：英字と日本語をひとかたまりにして中央へ、
         その右にキャラクター（29-5・29-6 の置きかえ）

   英字と日本語が2段になったときに、キャラクターが上の英字にかぶっていたため。
   英字の下に日本語を置いたかたまりを作り、キャラクターはそのかたまりの右に立たせます。
   かたまり＋キャラクターの全体が、版面の中央に来るようにしています。
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.section-head--person {
		--chara-w: clamp(170px, 23vw, 430px);

		text-align: center;
		/* キャラクターが上へ伸びる分 */
		padding-top: calc(var(--chara-w) * 0.35);
	}

	.section-head--person .section-head__row {
		display: inline-flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		padding: 0;
		min-height: 0;
		row-gap: 0.1em;
		/* 右にキャラクターの幅をとって、かたまり＋キャラクターで中央にそろえる */
		margin-right: calc(var(--chara-w) + clamp(4px, 0.6vw, 12px));
		text-align: center;
	}

	.section-head--person .section-head__title {
		position: static;
		margin-right: 0;
		white-space: nowrap;
	}

	.section-head--person .section-head__title .section-head__chara {
		left: 100%;
		bottom: calc(var(--chara-w) * -0.1);
		margin-left: clamp(4px, 0.6vw, 12px);
	}
}

@media (min-width: 700px) {
	/*
	 * かたまりを中央に置いたうえで、キャラクターの半分だけ左へずらして全体を中央にそろえます。
	 * 右に余白をとる方法だと、見出しが長いときに版面に入りきらず右へ寄っていたため。
	 */
	.section-head--person .section-head__row {
		margin-right: 0;
		left: calc((var(--chara-w) + clamp(4px, 0.6vw, 12px)) / -2);
	}
}

/* --------------------------------------------------------------------------
   29-8. 人のキャラクターの見出し：テキスト同士は左ぞろえ、全体は中央ぞろえ
         （2026-09-14 ご指定。29-6・29-7 の中央の組み方を置きかえ）

   英字・日本語の見出し・リードは、左端をそろえたひとかたまりにします。
   そのかたまりの右にキャラクターを立たせ、かたまり＋キャラクターの全体を
   版面の中央に置きます。
   中央に置くのは grid の justify-content: center。見出しが長くて版面に
   入りきらないときも、左右に同じだけはみ出して中央を保ちます。
   （transform を使わないのは、表示のときの動き（data-eikichi-reveal）とぶつかるため）
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.section-head--person {
		display: grid;
		grid-template-columns: minmax(auto, max-content);
		justify-content: center;
		text-align: left;
	}

	.section-head--person .section-head__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-self: start;
		width: max-content;
		left: 0;
		/* キャラクターの幅。これを含めて全体を中央にそろえる */
		margin-right: calc(var(--chara-w) + clamp(4px, 0.6vw, 12px));
		text-align: left;
	}

	.section-head--person .section-head__lead {
		text-align: left;
	}
}

@media (min-width: 700px) {
	/*
	 * リードは、見出し＋キャラクターの幅の中で折り返します。
	 * リードの長い1行がかたまりの幅を広げると、見出しとキャラクターが
	 * 中央から左にずれて見えるため（幅を 0 にして、かたまりの幅いっぱいに伸ばす）。
	 */
	.section-head--person .section-head__lead {
		width: 0;
		min-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   30. ABOUT のステートメントのまわりのキャラクター（2026-09-14）

   広い画面：本文の左右の余白に2体ずつ（左上ジャンプ・右上アート・左下拳・右下ピザ）。
             本文にかからないよう、本文の幅（60em）の外に置きます。
   狭い画面：余白が足りないので、本文の下に横一列で並べます。
   -------------------------------------------------------------------------- */

.statement-charas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(8px, 2vw, 24px);
	margin-top: clamp(28px, 4vw, 48px);
	pointer-events: none;
}

.statement-chara {
	display: block;
	width: clamp(72px, 20vw, 180px);
	aspect-ratio: 1;
}

.statement-chara picture,
.statement-chara__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

@media (min-width: 1300px) {
	.section--statement {
		position: relative;
	}

	.statement-charas {
		position: absolute;
		inset: 0;
		margin: 0;
		display: block;
	}

	.statement-chara {
		--w: clamp(160px, calc((100vw - 1100px) / 2), 320px);

		position: absolute;
		width: var(--w);
	}

	/* 本文（60em）の左右の端から、少し外に */
	.statement-chara--jump,
	.statement-chara--fist {
		right: calc(50% + 31em);
	}

	.statement-chara--art,
	.statement-chara--pizza {
		left: calc(50% + 31em);
	}

	.statement-chara--jump,
	.statement-chara--art {
		top: 4%;
	}

	.statement-chara--fist,
	.statement-chara--pizza {
		bottom: 6%;
	}
}

/*
 * 30-2. 大きさと位置の調整
 * ・本文の左右に置くのは 1440px 以上から（1300px 前後では画面の端で切れていたため）
 * ・上下の2体が重ならないよう、最大 260px にして、上は上端・下は下端にそろえる
 */
@media (min-width: 1300px) and (max-width: 1439.98px) {
	.section--statement {
		position: static;
	}

	.statement-charas {
		position: static;
		display: flex;
		margin-top: clamp(28px, 4vw, 48px);
	}

	.statement-chara {
		position: static;
		width: clamp(72px, 20vw, 180px);
	}
}

@media (min-width: 1440px) {
	.statement-chara {
		--w: clamp(170px, calc((100vw - 1100px) / 2), 260px);
	}

	.statement-chara--jump,
	.statement-chara--art {
		top: 0;
	}

	.statement-chara--fist,
	.statement-chara--pizza {
		bottom: 0;
	}
}

@media (max-width: 699.98px) {
	/*
	 * スマホの顔（ロゴタイプの左右）の人のキャラクターは、ロゴタイプの高さに収まる大きさにする。
	 * 背の高いキャラクター（お料理のシェフなど）だと、下のキャッチに重なって読めなくなるため。
	 */
	.svc__chara.is-person {
		width: 64px;
		height: 64px;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------------
   29-9. サービスの顔の左右のキャラクターを大きく、中央寄りに（2026-09-14 ご指定）

   写真の角にかかるのは問題なし、とのことなので、少し内側へ寄せています。
   ただし画面の端で切れないよう、左右の余白が狭い画面では端でとめます。
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.svc__chara.is-person {
		width: clamp(150px, 21vw, 400px);
		height: clamp(150px, 21vw, 400px);
	}

	/*
	 * 100% はロゴや写真が入っている内側の幅。
	 * (100vw - 100%) / -2 が「画面の端」の位置なので、それより外へは出さない。
	 */
	.svc__chara--left.is-person {
		left: max(-9vw, calc((100vw - 100%) / -2 + 8px));
	}

	.svc__chara--right.is-person {
		right: max(-9vw, calc((100vw - 100%) / -2 + 8px));
	}
}

/* お電話の案内はフォームの下に移したので、上に余白をとる（2026-09-14） */
.contact-tel {
	margin-top: var(--s-8);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   31. キャラクターのポップ（2026-09-14 ご指定。姉妹サイト HCJ と同じ動き）

   印（data-eikichi-pop）は JavaScript が付けるので、
   JavaScript が動かない環境では最初から表示されたままになります。

   動きは scale / translate / rotate で付けます。transform ではありません。
   積み木の傾きは transform で入れてあるので、そこを書き換えると打ち消し合うためです。
   -------------------------------------------------------------------------- */

/* ひと回り小さいところから、ぽんと手前に出て、ゆれながら収まる */
@keyframes eikichi-pop-chara {
	0% {
		opacity: 0;
		scale: 0.62;
		translate: 0 18px;
		rotate: -9deg;
	}

	16% {
		opacity: 1;
	}

	/* 手前に行きすぎるところ。ここがポップさの山 */
	40% {
		scale: 1.15;
		translate: 0 -8px;
		rotate: 5deg;
	}

	62% {
		scale: 0.96;
		translate: 0 3px;
		rotate: -2deg;
	}

	82% {
		scale: 1.03;
		translate: 0 -1px;
		rotate: 1deg;
	}

	100% {
		opacity: 1;
		scale: 1;
		translate: 0 0;
		rotate: 0deg;
	}
}

/* TOP のキービジュアル。大きく重ねてあるので、傾けずに大きさだけで跳ねる */
@keyframes eikichi-hero-in {
	0% {
		opacity: 0;
		scale: 0.7;
	}

	16% {
		opacity: 1;
	}

	48% {
		scale: 1.05;
	}

	72% {
		scale: 0.98;
	}

	88% {
		scale: 1.01;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}

/*
 * ひと跳ねしたあと、そのまま左右にゆれ続ける（歩いているような動き）。
 * まん中を通るときに少し浮かせて、体重を右足・左足へ移し替えている感じにしています。
 */
@keyframes eikichi-walk {
	0% {
		rotate: 0deg;
		translate: 0 0;
	}

	25% {
		rotate: -4deg;
		translate: 0 -4px;
	}

	50% {
		rotate: 0deg;
		translate: 0 0;
	}

	75% {
		rotate: 4deg;
		translate: 0 -4px;
	}

	100% {
		rotate: 0deg;
		translate: 0 0;
	}
}

/* 逆回り。となりの子とそろわないように、こちらから始める子をまぜる */
@keyframes eikichi-walk-alt {
	0% {
		rotate: 0deg;
		translate: 0 0;
	}

	25% {
		rotate: 4deg;
		translate: 0 -4px;
	}

	50% {
		rotate: 0deg;
		translate: 0 0;
	}

	75% {
		rotate: -4deg;
		translate: 0 -4px;
	}

	100% {
		rotate: 0deg;
		translate: 0 0;
	}
}

/* 出番が来るまでは隠しておく */
[data-eikichi-pop] {
	opacity: 0;
	/* 足もとを軸にゆらす */
	transform-origin: center bottom;
}

/*
 * ぽんと出たあと、そのまま歩き続ける。
 * 動きを2つ重ね、うしろの「歩き」はポップが終わる 0.46 秒ちょうどから始める。
 * ゆれの型は止まった形から始まるので、つなぎ目で待ちも飛びも出ない。
 * 出す順の遅らせは JavaScript が --pop-delay に入れる。
 */
[data-eikichi-pop='in'] {
	animation-name: eikichi-pop-chara, var(--walk-name, eikichi-walk);
	animation-duration: 0.46s, var(--walk-dur, 2.6s);
	animation-timing-function: ease-out, ease-in-out;
	animation-delay: var(--pop-delay, 0s), calc(var(--pop-delay, 0s) + 0.46s);
	animation-iteration-count: 1, infinite;
	animation-fill-mode: both, none;
}

/*
 * TOPの4体。ほかのキャラクターと同じ「ぽん」ですが、
 * 大きく組んであるぶん動きが目立ちすぎるので、振れ幅を小さくしています
 * （ご指定 2026-09-18）。ゆれ（歩き）は付けません。
 */
@keyframes eikichi-pop-hero {
	0% {
		opacity: 0;
		scale: 0.9;
		translate: 0 10px;
		rotate: -2.5deg;
	}

	18% {
		opacity: 1;
	}

	/* ほんの少しだけ行きすぎるところ */
	46% {
		scale: 1.035;
		translate: 0 -3px;
		rotate: 1.2deg;
	}

	74% {
		scale: 0.995;
		translate: 0 1px;
		rotate: -0.4deg;
	}

	100% {
		opacity: 1;
		scale: 1;
		translate: 0 0;
		rotate: 0deg;
	}
}

.hero__chara[data-eikichi-pop] {
	transform-origin: center bottom;
}

.hero__chara[data-eikichi-pop='in'] {
	animation: eikichi-pop-hero 0.5s ease-out both;
	animation-delay: var(--pop-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	[data-eikichi-pop],
	[data-eikichi-pop='in'],
	.hero__chara[data-eikichi-pop='in'] {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
		translate: 0 0;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   32. ABOUT「役職なんて、いったん置いとこ。」の背景画像（2026-09-14 ご指定）

   いただいた画像（積み木で遊ぶ4人）を節いっぱいに敷きます。
   文字が読みづらくならないよう、上に白をうすくかぶせ、文字のまわりにも白いにじみを付けています。
   かぶせる白の濃さは --statement-veil で調整できます（0 で画像そのまま、1 で真っ白）。
   -------------------------------------------------------------------------- */

.section--statement {
	--statement-veil: 0.55;

	position: relative;
	isolation: isolate;
	background-color: var(--white);
	background-image: url("../img/bg-statement.jpg");
	background-image: image-set(url("../img/bg-statement.webp") type("image/webp"), url("../img/bg-statement.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.section--statement::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / var(--statement-veil));
	pointer-events: none;
}

.section--statement .statement__title,
.section--statement .statement {
	text-shadow:
		0 0 6px #fff,
		0 0 12px #fff,
		0 0 18px #fff;
}

@media (max-width: 699.98px) {
	/* 狭い画面は文字が画像の上に長く重なるので、白を少し濃く */
	.section--statement {
		--statement-veil: 0.7;
	}
}

/*
 * 32-2. 背景画像を切らない・不透明度 80%（2026-09-14 ご指定）
 * cover だと横長の画面で上下が切れていたので、contain にして節の中に全部収めます。
 * 画像の地は白なので、余ったところも白のままつながります。
 * 不透明度 80% ＝ 上にかぶせる白を 20% に（スマホも同じ）。
 */
.section--statement {
	--statement-veil: 0.2;

	background-size: contain;
}

@media (max-width: 699.98px) {
	.section--statement {
		--statement-veil: 0.2;
	}
}

/* --------------------------------------------------------------------------
   32-3. ABOUT のステートメント：画像を左、テキストのかたまりを右（2026-09-14 ご指定）

   背景に敷くのをやめ、画像とテキストを横に並べます（32. 32-2. を置きかえ）。
   テキストはかたまりの中で右ぞろえ。
   狭い画面では画像を上、テキストを下にし、テキストは中央ぞろえに戻します
   （細い幅で右ぞろえにすると、行の頭がそろわず読みにくいため）。
   -------------------------------------------------------------------------- */

.section--statement {
	background: none;
	text-align: center;
}

.section--statement::before {
	content: none;
}

.section--statement .statement__title,
.section--statement .statement {
	text-shadow: none;
}

.statement-layout {
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
}

.statement-figure {
	margin: 0;
}

.statement-figure__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.statement-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

	.statement-text,
	.statement-text .statement__title,
	.statement-text .statement {
		text-align: right;
	}

	.statement-text .statement {
		max-width: none;
		margin-inline: 0;
	}
}

@media (min-width: 900px) {
	/* 見出しが「いっ／たん」と途中で折れないよう、テキスト側を広くして1行に収める */
	.statement-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.statement-text .statement__title {
		white-space: nowrap;
		font-size: clamp(22px, 2.3vw, 44px);
	}
}

/* --------------------------------------------------------------------------
   32-4. ステートメントの画像を大きく・端をぼかして白になじませる（2026-09-14 ご指定）

   大きくするのは、テキストの列を細らせずに（見出しを1行に保つため）、
   画像を左の余白へはみ出させる形でやっています。
   はみ出す量＝版面の左の余白 − 40px（最大240px）。余白の無い画面では 0 です。

   画像の地はほんの少しグレーなので、上下左右の端を透明にぼかして、ページの白になじませます。
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.statement-figure {
		--bleed: clamp(0px, calc((100vw - var(--container)) / 2 - 40px), 240px);

		margin-left: calc(var(--bleed) * -1);
	}
}

.statement-figure__img {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-composite: intersect;
}

/* --------------------------------------------------------------------------
   33. TOP のヒーロー：方眼をやめる（2026-09-14 ご指定。英文はやめました）
   -------------------------------------------------------------------------- */

.hero {
	background-image: none;
	background-color: var(--white);
}

/* --------------------------------------------------------------------------
   34. Feature の本文（ご指定 2026-09-16）

   本文は左ぞろえの文にします。
   箱の幅はさわりません。幅を変えると折り返しが変わり、
   その下のものまで動いてしまうためです。
   -------------------------------------------------------------------------- */

.section--feature .statement {
	text-align: left;
}

/* --------------------------------------------------------------------------
   35. 提供サービスのページの、見出しのキャラクター（ご指定 2026-09-16）

   黄色い面から上へ飛び出させます。
   横は今までどおり切り、縦だけ切りません。

   **提供サービスのページだけ**です。
   TOPとABOUTの黄色い面はさわりません（ご指定 2026-09-16）。
   -------------------------------------------------------------------------- */

.section--services-page {
	overflow-x: clip;
	overflow-y: visible;
}

/* --------------------------------------------------------------------------
   36. サービス個別ページの Effect（スマホだけ・ご指定 2026-09-16）

   効果のボタンは中央ぞろえのまま。
   「こんなシーンにぴったり！」から下だけ左ぞろえにします。
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {
	.scenes__title {
		text-align: left;
	}

	.scenes__list {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   37. サービス個別ページの顔のキャラクター（スマホだけ・ご指定 2026-09-16）

   小さすぎるので大きくします。
   下のキャッチに重ならない大きさで止めています。
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {
	.svc__chara {
		width: 84px;
		height: 84px;
	}

	.svc__chara.is-person {
		width: 104px;
		height: 104px;
	}

	/*
	 * 見出しの横に立つ人。枠だけ大きくします。
	 * 右にあける幅はさわりません（英字の行が自分であけています）。
	 * 行ぜんたいにあけると、日本語の見出しが細く折り返します。
	 */
	.section-head--person .section-head__row {
		--chara-w: 128px;
	}
}
/* --------------------------------------------------------------------------
   38. 料金プランのページ（ご指定 2026-09-16）

   サービスごとに ロゴタイプ → 料金カードとオプション → ［詳しく見る］。
   面の色と切り替えの形は、そのサービスのものをそのまま使います。
   -------------------------------------------------------------------------- */

/* 見出しだけの面。下の面とのあいだを詰める */
.section--pricing-head {
	padding-bottom: clamp(16px, 2vw, 38px);
}

.section--pricing {
	text-align: center;
}

/* サービスのロゴタイプ。個別ページの顔と同じ大きさ */
.pricing__logo {
	margin: 0 0 clamp(20px, 2.6vw, 50px);
	line-height: 0;
	text-align: center;
}

.pricing__logo-img {
	margin-inline: auto;
	width: auto;
	height: clamp(52px, 6.2vw, 118px);
}

/* ロゴの画像が無いサービスは、名前を組んで出す */
.pricing__name {
	display: block;
	font-family: var(--font-jp-head);
	font-weight: 800;
	font-size: clamp(22px, 2.6vw, 50px);
	line-height: 1.2;
}

.section--pricing .section__foot {
	margin-top: clamp(24px, 3vw, 56px);
}

/*
 * 白い面のときだけ、料金カードを1pxの枠線で囲みます。
 * 色の面の上（お料理など）は、白いカードがそのまま見えるので要りません。
 */
.section--pricing:not(.is-on-color) .plan {
	border: 1px solid var(--black);
}

/* ロゴタイプとキャラクターを、同じ行に置く。足もとの線をそろえます */
.pricing__head {
	position: relative;
	--chara-w: clamp(150px, 21vw, 400px);

	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* キャラクターが立つぶんの高さ */
	min-height: calc(var(--chara-w) * 0.52);
	margin-bottom: clamp(20px, 2.6vw, 50px);
}

/*
 * 色の面に載るときは、ロゴタイプを白に置きかえます。
 * ロゴはサービスの色そのものなので、そのままだと面に埋もれるためです。
 * （brightness(0) でいったん黒にしてから invert(1) で白にします）
 */
.section--pricing.is-on-color .pricing__logo-img {
	filter: brightness(0) invert(1);
}

/* そのサービスのキャラクター。見出しの右に立たせる（個別ページと同じ大きさ） */
.pricing__chara {
	position: absolute;
	right: calc(var(--chara-w) * -0.3);
	bottom: 0;
	width: var(--chara-w);
	height: var(--chara-w);
	pointer-events: none;
}

.pricing__chara-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/*
 * アートの壁紙。個別ページと同じ絵を、この面にだけ敷きます。
 * 狭い画面では白をひとまい薄くかぶせます（字が読めなくなるため）。
 */
.section--pricing.has-wall {
	background-color: var(--white);
	background-image: var(--wall);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
}

@media (max-width: 699.98px) {
	/*
	 * 狭い画面では、キャラクターをロゴタイプの右どなりに並べます。
	 * 重ねると、ロゴの字にかぶって読めなくなるためです。
	 */
	.pricing__head {
		--chara-w: 96px;

		min-height: 0;
		gap: 2px;
	}

	.pricing__chara {
		position: static;
		flex: 0 0 auto;
	}

	.section--pricing.has-wall {
		background-image: linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)), var(--wall);
		background-repeat: repeat, repeat-y;
		background-size: 100% 100%, 100% auto;
	}
}
/* --------------------------------------------------------------------------
   39. 利用企業の「ご利用サービス」（ご指定 2026-09-18）

   社名のすぐ下に、どのサービスを使った回かを札で出します。
   プランだけだと「スペイン」とだけ並んで、何のことか分かりませんでした。
   -------------------------------------------------------------------------- */

.client-service {
	margin-top: calc( var(--s-5) * -1 );
	margin-bottom: var(--s-7);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--fs-small);
}

/* サービス名。押すとそのサービスのページへ */
.client-service__tag {
	display: inline-block;
	padding: 0.45em 1em;
	border-radius: var(--r-sm);
	background: var(--c-red);
	color: var(--white);
	font-family: var(--font-jp-head);
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

a.client-service__tag:hover {
	transform: translateY(-2px);
	background: var(--black);
}

/* プラン（課題料理など）。札の右に、ふつうの字で添える */
.client-service__plan {
	color: var(--black);
}
/* --------------------------------------------------------------------------
   40. スマホの「今日は何で遊ぶ？」のカード（ご指定 2026-09-18）

   キャッチが変なところで折り返していたので、1行に収まる大きさにします。
   （前は画面の高さから字の大きさを決めていたため、横に入りきりませんでした）
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {
	.services__catch {
		/* いちばん長い「つくる × 食べる ＝ チームの輪！」が1行に入る大きさ */
		font-size: clamp(13px, 4.6vw, 20px);
		letter-spacing: 0.04em;
	}

	/* キャッチに合わせて、「詳しく見る」も少し小さく */
	.services__more {
		font-size: clamp(12px, 3.8vw, 16px);
	}
}
/* --------------------------------------------------------------------------
   41. お問い合わせの面の、角丸の向こう側（ご指定 2026-09-18）

   赤い面は上の角を大きく落としてあるので、そこから向こうが見えます。
   何もしないと地の白が見えて、上の面と切れて見えるので、
   上の面と同じ色を敷いておきます（色は呼ぶ側から --cta-behind で渡します）。
   -------------------------------------------------------------------------- */

/*
 * isolation は付けません。付けると、下に敷いたはずの色（::before）が
 * 赤い面の「上」に出てしまい、上のふちに線のように見えます。
 */
.cta-band {
	position: relative;
}

.cta-band::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* 角丸と同じ高さだけ敷けば足ります */
	height: clamp(28px, 6vw, 115px);
	background: var(--cta-behind, transparent);
	z-index: -1;
}
/* --------------------------------------------------------------------------
   42. スマホの見出しの折り返し（ご指定 2026-09-18）

   「役職なんて、／いったん置いとこ。」と、読点で折り返します。
   目印（wbr）はPHP側で読点のうしろに入れてあります。
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {
	.hero-statement__title {
		/* 目印のところ以外では折らない */
		word-break: keep-all;
	}
}