/* ==========================================================================
   Picolabo — layout and components
   本文（投稿・固定ページの中身）のスタイルは content.css にあります。
   ========================================================================== */

/* Tokens
   -------------------------------------------------------------------------- */
:root {
	--c-ink: #1e2328;
	--c-ink-2: #4a535c;
	--c-ink-3: #66717b; /* 白・薄い水色の背景でも文字のコントラスト 4.5:1 以上 */
	--c-line: #e4e9ed;
	--c-line-2: #d3dbe1;
	--c-bg: #fff;
	--c-tint: #f4f8fb;
	--c-tint-blue: #eaf6ff;
	--c-tint-lime: #f1faea;
	--c-blue: #00aeef;
	--c-blue-2: #35b0ff;
	--c-blue-ink: #0076b6; /* 白地の文字で使える青 */
	--c-lime: #7ed321;
	--c-lime-2: #9be427;
	--c-lime-ink: #3d7a0c;
	--c-coral: #ff6b7a;
	--c-coral-ink: #c8323f;
	--c-tint-coral: #fff1f3;

	--bar-brand: linear-gradient(90deg, var(--c-blue) 0 62%, var(--c-lime) 62% 100%);

	--font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
	--font-en: "Outfit", "Noto Sans JP", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--w-content: 760px;
	--w-wide: 1120px;
	--gutter: clamp(20px, 5vw, 48px);
	--header-h: 72px;
	--space-section: clamp(88px, 11vw, 152px);

	--radius: 16px;
	--radius-s: 10px;
	--shadow: 0 2px 4px rgba(30, 35, 40, 0.03), 0 12px 32px rgba(30, 35, 40, 0.08);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 900px) {
	:root {
		--header-h: 64px;
	}
}

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

/* JINR と同じく 1rem = 10px。ツールページのインラインCSSがこの前提で書かれている。 */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-ja);
	font-size: 1.6rem;
	line-height: 1.9;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
}

/* 日本語を文節で折り返す（対応ブラウザのみ）。 */
:is(h1, h2, h3, .hero__lead, .business__text, .csr-card__text, .contact-cta__text, .news-row__title, .post-card__title, .media-card__title, .media-card__catch, .tool-card__title, .tool-card__catch, .pickup__title, .pickup__label) {
	word-break: auto-phrase;
	overflow-wrap: anywhere; /* 文節が1行に収まらないときだけ途中で折り返す */
}

/* カードの短い見出しは、PHP（picolabo_phrase_html）が入れた <wbr> の位置だけで折り返す。 */
:is(.media-card__title, .media-card__catch, .tool-card__title, .tool-card__catch, .pickup__title, .pickup__label) {
	word-break: keep-all;
}

:focus-visible {
	outline: 2px solid var(--c-blue);
	outline-offset: 3px;
}

.icon {
	flex: none;
	width: 1.125em;
	height: 1.125em;
}

.date {
	font-family: var(--font-en);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--c-ink-3);
	font-variant-numeric: tabular-nums;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: 8px;
	background: var(--c-ink);
	color: #fff;
	text-decoration: none;
}

.skip-link:focus {
	top: 12px;
}

@media (max-width: 767px) {
	.u-pc {
		display: none;
	}
}

/* Layout
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--w-wide) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(var(--w-content) + var(--gutter) * 2);
}

.container--wide {
	max-width: calc(960px + var(--gutter) * 2);
}

.section {
	padding-block: var(--space-section);
}

.section--tint {
	background: var(--c-tint);
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 48px clamp(40px, 6vw, 96px);
	align-items: start;
}

.split__head {
	position: sticky;
	top: calc(var(--header-h) + 48px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.split__head .section-head {
	margin-bottom: 0;
}

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

	.split__head {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
	}
}

.section-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.section-row .section-head {
	margin-bottom: 0;
}

/* Section heading
   -------------------------------------------------------------------------- */
.section-head {
	margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.section-head__en {
	font-family: var(--font-en);
	font-size: clamp(4.2rem, 6vw, 6.8rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--c-ink);
}

.section-head__ja {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.14em;
	color: var(--c-ink-2);
}

.section-head__ja::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--bar-brand);
}

/* Buttons and links
   -------------------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 54px;
	padding: 0 28px 0 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.button .icon {
	width: 18px;
	height: 18px;
	transition: transform 0.35s var(--ease);
}

.button:hover .icon {
	transform: translateX(4px);
}

.button--primary {
	background: var(--c-ink);
	color: #fff;
}

.button--primary:hover {
	background: var(--c-blue-ink);
}

.button--outline {
	border-color: var(--c-line-2);
	background: #fff;
	color: var(--c-ink);
}

.button--outline:hover {
	border-color: var(--c-ink);
}

.button--small {
	min-height: 44px;
	padding: 0 20px 0 24px;
	gap: 10px;
	font-size: 1.4rem;
}

.button--small .icon {
	width: 16px;
	height: 16px;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--c-line-2);
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.text-link .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.35s var(--ease);
}

.text-link:hover {
	border-color: var(--c-ink);
}

.text-link:hover .icon {
	transform: translateX(4px);
}

.cat-label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--c-tint-blue);
	color: var(--c-blue-ink);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}

.cat-label--column {
	background: var(--c-tint-lime);
	color: var(--c-lime-ink);
}

a.cat-label:hover {
	text-decoration: underline;
}

.circle-arrow,
.media-card__arrow,
.news-row__arrow,
.pickup__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line-2);
	border-radius: 50%;
	background: #fff;
	color: var(--c-ink);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.circle-arrow .icon,
.media-card__arrow .icon,
.news-row__arrow .icon,
.pickup__arrow .icon {
	width: 16px;
	height: 16px;
}

/* Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	font-family: var(--font-ja);
	letter-spacing: 0.04em;
	transition: box-shadow 0.3s var(--ease);
}

/* 背景のぼかしを疑似要素に持たせる。header 自体に backdrop-filter を付けると
   モバイルメニュー（position: fixed）の基準がヘッダーになってしまうため。 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}

.site-header.is-scrolled::before {
	border-bottom-color: var(--c-line);
}

.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1360px;
	height: var(--header-h);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-logo {
	display: inline-flex;
	align-items: center;
	color: var(--c-ink);
	text-decoration: none;
}

.site-logo__img {
	width: auto;
	height: 24px;
}

.site-logo__text {
	font-family: var(--font-en);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.site-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-left: auto;
}

.global-nav__list {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-nav__list a {
	position: relative;
	display: block;
	padding-block: 8px;
	color: var(--c-ink);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.global-nav__list a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--bar-brand);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ease);
}

.global-nav__list a:hover::after,
.global-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.menu-toggle {
	display: none;
}

@media (max-width: 900px) {
	.site-logo__img {
		height: 21px;
	}

	.menu-toggle {
		position: relative;
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--c-ink);
		cursor: pointer;
	}

	.menu-toggle__bar,
	.menu-toggle__bar::before,
	.menu-toggle__bar::after {
		display: block;
		width: 22px;
		height: 1.5px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.35s var(--ease), background-color 0.2s;
	}

	.menu-toggle__bar {
		position: relative;
	}

	.menu-toggle__bar::before,
	.menu-toggle__bar::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle__bar::before {
		transform: translateY(-7px);
	}

	.menu-toggle__bar::after {
		transform: translateY(7px);
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
		background-color: transparent;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before {
		transform: rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after {
		transform: rotate(-45deg);
	}

	.site-menu {
		position: fixed;
		top: var(--menu-top, var(--header-h));
		right: 0;
		bottom: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		margin: 0;
		padding: 16px var(--gutter) 48px;
		overflow-y: auto;
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
	}

	.site-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
	}

	.global-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.global-nav__list a {
		padding: 20px 4px;
		border-bottom: 1px solid var(--c-line);
		font-size: 1.7rem;
	}

	.global-nav__list a::after {
		display: none;
	}

	.site-menu__cta {
		min-height: 56px;
	}

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

.site-main {
	display: block;
}

/* Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(calc(100svh - var(--header-h)), 860px);
	padding-block: 96px 136px;
	overflow: hidden;
}

.hero__inner {
	position: relative;
	z-index: 1;
}

.hero__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 32px;
	color: var(--c-ink-2);
	font-family: var(--font-en);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hero__label::before {
	content: "";
	width: 40px;
	height: 2px;
	border-radius: 2px;
	background: var(--bar-brand);
}

/* 1行10文字前後がスマホでも収まる大きさ。改行はカスタマイザーの入力で決める。
   カタカナが間延びしないよう、字間は詰め気味にしている。 */
.hero__title {
	margin: 0;
	font-size: clamp(3.2rem, 5.2vw, 7.2rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

/* { } で囲んだ部分（例：「ワクワク」）を、斜めのバーと同じ青→ライムのグラデーションで強調する。 */
.hero__title-accent {
	color: var(--c-blue);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero__title-accent {
		background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-lime) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

.hero__lead {
	margin: 40px 0 0;
	color: var(--c-ink-2);
	font-size: clamp(1.5rem, 1.5vw, 1.7rem);
	line-height: 2.3;
	letter-spacing: 0.08em;
}

.hero__visual {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, #cad8e2 1.1px, transparent 1.4px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse 40% 60% at 78% 52%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 40% 60% at 78% 52%, #000 25%, transparent 78%);
}

/* ふわふわ浮かぶアイコン（電球・双葉・虫眼鏡・吹き出し・星・ハート）。
   ステージの幅を基準（cqw）に大きさを決めるので、画面幅が変わっても配置が崩れない。
   入れ子の役割：.hero__icon＝位置とふわふわ、.hero__icon-pop＝ぽよん、.hero__icon-body＝見た目と登場。 */
.hero__stage {
	position: absolute;
	top: 52%;
	left: 78%;
	width: min(36vw, 480px);
	aspect-ratio: 1;
	translate: -50% -50%;
	container-type: size;
}

.hero__icon {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: calc(var(--s) * 1cqw);
	aspect-ratio: 1;
	translate: -50% -50%;
	rotate: var(--tilt);
}

.hero__icon-pop,
.hero__icon-body {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__icon-body {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line), 0 10px 28px rgba(30, 35, 40, 0.08);
}

.hero__icon svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: var(--c);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero__spark {
	position: absolute;
	top: var(--sy);
	left: var(--sx);
	width: var(--ss);
	height: var(--ss);
	margin: calc(var(--ss) / -2) 0 0 calc(var(--ss) / -2);
	background: var(--sc);
	opacity: 0;
	pointer-events: none;
	animation: hero-spark 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
	animation-delay: var(--sd);
}

.hero__spark--star {
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.hero__spark--dot {
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	/* 登場時にアイコン全体が中心のまわりを軽く1周する（「まわそう」）。
	   各アイコンは逆向きに回して、観覧車のように向きを保つ。 */
	.hero__stage {
		animation: hero-stage-turn 2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}

	.hero__icon {
		animation: hero-icon-bob var(--dur) ease-in-out var(--delay) infinite, hero-icon-upright 2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}

	.hero__icon-body {
		animation: hero-icon-in 0.9s cubic-bezier(0.3, 0.7, 0.4, 1.4) both;
		animation-delay: calc(0.3s + var(--i) * 0.09s);
	}

	.hero__icon-pop.is-pop {
		animation: hero-icon-pop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both;
	}

	.hero__icon-pop.is-pop svg {
		animation: hero-icon-wiggle 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both;
	}

	.hero__label,
	.hero__title,
	.hero__lead {
		animation: fade-up 1.2s var(--ease) both;
	}

	.hero__title {
		animation-delay: 0.12s;
	}

	.hero__lead {
		animation-delay: 0.28s;
	}
}

/* 少し小さい状態から回り始めて広がる（スマホで端のアイコンが上下にはみ出さないように）。 */
@keyframes hero-stage-turn {
	from {
		rotate: -360deg;
		scale: 0.72;
	}
}

@keyframes hero-icon-upright {
	from {
		rotate: calc(var(--tilt) + 360deg);
	}
}

@keyframes hero-icon-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

@keyframes hero-icon-in {
	from {
		opacity: 0;
		scale: 0.4;
	}
}

@keyframes hero-icon-pop {
	0% {
		scale: 1;
	}

	30% {
		scale: 1.18 0.88;
	}

	50% {
		scale: 0.92 1.1;
	}

	70% {
		scale: 1.05 0.97;
	}

	100% {
		scale: 1;
	}
}

@keyframes hero-icon-wiggle {
	30% {
		transform: rotate(-14deg) scale(1.1);
	}

	60% {
		transform: rotate(10deg);
	}
}

@keyframes hero-spark {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.2) rotate(0deg);
	}

	25% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(var(--tx), var(--ty)) scale(1) rotate(90deg);
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		translate: 0 24px;
	}
}

.hero__scroll {
	position: absolute;
	bottom: 36px;
	left: max(var(--gutter), calc((100% - var(--w-wide)) / 2));
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-decoration: none;
	text-transform: uppercase;
}

.hero__scroll::after {
	content: "";
	width: 72px;
	height: 1px;
	background: linear-gradient(90deg, var(--c-ink) 0 30%, var(--c-line-2) 30%) 0 0 / 250% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__scroll::after {
		animation: scroll-line 2.4s var(--ease) infinite;
	}
}

@keyframes scroll-line {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -50% 0;
	}
}

/* スマホ：アイコンを文字と同じ左右の余白にそろえた横長の帯として上に置き、
   文字はそのすぐ下から始める（画面の高さに合わせて引き伸ばさない）。 */
@media (max-width: 767px) {
	.hero {
		--stage-top: 24px;
		--stage-h: calc((100vw - var(--gutter) * 2) * 0.62);
		align-items: flex-start;
		min-height: 0;
		padding-block: calc(var(--stage-top) + var(--stage-h) + 28px) 64px;
	}

	.hero__grid {
		-webkit-mask-image: radial-gradient(ellipse 72% calc(var(--stage-h) * 0.75) at 50% calc(var(--stage-top) + var(--stage-h) / 2), #000 25%, transparent 80%);
		mask-image: radial-gradient(ellipse 72% calc(var(--stage-h) * 0.75) at 50% calc(var(--stage-top) + var(--stage-h) / 2), #000 25%, transparent 80%);
	}

	.hero__stage {
		top: var(--stage-top);
		left: var(--gutter);
		width: calc(100% - var(--gutter) * 2);
		aspect-ratio: 1 / 0.62;
		translate: none;
	}

	.hero__icon {
		top: var(--my);
		left: var(--mx);
	}

	.hero__scroll {
		display: none;
	}

	.hero__label {
		margin-bottom: 24px;
		font-size: 1.2rem;
	}

	/* 1行10文字が幅の狭い端末（360px）でも余裕をもって収まる大きさ。 */
	.hero__title {
		font-size: min(3.2rem, 7.4vw);
	}

	.hero__lead {
		margin-top: 28px;
		font-size: 1.4rem;
		line-height: 2.2;
		letter-spacing: 0.04em;
	}
}

/* Business
   -------------------------------------------------------------------------- */
.business__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px clamp(40px, 7vw, 104px);
	align-items: center;
}

.business__image {
	margin: 0;
	aspect-ratio: 800 / 604;
	overflow: hidden;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line);
}

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

/* 画像が未設定のときのイラスト：比較ランキングの画面のまわりに、ヒーローと同じ白い丸アイコンが浮かぶ。
   大きさはパネル幅（cqw）基準なので、スマホでも同じ見え方になる。
   背景は水色だけのグラデーション（青と黄緑を混ぜると中間がくすむため）。中央を明るくして白い画面を
   浮き立たせ、ふちはセクションの背景（--c-tint）に溶けないよう一段濃くしている（明るさの比 約1.15：1）。
   黄緑は王冠・1位の丸・ラベルなど中の要素で使う。 */
.business-visual {
	position: relative;
	margin: 0;
	aspect-ratio: 800 / 604;
	overflow: hidden;
	border-radius: var(--radius);
	background: radial-gradient(70% 80% at 50% 48%, #ecf8ff 0%, #d2ecfd 100%);
	box-shadow: 0 0 0 1px rgba(0, 118, 182, 0.1);
	container-type: inline-size;
}

.business-visual__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(0, 140, 210, 0.16) 1.1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
}

.business-visual__window {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 62cqw;
	overflow: hidden;
	translate: -50% -50%;
	border-radius: 2cqw;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 118, 182, 0.08), 0 1.6cqw 4cqw rgba(0, 130, 200, 0.1);
}

.business-visual__bar {
	display: flex;
	align-items: center;
	gap: 1cqw;
	height: 5.4cqw;
	padding: 0 2.2cqw;
	border-bottom: 1px solid var(--c-line);
}

.business-visual__bar i {
	width: 1.3cqw;
	height: 1.3cqw;
	border-radius: 50%;
	background: #ff8fab;
}

.business-visual__bar i:nth-child(2) {
	background: #4fc3f7;
}

.business-visual__bar i:nth-child(3) {
	background: var(--c-lime-2);
}

.business-visual__bar b {
	flex: 1;
	height: 2.2cqw;
	margin-left: 1.4cqw;
	border-radius: 99px;
	background: var(--c-tint);
}

.business-visual__page {
	display: block;
	padding: 3cqw 3.4cqw 1.6cqw;
}

.business-visual__head {
	display: flex;
	align-items: center;
	gap: 1.6cqw;
	margin-bottom: 1.6cqw;
}

.business-visual__head i {
	width: 7cqw;
	height: 2.4cqw;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--c-blue), var(--c-lime));
}

.business-visual__head b {
	width: 30cqw;
	height: 2cqw;
	border-radius: 99px;
	background: var(--c-ink);
	opacity: 0.82;
}

.business-visual__row {
	display: grid;
	grid-template-columns: 4.4cqw 10cqw minmax(0, 1fr);
	align-items: center;
	gap: 2cqw;
	padding: 1.7cqw 0;
	border-top: 1px dashed var(--c-line-2);
}

.business-visual__rank {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-tint);
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 2.2cqw;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

.business-visual__row:nth-child(2) .business-visual__rank {
	background: linear-gradient(135deg, var(--c-blue), var(--c-lime));
	color: #fff;
}

/* 1位の行：淡い帯で囲み、順位の丸に王冠をのせる。 */
.business-visual__row:nth-child(2) {
	margin-inline: -1.6cqw;
	padding-inline: 1.6cqw;
	border-top-color: transparent;
	border-radius: 1.4cqw;
	background: linear-gradient(90deg, rgba(0, 174, 239, 0.09), rgba(126, 211, 33, 0.09));
}

.business-visual__row:nth-child(3) {
	border-top-color: transparent;
}

.business-visual__row:nth-child(2) .business-visual__rank::before {
	content: "";
	position: absolute;
	top: -2.3cqw;
	left: 50%;
	width: 2.8cqw;
	height: 1.9cqw;
	translate: -50% 0;
	background: #ffc23d;
	clip-path: polygon(0 100%, 0 22%, 27% 58%, 50% 0, 73% 58%, 100% 22%, 100% 100%);
}

.business-visual__row:nth-child(3) .business-visual__rank {
	background: var(--c-tint-blue);
	color: var(--c-blue-ink);
}

.business-visual__thumb {
	height: 6.6cqw;
	border-radius: 1cqw;
	background: linear-gradient(135deg, #bfe6fb, #d6f1b8);
}

.business-visual__row:nth-child(3) .business-visual__thumb {
	background: linear-gradient(135deg, #ffd0db, #ffe7bd);
}

.business-visual__row:nth-child(4) .business-visual__thumb {
	background: linear-gradient(135deg, #d3e8f6, #bfe9fa);
}

.business-visual__lines {
	display: grid;
	gap: 1.1cqw;
}

.business-visual__lines b {
	height: 1.5cqw;
	border-radius: 99px;
	background: #aab6bf;
}

.business-visual__stars {
	display: flex;
	gap: 0.5cqw;
}

.business-visual__stars i {
	width: 1.9cqw;
	aspect-ratio: 1;
	background: #ffc23d;
	clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%);
}

.business-visual__stars i.is-off {
	background: var(--c-line);
}

.business-visual__icon {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: calc(var(--s) * 1cqw);
	aspect-ratio: 1;
	translate: -50% -50%;
	rotate: var(--tilt);
}

.business-visual__icon-body {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 118, 182, 0.08), 0 8px 20px rgba(0, 130, 200, 0.1);
}

.business-visual__icon svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: var(--c);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 動き：アイコンはヒーローと同じくふわふわ。スクロールで見えたときに、
   ランキングの行が上から順に現れ、星がぽんぽんと灯り、アイコンがぽよんと出てくる。 */
@media (prefers-reduced-motion: no-preference) {
	.business-visual__icon {
		animation: hero-icon-bob var(--dur) ease-in-out var(--delay) infinite;
	}

	.js [data-reveal] .business-visual__row {
		opacity: 0;
		translate: 0 1.2cqw;
		transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
		transition-delay: calc(0.4s + var(--i) * 0.16s);
	}

	.js [data-reveal] .business-visual__stars i {
		scale: 0;
		transition: scale 0.45s cubic-bezier(0.3, 0.7, 0.4, 1.6);
		transition-delay: calc(0.75s + var(--i) * 0.16s + var(--n) * 0.06s);
	}

	.business-visual__stars i {
		--n: 0;
	}

	.business-visual__stars i:nth-child(2) {
		--n: 1;
	}

	.business-visual__stars i:nth-child(3) {
		--n: 2;
	}

	.business-visual__stars i:nth-child(4) {
		--n: 3;
	}

	.business-visual__stars i:nth-child(5) {
		--n: 4;
	}

	.js [data-reveal] .business-visual__icon-body {
		opacity: 0;
		scale: 0.4;
		transition: opacity 0.5s var(--ease), scale 0.8s cubic-bezier(0.3, 0.7, 0.4, 1.4);
		transition-delay: calc(0.3s + var(--i) * 0.12s);
	}

	.js [data-reveal].is-inview :is(.business-visual__row, .business-visual__icon-body) {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}

	.js [data-reveal] .business-visual__rank::before {
		scale: 0;
		transform-origin: 50% 100%;
		transition: scale 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.6) 1.15s;
	}

	.js [data-reveal].is-inview .business-visual__stars i,
	.js [data-reveal].is-inview .business-visual__rank::before {
		scale: 1;
	}
}

.business__num {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	color: var(--c-blue-ink);
	font-family: var(--font-en);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.business__num::after {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--c-line-2);
}

.business__title {
	margin: 0 0 28px;
	font-size: clamp(2.2rem, 2.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
}

.business__text {
	margin-bottom: 36px;
	color: var(--c-ink-2);
	line-height: 2.1;
}

.business__text p {
	margin: 0;
}

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

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

/* Media
   -------------------------------------------------------------------------- */
.media-group + .media-group {
	margin-top: clamp(48px, 6vw, 72px);
}

.media-group__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	margin: 0 0 24px;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.media-group__note {
	color: var(--c-ink-3);
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}

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

.media-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

/* 運営メディアの画像は白地の中央にロゴを置いたバナーなので、上下の余白だけを切って低く見せる。 */
.media-card__thumb {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-bottom: 1px solid var(--c-line);
	background: #fff;
}

.media-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.media-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 22px 20px;
}

.media-card__catch,
.tool-card__catch {
	color: var(--c-ink-3);
	font-size: 1.2rem;
	line-height: 1.6;
	letter-spacing: 0.06em;
}

.media-card__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.6;
}

/* 画像と文字の境目に重ねて置き、タイトルを横幅いっぱいに使えるようにする。 */
.media-card__arrow {
	position: absolute;
	top: 0;
	right: 20px;
	width: 36px;
	height: 36px;
	translate: 0 -50%;
}

.media-card__link:hover {
	box-shadow: 0 0 0 1px var(--c-line), var(--shadow);
	transform: translateY(-4px);
}

.media-card__link:hover .media-card__thumb img {
	transform: scale(1.04);
}

.media-card__link:hover .media-card__arrow {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: #fff;
}

/* ツール：ヒーローと同じ白い丸アイコンを、淡い色のタイルに載せる。 */
.tool-card__link {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 100%;
	padding: 14px 18px 14px 14px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.tool-card__icon {
	--tile: var(--c-tint-blue);
	--c: var(--c-blue-ink);
	display: grid;
	flex: none;
	place-items: center;
	width: 72px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 14px;
	background: var(--tile);
}

.tool-card__icon--lime {
	--tile: var(--c-tint-lime);
	--c: #5fae14;
}

.tool-card__icon--pink {
	--tile: var(--c-tint-coral);
	--c: #e86a9a;
}

.tool-card__badge {
	display: grid;
	place-items: center;
	width: 66%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 14px rgba(30, 35, 40, 0.07);
	rotate: -6deg;
	transition: rotate 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.6), scale 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.6);
}

.tool-card__badge svg {
	width: 52%;
	height: 52%;
	fill: none;
	stroke: var(--c);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tool-card__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tool-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tool-card__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.55;
	transition: color 0.3s var(--ease);
}

.tool-card__link:hover {
	box-shadow: 0 0 0 1px var(--c-line), var(--shadow);
	transform: translateY(-3px);
}

.tool-card__link:hover .tool-card__badge {
	rotate: 6deg;
	scale: 1.08;
}

.tool-card__link:hover .tool-card__title {
	color: var(--c-blue-ink);
}

/* 1列にするときは、画像を左に置いた横長カードにして縦に間延びしないようにする。 */
@media (max-width: 900px) {
	.media-grid,
	.tool-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.media-card__link {
		flex-direction: row;
	}

	.media-card__thumb {
		display: grid;
		flex: none;
		place-items: center;
		width: min(38%, 220px);
		aspect-ratio: auto;
		border-right: 1px solid var(--c-line);
		border-bottom: 0;
	}

	.media-card__thumb img {
		height: auto;
		aspect-ratio: 2 / 1;
	}

	.media-card__body {
		flex: 1;
		justify-content: center;
		min-width: 0;
		padding: 14px 52px 14px 16px;
		gap: 2px;
	}

	.media-card__arrow {
		top: 50%;
		right: 12px;
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 600px) {
	.media-card__catch,
	.tool-card__catch {
		font-size: 1.1rem;
	}

	.media-card__title,
	.tool-card__title {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.tool-card__link {
		gap: 14px;
		padding: 10px 14px 10px 10px;
	}

	.tool-card__icon {
		width: 60px;
		border-radius: 12px;
	}
}

/* CSR
   -------------------------------------------------------------------------- */
.csr__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.csr-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line);
}

/* 左右のカードで見出し・文・画像の高さをそろえる（見出し／文／画像／リンクの4段）。
   右のロゴは画像とリンクの2段ぶんに広げて、下端もそろえる。 */
@supports (grid-template-rows: subgrid) {
	.csr-card {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		justify-items: start;
		row-gap: 18px;
	}

	.csr-card .partner-logos {
		grid-row: span 2;
		grid-auto-rows: 1fr;
		align-self: stretch;
	}
}

.csr-card__image {
	display: block;
	width: 100%;
	margin-top: 6px;
	aspect-ratio: 1024 / 538;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-s);
	background: #fff;
}

.csr-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.csr-card__image:hover img {
	transform: scale(1.03);
}

.csr-card__title {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.csr-card__text {
	margin: 0;
	color: var(--c-ink-2);
	line-height: 2;
}

.csr-card .text-link {
	margin-top: auto;
}

.partner-logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.partner-logos li {
	display: grid;
}

.partner-logos a {
	display: grid;
	place-items: center;
	min-height: 96px;
	padding: 14px 20px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-s);
	background: #fff;
	transition: border-color 0.3s var(--ease);
}

.partner-logos a:hover {
	border-color: var(--c-line-2);
}

.partner-logos img {
	width: auto;
	max-height: 72px;
	object-fit: contain;
}

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

@media (max-width: 480px) {
	.partner-logos a {
		min-height: 80px;
		padding: 10px 12px;
	}
}

/* News list
   -------------------------------------------------------------------------- */
.news-list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-line-2);
	list-style: none;
}

.news-row__link {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 32px;
	padding: 28px 8px;
	border-bottom: 1px solid var(--c-line-2);
	color: inherit;
	text-decoration: none;
}

.news-row__meta {
	display: flex;
	align-items: center;
	gap: 16px;
}

.news-row__title {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.75;
	transition: color 0.3s var(--ease);
}

.news-row__link:hover .news-row__title {
	color: var(--c-blue-ink);
}

.news-row__link:hover .news-row__arrow {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: #fff;
}

@media (max-width: 700px) {
	.news-row__link {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 22px 0;
	}

	.news-row__meta {
		grid-column: 1 / -1;
	}

	.news-row__title {
		font-size: 1.5rem;
	}

	.news-row__arrow {
		width: 32px;
		height: 32px;
	}
}

/* Post cards
   -------------------------------------------------------------------------- */
.post-grid {
	display: grid;
	gap: 48px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.post-card__thumb {
	display: block;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: var(--radius-s);
	background: var(--c-tint);
}

.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.post-card__meta .date {
	font-size: 1.3rem;
}

.post-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.04em;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	transition: color 0.3s var(--ease);
}

.post-card__link:hover .post-card__thumb img {
	transform: scale(1.04);
}

.post-card__link:hover .post-card__title {
	color: var(--c-blue-ink);
}

.thumb-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-tint-blue) 0%, #f6fbff 55%, var(--c-tint-lime) 100%);
}

.thumb-placeholder span {
	color: rgba(0, 118, 182, 0.35);
	font-family: var(--font-en);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.3em;
}

@media (max-width: 1000px) {
	.post-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.post-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* スマホでは横並びのコンパクトなリストにする。 */
@media (max-width: 560px) {
	.post-grid--3,
	.post-grid--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-top: 1px solid var(--c-line);
	}

	.post-card__link {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 6px 16px;
		padding-block: 18px;
		border-bottom: 1px solid var(--c-line);
	}

	.post-card__thumb {
		grid-row: 1 / 3;
		align-self: start;
		border-radius: 8px;
	}

	.post-card__title {
		font-size: 1.4rem;
		line-height: 1.65;
	}
}

/* Pick up
   -------------------------------------------------------------------------- */
/* コラム一覧の下に添える小さめの横長バナー。 */
.pickup {
	display: grid;
	grid-template-columns: 184px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px 28px;
	margin-top: 40px;
	padding: 12px 24px 12px 12px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 0 0 1px var(--c-line);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.pickup__thumb {
	display: block;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: 8px;
}

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

.pickup__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.pickup__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

.pickup__tag {
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--c-tint-blue);
	color: var(--c-blue-ink);
	font-family: var(--font-en);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pickup__label {
	color: var(--c-ink-3);
	font-size: 1.3rem;
}

.pickup__title {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	transition: color 0.3s var(--ease);
}

.pickup:hover {
	box-shadow: 0 0 0 1px var(--c-line), var(--shadow);
	transform: translateY(-3px);
}

.pickup:hover .pickup__title {
	color: var(--c-blue-ink);
}

.pickup:hover .pickup__arrow {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: #fff;
}

@media (max-width: 600px) {
	.pickup {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 14px;
		margin-top: 28px;
		padding: 10px 14px 10px 10px;
	}

	.pickup__arrow {
		display: none;
	}

	.pickup__label {
		font-size: 1.1rem;
	}

	.pickup__title {
		font-size: 1.4rem;
		line-height: 1.5;
	}
}

/* Company profile
   -------------------------------------------------------------------------- */
.profile {
	margin: 0;
	border-top: 1px solid var(--c-line-2);
}

.profile__row {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	gap: 4px 32px;
	padding: 22px 8px;
	border-bottom: 1px solid var(--c-line);
}

.profile dt {
	color: var(--c-ink-3);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 2;
}

.profile dd {
	margin: 0;
	line-height: 1.9;
}

.profile a {
	color: var(--c-blue-ink);
	text-underline-offset: 0.25em;
}

@media (max-width: 600px) {
	.profile__row {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px 0;
	}
}

/* Contact CTA
   -------------------------------------------------------------------------- */
.contact-cta {
	padding-top: 0;
}

.section--tint + .contact-cta,
.related + .contact-cta {
	padding-top: var(--space-section);
}

.contact-cta__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 7vw, 104px) clamp(28px, 7vw, 96px);
	border-radius: 24px;
	background: linear-gradient(120deg, var(--c-tint-blue) 0%, #f5fbff 55%, var(--c-tint-lime) 100%);
}

.contact-cta .section-head {
	position: relative;
	margin-bottom: 28px;
}

.contact-cta__text {
	position: relative;
	margin: 0 0 44px;
	color: var(--c-ink-2);
	font-size: clamp(1.5rem, 1.4vw, 1.7rem);
	line-height: 2.1;
}

.contact-cta__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 36px;
}

.contact-cta__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	color: var(--c-ink);
	font-family: var(--font-en);
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: border-color 0.3s var(--ease);
}

.contact-cta__mail:hover {
	border-color: currentColor;
}

/* パネル右端の斜めのライン（青・水色・黄緑のグラデーション）。 */
.contact-cta__deco span {
	position: absolute;
	width: 44px;
	border-radius: 999px;
	rotate: 30deg;
	pointer-events: none;
}

.contact-cta__deco span:nth-child(1) {
	top: -10%;
	right: 16%;
	height: 70%;
	background: linear-gradient(to top, rgba(0, 174, 239, 0) 0%, rgba(0, 174, 239, 0.5) 100%);
}

.contact-cta__deco span:nth-child(2) {
	top: 24%;
	right: 7%;
	height: 60%;
	background: linear-gradient(to top, rgba(53, 176, 255, 0) 0%, rgba(53, 176, 255, 0.3) 100%);
}

.contact-cta__deco span:nth-child(3) {
	top: 52%;
	right: 24%;
	height: 34%;
	background: linear-gradient(to top, rgba(126, 211, 33, 0) 0%, rgba(126, 211, 33, 0.6) 100%);
}

@media (max-width: 767px) {
	/* 文字やボタンと重なるので、スマホでは薄くする。 */
	.contact-cta__deco {
		opacity: 0.5;
	}

	.contact-cta__actions .button {
		width: 100%;
	}
}

/* Page heading band
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 40px) 0 clamp(56px, 8vw, 96px);
	background: var(--c-tint);
}

.page-hero .container {
	position: relative;
}

.page-hero__en {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	color: var(--c-ink-2);
	font-family: var(--font-en);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.page-hero__en::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--bar-brand);
}

.page-hero__title {
	margin: 0;
	font-size: clamp(2.8rem, 4.4vw, 4.6rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
}

.page-hero__description {
	max-width: 40em;
	margin-top: 20px;
	color: var(--c-ink-2);
}

.page-hero__description p {
	margin: 0;
}

.breadcrumb {
	margin-bottom: clamp(40px, 6vw, 72px);
}

/* 1行に収め、長い記事タイトルだけを省略表示する。 */
.breadcrumb__list {
	display: flex;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	color: var(--c-ink-3);
	font-size: 1.2rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
	list-style: none;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-inline: 10px;
	color: var(--c-line-2);
}

.breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

.breadcrumb__item {
	flex: none;
}

.breadcrumb__item:last-child {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 32em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-body {
	padding-block: clamp(56px, 8vw, 96px) var(--space-section);
}

/* Post content wrapper
   -------------------------------------------------------------------------- */
.entry-content {
	padding-inline: var(--gutter);
	font-size: 1.6rem;
	line-height: 2;
}

.entry-content > * {
	max-width: var(--w-content);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--w-wide);
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}
/* 全幅テンプレート：ツールなど本文側で組んだ HTML は JINR と同じく最大 1120px まで広げ、
   見出し・段落・ブロックは通常ページと同じ読みやすい幅にそろえる。 */
.entry-content--full {
	padding-bottom: clamp(64px, 8vw, 120px);
}

.entry-content--full > * {
	max-width: var(--w-wide);
}

.entry-content--full > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, [class*="wp-block-"], [class*="b--jinr"]) {
	max-width: var(--w-content);
}

.entry-content--full > .alignfull {
	max-width: none;
}

/* Single post
   -------------------------------------------------------------------------- */
.article__header {
	padding-block: clamp(28px, 4vw, 40px) clamp(32px, 4vw, 48px);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
}

.article__updated {
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 1.3rem;
	letter-spacing: 0.06em;
}

.article__title {
	margin: 0;
	font-size: clamp(2.4rem, 3.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
}

.article__eyecatch {
	margin-block: 0 clamp(48px, 6vw, 72px);
}

.article__eyecatch img {
	width: 100%;
	border-radius: var(--radius);
}

.article {
	padding-bottom: clamp(64px, 8vw, 96px);
}

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: var(--space-section);
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-s);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s var(--ease);
}

.post-nav__link:hover {
	border-color: var(--c-ink);
}

.post-nav__link--next {
	grid-column: 2;
	text-align: right;
}

.post-nav__label {
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.post-nav__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.7;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (max-width: 600px) {
	.post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-nav__link--next {
		grid-column: auto;
	}
}

/* Pagination, search, empty
   -------------------------------------------------------------------------- */
.pagination {
	margin-top: 72px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	color: inherit;
	font-family: var(--font-en);
	font-weight: 500;
	text-decoration: none;
}

.page-numbers:hover {
	border-color: var(--c-ink);
}

.page-numbers.current {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: #fff;
}

.page-numbers.dots {
	border: 0;
}

.page-numbers.prev .icon {
	transform: rotate(180deg);
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 32px auto;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0 22px;
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	background: #fff;
	font: inherit;
}

.search-form__input:focus {
	border-color: var(--c-blue);
	outline: none;
	box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);
}

.search-form__button {
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--c-ink);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.empty-state {
	text-align: center;
}

/* Footer
   -------------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--c-line);
	background: #fff;
	font-family: var(--font-ja);
	letter-spacing: 0.04em;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px 64px;
	padding-block: 72px 56px;
}

.site-logo--footer .site-logo__img {
	height: 22px;
}

.site-footer__company {
	margin: 24px 0 6px;
	font-size: 1.4rem;
	font-weight: 500;
}

.site-footer__address {
	color: var(--c-ink-2);
	font-size: 1.3rem;
	font-style: normal;
	line-height: 1.9;
}

.footer-nav__list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 14px 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav__list a {
	color: var(--c-ink-2);
	font-size: 1.3rem;
	text-decoration: none;
}

.footer-nav__list a:hover {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 24px 32px;
	border-top: 1px solid var(--c-line);
}

.site-footer__copy {
	margin: 0;
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 1.2rem;
	letter-spacing: 0.08em;
}

.pagetop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-ink-2);
	font-family: var(--font-en);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.pagetop .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.35s var(--ease);
}

.pagetop:hover .icon {
	transform: translateY(-3px);
}

@media (max-width: 700px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 56px 40px;
	}

	.footer-nav__list {
		gap: 14px 32px;
	}
}

/* Scroll reveal（JS が有効なときだけ隠す）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] {
		opacity: 0;
		translate: 0 28px;
		transition: opacity 1s var(--ease), translate 1s var(--ease);
		transition-delay: var(--reveal-delay, 0s);
	}

	.js [data-reveal].is-inview {
		opacity: 1;
		translate: 0 0;
	}
}

/* タッチ端末と「動きを減らす」設定では、ホバーの浮き上がり・拡大・傾きを付けない。
   タッチ端末はタップ後も :hover が残り、戻るボタンで戻ったときにカードが浮いたままになるため。
   色や影の変化はそのまま。
   -------------------------------------------------------------------------- */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.media-card__link:hover,
	.tool-card__link:hover,
	.pickup:hover,
	.media-card__link:hover .media-card__thumb img,
	.csr-card__image:hover img,
	.post-card__link:hover .post-card__thumb img,
	.button:hover .icon,
	.text-link:hover .icon,
	.pagetop:hover .icon {
		transform: none;
	}

	.tool-card__link:hover .tool-card__badge {
		rotate: -6deg;
		scale: none;
	}
}