/* ==========================================================================
   ICIKA 実装用スタイル本体
   ページごとのスタイルはセクション見出しで区切って追記していく
   ========================================================================== */

.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * ヘッダーが常時 position:fixed（透過）のため、写真付きKVを持たないページ
 * （投稿一覧フォールバック等）は先頭要素にこのクラスを付けてヘッダー分の
 * 余白を確保し、コンテンツがヘッダーの下に隠れないようにする。
 */
.u-header-offset {
	padding-top: calc(var(--header-height) + 40px);
}

/*
 * 全ページ共通: pタグの文字色・文字サイズを画面幅に応じてclampで可変にする。
 * クラス指定で個別にcolor/font-sizeを設定している箇所（.section-lead 等）は
 * 詳細度がこちらより高いため、この既定値で上書きされない。
 */
p {
	color: #6b7280;
	line-height: 2;
}

@media (max-width: 768px) {
	p {
		font-size: clamp(11.9px, 3.6vw, 16px);
	}
}

@media screen and (min-width: 767px) {
	p {
		font-size: 16px;
	}
}

/*
 * フォント: 基本はNoto Sans JP（bodyに指定済み）。
 * KVのテキスト（TOP・下層ページ・SERVICES詳細の3種）とh2見出しのみNoto Serif JPにする。
 */
h2,
.top-hero__inner,
.page-hero__inner,
.service-hero__inner {
	font-family: var(--font-serif);
}

/* 全ページ共通: h1〜h3の太さは500に統一する */
h1,
h2,
h3 {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/*
 * ヘッダーは全ページ共通で常時透過。KV画像の上にそのまま重なり、
 * 背景色は付けない（スクロールしても白背景にはならない）。
 * 文字色はデフォルトでダーク（KV写真に白グラデーションがかかるページ用）、
 * TOPページのみ .is-home 修飾クラスで白文字にする。
 */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	background: transparent;
	height: var(--header-height);
}

/*
 * 全ページ共通: KVの上端から100pxの位置をスクロールで通り過ぎたら（KVが無いページは20px）、
 * ヘッダーにふわっとすりガラス風の背景を付ける。
 * backdrop-filterを.site-header自体に付けると、position:fixedの子である.site-nav
 * （ハンバーガーメニュー本体）の「containing block」がビューポートではなくこのヘッダー自身に
 * なってしまい、スクロール後にメニューを開くとヘッダーの高さぶんしか開かなくなる不具合が出る。
 * そのため背景・ぼかしは疑似要素側に持たせ、.site-header自体にはfilter系プロパティを付けない。
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: transparent;
	transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.site-header.is-past-hero::before {
	background-color: #ffffff6b;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ログイン中は先頭にWPの管理バーが固定表示されるため、ヘッダーをその下にずらす */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header .site-nav__list a,
.site-header .lang-switcher a {
	color: var(--color-text);
}

.site-header .site-header__menu-btn span {
	background: var(--color-text);
}

.site-header.is-home .site-nav__list a,
.site-header.is-home .lang-switcher a {
	color: #fff;
}

.site-header.is-home .site-header__menu-btn span {
	background: #fff;
}

/*
 * TOPページ限定: KV（.top-hero）をスクロールで通り過ぎたら、白文字からダーク文字に切り替える。
 * .is-past-hero は main.js の IntersectionObserver がヘッダーの高さぶんを差し引いて判定し付与する。
 */
.site-header.is-home.is-past-hero .site-nav__list a,
.site-header.is-home.is-past-hero .lang-switcher a {
	color: var(--color-text);
}

.site-header.is-home.is-past-hero .site-header__menu-btn span {
	background: var(--color-text);
}

/* TOPページも下層ページと同じく、選択中の言語のみアクセントカラーにする（白文字上書きに勝つよう詳細度を合わせる） */
.site-header.is-home .lang-switcher__item.is-current a {
	color: var(--color-accent);
}

/*
 * ロゴはSVGを<img>で読み込んでいる（色はファイル内に焼き込み＝黒固定）ため、
 * CSSのcolorでは変えられない。filterで見た目上だけ白反転させる。
 */
.site-header.is-home .site-header__logo img {
	filter: brightness(0) invert(1);
}

.site-header.is-home.is-past-hero .site-header__logo img {
	filter: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	background-image: none;
}

.site-header__logo {
	position: relative;
	z-index: 2;
}

.site-header__logo img {
	width: 150px;
	height: auto;
}

@media (max-width: 768px) {
	.site-header__logo img {
		width: 110px;
	}
}

.site-header__menu-btn {
	position: relative;
	z-index: 2;
	display: none;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 46px;
	height: 46px;
	background: none;
	border: none;
	cursor: pointer;
}

.site-header__menu-btn span {
	display: block;
	width: 100%;
	height: 1px;
	/* border-radius: 1px; */
	transition: background-color 0.3s ease;
}

/*
 * #site-nav 自体をflexにして、メニュー本体(.site-nav__list)と
 * 言語切り替え(.lang-switcher)を横並びにする（付いていなかったため2段に折り返していた）。
 */
.site-nav {
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: flex;
	gap: 32px;
}

@media (min-width: 991px) {
	.site-nav__list {
		gap: 64px;
	}
}

.site-nav__list > li {
	position: relative;
}

/* 先頭の「トップページ」項目は、PCのヘッダーメニューでは非表示にする（ハンバーガーメニューでは表示） */
@media (min-width: 991px) {
	.site-nav__list > li:first-child {
		display: none;
	}
}

.site-nav__list a {
	transition: color 0.3s ease;
}

/* メニュー項目をホバーした時の文字色（CONTACTのピルボタンは対象外） */
.site-nav__list > li:not(.menu-cta) > a:hover {
	color: #7f92c4;
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: 24px;
	padding-left: 24px;
	font-size: 0.85rem;
}

.lang-switcher__item.is-current a {
	font-weight: 500;
	color: var(--color-accent);
}

.lang-switcher__item:not(:last-child) {
	padding-right: 16px;
	border-right: 1px solid var(--color-border);
}

/*
 * ヘッダーナビの「CONTACT」等、常時ハイライト表示させたいメニュー項目用。
 * 外観 > メニュー > 表示オプションで「CSSクラス」を有効化し、対象メニュー項目に
 * 「menu-cta」というCSSクラスを設定するとデザインカンプ通りのピル表示になる。
 */
.site-nav__list .menu-cta > a {
	background: #aab7d9;
	padding: 8px 20px;
	border-radius: 0px;
	color: #ffffff !important;
}

/*
 * SERVICESのドロップダウン等、サブメニューを持つ項目のスタイル。
 * 外観 > メニューで「SERVICES」の下に4サービスを子メニューとして登録すると、
 * PCではホバー／フォーカス／クリックでプルダウン表示、SPでは常時展開のインデントリストになる。
 */
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	position: relative;
	top: -2px;
	margin-left: 12px;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.site-nav__list .menu-item-has-children.is-open > a::after {
	transform: rotate(225deg);
}

/*
 * :hover / :focus-within はSPだとタップ後も「押しっぱなし」のように残ってしまい
 * （タッチデバイスはマウスが離れるという概念が無い、ボタンはタップ後もフォーカスが
 * 残る）、JS側でis-openを外してもサブメニューが閉じない不具合の原因になる。
 * このホバー系の開閉はPC（991px以上）限定にし、SPは.is-open（＋ボタン）だけで制御する。
 */
@media (min-width: 991px) {
	.site-nav__list .menu-item-has-children:hover > a::after,
	.site-nav__list .menu-item-has-children:focus-within > a::after {
		transform: rotate(225deg);
	}
}

/*
 * top:100% + margin-topで隙間を作ると、その隙間部分がホバー判定から外れてしまい、
 * マウスをメニュー項目からサブメニューへ移動する途中で:hoverが切れて閉じてしまう
 * （＝クリックしないと選べない、という不具合の原因）。隙間を実際のマージンではなく
 * paddingにして、隙間部分もサブメニュー自身のホバー可能な領域に含めるようにする。
 */
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	min-width: 240px;
	padding: 16px 0 8px;
	background: #ffffffb5;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 0;
	box-shadow: 0 12px 32px rgba(20, 25, 35, 0.12);
}

.site-nav__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* 上の::afterの回転と同じ理由で、ホバー系の開閉はPC限定にする */
@media (min-width: 991px) {
	.site-nav__list .menu-item-has-children:hover > .sub-menu,
	.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 12px 24px;
	white-space: nowrap;
	color: var(--color-text) !important;
}

/* SP専用の＋開閉ボタン。PCでは常に非表示（表示はSP用メディアクエリ側で上書き） */
.site-nav__submenu-toggle {
	display: none;
}

@media (min-width: 991px) {
	.site-nav__list .sub-menu a:hover {
		color: #7f92c4 !important;
	}
}

/* --------------------------------------------------------------------------
   Footer
   デザインカンプ準拠: フッター本体はライトグレー背景＋ダーク文字。
   最下部のコピーライト行のみ独立した濃色の帯になっている。
   -------------------------------------------------------------------------- */
.breadcrumbs {
	background: #ffffff;
	padding: 16px 0;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: #262b33;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.breadcrumbs__item:not(:first-child)::before {
	content: "/";
	color: #262b33;
}

.breadcrumbs__item a {
	color: #262b33;
}

.breadcrumbs__item a:hover {
	color: #6b7280;
}

.breadcrumbs__item span[aria-current="page"] {
	color: #a6b1da;
}

.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding-top: 80px;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 60px;
}

.site-footer__brand {
	max-width: 320px;
}

.site-footer__logo img {
	width: 110px;
	height: auto;
}

.site-footer__lead {
	margin-top: 28px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-text-light);
}

.footer-nav {
	display: flex;
	gap: 80px;
	font-size: 14px;
}

.footer-nav__col {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.footer-nav__heading a {
	font-weight: 400;
}

.footer-nav__sublist {
	margin-top: -18px;
	padding-left: 0px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: var(--color-text-light);
}

.site-footer__bottom {
	margin-top: 60px;
	background: var(--color-footer-bottom-bg);
	padding: 16px 0;
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.site-footer__copyright {
	color: var(--color-footer-bottom-text);
	font-size: 0.8rem;
	opacity: 0.85;
}

.site-footer__privacy-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #acacac;
	font-size: 14px;
	font-weight: 400;
}

.site-footer__privacy-icon {
	flex-shrink: 0;
	color: #acacac;
}

@media (max-width: 768px) {
	.site-footer__inner {
		flex-direction: column;
		gap: 40px;
	}

	.footer-nav {
		gap: 50px;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   Responsive（SP: ハンバーガーメニュー）
   -------------------------------------------------------------------------- */
@media (max-width: 990px) {
	/*
	 * メニューを開いている間だけ、ヘッダー自体も全画面メニューと同じ白背景にする
	 * （透過ヘッダーのままだとKV写真が透けて見え、ロゴや×アイコンの視認性が
	 * 写真の色によって不安定になるため）。スクロール時の透過仕様はそのまま維持し、
	 * この「メニューを開いている間」だけの特別な状態として扱う。
	 */
	.site-header:has(.site-nav.is-open) {
		background: var(--color-bg);
	}

	.site-header:has(.site-nav.is-open) .site-nav__list a,
	.site-header:has(.site-nav.is-open) .lang-switcher a {
		color: #5d6168 !important;
	}

	/* CONTACTのピルボタンのみ、背景色はそのままでPCと同じ白文字にする */
	.site-header:has(.site-nav.is-open) .site-nav__list .menu-cta > a {
		color: #ffffff !important;
	}

	/* 選択中の言語のみ、PCと同じくアクセントカラーにする */
	.site-header:has(.site-nav.is-open) .lang-switcher__item.is-current a {
		color: var(--color-accent) !important;
	}

	.site-header__menu-btn {
		display: flex;
	}

	/* ハンバーガーアイコン → バツ（×）へのモーフアニメーション */
	.site-header__menu-btn span:nth-child(1) {
		transform-origin: center;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}

	.site-header__menu-btn span:nth-child(2) {
		transition: opacity 0.2s ease;
	}

	.site-header__menu-btn span:nth-child(3) {
		transform-origin: center;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}

	.site-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.site-header__menu-btn[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.site-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/*
	 * TOPページ（.is-home）はヘッダー文字が白のため、メニューを開いた状態のまま
	 * だとバツ（×）アイコンが白背景の全画面メニューに重なって見えなくなってしまう。
	 * 開いている間はアイコンを常にダーク色に固定する。
	 */
	.site-header__menu-btn[aria-expanded="true"] span {
		background: var(--color-text) !important;
	}

	/* メニューを開いている間はロゴを非表示にする */
	.site-header:has(.site-nav.is-open) .site-header__logo {
		visibility: hidden;
	}

	/* 閉じるワイプの最中はヘッダーを白背景に固定しない（is-openの白背景指定を打ち消す） */
	.site-header:has(.site-nav.is-closing) {
		background: transparent;
	}

	/*
	 * メニュー本体はclip-pathで開閉する。開く時は下から上へ露出が広がっていき、
	 * 閉じる時はその逆再生ではなく上から下へ消えていく（開閉で見え方の向きを揃えつつ
	 * 動きの起点は逆にする）。is-closing は main.js が閉じるクリック時に付与し、
	 * transitionend後に外して初期位置（非表示）に戻す。
	 * inset の top は 0（ヘッダーの高さぶんではなく画面最上部から）にし、
	 * ロゴ・×ボタン（z-index:2）がこの白背景（z-index:1）より確実に上に
	 * 乗るようにする。メニュー項目自体はpadding-topでヘッダーの下から始まる。
	 */
	.site-nav {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1;
		padding-top: var(--header-height);
		background: #ffffffe8;
		backdrop-filter: blur(3.19vw);
		-webkit-backdrop-filter: blur(3.19vw);
		overflow-y: auto;
		visibility: hidden;
		clip-path: inset(100% 0 0 0);
		transition: clip-path 0.4s ease-out, visibility 0.4s ease-out;
		will-change: clip-path, visibility;
	}

	.site-nav.is-open {
		visibility: visible;
		clip-path: inset(0 0 0 0);
		transition: clip-path 0.3s ease, visibility 0s;
	}

	/*
	 * 閉じる時は上からメニュー背景が消えていく（clip-pathで上から下へ切り取っていく）ワイプにする。
	 * テキストが消え終わる（0.25s）のを待たずに、消え終わった直後からワイプをゆっくり始める。
	 */
	.site-nav.is-closing {
		visibility: visible;
		clip-path: inset(100% 0 0 0);
		transition: clip-path 0.6s ease-in 0.25s, visibility 0s linear 0.85s;
	}

	/*
	 * メニュー内のテキストは背景が下からスライドインし終わるまで非表示にしておき、
	 * スライド完了後（0.3s後）にフェードインさせる。閉じる時は即座に消す。
	 */
	.site-nav__list,
	.site-nav > .lang-switcher {
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.site-nav.is-open .site-nav__list,
	.site-nav.is-open > .lang-switcher {
		opacity: 1;
		transition: opacity 0.25s ease 0.3s;
	}

	/* 閉じる時はis-openを残したままis-closingを付与するため、テキストは明示的に即座に消す */
	.site-nav.is-closing .site-nav__list,
	.site-nav.is-closing > .lang-switcher {
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
		padding: 20px;
	}

	.site-nav__list > li {
		padding: 4.52vw 2.13vw 4.26vw;
		border-bottom: 1px solid var(--color-border);
	}

	.site-nav__list > li:last-child {
		border-bottom: none;
	}

	/* SPの全画面メニューは常に白背景なので、透過ヘッダーの白文字指定を打ち消してダーク文字にする */
	.site-nav__list a {
		color: var(--color-text) !important;
	}

	/*
	 * ページ遷移のみの項目（トップページ／私たちについて／会社概要／ニュース）は、
	 * リンク本体の右端に「›」を表示する。子メニューを持つ項目（事業内容）とCONTACTピルは対象外。
	 */
	.site-nav__list > li:not(.menu-item-has-children):not(.menu-cta) > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.site-nav__list > li:not(.menu-item-has-children):not(.menu-cta) > a::after {
		content: "\203A";
		flex-shrink: 0;
		margin-left: 12px;
		color: #b9b9b9;
		font-size: 26px;
		font-weight: 200;
		line-height: 1;
	}

	/*
	 * 事業内容だけは特殊: リンク本体（テキスト）は通常どおり事業内容ページへ遷移し、
	 * 右端の＋ボタン（.site-nav__submenu-toggle、main.js側で挿入）だけが
	 * 子メニューの開閉を担当する。そのためliごとflexにしてリンクとボタンを横並びにする。
	 */
	.site-nav__list .menu-item-has-children {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.site-nav__list .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	/*
	 * ＋は横棒(::before)＋縦棒(::after)の2本で作る。両方ともボタンの右端に揃えて配置し、
	 * 他の項目の「›」と同じ右端の位置に視覚的な中心が来るようにしている。
	 * 開いたら縦棒だけ90deg回転させ、横棒に重なって見た目上「−」になる。
	 */
	.site-nav__list .menu-item-has-children .site-nav__submenu-toggle {
		position: relative;
		display: block;
		flex-shrink: 0;
		width: 26px;
		height: 26px;
		margin-left: 12px;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.site-nav__list .menu-item-has-children .site-nav__submenu-toggle::before,
	.site-nav__list .menu-item-has-children .site-nav__submenu-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		background: #b9b9b9;
	}

	.site-nav__list .menu-item-has-children .site-nav__submenu-toggle::before {
		width: 14px;
		height: 1px;
		transform: translateY(-50%);
	}

	.site-nav__list .menu-item-has-children .site-nav__submenu-toggle::after {
		width: 1px;
		height: 14px;
		right: 6.5px;
		transform: translateY(-50%);
		transition: transform 0.25s ease;
	}

	.site-nav__list .menu-item-has-children.is-open .site-nav__submenu-toggle::after {
		transform: translateY(-50%) rotate(90deg);
	}

	/*
	 * display:none/blockの瞬時切り替えだとカチッと出てしまうため、max-height+opacityで
	 * ニュルンと滑らかに開閉させる。displayは常にblockのままにし、閉じた状態は
	 * max-height:0 + overflow:hiddenで見た目上隠す。
	 */
	.site-nav__list .sub-menu {
		display: block;
		position: static;
		flex-basis: 100%;
		min-width: 0;
		margin: 0 0 0 16px;
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
	}

	.site-nav__list .menu-item-has-children.is-open > .sub-menu {
		max-height: 600px;
		margin: 10px 0 4px 16px;
		opacity: 1;
	}

	.site-nav__list .sub-menu a {
		padding: 12px 0;
	}

	/* 旧デザインの矢印（PC用の▽/△）は使わない */
	.site-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	.site-nav__list .menu-cta > a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		border-radius: 4px;
		padding: 12px 0;
		letter-spacing: 0.04em;
	}

	.site-nav__list .menu-cta > a::after {
		content: "\203A";
		position: absolute;
		right: 20px;
		font-size: 22px;
		font-weight: 200;
		line-height: 1;
	}

	.lang-switcher {
		margin-left: 0;
	}

	.lang-switcher__item:not(.is-current) a {
		color: #b9b9b9 !important;
	}
}

/* --------------------------------------------------------------------------
   Common section parts
   -------------------------------------------------------------------------- */
.section-title {
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: 32px;
}

.about-intro .section-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #a5b4d9;
	margin: 16px auto 0;
}

/* 全ページ共通のh2サイズ（.about-introの中のsection-title・.service-intro h2は対象外） */
h2:not(.about-intro .section-title):not(.service-intro h2) {
	font-size: clamp(21px, 3.2vw, 34px);
}

@media (max-width: 768px) {
	h2:not(.about-intro .section-title):not(.service-intro h2) {
		font-size: clamp(20px, 6vw, 26.6px);
	}
}

@media (max-width: 768px) {
	.section-title {
		font-size: 1.4rem;
	}
}

.section-lead {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
	color: var(--color-text-light);
}

.eyebrow {
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	color: var(--color-accent);
	margin-bottom: 8px;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	border: 1px solid var(--color-accent-pale);
	border-radius: 4px;
	color: var(--color-text);
	background: var(--color-bg);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-outline:hover {
	background: var(--color-accent-pale);
	border-color: var(--color-accent-pale);
}

/*
 * 全ページ共通: KV（背景・文字を含むセクション全体）はページ読み込み時にふわっとフェードインする。
 * .top-hero / .page-hero / .service-hero で共通利用。
 * transitionベースのため、読み込み後にJS（main.js）が各要素へ is-loaded クラスを付与して発火させる
 * （二重requestAnimationFrameで、opacity:0の状態が一度描画されてからクラスを付けている）。
 */
.top-hero,
.page-hero,
.service-hero {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 0.5s ease;
}

.top-hero.is-loaded,
.page-hero.is-loaded,
.service-hero.is-loaded {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------------------
   下層ページ共通KV（写真付きヒーロー）
   デザインカンプ（2_ABOUT.jpg / 3_SERVICES.jpg / 4_COMPANY.jpg / 7_NEWS.jpg）準拠
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 90vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

@media (max-width: 768px) {
	.page-hero {
		aspect-ratio: 3 / 5;
		max-height: none;
	}
}

/* SERVICES詳細・CONTACT・Privacy Policy用の低いKV（他ページより短い） */
.page-hero--short {
	aspect-ratio: 24 / 10;
	max-height: 55vh;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

/*
 * 下層ページKVのスライドショー（ABOUT等、kv_prefix/kv_countを指定した場合のみ使用）。
 * TOPページのオリジナル5枚版（icika-kv-slideshow-1〜5）と同じ設計・タイミングをそのまま流用し、
 * クラス名だけ.page-hero__kv / @keyframes icika-page-kv-slideshow-*に分けて衝突を避けている。
 * 1枚あたり7s×5枚＝35sサイクル、フェードの山は各コマ境目をまたいで4.9秒かけて溶けるように切り替わる。
 */
.page-hero__kv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation-duration: 35s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.page-hero__kv:nth-child(1) {
	animation-name: icika-page-kv-slideshow-1;
	animation-delay: 0s;
}

.page-hero__kv:nth-child(2) {
	animation-name: icika-page-kv-slideshow-2;
	animation-delay: 7s;
}

.page-hero__kv:nth-child(3) {
	animation-name: icika-page-kv-slideshow-3;
	animation-delay: 14s;
}

.page-hero__kv:nth-child(4) {
	animation-name: icika-page-kv-slideshow-4;
	animation-delay: 21s;
}

.page-hero__kv:nth-child(5) {
	animation-name: icika-page-kv-slideshow-5;
	animation-delay: 28s;
}

@keyframes icika-page-kv-slideshow-1 {
	0% {
		opacity: 0.5;
		transform: scale(1) translate(0, 0);
	}

	7% {
		opacity: 1;
		transform: scale(1.07) translate(0, 0);
	}

	13% {
		opacity: 1;
		transform: scale(1.1) translate(0, 0);
	}

	27% {
		opacity: 0;
		transform: scale(1.17) translate(0, 0);
	}

	93% {
		opacity: 0;
		transform: scale(1.17) translate(0, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1) translate(0, 0);
	}
}

@keyframes icika-page-kv-slideshow-2 {
	0% {
		opacity: 0.5;
		transform: scale(1.17) translate(0, 0);
	}

	7% {
		opacity: 1;
		transform: scale(1.12) translate(0, 0);
	}

	13% {
		opacity: 1;
		transform: scale(1.09) translate(0, 0);
	}

	27% {
		opacity: 0;
		transform: scale(1) translate(0, 0);
	}

	93% {
		opacity: 0;
		transform: scale(1) translate(0, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.17) translate(0, 0);
	}
}

@keyframes icika-page-kv-slideshow-3 {
	0% {
		opacity: 0.5;
		transform: scale(1.09) translate(1.7%, 0);
	}

	7% {
		opacity: 1;
		transform: scale(1.12) translate(1%, 0);
	}

	13% {
		opacity: 1;
		transform: scale(1.14) translate(0.3%, 0);
	}

	27% {
		opacity: 0;
		transform: scale(1.2) translate(-2.5%, 0);
	}

	93% {
		opacity: 0;
		transform: scale(1.2) translate(-2.5%, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.09) translate(1.7%, 0);
	}
}

@keyframes icika-page-kv-slideshow-4 {
	0% {
		opacity: 0.5;
		transform: scale(1.09) translate(-1.7%, 0);
	}

	7% {
		opacity: 1;
		transform: scale(1.12) translate(-1%, 0);
	}

	13% {
		opacity: 1;
		transform: scale(1.14) translate(-0.3%, 0);
	}

	27% {
		opacity: 0;
		transform: scale(1.2) translate(2.5%, 0);
	}

	93% {
		opacity: 0;
		transform: scale(1.2) translate(2.5%, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.09) translate(-1.7%, 0);
	}
}

@keyframes icika-page-kv-slideshow-5 {
	0% {
		opacity: 0.5;
		transform: scale(1.2) translate(0, 1.7%);
	}

	7% {
		opacity: 1;
		transform: scale(1.15) translate(0, 1%);
	}

	13% {
		opacity: 1;
		transform: scale(1.12) translate(0, 0.3%);
	}

	27% {
		opacity: 0;
		transform: scale(1.05) translate(0, -1.7%);
	}

	93% {
		opacity: 0;
		transform: scale(1.05) translate(0, -1.7%);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.2) translate(0, 1.7%);
	}
}

/* CONTACTページのみ、背景画像の下端がぱつっと切れて見えるのを防ぐ白グラデーション */
.contact .page-hero__bg::after,
.privacy .page-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: 60px;
}

/* テキストの後ろにぼかした白い光彩を敷く（テキスト自体には軽いtext-shadowのみ併用） */
.page-hero__inner::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 0;
	z-index: 0;
	width: min(700px, 90%);
	height: 80%;
	background-color: #ffffffb3;
	filter: blur(40px);
	-webkit-filter: blur(40px);
	pointer-events: none;
}

/*
 * KVテキスト自体がふわっと上がりながら現れるアニメーション
 * （帯で覆って隠すのではなく、テキストのopacity/位置を直接動かす）。
 * eyebrow → 見出し → リード文の順に少しずつ遅れて表示する。
 */
@keyframes icika-hero-text-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.page-hero__eyebrow,
.page-hero__inner h1,
.page-hero__lead {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: icika-hero-text-in 0.9s ease forwards;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.page-hero__eyebrow {
	animation-delay: 0.1s;
}

.page-hero__inner h1 {
	animation-delay: 0.25s;
}

.page-hero__lead {
	animation-delay: 0.4s;
}

.page-hero__eyebrow {
	font-family: var(--font-base);
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	color: var(--color-accent);
	margin-bottom: 0;
}

.page-hero__inner h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	margin-bottom: 16px;
}

.page-hero__lead {
	color: #5d5d5d;
	font-size: clamp(13.6px, 1.171vw, 17.6px);
}

@media (max-width: 767px) {
	.page-hero__lead {
		font-size: clamp(11.9px, 3.733vw, 13.8px);
	}
}

.page-hero__scroll {
	position: absolute;
	right: 24px;
	bottom: 32px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	writing-mode: vertical-rl;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: #b0beda;
}

@media (max-width: 767px) {
	.page-hero__scroll {
		right: 12px;
	}
}

.page-hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 80px;
	background: #b0beda;
	transform-origin: top;
	animation: icika-scroll-line 1.8s ease-in-out infinite;
}

/* TOPのKVは背景が暗いcanvasアニメーションのため、SCROLL表記は白にする */
.top-hero__scroll {
	color: #ffffff;
	bottom: 80px;
}

.top-hero__scroll::after {
	background: #ffffff;
}

@keyframes icika-scroll-line {
	0% {
		transform: scaleY(0);
		opacity: 0;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}

	100% {
		transform: scaleY(0);
		opacity: 0;
	}
}

@media (max-width: 768px) {
	.page-hero {
		aspect-ratio: 3 / 5;
		max-height: none;
	}

	.page-hero--short {
		aspect-ratio: 16 / 10;
	}

	/* お問い合わせページのみ、他の.page-hero--short利用ページより縦長にする */
	.contact .page-hero--short {
		aspect-ratio: 3 / 4;
	}
}

/* --------------------------------------------------------------------------
   下層ページ共通 CONTACT誘導セクション（淡色ボックス）
   -------------------------------------------------------------------------- */
.contact-cta {
	padding: 100px 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.contact-cta.is-visible {
	opacity: 1;
}

.contact-cta__box {
	max-width: 800px;
	margin: 0 auto;
	padding: 56px 40px;
	background: #f5f6fa;
	border-radius: 4px;
	text-align: center;
}

.contact-cta__lead {
	color: var(--color-text-light);
	margin-bottom: 24px;
}

@media (max-width: 768px) {
	.contact-cta__box {
		padding: 40px 16px;
	}
}

/* --------------------------------------------------------------------------
   TOP: Hero
   -------------------------------------------------------------------------- */
.top {
	width: 100%;
	overflow-x: hidden;
}

.top-hero {
	position: relative;
	width: 100%;
	color: #fff;
}

.top-hero__bg {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.top-hero__bg img,
.top-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* KV背景アニメーション（canvas）。既存の写真の上、テキスト（.top-hero__inner）の下に敷く */
.top-hero__kv-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * KVスライドショー: kv-01〜06の6枚。animation-delayを6枚ぶん均等にずらして順番に
 * 表示を切り替える（1枚あたりの持ち時間は42s ÷ 6枚 = 7s）。
 *
 * クロスフェード（自然に溶けるように切り替わる）の仕組み:
 * 各画像のフェードイン/フェードアウトの「山」を、自分の担当コマの境目（0%と1/6の地点）
 * ちょうどを中心にまたぐ形にし、かつ山の幅を4.9秒とかなり広めにとっている
 * （94.17%〜5.83%にかけてフェードイン、10.83%〜22.5%にかけてフェードアウト）。
 * こうすると、この画像が0%地点でフェードインし始める瞬間は、ちょうど「前の画像」が
 * 同じ0%地点（＝前の画像から見た1/6の地点）でフェードアウトする真っ最中と完全に重なり、
 * 両方が同時に不透明度0.5前後を通過する＝常にどちらかが画面に映っている状態を保ちつつ、
 * 4.9秒かけてゆっくり溶けるように切り替わる（急にパッと切り替わらない）。
 * 拡大縮小・パンの動きは6枚それぞれ変えて、単調な繰り返しにならないようにしている。
 */
.top-hero__kv {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation-duration: 42s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.top-hero__kv:nth-child(1) {
	animation-name: icika-kv-slideshow-1;
	animation-delay: 0s;
}

.top-hero__kv:nth-child(2) {
	animation-name: icika-kv-slideshow-2;
	animation-delay: 7s;
}

.top-hero__kv:nth-child(3) {
	animation-name: icika-kv-slideshow-3;
	animation-delay: 14s;
}

.top-hero__kv:nth-child(4) {
	animation-name: icika-kv-slideshow-4;
	animation-delay: 21s;
}

.top-hero__kv:nth-child(5) {
	animation-name: icika-kv-slideshow-5;
	animation-delay: 28s;
}

.top-hero__kv:nth-child(6) {
	animation-name: icika-kv-slideshow-6;
	animation-delay: 35s;
}

/* 1枚目: ゆっくり拡大 */
@keyframes icika-kv-slideshow-1 {
	0% {
		opacity: 0.5;
		transform: scale(1) translate(0, 0);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.04) translate(0, 0);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.06) translate(0, 0);
	}

	22.5% {
		opacity: 0;
		transform: scale(1.1) translate(0, 0);
	}

	94.17% {
		opacity: 0;
		transform: scale(1.1) translate(0, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1) translate(0, 0);
	}
}

/* 2枚目: ゆっくり縮小 */
@keyframes icika-kv-slideshow-2 {
	0% {
		opacity: 0.5;
		transform: scale(1.1) translate(0, 0);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.07) translate(0, 0);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.05) translate(0, 0);
	}

	22.5% {
		opacity: 0;
		transform: scale(1) translate(0, 0);
	}

	94.17% {
		opacity: 0;
		transform: scale(1) translate(0, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.1) translate(0, 0);
	}
}

/* 3枚目: 拡大しながら右へパン */
@keyframes icika-kv-slideshow-3 {
	0% {
		opacity: 0.5;
		transform: scale(1.05) translate(1%, 0);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.07) translate(0.6%, 0);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.08) translate(0.2%, 0);
	}

	22.5% {
		opacity: 0;
		transform: scale(1.12) translate(-1.5%, 0);
	}

	94.17% {
		opacity: 0;
		transform: scale(1.12) translate(-1.5%, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.05) translate(1%, 0);
	}
}

/* 4枚目: 拡大しながら左へパン */
@keyframes icika-kv-slideshow-4 {
	0% {
		opacity: 0.5;
		transform: scale(1.05) translate(-1%, 0);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.07) translate(-0.6%, 0);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.08) translate(-0.2%, 0);
	}

	22.5% {
		opacity: 0;
		transform: scale(1.12) translate(1.5%, 0);
	}

	94.17% {
		opacity: 0;
		transform: scale(1.12) translate(1.5%, 0);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.05) translate(-1%, 0);
	}
}

/* 5枚目: 縮小しながら上へパン */
@keyframes icika-kv-slideshow-5 {
	0% {
		opacity: 0.5;
		transform: scale(1.12) translate(0, 1%);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.09) translate(0, 0.6%);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.07) translate(0, 0.2%);
	}

	22.5% {
		opacity: 0;
		transform: scale(1.03) translate(0, -1%);
	}

	94.17% {
		opacity: 0;
		transform: scale(1.03) translate(0, -1%);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.12) translate(0, 1%);
	}
}

/* 6枚目: 拡大しながら下へパン */
@keyframes icika-kv-slideshow-6 {
	0% {
		opacity: 0.5;
		transform: scale(1.02) translate(0, -1%);
	}

	5.83% {
		opacity: 1;
		transform: scale(1.05) translate(0, -0.6%);
	}

	10.83% {
		opacity: 1;
		transform: scale(1.07) translate(0, -0.2%);
	}

	22.5% {
		opacity: 0;
		transform: scale(1.1) translate(0, 1%);
	}

	94.17% {
		opacity: 0;
		transform: scale(1.1) translate(0, 1%);
	}

	100% {
		opacity: 0.5;
		transform: scale(1.02) translate(0, -1%);
	}
}

.top-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	/* テキストの無い部分までマウス操作を奪ってしまい、背景canvasのマウス反応が
	   効かなくなるのを防ぐため、このラッパー自体はクリック等を透過させる */
	pointer-events: none;
}

/*
 * KVテキストの二段階アニメーション:
 * 1. top-hero__catchは1文字ずつ（.top-hero__char、PHP側のicika_animate_chars()が生成）
 *    左から右へ流れるようにフェードインする。文字ごとの開始タイミングは
 *    PHP側でstyle="animation-delay:...ms"として1文字ずつ出力済み（40ms間隔）。
 * 2. 全文字が表示し終わったタイミングで、top-hero__subcatch/top-hero__leadの
 *    下から上へのフェードイン（icika-hero-text-in、他のKVと共通）が始まる。
 *    この開始タイミングもPHP側で文字数から逆算し、style="animation-delay:...ms"として出力している。
 */
@keyframes icika-hero-text-in-ltr {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.top-hero__catch {
	font-size: clamp(26px, 7.2vw, 48px);
	line-height: 1.8;
	text-shadow: 0px 0px 12px #8b97ac82;
}

@media (max-width: 767px) {
	.top-hero__catch {
		text-shadow: 0px 0px 8px #8b97ac82;
	}
}

.top-hero__char {
	display: inline-block;
	opacity: 0;
	animation: icika-hero-text-in-ltr 0.5s ease forwards;
}

.top-hero__subcatch {
	font-family: var(--font-base);
	letter-spacing: 0.1em;
	font-size: 14px;
	color: #7087c5;
	opacity: 0;
	animation: icika-hero-text-in 0.9s ease forwards;
}

@media (max-width: 767px) {
	.top-hero__subcatch {
		color: #5870b2;
	}
}

.top-hero__lead {
	max-width: 800px;
	font-size: clamp(13.6px, 1.171vw, 17.6px);
	color: #3d3c45;
	text-shadow: 1px 1px 20px #d2dbe6a8;
	letter-spacing: 0.06em;
	line-height: 2.57143em;
	opacity: 0;
	animation: icika-hero-text-in 0.9s ease forwards;
}

@media (max-width: 767px) {
	.top-hero__lead {
		font-size: clamp(11.9px, 3.733vw, 13.8px);
	}
}

/* --------------------------------------------------------------------------
   TOP: Philosophy
   -------------------------------------------------------------------------- */
.top-philosophy {
	opacity: 0;
	transition: opacity 2s ease;
}

.top-philosophy.is-visible {
	opacity: 1;
}

.top-philosophy.is-visible .container {
	max-width: 1200px;
}

.top-philosophy__text h2 {
	font-size: 1.5rem;
	line-height: 1.7;
	margin-bottom: 36px;
}

.top-philosophy__text p {
	color: var(--color-text-light);
	line-height: 2.4;
}

.top-philosophy__cta {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 48px;
}

/*
 * PCも、スマホと同じく画像をテキストの隣に並べる別カラムではなく、
 * セクション全体の背景として全幅表示にする。.top-philosophy__inner の
 * grid-template-columns（1fr 1fr）自体は変えないため、テキスト側の位置・幅は
 * 現状のまま変わらない（画像だけflowから外れて背景になる）。
 */
@media (min-width: 769px) {
	.top-philosophy__inner {
		position: relative;
		min-height: 480px;
		padding: 130px 20px;
	}

	.top-philosophy__image {
		position: absolute;
		inset: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		z-index: 0;
		margin: 0;
	}

	.top-philosophy__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		opacity: 0.1;
		transition: opacity 2.4s ease;
	}

	.top-philosophy__image img.is-revealed {
		opacity: 1;
	}

	.top-philosophy__text {
		position: relative;
		z-index: 1;
	}

	.top-philosophy__cta {
		position: relative;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------------
   TOP: Stance（3つの姿勢）
   -------------------------------------------------------------------------- */
.top-stance {
	padding: 100px 0;
	background: url("../images/top/threecorebg.png") no-repeat center center / cover, linear-gradient(135deg, #f6eef8 0%, #eef1fb 50%, #e9f2fb 100%);
	opacity: 0;
	transition: opacity 2s ease;
}

@media (max-width: 768px) {
	.top-stance {
		background: url("../images/top/threecorebgsp.png") no-repeat center center / cover, linear-gradient(135deg, #f6eef8 0%, #eef1fb 50%, #e9f2fb 100%);
	}
}

.top-stance.is-visible {
	opacity: 1;
}

.top-stance__more {
	text-align: center;
	margin-top: 40px;
}

/*
 * 「3つの姿勢」ベン図（TOP・ABOUT共通コンポーネント）。
 * 薄紫〜白のグラデーション円が3つ重なり、スクロールで画面に入ると
 * ふわっとフェードイン＋拡大しながら現れる（.is-visible はJSで付与）。
 */
.stance-venn {
	position: relative;
	max-width: 780px;
	height: 640px;
	margin: 0 auto;
}

.stance-venn__circle {
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle at center, #ffffff9c 0%, #d7e3fe4f 55%, #c4d3f4ba 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.stance-venn.is-visible .stance-venn__circle {
	opacity: 1;
	transform: scale(1);
}

.stance-venn__circle--top {
	top: 0;
	left: 50%;
	transform: translateX(-50%) scale(0.85);
}

.stance-venn.is-visible .stance-venn__circle--top {
	transform: translateX(-50%) scale(1);
}

.stance-venn__circle--left {
	top: 260px;
	left: calc(50% - 340px);
	transition-delay: 0.15s;
}

.stance-venn__circle--right {
	top: 260px;
	left: calc(50% - 40px);
	transition-delay: 0.3s;
}

.stance-venn__inner {
	max-width: 260px;
	text-align: center;
	padding: 0;
}

.stance-venn__inner h3 {
	font-size: 22px;
	color: #7486b5;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	margin-bottom: 12px;
}

.stance-venn__inner p {
	font-size: 0.85rem;
	color: #8895ae;
	line-height: 1.8;
}

/*
 * ABOUT専用（.stance-venn--about）: TOPと違い、表示先の .about-stance__grid 左カラムが
 * minmax(320px, 480px) と狭いため、TOP用の固定px設計（780px前提）のままだと
 * 画面幅を狭めたときに円が左にはみ出す。円のサイズ・位置を%基準にして、
 * カラム幅にかかわらず必ず収まるようにし、TOPより一回り小さくする。
 */
.stance-venn--about {
	width: 100%;
	max-width: 540px;
	height: auto;
	aspect-ratio: 300 / 260;
	margin: 0;
}

/*
 * .about-stance__grid が1カラムになる900px以下では、.stance-venn--about も
 * （PCでは左カラムに沿わせるためのmargin:0だが）中央寄せに切り替える。
 */
@media (max-width: 900px) {
	.stance-venn--about {
		margin: 0 auto;
	}
}

.stance-venn--about .stance-venn__circle {
	width: 56%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.stance-venn--about .stance-venn__circle--left {
	top: 38%;
	left: 3%;
}

.stance-venn--about .stance-venn__circle--right {
	top: 38%;
	left: 43%;
}

.stance-venn--about .stance-venn__inner {
	max-width: 80%;
}

/* 下の2つの丸（誠実・個性）の文字だけ、少し上に寄って見えるため4px下げる */
.stance-venn--about .stance-venn__circle--left .stance-venn__inner,
.stance-venn--about .stance-venn__circle--right .stance-venn__inner {
	padding-top: 12px;
}

/* 2番目（左の丸）は左に、3番目（右の丸）は右に、テキストを少しずらす */
.stance-venn--about .stance-venn__circle--left .stance-venn__inner {
	transform: translateX(-8px);
}

.stance-venn--about .stance-venn__circle--right .stance-venn__inner {
	transform: translateX(8px);
}

@media (max-width: 768px) {
	/*
	 * スマホでも「縦一列」にはせず、PCと同じ三角形の重なりを縮小して維持する。
	 * コンテナ幅を86%（可変）にし、円のサイズ・位置もすべて%基準にして
	 * どの画面幅でも同じ比率で表示されるようにしている。
	 */
	.stance-venn {
		width: 100%;
		max-width: 100%;
		aspect-ratio: 300 / 260;
		height: auto;
	}

	.top-stance .stance-venn {
		margin-bottom: 64px;
	}

	.stance-venn__circle {
		width: 56%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.stance-venn__circle--top {
		top: 0;
		left: 50%;
		transform: translateX(-50%) scale(0.85);
	}

	.stance-venn.is-visible .stance-venn__circle--top {
		transform: translateX(-50%) scale(1);
	}

	.stance-venn__circle--left {
		top: 48%;
		left: -2%;
	}

	.stance-venn__circle--right {
		top: 48%;
		left: 46%;
	}

	.stance-venn__inner {
		max-width: 80%;
		padding: 0;
	}

	.stance-venn__inner h3 {
		font-size: 19px;
		margin-bottom: 4px;
	}

	.stance-venn__inner p {
		font-size: 0.65rem;
		line-height: 1.4;
	}
}

@media (max-width: 360px) {
	.stance-venn__inner p {
		font-size: 10px;
	}
}

/*
 * ABOUT専用: 円（見出しのみ）を左に、詳細テキストを右に並べる2カラム構成。
 * 左の円と右のテキストは同じ position（top/left/right）ごとに同じ遅延で
 * フェードインし、対応関係が視覚的にリンクして見えるようにする。
 * JS側は .about-stance__grid 自体の可視化タイミングで .is-visible を付与する
 * （中の .stance-venn にも同時に付与されるため、円のアニメーションも連動する）。
 */
.about-stance__grid {
	display: grid;
	grid-template-columns: minmax(320px, 480px) 1fr;
	align-items: center;
	gap: 60px;
	margin-top: 60px;
}

.about-stance__details {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 800px;
	margin: 0 auto;
}

.about-stance__detail {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-stance__grid.is-visible .about-stance__detail {
	opacity: 1;
	transform: translateY(0);
}

.about-stance__detail--left {
	transition-delay: 0.15s;
}

.about-stance__detail--right {
	transition-delay: 0.3s;
}

.about-stance__detail dt {
	font-size: 1.4rem;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	color: #7486b5;
	margin-bottom: 12px;
}

.about-stance__detail dt::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: #a5b4d9;
	margin: 8px 0 12px;
}

.about-stance__detail dd {
	margin: 0;
	color: var(--color-text-light);
	line-height: 1.9;
}

@media (max-width: 768px) {
	.about-stance__detail dd {
		font-size: clamp(11.9px, 3.6vw, 16px);
	}
}

@media (max-width: 900px) {
	.about-stance__grid {
		grid-template-columns: 1fr;
	}

	.about-stance__details {
		padding: 15px 18px;
	}
}

/* --------------------------------------------------------------------------
   TOP: Services（4カード）
   -------------------------------------------------------------------------- */
.top-services {
	padding: 100px 0;
	background: #f5f6fa;
	opacity: 0;
	transition: opacity 2s ease;
}

.top-services.is-visible {
	opacity: 1;
}

.top-services__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.top-services__item a {
	display: block;
}

/* 画像コンテナ: オーバーレイタイトル＋ホバーズームアニメーション */
.top-services__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin-bottom: 0;
	border-radius: 0px;
}

.top-services__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* 海外進出支援のカードのみ、768px以上で画像の右側を見せる */
@media (min-width: 768px) {
	.top-services__item--overseas .top-services__image img {
		object-position: right center;
	}
}

.top-services__item a:hover .top-services__image img {
	transform: scale(1.08);
}

.top-services__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 15 25 / 78%) 0%, rgba(10, 15, 25, 0) 75%);
}

/* タイトル＋リード文を画像内下部にまとめて重ねる */
.top-services__overlay {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

/*
 * タイトルの文字数によって1行/2行の差が出ても、下のリード文の開始位置が
 * 揃うように、2行ぶんの高さを確保してテキストをその中で縦中央ぞろえにする。
 */
.top-services__title {
	display: flex;
	align-items: center;
	min-height: 40px;
	color: #fff;
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.5;
	margin-bottom: 12px;
	font-family: var(--font-serif);
}

@media (max-width: 767px) {
	.top-services__title {
		font-size: clamp(20px, 6vw, 26.6px);
	}
}

.top-services__lead {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	line-height: 1.6;
}

.top-services__more {
	text-align: center;
	margin-top: 48px;
}

/* --------------------------------------------------------------------------
   TOP: News
   -------------------------------------------------------------------------- */
.top-news {
	padding: 100px 0;
	background: #ffffff;
	opacity: 0;
	transition: opacity 2s ease;
}

.top-news.is-visible {
	opacity: 1;
}

.top-news__list {
	max-width: 1100px;
	margin: 0 auto;
	border-top: 1px solid var(--color-border);
}

.top-news__item a {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px;
	border-bottom: 1px solid var(--color-border);
}

.top-news__date {
	flex: 0 0 100px;
	color: var(--color-accent);
	font-size: 14px;
}

.top-news__category {
	flex: 0 0 130px;
	padding: 6px 12px;
	text-align: center;
	background: #f5f6fa;
	border: none;
	border-radius: 0;
	font-size: 0.8rem;
	color: var(--color-text-light);
}

.top-news__more {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 1024px) {
	.top-services__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.top-philosophy {
		padding: 0;
	}

	/*
	 * スマホ: 画像をテキストの下に別要素として置くのではなく、
	 * コンテナ全体の背景として全幅表示にする（左右は見切れてよい、中央基準）。
	 */
	.top-philosophy__inner {
		position: relative;
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 420px;
		padding: 80px 20px 60px;
		overflow: hidden;
	}

	.top-philosophy__image {
		position: absolute;
		inset: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		z-index: 0;
		margin: 0;
	}

	.top-philosophy__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.4;
		object-position: center;
	}

	.top-philosophy__text {
		position: relative;
		z-index: 1;
		padding: 0;
	}

	.top-philosophy__cta {
		position: relative;
		z-index: 1;
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 24px;
	}

	/* お知らせ: 日付+タグの幅がスマホでは狭すぎてタイトルが極端に潰れるため、
	   NEWS一覧ページの .news-list__item と同じく、タイトルを次の行に折り返す。 */
	.top-news__item a {
		flex-wrap: wrap;
		row-gap: 12px;
		padding: 18px 4px;
	}

	.top-news__title {
		flex-basis: 100%;
		font-size: 14px;
	}

	.top-news__category {
		flex: 0 0 115px;
		padding: 4px 12px;
	}

	.top-services__image {
		aspect-ratio: 5 / 3;
	}

	.top-services__image::after {
		background: linear-gradient(to bottom, rgb(18 23 35 / 73%) 0%, rgba(10, 15, 25, 0) 100%);
	}

	/* スマホのみ: 画像右下に矢印アイコンを重ねる */
	.top-services__image::before {
		content: "";
		position: absolute;
		right: 12px;
		bottom: 12px;
		z-index: 2;
		width: 36px;
		height: 36px;
		background: url("../images/top/arrow.png") no-repeat center / contain;
	}

	/* スマホのみ: タイトル・リード文を画像下部ではなく上部に重ねる */
	.top-services__overlay {
		top: 16px;
		bottom: auto;
	}
}

/* 576px以下のみ1カラムに。577px〜1024pxは2カラムのまま。 */
@media (max-width: 767px) {
	.top-services__list {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
/* 「ICIKAとは」「MISSION」「VISION」の3セクションをまとめて囲み、背景を敷く */
.about-intro {
	position: relative;
	background-color: #f5f6fa;
	overflow: hidden;
}

.about-intro p:not([class]) {
	line-height: 2.4;
}

/* 背景画像だけをゆっくりopacity 0.5〜1で明滅させる（テキスト等の子要素には影響させないため疑似要素に分離） */
.about-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../images/about/about-intro-bg.png") no-repeat center center / cover;
	animation: icika-bg-pulse 8s ease-in-out infinite;
}

@keyframes icika-bg-pulse {
	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}
}

.about-lead,
.about-mission,
.about-vision {
	position: relative;
	z-index: 1;
	padding: 80px 0;
	text-align: center;
	opacity: 0;
	transition: opacity 2s ease;
}

.about-lead.is-visible,
.about-mission.is-visible,
.about-vision.is-visible {
	opacity: 1;
}

@media (min-width: 769px) {
	.about-lead,
	.about-mission,
	.about-vision {
		padding: 120px 0;
	}
}

.about-mission {
	background-color: #ffffff75;
}

.about-intro .section-title {
	color: #aab7d9;
}

.about .section-lead {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

.about-lead__title,
.about-mission__title,
.about-vision__title {
	font-size: clamp(20.4px, 1.75vw, 25.8px);
	line-height: 2;
	color: var(--color-primary);
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.about-lead__title,
	.about-mission__title,
	.about-vision__title {
		font-size: clamp(18px, 4.8vw, 21.2px);
	}

	.about-intro .container {
		padding-inline: 15px;
	}
}

@media (max-width: 400px) {
	.about-lead__title,
	.about-mission__title,
	.about-vision__title {
		font-size: clamp(16px, 4.6vw, 18px) !important;
	}

	.about-intro p {
		font-size: 13.6px;
	}
}

.about-stance {
	padding: 80px 0;
	background: #eef1fb url("../images/about/about-stance-bg.jpg") no-repeat center center / cover;
}

.about-ceo {
	padding: 100px 0;
	text-align: center;
}

.about-ceo__inner {
	display: grid;
	grid-template-columns: 5fr 4fr;
	gap: 80px;
	align-items: center;
	margin-top: 60px;
	text-align: left;
	max-width: 1300px;
	margin-inline: auto;
	opacity: 0;
	transition: opacity 2s ease;
}

/* CEO写真が未登録の場合は画像カラムを出さず、テキストを1カラムいっぱいに表示する */
.about-ceo__inner.about-ceo__inner--no-photo {
	grid-template-columns: 1fr;
}

.about-ceo__inner.is-visible {
	opacity: 1;
}

.about-ceo__text h3 {
	font-size: clamp(23.8px, 2.05vw, 30.8px);
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	line-height: 1.6;
	margin-bottom: 32px;
}

@media (max-width: 767px) {
	.about-ceo__text h3 {
		font-size: clamp(17px, 5.333vw, 24px);
	}
}

.about-ceo__image img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.about-ceo__name {
	margin-top: 24px;
	font-weight: 500;
	text-align: right;
}

/*
 * DOM順はテキスト→写真だが、スマホでは写真を先に見せたいため常に写真をorder:-1にする。
 * PCのみテキストを左・写真を右に並べ替える。
 */
.about-ceo__image {
	order: -1;
}

@media (min-width: 769px) {
	.about-ceo__text {
		order: 1;
	}

	.about-ceo__image {
		order: 2;
	}
}

.about-officers {
	padding: 100px 0;
}

.about-officers__list {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 60px;
}

.about-officers__item {
	display: grid;
	grid-template-columns: 2fr 4fr;
	gap: 80px;
	align-items: center;
	max-width: 1300px;
	margin: 0 auto;
	border-bottom: 1px solid #dae1f4;
	padding-bottom: 48px;
}

.about-officers__item:last-child {
	border-bottom: none;
}

.about-officers__photo,
.about-officers__content {
	opacity: 0;
	transition: opacity 1.6s ease;
}

.about-officers__item.is-visible .about-officers__photo,
.about-officers__item.is-visible .about-officers__content {
	opacity: 1;
}

/* 写真が未登録（imgが1枚も無い）の場合は、白い余白として写真ぶんの領域を確保する */
.about-officers__photo:empty {
	aspect-ratio: 2 / 3;
	background: #ffffff;
}

/*
 * トリミングしない方針のため、固定の aspect-ratio / object-fit:cover は使わない。
 * PC用（アイキャッチ・縦長2:3想定）とスマホ用（officer_photo_sp・正方形想定）を
 * d-none d-md-block / d-md-none で出し分け、それぞれ元画像の縦横比のまま幅いっぱいに表示する。
 */
.about-officers__photo img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.about-officers__position {
	text-align: left;
	margin-bottom: 8px;
}

.about-officers__name-en {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	margin-bottom: 8px;
}

.about-officers__name-ja {
	font-weight: 500;
	font-size: 1.1rem;
	margin-bottom: 20px;
}

.about-officers__bio {
	color: var(--color-text-light);
	line-height: 1.9;
}

@media screen and (min-width: 767px) {
	.about-officers__bio {
		font-size: clamp(13.6px, 1.171vw, 17.6px);
	}
}

@media (max-width: 768px) {
	.about-ceo__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-officers__item {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-officers__bio {
		font-size: clamp(11.9px, 3.6vw, 16px);
	}
}

/* --------------------------------------------------------------------------
   SERVICES一覧
   -------------------------------------------------------------------------- */
.services-list {
	padding: 80px 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.services-list.is-visible {
	opacity: 1;
}

.services-list__rows {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.services-list__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

/* 画像: 番号バッジ＋オーバーレイタイトル＋ホバーズームアニメーション */
.services-list__image {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	border-radius: 0px;
}

.services-list__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.services-list__image:hover img {
	transform: scale(1.08);
}

.services-list__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 15 25 / 76%) 0%, rgba(10, 15, 25, 0) 69%);
}

.services-list__number {
	position: absolute;
	bottom: 80px;
	left: 18px;
	z-index: 1;
	display: inline-block;
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	opacity: 0.9;
	padding-bottom: 12px;
	border-bottom: 1px solid #fff;
}

.services-list__title {
	position: absolute;
	left: 18px;
	right: 32px;
	bottom: 32px;
	z-index: 1;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.5;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
}

.services-list__body p {
	color: var(--color-text-light);
	margin-bottom: 24px;
}

@media (max-width: 991px) {
	.services-list__row {
		grid-template-columns: 1fr;
		padding-bottom: 24px;
		border-bottom: 1px solid #f5f6fa;
	}
}

@media (max-width: 768px) {
	.services-list__image {
		aspect-ratio: 3 / 2;
	}

	.services-list__body {
		text-align: center;
	}

	.services-list__body p {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   SERVICES詳細
   -------------------------------------------------------------------------- */
.service-hero {
	position: relative;
	width: 100%;
	color: #fff;
}

.service-hero__bg {
	position: relative;
	width: 100%;
	aspect-ratio: 24 / 10;
	max-height: 60vh;
	overflow: hidden;
}

@media (max-width: 768px) {
	.service-hero__bg {
		aspect-ratio: 9 / 10;
	}
}

/*
 * スマホを横向きにすると画面の縦幅（vh）が一気に小さくなり、max-height: 55vh に
 * 引っ張られてKVがぺったんこに潰れて見える。横向きの短い画面ではmax-heightを緩める。
 */
@media (max-height: 500px) and (orientation: landscape) {
	.service-hero__bg {
		aspect-ratio: 24 / 10;
		max-height: 85vh;
	}
}

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

.service-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

/* テキストの後ろにぼかした白い光彩を敷く（.page-hero__inner::beforeと同じ手法） */
.service-hero__inner::before {
	content: "";
	position: absolute;
	top: 34%;
	left: 0;
	z-index: 0;
	width: min(700px, 90%);
	height: 37%;
	background-color: #ffffffc7;
	filter: blur(40px);
	-webkit-filter: blur(40px);
	pointer-events: none;
}

.service-hero__inner h1 {
	font-size: clamp(25px, 3.6vw, 36px);
	color: #000000;
}

.service-hero__lead {
	max-width: 560px;
	color: #5c5c5c;
	font-size: clamp(13.6px, 1.171vw, 17.6px);
}

@media (max-width: 767px) {
	.service-hero__lead {
		font-size: clamp(11.9px, 3.733vw, 13.8px);
	}
}

/* 他ページのKVと同様、テキストがふわっと上がりながら現れるアニメーション（icika-hero-text-in を流用） */
.service-hero__inner h1,
.service-hero__lead {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: icika-hero-text-in 0.9s ease forwards;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.service-hero__inner h1 {
	animation-delay: 0.25s;
	margin-bottom: 16px;
}

.service-hero__lead {
	animation-delay: 0.4s;
}

.service-intro {
	padding: 80px 0;
	text-align: center;
	opacity: 0;
	filter: blur(12px);
	transition: opacity 1.1s ease, filter 1.1s ease;
}

@media (max-width: 768px) {
	.service-intro {
		padding: 58px 0;
	}
}

@media (max-width: 574px) {
	.service-intro {
		text-align: left;
	}
}

.service-intro.is-visible {
	opacity: 1;
	filter: blur(0);
}

.service-intro h2 {
	font-size: 22px;
	line-height: 2;
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.service-intro h2 {
		font-size: clamp(22px, 4.4vw, 28px);
	}
}

.service-area {
	position: relative;
	padding: 80px 0;
	text-align: center;
	opacity: 0;
	transition: opacity 2s ease;
}

.service-area.is-visible {
	opacity: 1;
}

/* 背景を下のセクション（サービスの特徴）にまではみ出させる。overflow:hiddenは付けない */
.service-area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -160px;
	z-index: -1;
	background: url("../images/services/overseas/area.png") no-repeat center top / cover;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	pointer-events: none;
	animation: icika-area-bg-pulse 12s ease-in-out infinite;
}

@media (max-width: 768px) {
	.service-area::before {
		background-size: 117%;
		top: 34px;
	}
}

@keyframes icika-area-bg-pulse {
	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

.service-area__title {
	position: relative;
	z-index: 1;
	font-size: 1.25rem;
	margin-bottom: 12px;
}

.service-area__body {
	position: relative;
	z-index: 1;
	color: var(--color-text-light);
}

.service-features {
	padding: 40px 0 80px;
}

.service-features__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

/* 役員一覧と同様、カード1枚ずつ個別にスクロールで画面に入るたびにフェードインさせる */
.service-features__item {
	opacity: 0;
	transition: opacity 2.6s ease;
}

.service-features__item.is-visible {
	opacity: 1;
}

.service-features__image {
	overflow: hidden;
	margin-bottom: 16px;
}

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

.service-features__item h3 {
	font-size: 21px;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	margin-bottom: 12px;
}

.service-features__item p {
	color: var(--color-text-light);
	font-size: 14px;
}

/*
 * スマホのみ、カード全体をまとめてフェードインさせるのではなく、画像→見出し→本文の順に
 * それぞれ個別の遅延でふわっと出す。カード自体（.service-features__item）の
 * opacity/transitionは打ち消し、子要素each側にopacity制御を移す。
 */
@media (max-width: 767px) {
	.service-features__item {
		opacity: 1;
		transition: none;
	}

	.service-features__item .service-features__image,
	.service-features__item h3,
	.service-features__item p {
		opacity: 0;
		transition: opacity 1.4s ease;
	}

	.service-features__item.is-visible .service-features__image {
		opacity: 1;
	}

	.service-features__item.is-visible h3 {
		opacity: 1;
		transition-delay: 0.45s;
	}

	.service-features__item.is-visible p {
		opacity: 1;
		transition-delay: 0.9s;
	}
}

.service-support,
.service-support-pills,
.service-partners {
	padding: 100px 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.service-support.is-visible,
.service-support-pills.is-visible,
.service-partners.is-visible {
	opacity: 1;
}

.service-support {
	background: #f6f6fb;
}

.service-support.is-visible .container {
	max-width: 1200px;
	width: 100%;
}

.service-support-pills {
	background: #f0f2f9 url("../images/services/oem/support-area-bg.png") no-repeat center center / cover;
}

/* 支援領域: 画像+テキストのブロックを縦に並べ、奇数/偶数で左右を入れ替える（コンサルティング・海外進出支援） */
.service-support-blocks {
	padding-top: 20px;
}

.service-support-blocks__item {
	display: grid;
	grid-template-columns: 4fr 5fr;
	gap: 80px;
	align-items: center;
}

.service-support-blocks__item + .service-support-blocks__item {
	margin-top: 84px;
}

.service-support-blocks__item:nth-child(even) .service-support-blocks__image {
	order: 2;
}

/* 偶数番目は画像が右側に来る（orderで入替）ため、列幅の比率(画像5:文章7)も列ごと入れ替える */
.service-support-blocks__item:nth-child(even) {
	grid-template-columns: 5fr 4fr;
}

.service-support-blocks__image {
	overflow: hidden;
}

/* トリミングしない方針のため、固定のaspect-ratio/object-fit:coverは使わず元画像の比率のまま表示する */
.service-support-blocks__image img {
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.service-support-blocks__image img {
		margin: 0 auto;
	}
}

.service-support-blocks__text h3 {
	font-size: 22px;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	margin-bottom: 16px;
	color: #7486b5;
}

.service-support-blocks__text h3::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: #a5b4d9;
	margin: 16px 0 20px;
}

@media (min-width: 769px) {
	.service-support-blocks__text h3 {
		font-size: 26px;
	}
}

.service-support-blocks__list {
	margin: 0 0 16px;
	padding-left: 1.2em;
	list-style: disc;
	color: var(--color-text-light);
	line-height: 2;
}

.service-support-blocks__list li::marker {
	color: #aab7d9;
	font-size: 0.6em;
}

.service-support-blocks__label {
	font-size: 0.8rem;
	color: #aab7d9 !important;
	margin-bottom: 8px;
}

.service-support-blocks__text p {
	color: var(--color-text-light);
	font-size: 14px;
}

/* コンサルティングページの［サービス概要］本文のみ、PCで左右に余白を付ける */
@media (min-width: 769px) {
	.service-support-blocks__overview {
		padding: 0 10px;
	}
}

/* 支援領域: ピル型ラベル+共通説明文（医薬品・化粧品 開発事業） */
.service-support-pills__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	margin: 24px 0;
}

.service-support-pills__list li {
	padding: 14px 32px;
	border-radius: 999px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	font-weight: 500;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	font-size: 18px;
	color: #7486b5;
}

/* スマホ: 折り返さず3つとも横一列・同じ幅にする */
@media (max-width: 768px) {
	.service-support-pills__list {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.service-support-pills__list li {
		flex: 1 1 0;
		padding: 14px 8px;
		text-align: center;
		white-space: nowrap;
	}
}

.service-support-pills__body {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	color: var(--color-text-light);
}

@media (max-width: 768px) {
	.service-support-pills__body {
		text-align: left;
	}
}

/* パートナー募集（医薬品・化粧品 開発事業） */
.service-partners__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.service-partners__item + .service-partners__item {
	margin-top: 64px;
}

.service-partners__image {
	overflow: hidden;
}

@media (max-width: 787px) {
	.service-partners__image img {
		margin: 0 auto;
	}
}

.service-partners__text h3 {
	margin-bottom: 12px;
	font-size: 21px;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
}

@media (min-width: 769px) {
	.service-partners__text h3 {
		font-size: 26px;
	}
}

.service-partners__text h3::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: #a5b4d9;
	margin: 16px 0 20px;
}

.service-partners__text p {
	color: var(--color-text-light);
	font-size: clamp(13.6px, 1.171vw, 17.6px);
}

@media (max-width: 768px) {
	.service-features__list {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.service-support-blocks__item,
	.service-partners__item {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.service-support-blocks__item:nth-child(even) .service-support-blocks__image {
		order: 0;
	}

	.service-support-blocks__item:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.service-hero__bg {
		aspect-ratio: 3 / 4;
	}
}

/* --------------------------------------------------------------------------
   COMPANY
   -------------------------------------------------------------------------- */
.company-info {
	padding: 80px 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.company-info.is-visible {
	opacity: 1;
}

.company-info__table {
	max-width: 1100px;
	margin: 0 auto 60px;
	border-top: 1px solid var(--color-border);
}

.company-info__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 20px 12px;
	border-bottom: 1px solid var(--color-border);
}

.company-info__row dt {
	font-weight: 500;
	color: var(--color-text-light);
}

.company-info__row dd {
	margin: 0;
}

.company-info__mail-note {
	margin-top: 4px;
	font-size: 0.8em;
	color: var(--color-text-light);
}

.company-info__map {
	max-width: 500px;
	margin-top: 16px;
}

.company-info__map-label {
	color: #aab7d9;
	margin-bottom: 8px;
}

.company-info__map iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

@media (max-width: 768px) {
	.company-info__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* --------------------------------------------------------------------------
   NEWS 一覧
   -------------------------------------------------------------------------- */
.news-archive {
	padding-bottom: 100px;
}

.news-archive__body {
	padding-top: 80px;
	opacity: 0;
	transition: opacity 2s ease;
}

.news-archive__body.is-visible {
	opacity: 1;
}

.news-tabs {
	max-width: 1100px;
	margin: 40px auto;
	/* ページャーからのスクロール時、固定ヘッダーの高さ＋50px分の余白をあけて止まるようにする */
	scroll-margin-top: calc(var(--header-height) + 50px);
}

.news-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 768px) {
	.news-tabs {
		margin: 0px auto 40px;
	}

	/*
	 * 3カラム固定グリッドだと、タグの文字数が多いときに窮屈になって崩れるため、
	 * 幅を文字に合わせた自然なタグとして並べ、収まりきらない分は次の行に折り返す。
	 * 「すべて」だけは単独の行に収めたいが、ボタン自体の見た目の幅は伸ばしたくない。
	 *
	 * 注意: liに直接 max-width を付けると、flexの折り返し判定にもその上限が
	 * 使われてしまい、次のタグが同じ行に入り込んでしまう（max-widthを付けた時点で
	 * 「単独行」が効かなくなる）。そのため、行を占有する役目はli（flex-basis:100%）に、
	 * 見た目の幅を抑える役目は中のaタグ（max-width）に分けて持たせる。
	 */
	.news-tabs__item--all {
		flex-basis: 100%;
	}

	.news-tabs__item--all a {
		width: auto;
		max-width: 200px;
	}
}

.news-tabs__item a {
	display: block;
	width: 100%;
	padding: 10px 24px;
	background: #f5f6fa;
	border: 1px solid #aab7d9;
	border-radius: 0;
	color: #000000;
	text-align: center;
	font-size: 14px;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 768px) {
	.news-tabs__item a {
		padding: 10px 8px;
	}
}

.news-tabs__item.is-active a {
	background: #aab7d9;
	border-color: #aab7d9;
	color: #ffffff;
	font-weight: 500;
}

/*
 * タブ切り替え・ページネーションでリストが絞り込まれた直後、塊のままopacityでふわっと現れる
 * （位置は動かさない）。JS側（main.js）が差し替え直後に .news-list に is-visible を付けて発火させる。
 */
.news-list {
	max-width: 1100px;
	margin: 0 auto;
	overflow-x: hidden;
	border-top: 1px solid var(--color-border);
	opacity: 0;
	transition: opacity 2s ease;
}

.news-list.is-visible {
	opacity: 1;
}

.news-list__item a {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 12px;
	border-bottom: 1px solid var(--color-border);
}

.news-list__date {
	flex: 0 0 100px;
	color: var(--color-accent);
	font-size: 14px;
}

.news-list__category {
	flex: 0 0 130px;
	padding: 6px 12px;
	text-align: center;
	background: #f5f6fa;
	border: none;
	border-radius: 0;
	font-size: 0.8rem;
	color: var(--color-text-light);
}

.news-list__title {
	flex: 1 1 auto;
	/* flexアイテムはデフォルトで中身の最小幅ぶんまでしか縮まないため、
	   長いタイトルが折り返されずコンテナ幅を超えて横揺れの原因になる。
	   min-width:0で本来の縮小・折り返しができるようにする。 */
	min-width: 0;
	overflow-wrap: break-word;
	color: var(--color-text);
}

.news-list__empty {
	text-align: center;
	color: var(--color-text-light);
}

/* タブ／ページネーション切り替え中（fetch中）の視覚フィードバック */
#news-list.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.news-pagination {
	margin-top: 48px;
}

.news-pagination .nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	color: var(--color-text);
}

.news-pagination .prev.page-numbers,
.news-pagination .next.page-numbers {
	color: var(--color-text-light);
}

.news-pagination .page-numbers.dots {
	color: var(--color-text-light);
}

.news-pagination .page-numbers.current {
	border-radius: 50%;
	background: #949494;
	color: #fff;
	border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   NEWS 詳細
   -------------------------------------------------------------------------- */
.news-single {
	padding: 100px 0 100px;
	opacity: 0;
	transition: opacity 2s ease;
}

.news-single.is-visible {
	opacity: 1;
}

.news-single__header {
	max-width: 1100px;
	margin: 0 auto 56px;
	text-align: center;
}

.news-single__header h1 {
	color: #404040;
	border-bottom: 1px solid #d2d8e8;
	padding-bottom: 20px;
}

@media (max-width: 768px) {
	.news-single__header {
		margin: 0 auto 32px;
	}

	.news-single__header h1 {
		font-size: 22px;
		text-align: left;
	}
}

.news-single__meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.news-single__category {
	padding: 2px 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
}

.news-single__thumb {
	max-width: 800px;
	margin: 0 auto 40px;
	overflow: hidden;
}

.news-single__body {
	max-width: 1100px;
	margin: 0 auto;
	line-height: 1.9;
}

.news-single__body p {
	margin-bottom: 1.5em;
}

.news-single__back {
	max-width: 1100px;
	margin: 60px auto 0;
}

@media (max-width: 768px) {
	.news-list__item a {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.news-list__title {
		flex-basis: 100%;
		font-size: 14px;
	}

	.news-list__category {
		flex: 0 0 115px;
		padding: 4px 12px;
	}
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-form {
	padding: 80px 0 100px;
	opacity: 0;
	transition: opacity 2s ease;
}

.contact-form.is-visible {
	opacity: 1;
}

@media (max-width: 768px) {
	.contact-form {
		padding: 40px 0 100px;
	}
}

.contact-form__heading {
	text-align: center;
	font-size: 1.3rem;
	font-weight: normal;
	color: var(--color-accent);
	margin-bottom: 48px;
}

.contact-form__notice {
	max-width: 640px;
	margin: 0 auto;
	padding: 20px;
	background: #fff6e5;
	border: 1px solid #e6c98c;
	border-radius: 4px;
}

/*
 * Contact Form 7 マークアップのスタイル
 * デザインカンプ（6_CONTACT.jpg、PC/SPモックアップ）準拠:
 * PCはラベル（左）＋入力欄（右）の2カラム、行間に薄い罫線。SPは縦積み。
 * 入力欄はグレー塗りつぶし・枠線なし。ボタンはアウトライン（白背景＋淡い枠線）。
 *
 * CF7フォーム側は以下の構造を前提とする（テーマ側から提供したテンプレート参照）:
 *   <p class="cf7-field" data-confirm-label="...">
 *     <label>
 *       <span class="cf7-field__label">ラベル文言 <span class="required">*必須</span></span>
 *       [text* ...]
 *     </label>
 *   </p>
 */
.wpcf7-form {
	max-width: 1100px;
	margin: 0 auto;
}

.wpcf7-form p.cf7-field {
	display: grid !important;
	grid-template-columns: 220px 1fr !important;
	align-items: start;
	gap: 12px 32px;
	padding: 24px 12px;
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

/* タブレット以下（1024px以下）は行区切りの罫線を非表示にする */
@media (max-width: 1024px) {
	.wpcf7-form p.cf7-field {
		border-bottom: none;
	}
}

.wpcf7-form p.cf7-field label {
	display: contents;
}

/*
 * Contact Form 7 は改行を自動的に <br> に変換する（wpautop）ため、
 * .cf7-field / label の直下に意図しない <br> が入り、display:contents と組み合わさって
 * グリッドの区画がずれる原因になる。直下の <br> だけを非表示にして解消する
 * （.cf7-field__control 内の意図的な改行は対象外なので消えない）。
 */
.wpcf7-form p.cf7-field > br,
.wpcf7-form p.cf7-field label > br {
	display: none;
}

.cf7-field__label {
	padding-top: 12px;
	color: var(--color-text);
}

.required {
	color: var(--color-accent);
	font-size: 0.8rem;
	margin-left: 4px;
}

/*
 * text/email/tel/textarea 等の「本物の入力欄」だけに背景・パディングを適用する。
 * checkbox（プライバシーポリシー同意）まで幅100%・グレー背景になっていたのを修正。
 */
input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea.wpcf7-form-control,
select.wpcf7-form-control {
	width: 100%;
	padding: 14px 16px;
	background: var(--color-bg-alt);
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	color: var(--color-text);
}

.wpcf7-form-control::placeholder {
	color: var(--color-text-light);
}

textarea.wpcf7-form-control {
	min-height: 180px;
	resize: vertical;
}

.wpcf7-acceptance .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
}

/* プライバシーポリシー同意行: 注意書き＋同意リンクは2カラム、チェックボックスは中央寄せの別行 */
.cf7-field--note .cf7-field__control {
	color: var(--color-text-light);
	font-size: 14px;
	line-height: 1.9;
}

/* モーダルを開くリンクだと分かるよう下線を付ける */
.js-privacy-modal {
	text-decoration: underline;
}

.cf7-field__acceptance-row {
	text-align: center;
	padding: 8px 0 32px;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

/*
 * ボタン行の共通ラッパー（.cf7-field__submit-row）: 確認する／送信するの両方で使われる。
 * 送信する（input）は幅いっぱいのブロック、確認する（button）は.icika-btnと同じ
 * inline-flexの中身サイズなので、text-align:centerで後者を中央寄せする
 * （前者はwidth:100%なので影響を受けない）。
 */
.cf7-field__submit-row {
	text-align: center;
}

/*
 * 確認するボタンは .icika-btn と全く同じ見た目・矢印ホバーアニメーションにする。
 * button要素は実際に <span aria-hidden="true">→</span> を子要素として
 * CF7フォームテンプレート側に追加してください。
 */
.cf7-step__confirm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 260px;
	padding: 16px 32px;
	background: #ffffffa8;
	border: 1px solid #7486b5;
	border-radius: 0;
	color: #7486b5;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cf7-step__confirm-btn:hover {
	background: #7486b5;
	color: #ffffff;
}

.cf7-step__confirm-btn span[aria-hidden="true"] {
	display: inline-block;
	transition: transform 0.2s ease;
}

.cf7-step__confirm-btn:hover span[aria-hidden="true"] {
	transform: translateX(8px);
}

/*
 * 送信するボタンも .icika-btn と同じ見た目・矢印ホバーアニメーションにする。
 * input[type=submit] は ::after 等の生成コンテンツを持てない（置換要素のため）ので、
 * 矢印は外側のラッパー（.cf7-field__submit-row 等、.wpcf7-submitを直接含む要素）に描画する。
 * :has()で「.wpcf7-submitを直接含む要素」を判定しているので、確認するボタンの
 * ラッパー（中身が.cf7-step__confirm-btn）には反応せず、二重に矢印が出ることはない。
 * ラッパーをボタンと同じ幅（max-width:500px, margin:0 auto）にすることで、
 * 画面幅でボタンの実際の幅が変わっても矢印が常にボタンの右端に揃うようにしている。
 */
.wpcf7-form :has(> .wpcf7-submit) {
	position: relative;
	max-width: 500px;
	margin: 0 auto;
}

.wpcf7-form :has(> .wpcf7-submit)::after {
	content: "→";
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	color: #ffffff;
	pointer-events: none;
	transition: transform 0.2s ease;
}

.wpcf7-form :has(> .wpcf7-submit):hover::after,
.wpcf7-form :has(> .wpcf7-submit):focus-within::after {
	transform: translateY(-50%) translateX(8px);
}

.wpcf7-submit {
	display: block;
	width: 100%;
	padding: 16px 32px;
	background: #aab7d9;
	border: 1px solid #aab7d9;
	border-radius: 0;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.cf7-step__back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	min-width: 280px;
	margin: 0 auto 16px;
	padding: 16px 48px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-text-light);
	cursor: pointer;
	font-size: 1rem;
	text-align: center;
	transition: background-color 0.2s ease;
}

.cf7-step__back-btn:hover {
	background: var(--color-bg-alt);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-size: 0.85rem;
}

.wpcf7-response-output {
	margin-top: 24px !important;
	padding: 16px !important;
	border-radius: 4px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #aab7d9;
}

.wpcf7-mail-sent-ok {
	border-color: #2e7d32 !important;
	color: #2e7d32;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked {
	border-color: #c0392b !important;
	color: #c0392b;
}

.wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}

/* --------------------------------------------------------------------------
   CF7 確認画面（プラグイン不使用・テーマ側で自作）
   -------------------------------------------------------------------------- */
.cf7-confirm-table {
	max-width: 720px;
	margin: 0 auto 32px;
}

.cf7-confirm-table dt {
	margin-top: 20px;
	font-weight: 500;
	color: var(--color-text-light);
	font-size: 14px;
}

.cf7-confirm-table dd {
	margin: 4px 0 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
	white-space: pre-wrap;
}

@media (max-width: 768px) {
	.wpcf7-form p.cf7-field {
		grid-template-columns: 1fr !important;
		gap: 8px;
		padding: 16px 0;
	}

	.cf7-field__label {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   プライバシーポリシー モーダル
   -------------------------------------------------------------------------- */
.privacy-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.privacy-modal[hidden] {
	display: none;
}

.privacy-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 20, 30, 0.6);
}

.privacy-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	padding: 48px 40px;
}

.privacy-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text-light);
}

.privacy-modal__body h2 {
	font-size: 1.3rem;
	margin-bottom: 24px;
}

.privacy-modal__body h3 {
	font-size: 1rem;
	margin: 24px 0 8px;
}

.privacy-modal__body p {
	color: var(--color-text-light);
	margin-bottom: 1em;
}

body.is-modal-open {
	overflow: hidden;
}

body.is-menu-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Privacy Policy
   -------------------------------------------------------------------------- */
.privacy {
	padding: 80px 0 100px;
}

.privacy h1 {
	text-align: center;
	margin-bottom: 48px;
}

.privacy__body {
	max-width: 1100px;
	margin: 0 auto;
	line-height: 1.9;
}

.privacy__body h2,
.privacy__body h3 {
	margin: 40px 0 16px;
}

.privacy__body p {
	margin-bottom: 1.2em;
}

/* --------------------------------------------------------------------------
   SERVICES詳細: 中古医療機器 買取・販売 - 「ICIKAだからできること」
   買取・販売／産業廃棄物運搬／開院支援の3タブ。スマホ幅では横スクロール対応。
   -------------------------------------------------------------------------- */
.icika-cando {
	padding: 80px 4vw;
	background: var(--color-bg-alt) url("../images/services/used-equipment/cando-bg.png") no-repeat center center / cover fixed;
	opacity: 0;
	transition: opacity 2s ease;
}

.icika-cando.is-visible {
	opacity: 1;
}

.icika-cando__title {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 500;
	margin-bottom: 40px;
}

.icika-cando__nav {
	display: flex;
	gap: 24px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

@media (min-width: 769px) {
	.icika-cando__nav {
		gap: 40px;
	}
}

.icika-cando__nav a {
	display: block;
	min-width: 220px;
	padding: 14px 32px;
	text-align: center;
	background: var(--color-bg);
	border: 1px solid var(--color-accent-pale);
	border-radius: 0;
	color: var(--color-accent);
	text-decoration: none;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.icika-cando__nav a:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.icika-card {
	max-width: var(--container-width);
	margin: 0 auto 64px;
	padding: 40px 5% 60px;
	background: var(--color-bg);
	scroll-margin-top: 100px; /* 固定ヘッダーがある場合のアンカー位置調整 */
}

.icika-card__title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 24px;
	line-height: 1.6;
	font-family: "Shippori Mincho B1", "Noto Sans JP", "Hiragino Mincho ProN", serif;
	color: #7486b5;
}

.icika-card__title-break {
	display: none;
}

@media (max-width: 400px) {
	.icika-card__title-break {
		display: inline;
	}
}

.icika-card__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #a5b4d9;
	margin: 16px auto 20px;
}

.icika-card__title:has(+ .icika-heiin__under)::after {
	display: none;
}

.icika-card__lead {
	text-align: center;
	font-size: 14px;
	line-height: 2;
	color: var(--color-text-light);
	margin-bottom: 48px;
}

.icika-card__subtitle {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 48px 0 24px;
}

/* #icika-heiin内「サービスの特徴」見出しのみピンポイントでmargin-topを詰める */
.icika-heiin__features-subtitle {
	margin: 0 0 24px;
}

.icika-shinryoka {
	text-align: center;
	font-size: 1.1rem;
}

.icika-shinryoka__item {
	white-space: nowrap;
}

.icika-card__note {
	text-align: center;
	font-size: 14px;
	line-height: 2;
	color: var(--color-text-light);
	margin: 40px 0 24px;
}

.icika-card__cta {
	text-align: center;
}

.icika-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 260px;
	padding: 16px 32px;
	margin-top: 32px;
	background: #ffffffa8;
	border: 1px solid #7486b5;
	border-radius: 0;
	color: #7486b5;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	/* iOS Safari等がタップ時に自動で薄いグレーのオーバーレイを重ねてしまい、
	   タップ直後だけボタンが白っぽく見える不具合の原因になるため無効化する。 */
	-webkit-tap-highlight-color: transparent;
}

/*
 * :hover はマウス等「本当にホバーできる」端末のみに限定する（@media (hover: hover)）。
 * スマホ等のタッチ端末は tap した瞬間に :hover が一時的に付いてしまい、色が変わりきる前の
 * 中間色のまま止まって見える／張り付く原因になるため、タッチ端末では最初から:hoverを
 * 発火させず、下の:activeだけで色を変える。
 */
@media (hover: hover) {
	.icika-btn:hover {
		background: #7486b5;
		color: #ffffff;
	}

	.icika-btn:hover span[aria-hidden="true"] {
		transform: translateX(8px);
	}
}

@media (max-width: 768px) {
	.icika-btn:active {
		background: #aab7d9;
		color: #ffffff;
	}

	.icika-btn:active span[aria-hidden="true"] {
		transform: translateX(8px);
	}
}

.icika-btn span[aria-hidden="true"] {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* 主な取扱機器（PC: 6列グリッド / SP: 横スクロール） */
.icika-kiki {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.icika-kiki__item figure {
	margin: 0 0 8px;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-alt);
}

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

.icika-kiki__item p {
	text-align: center;
	font-size: 0.75rem;
}

/* 産廃と医療廃棄物の図 */
.icika-sanpai-diagram {
	margin: 0 auto 24px;
	max-width: 1100px;
	text-align: center;
}

.icika-sanpai-diagram figcaption {
	margin-bottom: 16px;
	font-size: 1.1rem;
	font-weight: 500;
}

.icika-sanpai-diagram img {
	max-width: 100%;
	margin: 0 auto;
	height: auto;
	border: 1px solid #dde5f8;
	padding: 12px 20px;
}

@media (max-width: 768px) {
	.icika-sanpai-diagram img {
		padding: 12px;
	}
}

/*
 * 横スクロールリスト（.icika-flow / .icika-tetsuzuki）共通の丸い前後矢印ボタン。
 * .icika-slider（ラッパー）の左右端に重ねて配置し、クリックで中のリストをスクロールさせる
 * （実際のスクロール処理は assets/js/main.js の .icika-slider__arrow ハンドラ）。
 */
.icika-slider {
	position: relative;
}

.icika-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	background: #ffffff;
	border: 2px solid #b8c3e1;
	border-radius: 50%;
	color: #5d71a6;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

/* 一番左/一番右までスクロールし切ったら、その方向の矢印を隠す（JS側 main.js が判定してis-hiddenを付ける） */
.icika-slider__arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.icika-slider__arrow:hover {
	background: #b8c3e1;
	color: #ffffff;
}

.icika-slider__arrow--prev {
	left: -53px;
}

.icika-slider__arrow--next {
	right: -53px;
}

@media (max-width: 640px) {
	.icika-slider__arrow {
		width: 36px;
		height: 36px;
		font-size: 0.9rem;
	}

	.icika-slider__arrow--prev {
		left: -32px;
	}

	.icika-slider__arrow--next {
		right: -32px;
	}
}

/* .icika-flowはPC（1200px超）ではグリッド表示になりスクロール自体が発生しないため、矢印も不要 */
@media (min-width: 1201px) {
	.icika-slider:has(.icika-flow) .icika-slider__arrow {
		display: none;
	}
}

/* 流れ（収集・運搬／ご利用）: PC 5列グリッド、SP 横スクロール */
.icika-flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.icika-flow__item {
	position: relative;
	background: #f4f7ff;
	padding: 24px 20px 24px;
}

/* 1200px以下は横スクロールに切り替える（767px以下の既存の横スク設定より広い範囲で先に適用） */
@media (max-width: 1200px) {
	.icika-flow {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 16px;
	}

	.icika-flow > li {
		flex: 0 0 240px;
		scroll-snap-align: start;
	}
}

.icika-flow__item + .icika-flow__item::before {
	content: "\2192";
	position: absolute;
	left: -14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-accent);
	font-size: 14px;
}

.icika-flow__num {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0 auto 8px;
	background: var(--color-bg);
	border-radius: 50%;
	font-size: 0.75rem;
	color: var(--color-accent);
}

/*
 * タイトルが1行/2行のどちらでも、下のborder-bottomの位置が横並びで揃うように、
 * 2行ぶんの高さを確保してテキストをその中で縦中央ぞろえにする。
 */
.icika-flow__title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.8rem;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	padding-bottom: 4px;
	margin-bottom: 12px;
	color: #7486b5;
	border-bottom: 1px solid var(--color-border);
}

.icika-flow__text {
	font-size: 0.75rem;
	line-height: 1.9;
	color: var(--color-text-light);
}

/* 開院支援 */
.icika-heiin__over,
.icika-heiin__under {
	text-align: center;
	font-size: 14px;
	color: var(--color-text-light);
}

.icika-heiin__under {
	margin-bottom: 32px;
	margin-top: -14px;
	color: #66759b;
}

.icika-heiin__under::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #a5b4d9;
	margin: 16px auto 0;
}

.icika-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.icika-features__item figure {
	margin: 0 0 16px;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-alt);
}

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

.icika-features__item h5 {
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.7;
	margin-bottom: 12px;
}

.icika-features__item p {
	font-size: 0.8rem;
	line-height: 1.9;
	color: var(--color-text-light);
}

/* 必要な手続き一覧（全幅で常時横スクロール、絵コンテ準拠） */
.icika-tetsuzuki {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0 0 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/*
 * PCで項目数が少なく、横スクロールが発生しない（コンテナ幅に収まる）場合だけ中央寄せにする。
 * justify-content: safe center は、収まるときはcenter、あふれる（スクロールが必要な）時は
 * 通常のstart寄せに自動で切り替わるため、スクロール時に先頭の項目が見切れる心配がない。
 */
@media (min-width: 769px) {
	.icika-tetsuzuki {
		justify-content: safe center;
	}
}

.icika-tetsuzuki__item {
	display: flex;
	flex-direction: column;
	flex: 0 0 180px;
	scroll-snap-align: start;
	border-radius: 17px;
	background-color: #f4f7fe;
	padding: 10px;
}

.icika-tetsuzuki__item figure {
	margin: 0 0 8px;
	aspect-ratio: 1 / 1;
	background: none;
}

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

.icika-tetsuzuki__item p {
	text-align: left;
	font-size: 12px;
	line-height: 1.6;
	color: #7486b5;
}

@media (min-width: 769px) {
	.icika-tetsuzuki__item p {
		text-align: center;
	}
}

/* スマホ: 4セクションを横スクロール化 */
@media (max-width: 767px) {
	.icika-cando {
		padding: 56px 5vw;
	}

	.icika-cando__title {
		font-size: 1.4rem;
	}

	.icika-card {
		padding: 16px 6% 32px;
	}

	.icika-cando__nav a {
		min-width: 0;
		width: 100%;
	}

	/* grid → 横スクロールに切り替え */
	.icika-scroll-sp {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 16px;
		/* カードの端まで広げても違和感がないようにする */
		margin-inline: -3%;
		padding-inline: 6%;
	}

	.icika-scroll-sp > li {
		scroll-snap-align: start;
	}

	.icika-kiki > li {
		flex: 0 0 140px;
	}

	.icika-tetsuzuki {
		padding-inline: 6%;
		margin-inline: -3%;
	}

	.icika-tetsuzuki__item {
		flex-basis: 140px;
	}

	.icika-tetsuzuki__item p {
		margin-top: 10px;
		margin-bottom: 0 !important;
	}

	.icika-features {
		grid-template-columns: 1fr;
	}

	.icika-scroll-sp::-webkit-scrollbar,
	.icika-tetsuzuki::-webkit-scrollbar {
		height: 4px;
	}

	.icika-scroll-sp::-webkit-scrollbar-thumb,
	.icika-tetsuzuki::-webkit-scrollbar-thumb {
		background: var(--color-accent-pale);
		border-radius: 2px;
	}
}