/*
Theme Name: Since Design
Author: Natsumi Minegishi
Description: Since Design のオリジナルテーマ
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: since-design
*/

/* ==========================================================================
   変数
   ========================================================================== */

:root {
	--color-pink: #ede5e6;
	--color-blue: #0f5bd4;
	--color-white: #fff;
	--color-red: #d46661;

	--font-en: "Wittgenstein", serif;
	--font-logo: "LXGW WenKai TC", serif;
	--font-base: "Wittgenstein", sans-serif; /* 日本語の字形は Wittgenstein に無いので、端末の標準ゴシック体で表示される（Figma と同じ） */
	--font-jp: "Zen Maru Gothic", sans-serif;

	--content-width: 75rem;
	--gap-title: 3.75rem; /* 見出しと本文の間隔（SP 34px） */
	--gap-heading: 5rem; /* 大きな見出し（SERVICE・SKILLS など）と下のテキストの間隔（PC 80px） */
	--gap-button: 3.125rem; /* 本文とボタンの間隔（SP 30px） */
	--color-error: #ff9c9c; /* 青い背景の上で読める赤 */
	--side: 2rem; /* 左右の余白（SP は 375px 幅で 15px、幅が広がると少しずつ広がる） */
	--header-height: 5.5rem;
	--admin-bar-height: var(--wp-admin--admin-bar--height, 0px);

	/* コンタクトボタン（ヘッダー右上にあるときのサイズ・位置） */
	--stamp-size: clamp(6.5rem, 9vw, 9.125rem); /* 最大 146px */
	--stamp-offset: 3.5rem;

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   ベース
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--admin-bar-height));
}

body {
	margin: 0;
	background-color: var(--color-pink);
	color: var(--color-blue);
	font-family: var(--font-base);
	line-height: 1.7;
	letter-spacing: 0; /* 本文は 0%、見出し・ナビは 0.1em（10%） */
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
}

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

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

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.site-header {
	position: sticky;
	top: var(--admin-bar-height);
	z-index: 100;
	/* 背景は透明。青い背景（[data-header-bg="blue"]）の上に重なったときは文字を白にする */
	color: var(--color-blue);
	transition: color 0.3s;
}

.site-header.is-on-blue {
	color: var(--color-white);
}

.site-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: var(--header-height);
	padding-inline: 4rem;
	/* FV：右端のコンタクトボタンも含めて画面いっぱいに使う */
	padding-right: calc(var(--stamp-size) + var(--stamp-offset) + 2rem);
	transition: padding 0.6s var(--ease-out);
}

/* FV を過ぎたら：ロゴと3メニューで画面いっぱいに使う */
.is-scrolled .site-header__inner {
	padding-right: 4rem;
}

.site-header__logo {
	margin: 0;
	font-family: var(--font-logo);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	transition: color 0.3s;
}

.site-header__logo a {
	text-decoration: none;
}

/* クリックやスクロール後に出るブラウザ標準の青い枠線は消し、キーボード操作のときだけ下線で示す */
.site-header__logo a:focus {
	outline: none;
}

.site-header__logo a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

/* グローバルナビ（PC） */
.global-nav__list {
	display: flex;
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-nav__link {
	font-family: var(--font-en);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: opacity 0.3s;
}

.global-nav__link:hover {
	opacity: 0.6;
}

/* ハンバーガーボタン・モバイルメニューは PC では非表示 */
.menu-toggle,
.mobile-menu {
	display: none;
}

/* ==========================================================================
   コンタクトボタン（切手風）
   ========================================================================== */

.contact-stamp {
	position: fixed;
	z-index: 110; /* ヘッダー（z-index: 100）より前面 */
	top: calc(var(--admin-bar-height) + 2rem);
	right: var(--stamp-offset);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	width: var(--stamp-size);
	aspect-ratio: 1;
	color: var(--color-white);
	font-size: calc(var(--stamp-size) * 0.115);
	text-decoration: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 右下に固定表示された状態 */
.contact-stamp.is-docked {
	top: auto;
	bottom: 2rem;
	right: 2rem;
}

/* 位置を切り替える間、ふわっと消える */
.contact-stamp.is-hidden {
	opacity: 0;
	transform: translateY(0.75rem) scale(0.92);
	pointer-events: none;
}

/* スマホの TOP：少しスクロールするまで隠し、スクロールしたらふわっと出す */
@media (max-width: 768px) {
	.has-fv:not(.stamp-ready) .contact-stamp {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.92);
		pointer-events: none;
	}
}

/* 切手の画像（赤・青の2枚を重ね、背景色に合わせて切り替える） */
.contact-stamp__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.4s ease, transform 0.8s var(--ease-out);
}

.contact-stamp__bg--blue {
	opacity: 0;
}

/* 赤い背景の上では青に */
.contact-stamp.is-on-red .contact-stamp__bg--red {
	opacity: 0;
}

.contact-stamp.is-on-red .contact-stamp__bg--blue {
	opacity: 1;
}

.contact-stamp:hover .contact-stamp__bg {
	transform: rotate(45deg);
}

.contact-stamp__label,
.contact-stamp__icon {
	position: relative;
}

.contact-stamp__label {
	font-family: var(--font-logo);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
}

.contact-stamp__icon {
	width: 1.9em;
	height: auto;
	margin-top: 0.3em; /* CONTACT との間隔 */
}

/* ==========================================================================
   モバイル（768px 以下）
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--header-height: 3.75rem;
	}

	/* スマホだけ、ヘッダーをピンクで塗りつぶす（ブラウザのバーの色と、なじませる） */
	.site-header {
		background-color: var(--color-pink);
	}

	/* 塗りつぶしているので、青い背景の上でも、ロゴ・ハンバーガーは文字色を変えない（PC だけ白にする） */
	.site-header.is-on-blue {
		color: var(--color-blue);
	}

	.site-header__inner,
	.is-scrolled .site-header__inner {
		max-width: none;
		padding-inline: var(--side);
	}

	.site-header__logo {
		font-size: 1rem;
	}

	.global-nav {
		display: none;
	}

	/* ハンバーガーボタン */
	.menu-toggle {
		position: relative;
		display: block;
		width: 3.25rem;
		height: 2.75rem;
		margin-right: calc(0.5625rem - var(--side)); /* ボタンの右端を画面の端から 9px に。線の右端は 15px */
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-red); /* 線は赤 */
		cursor: pointer;
		transition: color 0.3s;
	}

	.menu-toggle__line {
		position: absolute;
		left: 50%;
		width: 2.5rem; /* 線の横幅 40px */
		height: 1px;
		background-color: currentColor;
		transition: top 0.4s var(--ease-out), transform 0.4s var(--ease-out);
	}

	.menu-toggle__line:nth-child(1) {
		top: calc(50% - 0.25rem);
		transform: translateX(-50%);
	}

	.menu-toggle__line:nth-child(2) {
		top: calc(50% + 0.25rem);
		transform: translateX(-50%);
	}

	.is-menu-open .menu-toggle__line:nth-child(1) {
		top: 50%;
		transform: translateX(-50%) rotate(30deg);
	}

	.is-menu-open .menu-toggle__line:nth-child(2) {
		top: 50%;
		transform: translateX(-50%) rotate(-30deg);
	}

	/* メニューを開いている間は背面をスクロールさせない */
	html.is-menu-open {
		overflow: hidden;
	}

	/* モバイルメニュー（上から降りてくる） */
	.mobile-menu {
		position: fixed;
		top: var(--admin-bar-height);
		left: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 32rem; /* 画面の高さに左右されず、ABOUT〜Instagram が収まる高さ */
		transform: translate(60%, -100%); /* 右上から左下へ降りてくる */
		visibility: hidden;
		transition: transform 0.7s var(--ease-out), visibility 0s linear 0.7s;
	}

	.is-menu-open .mobile-menu {
		transform: none;
		visibility: visible;
		transition: transform 0.7s var(--ease-out), visibility 0s;
	}

	/* viewBox の左側 240/375 = 64% 分を画面の外側へはみ出させる */
	.mobile-menu__bg {
		position: absolute;
		top: 0;
		left: -64%;
		width: 164%;
		height: 100%;
		fill: var(--color-pink);
	}

	/* 縁の線は下側の曲線だけ（上と左右の画面端には線を出さない） */
	.mobile-menu__fill {
		stroke: none;
	}

	.mobile-menu__edge {
		fill: none;
		stroke: var(--color-blue);
		stroke-width: 1.5px;
		stroke-linecap: butt;
		vector-effect: non-scaling-stroke;
	}

	.mobile-menu__nav {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		padding-top: 7rem;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.is-menu-open .mobile-menu__nav {
		opacity: 1;
		transition: opacity 0.5s 0.3s;
	}

	.mobile-menu__list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-menu__link {
		font-family: var(--font-en);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.1em;
		color: var(--color-blue);
		text-decoration: none;
	}

	.mobile-menu__sns {
		display: block;
		width: 2rem;
		color: var(--color-blue);
	}

	.mobile-menu__sns svg {
		display: block;
		width: 100%;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.3;
	}

	.mobile-menu__sns .mobile-menu__sns-dot {
		fill: currentColor;
		stroke: none;
	}

	/* コンタクトボタンは最初から右下に固定 */
	.contact-stamp,
	.contact-stamp.is-docked {
		--stamp-size: clamp(6rem, 31.5vw, 7.375rem); /* 最大 118px（375px幅で約118px） */
		top: auto;
		bottom: 1rem;
		right: 1rem;
	}
}

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   TOP：ファーストビュー（FV）
   デザイン幅 1600px を 100 とした単位（--u）で配置し、画面幅に合わせて拡縮する。
   1600px 以上は 1600px のまま中央寄せ（1u = 1% = 16px = 1rem）。
   FV は帯（welcome to my portfolio...）を含めて 100vh。
   登場順：帯 → キャッチコピー → 赤い図形 → 女の子 → 「あなたの〜」
   ========================================================================== */

.fv {
	--vh: 1vh; /* 小さい方の画面高さ（svh）。サイズの基準に使い、ブラウザのバーの出入りで変わらない */
	--dvh: 1vh; /* 今見えている画面高さ（dvh）。FV の高さに使い、見えている範囲にピッタリ合わせる */
	/* 1600×780 のデザインが画面に収まる大きさ（（画面高さ − 管理バー）÷ 48.75） */
	--u: min(1vw, 1rem, calc((100 * var(--vh) - var(--admin-bar-height)) / 48.75));

	/* 登場のタイミング */
	--d-marquee: 0s;
	--d-title: 0.4s;
	--d-blob: 1.45s;
	--d-img: 1.9s;
	--d-arc: 2.8s;

	display: flex;
	flex-direction: column;
	/* ヘッダー〜帯でピッタリ画面 1 つ分（ログイン中は管理バーの分を引く） */
	height: calc(100 * var(--dvh) - var(--admin-bar-height));
	margin-top: calc(var(--header-height) * -1); /* ヘッダーの下に潜り込ませる */
	overflow: hidden;
}

@supports (height: 1svh) {
	.fv {
		--vh: 1svh;
	}
}

@supports (height: 1dvh) {
	.fv {
		--dvh: 1dvh;
	}
}

.fv__main {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden; /* 画像・図形は帯の上端から出てくる */
}

/* デザインの配置どおりに並べる土台（帯の上端に下揃え） */
.fv__stage {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: calc(100 * var(--u));
	height: calc(43.75 * var(--u)); /* 700px */
	margin-inline: auto;
}

/* --- 赤い図形 --- */

.fv__blob {
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: calc(26.25 * var(--u)); /* 420px */
	width: calc(42.5625 * var(--u)); /* 681px */
	height: calc(17.875 * var(--u)); /* 286px */
	overflow: visible;
	fill: var(--color-red);
	transform-origin: 50% 100%;
	animation: fv-pop 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d-blob) both;
}

.fv__blob--sp {
	display: none;
}

@keyframes fv-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	60% {
		opacity: 1;
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- キャッチコピー：1行ずつ、下から斜めにバウンドして登場 --- */

.fv__title {
	position: absolute;
	z-index: 1;
	top: calc(17.5 * var(--u));
	left: 0;
	width: 100%;
	margin: 0;
	font-family: var(--font-en);
	font-size: calc(10.625 * var(--u)); /* 170px */
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}

.fv__row {
	display: block;
}

.fv__line {
	display: inline-block;
	transform-origin: 0 100%;
	animation: fv-bounce 1s cubic-bezier(0.2, 0.8, 0.3, 1) both;
	animation-delay: calc(var(--d-title) + var(--row) * 0.3s);
}

@keyframes fv-bounce {
	0% {
		opacity: 0;
		transform: translateY(70%) rotate(8deg);
	}

	55% {
		opacity: 1;
		transform: translateY(-8%) rotate(-3deg);
	}

	78% {
		transform: translateY(3%) rotate(1.2deg);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/* --- 画像：下からにゅっと登場 --- */

.fv__img {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: calc(28 * var(--u));
	width: calc(34.4375 * var(--u)); /* 551px */
	animation: fv-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d-img) both;
}

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

@keyframes fv-rise {
	from {
		transform: translateY(105%);
	}

	to {
		transform: none;
	}
}

/* --- 円弧のテキスト：1文字ずつ円弧上に配置し、タイプライターのように表示 ---
   --k は「400×150 の枠」の 1 単位の大きさ。円の中心は枠の (200, 220)、文字の基準線の半径は 192。 */

.fv__lead {
	--k: calc(0.0625 * var(--u));
	position: absolute;
	z-index: 3;
	top: calc(8.625 * var(--u));
	left: calc(37.5 * var(--u));
	width: calc(400 * var(--k)); /* 25u */
	height: calc(150 * var(--k));
	margin: 0;
	font-family: var(--font-jp);
	font-size: calc(18 * var(--k)); /* 18px */
	font-weight: 500;
	line-height: 1;
	pointer-events: none;
}

.fv__lead-char {
	position: absolute;
	top: calc(10 * var(--k));
	left: calc(200 * var(--k));
	width: 0;
	height: calc(210 * var(--k)); /* 下端が円の中心 */
	transform-origin: 0 100%;
	transform: rotate(var(--a));
	opacity: 0;
	animation: fv-type 0.2s ease-out both; /* 極端に短いアニメーションは Chrome で描画されないため 0.2s */
	animation-delay: calc(var(--d-arc) + var(--i) * 0.06s);
}

.fv__lead-char > span {
	display: block;
	width: 1em;
	margin-left: -0.5em;
	text-align: center;
}

@keyframes fv-type {
	to {
		opacity: 1;
	}
}

/* --- 流れる帯 --- */

.fv__marquee {
	flex: none;
	display: flex;
	align-items: center;
	height: calc(5 * var(--u)); /* 80px */
	overflow: hidden;
	border-block: 1px solid var(--color-blue);
	font-family: var(--font-logo);
	font-size: var(--u); /* 16px */
	font-weight: 400;
	letter-spacing: 0.1em;
	animation: fv-fade 0.8s ease var(--d-marquee) both;
}

.fv__marquee-track {
	display: flex;
	width: max-content;
	animation: fv-marquee 50s linear infinite;
}

.fv__marquee-group {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fv__marquee-group li {
	padding-right: calc(2.3 * var(--u));
	white-space: nowrap;
}

@keyframes fv-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fv-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* 動きを減らす設定のときは、待ち時間なしで表示し、帯も止める */
@media (prefers-reduced-motion: reduce) {
	.fv__marquee,
	.fv__blob,
	.fv__line,
	.fv__img,
	.fv__lead-char {
		animation-delay: 0s !important;
	}

	.fv__marquee-track {
		animation: none !important;
	}
}

/* --- スマートフォン（デザイン幅 375px を 100 とする） ---
   寸法は画面の「幅」だけで決める（高さには合わせて縮めない）。
   iPhone SE など、見える高さが低い端末でも、デザイン（375×774）どおりの大きさになる。
   --u は 375px 幅で 1px。 */

@media (max-width: 768px) {
	.fv {
		--u: min(calc(100vw / 375), 0.4rem * 1.5); /* 幅 375px で 1px、幅が広がる分だけ拡大（上限あり） */
		/* 画面が縦に長いとき、デザインの高さ（694u）より余る分。見出しの上と下に半分ずつ入れる */
		--extra: max(0px, calc(100 * var(--dvh) - var(--admin-bar-height) - 694 * var(--u)));
		--d-blob: 1.8s;
		--d-img: 2.25s;
		--d-arc: 3.15s;
		height: auto;
	}

	/* 帯の直前までが 100vh。見える高さが低い端末（iPhone SE など）では、デザインの高さ（734px）まで広げる。
	   帯はその下に続く（100vh には含めない） */
	.fv__main {
		flex: none;
		height: max(calc(694 * var(--u)), calc(100 * var(--dvh) - var(--admin-bar-height)));
	}

	/* デザインの寸法（694px）で、帯の直前に下揃えにする。
	   画面が縦に長い端末（iPhone 16 など）で余白ができるときは、女の子の下ではなく、見出しの上に入る */
	.fv__stage {
		top: auto;
		bottom: 0;
		width: 100%;
		height: calc(694 * var(--u));
		margin-inline: 0;
	}

	.fv__blob--pc {
		display: none;
	}

	.fv__blob--sp {
		display: block;
		left: 0;
		width: calc(330 * var(--u));
		height: calc(234 * var(--u)); /* 上端 y=460 から帯の上端 694 まで */
	}

	/* 見出し：左端 38px・約 64px・行間 74px。1 行目の文字の上端が y=86 */
	.fv__title {
		top: calc(60 * var(--u) - var(--extra) / 2); /* 「あなたの〜」との間隔をあけるため上げている */
		left: calc(38 * var(--u));
		width: auto;
		font-size: calc(64 * var(--u));
		line-height: calc(69 / 64); /* 行間：デザインの 74px より狭め */
		text-align: left;
	}

	.fv__row {
		display: contents;
	}

	/* 4行を1行ずつ順番に */
	.fv__line {
		display: block;
		width: max-content;
		animation-delay: calc(var(--d-title) + var(--row-sp) * 0.22s);
	}

	/* 女の子：幅 約 330px、左端 約 28px。頭の上端が y=440 */
	.fv__img {
		left: calc(-24.5 * var(--u)); /* 頭の中心（画像の幅の 62%）を、円弧の中心（x=187）にそろえる */
		width: calc(340 * var(--u));
	}

	/* 円弧の文字：左右 71〜320px、y=386〜466（約 14px） */
	.fv__lead {
		--k: calc(0.68 * var(--u)); /* 枠 400 単位 = 272px */
		top: calc(350 * var(--u)); /* 見出しの行間が増えた分より少なく下げ、女の子に近づける */
		left: calc(51 * var(--u));
		font-size: calc(21 * var(--k)); /* 約 14px */
	}

	.fv__marquee {
		height: calc(52 * var(--u)); /* 帯の高さ 52px */
		font-size: calc(14 * var(--u)); /* 帯の文字 14px */
	}

	.fv__marquee-group li {
		padding-right: calc(30 * var(--u));
	}
}

/* ==========================================================================
   TOP：ABOUT
   デザイン幅 1600px で 見出し 60px / 本文 18px。画面幅に合わせて可変。
   ========================================================================== */

.about {
	padding: 7.25rem 2rem 8.125rem;
}

.about__inner {
	max-width: var(--content-width);
	margin-inline: auto;
}

.about__top {
	display: grid;
	grid-template-columns: 655fr 545fr;
	align-items: start;
}

.about__title {
	margin: 0;
	font-size: clamp(2.25rem, 3.75vw, 3.75rem); /* 60px */
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.about__body {
	padding-top: 1.1rem;
	font-size: clamp(0.9375rem, 1.125vw, 1.125rem); /* 18px */
	line-height: 2.2;
	letter-spacing: 0;
}

.about__body p {
	margin: 0 0 1.25rem;
}

.about__sign {
	margin-top: 2.4rem !important;
	margin-bottom: 0 !important;
	line-height: 1.6;
}

/* Since Design の文字だけ LXGW WenKai TC */
.about__sign-name {
	font-family: var(--font-logo);
	font-size: clamp(1rem, 1.5vw, 1.5rem);
	letter-spacing: 0.1em;
}

.about__sign-dash {
	margin-inline: 0.6em;
}

.about__sign-credit {
	font-size: clamp(0.8125rem, 1vw, 1rem);
}

/* --- プロフィールカード --- */

.about__profile {
	position: relative;
	margin-top: 5.6rem;
}

/* 男の子：カードの上辺から下からにゅっと出てくる */
.about__boy {
	position: absolute;
	bottom: 100%;
	left: 21.5%;
	width: clamp(8rem, 12.75vw, 12.75rem); /* 204px */
	overflow: hidden;
	line-height: 0;
}

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

/* --- 登場アニメーション：動くのは見出しと男の子だけ（他の要素は最初から表示）---
   画面に入ったらすぐ動き出す。 */

.about__title-line {
	display: block;
	width: max-content;
	transform-origin: 0 100%;
}

.is-js .about__title-line {
	opacity: 0;
}

/* 見出し：FV と同じ、下から斜めに弾んで1行ずつ */
.is-js .about__top.is-inview .about__title-line {
	animation: fv-bounce 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
	animation-delay: calc(var(--i) * 0.18s);
}

/* 男の子：カードの上辺の裏から、下からにゅっと */
.is-js .about__boy img {
	transform: translateY(101%);
}

.is-js .about__boy.is-inview img {
	animation: about-boy-rise 0.9s var(--ease-out) both;
}

/* PC はカードが見えてから、少し間をおいて出てくる */
@media (min-width: 769px) {
	.is-js .about__boy.is-inview img {
		animation-delay: 0.2s;
	}
}

@keyframes about-boy-rise {
	from {
		transform: translateY(101%);
	}

	to {
		transform: none;
	}
}

/* 動きを減らす設定のときは、待ち時間なしで表示する */
@media (prefers-reduced-motion: reduce) {
	.is-js .about__title-line,
	.is-js .about__boy img {
		animation-delay: 0s !important;
	}
}

.about-card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 4.375rem;
	padding: 3.8rem 5.9rem 3.8rem 5rem;
	border: 1px solid var(--color-blue);
	border-radius: 2.5rem; /* 40px */
	background-color: var(--color-white);
}

.about-card__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem;
}

.about-card__name {
	margin: 0;
	font-size: clamp(1.375rem, 1.875vw, 1.875rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
}

.about-card__actions {
	display: flex;
	align-items: center;
	gap: 2.25rem;
}

.about-card__button,
.works__button {
	min-width: 14.9rem; /* 239px */
	min-height: 4.3rem; /* 69px */
	font-size: 1.5rem;
}
.about-card__sns {
	display: block;
	width: 1.875rem; /* 30px */
	flex: none;
	transition: opacity 0.3s;
}

.about-card__sns:hover {
	opacity: 0.6;
}

.about-card__sns svg {
	display: block;
	width: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

.about-card__sns .about-card__sns-dot {
	fill: currentColor;
	stroke: none;
}

.about-card__text {
	margin: 0;
	font-size: 1rem;
	line-height: 2;
	letter-spacing: 0;
}

@media (max-width: 768px) {
	.about {
		padding: 3.75rem var(--side) 4.3rem;
	}

	.br-pc {
		display: none;
	}

	.about__top {
		grid-template-columns: 1fr;
	}

	.about__title {
		font-size: clamp(1.75rem, 7.47vw, 3rem); /* 375px 幅で 28px */
		line-height: 1.9;
	}

	.about__body {
		padding-top: 2.2rem;
		font-size: clamp(0.9375rem, 4vw, 1.125rem); /* 375px 幅で 15px */
		line-height: 1.9;
	}

	.about__body p {
		margin-bottom: 1.6rem;
	}

	.about__sign {
		margin-top: 1.8rem !important;
	}

	.about__profile {
		--boy-w: clamp(11rem, 55.5vw, 14rem); /* 375px 幅で 208px */
		/* 男の子（高さ = 幅 × 393/412）が本文に重ならないよう、その高さ + 余白をカードの上に取る */
		margin-top: calc(var(--boy-w) * 0.954 + 2.5rem);
	}

	.about__boy {
		left: 50%;
		width: var(--boy-w);
		margin-left: calc(var(--boy-w) / -2);
	}

	/* 画面幅いっぱいのカード */
	.about-card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-inline: calc(-1 * var(--side));
		padding: 2.1rem 2rem 2.25rem;
		border-radius: 2.5rem;
	}

	.about-card__side {
		display: contents;
	}

	.about-card__name {
		order: 1;
		font-size: 1.375rem;
	}

	.about-card__text {
		order: 2;
		margin-top: 1rem;
		font-size: 0.9rem;
		line-height: 2;
		letter-spacing: 0;
	}

	.about-card__actions {
		order: 3;
		margin-top: 2rem;
		gap: 2.25rem;
	}

	.about-card__button,
	.works__button {
		min-width: 12.75rem; /* 204px */
		min-height: 3.5rem; /* 56px */
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   TOP：SERVICE（デザイン幅 1600px。--u = 1600px 時の 1% = 16px）
   ========================================================================== */

.br-sp {
	display: none;
}

.service {
	--u: min(1vw, 1rem);
	position: relative;
	overflow-x: clip;
	padding: 7.2rem 2rem 11rem;
	border-top: 1px solid var(--color-blue);
}

.service__inner {
	max-width: var(--content-width);
	margin-inline: auto;
}

.service__title,
.works__title,
.page-head__title,
.contact__title {
	margin: 0;
	font-size: clamp(3.5rem, 5.625vw, 5.625rem); /* 90px */
	line-height: 1.1;
	letter-spacing: 0.1em;
}

.service__title span,
.works__title span,
.page-head__title span,
.contact__title span {
	display: inline-block;
	transform-origin: 0 100%;
}

.service__text {
	width: min(33.75rem, 46vw);
	margin-top: var(--gap-heading);
}

.service__subtitle {
	margin: 0 0 var(--gap-title);
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.service__body {
	line-height: 1.8;
}

.service__body p {
	margin: 0 0 1.3rem;
}

.service__body p:last-child {
	margin-bottom: 0;
}
/* ボタン：先に枠線と文字を表示しておき、画面に入ると左から素早く塗られる
   （JS が無いときは最初から塗られた状態） */
.button {
	--btn: var(--color-blue);
	--btn-text: var(--color-white);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	box-shadow: inset 0 0 0 2px var(--btn); /* 枠線（塗りが枠線の上まで覆うので隙間が出ない） */
	border: 0;
	border-radius: 999px;
	background-color: var(--btn);
	color: var(--btn-text);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: opacity 0.3s;
}

.button:hover {
	opacity: 0.8;
}

.is-js .button {
	overflow: hidden;
	isolation: isolate;
	background: none;
	color: var(--btn);
}

.is-js .button::before,
.is-js .button::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.4s ease-out;
}

.is-js .button::before {
	z-index: -1;
	background-color: var(--btn);
}

.is-js .button::after {
	content: attr(data-label); /* 古いブラウザ用 */
	content: attr(data-label) / ""; /* 読み上げでは、ラベルを重ねて読まない */
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--btn-text);
}

.is-js .button.is-inview::before,
.is-js .button.is-inview::after {
	clip-path: inset(0);
}

.service__button {
	min-width: 16rem;
	min-height: 4.3rem;
	margin-top: var(--gap-button);
	font-size: 1.375rem;
}

/* モックアップ：右にはみ出して配置し、右からにゅっと */
.service__mockup {
	position: absolute;
	top: 9.5rem;
	left: calc(50% + 0.625 * var(--u));
	width: calc(65.44 * var(--u));
}

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

/* --- 制作会社様向けブロック --- */

.service-contact {
	position: relative;
	left: 50%;
	translate: -50% 0;
	width: calc(95.3125 * var(--u));
	min-height: calc(40.4375 * var(--u)); /* 中身が増えたら図形ごと伸びる（はみ出さない） */
	padding: calc(7.25 * var(--u)) 0 calc(8 * var(--u)) calc(38.375 * var(--u));
	margin-top: 5.4rem;
	color: var(--color-white);
}

.service-contact__blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--color-red);
}

.service-contact__blob--sp {
	display: none;
}

.service-contact__walk {
	position: absolute;
	top: calc(-0.875 * var(--u));
	left: calc(14.19 * var(--u));
	width: calc(16.3125 * var(--u));
}

.service-contact__walk img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 50% 100%;
}

.service-contact__body {
	position: relative; /* 図形（絶対配置）の手前に出す */
	width: calc(46 * var(--u));
}

.service-contact__label {
	margin: 0 0 0.7rem;
	font-size: max(0.6875rem, calc(0.8125 * var(--u)));
	line-height: 1.7;
	letter-spacing: 0.1em;
}

.service-contact__title {
	margin: 0 0 var(--gap-button);
	font-size: max(1.25rem, calc(2 * var(--u)));
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.service-contact__body p:not(.service-contact__label) {
	margin: 0;
	font-size: max(0.875rem, var(--u));
	line-height: 1.8;
}

.service-contact__button {
	--btn: var(--color-white);
	--btn-text: var(--color-red);
	min-width: 12.8rem;
	min-height: 4.45rem;
	margin-top: var(--gap-button);
	font-size: 1.625rem;
}

/* --- 登場アニメーション：SERVICE は見出しと同じ弾み、モックアップは右から、
       子どもは右斜め下から歩いてくるように --- */

.is-js .service__title span,
.is-js .works__title span,
.is-js .page-head__title span,
.is-js .contact__title span {
	opacity: 0;
}

.is-js .service__title.is-inview span,
.is-js .works__title.is-inview span,
.is-js .page-head__title.is-inview span,
.is-js .contact__title.is-inview span {
	animation: fv-bounce 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.is-js .service__mockup img {
	transform: translateX(100%);
}

.is-js .service__mockup.is-inview img {
	animation: service-slide 1.2s var(--ease-out) both;
}

.is-js .service-contact__walk img {
	opacity: 0;
}

.is-js .service-contact.is-inview .service-contact__walk img {
	animation: service-walk 1.8s ease-out both;
}

@keyframes service-slide {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@keyframes service-walk {
	0% {
		opacity: 0;
		transform: translate(40%, 25%) rotate(4deg);
	}

	15% {
		opacity: 1;
	}

	40% {
		transform: translate(22%, 13%) rotate(-3deg);
	}

	62% {
		transform: translate(10%, 6%) rotate(2.5deg);
	}

	82% {
		transform: translate(3%, 2%) rotate(-1.5deg);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-js .service__title span,
	.is-js .works__title span,
	.is-js .page-head__title span,
	.is-js .contact__title span,
	.is-js .service__mockup img,
	.is-js .service-contact__walk img {
		animation-delay: 0s !important;
	}
}

@media (max-width: 768px) {
	.br-sp {
		display: inline;
	}

	.service {
		padding: 3.6rem var(--side) 5.4rem;
	}

	.service__main {
		display: flex;
		flex-direction: column;
	}

	.service__title,
	.works__title,
	.contact__title {
		font-size: clamp(2.8rem, 12vw, 4.5rem); /* 375px 幅で 45px */
	}

	.service__mockup {
		position: static;
		order: 1;
		width: 90vw;
		margin: 1.5rem 0 0 calc(28vw - var(--side));
	}

	.service__text {
		width: auto;
		margin-top: 1.4rem;
		order: 2;
	}

	.service__subtitle {
		font-size: 1.375rem;
	}

	.service__button {
		min-width: 13.5rem;
		min-height: 3.5rem;
		margin-inline: auto;
		font-size: 1.125rem;
	}

	.service-contact {
		left: auto;
		translate: none;
		width: auto;
		min-height: 0;
		margin: 3.75rem calc(-1 * var(--side)) 0;
		padding: 3.7rem var(--side) 7.4rem;
	}

	.service-contact__blob--pc {
		display: none;
	}

	.service-contact__blob--sp {
		display: block;
	}

	.service-contact__walk {
		top: auto;
		bottom: -4.85rem; /* 到達点を 20px 下げた */
		left: 3.1rem;
		width: 6.5rem;
	}

	.service-contact__body {
		position: relative; /* 図形（絶対配置）の手前に出す */
		inset: auto;
		width: auto;
	}

	.service-contact__label {
		font-size: 0.6875rem;
	}

	.service-contact__title {
		font-size: 1.375rem;
		line-height: 1.55;
	}

	.service-contact__body p:not(.service-contact__label) {
		font-size: 1rem;
	}

	.service-contact__button {
		min-width: 11.1rem;
		min-height: 3.6rem;
		margin: var(--gap-button) 0 0 auto;
		font-size: 1.25rem;
	}
}

@media (max-width: 768px) {
	:root {
		--gap-title: 2.125rem;
		--gap-heading: 1.875rem; /* SP 30px */
		--gap-button: 1.875rem;
	}
}

/* ==========================================================================
   TOP：WORKS（最新6件）
   ========================================================================== */

.works {
	--grid: rgba(15, 91, 212, 0.25);
	position: relative;
	padding: 7.2rem 2rem 8.3rem;
	border-top: 1px solid var(--color-blue);
}

/* 方眼の背景（見出しの途中から下へ全幅） */
.works::before {
	content: "";
	position: absolute;
	inset: 10rem 0 0;
	background:
		linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
		linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem;
}

.works__inner {
	position: relative;
	max-width: var(--content-width);
	margin-inline: auto;
}

.works__head {
	display: flex;
	align-items: flex-end;
	gap: 4rem;
	margin-bottom: var(--gap-heading);
}

.works__title {
	margin: 0;
}

.works__note {
	margin: 0 0 0.6rem;
	padding-left: 1em; /* 折り返したとき、2行目以降が※の下に回り込まず、文字の位置にそろう */
	text-indent: -1em;
	font-size: 0.875rem;
	line-height: 1.8;
}

.works__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.75rem;
	margin: 0;
	padding: 0 0.625rem;
	list-style: none;
}

.works-card {
	display: block;
	text-decoration: none;
}

.works-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1120 / 658; /* いま投稿している画像の比率。違う比率の画像は cover で切り取って、全カードの大きさをそろえる */
	box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3); /* x0 y4 ぼかし10 #000 30% */
}

.works-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

/* ホバーで画像だけを枠の中で拡大 */
.works-card:hover .works-card__img {
	transform: scale(1.08);
}

.works-card__category {
	display: block;
	width: fit-content;
	margin-top: 1.8rem;
	padding: calc(0.1rem + 1px) 0.9rem 0.1rem; /* 上だけ 1px 広く */
	border: 1px solid var(--color-red);
	border-radius: 999px;
	color: var(--color-red);
	font-size: 0.875rem;
	line-height: 1.6;
}

.works-card__title {
	margin: 0.8rem 0 0;
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.works__button {
	margin: var(--gap-button) auto 0;
}

@media (max-width: 768px) {
	.works {
		padding: 3.6rem var(--side) 4.4rem;
	}

	.works::before {
		top: 11rem;
	}

	.works__head {
		display: block;
	}

	.works__note {
		margin: 0.6rem 0 0;
		font-size: 0.75rem;
	}

	.works__list {
		grid-template-columns: 1fr;
		gap: 1.9rem;
		padding: 0 0.5rem;
	}

	.works-card__category {
		margin-top: 1.1rem;
	}

	.works-card__title {
		margin-top: 0.35rem;
		font-size: 1.125rem;
	}
}

/* 縦長のタブレット（769px 以上で縦向き）は FV を 100vh にしない。
   画面が縦に長すぎて、ヘッダーと FV の要素の間が空きすぎるため、デザイン（1600×780）の比率の高さにする。 */
@media (min-width: 769px) and (orientation: portrait) {
	.fv {
		--u: min(1vw, 1rem);
		height: calc(48.75 * var(--u));
	}
}

@media (max-width: 768px) {
	:root {
		--side: max(0.9375rem, calc(0.9375rem + (100vw - 23.4375rem) * 0.1)); /* 375px で 15px、幅が広がるほど広がる（500px で約 27px、768px で約 54px） */
	}
}

/* ==========================================================================
   フッター（全ページ共通）：CONTACT フォーム + 下部のイラスト
   ========================================================================== */

.site-footer {
	--u: min(1vw, 1rem);
	position: relative;
	overflow-x: clip;
	background-color: var(--color-blue);
	color: var(--color-white);
}

.contact {
	padding: 7.2rem var(--side) 0;
	text-align: center;
}

.contact__lead {
	margin: var(--gap-heading) 0 0;
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: 0;
}

.contact__form {
	width: min(50rem, 100%);
	margin: var(--gap-title) auto 0;
	text-align: left;
}

/* --- フォーム（Contact Form 7） --- */

.contact-field {
	display: block;
	margin-bottom: 1.45rem;
}

.contact-field__label {
	display: block;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.contact__form .wpcf7-form-control-wrap {
	display: block;
}

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form textarea {
	display: block;
	width: 100%;
	min-height: 3.6rem;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--color-white);
	border-radius: 0;
	background: none;
	color: var(--color-white);
	font: inherit;
	outline: 0;
	appearance: none;
}

.contact__form textarea {
	height: 10rem; /* 入力欄の高さ 160px（行数ではなく CSS で決める） */
	min-height: 10rem;
	resize: vertical;
}

.contact__form input:focus,
.contact__form textarea:focus {
	box-shadow: 0 1px 0 var(--color-white);
}

/* ブラウザの自動入力で背景が白くならないように */
.contact__form input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-white);
	box-shadow: 0 0 0 100rem var(--color-blue) inset;
	caret-color: var(--color-white);
}

/* 入力エラー：赤字で表示 */
.contact__form .wpcf7-not-valid {
	border-bottom-color: var(--color-error);
}

.contact__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	color: var(--color-error);
	font-size: 0.875rem;
	font-weight: 700;
}

.contact__form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.contact__form .invalid .wpcf7-response-output,
.contact__form .failed .wpcf7-response-output {
	color: var(--color-error);
	font-weight: 700;
}

.contact-submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(var(--gap-button) + 1.875rem); /* 送信ボタンの上は他のボタンより広め（PC 80px） */
}

.contact-submit .button {
	--btn: var(--color-white);
	--btn-text: var(--color-blue);
	min-width: 14rem;
	min-height: 4.3rem;
	font-family: inherit;
	font-size: 1.375rem;
	cursor: pointer;
	appearance: none;
}

.contact__form .submitting .button {
	opacity: 0.6;
	pointer-events: none;
}

/* ロボット対策（Cloudflare Turnstile）のウィジェットは送信ボタンの上に中央寄せ */
.contact__form .cf-turnstile {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

/* --- 下部のイラスト（デザイン幅 1600px。--u = 16px） --- */

.site-footer__art {
	position: relative;
	height: calc(25.5 * var(--u));
	margin-top: 4rem;
}

.site-footer__blob {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(73.5 * var(--u));
	height: calc(18 * var(--u));
	overflow: visible;
	fill: var(--color-red);
}

.site-footer__blob--sp {
	display: none;
}

.site-footer__girl {
	position: absolute;
	bottom: 0;
	left: calc(-6.75 * var(--u));
	width: calc(30.2 * var(--u));
}

.site-footer__girl img {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__brand {
	position: absolute;
	bottom: calc(2.7 * var(--u));
	left: calc(24.5 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}

.site-footer__sns {
	display: block;
	width: 1.875rem;
	transition: opacity 0.3s;
}

.site-footer__sns:hover {
	opacity: 0.7;
}

.site-footer__sns svg {
	display: block;
	width: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

.site-footer__sns .site-footer__sns-dot {
	fill: currentColor;
	stroke: none;
}

.site-footer__name {
	margin: 0;
	font-family: var(--font-logo);
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

.site-footer__copy {
	margin-top: 0.4rem;
	font-family: var(--font-logo);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

/* 女の子は左からにゅっと */
.is-js .site-footer__girl img {
	transform: translateX(-110%);
}

.is-js .site-footer__art.is-inview .site-footer__girl img {
	animation: footer-girl 1s var(--ease-out) both;
}

@keyframes footer-girl {
	from {
		transform: translateX(-110%);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-js .site-footer__girl img {
		animation-delay: 0s !important;
	}
}

/* 広い画面ではデザインどおり、フォームの下端に重ねて配置 */
@media (min-width: 1280px) {
	.contact {
		padding-bottom: 20rem;
	}

	.site-footer__art {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.site-footer {
		--u: min(1vw, 0.4rem);
	}

	.contact {
		padding-top: 3.6rem;
	}

	.contact__lead {
		text-align: left;
	}

	.contact__form {
		width: auto;
		padding-inline: 1.1rem;
	}

	.contact-submit {
		margin-top: calc(var(--gap-button) + 1.25rem); /* SP 50px */
	}

	.contact-submit .button {
		min-width: 13.5rem;
		min-height: 3.5rem;
		font-size: 1.125rem;
	}

	.site-footer__art {
		height: calc(54 * var(--u));
		margin-top: 1.7rem;
	}

	.site-footer__blob--pc {
		display: none;
	}

	.site-footer__blob--sp {
		display: block;
		width: calc(91.2 * var(--u));
		height: calc(44.8 * var(--u));
	}

	.site-footer__girl {
		left: calc(-23 * var(--u));
		width: calc(64 * var(--u));
	}

	.site-footer__brand {
		bottom: calc(5.6 * var(--u));
		left: calc(33.5 * var(--u));
		gap: 0.8rem;
	}

	.site-footer__sns {
		width: 1.25rem;
	}

	.site-footer__name {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   下層ページ共通：見出し（赤い図形が重なる）・ページネーション
   ========================================================================== */

.page-head {
	position: relative;
	padding: 7.2rem var(--side) 5.6rem;
	border-bottom: 1px solid var(--color-blue);
}

.page-head__title {
	position: relative;
	z-index: 1;
	max-width: var(--content-width);
	margin-inline: auto;
}

/* 赤い図形（参考画像の形 262×186）は、文字の後ろ・やや右上にずらして重ねる */
.page-head__blob {
	position: absolute;
	top: 4.2rem;
	left: calc(max(var(--side), 50% - 37.5rem) + 8.6rem);
	width: 14.6rem;
	fill: var(--color-red);
	opacity: 0.95;
}

.sub__inner {
	max-width: var(--content-width);
	margin-inline: auto;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 4.4rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	font-family: var(--font-en);
	font-size: 1.25rem;
	line-height: 1.6;
	text-decoration: none;
}

/* 現在のページ：数字の下に下線 */
.pagination .page-numbers.current {
	border-bottom: 2px solid currentColor;
	font-weight: 700;
}

.pagination a.page-numbers:not(.prev):not(.next):hover {
	opacity: 0.6;
}

.pagination .dots {
	letter-spacing: 0.1em;
}

/* 前へ・次へ：青い丸に白い < > */
.pagination .prev,
.pagination .next {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--color-blue);
	color: var(--color-white);
	transition: opacity 0.3s;
}

.pagination .prev:hover,
.pagination .next:hover {
	opacity: 0.8;
}

/* ==========================================================================
   WORKS 一覧・投稿
   ========================================================================== */

.works--archive {
	padding-top: 4.4rem;
	border-top: 0;
}

.works--archive::before {
	inset: 0;
}

.works--archive .works__note {
	margin-bottom: var(--gap-title);
}

.works__empty {
	text-align: center;
}

.work {
	padding: 4.4rem var(--side) 8rem;
}

.work__inner {
	max-width: var(--content-width);
	margin-inline: auto;
}

.work__title {
	margin: 0.7rem 0 0;
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1.5;
	letter-spacing: 0.1em;
}

/* 画像の見せ方：スクロールキャプチャ（枠の中でスクロール）／画像貼り付け。幅 900px・影つき */
.work__frame,
.work__image {
	width: min(56.25rem, 100%);
	margin: var(--gap-heading) auto 0;
	box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
}

/* 表の下のデザイン画像（貼り付け画像）：表との間隔は大見出しの下の倍（PC 160px / SP 60px） */
.work__image--design {
	margin-top: calc(var(--gap-heading) * 2);
}

/* 枠は PC 画面のイメージ（1772 × 990 の比率）。スマホでも同じ縦横比のまま縮む。
   中の縦長画像を、ユーザーがスクロールして見る */
.work__frame {
	aspect-ratio: 1772 / 990;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--color-white);
	scrollbar-width: thin;
	scrollbar-color: var(--color-blue) transparent;
}

.work__frame:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
}

/* スクロールキャプチャ：枠の右横に、縦書きの「Scroll down」と矢印 */
.work__scroll {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(56.25rem, 100%);
	margin: calc(var(--gap-heading) * 2) auto 0; /* 表との間隔：PC 160px / SP 60px */
}

.work__scroll .work__frame {
	width: 100%;
	margin: 0;
}

.work__hint {
	position: absolute;
	top: 0;
	left: calc(100% + 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

.work__hint span:first-child {
	writing-mode: vertical-rl;
}
.work__hint-arrow {
	font-size: 1.5rem;
	animation: work-arrow 1.8s ease-in-out infinite;
}

/* 矢印だけ、ゆっくり上下にふわふわ動く */
@keyframes work-arrow {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(0.6rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.work__hint-arrow {
		animation: none;
	}
}

.work__frame img,
.work__image img {
	display: block;
	width: 100%;
	height: auto;
}

.work__table {
	margin: var(--gap-heading) 0 0;
	border-top: 0;
}

.work__row {
	display: flex;
	align-items: center;
	min-height: 6.4rem;
	padding-inline: 3.1rem; /* 左右同じ余白 */
	border-bottom: 1px solid var(--color-blue);
}

.work__row dt {
	flex: none;
	width: 9rem; /* ラベルと値の間隔を詰める（最長の「Creation」に余裕を持たせた幅） */
	font-family: var(--font-en);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.work__row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* URL のリンクは下線なし（キーボードで選んだときだけ、下線で示す） */
.work__row a {
	text-decoration: none;
}

.work__row a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.work__content {
	margin-top: 3rem;
	line-height: 1.9;
}

.work__back {
	--btn: var(--color-blue);
	min-width: 12.5rem;
	min-height: 4.3rem;
	margin: var(--gap-heading) auto 0;
	font-size: 1.25rem;
}

@media (max-width: 768px) {
	.page-head {
		padding: 2.5rem var(--side) 2.2rem;
	}

	.page-head__blob {
		top: 0.7rem;
		left: calc(var(--side) + 6.3rem);
		width: 8.4rem;
	}

	.pagination .nav-links {
		gap: 0.9rem;
		margin-top: 2.5rem;
	}

	.work {
		padding-top: 2.7rem;
		padding-bottom: 3.75rem; /* ボタンと下の CONTACT の間：60px */
	}

	/* 画像とボタンの間：40px */
	.work__back {
		margin-top: 2.5rem;
	}

	.work__row {
		flex-wrap: wrap;
		min-height: 5.3rem;
		padding: 1rem 1.2rem; /* 左右同じ余白 */
	}

	.work__row dt {
		width: 6.25rem;
	}

	.work__row dd {
		flex: 1;
	}
}

/* ==========================================================================
   ABOUT：SKILLS の見出し（70px・左からスライドイン）
   ========================================================================== */

.skills__title {
	margin: 0;
	font-size: clamp(2.75rem, 4.375vw, 4.375rem); /* 70px */
	line-height: 1.1;
	letter-spacing: 0.1em;
}

.skills__title span {
	display: inline-block;
}

.is-js .skills__title span {
	opacity: 0;
}

/* ABOUT（h1）と同じタイミングで、左からスライドイン */
.is-js .skills__title.is-inview span {
	animation: skills-slide 0.9s var(--ease-out) 0.25s both; /* ABOUT（h1）より少しだけ遅れて */
}

@keyframes skills-slide {
	from {
		opacity: 0;
		transform: translateX(-4rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   ABOUT（デザイン幅 1600px / 375px の寸法に合わせる。--u は 1600px 時 16px）
   ========================================================================== */

.skills {
	padding: 6.5rem var(--side) 4.5rem;
}

.skills__list {
	margin: var(--gap-heading) 0 0;
	padding: 0;
	border-top: 1px solid var(--color-blue);
	list-style: none;
}

/* 番号 / 見出し / 説明：16px・18px・行間 190% */
.skills__item {
	display: grid;
	grid-template-columns: 4.5rem 14.3rem 1fr;
	align-items: center;
	min-height: 8.6rem;
	padding: 1.2rem 3.1rem; /* 左右の余白は同じ。上下は少し狭く */
	border-bottom: 1px solid var(--color-blue);
}

.skills__no {
	font-size: 1rem;
	line-height: 1.9;
}

.skills__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.1em;
}

.skills__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
}

/* 使用ツール・言語：「デザイン　　：Figma」のように、「：」を説明側に寄せて縦にそろえる */
.skills__tools {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.skills__tools dt {
	min-width: 7.2rem; /* 最も長い「CMS・Web制作」に合わせる。文字は詰めたまま、右に余白を作る */
	padding-right: 0;
}

.skills__tools dt::after {
	content: "";
}

.skills__tools dd {
	margin: 0;
}

.skills__tools dd::before {
	content: "：";
}

.facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.9rem;
	margin: var(--gap-heading) 0 0; /* 表とカードの間隔：PC 80px / SP 30px */
}

.facts__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 8.6rem;
	padding: 0 1.4rem;
	border-radius: 2.5rem; /* 40px */
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: 1.125rem; /* 18px */
}

.facts__item:last-child {
	grid-column: 1 / -1;
}

.facts__item::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-right: 0.8rem;
	border-radius: 50%;
	background-color: var(--color-white);
}

.facts dt {
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.facts dd {
	margin: 0;
	letter-spacing: 0.1em;
}

/* --- プロフィール（ノート風のカード） --- */

.profile {
	padding: 1.5rem var(--side) 9rem;
}

.profile__inner {
	--rule: 2.5rem; /* 罫線の間隔 40px */
	position: relative;
	max-width: var(--content-width);
	margin-inline: auto;
}

/* 左は画面の端まで伸びるカード。上の余白 85px / 下の余白 85px（デザインどおり同じ大きさ） */
.profile__card {
	position: relative;
	margin-left: calc(50% - 50vw);
	padding: 5.3rem 0 5.3rem calc(50vw - 50%);
	border: 1px solid var(--color-blue);
	border-left: 0;
	border-radius: 0 2.5rem 2.5rem 0;
	background-color: var(--color-white);
}

/* 罫線：カードの上の余白の内側から、下の余白の手前まで（余白部分には引かない） */
.profile__card::before {
	content: "";
	position: absolute;
	inset: 5.3rem 0 5.3rem;
	background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(15, 91, 212, 0.2) calc(var(--rule) - 1px) var(--rule));
	pointer-events: none;
}

.profile__card > * {
	position: relative;
}

.profile__name {
	margin: 0;
	font-size: 2.1rem;
	line-height: calc(var(--rule) * 2);
	letter-spacing: 0.1em;
}

.profile__kana {
	margin: -0.9rem 0 1.875rem; /* 名前に近づけ（-14px）、本文との間は広げる（30px） */
	font-size: 1rem;
	line-height: 1.75rem; /* 名前の下の余白 28px を、この行が埋める */
	letter-spacing: 0.1em;
}

.profile__text p {
	margin: 0;
	line-height: 2rem; /* 本文の行の高さ 32px（罫線の間隔 40px とは別） */
}

.profile__photo {
	position: absolute;
	top: 6.7rem;
	right: 1.4rem;
	width: 20rem;
}

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

/* CAREER：赤い図形（写真の下・カードの右下に重なる） */
/* 赤い図形と写真は、ノートに貼った付箋のイメージ。図形はノートの中（下寄り）に置き、右だけ少しはみ出す */
.career {
	position: absolute;
	right: -2.6rem;
	bottom: 2.6rem;
	width: 31rem;
	min-height: 21.5rem;
	padding: 4.6rem 2.4rem 4.6rem 4.4rem; /* 文字は図形の左寄りに置く。上下の余白は同じ程度に詰める */
	color: var(--color-white);
}

.career__blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--color-red);
	transform: rotate(180deg); /* 上下左右を反転（デザインの向きに合わせる） */
}

.career__title {
	position: relative;
	margin: 0 0 1.4rem;
	font-size: 1.25rem;
	letter-spacing: 0.1em;
}

.career__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.career__list li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.9rem;
	font-size: 0.9375rem;
}

.career__list li::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background-color: var(--color-white);
}

.career__list time {
	flex: none;
	min-width: 4.4em; /* 一番長い「2024.10」に合わせ、説明の左端をそろえる */
}

@media (max-width: 768px) {
	.skills {
		padding: 3.7rem var(--side) 2.4rem;
	}

	.skills__item {
		display: block;
		min-height: 0;
		padding: 1.2rem 1rem; /* 左右の余白は同じ（SP） */
	}

	.skills__no {
		margin-right: 0.8rem;
	}

	.skills__name {
		display: inline;
	}

	.skills__text {
		margin-top: 0.25rem;
	}

	/* スマホは「デザイン：」で改行して、説明を次の行に出す */
	.skills__tools {
		display: block;
	}

	.skills__tools dt {
		display: inline;
		min-width: 0;
		text-align: left;
		text-align-last: auto;
		margin-right: 0;
	}

	.skills__tools dd {
		display: inline;
	}

	.skills__tools dd::before {
		content: none;
	}

	.skills__tools dt::after {
		content: "：";
	}

	.skills__tools dd::after {
		content: "";
		display: block;
	}

	.facts {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		margin-top: 1.875rem;
	}

	.facts__item {
		display: block;
		min-height: 6.6rem;
		padding: 1rem 1.6rem 1rem 3.7rem;
		border-radius: 1.25rem; /* 20px */
	}

	/* ●はカードの上下中央に置く */
	.facts__item::before {
		position: absolute;
		top: 50%;
		left: 1.6rem;
		margin: -0.5rem 0 0;
	}

	.facts dt,
	.facts dd {
		display: block;
		padding-left: 0;
	}

	.facts dt {
		margin-bottom: 0.3rem;
	}

	.profile__inner {
		--rule: 1.8rem; /* デザインの罫線の間隔（約 28px）に合わせる */
	}

	.profile__card {
		padding: 3rem var(--side) 3.2rem calc(var(--side) + 0.1rem);
		border-radius: 0 2rem 2rem 0;
	}

	.profile__card::before {
		inset: 3rem 0 3.2rem;
	}

	.profile__name {
		font-size: 1.75rem;
	}

	.profile__kana {
		margin: -0.7rem 0 1.625rem; /* SP：名前に近づけ（-11px）、本文との間 26px */
		font-size: 0.875rem;
		line-height: 1.25rem; /* SP は名前の下の余白 20px */
	}
}

/* ==========================================================================
   プロフィール：PC で画面幅が狭いときは、スマホのようにノートを縦に伸ばして
   写真と CAREER を下に配置する（本文が赤い図形の下に隠れないように）
   ========================================================================== */

@media (max-width: 1279px) {
	.profile {
		padding-bottom: 3rem;
	}

	/* カードは左端から、右は余白を残す */
	.profile__card {
		margin-left: calc(-1 * var(--side));
		margin-right: 0;
		padding: 4rem var(--side) 4.4rem calc(var(--side) + 0.1rem);
		border-radius: 0 2.5rem 2.5rem 0;
	}

	.profile__card::before {
		inset: 4rem 0 4.4rem;
	}

	.profile__photo {
		position: relative;
		z-index: 1;
		top: auto;
		right: auto;
		width: 16rem;
		margin: -3.4rem 0 0 auto; /* ノートの下端に、写真の上側が重なる */
	}

	/* 図形は PC と同じ縦横比のまま（横に引き伸ばさない）。右端は画面の端まで */
	.career {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(100% + var(--side), 31rem); /* PC と同じ大きさ・縦横比 */
		min-height: 21.5rem;
		margin: -2.4rem calc(-1 * var(--side)) 0 auto;
		padding: 4.6rem 2.4rem 4.6rem 4.4rem;
	}
}

/* ノイズの粗さ：FV と同じ。PC は粗め、スマホは図形が縮むので細かい方 */
.career__blob path,
.page-head__blob path {
	filter: url(#noise);
}

@media (max-width: 768px) {
	.career__blob path,
	.page-head__blob path {
		filter: url(#noise-fine);
	}
}

/* スマホ（デザインどおり）：写真はノートの下の右側に入り、CAREER の図形はノートの下端に重なる。
   上の 1279px 向けの指定より後ろに置いて上書きする。
   図形の幅（--cw）に合わせて、文字の位置と大きさを変えるので、画面幅が変わっても図形から文字がはみ出さない */
@media (max-width: 768px) {
	.profile__card {
		padding-bottom: 13.2rem; /* 写真の分の余白 */
	}

	.profile__photo {
		width: 10.4rem;
		margin: -11.7rem 0.75rem 0 auto; /* 写真の下端が、ノートの下端の 54px 手前に来る */
	}

	.career {
		--cw: min(100vw - 2 * var(--side), 38rem); /* 図形の幅 */
		width: var(--cw);
		min-height: 0;
		aspect-ratio: 576 / 470;
		margin: -1.6rem 0 0 0.2rem; /* 図形の上側が、ノートの下端に約 80px 重なる */
		padding: calc(var(--cw) * 0.18) 0 0 calc(var(--cw) * 0.09); /* 文字を左へ寄せ、右の輪郭からはみ出さない位置 */
		font-size: clamp(0.8125rem, var(--cw) * 0.0377, 1rem); /* 375px 幅で 13px */
	}

	.career__title {
		margin-bottom: 0.75em;
		font-size: 1.23em;
	}

	.career__list li {
		gap: 0.3em;
		margin-bottom: 0.65em;
		font-size: 1em;
	}

	.career__list li::before {
		width: 0.46em;
		height: 0.46em;
		margin-right: 0.1em;
	}
}

/* PC：ノートを下に伸ばして、CAREER の図形と写真がノートの上に乗る形にする（付箋のイメージ）。
   ノートの幅は少し狭め、写真はノートの右端からはみ出させる。
   本文は 2 つのブロック：1 つ目は広く、2 つ目は図形の手前で折り返す */
@media (min-width: 1280px) {
	.profile__card {
		min-height: 51.5rem;
		margin-right: 8rem;
	}

	.profile__block:first-child {
		max-width: 46rem;
	}

	.profile__block:last-child {
		max-width: 38rem;
	}
}

/* スマホ・タブレット：右横に置く場所がないので、枠の上に横書きで置く */
@media (max-width: 1279px) {
	.work__hint {
		position: static;
		order: -1;
		flex-direction: row;
		justify-content: center;
		gap: 0.8rem;
		margin-bottom: 1rem;
	}

	.work__hint span:first-child {
		writing-mode: horizontal-tb;
	}
}

/* 表：最初の行の文字の上の余白を、最後の行の文字の下の余白より 2px 広くする
   （行は上下中央なので、上に足した分だけ、上下の差が開く。下の境界線の 1px を含めて、線の手前で 2px 差にしている） */
.work__row:first-child {
	padding-top: 0.4rem;
}

@media (max-width: 768px) {
	.work__row:first-child {
		padding-top: calc(1rem + 6.4px);
	}
}

/* ==========================================================================
   404 ページ
   ========================================================================== */

.notfound {
	padding: 7.5rem var(--side) 8rem;
	text-align: center;
}

.notfound__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.75vw, 1.75rem);
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.notfound__button {
	--btn: var(--color-blue);
	min-width: 12.5rem;
	min-height: 4.3rem;
	margin: var(--gap-heading) auto 0;
	font-size: 1.25rem;
}

@media (max-width: 768px) {
	.notfound {
		padding-top: 3.75rem;
		padding-bottom: 3.75rem;
	}
}

/* ==========================================================================
   ABOUT：写真と CAREER は「シールをペタッと貼る」動き
   少し大きく・傾いて浮いた状態から、縮みながらノートに貼り付き、わずかに弾んで落ち着く。
   影も、浮いている間は大きく、貼り付くと薄くなる。写真 → CAREER の順に貼る。
   ========================================================================== */

.is-js .profile__photo,
.is-js .career {
	opacity: 0;
	transform-origin: 50% 50%;
}

.is-js .profile__photo.is-inview,
.is-js .career.is-inview {
	animation: sticker-stick 0.55s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

/* CAREER は、写真のあとに貼る */
.is-js .career.is-inview {
	animation-delay: 0.2s; /* 写真のあとに貼る */
	--sticker-tilt: 2deg;
	--sticker-scale: 1.08; /* 写真（1.2）より小さな動きにする */
}

.is-js .profile__photo.is-inview {
	--sticker-tilt: -3deg;
}

@keyframes sticker-stick {
	0% {
		opacity: 0;
		transform: scale(var(--sticker-scale, 1.2)) rotate(var(--sticker-tilt, -3deg));
		filter: drop-shadow(0 0.7rem 0.7rem rgba(0, 0, 0, 0.25));
	}

	15% {
		opacity: 1;
	}

	62% {
		opacity: 1;
		transform: scale(0.98) rotate(0deg); /* 貼り付いた瞬間、少し沈み込む */
		filter: drop-shadow(0 0.05rem 0.1rem rgba(0, 0, 0, 0.25));
	}

	82% {
		transform: scale(1.008) rotate(0deg);
	}

	100% {
		opacity: 1;
		transform: none;
		filter: drop-shadow(0 0.1rem 0.15rem rgba(0, 0, 0, 0.18));
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-js .profile__photo,
	.is-js .career {
		opacity: 1;
	}

	.is-js .profile__photo.is-inview,
	.is-js .career.is-inview {
		animation: none;
	}
}

/* ==========================================================================
   ABOUT：屋号などのカードは下からふわっと（順番に）、ノートは左からスライドして出てくる
   ========================================================================== */

.is-js .facts__item {
	opacity: 0;
}

.is-js .facts.is-inview .facts__item {
	animation: about-fade-up 0.8s var(--ease-out) both;
	animation-delay: calc(var(--n, 0) * 0.12s);
}

@keyframes about-fade-up {
	from {
		opacity: 0;
		transform: translateY(1.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ノートは最初から表示。中のテキスト（名前 → 本文 2 ブロック）が、左から順に出てくる */
.is-js .profile__name,
.is-js .profile__kana,
.is-js .profile__block {
	opacity: 0;
}

.is-js .profile__card.is-inview .profile__name,
.is-js .profile__card.is-inview .profile__kana,
.is-js .profile__card.is-inview .profile__block {
	animation: note-text-slide 0.9s var(--ease-out) both;
}

.is-js .profile__card.is-inview .profile__block:nth-child(1) {
	animation-delay: 0.15s;
}

.is-js .profile__card.is-inview .profile__block:nth-child(2) {
	animation-delay: 0.3s;
}

@keyframes note-text-slide {
	from {
		opacity: 0;
		transform: translateX(-3rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-js .facts__item,
	.is-js .profile__name,
	.is-js .profile__kana,
	.is-js .profile__block {
		opacity: 1;
	}

	.is-js .facts.is-inview .facts__item,
	.is-js .profile__card.is-inview .profile__name,
	.is-js .profile__card.is-inview .profile__kana,
	.is-js .profile__card.is-inview .profile__block {
		animation: none;
	}
}

/* ==========================================================================
   WORKS のカード（TOP・WORKS 一覧）：画面に入ったら、下からふわっと
   （2 列のとき、右の列を少し遅らせる。スマホは 1 列なので遅れなし）
   ========================================================================== */

.is-js .works__list > li {
	opacity: 0;
}

.is-js .works__list > li.is-inview {
	animation: about-fade-up 0.9s var(--ease-out) both;
	animation-delay: calc(var(--col, 0) * 0.15s);
}

@media (max-width: 768px) {
	.is-js .works__list > li.is-inview {
		animation-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-js .works__list > li {
		opacity: 1;
	}

	.is-js .works__list > li.is-inview {
		animation: none;
	}
}

/* 実績の個別ページ：SP のタイトルは、一覧のカードのタイトルと同じ大きさ */
@media (max-width: 768px) {
	.work__title {
		font-size: 1.125rem;
		line-height: 1.5;
	}
}