@charset "UTF-8";
/* =========================================================
   Ironweb theme - main.css
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
	/* colors */
	--c-bg: #ffffff;
	--c-text: #5d5d5d;
	--c-heading: #3f3121;   /* 濃茶（見出し） */
	--c-accent: #c12a15;    /* 赤 */
	--c-accent-2: #a71e0a;  /* 濃い赤 */
	--c-dark: #4c211b;      /* ダークブラウン（枠・CTA） */
	--c-muted: #c5c5c5;     /* 英字グレー */
	--c-cream: #f7f3ee;     /* 生成り背景 */
	--c-line: #e3ded7;

	/* type */
	--font-jp: "dnp-shuei-gothic-gin-std", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--font-en: "Unbounded", sans-serif;

	/* layout */
	--container: 1240px;
	--gutter: clamp(20px, 5vw, 60px);
	--header-h: 104px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); overflow-x: clip; }
body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--font-jp);
	color: var(--c-text);
	background: var(--c-bg);
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 出現アニメ / モーション ---------- */
.u-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); }
.u-reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.u-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .5em;
	padding: 14px 40px;
	border-radius: 40px;
	font-family: var(--font-jp);
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.btn--outline { border: 1px solid var(--c-dark); color: var(--c-heading); background: transparent; }
.btn--outline:hover { background: var(--c-heading); color: #fff; }
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { opacity: .88; }
.btn--line { background: #06c755; color: #fff; }
.btn--line:hover { opacity: .88; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header__inner {
	max-width: 1440px; margin-inline: auto;
	display: flex; align-items: center; gap: 32px;
	padding: 34px var(--gutter) 20px;
}
.site-header__brand { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.site-header__tagline { color: var(--c-accent-2); font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.site-header__logo, .site-header .custom-logo { width: 163px; height: auto; }

.global-nav { margin-left: auto; }
.global-nav__list { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 34px); }
.global-nav__item a {
	font-weight: 700; font-size: 14px; letter-spacing: .14em; color: var(--c-heading);
	position: relative; padding-bottom: 4px;
}
.global-nav__item a::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
	background: var(--c-accent); transition: width .25s ease;
}
.global-nav__item a:hover::after { width: 100%; }

.site-header__contact { padding: 10px 32px; font-size: 15px; }

/* scrolled state */
.site-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 2px 18px rgba(63,49,33,.08); backdrop-filter: blur(6px); }
.site-header.is-scrolled .site-header__inner { padding-top: 12px; padding-bottom: 12px; }

/* hamburger */
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 6px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--c-heading); margin-inline: auto; transition: transform .25s ease, opacity .25s ease; }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 99; background: rgba(255,255,255,.98); display: grid; place-items: center; }
.drawer[hidden] { display: none; }
.drawer__nav ul { display: flex; flex-direction: column; gap: 28px; text-align: center; }
.drawer__nav a { font-weight: 700; font-size: 20px; letter-spacing: .12em; color: var(--c-heading); }

/* =========================================================
   First View
   ========================================================= */
.fv {
	position: relative; overflow: hidden; background: #fff;
	padding-top:10px;
}
.fv__bg {
	position: absolute; left: 0; top: 0; width: 45%; height: 100%;
	background-size: cover; background-position: center; opacity: .4; z-index: 0;
}
.fv__inner {
	position: relative; z-index: 2;
	max-width: 1440px; margin-inline: auto; padding: 30px 0 30px var(--gutter);
	display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: clamp(20px, 3vw, 40px);
	align-items: center; min-height: 700px;
}
.fv__copy { padding-left: clamp(0px, 2.5vw, 44px); }
.fv__title {
	font-weight: 700; color: var(--c-heading);
	font-size: clamp(23px, 4.2vw, 38px); letter-spacing: .16em; line-height: 2.1;
}
.fv__title-line { display: block; }
/* 炎マークは行からはみ出して大きく見せる（行送りには影響させない）。核は炎の中心に配置 */
.fv__flame { position: relative; display: inline-block; width: 2.15em; height: 1em; vertical-align: .20em; margin-inline: .06em; }
.fv__flame img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; max-width: none; }
.fv__flame-text { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + .06em), calc(-50% + .26em)); line-height: 1; color: #fff; font-weight: 700; font-size: 1.02em; letter-spacing: 0; z-index: 1; }

.fv__subs { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fv__sub {
	display: inline-block; background: #fff; border-bottom: 1px solid var(--c-accent);
	color: var(--c-heading); font-weight: 700; font-size: 18px; letter-spacing: .34em;
	padding: 10px 10px 13px;
}

/* ---- 実績スライダー（右端まで／2枚ずつ・最大4枚） ---- */
.fv__collage { margin-right: min(0px, calc((1440px - 100vw) / 2)); }
.fv__slider { overflow: hidden; }
.fv__track { display: flex; transition: transform .5s ease; }
.fv__slide { flex: 0 0 100%; display: flex; gap: 2.2%; }
.fv__shot {
	flex: 1 1 0; width: 50%; border-radius: 4px;
	box-shadow: 0 18px 40px rgba(63,49,33,.14);
	aspect-ratio: 374 / 527; object-fit: cover; object-position: top;
}
.fv__shot--empty { visibility: hidden; box-shadow: none; }
.fv__dots { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.fv__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--c-line); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.fv__dot.is-active { background: var(--c-accent); transform: scale(1.2); }

/* 常時流れる英字マーキー */
.fv__marquee { position: relative; z-index: 1; overflow: hidden; width: 100%; margin-top: -40px; }
.fv__marquee-track { display: flex; width: max-content; will-change: transform; animation: fv-marquee 45s linear infinite; }
.fv__bigtext {
	font-family: var(--font-en); font-weight: 400; color: var(--c-muted);
	font-size: clamp(28px, 4.4vw, 64px); letter-spacing: .08em; white-space: nowrap;
	padding-right: .5em; flex: none;
}
@keyframes fv-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fv__marquee-track { animation: none; }
}

/* =========================================================
   Marquee band
   ========================================================= */
.marquee { display: none; } /* FV内のbigtextで表現中。後続で本実装 */

/* =========================================================
   Section common
   ========================================================= */
.section { padding-block: clamp(56px, 7vw, 110px); }
.section__head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.section__en {
	font-family: var(--font-en); color: var(--c-accent); font-size: 18px;
	letter-spacing: .12em; margin-bottom: 6px;
}
.section__title { font-weight: 700; color: var(--c-heading); font-size: clamp(24px, 3vw, 34px); letter-spacing: .08em; }
.section__title .brand { color: var(--c-accent); }
.section__lead { margin-top: 14px; color: var(--c-text); font-size: 15px; letter-spacing: .06em; }
.placeholder { text-align: center; color: var(--c-muted); border: 1px dashed var(--c-line); padding: 48px 20px; border-radius: 12px; }

/* =========================================================
   選ばれる理由
   ========================================================= */
.reason > .container { max-width: 1320px; }
.reason__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; margin-bottom: clamp(40px, 5vw, 64px); }
.reason__head-label { color: var(--c-accent-2); font-weight: 700; font-size: 13px; letter-spacing: .2em; margin-bottom: 8px; }
.reason__title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-weight: 700; color: var(--c-heading); font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .08em; }
.reason__logo { width: auto; height: 1.4em; }
.reason__en { font-family: var(--font-en); color: var(--c-muted); font-size: clamp(13px, 1.6vw, 22px); letter-spacing: .06em; opacity: .55; white-space: nowrap; }

.reason__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 60px); }
.reason-card { display: flex; flex-direction: column; gap: 22px; }
.reason-card__media { position: relative; width: 100%; aspect-ratio: 370 / 360; }
.reason-card__circle { position: absolute; top: 6%; left: 4%; width: 94%; aspect-ratio: 1 / 1; height: auto; z-index: 0; } /* 最背面の正円 */
.reason-card__num { position: absolute; left: 0; top: -6px; z-index: 1; font-family: var(--font-en); font-weight: 500; font-size: clamp(44px, 5vw, 62px); line-height: 1; color: #f3f3f1; letter-spacing: .06em; }
.reason-card__bear { position: absolute; height: auto; z-index: 2; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } /* left/top/width はカードごとにインライン指定（Figma実寸） */
.reason-card:hover .reason-card__bear { transform: scale(1.07); }
.reason-card__circle { transition: transform .5s ease; }
.reason-card:hover .reason-card__circle { transform: scale(1.04); }
.reason-card__sparkle { position: absolute; height: auto; z-index: 3; }
.reason-card__title { position: absolute; left: 0; top: 19%; z-index: 4; background: #fff; padding: 3px 14px; font-weight: 700; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .16em; color: var(--c-heading); line-height: 1.5; }
.reason-card__text { font-weight: 700; color: var(--c-heading); font-size: 16px; line-height: 28px; letter-spacing: .12em; }
.reason__more { text-align: center; margin-top: clamp(36px, 4vw, 56px); }
.reason__more--right { text-align: right; }

@media (max-width: 880px) {
	.reason__head { align-items: flex-start; }
	.reason__en { font-size: 16px; }
	.reason__cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 44px; }
	.reason__more--right { text-align: center; }
}

/* =========================================================
   提供サービス
   ========================================================= */
.service { padding-top: clamp(24px, 3vw, 48px); }
.service__cards { display: flex; flex-wrap: wrap; gap: 60px; justify-content: center; }
.service-card { display: flex; flex-direction: column; gap: 20px; width: 315px; max-width: 100%; }
.service-card__head { display: flex; align-items: center; gap: 15px; }
.service-card__flame { width: 19px; height: 30px; object-fit: contain; flex: none; }
.service-card__title { font-weight: 700; font-size: 22px; letter-spacing: .18em; color: var(--c-heading); }
.service-card__thumb {
	position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 15px; overflow: hidden;
	box-shadow: 4px 4px 30px rgba(0, 0, 0, .05); background: #ededed;
}
.service-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card__thumb.has-image:hover .service-card__img { transform: scale(1.06); }
.service-card__thumb.has-image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.service-card__btn {
	position: absolute; right: 0; bottom: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center; gap: 15px;
	min-width: 180px; padding: 8px 30px; background: #fff;
	border-radius: 15px 0 15px 0;
	box-shadow: -4px -5px 10px rgba(0, 0, 0, .05);
	font-weight: 700; font-size: 14px; letter-spacing: .14em; color: var(--c-heading);
	transition: color .2s ease, background-color .2s ease;
}
.service-card__btn:hover { background: var(--c-accent); color: #fff; }
.service-card__arrow { width: 18px; height: auto; flex: none; }
.service-card__btn:hover .service-card__arrow { filter: brightness(0) invert(1); }
.service-card__text { font-weight: 700; font-size: 14px; line-height: 28px; letter-spacing: .14em; color: var(--c-heading); }

@media (max-width: 720px) {
	.service__cards { gap: 40px; }
}

/* =========================================================
   制作実績（Works）
   ========================================================= */
.works {
	position: relative; overflow: hidden;
	background: url('../images/works/bg.svg') center center / 100% 100% no-repeat;
	padding-block: clamp(70px, 9vw, 130px); margin-block: clamp(20px, 4vw, 50px);
}
.works__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 50px); }
.works__en { font-family: var(--font-en); font-weight: 400; color: #fff; font-size: clamp(38px, 5vw, 56px); letter-spacing: .06em; line-height: 1; }
.works__title { font-weight: 700; color: var(--c-heading); font-size: clamp(22px, 2.4vw, 27px); letter-spacing: .14em; margin-top: 6px; }
.works__more { padding: 12px 30px; font-size: 14px; }

.works__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.works-card__link { display: block; color: inherit; }
.works-card__thumb { position: relative; aspect-ratio: 366 / 248; border-radius: 15px; overflow: hidden; border: 5px solid #fff; box-shadow: 4px 4px 20px rgba(0, 0, 0, .1); background: #fff; }
.works-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.works-card__link:hover .works-card__thumb img { transform: scale(1.04); }
.works-card__title { font-weight: 700; color: var(--c-heading); font-size: 18px; letter-spacing: .16em; margin-top: 16px; }
.works-card__cat { display: flex; align-items: center; gap: 10px; color: var(--c-heading); font-weight: 700; font-size: 15px; letter-spacing: .14em; margin-top: 8px; }
.works-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); flex: none; }

@media (max-width: 820px) {
	.works__cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 32px; }
	.works__head { align-items: flex-start; }
	/* 横幅が狭いとレンズの上下カーブが鋭角化するので緩やかにする */
	.works { background-size: 300% 100%; }
}

/* =========================================================
   対面対応エリア
   ========================================================= */
.area {
	position: relative; color: #fff; overflow: hidden;
	background: url('../images/area/bg.svg') center center / 100% 100% no-repeat;
	padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px); margin-block: clamp(20px, 4vw, 60px);
}
/* 上部のアーチ英字 */
.area__arch { position: absolute; left: 50%; top: clamp(10px, 2vw, 30px); transform: translateX(-50%); width: min(1200px, 92%); height: auto; z-index: 0; pointer-events: none; }
.area__arch text { font-family: var(--font-en); font-weight: 400; font-size: 57px; letter-spacing: 1px; fill: rgba(255, 255, 255, .14); }

.area__inner {
	position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
	display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: center;
}
.area__title { font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: .1em; color: #fff; }
.area__intro { margin-top: 22px; font-size: 15px; letter-spacing: .06em; color: #fff; }
.area__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 18px; }
.area__tag { font-size: 16px; letter-spacing: .1em; color: #fff; padding: 0 18px; position: relative; }
.area__tag:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1em; background: rgba(255, 255, 255, .4); }
.area__tag:first-child { padding-left: 0; }
.area__note { margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
.area__online { margin-top: 26px; max-width: 640px; font-size: 14px; line-height: 1.9; letter-spacing: .04em; color: #fff; }
.area__map { width: clamp(300px, 36vw, 480px); }
.area__map img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
	.area__inner { grid-template-columns: 1fr; }
	.area__map { width: min(420px, 80%); margin-inline: auto; order: 0; margin-top: 6px; }
	.area__online { max-width: none; }
	/* 横幅が狭いとレンズの上下カーブが鋭角化するので緩やかにする */
	.area { background-size: 300% 100%; }
}

/* =========================================================
   お客様の声（スライダー）
   ========================================================= */
.voice { --vgap: clamp(28px, 4vw, 60px); }
.voice__slider { overflow: hidden; }
.voice__track { display: flex; gap: var(--vgap); width: max-content; animation: voice-marquee var(--voice-duration, 40s) linear infinite; will-change: transform; }
.voice__slider:hover .voice__track { animation-play-state: paused; }
@keyframes voice-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--voice-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) { .voice__track { animation: none; } }

.voice-card { width: min(300px, 80vw); flex: none; display: flex; flex-direction: column; gap: 18px; min-height: 342px; }
.voice-card__head { background: #f9f9f9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; width: 100%; min-height: 100px; }
.voice-card__flame { width: 15px; height: 23px; object-fit: contain; }
.voice-card__catch { color: var(--c-accent); font-weight: 700; font-size: 16px; letter-spacing: .2em; text-align: center; line-height: 1.55; }
.voice-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1 0 auto; }
.voice-card__text { color: var(--c-heading); font-size: 14px; line-height: 28px; letter-spacing: .06em; text-align: justify; }
.voice-card__author { color: var(--c-heading); font-size: 13px; letter-spacing: .16em; }
.voice-card__no { font-family: var(--font-en); font-weight: 300; font-size: 14px; color: var(--c-heading); letter-spacing: .16em; text-align: right; margin-top: auto; }

/* =========================================================
   料金について
   ========================================================= */
.price__intro { text-align: center; color: var(--c-text); font-size: 15px; line-height: 2; letter-spacing: .04em; margin-bottom: clamp(40px, 5vw, 64px); }
.price__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 28px; }
.price__table {
	display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr));
	max-width: 980px; margin-inline: auto; min-width: 900px; align-items: stretch;
}
.price-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; background: #fff; text-align: center; }
.price-corner { background: transparent; padding: 0; }

/* ヘッダー行 */
.price-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 63px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .05em; text-align: center; align-self: end; }
.price-head--standard.is-highlight { min-height: 83px; background: var(--c-accent); border-radius: 20px 20px 0 0; align-self: stretch; }
.price-head--basic { background: #706662; }
.price-head--premium { background: #1a120f; border-radius: 0 5px 0 0; }

.price-badge {
	position: absolute; top: -24px; left: 12px; width: 62px; height: 62px; border-radius: 50%;
	background: #fff; border: 1.5px solid var(--c-accent);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	color: var(--c-accent-2); line-height: 1;
}
.price-badge small { font-size: 11px; letter-spacing: .08em; }
.price-badge strong { font-size: 15px; letter-spacing: .04em; }

/* 行ラベル */
.price-rowlabel { background: #f9f9f9; gap: 6px; font-weight: 700; font-size: 16px; color: #333; border-bottom: 3px solid #fff; }
.price-rowlabel__mark { color: var(--c-accent); font-size: 14px; }

/* プラン行 */
.price-plan { gap: 8px; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
.price-plan__lead { color: var(--c-accent); font-size: 14px; font-weight: 700; }
.price-plan__type { color: #706662; font-size: 14px; font-weight: 700; }
.price-plan__type strong { color: var(--c-accent); font-size: 18px; }

/* 料金行 */
.price-fee { flex-direction: row; align-items: baseline; justify-content: center; gap: 2px; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
.price-fee__num { color: var(--c-accent); font-size: 25px; font-weight: 700; letter-spacing: .02em; }
.price-fee__yen { color: var(--c-accent); font-size: 14px; font-weight: 700; }

/* おすすめ行 */
.price-rec { gap: 14px; padding: 35px 15px; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
.price-rec__title { color: var(--c-heading); font-size: 16px; font-weight: 700; line-height: 1.5; }
.price-rec__lg { font-size: 21px; }
.price-rec__desc { color: #706662; font-size: 13px; line-height: 1.55; letter-spacing: .02em; text-align: left; width: 100%; }
.price-btn {
	margin-top: auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
	padding: 13px 26px; border-radius: 40px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .1em;
	border: 2px solid #fff; box-shadow: 4px 4px 15px rgba(0, 0, 0, .06); transition: opacity .2s ease;
}
.price-btn:hover { opacity: .88; }
.price-btn--standard { background: var(--c-accent); }
.price-btn--basic { background: #706662; }
.price-btn--premium { background: #1a120f; }

/* スタンダード（強調列） */
.price-plan--standard, .price-fee--standard, .price-rec--standard { background: #fff9f8; border-left: 3px solid var(--c-accent); border-right: 3px solid var(--c-accent); }
.price-rec--standard { border-bottom: 3px solid var(--c-accent); }

@media (max-width: 600px) {
	.price__scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.price__table { grid-template-columns: 96px repeat(3, 230px); min-width: 0; width: max-content; }
	.price-rowlabel { font-size: 13px; letter-spacing: 0; }
}

.price__more-wrap { text-align: center; margin-top: clamp(32px, 4vw, 48px); }
.price__more { display: inline-flex; align-items: center; gap: 10px; }

/* ===== 料金詳細ページ（page-price.php） ===== */
.price-detail { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 9vw, 120px); }
.price-detail__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.price-detail__en { display: block; font-family: var(--font-en); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .2em; color: var(--c-accent-2); text-transform: uppercase; }
.price-detail__title { font-weight: 700; color: var(--c-heading); font-size: clamp(28px, 4vw, 40px); letter-spacing: .12em; margin-top: 10px; }
.price-detail__lead { margin-top: 20px; color: var(--c-text); font-size: 15px; line-height: 2; letter-spacing: .04em; }

.price-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 860px; margin: calc(clamp(40px, 5vw, 64px) * -0.5) auto clamp(40px, 5vw, 64px); }
.price-nav__chip { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--c-line); border-radius: 40px; padding: 9px 22px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--c-heading); transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.price-nav__chip:hover { border-color: var(--c-accent); color: var(--c-accent); }

.price-detail__block { max-width: 960px; margin: 0 auto clamp(44px, 6vw, 72px); scroll-margin-top: calc(var(--header-h) + 20px); }
.price-detail__blockhead { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }
.price-detail__blocktitle { display: inline-block; font-weight: 700; color: var(--c-heading); font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .1em; padding-bottom: 10px; border-bottom: 3px solid var(--c-accent); }
.price-detail__blockdesc { margin-top: 16px; color: var(--c-text); font-size: 15px; line-height: 1.9; letter-spacing: .04em; }

.price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.price-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
	.price-cards--3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
.price-card { background: #fff; border-radius: 16px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); display: flex; flex-direction: column; }
.price-card__name { font-weight: 700; color: var(--c-heading); font-size: 18px; letter-spacing: .06em; line-height: 1.5; }
.price-card__desc { margin-top: 14px; color: var(--c-text); font-size: 14px; line-height: 1.9; letter-spacing: .02em; flex: 1 0 auto; }
.price-card__price { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); color: var(--c-heading); font-weight: 700; font-size: 15px; letter-spacing: .06em; display: flex; align-items: baseline; gap: 6px; }
.price-card__num { color: var(--c-accent); font-size: 28px; font-weight: 700; letter-spacing: .02em; }
.price-card__suffix { color: var(--c-accent); font-size: 15px; font-weight: 700; }

.spot-list { background: #fff; border-radius: 16px; padding: clamp(10px, 2vw, 22px) clamp(20px, 3vw, 40px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.spot-list__item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--c-line); }
.spot-list__item:last-child { border-bottom: 0; }
.spot-list__name { font-weight: 700; color: var(--c-heading); font-size: 16px; letter-spacing: .06em; }
.spot-list__price { flex: none; display: flex; align-items: baseline; gap: 6px; }
.spot-list__num { color: var(--c-accent); font-size: 22px; font-weight: 700; }
.spot-list__suffix { color: var(--c-accent); font-size: 14px; font-weight: 700; }
.spot-list__note { color: #8a8076; font-size: 12px; letter-spacing: .02em; margin-left: 4px; }

.price-detail__cta { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; background: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.price-detail__cta-text { color: var(--c-heading); font-size: 16px; line-height: 1.9; letter-spacing: .04em; margin-bottom: 22px; }

@media (max-width: 640px) {
	.price-cards { grid-template-columns: 1fr; }
	.spot-list__item { flex-direction: column; gap: 6px; }
}

/* ===== 生成AIで業務効率化（AI導入支援） ===== */
.ai-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 30px); }
.ai-card { position: relative; background: #fff; border-radius: 16px; padding: clamp(24px, 3vw, 34px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); display: flex; flex-direction: column; }
.ai-card__tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c-accent); }
.ai-card__name { font-weight: 700; color: var(--c-heading); font-size: 18px; letter-spacing: .04em; line-height: 1.45; margin: 2px 0 14px; }
.ai-card__lead { color: var(--c-text); font-size: 14px; line-height: 1.9; letter-spacing: .02em; margin-bottom: 18px; }
.ai-card__price { margin-top: auto; }
.ai-notes { max-width: 960px; margin: clamp(24px, 3vw, 36px) auto 0; padding: 20px 22px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(63, 49, 33, .05); list-style: disc; padding-left: 40px; }
.ai-notes li { color: #706662; font-size: 13px; line-height: 1.9; letter-spacing: .02em; }

@media (max-width: 900px) {
	.ai-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ===== プラン機能比較表 ===== */
.plan-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 34px; }
.plan-compare { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.plan-compare th, .plan-compare td { border-bottom: 1px solid var(--c-line); border-right: 1px solid #f0ece6; padding: 14px 16px; text-align: center; vertical-align: middle; }
.plan-compare tr > *:last-child { border-right: 0; }
.plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td { border-bottom: 0; }
.pc-corner { background: #fff; }
.plan-compare .pc-head { position: relative; background: #706662; color: #fff; padding: 46px 16px 18px; vertical-align: bottom; }
.pc-head__badge { position: absolute; top: -24px; left: 12px; z-index: 2; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--c-accent-2); line-height: 1; }
.pc-head__badge small { font-size: 11px; letter-spacing: .08em; }
.pc-head__badge strong { font-size: 15px; letter-spacing: .04em; }
.pc-head__name { display: block; font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.pc-head__price { display: block; font-family: var(--font-en); font-size: 13px; margin-top: 4px; opacity: .92; }
.plan-compare .pc-head--standard.is-highlight { background: var(--c-accent); }
.plan-compare .pc-head--premium { background: #1a120f; }
.pc-rowlabel { text-align: left; background: #faf7f3; color: var(--c-heading); font-weight: 700; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.pc-cell { color: var(--c-heading); font-size: 14px; line-height: 1.5; }
.pc-cell--highlight { background: #fff7f5; }
.pc-mark { font-weight: 700; font-size: 18px; line-height: 1; }
.pc-mark--ok { color: var(--c-accent); }
.pc-mark--best { color: var(--c-accent); font-size: 20px; }
.pc-mark--tri { color: #c9a13b; }
.pc-mark--no { color: #c7c0b8; }
.pc-note { display: inline-block; font-size: 11.5px; color: #8a8076; letter-spacing: 0; }
.pc-txt { font-size: 13.5px; }
.plan-compare__note { margin-top: 14px; font-size: 12.5px; color: #8a8076; letter-spacing: .02em; line-height: 1.7; }
.plan-compare__cta { text-align: center; margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 600px) {
	.plan-compare__scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.pc-rowlabel { white-space: normal; }
}

/* ===== 月額保守・運用プラン ===== */
.maint-price { max-width: 620px; margin: 0 auto clamp(24px, 3vw, 36px); background: #fff; border: 2px solid var(--c-accent); padding: clamp(20px, 3vw, 30px); text-align: center; }
.maint-price__main { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.maint-price__label { font-weight: 700; color: var(--c-heading); font-size: 16px; letter-spacing: .06em; }
.maint-price__num { font-weight: 700; color: var(--c-accent); font-size: clamp(30px, 5vw, 42px); letter-spacing: .02em; }
.maint-price__bundle { margin-top: 10px; font-size: 14px; letter-spacing: .04em; color: var(--c-heading); }
.maint-price__bundle strong { color: var(--c-accent); font-size: 18px; }

.maint__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.maint-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.maint-table th, .maint-table td { border-bottom: 1px solid var(--c-line); border-right: 1px solid #f0ece6; padding: 14px 16px; vertical-align: middle; line-height: 1.6; }
.maint-table tr > *:last-child { border-right: 0; }
.maint-table thead th { background: #706662; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-align: center; }
.maint-table thead .mt-plan { background: var(--c-accent); }
.maint-table .mt-item { text-align: left; background: #faf7f3; color: var(--c-heading); font-weight: 700; font-size: 14px; white-space: nowrap; }
.maint-table tbody .mt-solo { text-align: center; color: #706662; font-size: 14px; white-space: nowrap; }
.maint-table tbody .mt-plan { text-align: center; background: #fff7f5; color: var(--c-accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.maint-table tbody .mt-desc { text-align: left; color: var(--c-text); font-size: 13px; }
@media (max-width: 600px) {
	.maint__scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

/* =========================================================
   お知らせ / お役立ち情報
   ========================================================= */
.news { overflow: hidden; }
.news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.news__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.news__title { font-weight: 700; color: #706662; font-size: 22px; letter-spacing: .16em; }
.news__en { font-family: var(--font-en); font-size: 22px; letter-spacing: .08em; color: #fff; }
.news__block--info .news__en { color: #dcdcdc; }

/* お知らせ：左にグレーパネル（左端までブリード） */
.news__block--news { position: relative; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 36px) clamp(28px, 3vw, 40px) 0; }
.news__block--news::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; left: -100vw; background: #ededed; border-radius: 0 14px 14px 0; }
.news__block--news > * { position: relative; z-index: 1; }

.news-list__item { list-style: none; }
.news-list__link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid #ccc; color: #706662; }
.news-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-list__date { font-family: var(--font-en); font-size: 13px; letter-spacing: .08em; color: #706662; }
.news-list__ttl { font-weight: 700; font-size: 15px; letter-spacing: .06em; color: #706662; }
.news-list__arrow { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #b9b3af; display: grid; place-items: center; color: #706662; font-size: 13px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.news-list__link:hover .news-list__arrow { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* お役立ち情報：ブログ */
.blog-list__item { list-style: none; }
.blog-list__link { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #eee; color: var(--c-heading); }
.blog-list__thumb { flex: none; width: clamp(120px, 20vw, 168px); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #ededed; }
.blog-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-list__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blog-list__date { font-family: var(--font-en); font-size: 13px; letter-spacing: .08em; color: #a39e9a; }
.blog-list__ttl { font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .04em; color: var(--c-heading); }
.news__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--c-accent-2); transition: gap .2s ease; }
.news__more:hover { gap: 12px; }

@media (max-width: 820px) {
	.news__grid { grid-template-columns: 1fr; gap: 44px; }
	.news__block--news::before { border-radius: 14px; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); }
	.news__block--news { padding-inline: 0; }
}

/* =========================================================
   よくあるご質問（FAQ）
   ========================================================= */
.faq { background: var(--c-cream); }
.faq__panel {
	border-radius: 28px; box-shadow: 0 18px 50px rgba(63, 49, 33, .08);
	background:
		radial-gradient(50% 50% at 6% 30%, rgba(183, 209, 213, .22), rgba(183, 209, 213, 0) 70%),
		radial-gradient(45% 50% at 97% 85%, rgba(183, 209, 213, .2), rgba(183, 209, 213, 0) 70%),
		#ffffff;
	padding: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: 294px 1fr; gap: clamp(36px, 6vw, 120px); align-items: start;
}
.faq__head { position: relative; }
.faq__en { font-family: var(--font-en); font-weight: 400; font-size: clamp(40px, 5vw, 56px); letter-spacing: .06em; line-height: 1; color: #ededed; }
.faq__title { font-weight: 700; color: var(--c-heading); font-size: clamp(20px, 2.2vw, 22px); letter-spacing: .14em; margin-top: 4px; }
.faq__more { margin-top: 40px; padding: 12px 40px; font-size: 16px; }

.faq__list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #f0eeea; padding: 22px 0; }
.faq-item:first-child { padding-top: 0; }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q__badge { flex: none; min-width: 35px; height: 28px; display: flex; align-items: center; justify-content: center; background: #b9d1d5; color: #4a322f; font-weight: 700; font-size: 17px; letter-spacing: .12em; border-radius: 30px; padding: 0 10px; }
.faq-q__text { flex: 1; color: var(--c-heading); font-weight: 700; font-size: 16px; letter-spacing: .12em; line-height: 1.6; }
.faq-q__icon { flex: none; width: 20px; height: 20px; position: relative; }
.faq-q__icon::before { content: ""; position: absolute; top: 38%; left: 50%; width: 9px; height: 9px; border-right: 2px solid #9aa7a9; border-bottom: 2px solid #9aa7a9; transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s ease, top .25s ease; }
.faq-item[open] .faq-q__icon::before { top: 60%; transform: translate(-50%, -50%) rotate(-135deg); }
.faq-a { color: var(--c-heading); font-size: 14px; line-height: 28px; letter-spacing: .08em; padding: 14px 0 2px 47px; }

@media (max-width: 820px) {
	.faq__panel { grid-template-columns: 1fr; gap: 28px; }
	.faq__more { margin-top: 24px; }
}

/* =========================================================
   CONTACT US / フッター
   ========================================================= */
.contact { position: relative; overflow: hidden; background: #322722; color: #fff; border-radius: clamp(40px, 6vw, 90px) clamp(40px, 6vw, 90px) 0 0; padding: clamp(50px, 7vw, 90px) var(--gutter) clamp(36px, 4vw, 56px); }
.contact__bigtext { position: absolute; left: 50%; top: clamp(20px, 3vw, 44px); transform: translateX(-50%); z-index: 0; font-family: var(--font-en); font-weight: 400; white-space: nowrap; font-size: clamp(46px, 10vw, 140px); letter-spacing: .08em; color: #3b3129; pointer-events: none; }
.contact__inner { position: relative; z-index: 1; max-width: var(--container); margin: clamp(90px, 13vw, 200px) auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(36px, 5vw, 80px); }
.contact__lead { max-width: 420px; }
.contact__lead-title { font-weight: 700; font-size: 20px; letter-spacing: .16em; }
.contact__lead-text { font-size: 14px; line-height: 1.9; letter-spacing: .06em; margin-top: 20px; color: rgba(255, 255, 255, .9); }
.contact__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; background: #fff; color: #1a120f; border-radius: 40px; padding: 14px 40px; font-weight: 700; font-size: 18px; letter-spacing: .1em; transition: opacity .2s ease; }
.contact__btn:hover { opacity: .88; }
.contact__btn-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #1a120f; font-size: 13px; }

.contact__nav { display: flex; gap: clamp(40px, 6vw, 80px); }
.contact__nav ul { display: flex; flex-direction: column; gap: 20px; }
.contact__nav a { font-size: 14px; letter-spacing: .14em; color: rgba(255, 255, 255, .68); transition: color .2s ease; }
.contact__nav a:hover { color: #fff; }

.contact__legal { position: relative; z-index: 1; max-width: var(--container); margin: clamp(34px, 5vw, 60px) auto 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.contact__legal a { position: relative; font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .68); transition: color .2s ease; }
.contact__legal a:hover { color: #fff; }
.contact__legal a:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255, 255, 255, .25); }

.contact__foot { position: relative; z-index: 1; max-width: var(--container); margin: clamp(20px, 3vw, 28px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.contact__brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact__brand img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.contact__tagline { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .75); }
.contact__copy { font-family: var(--font-en); font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .8); }

.contact__top { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(70px, 9vw, 120px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; height: 56px; justify-content: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #fff; transition: background-color .2s ease, color .2s ease; }
.contact__top:hover { background: #fff; color: #322722; }
.contact__top small { font-family: var(--font-en); font-size: 9px; letter-spacing: .1em; }

@media (max-width: 720px) {
	.contact__inner { flex-direction: column; }
	.contact__nav { gap: 48px; }
	.contact__foot { flex-direction: column; align-items: flex-start; }
	.contact__top { bottom: auto; top: clamp(60px, 16vw, 90px); }
}

/* =========================================================
   追従CTA / PAGE TOP
   ========================================================= */
.floatcta {
	position: fixed; right: clamp(12px, 1.5vw, 22px); bottom: clamp(12px, 1.5vw, 22px); z-index: 90;
	display: flex; flex-direction: column; gap: 10px;
	opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.floatcta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floatcta__btn {
	display: flex; align-items: center; gap: 12px; width: 248px; max-width: 60vw;
	background: #fff; border: 2px solid; border-radius: 12px; padding: 12px 16px;
	font-weight: 700; font-size: 16px; letter-spacing: .08em; color: var(--c-heading);
	box-shadow: 0 8px 24px rgba(63, 49, 33, .14); transition: transform .2s ease;
}
.floatcta__btn:hover { transform: translateY(-2px); }
.floatcta__btn--line { border-color: #06C755; }
.floatcta__btn--contact { border-color: var(--c-dark); position: relative; overflow: visible; }
.floatcta__ic { flex: none; width: 28px; height: auto; display: block; }
.floatcta__bear { flex: none; width: 56px; height: auto; object-fit: contain; margin: -26px 4px -12px 0; position: relative; z-index: 1; }
.floatcta__bear-sp { display: none; }
.floatcta__txt { flex: 1; white-space: nowrap; }
.floatcta__arw { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 12px; color: var(--c-heading); }
.floatcta__btn--line .floatcta__arw { color: #06C755; }

.pagetop {
	position: fixed; right: clamp(12px, 1.5vw, 22px); bottom: calc(clamp(12px, 1.5vw, 22px) + 150px); z-index: 90;
	display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--c-heading);
	opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pagetop__chev { width: 16px; height: 16px; position: relative; }
.pagetop__chev::before, .pagetop__chev::after { content: ""; position: absolute; left: 50%; width: 11px; height: 11px; border-top: 2px solid var(--c-heading); border-left: 2px solid var(--c-heading); transform: translateX(-50%) rotate(45deg); }
.pagetop__chev::before { top: 1px; } .pagetop__chev::after { top: 7px; }
.pagetop__label { font-family: var(--font-en); font-weight: 500; font-size: 12px; letter-spacing: .12em; }
.pagetop__bear { position: relative; width: 52px; height: 52px; margin-top: 2px; }
.pagetop__bear-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.pagetop__bear-img--hover { opacity: 0; }
.pagetop:hover .pagetop__bear-img--normal { opacity: 0; }
.pagetop:hover .pagetop__bear-img--hover { opacity: 1; }

@media (max-width: 768px) {
	.floatcta { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; }
	.floatcta__btn { width: 50%; max-width: none; border: 0; border-radius: 0; border-top: 3px solid; justify-content: center; box-shadow: 0 -4px 16px rgba(63,49,33,.12); padding: 14px 10px; font-size: 15px; }
	.floatcta__btn:only-child { width: 100%; } /* LINE未設定でお問い合わせのみのとき全幅 */
	.floatcta__btn--line { border-top-color: #06C755; }
	.floatcta__btn--contact { border-top-color: var(--c-dark); }
	.floatcta__txt { flex: none; }
	.floatcta__arw { display: none; }
	.floatcta__btn--contact { overflow: visible; }
	.floatcta__bear { display: none; }
	.floatcta__bear-sp { display: block; position: absolute; left: 50%; top: 0; transform: translate(-50%, -64%); width: 52px; height: auto; z-index: 3; pointer-events: none; }
	.pagetop { bottom: 88px; right: 12px; }
	.pagetop__bear { width: 42px; height: 42px; }
}

/* generic page */
.page-wrap { padding-top: calc(var(--header-h) + 40px); padding-bottom: 80px; }
.entry__title { color: var(--c-heading); font-size: 28px; margin-bottom: 20px; }

/* =========================================================
   固定ページ汎用（プライバシーポリシー・特商法 等）page.php
   ========================================================= */
.legal-page { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 9vw, 120px); }
.legal-page__head { text-align: center; margin-bottom: clamp(30px, 4vw, 50px); }
.legal-page__title { font-weight: 700; color: var(--c-heading); font-size: clamp(26px, 3.6vw, 38px); letter-spacing: .1em; }
.legal-page__body {
	max-width: 860px; margin-inline: auto; background: #fff; border-radius: 20px;
	padding: clamp(28px, 4vw, 56px); box-shadow: 0 18px 50px rgba(63, 49, 33, .07);
	color: var(--c-text); font-size: 15px; line-height: 2;
}
.legal-page__body > *:first-child { margin-top: 0; }
.legal-page__body h2 {
	font-weight: 700; color: var(--c-heading); font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .06em;
	margin: 40px 0 14px; padding-left: 14px; border-left: 4px solid var(--c-accent); line-height: 1.5;
}
.legal-page__body h3 { font-weight: 700; color: var(--c-heading); font-size: 17px; letter-spacing: .04em; margin: 26px 0 10px; }
.legal-page__body p { margin: 0 0 16px; letter-spacing: .02em; }
.legal-page__body a { color: var(--c-accent-2); text-decoration: underline; }
.legal-page__body ul,
.legal-page__body ol { margin: 0 0 18px; padding-left: 1.4em; }
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li { margin-bottom: 8px; }
.legal-page__body strong { color: var(--c-heading); font-weight: 700; }
.legal-page__body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.legal-page__body th,
.legal-page__body td { border: 1px solid var(--c-line); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.8; }
.legal-page__body th { background: #faf7f3; color: var(--c-heading); font-weight: 700; white-space: nowrap; width: 32%; }
.legal-page__body dl { margin: 0 0 22px; }
.legal-page__body dt { font-weight: 700; color: var(--c-heading); margin-top: 16px; }
.legal-page__body dd { margin: 4px 0 0; }
.legal-page__body .legal-date { margin-top: 36px; text-align: right; color: #8a8076; font-size: 14px; }

@media (max-width: 600px) {
	.legal-page__body th { white-space: normal; width: 38%; }
}

/* =========================================================
   お役立ち情報：一覧・アーカイブ・記事詳細
   ========================================================= */
.blog-archive { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 9vw, 120px); }
.blog-archive__head { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }
.blog-archive__en { display: block; font-family: var(--font-en); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .2em; color: var(--c-accent-2); text-transform: uppercase; }
.blog-archive__title { font-weight: 700; color: var(--c-heading); font-size: clamp(26px, 3.6vw, 38px); letter-spacing: .1em; margin-top: 10px; }
.blog-archive__desc { margin-top: 14px; color: var(--c-text); font-size: 14px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.blog-card { list-style: none; }
.blog-card__link { display: block; color: var(--c-heading); }
.blog-card__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #ededed; box-shadow: 0 12px 30px rgba(63, 49, 33, .08); }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card__link:hover .blog-card__thumb img { transform: scale(1.04); }
.blog-card__body { display: block; padding-top: 16px; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.blog-card__date { font-family: var(--font-en); font-size: 13px; letter-spacing: .06em; color: #a39e9a; }
.blog-card__cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent-2); background: #fff; border: 1px solid var(--c-line); border-radius: 4px; padding: 2px 10px; }
.blog-card__title { font-weight: 700; font-size: 16px; line-height: 1.7; letter-spacing: .04em; color: var(--c-heading); }
.blog-empty { text-align: center; color: var(--c-text); padding: 40px 0; }

/* ページネーション */
.blog-archive .pagination,
.pagination { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 8px; background: #fff; border: 1px solid var(--c-line); color: var(--c-heading); font-family: var(--font-en); font-size: 15px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pagination .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pagination .page-numbers.dots { border: 0; background: transparent; }

/* 記事詳細 */
.single-post { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 9vw, 120px); }
.single-post__article { max-width: 820px; margin-inline: auto; background: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 60px); box-shadow: 0 18px 50px rgba(63, 49, 33, .07); }
.single-post__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.single-post__date { font-family: var(--font-en); font-size: 14px; letter-spacing: .06em; color: #a39e9a; }
.single-post__cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent-2); background: var(--c-cream); border: 1px solid var(--c-line); border-radius: 4px; padding: 3px 12px; }
.single-post__title { font-weight: 700; color: var(--c-heading); font-size: clamp(22px, 3vw, 32px); line-height: 1.5; letter-spacing: .06em; }
.single-post__thumb { margin: clamp(22px, 3vw, 34px) 0; border-radius: 14px; overflow: hidden; }
.single-post__thumb img { width: 100%; height: auto; display: block; }
.single-post__foot { margin-top: clamp(30px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--c-line); }
.single-post__back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--c-accent-2); }

/* 記事本文の体裁（the_content） */
.entry-content { color: var(--c-text); font-size: 16px; line-height: 2; letter-spacing: .02em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { font-weight: 700; color: var(--c-heading); font-size: clamp(20px, 2.4vw, 25px); letter-spacing: .04em; margin: 44px 0 16px; padding-left: 14px; border-left: 4px solid var(--c-accent); line-height: 1.5; }
.entry-content h3 { font-weight: 700; color: var(--c-heading); font-size: clamp(18px, 2vw, 21px); letter-spacing: .04em; margin: 32px 0 12px; }
.entry-content h4 { font-weight: 700; color: var(--c-heading); font-size: 17px; margin: 24px 0 10px; }
.entry-content p { margin: 0 0 20px; }
.entry-content a { color: var(--c-accent-2); text-decoration: underline; }
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px; padding-left: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote { margin: 0 0 20px; padding: 14px 20px; background: var(--c-cream); border-left: 4px solid var(--c-line); border-radius: 0 8px 8px 0; color: var(--c-heading); }
.entry-content strong { color: var(--c-heading); font-weight: 700; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: 10px 14px; text-align: left; }
.entry-content th { background: #faf7f3; color: var(--c-heading); }

@media (max-width: 900px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.blog-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ===== 制作実績：一覧・詳細 ===== */
.works-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.works-archive__grid .works-card__title { font-size: 17px; }
.works-archive__cta { max-width: 720px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; background: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.works-archive__cta-text { color: var(--c-heading); font-size: 15px; line-height: 2; letter-spacing: .04em; margin-bottom: 22px; }

.works-single__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--c-dark); border-radius: 4px; padding: 3px 12px; }
.works-single__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--c-heading); }
.works-single__thumb { border: 5px solid #fff; border-radius: 15px; box-shadow: 4px 4px 20px rgba(0, 0, 0, .1); background: #fff; }
.works-single__visit { margin-top: clamp(24px, 3vw, 36px); text-align: center; }
.works-single__visit .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 36px; border-radius: 40px; font-weight: 700; letter-spacing: .08em; }
.works-single__cta { max-width: 720px; margin: clamp(36px, 5vw, 60px) auto 0; text-align: center; background: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.works-single__cta-text { color: var(--c-heading); font-size: 15px; line-height: 2; letter-spacing: .04em; margin-bottom: 22px; }

@media (max-width: 900px) {
	.works-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.works-archive__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ===== シンプルページ（404・送信完了） ===== */
.simple-page { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(50px, 8vw, 100px)); padding-bottom: clamp(70px, 10vw, 130px); }
.simple-page__inner { max-width: 640px; text-align: center; }
.notfound__bear { width: clamp(90px, 14vw, 120px); height: auto; margin-bottom: 10px; }
.simple-page__en { font-family: var(--font-en); font-weight: 500; font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .18em; color: var(--c-accent-2); text-transform: uppercase; }
.simple-page__title { font-weight: 700; color: var(--c-heading); font-size: clamp(22px, 3.4vw, 32px); letter-spacing: .08em; margin-top: 10px; line-height: 1.5; }
.simple-page__text { margin-top: 20px; color: var(--c-text); font-size: 15px; line-height: 2; letter-spacing: .04em; }
.simple-page__note { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #8a8076; line-height: 1.8; }
.simple-page__actions { margin-top: 30px; }
.simple-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 26px; }
.simple-page__links a { position: relative; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent-2); }
.simple-page__links a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; opacity: .5; }

/* ===== お知らせ：一覧・詳細 ===== */
.news-archive__panel { max-width: 860px; margin-inline: auto; background: #fff; border-radius: 20px; padding: clamp(10px, 2vw, 22px) clamp(20px, 3vw, 44px); box-shadow: 0 14px 40px rgba(63, 49, 33, .07); }
.news-archive__panel .news-list__link { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.news-archive__panel .news-list__item:last-child .news-list__link { border-bottom: 0; }
.news-archive__panel .news-list__ttl { font-size: 16px; }
.news-archive__panel .news-list__link:hover .news-list__arrow { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.news-single__label { background: var(--c-accent); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
	:root { --header-h: 72px; }
	.global-nav, .site-header__contact { display: none; }
	.nav-toggle { display: flex; margin-left: auto; }
	.fv { padding-top: 88px; }
	.fv__inner { grid-template-columns: 1fr; min-height: auto; padding: 28px var(--gutter) 34px; gap: 26px; }
	.fv__bg { width: 100%; }
	.fv__copy { padding-left: 0; text-align: center; }
	.fv__title { font-size: clamp(24px, 7.2vw, 33px); }
	.fv__subs { align-items: center; }
	.fv__collage { order: 0; margin-right: 0; }
	.fv__marquee { margin-top: 4px; margin-bottom: 18px; }
	.fv__bigtext { font-size: 30px; }
}
/* お客様の声：SPは縦積み（PCのマーキーを停止） */
@media (max-width: 768px) {
	.voice__slider { overflow: visible; }
	.voice__track { flex-direction: column; width: auto; gap: 28px; animation: none !important; transform: none !important; }
	.voice-card { width: 100%; min-height: 0; }
	.voice-card.is-clone { display: none; }
	/* 見出しをSP同様に左/中央へ */
	.works__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.works__more { align-self: flex-start; }
}

@media (max-width: 600px) {
	.fv__sub { font-size: 14px; letter-spacing: .18em; }
}

/* =========================================================
   お問い合わせページ（page-contact.php / Contact Form 7）
   ========================================================= */
.contact-page { background: var(--c-cream); padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 9vw, 120px); }
.contact-page__head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); }
.contact-page__en { display: block; font-family: var(--font-en); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .2em; color: var(--c-accent-2); text-transform: uppercase; }
.contact-page__title { font-weight: 700; color: var(--c-heading); font-size: clamp(28px, 4vw, 40px); letter-spacing: .12em; margin-top: 10px; }
.contact-page__lead { margin-top: 22px; font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--c-text); }

.contact-page__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 60px); align-items: start; max-width: 1080px; margin-inline: auto; }
.contact-page__form { background: #fff; border-radius: 20px; padding: clamp(24px, 3.2vw, 46px); box-shadow: 0 18px 50px rgba(63, 49, 33, .08); }

/* --- フォーム部品（CF7出力を含め .contact-page__form 内を共通スタイル）--- */
.contact-page__form .cform__row { margin-bottom: 22px; }
.contact-page__form .cform__row:last-of-type { margin-bottom: 0; }
.contact-page__form .cform__label { display: block; font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--c-heading); margin-bottom: 8px; }
.contact-page__form .cform__req { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--c-accent); border-radius: 4px; padding: 2px 7px; vertical-align: 2px; }
.contact-page__form .cform__opt { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #8a8076; background: #efeae3; border-radius: 4px; padding: 2px 7px; vertical-align: 2px; }
.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"],
.contact-page__form input[type="url"],
.contact-page__form input[type="number"],
.contact-page__form select,
.contact-page__form textarea {
	width: 100%; font: inherit; font-size: 16px; color: var(--c-heading);
	background: #fafafa; border: 1px solid var(--c-line); border-radius: 10px;
	padding: 13px 16px; line-height: 1.6; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
	-webkit-appearance: none; appearance: none;
}
.contact-page__form textarea { min-height: 160px; resize: vertical; }
.contact-page__form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233f3121' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.contact-page__form input:focus,
.contact-page__form select:focus,
.contact-page__form textarea:focus {
	outline: none; background: #fff; border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(193, 42, 21, .12);
}
.contact-page__form input::placeholder,
.contact-page__form textarea::placeholder { color: #b3aaa0; }

/* ラジオ・チェックボックス（ご相談内容など） */
.contact-page__form .cform__choices { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.contact-page__form .wpcf7-list-item { margin: 0; display: inline-flex; }
.contact-page__form .wpcf7-list-item-label { font-size: 15px; letter-spacing: .04em; color: var(--c-text); }
.contact-page__form input[type="checkbox"],
.contact-page__form input[type="radio"] { width: 18px; height: 18px; margin-right: 8px; accent-color: var(--c-accent); vertical-align: -3px; }

/* 同意（acceptance） */
.contact-page__form .cform__agree { text-align: center; font-size: 14px; color: var(--c-text); margin: 26px 0 22px; }
.contact-page__form .cform__agree a { color: var(--c-accent-2); text-decoration: underline; }

/* 送信ボタン */
.contact-page__form .cform__submit { text-align: center; }
.contact-page__form input[type="submit"],
.contact-page__form .wpcf7-submit {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	min-width: 280px; max-width: 100%; border: 0; border-radius: 40px;
	background: var(--c-accent); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .12em;
	padding: 16px 40px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 12px 26px rgba(193, 42, 21, .26);
}
.contact-page__form input[type="submit"]:hover,
.contact-page__form .wpcf7-submit:hover { background: var(--c-accent-2); transform: translateY(-2px); }
.contact-page__form .wpcf7-spinner { margin: 14px auto 0; }

/* CF7 バリデーション・送信結果メッセージ */
.contact-page__form .wpcf7-not-valid-tip { color: var(--c-accent); font-size: 13px; font-weight: 700; margin-top: 6px; }
.contact-page__form .wpcf7-form-control.wpcf7-not-valid { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(193, 42, 21, .12); }
.contact-page__form .wpcf7-response-output {
	margin: 24px 0 0 !important; border-radius: 10px; padding: 14px 18px !important; font-size: 14px; line-height: 1.7;
	border-width: 1px !important;
}
.contact-page__form .wpcf7 form.invalid .wpcf7-response-output,
.contact-page__form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--c-accent) !important; background: #fdf1ef; color: var(--c-accent-2); }
.contact-page__form .wpcf7 form.sent .wpcf7-response-output { border-color: #2e7d32 !important; background: #eef7ef; color: #2e7d32; }

.cform-fallback { color: var(--c-text); font-size: 15px; line-height: 2; }
.cform-fallback p { margin-bottom: 14px; }
.contact__btn--dark { background: var(--c-dark); color: #fff; }
.contact__btn--dark .contact__btn-arrow { border-color: #fff; }
.contact__btn--dark:hover { opacity: .9; }

/* --- 連絡先サイド --- */
.contact-page__info { display: flex; flex-direction: column; gap: 26px; }
.cinfo { background: #fff; border-radius: 20px; padding: clamp(22px, 2.6vw, 34px); box-shadow: 0 18px 50px rgba(63, 49, 33, .06); }
.cinfo__row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.cinfo__row:first-child { padding-top: 0; }
.cinfo__row:last-child { padding-bottom: 0; border-bottom: 0; }
.cinfo__label { font-family: var(--font-en); font-size: 12px; letter-spacing: .12em; color: var(--c-accent-2); font-weight: 700; }
.cinfo__data { font-size: 15px; letter-spacing: .04em; color: var(--c-heading); line-height: 1.7; }
.cinfo__data a { color: var(--c-heading); text-decoration: underline; }
.cinfo__line { background: #fff; border-radius: 20px; padding: clamp(22px, 2.6vw, 30px); box-shadow: 0 18px 50px rgba(63, 49, 33, .06); text-align: center; }
.cinfo__line-text { font-size: 14px; letter-spacing: .04em; color: var(--c-text); margin-bottom: 14px; }
.cinfo__line-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #06C755; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .08em; border-radius: 40px; padding: 13px 24px; transition: opacity .2s ease; }
.cinfo__line-btn:hover { opacity: .9; }

@media (max-width: 880px) {
	.contact-page__grid { grid-template-columns: 1fr; gap: 24px; max-width: 560px; }
	.contact-page__info { order: 2; }
}