/*
 * コアブロックで組んだ HTML を、デザインの CSS（design.css）に合わせるための調整
 * デザインの HTML と構造が違う箇所（ボタンの外側の div、画像の figure、番号の付け方など）だけをここで扱う
 */

/*
 * フォント：デザインは Noto Sans JP（和文）と DM Sans（欧文）。今は rishalice と同じ丸明オールド（FONTPLUS）にしている
 * デザインのフォントに戻すときは、ここを "Noto Sans JP", sans-serif と "DM Sans" に戻し、functions.php の読み込みも戻す
 */
:root {
	--rish-font-ja: "丸明オールド StdN R", "MaruminOld StdN R", "砧 丸明オールド StdN", serif;
	--rish-font-en: "丸明オールド StdN R", "MaruminOld StdN R", "砧 丸明オールド StdN";
}

/* hidden だとスクロールの基準になり、中の position: sticky（AI 生成プランの見積金額など）が追従しなくなる。clip ははみ出しを切るだけ */
.site-shell {
	overflow: clip;
}

:root {
	--rish-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M14 7l5 5-5 5'/%3E%3C/svg%3E");
}

/*
 * ---------- 文字の折り返し ----------
 * 画面幅で行数が変わっても崩れないよう、和文は文節で折り返し、見出しは行の長さをそろえる。
 * 長い英単語は、はみ出すときだけ途中で折り返す。
 * レイアウトは行数が増えても重ならないよう、文字を含む要素に絶対配置・固定の高さを使わない（下のセクションごとの調整）。
 */
body {
	font-size: 16px;
	word-break: auto-phrase;
	/* anywhere：文節や長い英単語が入りきらない幅では折り返す（break-word と違い、グリッドの列幅を押し広げない） */
	overflow-wrap: anywhere;
	line-break: strict;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/*
 * ---------- 英字の見出し・ラベルは大文字で見せる ----------
 * HTML に大文字で書くと、スクリーンリーダーが 1 文字ずつ読み上げることがあるため、HTML は普通の書き方（Who we are など）にし、
 * 見た目だけ大文字にする。SEO・DX のような略語は HTML でも大文字のまま書く。
 */
.eyebrow,
.section-kicker > p:not(.section-kicker__number),
.service-card__label,
.intro__note p,
.work-card__meta p,
.work-card__browser-bar span,
.footer__message,
.scroll-cue span,
.hero__signature span,
.hero__backdrop-type,
.hero__caption,
.hero__side-label span,
.traffic-source strong,
.website-model__message small,
.conversion-card small,
.growth-card small,
.service-detail__breadcrumb,
.service-detail__kicker > p:not(.service-detail__number),
.service-detail__side-heading > p:not(.service-detail__number),
.service-needs__heading > p,
.service-support__number > p:last-child,
.service-plan__recommend,
.service-plan__label,
.service-plan__price > p:first-child,
.service-options > div > p,
.service-cases__image > span,
.service-cases__meta p,
.service-detail__contact > p,
.service-hero__outline,
.service-hero__chip,
.service-hero__browser-bar span,
.service-hero__scroll,
.works-breadcrumb,
.works-kicker,
.works-archive-hero__type,
.works-archive-hero__rabbit span,
.works-archive-list__top > div > p,
.works-filter button,
.works-archive-card__meta p,
.works-archive-card__client,
.work-detail-hero__meta dt,
.work-detail-hero__meta > a,
.work-detail-side-title p,
.work-detail-browser > div span,
.work-detail-full__browser > div span,
.work-detail-pagination > a > span {
	text-transform: uppercase;
}

/* ---------- コアブロックの既定のスタイルを打ち消す ---------- */
.wp-block-image {
	margin: 0;
}

.wp-block-buttons > .wp-block-button {
	margin: 0;
}

.button > .wp-block-button__link,
.text-link > .wp-block-button__link,
.header-cta > .wp-block-button__link {
	border-radius: 0;
	box-shadow: none;
	height: auto;
	text-align: left;
	word-break: normal;
}

/* ---------- ボタンの矢印（デザインでは <svg class="arrow">） ---------- */
.button > .wp-block-button__link::after,
.text-link > .wp-block-button__link::after,
.header-cta > .wp-block-button__link::after,
.service-card__top::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--rish-arrow) center / contain no-repeat;
	mask: var(--rish-arrow) center / contain no-repeat;
	transition: transform 0.25s;
}

.button > .wp-block-button__link:hover::after,
.text-link > .wp-block-button__link:hover::after {
	transform: translate(4px);
}

.header-cta > .wp-block-button__link::after,
.service-card__top::after {
	transform: rotate(-45deg);
}

.header-cta > .wp-block-button__link:hover::after,
.service-card:hover .service-card__top::after {
	transform: rotate(-45deg) translate(3px);
}

/* ---------- ヘッダー ---------- */
.admin-bar .header {
	top: 32px;
}

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

.header-cta-wrap {
	justify-self: end;
}

/* ヘッダー・フッターのメニュー（rishalice2026/menu。<nav class="desktop-nav / footer__links"><ul class="rish-menu">） */
.desktop-nav > ul,
.footer__links > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.desktop-nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 52px);
}

/* コアのレイアウトの body .is-layout-flex { display: flex } より強くして隠す（隠れないとメニューボタンが2行目に落ちる） */
@media (width <= 1024px) {
	.header .desktop-nav,
	.header .header-cta-wrap {
		display: none;
	}
}

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

/* ---------- フッター ---------- */
/* ロゴ・メニュー・住所の上端をそろえる（メニューの行は高さいっぱいに広げず、上から詰めて並べる） */
.footer__main {
	align-items: start;
}

.footer__links {
	display: block;
}

.footer__links > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-content: start;
	align-items: start;
	gap: 20px 0;
}

.footer__links a,
.footer__address p {
	line-height: 1.6;
}

.footer__address p:first-child {
	margin-bottom: 12px;
}

/* コピーライト横のメニュー（固定ページのタイトルが日本語で出るので、英字のラベルより大きく、字間は詰める） */
.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 16px;
	letter-spacing: 0.04em;
}

.footer__legal a:hover {
	color: var(--orange);
}

/*
 * ---------- お問い合わせへの誘導：背景の円は WebGL の波紋（assets/js/ripple.js）。WebGL が使えないときは CSS の円のまま ----------
 * .contact はトップページ、.service-detail__contact は固定ページの「まだ言葉になっていなくても」
 */
.contact > .contact__ripple,
.service-detail__contact > .contact__ripple {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.contact.has-ripple::before,
.contact.has-ripple::after,
.service-detail__contact.has-ripple::before,
.service-detail__contact.has-ripple::after {
	display: none;
}

/* ==========================================================================
 * 固定ページのテンプレート（patterns/part-*.php）
 * ======================================================================= */

/* パンくずリスト：ページ名が日本語で入るので、英字のラベルより大きく、字間を詰める */
/* 大文字にするのは「Top」だけ（ページ名は「WordPress」などをそのまま見せる） */
.service-detail__breadcrumb > :not(:first-child) {
	text-transform: none;
}

.service-detail__breadcrumb {
	flex-wrap: wrap;
	font-size: 16px;
	letter-spacing: 0.06em;
}

/* こんな課題を解決します・よくあるご質問の番号（CSS カウンター） */
.service-needs ol {
	counter-reset: rish-need;
}

.service-needs li {
	counter-increment: rish-need;
}

.service-needs li::before {
	content: counter(rish-need, decimal-leading-zero);
}

.service-faq__content {
	counter-reset: rish-faq;
}

.service-faq details {
	counter-increment: rish-faq;
}

.service-faq summary::before {
	content: "Q" counter(rish-faq);
}

/* よくあるご質問の開閉の印（デザインでは <i> の前後に線を 2 本） */
.service-faq summary::after {
	content: "";
	justify-self: end;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 15px 1px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 1px 15px no-repeat;
	transition: background-size 0.25s;
}

.service-faq details[open] summary::after {
	background-size: 15px 1px, 1px 0;
}

/*
 * 流れ（PROJECT FLOW）：デザインは見出しの右に 5 枚並べるが、16px の文字だとカードが細すぎるため、
 * カードは見出しの下に横幅いっぱいで並べ、1 列に入らないときは折り返す（折り返したときは矢印を出さない）
 */
.service-flow {
	grid-template-columns: 1fr;
	row-gap: 48px;
}

.service-flow__content {
	max-width: none;
}

.service-flow__steps {
	container-type: inline-size;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

@container (width < 1150px) {
	.service-flow__arrow {
		display: none;
	}
}

/* プランのカード：文言が増えてもはみ出さないよう高さを固定せず、列の数は画面幅に合わせる（デザインは 3 列固定） */
.service-plan__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.service-plan__grid article {
	min-height: 0;
}

.service-plan__grid .text-link {
	margin-top: 24px;
}

/* お問い合わせへの誘導（アリス）のボタンの矢印 */
.service-detail__contact .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--rish-arrow) center / contain no-repeat;
	mask: var(--rish-arrow) center / contain no-repeat;
	transition: transform 0.25s;
}

.service-detail__contact .wp-block-button__link:hover::after {
	transform: translate(4px);
}

.service-detail__contact .wp-block-button__link {
	border-radius: 0;
	text-align: left;
	font-size: 16px;
}

/* ---------- お問い合わせフォーム（Snow Monkey Forms）をデザインのフォームに合わせる ---------- */
.service-form .snow-monkey-form {
	border-top: 3px solid var(--green);
	background: #fff;
	margin-top: 55px;
	padding: 10px clamp(22px, 4vw, 58px) 48px;
	box-shadow: 0 28px 70px #173c3417;
}

/* フォームの冒頭の説明文（フォームの設定で入れた文） */
.service-form .smf-form > p:first-child {
	margin-top: 28px;
	line-height: 1.9;
}

.service-form .smf-item {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 15px 35px;
	padding: 27px 0;
	border-bottom: 1px solid #dcdfd8;
}

.service-form .smf-item__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
}

.service-form .smf-item__label__required,
.service-form .smf-item__label__optional {
	padding: 3px 6px;
	border: 1px solid var(--green);
	background: var(--green);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	margin-left: 0.5em;
}

/* 任意は必須と同じ形で、白抜きにして見分ける */
.service-form .smf-item__label__optional {
	background: #fff;
	color: var(--green);
}

/* フォームの中の案内文（「わからない項目は空欄のままで…」「お送りいただいた時点では…」） */
.service-form .smf-form > p.smf-form-note {
	margin: 0;
	padding: 22px 0 0;
	color: #4a514e;
	font-size: 16px;
	line-height: 1.8;
}

.service-form .smf-form > p.smf-form-note:last-child {
	padding-top: 28px;
}

.service-form .smf-checkbox-control__label a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.service-form .smf-text-control__control,
.service-form .smf-textarea-control__control,
.service-form .smf-select-control__control {
	width: 100%;
	padding: 16px 18px;
	border: 1px solid #0000;
	border-radius: 0;
	background: var(--cream);
	box-shadow: none;
	color: var(--ink);
	font-size: 16px;
	outline: none;
	transition: background 0.2s, border-color 0.2s;
}

.service-form .smf-text-control__control:focus,
.service-form .smf-textarea-control__control:focus,
.service-form .smf-select-control__control:focus {
	border-color: var(--green);
	background: #fff;
}

.service-form .smf-textarea-control__control {
	min-height: 190px;
	resize: vertical;
}

.service-form .smf-checkboxes-control__control,
.service-form .smf-radio-buttons-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.service-form .smf-item__description,
.service-form .smf-control-note {
	margin-top: 8px;
	color: #4a514e;
	font-size: 16px;
	line-height: 1.8;
}

.service-form .smf-action {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 42px;
}

.service-form .smf-action .smf-button-control__control {
	min-width: 280px;
	min-height: 62px;
	padding: 0 25px;
	border: 0;
	border-radius: 0;
	background: var(--green);
	background-image: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.25s, transform 0.25s;
}

.service-form .smf-action .smf-button-control__control:hover {
	background: #b8962e;
	transform: translateY(-3px);
}

.service-form .smf-action .smf-button-control__control[data-action="back"] {
	border: 1px solid var(--ink);
	background: #fff;
	color: var(--ink);
}

@media (width <= 720px) {
	.service-form .smf-item {
		grid-template-columns: 1fr;
	}

	.service-form .snow-monkey-form {
		padding: 8px 22px 38px;
	}
}

/* ---------- 文章のページ（templates/page-text.html：プライバシーポリシーなど） ---------- */
.text-page__hero {
	background: var(--cream);
	padding: calc(88px + clamp(48px, 7vw, 96px)) 7.5vw clamp(48px, 6vw, 80px);
}

.text-page__title {
	margin-top: 28px;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.4;
}

.text-page__content {
	padding: clamp(56px, 7vw, 100px) 22px;
	font-size: 16px;
	line-height: 2;
}

.text-page__content > * + * {
	margin-top: 1.4em;
}

.text-page__content h2 {
	margin-top: 2.4em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}

.text-page__content h3 {
	margin-top: 2em;
	font-size: 20px;
	font-weight: 500;
}

.text-page__content ul,
.text-page__content ol {
	padding-left: 1.5em;
	list-style: revert;
}

.text-page__content a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.text-page__content table {
	width: 100%;
	border-collapse: collapse;
}

.text-page__content th,
.text-page__content td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.text-page__content th {
	width: 28%;
	background: var(--cream);
	font-weight: 500;
}

@media (width <= 720px) {
	.text-page__content th,
	.text-page__content td {
		display: block;
		width: auto;
	}
}

/* ---------- 見出しと説明文を横に並べる箇所：狭いときは折り返す ---------- */
.section-heading > div:last-child {
	flex-wrap: wrap;
	gap: 24px 48px;
}

/* ---------- トップ：ファーストビュー ---------- */
/* 2 行目（em）は 1.1 倍で下に線が付くので、行間は詰めて 2 行目の下にだけ余白を足す（1 行目との間が空きすぎないように） */
.hero h1 {
	line-height: 1.15;
}

.hero h1 em {
	display: inline-block;
	margin-bottom: 0.22em;
	line-height: 1.15;
}

/* ---------- トップ：私たちについて（注記を絶対配置から通常の流れにする） ---------- */
.intro {
	min-height: 0;
}

.intro__note {
	position: static;
	margin-top: clamp(48px, 6vw, 80px);
}

@media (width <= 720px) {
	.intro {
		padding-bottom: 80px;
	}
}

/* ---------- トップ：こんな課題はありませんか？（番号は CSS カウンター） ---------- */
.challenges ul {
	counter-reset: rish-challenge;
}

.challenges li {
	counter-increment: rish-challenge;
}

.challenges li::before {
	content: counter(rish-challenge, decimal-leading-zero);
}

/* ---------- トップ：4つの支援領域（見出しのリンクをカード全体に広げる） ---------- */
.service-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.service-card__top::after {
	justify-self: end;
}

/* 番号は明るい背景用の濃い金色（build-css.py）。マウスを乗せて背景が緑になったときは元の金色に戻す */
.service-card:hover .service-card__number {
	color: var(--orange);
}

/* 支援内容のカード：番号（金色）とラベル（灰色）は、緑の背景でも読める明るい色にする */
.service-support__grid article:hover .service-support__number > p:first-child {
	color: #dccfb2;
}

.service-support__grid article:hover .service-support__number > p:last-child:not(:first-child) {
	color: #c6d2cd;
}

/* タグはカードの下に固定（絶対配置）せず、本文の下に並べる。本文の行数が増えても重ならない */
.service-card {
	display: flex;
	flex-direction: column;
}

.service-card__tags {
	position: static;
	margin-top: auto;
	padding-top: 28px;
}

@media (width <= 1240px) {
	.service-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width <= 720px) {
	.service-list {
		grid-template-columns: 1fr;
	}
}

/*
 * ---------- トップ：制作実績 ----------
 * デザインは 3 枚を重ねて扇状に並べるが、後ろのカードの文字が隠れる・重なるため、
 * 傾きと奥行きは残して横に並べる。900px 以下は縦に並べる。
 */
.works-stage {
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
	height: auto;
	padding-bottom: 64px;
}

.work-card,
.work-card--1,
.work-card--2,
.work-card--3 {
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	margin: 0;
}

/*
 * 重ねていた頃の 3D の設定（preserve-3d）が残ると、マウスの当たり判定が傾いた立体のままになるため平面に戻し、
 * 奥行きはカードごとの perspective() で付ける
 */
.works-stage,
.work-card {
	transform-style: flat;
}

.works-stage {
	perspective: none;
}

.work-card--1 {
	transform: perspective(1600px) rotateY(10deg) rotate(-2deg);
}

.work-card--2 {
	transform: translateY(-4%);
}

.work-card--3 {
	transform: perspective(1600px) rotateY(-10deg) rotate(2deg);
}

.work-card--1:hover {
	transform: perspective(1600px) rotateY(4deg) rotate(-1deg) translateY(-8px);
}

.work-card--2:hover {
	transform: translateY(calc(-4% - 8px));
}

.work-card--3:hover {
	transform: perspective(1600px) rotateY(-4deg) rotate(1deg) translateY(-8px);
}

/* ほかのカードを暗くするのは、どれかのカードに乗っているときだけ（デザインは並びの範囲全体に乗ったとき） */
.works-stage:hover .work-card:not(:hover) {
	filter: none;
}

.works-stage:has(.work-card:hover) .work-card:not(:hover) {
	filter: brightness(0.76) saturate(0.7);
}

/* ふわふわ浮かせる（傾きの transform とは別の translate で動かす）。マウスが乗ったら止める */
@keyframes rish-work-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -10px;
	}
}

.work-card {
	animation: rish-work-float 6s ease-in-out infinite;
}

.work-card--2 {
	animation-delay: -2s;
}

.work-card--3 {
	animation-delay: -4s;
}

.work-card:hover {
	animation-play-state: paused;
}

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

@media (width <= 900px) {
	.works-stage {
		grid-template-columns: 1fr;
		gap: 54px;
		perspective: none;
		padding-bottom: 0;
	}

	.works-stage::before,
	.works-stage__guide {
		display: none;
	}

	.work-card,
	.work-card--1,
	.work-card--2,
	.work-card--3,
	.work-card--1:hover,
	.work-card--2:hover,
	.work-card--3:hover {
		transform: none;
	}
}

/* ---------- 固定ページ：テンプレートに足した部品（tools/parts.py） ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ファーストビュー：画像の無いページ（文字だけ）・イラストや写真をそのまま見せるページ */
.service-hero--simple {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.service-hero--simple .service-hero__copy {
	max-width: 1100px;
	padding-bottom: 100px;
}

.service-hero__lead + .service-hero__lead {
	margin-top: 1em;
}

.service-hero__visual--picture .service-hero__picture {
	position: absolute;
	inset: 14% 16%;
	z-index: 2;
	margin: 0;
}

.service-hero__visual--picture .service-hero__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 写真の枠は画面幅によらず正方形（枠の比率が変わると写真の切れ方が変わるため）。正方形の写真なら切れずに収まる */
.service-hero__visual--picture .service-hero__picture.is-photo {
	inset: auto;
	top: 50%;
	left: 50%;
	width: min(72%, 560px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	box-shadow: 0 45px 90px #00110d7a;
}

.service-hero__visual--picture .service-hero__picture.is-photo img {
	object-fit: cover;
}

/*
 * アイコンのファーストビュー：右側はアイコンだけなので、PC では左（ページ名・説明）を広くする（デザインは 44% : 56%）
 * 「PHP・サーバー対応」などの長いページ名も、文字を小さくせずに 1 行に収まる
 */
@media (width > 1024px) {
	.service-hero:has(.service-hero__picture.is-icon) {
		grid-template-columns: 58% 42%;
	}
}

/* 背景の大きな飾り文字（「Service」など）は 1 行のまま（はみ出した分は枠で切れる） */
.service-hero__outline,
.works-archive-hero__type,
.work-detail-hero__number {
	white-space: nowrap;
	overflow-wrap: normal;
}

/*
 * サービスのアイコン（濃い緑の線画）：緑の背景を敷かず、左と同じ明るい背景にアイコンをそのまま大きく置く
 * 背景の飾り（楕円・「Service」の文字・アリス）は、明るい背景で見える色にする
 */
.service-hero__visual--picture:has(.is-icon) {
	background: none;
}

.service-hero__visual--picture:has(.is-icon)::before {
	display: none;
}

.service-hero__visual--picture:has(.is-icon) .service-hero__orbit {
	border-color: #17211d1f;
}

.service-hero__visual--picture:has(.is-icon) .service-hero__outline {
	-webkit-text-stroke-color: var(--green);
	opacity: 0.08;
}

.service-hero__visual--picture:has(.is-icon) .service-hero__alice {
	filter: none;
	opacity: 0.18;
}

.service-hero__visual--picture .service-hero__picture.is-icon {
	inset: auto;
	top: 50%;
	left: 50%;
	width: min(56%, 380px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

@media (width <= 720px) {
	.service-hero__visual--picture:has(.is-icon) {
		min-height: 360px;
	}
}

.service-hero__list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: #49524e;
	font-size: 16px;
	line-height: 2;
}

.service-hero__list li {
	position: relative;
	padding-left: 1.2em;
}

.service-hero__list li::before {
	content: "";
	position: absolute;
	top: 1em;
	left: 0;
	width: 0.6em;
	height: 1px;
	background: var(--orange);
}

.service-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.service-hero__points li {
	padding: 8px 16px;
	border: 1px solid var(--orange);
	border-radius: 999px;
	background: #fff;
	font-size: 16px;
	line-height: 1.5;
}

.service-hero__points strong {
	color: #5b4d2f;
}

.service-hero__buttons {
	gap: 12px;
	margin-top: 32px;
}

.service-hero__buttons .button > .wp-block-button__link {
	min-width: 235px;
	margin: 0;
}

.service-hero__note {
	margin-top: 14px;
	color: #49524e;
	font-size: 16px;
}

/* 見出し（左）と本文（右）の 2 列：会社概要などの表・読み物・項目の並び・写真 */
.service-info,
.service-article,
.service-notes,
.service-gallery {
	display: grid;
	grid-template-columns: 20% minmax(0, 1fr);
	gap: 7vw;
}

.service-info__content,
.service-article__content,
.service-notes__content {
	min-width: 0;
	max-width: 920px;
}

.service-gallery__content {
	min-width: 0;
}

.service-info h2,
.service-article h2,
.service-notes h2,
.service-gallery h2 {
	margin: 0 0 45px;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: clamp(32px, 3.5vw, 52px);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.05em;
}

.service-info h2 small {
	display: block;
	margin-top: 8px;
	color: #49514e;
	font-size: 16px;
	letter-spacing: 0.02em;
}

.service-notes {
	background: var(--cream);
}

/* 会社概要などの表（左に項目名） */
.service-info__table.wp-block-table {
	margin: 0;
}

.service-info__table.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--line);
}

.service-info__table.wp-block-table td {
	padding: 22px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: #49514e;
	font-size: 16px;
	line-height: 1.9;
	vertical-align: top;
}

.service-info__table.wp-block-table td:first-child {
	width: 11em;
	padding-right: 24px;
	color: var(--green);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.service-info__table a,
.service-article__content a,
.service-faq a,
.service-hero__lead a,
.service-form__lead a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 料金表（項目・説明・金額） */
.service-price-table.wp-block-table {
	margin: 0;
}

.service-price-table.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.service-price-table.wp-block-table thead {
	border: 0;
}

.service-price-table.wp-block-table th,
.service-price-table.wp-block-table td {
	padding: 18px 20px;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: #49514e;
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
	vertical-align: top;
}

.service-price-table.wp-block-table thead th {
	background: var(--green-dark);
	color: #fff;
	font-weight: 500;
}

.service-price-table.wp-block-table th:last-child,
.service-price-table.wp-block-table td:last-child {
	width: 8em;
	text-align: right;
	white-space: nowrap;
}

.service-price-table.wp-block-table td:last-child {
	color: var(--green);
	font-weight: 600;
}

.service-price-table td strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
	font-weight: 600;
}

.service-plan__note {
	margin-top: 20px;
	color: #49524e;
	font-size: 16px;
	line-height: 1.8;
}

.service-plan__note + .service-plan__note {
	margin-top: 4px;
}

/* 読み物 */
.service-article__content > * + * {
	margin-top: 1.5em;
}

.service-article__content > h2 + * {
	margin-top: 0;
}

.service-article__content p,
.service-article__content li {
	color: #49514e;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 16px;
	line-height: 2;
}

.service-article__content ol,
.service-article__content ul {
	padding-left: 1.5em;
}

.service-article__content .service-article__checks {
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.service-article__checks li {
	position: relative;
	padding: 12px 0 12px 32px;
	border-bottom: 1px solid var(--line);
}

.service-article__checks li::before {
	content: "";
	position: absolute;
	top: calc(12px + 0.7em);
	left: 4px;
	width: 13px;
	height: 7px;
	border-bottom: 1.5px solid #7c6940;
	border-left: 1.5px solid #7c6940;
	transform: rotate(-45deg);
}

/* 本文の横に写真（会社紹介の「あなたらしく」など） */
.service-article__content--photo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
	gap: 32px clamp(32px, 5vw, 72px);
	align-items: start;
	max-width: 1100px;
}

.service-article__text > * + * {
	margin-top: 1.5em;
}

.service-article__text > h2 + * {
	margin-top: 0;
}

.service-article__photo {
	margin: 0;
	box-shadow: 0 30px 60px #173c3426;
}

.service-article__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.service-article__signature {
	text-align: right;
	letter-spacing: 0.1em;
}

.service-article__content p.service-article__signature {
	margin-top: 2.5em;
	color: var(--ink);
}

/* 写真付きの読み物が続くときは、写真を左右交互に置く */
@media (width > 900px) {
	.service-article:has(.service-article__content--photo) + .service-article .service-article__content--photo {
		grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
	}

	.service-article:has(.service-article__content--photo) + .service-article .service-article__photo {
		order: -1;
	}
}

@media (width <= 900px) {
	.service-article__content--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-article__photo {
		max-width: 420px;
	}
}

.service-article__image {
	max-width: 420px;
	margin-inline: auto;
}

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

/* 項目名と説明の並び */
.service-notes__list {
	border-top: 1px solid var(--line);
}

.service-notes__content > p {
	margin-bottom: 30px;
	color: #49514e;
	font-size: 16px;
	line-height: 2;
}

.service-notes__item {
	display: grid;
	grid-template-columns: minmax(0, 16em) minmax(0, 1fr);
	gap: 10px 40px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.service-notes__item h3 {
	color: var(--green);
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
}

.service-notes__item p {
	color: #49514e;
	font-size: 16px;
	line-height: 1.9;
}

/* こんな方におすすめ（番号の代わりにチェック）・課題のあとの説明 */
.service-needs ul {
	border-top: 1px solid #fff3;
	padding: 0;
	list-style: none;
}

.service-needs__check li::before {
	content: "";
	justify-self: center;
	width: 14px;
	height: 8px;
	border-bottom: 1.5px solid #dccfb2;
	border-left: 1.5px solid #dccfb2;
	transform: translateY(-3px) rotate(-45deg);
}

.service-needs__body > p {
	margin-top: 30px;
	color: #c6d2cd;
	font-size: 16px;
	line-height: 2;
}

/* 長い説明のある流れ（縦に並べる） */
.service-flow__steps--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.service-flow__steps--list .service-flow__step {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 28px;
	min-height: 0;
	padding: 28px clamp(20px, 3vw, 40px);
}

.service-flow__steps--list .service-flow__step:hover {
	transform: none;
}

.service-flow__steps--list .service-flow__step > :not(.service-flow__number) {
	grid-column: 2;
}

.service-flow__steps--list .service-flow__step h3 {
	margin: 10px 0 12px;
}

.service-flow__steps--list .service-flow__step > .service-flow__number + p {
	align-self: center;
}

/* 相談への誘導（料金表・流れのあと） */
.service-consult {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: 48px;
	padding: 32px clamp(20px, 4vw, 48px);
	border: 1px solid var(--line);
	background: #fff;
}

.service-consult > p {
	flex: 1 1 320px;
	font-size: 16px;
	line-height: 1.9;
}

.service-flow .service-consult {
	border-color: #ffffff2b;
	background: transparent;
}

.service-callout {
	margin-top: 56px;
	padding: 32px clamp(20px, 4vw, 48px);
	border-left: 3px solid var(--orange);
	background: #fff;
}

.service-callout h3 {
	margin-bottom: 12px;
	color: var(--green);
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

.service-callout p {
	font-size: 16px;
	line-height: 1.9;
}

.service-callout .wp-block-buttons {
	margin-top: 16px;
}

/* 支援内容のカードの中の箇条書き・リンク（マウスを乗せて背景が緑になっても読めるように） */
.service-support__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-support__list li {
	position: relative;
	padding: 4px 0 4px 1.2em;
	color: #49514e;
	font-size: 16px;
	line-height: 1.9;
}

.service-support__list li::before {
	content: "";
	position: absolute;
	top: calc(4px + 0.95em);
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--orange);
}

.service-support__grid article:hover li {
	color: #c6d2cd;
}

.service-support__grid .text-link {
	margin-top: 24px;
}

.service-support__grid article:hover .text-link > .wp-block-button__link {
	color: #fff;
}

/* リンクのあるカード（サービス案内の一覧）は、カード全体をクリックできるようにする（「詳しくはこちら」のリンクの範囲を広げる。::after は矢印） */
.service-support__grid .text-link > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.service-support__grid article:hover .text-link > .wp-block-button__link::after {
	transform: translate(4px);
}

.service-support__grid article:has(.text-link > .wp-block-button__link:focus-visible) {
	outline: 2px solid var(--orange);
	outline-offset: -2px;
}

/* サービスのアイコン（濃い緑の線画）。マウスを乗せて背景が緑になったときは白にする */
.service-support__grid .service-support__icon {
	width: 88px;
	margin: 36px 0 0;
}

.service-support__grid .service-support__icon img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.35s;
}

.service-support__grid article:hover .service-support__icon img {
	filter: brightness(0) invert(1);
}

.service-support__grid .service-support__icon + h3 {
	margin-top: 24px;
}

/* PC では、アイコンの右に見出しを並べて縦の中央で揃える（番号・本文・リンクは横幅いっぱい） */
@media (width > 1024px) {
	.service-support__grid article:has(> .service-support__icon) {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 20px;
		align-content: start;
	}

	.service-support__grid article:has(> .service-support__icon) > * {
		grid-column: 1 / -1;
	}

	.service-support__grid article > .service-support__icon {
		grid-column: 1;
		align-self: center;
		width: 72px;
		margin: 36px 0 20px;
	}

	.service-support__grid article > .service-support__icon + h3 {
		grid-column: 2;
		align-self: center;
		margin: 36px 0 20px;
	}
}

/*
 * 制作実績の Masonry（グラフィックデザイン。blocks/works/masonry.php）
 * 大きさは rishalice のとき（_masonry.scss）に合わせる：列の数は 2 → 3（641px〜）→ 5（1024px〜）、間隔は各項目の内側の余白、
 * 並び全体の幅は 1280px まで（PC で画像の幅が約 176px）
 */
.works-masonry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 1280px;
	margin: 60px -20px 0;
	padding: 0;
	list-style: none;
}

.works-masonry__item {
	width: 50%;
	margin-bottom: 20px;
	padding: 20px;
}

.works-masonry__item a {
	display: block;
}

.works-masonry__image {
	display: block;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 40px #173c341a;
}

.works-masonry__image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s;
}

.works-masonry__item a:hover .works-masonry__image img {
	transform: scale(1.04);
}

.works-masonry__title {
	display: block;
	margin-top: 12px;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.works-masonry__item a:hover .works-masonry__title {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (width > 640px) {
	.works-masonry {
		margin-inline: -30px;
	}

	.works-masonry__item {
		width: 33.333%;
		margin-bottom: 40px;
		padding: 30px;
	}
}

@media (width >= 1024px) {
	.works-masonry {
		margin-inline: -40px;
	}

	.works-masonry__item {
		width: 20%;
		padding: 40px;
	}
}

/* 写真の一覧 */
.service-gallery__content > p {
	color: #49514e;
	font-size: 16px;
	line-height: 2;
}

.service-gallery__content > p.service-gallery__more {
	margin-top: 48px;
}

.service-gallery__content > .wp-block-buttons {
	margin-top: 12px;
}

.service-gallery__images.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 10px;
	margin-top: 45px;
}

.service-gallery__images.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.service-gallery__images.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-faq__related {
	margin-top: 32px;
	padding: 18px 24px;
	border-left: 3px solid var(--orange);
	background: #fff;
	font-size: 16px;
	line-height: 1.9;
}

/* 同じ明るい背景のセクションが続くときは、上の余白を詰める（余白が 2 つ分になって間延びしないように） */
:is(.service-intro, .service-article, .service-info, .service-support, .service-cases, .service-gallery) + :is(.service-intro, .service-article, .service-info, .service-support, .service-cases, .service-gallery) {
	padding-top: 0;
}

/* 左の番号付きの見出しは、セクションの上に揃える（グリッドの高さいっぱいに伸びると縦の中央に来てしまう） */
.service-detail__section > .service-detail__side-heading,
.service-detail__section-head > .service-detail__side-heading {
	align-self: start;
}

/* カードが 4 枚のときは 2 列にして、1 枚だけ次の行に残らないようにする */
@media (width > 720px) {
	.service-support__grid:has(> article:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 保守プランのカード（inc/blocks-plans.php）：金額や項目が多いので 2 列まで */
.wp-plans.service-plan__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 24px;
}

.wp-plans.service-plan__grid:has(> article:only-child) {
	grid-template-columns: minmax(0, 560px);
}

/* PC では 4 つのプランを横に並べる */
@media (width >= 1280px) {
	.wp-plans.service-plan__grid:has(> article:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.wp-plans.service-plan__grid:has(> article:nth-child(4):last-child) article {
		padding-inline: 24px;
	}
}

.wp-plans .service-plan__index {
	align-self: flex-end;
}

.wp-plans .service-plan__index + h3 {
	margin-top: 8px;
}

/* 白いカードが背景に馴染みすぎないよう、上に線を引いて影を付ける。プレミアム（おすすめ）は濃い金色 */
.wp-plans article {
	display: flex;
	flex-direction: column;
	scroll-margin-top: 120px;
	border-top: 4px solid var(--green);
	box-shadow: 0 18px 40px #173c3414;
}

/* プレミアム（おすすめ）は金色で目立たせる（白い文字のコントラストは下がるが、色の印象を優先） */
.wp-plans {
	--rish-gold: #b8962e;
	--rish-gold-dark: #8a6d1c;
}

.wp-plans article.is-featured {
	border: 2px solid var(--rish-gold);
	border-top: 6px solid var(--rish-gold);
	background: linear-gradient(180deg, #fffaeb, #fff 40%);
	box-shadow: 0 25px 55px #b8962e40;
}

.wp-plans article.is-featured .service-plan__recommend {
	background: var(--rish-gold);
}

.wp-plans article.is-featured .service-plan__price {
	color: var(--rish-gold-dark);
}

.wp-plans article.is-featured .button--primary > .wp-block-button__link {
	background: var(--rish-gold);
}

.wp-plans article.is-featured .button--primary > .wp-block-button__link:hover {
	background: var(--rish-gold-dark);
}

.wp-plans h3 {
	color: var(--ink);
	font-size: 26px;
	line-height: 1.4;
}

.wp-plans .service-plan__price {
	margin-bottom: 0;
}

.wp-plans .service-plan__price > p:last-child {
	font-size: 26px;
	line-height: 1.4;
}

/* 支払い方法ごとの金額は、薄い色の枠に入れて見分けやすく */
.wp-plans__payments {
	display: grid;
	gap: 8px;
	margin: 16px 0 22px;
}

.wp-plans__payment {
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	background: #f4f2eb;
}

.wp-plans article.is-featured .wp-plans__payment {
	background: #faefc9;
}

.wp-plans__payment-label {
	color: var(--green);
	font-size: 16px;
	font-weight: 600;
}

.wp-plans__payment-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.wp-plans__payment-label em {
	padding: 2px 8px;
	background: var(--green-dark);
	color: #fff;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.05em;
}

.wp-plans__payment-price {
	color: var(--ink);
	font-size: 20px;
}

.wp-plans__payment-price del {
	margin-right: 6px;
	color: #49524e;
	font-size: 16px;
}

/* おすすめのラベル：日本語が入るので 16px にし、白い文字が読める濃い金色にする（デザインは英字 14px・金色） */
.service-plan__recommend {
	background: #5b4d2f;
	font-size: 16px;
	letter-spacing: 0.06em;
}

.wp-plans__payment-price small {
	color: #49524e;
	font-size: 16px;
}

/* 4 つ並べると幅が狭いので、税込の金額や条件は金額の下に 1 行ずつ */
.wp-plans__payment-price small {
	display: block;
}

.wp-plans__text {
	margin-bottom: 12px;
	padding: 12px 14px;
	background: #eef1ec;
	color: var(--green);
	font-size: 16px;
	line-height: 1.8;
}

.wp-plans__recommend {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--orange);
}

.wp-plans__recommend > p {
	color: #5b4d2f;
	font-weight: 600;
}

.wp-plans__note {
	margin-top: 10px;
	color: #49524e;
	font-size: 16px;
	line-height: 1.8;
}

.wp-plans__apply {
	margin-top: auto;
	padding-top: 28px;
	text-align: center;
}

.wp-plans__apply > p {
	margin-bottom: 12px;
	font-weight: 600;
}

.wp-plans__apply .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 申込みフォームの「ご希望のプラン」：折り返すときに「（税込）」だけが次の行に残らないように */
.js-wp-plan-form .smf-radio-button-control__label {
	text-wrap: pretty;
}

/* 「12ヶ月一括払い」が 1 行に入る幅（約 200px）を取れないときは、ボタンを縦に積む */
.wp-plans__apply .wp-block-button {
	flex: 1 1 200px;
}

.wp-plans__apply .button > .wp-block-button__link {
	width: 100%;
	min-width: 0;
	margin: 0;
	gap: 12px;
	padding: 0 16px;
	white-space: nowrap;
}

.wp-plans__compare {
	margin-top: 70px;
}

.wp-plans__compare h3 {
	margin-bottom: 12px;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 23px;
	font-weight: 500;
	text-align: center;
}

.wp-plans__compare-hint {
	margin-bottom: 12px;
	color: #49524e;
	font-size: 16px;
	text-align: center;
}

/* relative：表の中の読み上げ用の文字（絶対配置）がスクロールの外に出て、ページ全体が横にスクロールしないように */
.wp-plans__compare-scroll {
	position: relative;
	overflow-x: auto;
}

.wp-plans__compare-scroll:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.wp-plans__compare table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: #fff;
	font-size: 16px;
	line-height: 1.6;
}

.wp-plans__compare th,
.wp-plans__compare td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.wp-plans__compare thead th {
	background: var(--green);
	color: #fff;
	font-weight: 500;
	text-align: center;
}

.wp-plans__compare thead small {
	display: block;
	font-size: 16px;
}

.wp-plans__compare-name {
	display: block;
	margin-bottom: 4px;
	font-size: 22px;
	letter-spacing: 0.04em;
}

.wp-plans__compare thead .wp-plans__compare-tax {
	color: #e3ebe7;
}

/* プレミアム（おすすめ）の列：本番（rishalice）と同じく金色 */
.wp-plans__compare thead th.is-featured {
	background: #b8962e;
}

.wp-plans__compare thead th.is-featured .wp-plans__compare-tax {
	color: #fff;
}

.wp-plans__compare td.is-featured {
	background: #fdf6de;
}

.wp-plans__compare tr.is-highlight td.is-featured {
	background: #f5e3a3;
}

.wp-plans__compare tbody th {
	position: sticky;
	left: 0;
	width: 16em;
	background: #fff;
	font-weight: 400;
	text-align: left;
}

.wp-plans__compare thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.wp-plans__compare td {
	color: var(--green);
	font-size: 20px;
	text-align: center;
}

.wp-plans__compare tr.is-highlight th,
.wp-plans__compare tr.is-highlight td {
	background: #eef1ec;
}

.wp-plans__compare tr.is-highlight th {
	color: var(--green);
	font-weight: 600;
}

/* AI 生成プランの申し込みフォームと見積り金額（assets/js/ai-plan-total.js） */
/* 見積り金額を横に並べるので、見出し（01 Application など）は上に置いて横幅を広く使う */
.service-form:has(.ai-plan-form) {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 45px;
}

.service-form__content:has(.ai-plan-form) {
	max-width: none;
}

.ai-plan-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 40px;
	align-items: start;
}

.ai-plan-form.is-estimate-hidden {
	grid-template-columns: minmax(0, 1fr);
}

.ai-plan-form.is-estimate-hidden .ai-plan-form__side {
	display: none;
}

.ai-plan-form__side {
	position: sticky;
	top: 110px;
}

.p-ai-plan--total {
	padding: 24px;
	border: 1px solid var(--line);
	background: #fff;
}

.p-ai-plan--total--confirm {
	margin: 24px 0;
}

.p-ai-plan--total__title {
	margin-bottom: 12px;
	color: var(--green);
	font-weight: 600;
}

.p-ai-plan--total__list__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
	line-height: 1.7;
}

.p-ai-plan--total__list__row dd {
	margin: 0;
	white-space: nowrap;
}

.p-ai-plan--total__sum {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 14px;
	font-weight: 600;
}

.p-ai-plan--total__sum__price {
	color: var(--green);
	font-size: 24px;
}

.p-ai-plan--total__note {
	margin-top: 12px;
	color: #49524e;
	font-size: 16px;
	line-height: 1.8;
}

@media (width <= 1024px) {
	.service-info,
	.service-article,
	.service-notes,
	.service-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: 45px;
	}

	.ai-plan-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.ai-plan-form__side {
		position: static;
	}
}

@media (width <= 720px) {
	.service-info h2,
	.service-article h2,
	.service-notes h2,
	.service-gallery h2 {
		font-size: 31px;
	}

	.service-hero--simple .service-hero__copy {
		padding-bottom: 70px;
	}

	/* 縦に並ぶ幅では、ページ名が短くても中央に寄らず左に揃える（デザインは align-self: center） */
	.service-hero__copy {
		align-self: stretch;
	}

	.service-info__table.wp-block-table tr {
		display: block;
		padding: 18px 0;
		border-bottom: 1px solid var(--line);
	}

	.service-info__table.wp-block-table td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.service-info__table.wp-block-table td:first-child {
		width: auto;
		margin-bottom: 6px;
	}

	.service-price-table.wp-block-table th,
	.service-price-table.wp-block-table td {
		padding: 14px 12px;
	}

	.service-price-table.wp-block-table th:last-child,
	.service-price-table.wp-block-table td:last-child {
		width: 7.5em;
	}

	.service-notes__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-flow__steps--list .service-flow__step {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-flow__steps--list .service-flow__step > :not(.service-flow__number) {
		grid-column: 1;
	}

	.service-flow__steps--list .service-flow__step h3 {
		margin-top: 20px;
	}

	.service-flow__steps--list .service-flow__step > .service-flow__number + p {
		margin-top: 16px;
	}

	.wp-plans__compare tbody th {
		width: 9em;
	}
}

@media (width > 720px) {
	.wp-plans__compare-hint {
		display: none;
	}
}

/* ---------- 制作実績：一覧ページ（blocks/works/archive.php）と詳細ページ（blocks/work-detail.php） ---------- */
.works-archive-hero .service-detail__breadcrumb {
	margin-bottom: 0;
}

/*
 * 文字だけのファーストビュー（制作実績・会社紹介・サービス案内・お問い合わせ・ブログ）
 * リード文が長いページでも右下の白ウサギに重ならないよう、PC では文字の幅を白ウサギの手前までにし、
 * スマホでは白ウサギを文字の下（通常の流れ）に置く
 */
@media (width > 720px) {
	.works-archive-hero > div:first-child {
		max-width: min(760px, 100% - 140px);
	}
}

@media (width <= 720px) {
	/* 6 文字のページ名（サービス案内・お問い合わせ）が 1 行に入る大きさ */
	.works-archive-hero h1 {
		font-size: clamp(40px, 14vw, 68px);
	}

	.works-archive-hero__rabbit {
		position: relative;
		right: auto;
		bottom: auto;
		justify-content: flex-end;
		margin-top: 40px;
	}
}

/* パンくずが入りきらないときは項目ごとに折り返す（長い実績名だけは途中で折り返してよい） */
.works-breadcrumb {
	flex-wrap: wrap;
	row-gap: 4px;
}

.works-breadcrumb > :not(:last-child) {
	flex: none;
}

/* 絞り込みのボタンは JS が表示する */
.works-filter[hidden],
.works-archive__group[hidden] {
	display: none;
}

/* 種類ごとのまとまり（Web サイト・グラフィックデザイン・写真） */
.works-archive__group + .works-archive__group {
	margin-top: 160px;
}

.works-archive__head {
	margin-bottom: 60px;
}

.works-archive__head h2 {
	margin-top: 18px;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 500;
	line-height: 1.5;
}

.works-archive__group .works-masonry,
.works-archive__group .service-gallery__images.wp-block-gallery.has-nested-images {
	margin-top: 0;
}

.works-archive__more {
	margin-top: 40px;
	color: #49514e;
	font-size: 16px;
	line-height: 2;
}

.works-archive__more a {
	margin-left: 0.5em;
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (width <= 720px) {
	.works-archive__group + .works-archive__group {
		margin-top: 100px;
	}

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

/* 狭い画面では、ボタンを横にスクロールさせず 2 行に折り返す */
@media (width <= 720px) {
	.works-filter {
		flex-wrap: wrap;
		gap: 14px 24px;
		overflow: visible;
	}
}

/* マウスを乗せたときは、画像だけを白い枠の内側で拡大する（緑のカバーと VIEW PROJECT は出さない） */
.works-archive-card__image::after {
	content: none;
}

.works-archive-card__frame {
	height: 100%;
	overflow: hidden;
}

.works-archive-card:focus-visible .works-archive-card__image img {
	transform: scale(1.035);
}

/* 2 列の段違い（右の列を下げる）は is-shifted で付ける */
.works-archive-card:nth-child(2n) {
	margin-top: 0;
}

@media (width > 720px) {
	.works-archive-card.is-shifted {
		margin-top: 125px;
	}
}

/* 概要の本文（投稿の本文）：段落だけなら 2 段組み（デザインのまま）、画像やリストがあれば 1 段 */
.work-detail-overview__text {
	display: block;
	columns: 2;
	column-gap: 7%;
	color: #49514e;
}

.work-detail-overview__text:has(> :not(p)) {
	columns: auto;
	max-width: 760px;
}

.work-detail-overview__text > * + * {
	margin-top: 1em;
}

.work-detail-overview__text > p {
	break-inside: avoid;
}

/* 長いタイトル（blocks/work-detail.php で判定） */
.work-detail-hero h1.is-long {
	font-size: clamp(32px, 4.4vw, 64px);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* CLIENT などの項目名（デザインの 60px では、大きくした文字が折り返す） */
.work-detail-hero__meta dl > div {
	grid-template-columns: 6.5em minmax(0, 1fr);
}

.work-detail-overview__text a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.work-detail-overview__text :is(ul, ol) {
	padding-left: 1.4em;
	list-style: disc;
	line-height: 2;
}

.work-detail-overview__text ol {
	list-style: decimal;
}

.work-detail-overview__text img {
	max-width: 100%;
	height: auto;
}

@media (width <= 720px) {
	.work-detail-overview__text {
		columns: auto;
	}
}

/* 印刷物は縦長の画像が多いので、ブラウザの枠を付けず、画面の高さに収める */
.work-detail-showcase--print .work-detail-browser {
	width: fit-content;
}

.work-detail-showcase--print .work-detail-browser > img {
	width: auto;
	max-width: 100%;
	max-height: 80vh;
}

.work-detail-full__browser + .work-detail-full__browser {
	margin-top: 60px;
}

/* 前後の実績：前（または次）がないときも、真ん中の ALL WORKS の両側に線を引く */
.work-detail-pagination > a:first-child,
.work-detail-pagination > a:last-child {
	border-inline: 0;
}

.work-detail-pagination__all {
	grid-template-columns: auto 5px 5px auto;
	align-self: stretch;
	align-content: center;
	border-inline: 1px solid var(--line);
}

.work-detail-pagination__all i:nth-of-type(odd) {
	grid-column: 2;
}

.work-detail-pagination__all i:nth-of-type(even) {
	grid-column: 3;
}

.work-detail-pagination__all span {
	white-space: nowrap;
	text-align: center;
}

@media (width <= 720px) {
	.work-detail-pagination {
		grid-template-columns: 1fr 88px 1fr;
	}

	.work-detail-pagination__all {
		padding: 20px 6px !important;
	}

	.work-detail-pagination__all span {
		white-space: normal;
	}
}

/* ---------- ブログ：一覧（templates/home.html・archive.html）と記事（single.html）。inc/blog.php ---------- */

/* カテゴリーの切り替え：制作実績の一覧の絞り込みと同じ見た目（こちらはカテゴリーのページへのリンク） */
.blog-categories {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 14px 42px;
	margin: 60px 0 0;
}

.blog-categories a {
	position: relative;
	padding: 0 2px 16px;
	color: #4c514e;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.15em;
}

.blog-categories a::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transition: transform 0.25s;
}

.blog-categories a[aria-current],
.blog-categories a:hover {
	color: var(--green);
}

.blog-categories a[aria-current]::after,
.blog-categories a:hover::after {
	transform: scaleX(1);
}

.blog-categories a span {
	margin-left: 6px;
	color: #5b4d2f;
	font-family: "Playfair Display", serif;
	font-size: 16px;
	font-style: italic;
	vertical-align: super;
}

.blog-categories a:first-child {
	text-transform: uppercase;
}

@media (width <= 720px) {
	.blog-categories {
		gap: 14px 24px;
		margin-top: 40px;
	}
}

/* カード：カテゴリー名は日本語もあるので大文字にしない（英字のラベルと同じ字間のまま） */
.blog-list .service-cases__meta p {
	text-transform: none;
}

.blog-list .service-cases h3 {
	line-height: 1.6;
}

/* アイキャッチは 2:1 で登録しているので、枠も 2:1 にして切り抜かずに見せる（比率が少し違う画像も見切れないよう contain） */
.blog-list .service-cases__image {
	aspect-ratio: 2 / 1;
	background: var(--cream);
}

.blog-list .service-cases__image img {
	object-fit: contain;
}

.blog-list__empty {
	margin-top: 60px;
	font-size: 16px;
}

/* ページ送り（paginate_links） */
.blog-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 80px;
}

.blog-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-size: 16px;
}

.blog-pagination a.page-numbers:hover {
	border-color: var(--green);
	color: var(--green);
}

.blog-pagination .page-numbers.current {
	border-color: var(--green);
	background: var(--green);
	color: #fff;
}

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

/* 記事：日付とカテゴリー */
.blog-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-top: 28px;
	font-size: 16px;
}

.blog-post__meta time {
	color: #5b4d2f;
	font-family: "Playfair Display", serif;
	font-style: italic;
}

.blog-post__meta span {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-post__meta a {
	padding: 2px 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--green);
	font-size: 14px;
	letter-spacing: 0.08em;
}

.blog-post__meta a:hover {
	border-color: var(--green);
}

.blog-post .text-page__title {
	margin-top: 16px;
}

/* アイキャッチ：本文より少し広く */
.blog-post__thumbnail.wp-block-post-featured-image {
	max-width: 960px;
	margin: clamp(48px, 6vw, 80px) auto 0;
	padding: 0 22px;
}

.blog-post__thumbnail img {
	width: 100%;
	height: auto;
	box-shadow: 0 24px 55px #0f2a241f;
}

/* 記事の表は見出しの行（thead）があるので、プライバシーポリシーのような項目名の幅・背景にしない。狭い画面では横にスクロール */
.blog-post .text-page__content .wp-block-table {
	overflow-x: auto;
}

.blog-post .text-page__content th {
	width: auto;
}

/* 表のブロックの既定の黒い枠線を、文章のページと同じ細い線にする */
.blog-post .text-page__content .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--line);
}

.blog-post .text-page__content .wp-block-table :is(thead, tfoot) {
	border: 0;
}

.blog-post .text-page__content .wp-block-table thead th {
	border-bottom-color: var(--green);
}

.blog-post .text-page__content h4 {
	margin-top: 1.8em;
	padding-left: 12px;
	border-left: 3px solid var(--orange);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
}

.blog-post .text-page__content :is(th, td) {
	min-width: 8em;
}

@media (width <= 720px) {
	.blog-post .text-page__content th,
	.blog-post .text-page__content td {
		display: table-cell;
	}
}

.blog-post .text-page__content img {
	height: auto;
}

/* タグ */
.blog-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	max-width: 760px;
	margin: 0 auto clamp(56px, 7vw, 100px);
	padding: 0 22px;
	font-size: 14px;
}

.blog-post__tags a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- お客様の声（保守サポートのページ。tools/parts.py の voices） ---------- */
.service-voice__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 75px;
}

.service-voice__item {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3vw, 44px);
	border: 1px solid var(--line);
	background: #fff;
}

.service-voice__item h3 {
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

.service-voice__stars {
	margin-top: 8px;
	color: #b8962e;
	font-size: 18px;
	letter-spacing: 0.15em;
	line-height: 1.4;
}

.service-voice__quote {
	flex: 1;
	margin: 22px 0 0;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--line);
}

.service-voice__quote p {
	color: #3d4542;
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 16px;
	line-height: 2;
}

.service-voice__quote p + p {
	margin-top: 1em;
}

.service-voice__source {
	margin-top: 24px;
	color: #4a514e;
	font-size: 14px;
}

.service-voice > .wp-block-buttons {
	justify-content: flex-end;
	margin-top: 20px;
}

@media (width <= 760px) {
	.service-voice__list {
		grid-template-columns: 1fr;
		margin-top: 50px;
	}

	.service-voice > .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* ---------- 画面下の相談ボタン（保守サポートのページ。inc/maintenance.php・assets/js/wp-plan.js） ---------- */
.consult-bar {
	position: fixed;
	z-index: 45;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 10px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: #faf9f5f5;
	box-shadow: 0 -6px 20px #17211d14;
	visibility: hidden;
	transform: translateY(110%);
	transition: transform 0.3s, visibility 0.3s;
}

.consult-bar.is-visible {
	visibility: visible;
	transform: none;
}

.consult-bar a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--green);
	font-family: var(--rish-font-ja), sans-serif;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.consult-bar__consult {
	background: var(--green);
	color: #fff;
}

.consult-bar__tel {
	background: #fff;
	color: var(--green);
}

.consult-bar__consult:hover {
	border-color: #b8962e;
	background: #b8962e;
}

.consult-bar__tel:hover {
	background: var(--green);
	color: #fff;
}

.consult-bar a:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

/* バーの高さぶん、フッターの下に余白を足す（最後の文字がバーに隠れないように） */
.has-consult-bar .footer {
	padding-bottom: calc(25px + 73px + env(safe-area-inset-bottom));
}

/* 本番の reCAPTCHA のバッジ（右下に固定・最前面）がバーのボタンに重ならないよう、バーの上に出す */
.has-consult-bar .grecaptcha-badge {
	bottom: calc(14px + 73px + env(safe-area-inset-bottom)) !important;
}

@media (width >= 768px) {
	.consult-bar {
		right: 24px;
		bottom: calc(24px + env(safe-area-inset-bottom));
		left: auto;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.consult-bar a {
		min-height: 58px;
		padding: 0 32px;
		box-shadow: 0 8px 24px #17211d33;
	}

	.consult-bar .consult-bar__tel {
		display: none;
	}

	.has-consult-bar .footer {
		padding-bottom: calc(25px + 82px + env(safe-area-inset-bottom));
	}

	.has-consult-bar .grecaptcha-badge {
		bottom: calc(24px + 58px + 14px + env(safe-area-inset-bottom)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.consult-bar {
		transition: none;
	}
}