@charset "utf-8";
/*
Theme Name: nozominishida
Version: 1.0
*/

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

html {
	scroll-behavior: smooth;
}

body .pc {
	display: none;
}

@media screen and (min-width: 1024px) {
	body .sp {
		display: none;
	}

	body .pc {
		display: block;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */

:root {
	--color-text: #262626;
	--color-peach: #fbc8a9;
	--color-peach-light: #fdeade;
	--color-peach-pale: #fff3ef;
	--color-white: #fff;
	--color-gray-light: #f9f9f9;
	--color-gray: #d8d8d8;
	--color-line: #c0c0c0;
	--color-caption: #5c5c5c;
	--color-flower-pink-strong: #ff0660;
	--color-flower-pink: #ec6b8d;
	--color-flower-mint: #75e5de;
	--color-flower-orange: #fd802c;
	--color-flower-green: #54a091;
	--color-flower-blue: #09a6f5;
	--color-flower-lime: #bfda65;
	--color-flower-lavender: #d2c2fb;
	--font-en: "DM Sans", "Noto Sans JP", sans-serif;
	--font-ja: "Noto Sans JP", "DM Sans", sans-serif;
	--inner-max: 1280px;
	--inner-gutter: 20px;
	--header-height: 72px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media screen and (min-width: 1024px) {
	:root {
		--inner-gutter: 40px;
		--header-height: 114px;
	}
}

body {
	font-family: var(--font-en);
	font-weight: 400;
	line-height: 1.5;
	font-size: 16px;
	color: var(--color-text);
	background-color: var(--color-white);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	/* 日本語を文節で折り返して、1文字だけ次の行に落ちるのを防ぐ */
	word-break: auto-phrase;
	line-break: strict;
}

img {
	width: 100%;
	height: auto;
}

a {
	color: inherit;
}

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

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

/* スクリーンリーダー用テキスト */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* SVGスプライト（画面には出さない） */
.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* 本文へスキップ */
.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 8px 16px;
	background-color: var(--color-white);
	border-radius: 4px;
	transform: translateY(-200%);
	transition: transform 0.3s;
}

.skip-link:focus {
	transform: translateY(0);
}

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

/* お花アイコン（色はmodifierで切り替え） */
.flower {
	display: block;
	flex-shrink: 0;
	fill: currentColor;
}

.flower--pink-strong {
	color: var(--color-flower-pink-strong);
}

.flower--pink {
	color: var(--color-flower-pink);
}

.flower--mint {
	color: var(--color-flower-mint);
}

.flower--orange {
	color: var(--color-flower-orange);
}

.flower--green {
	color: var(--color-flower-green);
}

.flower--blue {
	color: var(--color-flower-blue);
}

.flower--lime {
	color: var(--color-flower-lime);
}

.flower--lavender {
	color: var(--color-flower-lavender);
}

.flower--white {
	color: var(--color-white);
}

/* セクション共通 */
.sec {
	position: relative;
	padding-block: 80px;
}

.sec--peach {
	color: var(--color-white);
	background-color: var(--color-peach);
}

.sec__inner {
	max-width: var(--inner-max);
	padding-inline: var(--inner-gutter);
	margin-inline: auto;
}

.sec__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.3;
}

.sec__label--dark {
	color: var(--color-text);
}

.sec__label-icon {
	width: 18px;
	height: 18px;
}

.sec__heading {
	margin-top: 24px;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.sec__heading--wide {
	letter-spacing: 0.08em;
}

.sec__heading--dark {
	color: var(--color-text);
}

.sec__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 2;
}

@media screen and (min-width: 1024px) {
	.sec {
		padding-block: 200px;
	}

	.sec__label {
		gap: 12px;
		font-size: 24px;
	}

	.sec__label-icon {
		width: 22px;
		height: 21px;
	}

	.sec__heading {
		margin-top: 54px;
		font-size: 56px;
	}

	.sec__text {
		font-size: 18px;
		line-height: calc(48 / 18);
	}
}

/* タグ */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-list__item {
	padding: 5px 12px;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--color-text);
	border-radius: 5px;
}

.tag-list__item--link {
	padding: 0;
}

.tag-list__link {
	display: block;
	padding: 5px 12px;
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.3s, background-color 0.3s;
}

@media (hover: hover) {
	.tag-list__link:hover {
		color: var(--color-white);
		background-color: var(--color-text);
	}
}

@media screen and (min-width: 1024px) {
	.tag-list__item {
		padding: 5px 15px;
		font-size: 15px;
	}

	.tag-list__item--link {
		padding: 0;
	}

	.tag-list__link {
		padding: 5px 15px;
	}
}

/* スクロールで表示（JSで inview--ready → inview--visible を付与） */
.inview--ready {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 1s var(--ease-out) var(--inview-delay, 0s), transform 1s var(--ease-out) var(--inview-delay, 0s);
}

.inview--visible {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------
    オープニング
---------------------------------------------------- */

.page--loading {
	overflow: hidden;
}

.opening {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-white);
	background-color: var(--color-peach);
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
	/* JSが動かないときも4秒後には必ず消える */
	animation: opening-fallback 0.6s 4s forwards;
}

.opening--running {
	animation: none;
}

.opening--leave {
	clip-path: inset(0 0 100% 0);
}

.opening--done {
	display: none;
}

@keyframes opening-fallback {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.opening__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.opening__flowers {
	display: flex;
	gap: 12px;
}

.opening__flower {
	width: 40px;
	height: 40px;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	transition: opacity 0.5s var(--ease-out), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opening__flower-item:nth-child(2) .opening__flower { transition-delay: 0.12s; }
.opening__flower-item:nth-child(3) .opening__flower { transition-delay: 0.24s; }
.opening__flower-item:nth-child(4) .opening__flower { transition-delay: 0.36s; }
.opening__flower-item:nth-child(5) .opening__flower { transition-delay: 0.48s; }

.opening--running .opening__flower {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.opening__logo {
	font-size: 17px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s var(--ease-out) 0.7s, transform 0.8s var(--ease-out) 0.7s;
}

.opening--running .opening__logo {
	opacity: 1;
	transform: translateY(0);
}

.opening--leave .opening__inner {
	opacity: 0;
	transform: translateY(-24px);
	transition: opacity 0.5s, transform 0.8s var(--ease-out);
}

@media screen and (min-width: 1024px) {
	.opening__flowers {
		gap: 20px;
	}

	.opening__flower {
		width: 56px;
		height: 56px;
	}

	.opening__logo {
		font-size: 24px;
	}
}

/* セクション見出し：1文字ずつ下から出てくる（JSで文字を分けて split-heading--visible を付与） */
.split-heading__char {
	display: inline-block;
	transition:
		opacity 0.6s var(--ease-out) calc(var(--char-index, 0) * 60ms),
		transform 0.9s var(--ease-out) calc(var(--char-index, 0) * 60ms);
}

.split-heading--ready .split-heading__char {
	opacity: 0;
	transform: translateY(0.6em) rotate(8deg);
}

.split-heading--ready.split-heading--visible .split-heading__char {
	opacity: 1;
	transform: translateY(0) rotate(0deg);
}

/* ----------------------------------------------------
    header
---------------------------------------------------- */

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	color: var(--color-white);
	pointer-events: none;
}

.header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	transition: padding 0.4s;
}

.header__logo {
	font-size: 13px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.09em;
	pointer-events: auto;
	transition: color 0.4s, opacity 0.4s;
}

.header__logo-link {
	text-decoration: none;
}

.header__menu-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	color: var(--color-white);
	cursor: pointer;
	pointer-events: auto;
	transition: color 0.4s;
}

.header__menu-icon {
	display: block;
	width: 30px;
	height: 32px;
	fill: currentColor;
	transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) {
	.header__menu-button:hover .header__menu-icon {
		transform: rotate(72deg);
	}
}

.header__menu-button[aria-expanded="true"] .header__menu-icon {
	transform: rotate(135deg) scale(0.9);
}

.global-nav {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 96px 20px 40px;
	overflow-y: auto;
	background-color: var(--color-peach);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

/* ヘッダーはクリックを下に通す設定なので、開いたメニューだけ押せるように戻す */
.global-nav--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.global-nav__list {
	display: grid;
	gap: 20px;
}

.global-nav__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.global-nav--open .global-nav__item {
	opacity: 1;
	transform: translateY(0);
}

.global-nav--open .global-nav__item:nth-child(2) { transition-delay: 0.05s; }
.global-nav--open .global-nav__item:nth-child(3) { transition-delay: 0.1s; }
.global-nav--open .global-nav__item:nth-child(4) { transition-delay: 0.15s; }
.global-nav--open .global-nav__item:nth-child(5) { transition-delay: 0.2s; }
.global-nav--open .global-nav__item:nth-child(6) { transition-delay: 0.25s; }
.global-nav--open .global-nav__item:nth-child(7) { transition-delay: 0.3s; }

.global-nav__link {
	display: flex;
	align-items: baseline;
	gap: 16px;
	text-decoration: none;
}

.global-nav__en {
	font-size: 32px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	transition: letter-spacing 0.4s var(--ease-out);
}

.global-nav__ja {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

@media (hover: hover) {
	.global-nav__link:hover .global-nav__en {
		letter-spacing: 0.06em;
	}
}

@media screen and (min-width: 1024px) {
	.header__logo {
		font-size: 16px;
	}

	.header__inner {
		padding: 24px 32px;
	}

	.header__menu-button {
		width: 72px;
		height: 72px;
	}

	.header__menu-icon {
		width: 38px;
		height: 40px;
	}

	/* PCは2列（左列から縦に並べる） */
	.global-nav__list {
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		gap: 36px 120px;
	}

	.global-nav__en {
		font-size: 48px;
	}

	.global-nav__ja {
		font-size: 15px;
	}
}

/* ----------------------------------------------------
    sec01 メインビジュアル
---------------------------------------------------- */

/* 画面の高さに合わせる（中の要素は cqh / cqw で高さ・幅に追従） */
.mv {
	position: relative;
	height: max(560px, 100vh);
	height: max(560px, 100svh);
	overflow: hidden;
	background-color: var(--color-peach);
	container-type: size;
}

.mv__videos {
	--marquee-duration: 90s;
	position: absolute;
	inset: 0;
}

.mv__videos::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(251, 200, 169, 0.16);
}

.mv__video-list {
	height: 100%;
}

/* 動画は縦いっぱいに表示し、幅は動画の比率（450:801）から決める */
.mv__video-item {
	flex-shrink: 0;
	height: 100%;
	aspect-ratio: 450 / 801;
}

.mv__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 波とコピーを1枚のSVGにまとめ、どの画面幅でも文字が波の線にそうようにする */
.mv__art {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.mv__art-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* SPは中央が下がる波、PCはFigmaの波 */
.mv__art-svg--sp {
	aspect-ratio: 400 / 292;
	max-height: 58cqh;
}

.mv__art-svg--pc {
	display: none;
}

.mv__wave-shape {
	fill: var(--color-peach);
}

/* 文字を流すための線（画面には出さない） */
.mv__guide {
	fill: none;
}

.mv__copy-text {
	fill: var(--color-white);
	font-family: var(--font-en);
	font-weight: 700;
}

/* 文字サイズはSVGの座標で指定するので、画面幅に合わせて拡大縮小される */
.mv__copy-text--main {
	font-size: 72px;
	letter-spacing: 9.2px;
}

.mv__copy-text--sub {
	font-size: 24px;
	letter-spacing: 5.1px;
}

.mv__copy-text--main.mv__copy-text--compact {
	font-size: 28px;
	letter-spacing: 3.5px;
}

.mv__copy-text--sub.mv__copy-text--compact {
	font-size: 13px;
	letter-spacing: 3.9px;
}

.mv__flowers {
	position: absolute;
	bottom: min(4cqw, 5cqh);
	left: 20px;
	z-index: 2;
	--flower-size: 36px;
	--flower-gap: 14px;
	width: 220px;
}

@media screen and (min-width: 1024px) {
	.mv {
		height: max(500px, 100vh);
		height: max(500px, 100svh);
	}

	.mv__art-svg--sp {
		display: none;
	}

	.mv__art-svg--pc {
		display: block;
		aspect-ratio: 1440 / 461;
		max-height: 62cqh;
	}

	.mv__flowers {
		bottom: min(2.222cqw, 4cqh);
		left: min(5.556cqw, 10cqh);
		--flower-size: 52px;
		--flower-gap: 20px;
		width: 340px;
	}
}

/* お花が回転しながら流れるパーツ（MV・Profileで共通） */
.flower-marquee {
	--marquee-duration: 14s;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.flower-marquee__item {
	flex-shrink: 0;
	padding-right: var(--flower-gap, 20px);
}

.flower-marquee__flower {
	width: var(--flower-size, 52px);
	height: var(--flower-size, 52px);
}

.marquee--running .flower-marquee__flower {
	animation: flower-spin 6s linear infinite;
}

@keyframes flower-spin {
	to {
		transform: rotate(-360deg);
	}
}

/* 横に流れ続けるパーツ（JSで中身を複製してから marquee--running を付与） */
.marquee__track {
	display: flex;
	width: max-content;
}

.marquee--running .marquee__track {
	animation: marquee-slide var(--marquee-duration, 40s) linear infinite;
}

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

/* ----------------------------------------------------
    sec02 About me
---------------------------------------------------- */

.about__body {
	margin-top: 32px;
}

.about__paragraph-start {
	margin-top: 1.5em;
}

@media screen and (min-width: 1024px) {
	.about__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.about__body {
		flex-shrink: 0;
		width: min(555px, 48vw);
		margin-top: 0;
	}

	.about__paragraph-start {
		margin-top: 48px;
	}
}

/* ----------------------------------------------------
    sec03 Works
---------------------------------------------------- */

.works__slider {
	margin-top: 40px;
}

.works-card {
	width: 240px;
}

.works-card__thumbnail {
	overflow: hidden;
	background-color: var(--color-gray-light);
	border-radius: 12px;
}

.works-card__image {
	display: block;
	aspect-ratio: 301 / 401;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}

@media (hover: hover) {
	.works-card:hover .works-card__image {
		transform: scale(1.05);
	}
}

.works-card__title {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
}

.works-card__tags {
	margin-top: 4px;
}

@media screen and (min-width: 1024px) {
	.works__slider {
		margin-top: 56px;
	}

	.works-card {
		width: 301px;
	}

	.works-card__title {
		font-size: 24px;
	}

	.works-card__tags {
		width: calc(100% + 30px);
		margin-top: 0;
	}
}

/* 横スライダー（Works・Columnで共通） */
.slider {
	--slider-gap: 24px;
	--slider-offset: var(--inner-gutter);
}

.slider__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.slider__viewport::-webkit-scrollbar {
	display: none;
}

.slider--dragging .slider__viewport {
	cursor: grabbing;
}

.slider--dragging .slider__item {
	pointer-events: none;
}

.slider__list {
	display: flex;
	gap: var(--slider-gap);
	width: max-content;
	padding-inline: var(--slider-offset);
}

.slider__item {
	flex-shrink: 0;
}

.slider__bar {
	margin-top: 48px;
}

.slider__track {
	position: relative;
	height: 40px;
}

.slider__track::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-line);
}

.slider__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	transform: translateX(var(--thumb-x, 8px)) rotate(var(--thumb-rotate, 0deg));
	transition: transform 0.2s linear;
}

@media screen and (min-width: 1024px) {
	.slider {
		--slider-gap: 80px;
		--slider-offset: max(var(--inner-gutter), calc((100% - 1200px) / 2));
	}

	.slider__bar {
		margin-top: 74px;
	}

	.slider__track {
		height: 52px;
	}

	.slider__thumb {
		width: 52px;
		height: 52px;
		--thumb-x: 12px;
	}
}

/* ----------------------------------------------------
    sec04 背景固定の写真（時計台・Profile上部）
---------------------------------------------------- */

.fixed-bg {
	position: relative;
	height: 400px;
}

/* 写真だけを枠で切り抜き、少し短くしてグラデーションで端を覆う */
.fixed-bg__clip {
	position: absolute;
	inset: 0 0 4px;
	clip-path: inset(0);
}

.fixed-bg__media {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100lvh;
}

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

.fixed-bg__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(251, 200, 169, 0) 0%, var(--color-peach) calc(100% - 8px));
}

.fixed-bg--layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.fixed-bg--city {
	height: 480px;
}

/* SPは縦長に切り抜かれるので、主役（時計台）が入る位置に寄せる */
.fixed-bg--clock-tower .fixed-bg__image {
	object-position: 30% center;
}

/* 横長の写真なので、手元（スマホとカード）が枠に入る位置に寄せる */
.blob-photo--payment .blob-photo__image {
	object-position: 86% center;
}

@media screen and (min-width: 1024px) {
	.fixed-bg {
		height: 800px;
	}

	.fixed-bg--city {
		height: 800px;
	}
}

/* ----------------------------------------------------
    sec05 Services
---------------------------------------------------- */

.services {
	background: linear-gradient(to bottom, var(--color-peach) calc(100% - 1300px), var(--color-white) calc(100% - 900px));
	padding-bottom: 40px;
}

.services__body {
	margin-top: 32px;
}

.stat-list {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	color: var(--color-peach);
	font-style: italic;
	font-weight: 700;
	text-align: center;
}

.stat-list__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 32%;
	aspect-ratio: 208 / 186;
	background: no-repeat center / contain;
}

.stat-list__item--01 {
	background-image: url(./img/blob_stat_01.svg);
}

.stat-list__item--02 {
	background-image: url(./img/blob_stat_02.svg);
}

.stat-list__item--03 {
	background-image: url(./img/blob_stat_03.svg);
}

.stat-list__label {
	font-size: 9px;
	font-style: normal;
	line-height: 1.6;
	white-space: nowrap;
}

.stat-list__value {
	line-height: 1;
}

.stat-list__number {
	font-size: 30px;
}

.stat-list__unit {
	margin-left: 2px;
	font-size: 11px;
}

/* プラン比較 */
.plans {
	margin-top: 80px;
}

.plans__heading {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-align: center;
}

.plans__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 24px;
}

.plan-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 76px clamp(20px, 8vw, 40px) 84px;
	color: var(--color-text);
	text-align: center;
	background: url(./img/blob_plan.svg) no-repeat center / 100% 100%;
	transition: transform 0.6s var(--ease-out), opacity 1s var(--ease-out);
}

.plan-card__icons {
	display: flex;
	gap: 8px;
}

.plan-card__icon {
	width: 18px;
	height: 18px;
}

.plan-card__name {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.3;
}

.plan-card__price {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	line-height: 1.3;
}

.plan-card__price-label {
	font-size: 16px;
	font-weight: 600;
}

.plan-card__price-number {
	font-size: 38px;
	font-style: italic;
	font-weight: 700;
}

.plan-card__price-number--text {
	font-style: normal;
	font-weight: 600;
}

.plan-card__price-unit {
	margin-left: -10px;
	align-self: flex-end;
	padding-bottom: 8px;
	font-size: 20px;
	font-weight: 600;
}

.plan-card__pages {
	margin-top: 32px;
}

.plan-card__pages-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.plan-card__pages-text {
	margin-top: 10px;
	font-size: clamp(16px, 4.8vw, 18px);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.plan-card__plus {
	display: block;
	font-size: 14px;
	line-height: 1.2;
}

.plan-card__pages-number {
	margin-inline: 2px;
	font-size: 30px;
	font-style: italic;
	font-weight: 600;
	line-height: 0.88;
}

.plan-card__target {
	margin-top: 32px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

@media (hover: hover) {
	.plan-card.inview--visible:hover {
		transform: translateY(-8px) rotate(-1deg);
	}
}

/* 全プランに含まれるもの */
.included {
	margin-top: 64px;
	padding: 32px 20px;
	color: var(--color-text);
	background-color: var(--color-white);
	border-radius: 24px;
}

.included__heading {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

.included__list {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.included__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.included__icon {
	width: 20px;
	height: 20px;
}

/* お支払い方法 */
.payment {
	margin-top: 120px;
	color: var(--color-text);
}

.payment__heading {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.payment__lead {
	margin-top: 20px;
	font-family: var(--font-ja);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
}

.payment__list {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	font-family: var(--font-ja);
	letter-spacing: 0.05em;
}

.payment__term {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
}

.payment__description {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
}

.payment__note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
}

.payment__figure {
	margin: 48px auto 0;
}

@media screen and (min-width: 1024px) {
	.services {
		padding-bottom: 9px;
		background: linear-gradient(to bottom, var(--color-peach) calc(100% - 1397px), var(--color-white) calc(100% - 597px));
	}

	.services__intro {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.services__body {
		flex-shrink: 0;
		width: min(555px, 48vw);
		margin-top: 0;
	}

	.stat-list {
		justify-content: flex-start;
		/* デザインでは右に48pxはみ出す。画面が狭いときは余白に収まる分だけはみ出す */
		width: calc(100% + 21px + clamp(32px, (100vw - 1200px) / 2 - 8px, 48px));
		margin-top: 41px;
		margin-left: -21px;
	}

	.stat-list__item {
		width: calc(100% / 3);
	}

	.stat-list__label {
		margin-bottom: 8px;
		font-size: 14.5px;
		line-height: 1.6;
	}

	.stat-list__number {
		font-size: clamp(40px, 3.8vw, 54.8px);
		line-height: 38.7px;
	}

	.stat-list__unit {
		font-size: 14.5px;
	}

	.plans {
		margin-top: 113px;
	}

	.plans__heading {
		font-size: 40px;
		line-height: 1.5;
	}

	.plans__list {
		grid-template-columns: repeat(2, minmax(0, 512px));
		justify-content: center;
		gap: 24px clamp(24px, 3.3vw, 48px);
		margin-top: 40px;
	}

	.plan-card {
		height: 576px;
		padding: 108px 20px 0;
		background-size: 100% 100%;
	}

	.plan-card__icon {
		width: 18px;
		height: 18px;
	}

	.plan-card__name {
		margin-top: 12px;
		font-size: 20px;
	}

	.plan-card__price {
		gap: 12px;
		margin-top: 8px;
	}

	.plan-card__price-label {
		font-size: 16px;
	}

	.plan-card__price-number {
		font-size: 44px;
	}

	.plan-card__price-unit {
		padding-bottom: 9px;
		font-size: 20px;
	}

	.plan-card__pages {
		margin-top: 36px;
	}

	.plan-card__pages-title {
		font-size: 20px;
	}

	.plan-card__pages-text {
		margin-top: 8px;
		font-size: 21px;
	}

	.plan-card__plus {
		font-size: 15px;
	}

	.plan-card__pages-number {
		font-size: 36px;
	}

	.plan-card__target {
		margin-top: 36px;
		font-size: 14px;
	}

	.included {
		width: 952px;
		margin: 104px auto 0;
		padding: 48px 64px 56px;
		border-radius: 40px;
	}

	.included__heading {
		font-size: 24px;
	}

	.included__list {
		grid-template-columns: 432px 1fr;
		gap: 12px 0;
		margin-top: 32px;
	}

	.included__item {
		gap: 12px;
		font-size: 18px;
	}

	.included__icon {
		width: 22px;
		height: 22px;
	}

	.payment {
		display: flex;
		align-items: flex-start;
		margin-top: 187px;
	}

	.payment__body {
		flex: 0 1 682px;
		min-width: 0;
		padding-top: 97px;
	}

	.payment__heading {
		font-size: 32px;
	}

	.payment__lead {
		max-width: 555px;
		margin-top: 32px;
		font-size: 18px;
		line-height: calc(48 / 18);
	}

	.payment__list {
		gap: 20px;
		margin-top: 32px;
	}

	.payment__item {
		display: flex;
		align-items: flex-start;
		gap: 26px;
	}

	.payment__term {
		flex-shrink: 0;
		font-size: 22px;
		line-height: calc(48 / 22);
	}

	.payment__description {
		font-size: 18px;
		line-height: calc(48 / 18);
	}

	.payment__note {
		margin-top: 0;
		font-size: 15px;
	}

	.payment__figure {
		flex-shrink: 0;
		margin: 56px -10px 0 auto;
	}
}

/* 不定形に切り抜いた写真（Services・Profileで共通） */
.blob-photo {
	position: relative;
	width: min(80%, 336px);
	aspect-ratio: 564 / 677;
}

.blob-photo::before {
	content: "";
	position: absolute;
	background: no-repeat center / 100% 100%;
}

.blob-photo__frame {
	position: absolute;
	top: 0;
	width: 93.44%;
	height: 99.42%;
	overflow: hidden;
}

.blob-photo__image {
	position: absolute;
	max-width: none;
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.blob-photo__caption {
	position: absolute;
	top: 0;
	width: 93.44%;
	height: 99.42%;
	overflow: visible;
	pointer-events: none;
}

.blob-photo__caption-text {
	font-size: 22px;
	font-style: italic;
	letter-spacing: 1px;
}

.blob-photo--payment::before {
	top: 0.74%;
	left: 0;
	width: 99.43%;
	height: 98.08%;
	background-image: url(./img/blob_payment.svg);
}

.blob-photo--payment .blob-photo__frame,
.blob-photo--payment .blob-photo__caption {
	left: 6.56%;
}

.blob-photo--payment .blob-photo__frame {
	clip-path: url(#clip-payment-photo);
}

.blob-photo--payment .blob-photo__image {
	top: -14%;
	left: -10.44%;
	width: 128.9%;
	height: 128%;
}

.blob-photo--payment .blob-photo__caption-text {
	fill: var(--color-caption);
	font-weight: 600;
}

.blob-photo--profile::before {
	top: 0.74%;
	left: 0.35%;
	width: 99.43%;
	height: 98.08%;
	background-image: url(./img/blob_profile.svg);
}

.blob-photo--profile .blob-photo__frame,
.blob-photo--profile .blob-photo__caption {
	left: 0;
}

.blob-photo--profile .blob-photo__frame {
	clip-path: url(#clip-profile-photo);
}

/* Figmaと同じくらいの引きで見せる（上下のはみ出しはパララックスで動かす分） */
.blob-photo--profile .blob-photo__image {
	top: -8%;
	left: 0;
	width: 100%;
	height: 116%;
}

.blob-photo--profile .blob-photo__caption-text {
	fill: var(--color-white);
	font-weight: 500;
}

@media screen and (min-width: 1024px) {
	.blob-photo {
		width: min(451px, 31.3vw);
	}
}

/* ----------------------------------------------------
    sec06 Flow
---------------------------------------------------- */

.flow {
	padding-top: calc(26vw + 40px);
}

.flow::before {
	content: "";
	position: absolute;
	/* 上のセクションとの境目に背景色の細い線が出ないよう、2px上に重ねる */
	top: -2px;
	left: 0;
	width: 100%;
	height: calc(26vw + 2px);
	background: url(./img/wave_flow.svg) no-repeat center top / 100% 100%;
}

.flow__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 8px;
	margin-top: 40px;
}

.flow__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	aspect-ratio: 279 / 222;
	color: var(--color-peach);
	text-align: center;
	background: url(./img/blob_flow_02.svg) no-repeat center / contain;
}

.flow__item:nth-child(even) {
	top: 32px;
}

/* 01・04は向きの違う同じ形の丸（SVGは形ぴったりに切り抜いてあるので、どの丸も同じ大きさで表示される） */
.flow__item--round {
	background-image: url(./img/blob_flow_01.svg);
}

.flow__number {
	position: absolute;
	color: var(--color-peach-pale);
	font-size: 22px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	transform: rotate(var(--number-rotate, 0deg));
}

/* SP：番号は図形の左上の外側に出して読めるようにする */
.flow__item .flow__number {
	top: -6px;
	left: 4%;
	z-index: 1;
	color: var(--color-white);
	--number-rotate: -14deg;
}

.flow__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.flow__text {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

@media (hover: hover) {
	.flow__item.inview--visible {
		transition: transform 0.6s var(--ease-out), opacity 1s var(--ease-out);
	}

	.flow__item.inview--visible:hover {
		transform: scale(1.04) rotate(-2deg);
	}
}

@media screen and (min-width: 1024px) {
	.flow {
		padding-top: calc(17.57vw + 80px);
		padding-bottom: 137px;
	}

	.flow::before {
		height: calc(17.57vw + 2px);
	}

	.flow__list {
		grid-template-columns: repeat(4, minmax(0, 297px));
		gap: min(24px, 1.7vw) min(33px, 2.3vw);
		/* デザインでは左に29px・右に58pxはみ出す。画面が狭いときは余白に収まる分だけ */
		width: calc(100% + 29px + clamp(32px, (100vw - 1200px) / 2 - 8px, 58px));
		max-width: 1287px;
		margin: 79px 0 0 -29px;
	}

	.flow__item {
		align-self: end;
		aspect-ratio: 297 / 222;
	}

	/* 01・04は少し上にずらす（同じ大きさのまま、下に余白をとって段差をつける） */
	.flow__item--round {
		align-self: start;
		margin-bottom: min(33px, 2.3vw);
	}

	.flow__item:nth-child(even) {
		top: auto;
	}

	.flow__item--01 { grid-area: 1 / 1; }
	.flow__item--02 { grid-area: 1 / 2; }
	.flow__item--03 { grid-area: 1 / 3; }
	.flow__item--04 { grid-area: 2 / 2; }
	.flow__item--05 { grid-area: 2 / 3; }
	.flow__item--06 { grid-area: 2 / 4; }

	.flow__number {
		font-size: 32px;
	}

	.flow__item .flow__number {
		color: var(--color-peach-pale);
	}

	.flow__item--01 .flow__number { top: 0; left: 2%; --number-rotate: -35deg; }
	.flow__item--02 .flow__number { top: -4%; left: 10%; --number-rotate: -20deg; }
	.flow__item--03 .flow__number { top: 0; right: 4%; left: auto; --number-rotate: 32deg; }
	.flow__item--04 .flow__number { top: 0; left: 2%; --number-rotate: -35deg; }
	.flow__item--05 .flow__number { top: -4%; left: 10%; --number-rotate: -20deg; }
	.flow__item--06 .flow__number { top: -4%; right: 6%; left: auto; --number-rotate: 28deg; }

	.flow__title {
		font-size: clamp(18px, 1.67vw, 24px);
		line-height: 1.6;
	}

	.flow__text {
		margin-top: 4px;
		font-size: clamp(13px, 1.11vw, 16px);
	}
}

/* ----------------------------------------------------
    sec07 Profile
---------------------------------------------------- */

.profile {
	padding-top: 200px;
}

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

.profile__content {
	margin-top: 40px;
}

.profile__figure {
	margin-inline: auto;
}

.profile__body {
	margin-top: 40px;
}

.profile__name {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.5;
}

.profile__text {
	margin-top: 16px;
	font-family: var(--font-ja);
}

.profile__likes {
	display: grid;
	gap: 24px;
	margin-top: 32px;
}

.profile__like-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.5;
}

.profile__like-icon {
	width: 20px;
	height: 20px;
	transition: transform 0.8s var(--ease-out);
}

.profile__like:hover .profile__like-icon {
	transform: rotate(180deg);
}

.profile__like-text {
	margin-top: 8px;
	padding-left: 32px;
	font-family: var(--font-ja);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.profile__flowers {
	--flower-size: 36px;
	--flower-gap: 14px;
	width: 220px;
	margin: 56px 0 -24px auto;
}

@media screen and (min-width: 1024px) {
	.profile {
		padding-top: 400px;
		padding-bottom: 56px;
	}

	.profile__content {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 78px;
	}

	.profile__figure {
		flex-shrink: 0;
		margin: 70px 0 0 min(40px, 2.8vw);
	}

	.profile__body {
		flex-shrink: 0;
		width: min(555px, 48vw);
		margin-top: 0;
	}

	.profile__name {
		font-size: 40px;
	}

	.profile__text {
		margin-top: 24px;
	}

	.profile__likes {
		gap: 24px;
		margin-top: 32px;
	}

	.profile__like-title {
		gap: 20px;
		font-size: 20px;
	}

	.profile__like-icon {
		width: 22px;
		height: 22px;
	}

	.profile__like-text {
		margin-top: 12px;
		padding-left: 42px;
		font-size: 16px;
	}

	.profile__flowers {
		--flower-size: 52px;
		--flower-gap: 20px;
		width: 340px;
		margin: 65px -40px 0 auto;
	}
}

/* ----------------------------------------------------
    sec08 Column
---------------------------------------------------- */

.column__categories {
	margin-top: 24px;
}

.column__slider {
	margin-top: 32px;
}

.column-card {
	width: 240px;
}

.column-card__link {
	display: block;
	text-decoration: none;
}

.column-card__thumbnail {
	overflow: hidden;
	background-color: var(--color-gray-light);
	border-radius: 12px;
}

.column-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 301 / 401;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}

/* 日付とカテゴリーはサムネイルの下に横並び */
.column-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 14px;
}

.column-card__date {
	font-size: 22px;
	font-style: italic;
	letter-spacing: 0.5px;
	line-height: 1;
}

.column-card__category {
	padding: 5px 15px;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--color-text);
	border-radius: 5px;
}

.column-card__title {
	margin-top: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 25.5px;
	transition: color 0.3s;
}

@media (hover: hover) {
	.column-card__link:hover .column-card__image {
		transform: scale(1.05);
	}

	.column-card__link:hover .column-card__title {
		color: var(--color-flower-pink);
	}
}

@media screen and (min-width: 1024px) {
	.column__categories {
		margin-top: 32px;
	}

	.column__slider {
		--slider-gap: 114px;
		margin-top: 40px;
	}

	.column-card {
		width: 301px;
	}

	.column-card__meta {
		margin-top: 16px;
	}

	.column-card__date {
		font-size: 26px;
	}

	.column-card__category {
		font-size: 15px;
	}

	.column-card__title {
		font-size: 16px;
	}

	.column__slider .slider__bar {
		margin-top: 72px;
	}
}

/* ----------------------------------------------------
    sec09 Contact
---------------------------------------------------- */

.contact__lead {
	margin-top: 32px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.contact__text {
	margin-top: 20px;
	font-size: 14px;
	font-family: var(--font-ja);
}

.contact__buttons {
	display: grid;
	gap: 16px;
	max-width: 460px;
	margin-top: 40px;
}

.contact__button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	overflow: hidden;
	color: var(--color-peach);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-decoration: none;
	background-color: var(--color-gray-light);
	border-radius: 8px;
	transition: color 0.4s, background-color 0.4s, transform 0.4s var(--ease-out);
}

.contact__button--instagram {
	color: var(--color-white);
	background-color: var(--color-gray);
}

@media (hover: hover) {
	.contact__button:hover {
		color: var(--color-white);
		background-color: var(--color-flower-pink);
		transform: translateY(-4px);
	}
}

@media screen and (min-width: 1024px) {
	/* 左の文章と右のボタンの中心をそろえ、画面幅に合わせてボタン幅も変える */
	.contact__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: clamp(40px, 6vw, 120px);
	}

	.contact__head {
		flex: 1 1 auto;
		min-width: 0;
	}

	.contact__lead {
		margin-top: 64px;
		font-size: 20px;
		letter-spacing: 0.11em;
	}

	.contact__text {
		margin-top: 32px;
		font-size: 18px;
	}

	.contact__buttons {
		flex: 0 0 clamp(340px, 34vw, 460px);
		gap: 20px;
		margin-top: 40px;
	}

	.contact__button {
		height: 84px;
		font-size: 18px;
	}
}

/* ----------------------------------------------------
    下層ページ用の共通パーツ
---------------------------------------------------- */

/* トップページ：コラム一覧へのリンク */
.column__inner {
	position: relative;
}

.column__more {
	position: absolute;
	top: 0;
	right: var(--inner-gutter);
}

/* 「View all」などのテキストリンク（下線が伸びる） */
.more-link {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 6px;
	color: var(--color-text);
	font-size: 16px;
	font-style: italic;
	font-weight: 700;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
	transition: background-size 0.5s var(--ease-out);
}

.more-link__ja {
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.05em;
}

@media (hover: hover) {
	.more-link:hover {
		background-size: 40% 1px;
	}
}

@media screen and (min-width: 1024px) {
	.more-link {
		font-size: 18px;
	}

	.more-link__ja {
		font-size: 13px;
	}
}

/* タグ：選択中・ピーチ背景の上で使う色 */
.tag-list__item--current {
	color: var(--color-white);
	background-color: var(--color-text);
}

.tag-list__item--light {
	border-color: var(--color-white);
}

@media (hover: hover) {
	.tag-list__item--light .tag-list__link:hover {
		color: var(--color-peach);
		background-color: var(--color-white);
	}
}

/* ----------------------------------------------------
    下層ページ共通：上部（ラベル・タイトル・パンくず・波）
---------------------------------------------------- */

.sub-hero {
	position: relative;
	padding: 120px 0 calc(26vw + 24px);
	color: var(--color-white);
	background-color: var(--color-peach);
}

.sub-hero__title {
	margin-top: 20px;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

/* 記事タイトルは長くなるので少し小さく */
.sub-hero--article .sub-hero__title {
	max-width: 900px;
	font-size: 24px;
	letter-spacing: 0.04em;
}

.sub-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 20px;
}

.sub-hero__date {
	font-size: 20px;
	font-style: italic;
	letter-spacing: 0.5px;
	line-height: 1;
}

.sub-hero__updated {
	font-size: 12px;
	letter-spacing: 0.05em;
}

.breadcrumb {
	margin-top: 28px;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	font-size: 12px;
	letter-spacing: 0.05em;
}

.breadcrumb__item:not(:last-child)::after {
	content: "/";
	margin-inline: 10px;
	opacity: 0.7;
}

.breadcrumb__link {
	text-decoration: none;
}

@media (hover: hover) {
	.breadcrumb__link:hover {
		text-decoration: underline;
	}
}

/* 下の白い波（「制作の流れ」の波を上下反転して使う） */
.sub-hero__wave {
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: calc(26vw + 2px);
	background: url(./img/wave_flow.svg) no-repeat center top / 100% 100%;
	transform: scaleY(-1);
}

@media screen and (min-width: 1024px) {
	.sub-hero {
		padding: 200px 0 calc(17.57vw + 8px);
	}

	.sub-hero__title {
		margin-top: 40px;
		font-size: 56px;
	}

	.sub-hero--article .sub-hero__title {
		font-size: 36px;
	}

	.sub-hero__meta {
		margin-top: 32px;
	}

	.sub-hero__date {
		font-size: 24px;
	}

	.sub-hero__updated {
		font-size: 13px;
	}

	.breadcrumb {
		margin-top: 40px;
	}

	.breadcrumb__list {
		font-size: 13px;
	}

	.sub-hero__wave {
		height: calc(17.57vw + 2px);
	}
}

/* ----------------------------------------------------
    コラム一覧
---------------------------------------------------- */

.column-archive {
	padding-block: 24px 80px;
}

.column-archive__categories {
	margin-bottom: 40px;
}

.column-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 16px;
}

/* 一覧ではカードを列の幅いっぱいにする */
.column-archive__item.column-card {
	width: auto;
}

.column-archive__item .column-card__date {
	font-size: 17px;
}

.column-archive__item .column-card__category {
	padding: 4px 10px;
	font-size: 12px;
}

.column-archive__item .column-card__title {
	font-size: 14px;
	line-height: 1.7;
}

.column-archive__empty {
	padding-block: 40px;
	font-size: 15px;
	text-align: center;
}

/* ページ送り */
.pagination {
	margin-top: 56px;
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination__link {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 4px;
	color: var(--color-text);
	font-size: 16px;
	font-style: italic;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.pagination__link--current {
	color: var(--color-white);
	background-color: var(--color-peach);
	border-color: var(--color-peach);
}

.pagination__link--dots {
	border-color: transparent;
}

.pagination__arrow {
	width: 10px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

@media (hover: hover) {
	a.pagination__link:hover {
		color: var(--color-white);
		background-color: var(--color-flower-pink);
		border-color: var(--color-flower-pink);
	}
}

@media screen and (min-width: 1024px) {
	.column-archive {
		padding-block: 40px 160px;
	}

	.column-archive__categories {
		margin-bottom: 64px;
	}

	.column-archive__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 72px min(80px, 5.5vw);
	}

	.column-archive__item .column-card__date {
		font-size: 24px;
	}

	.column-archive__item .column-card__category {
		padding: 5px 15px;
		font-size: 15px;
	}

	.column-archive__item .column-card__title {
		font-size: 16px;
	}

	.pagination {
		margin-top: 96px;
	}

	.pagination__link {
		min-width: 52px;
		height: 52px;
		font-size: 18px;
	}
}

/* ----------------------------------------------------
    コラム詳細
---------------------------------------------------- */

.column-single {
	padding-block: 24px 80px;
}

.column-single__inner {
	max-width: 800px;
	padding-inline: var(--inner-gutter);
	margin-inline: auto;
}

.column-single__thumbnail {
	max-width: 560px;
	margin: 0 auto 40px;
	overflow: hidden;
	border-radius: 12px;
}

.column-single__image {
	display: block;
}

.column-single__tags {
	margin-top: 48px;
}

.column-single__back {
	margin-top: 56px;
	text-align: center;
}

/* 丸いボタン（「コラム一覧へ戻る」など） */
.button-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 260px;
	padding: 18px 40px;
	color: var(--color-white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	background-color: var(--color-peach);
	border-radius: 999px;
	transition: background-color 0.4s, transform 0.4s var(--ease-out);
}

@media (hover: hover) {
	.button-link:hover {
		background-color: var(--color-flower-pink);
		transform: translateY(-3px);
	}
}

/* 前後の記事 */
.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 56px;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	transition: background-color 0.3s, border-color 0.3s;
}

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

.post-nav__label {
	color: var(--color-flower-pink);
	font-size: 14px;
	font-style: italic;
	font-weight: 700;
}

.post-nav__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.7;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (hover: hover) {
	.post-nav__link:hover {
		background-color: var(--color-peach-pale);
		border-color: var(--color-peach);
	}
}

/* 本文（WordPressのエディタが出力するHTMLなので、タグに直接スタイルを当てる） */
.post-content {
	font-family: var(--font-ja);
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.03em;
	overflow-wrap: anywhere;
}

.post-content > * + * {
	margin-top: 1.6em;
}

.post-content h2 {
	position: relative;
	margin-top: 64px;
	padding: 0 0 14px 34px;
	font-family: var(--font-en);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.6;
	border-bottom: 1px solid var(--color-line);
}

/* 見出しの頭にお花（トップページのラベルと同じ形） */
.post-content h2::before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 22px;
	height: 21px;
	background-color: var(--color-flower-pink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M11 10.7597C24.0153 21.1849 27.2302 7.43821 11 10.7597C18.223 -3.58658 27.2302 7.43821 11 10.7597C18.223 -3.58658 3.77703 -3.58658 11 10.7597C3.77703 -3.58658 -5.23022 7.43821 11 10.7597C-2.01529 21.1849 -5.23022 7.43821 11 10.7597C11 27.3033 -2.01529 21.1849 11 10.7597C24.0153 21.1849 11 27.3033 11 10.7597Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M11 10.7597C24.0153 21.1849 27.2302 7.43821 11 10.7597C18.223 -3.58658 27.2302 7.43821 11 10.7597C18.223 -3.58658 3.77703 -3.58658 11 10.7597C3.77703 -3.58658 -5.23022 7.43821 11 10.7597C-2.01529 21.1849 -5.23022 7.43821 11 10.7597C11 27.3033 -2.01529 21.1849 11 10.7597C24.0153 21.1849 11 27.3033 11 10.7597Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.post-content h3 {
	margin-top: 48px;
	padding-left: 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	border-left: 4px solid var(--color-peach);
}

.post-content h4 {
	margin-top: 40px;
	font-size: 16px;
	font-weight: 700;
}

.post-content a {
	color: var(--color-flower-pink);
	text-underline-offset: 3px;
}

.post-content strong {
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--color-peach-light) 62%);
}

.post-content ul,
.post-content ol {
	padding-left: 1.4em;
}

.post-content ul {
	list-style: disc;
}

.post-content ol {
	list-style: decimal;
}

.post-content li::marker {
	color: var(--color-peach);
}

.post-content blockquote {
	padding: 20px 24px;
	background-color: var(--color-peach-pale);
	border-left: 4px solid var(--color-peach);
	border-radius: 0 8px 8px 0;
}

.post-content img {
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.post-content figure {
	margin-inline: 0;
}

.post-content figcaption {
	margin-top: 8px;
	color: var(--color-caption);
	font-size: 12px;
	text-align: center;
}

.post-content table {
	width: 100%;
	font-size: 14px;
}

.post-content th,
.post-content td {
	padding: 10px 12px;
	border: 1px solid var(--color-line);
}

.post-content th {
	background-color: var(--color-peach-pale);
}

.post-content code {
	padding: 2px 6px;
	font-size: 0.9em;
	background-color: var(--color-gray-light);
	border-radius: 4px;
}

.post-content hr {
	border: 0;
	border-top: 1px solid var(--color-line);
}

@media screen and (min-width: 1024px) {
	.column-single {
		padding-block: 40px 140px;
	}

	.column-single__thumbnail {
		margin-bottom: 64px;
	}

	.post-content {
		font-size: 17px;
	}

	.post-content h2 {
		margin-top: 80px;
		padding-left: 38px;
		font-size: 26px;
	}

	.post-content h3 {
		margin-top: 56px;
		font-size: 20px;
	}

	.post-nav {
		gap: 24px;
		margin-top: 80px;
	}

	.post-nav__link {
		padding: 24px 28px;
	}

	.post-nav__title {
		font-size: 15px;
	}

	.column-single__back {
		margin-top: 72px;
	}

	.button-link {
		padding: 20px 56px;
		font-size: 16px;
	}
}

/* 関連記事 */
.column-related {
	padding-block: 80px;
	background-color: var(--color-peach-pale);
}

.column-related__heading {
	margin-top: 16px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.column-related__list {
	margin-top: 32px;
}

@media screen and (min-width: 1024px) {
	.column-related {
		padding-block: 120px;
	}

	.column-related__heading {
		margin-top: 24px;
		font-size: 40px;
	}

	.column-related__list {
		margin-top: 48px;
	}
}

/* ----------------------------------------------------
    実績：カード（トップページ・一覧・ほかの実績で共通）
---------------------------------------------------- */

/* トップページ：実績一覧へのリンク */
.works__inner {
	position: relative;
}

.works__more {
	position: absolute;
	top: 0;
	right: var(--inner-gutter);
}

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

.works-card__thumbnail {
	position: relative;
}

/* サムネイルがないときはPCデザインの一番上を見せる */
.works-card__image--top {
	object-position: center top;
}

/* マウスを乗せたときに出る「View」の丸 */
.works-card__view {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 88px;
	color: var(--color-white);
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.05em;
	background-color: var(--color-flower-pink);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	transition: opacity 0.4s, transform 0.5s var(--ease-out);
	pointer-events: none;
}

@media (hover: hover) {
	.works-card__link:hover .works-card__image {
		transform: scale(1.05);
	}

	.works-card__link:hover .works-card__view {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ----------------------------------------------------
    実績一覧
---------------------------------------------------- */

.works-archive {
	padding-block: 24px 80px;
}

.works-archive__categories {
	margin-bottom: 40px;
}

.works-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 16px;
}

/* 一覧ではカードを列の幅いっぱいにする */
.works-archive__item.works-card {
	width: auto;
}

.works-archive__item .works-card__title {
	font-size: 15px;
	line-height: 1.7;
}

.works-archive__item .works-card__tags {
	gap: 6px;
	margin-top: 8px;
}

.works-archive__item .tag-list__item {
	padding: 4px 8px;
	font-size: 11px;
}

.works-archive__empty {
	padding-block: 40px;
	font-size: 15px;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.works-archive {
		padding-block: 40px 160px;
	}

	.works-archive__categories {
		margin-bottom: 64px;
	}

	.works-archive__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 72px min(80px, 5.5vw);
	}

	.works-archive__item .works-card__title {
		margin-top: 16px;
		font-size: 22px;
	}

	.works-archive__item .works-card__tags {
		width: auto;
		gap: 8px;
		margin-top: 8px;
	}

	.works-archive__item .tag-list__item {
		padding: 5px 12px;
		font-size: 13px;
	}
}

/* ----------------------------------------------------
    実績詳細
---------------------------------------------------- */

.sub-hero__area {
	font-size: 14px;
	letter-spacing: 0.05em;
}

/* 詳細ページの見出し（英語の小さなラベル付き） */
.works-single__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.works-single__heading-en {
	color: var(--color-flower-pink);
	font-size: 14px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
}

@media screen and (min-width: 1024px) {
	.sub-hero__area {
		font-size: 15px;
	}

	.works-single__heading {
		font-size: 30px;
	}

	.works-single__heading-en {
		font-size: 16px;
	}
}

/* サイトのデザイン（PC・スマホの枠） */
.works-showcase {
	padding-block: 24px 64px;
}

.works-showcase__lead {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.8;
}

.works-showcase__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	margin-top: 28px;
	padding: 32px 16px;
	background-color: var(--color-peach-pale);
	border-radius: 24px;
}

.works-showcase__thumbnail {
	margin-top: 28px;
	overflow: hidden;
	border-radius: 16px;
}

.site-preview {
	width: 100%;
}

.site-preview--sp {
	width: min(250px, 72%);
}

.site-preview__frame {
	position: relative;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 20px 48px rgba(236, 107, 141, 0.16);
}

/* スマホの枠は、画面のまわりに白いふちを付ける */
.site-preview--sp .site-preview__frame {
	padding: 9px;
	border-radius: 36px;
}

/* ブラウザの上のバー */
.site-preview__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 32px;
	padding-inline: 14px;
	border-bottom: 1px solid var(--color-peach-light);
}

.site-preview__dots {
	display: flex;
	flex-shrink: 0;
	gap: 6px;
}

.site-preview__dot {
	width: 9px;
	height: 9px;
	background-color: var(--color-flower-pink);
	border-radius: 50%;
}

.site-preview__dot:nth-child(2) {
	background-color: var(--color-flower-orange);
}

.site-preview__dot:nth-child(3) {
	background-color: var(--color-flower-mint);
}

.site-preview__url {
	overflow: hidden;
	max-width: 60%;
	margin-inline: auto;
	padding: 3px 16px;
	color: var(--color-caption);
	font-size: 11px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: var(--color-gray-light);
	border-radius: 999px;
}

/* 画面：この中だけスクロールする */
.site-preview__screen {
	overflow-x: hidden;
	overflow-y: auto;
	aspect-ratio: 4 / 3;
	scrollbar-width: thin;
	scrollbar-color: var(--color-peach) transparent;
}

.site-preview--sp .site-preview__screen {
	aspect-ratio: 390 / 780;
	border-radius: 28px;
}

.site-preview__screen:focus-visible {
	outline: 3px solid var(--color-flower-pink);
	outline-offset: -3px;
}

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

/* 「Scroll」の案内（スクロールし始めたら消える） */
.site-preview__hint {
	position: absolute;
	bottom: 16px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 18px 12px;
	color: var(--color-white);
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	background-color: rgba(38, 38, 38, 0.72);
	border-radius: 999px;
	transform: translateX(-50%);
	transition: opacity 0.4s;
	pointer-events: none;
}

.site-preview__hint-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	animation: site-preview-arrow 1.4s ease-in-out infinite;
}

@keyframes site-preview-arrow {
	0%,
	100% {
		transform: translateY(-2px) rotate(45deg);
	}

	50% {
		transform: translateY(3px) rotate(45deg);
	}
}

.site-preview--scrolled .site-preview__hint {
	opacity: 0;
}

.site-preview__caption {
	margin-top: 14px;
	font-size: 14px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.works-showcase {
		padding-block: 40px 96px;
	}

	.works-showcase__lead {
		margin-top: 16px;
		font-size: 15px;
	}

	/* PCの枠とスマホの枠を横に並べ、下の位置をそろえる */
	.works-showcase__stage {
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		gap: clamp(32px, 4vw, 64px);
		margin-top: 40px;
		padding: 64px clamp(32px, 5vw, 80px) 48px;
		border-radius: 40px;
	}

	.works-showcase__stage--single {
		justify-content: center;
	}

	.site-preview--pc {
		flex: 1 1 auto;
		max-width: 900px;
	}

	.site-preview--sp {
		flex: 0 0 auto;
		width: clamp(220px, 19vw, 280px);
	}

	.site-preview__bar {
		height: 36px;
	}

	.site-preview__screen {
		aspect-ratio: 16 / 10;
	}

	.site-preview--sp .site-preview__screen {
		aspect-ratio: 390 / 800;
	}

	.site-preview__caption {
		margin-top: 18px;
		font-size: 15px;
	}
}

/* 制作の概要・制作のポイント */
.works-detail {
	padding-bottom: 80px;
}

.works-detail__body {
	margin-top: 56px;
}

.works-info {
	margin-top: 24px;
	border-top: 1px solid var(--color-line);
}

.works-info__row {
	display: flex;
	gap: 16px;
	padding-block: 16px;
	font-size: 14px;
	line-height: 1.8;
	border-bottom: 1px solid var(--color-line);
}

.works-info__term {
	flex: 0 0 84px;
	font-weight: 600;
}

.works-info__desc {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.works-info__link {
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.works-info__link:hover {
		color: var(--color-flower-pink);
	}
}

.works-detail__visit {
	margin-top: 32px;
	text-align: center;
}

/* 外部サイトへのボタンには右上向きの矢印を付ける */
.button-link--external::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.works-detail__content {
	margin-top: 24px;
}

.works-detail__back {
	margin-top: 56px;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.works-detail {
		padding-bottom: 140px;
	}

	.works-detail__inner {
		display: flex;
		align-items: flex-start;
		gap: clamp(48px, 6vw, 120px);
	}

	.works-detail__overview {
		flex: 0 0 min(420px, 36%);
	}

	.works-detail__body {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
	}

	.works-info {
		margin-top: 32px;
	}

	.works-info__row {
		gap: 24px;
		padding-block: 20px;
		font-size: 15px;
	}

	.works-info__term {
		flex-basis: 96px;
	}

	.works-detail__visit {
		margin-top: 40px;
		text-align: left;
	}

	.works-detail__content {
		margin-top: 32px;
	}

	.works-detail__back {
		margin-top: 72px;
	}
}

/* ----------------------------------------------------
    sec10 （予備）
---------------------------------------------------- */

/* @media screen and (min-width: 1024px) {} */

/* ----------------------------------------------------
    footer
---------------------------------------------------- */

.footer {
	padding: 16px 20px;
	background-color: var(--color-white);
}

.footer__copyright {
	color: var(--color-peach);
	font-size: 12px;
	font-style: italic;
	font-weight: 500;
	line-height: 48px;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.footer__copyright {
		font-size: 14px;
	}
}

/* ----------------------------------------------------
    動きを減らす設定のとき
---------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}