/* ==========================================================================
   NSC Renewal — 白基調 × ブルー
   ========================================================================== */

:root {
	--blue: #1f6feb;
	--blue-dark: #1558c4;
	--blue-soft: #e8f1ff;
	--sky: #23b5e8;
	--tint: #f4f8fd;
	--navy: #10294a;
	--text: #36475c;
	--muted: #6c7d93;
	--line: #e2eaf4;
	--white: #fff;
	--radius: 20px;
	--radius-sm: 12px;
	--shadow: 0 12px 32px rgba(21, 88, 196, .08);
	--shadow-lg: 0 24px 60px rgba(21, 88, 196, .14);
	--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--font-en: "Inter", "Noto Sans JP", sans-serif;
	--header-h: 76px;
	/* 作例写真（背景透過）の後ろに敷く色 */
	--photo-before: #eef1f5;
	--photo-after: radial-gradient(circle at 50% 35%, #fff 0%, #e6f1ff 75%, #d8e9ff 100%);
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .03em;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; color: var(--navy); line-height: 1.5; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid rgba(31, 111, 235, .45); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 8px 16px; background: var(--navy); color: #fff; border-radius: 8px; }
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 888px; }
.center { text-align: center; }
.sp-only { display: none; }
.icon { flex: none; width: 1.25em; height: 1.25em; }

/* --------------------------------------------------------------------------
   ボタン・チップ
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 54px; padding: 12px 30px;
	border: 1.5px solid transparent; border-radius: 999px;
	font: inherit; font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: .04em;
	cursor: pointer; text-decoration: none !important;
	transition: transform .2s, box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: linear-gradient(135deg, var(--blue), #2f8cf5); color: #fff; box-shadow: 0 10px 24px rgba(31, 111, 235, .28); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(31, 111, 235, .36); }
.btn--ghost { background: #fff; color: var(--blue); border-color: #cfe0f8; }
.btn--ghost:hover { border-color: var(--blue); }
.btn--white { background: #fff; color: var(--blue-dark); }
.btn--sm { min-height: 44px; padding: 8px 22px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 14px 44px; font-size: 16px; }

.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 700; line-height: 1.7; letter-spacing: .04em; }
.chip--gray { background: #eef1f5; color: var(--muted); }
.badge { position: absolute; top: 20px; right: 20px; padding: 2px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--sky), var(--blue)); color: #fff; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--blue); font-size: 14px; font-weight: 700; }
.note { margin-top: 24px; color: var(--muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 41, 74, .08); }
/* ログイン中に出る管理バーの分だけ、固定ヘッダーを下げる */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none !important; }
.logo__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff; font-family: var(--font-en); font-size: 21px; font-weight: 700; box-shadow: 0 8px 18px rgba(31, 111, 235, .28); }
.logo__text { display: flex; flex-direction: column; line-height: 1.25; }
.logo__name { font-family: var(--font-en); font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.logo__sub { color: var(--muted); font-size: 10.5px; letter-spacing: .14em; }

.global-nav { display: flex; align-items: center; gap: 32px; }
.global-nav__list { display: flex; align-items: center; gap: 30px; }
.global-nav__list a { position: relative; padding: 8px 0; color: var(--navy); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.global-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.global-nav__list a:hover::after { transform: scaleX(1); }

.header-tel { display: none; }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: var(--blue-soft); cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--blue-dark); transition: transform .25s, opacity .25s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.section { padding: 112px 0; }
.section--tint { background: var(--tint); }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .22em; }
.eyebrow--light { color: rgba(255, 255, 255, .8); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head__title { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: .06em; }
.section-head__lead { margin-top: 18px; color: var(--muted); }
.section-more { margin-top: 48px; text-align: center; }

.has-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.has-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   トップ：ヒーロー
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 120px; background:
	radial-gradient(720px 480px at 88% 8%, rgba(35, 181, 232, .16), transparent 70%),
	radial-gradient(640px 520px at 4% 96%, rgba(31, 111, 235, .10), transparent 70%),
	linear-gradient(180deg, #fff, var(--tint)); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; }
.hero__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 18px; border: 1px solid #d6e5fb; border-radius: 999px; background: #fff; color: var(--blue-dark); font-size: 13px; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(35, 181, 232, .2); }
.hero__title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.42; letter-spacing: .05em; }
.marker { background: linear-gradient(transparent 62%, rgba(35, 181, 232, .28) 62%); color: var(--blue); }
.hero__lead { margin: 28px 0 38px; max-width: 31em; font-size: 16.5px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.hero__platforms li { padding: 4px 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 500; }

.hero__panel { display: none; }
.hero__visual { position: relative; min-height: 440px; }
.hero__photo { position: absolute; top: 28px; left: 4%; right: 2%; bottom: 44px; border-radius: 28px; background: #e6f4fb url(../img/hero/desk-screen.jpg) right center / cover no-repeat; box-shadow: var(--shadow-lg); }
.mock-browser { display: none; position: absolute; top: 28px; left: 6%; right: 4%; border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.mock-browser__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mock-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dbe6f5; }
.mock-browser__bar span { flex: 1; height: 22px; margin-left: 12px; border-radius: 999px; background: var(--tint); }
.mock-browser__body { padding: 20px; }
.mock-banner { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--sky)); }
.mock-line { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.mock-line--w60 { width: 60%; }
.mock-line--w40 { width: 40%; background: rgba(255, 255, 255, .5); }
.mock-pill { width: 92px; height: 26px; margin-top: 8px; border-radius: 999px; background: #fff; }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.mock-tile { padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.mock-tile span { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, #e8f1ff, #d5ecfb); }
.mock-tile i { display: block; height: 8px; margin-top: 10px; border-radius: 999px; background: #e3ebf5; }
.mock-tile i.short { width: 55%; background: #cfe0f8; }

.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); color: var(--navy); font-size: 12.5px; line-height: 1.55; animation: float 6s ease-in-out infinite; }
.float-card p { margin: 0; }
.float-card strong { font-size: 14px; }
.float-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--blue-soft); color: var(--blue); font-size: 18px; }
.float-card--chart { top: 0; right: -2%; flex-direction: column; align-items: stretch; width: 172px; animation-delay: -2s; }
.float-card__label { display: flex; align-items: center; gap: 6px; color: var(--blue-dark); font-weight: 700; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; }
.bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--sky), var(--blue)); opacity: .85; }
.float-card--ai { left: -3%; bottom: 74px; }
.float-card--ai .float-card__icon { background: linear-gradient(135deg, var(--sky), var(--blue)); color: #fff; }
.float-card--cart { right: 2%; bottom: 6px; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* PC幅では写真を全面に敷き、その上に文字を載せる（それより狭い幅では写真を文字の下に置く） */
@media (min-width: 1280px) {
	.hero { padding: 0; background: #e3f4fb url(../img/hero/desk-screen.jpg) right -6vw center / cover no-repeat; }
	.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 24%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 54%); }
	.hero__inner { position: relative; grid-template-columns: minmax(0, 560px); align-content: center; min-height: clamp(600px, 44vw, 720px); padding-top: 48px; padding-bottom: 56px; }
	.hero__visual { display: none; }
	.hero__title { font-size: clamp(40px, 3.4vw, 52px); }
}

/* --------------------------------------------------------------------------
   トップ：選ばれる理由 / サービス
   -------------------------------------------------------------------------- */
.reason-grid, .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.reason-card { position: relative; padding: 44px 34px 38px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.reason-card__num { display: block; margin-bottom: 14px; color: transparent; background: linear-gradient(135deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; font-family: var(--font-en); font-size: 40px; font-weight: 700; line-height: 1; }
.reason-card h3 { margin-bottom: 14px; font-size: 19px; }
.reason-card p { font-size: 14.5px; }

.service-card { position: relative; display: block; padding: 38px 32px 34px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--text); text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
.service-card--link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card--link { outline: 1.5px solid #cfe0f8; outline-offset: -1.5px; }
.service-card__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 18px; background: var(--blue-soft); color: var(--blue); font-size: 22px; }
.service-card h3, .feature-card h3 { margin-bottom: 12px; font-size: 18px; }
.service-card p, .feature-card p { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   AI画像作成
   -------------------------------------------------------------------------- */
.ai-teaser { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.ai-teaser__visual { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 48px 28px; border-radius: 28px; background: linear-gradient(135deg, #eef5ff, #e3f5fc); }
.ai-shot { flex: 1; max-width: 230px; margin: 0; }
.ai-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; }
.ai-frame img, .compare__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ai-frame--before, .compare__img--before { background: var(--photo-before); }
.ai-frame--after, .compare__img--after { background: var(--photo-after); box-shadow: var(--shadow-lg); }
/* BEFORE / AFTER の文字は画像に重ねず、画像の下に置く */
.ai-frame__tag { display: block; margin-top: 12px; color: var(--muted); font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-align: center; }
.ai-shot--after .ai-frame__tag { color: var(--blue); }
.ai-teaser__arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-bottom: 30px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.ai-teaser__text .section-head__title { margin-bottom: 22px; }
.check-list { margin: 24px 0 34px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: var(--navy); font-weight: 500; }
.check-list .icon { margin-top: .3em; padding: 3px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); stroke-width: 2.6; }

.lead-block { text-align: center; }
.lead-block h2 { margin-bottom: 24px; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: .05em; }
.lead-block p { text-align: left; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-card { padding: 34px 26px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

.compare { display: flex; align-items: center; justify-content: center; gap: 24px; }
.compare__item { flex: 1; max-width: 300px; margin: 0; }
.compare__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.compare__item figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--navy); font-size: 14.5px; font-weight: 500; }
.compare__arrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-bottom: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 18px; }

/* --------------------------------------------------------------------------
   制作実績
   -------------------------------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.work-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--text); text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.work-card__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tint); border-bottom: 1px solid var(--line); }
.work-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.work-card:hover .work-card__thumb img { transform: scale(1.04); }
.work-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 8px; padding: 22px 24px 24px; }
.work-card__name { color: var(--navy); font-size: 16.5px; font-weight: 700; line-height: 1.55; }
.work-card__desc { font-size: 13.5px; line-height: 1.75; }
.work-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--blue); font-size: 13px; font-weight: 700; }

.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 48px; }
.filter__btn { padding: 9px 22px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.filter__btn:hover { border-color: var(--blue); color: var(--blue); }
.filter__btn.is-active { border-color: var(--blue); background: var(--blue); color: #fff; }

/* --------------------------------------------------------------------------
   流れ
   -------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: flow; }
.flow__item { position: relative; padding: 32px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.flow__item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -17px; z-index: 1; width: 10px; height: 10px; border-top: 2px solid #a9c6f3; border-right: 2px solid #a9c6f3; transform: translateY(-50%) rotate(45deg); }
.flow__step { display: inline-block; margin-bottom: 12px; padding: 2px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-family: var(--font-en); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; }
.flow__item h3 { margin-bottom: 8px; font-size: 17px; }
.flow__item p { font-size: 14px; line-height: 1.8; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta { padding: 0 0 112px; }
.section--tint + .cta { padding-top: 112px; }
.cta__box { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 60px 64px; border-radius: 32px; background:
	radial-gradient(520px 320px at 100% 0%, rgba(255, 255, 255, .2), transparent 70%),
	linear-gradient(135deg, var(--blue-dark), var(--blue) 55%, var(--sky)); color: #fff; box-shadow: 0 28px 60px rgba(31, 111, 235, .28); }
.cta__title { color: #fff; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: .05em; }
.cta__lead { margin-top: 14px; color: rgba(255, 255, 255, .9); font-size: 14.5px; }
.cta__actions { display: flex; flex-direction: column; align-items: center; flex: none; gap: 16px; }
.cta__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--font-en); font-size: 26px; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; }

/* --------------------------------------------------------------------------
   下層ページ
   -------------------------------------------------------------------------- */
.page-hero { padding: 76px 0 84px; text-align: center; background:
	radial-gradient(600px 320px at 85% 0%, rgba(35, 181, 232, .15), transparent 70%),
	radial-gradient(520px 320px at 10% 100%, rgba(31, 111, 235, .10), transparent 70%),
	var(--tint); }
.page-hero__title { margin: 0; color: var(--navy); font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; line-height: 1.5; letter-spacing: .08em; }
.page-hero__lead { margin-top: 16px; color: var(--muted); }

.info-table { margin: 0; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.info-table > div { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); }
.info-table > div:last-child { border-bottom: 0; }
.info-table dt { padding: 22px 28px; background: #f8fbff; color: var(--navy); font-size: 14.5px; font-weight: 700; }
.info-table dd { margin: 0; padding: 22px 28px; }
/* 会社概要：固定ページの本文に入れた表（テーブルブロック）。.info-table と同じ見た目にする */
.company-content { margin-bottom: 0; }
.company-content .wp-block-table { margin: 0; }
.company-content table { width: 100%; border-collapse: collapse; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.company-content table th, .company-content table td { padding: 22px 28px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.company-content table th { width: 220px; background: #f8fbff; color: var(--navy); font-size: 14.5px; font-weight: 700; }
.company-content table tr:last-child > * { border-bottom: 0; }
.plain-list li { position: relative; padding-left: 1.1em; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }

.map { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.map iframe { display: block; width: 100%; height: 400px; border: 0; }
.map__address { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--navy); font-weight: 500; }
.map__address .icon { color: var(--blue); }

.form { padding: 48px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.form__row { margin: 0 0 26px; padding: 0; border: 0; }
.form__row > p { margin: 0; } /* Contact Form 7 が項目を <p> で包むため */
.form__row > label, .form__row > p > label, .form__row > legend { display: block; margin-bottom: 8px; padding: 0; color: var(--navy); font-size: 14.5px; font-weight: 700; }
.req { margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: #ffe9ec; color: #d83a52; font-size: 11px; vertical-align: 1px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
	width: 100%; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fbfdff; color: var(--navy); font: inherit; line-height: 1.6; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(31, 111, 235, .12); }
.form textarea { resize: vertical; }
.form__checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check, .wpcf7-list-item label { cursor: pointer; }
.check input, .wpcf7-list-item input { position: absolute; opacity: 0; }
.check span, .wpcf7-list-item-label { display: inline-block; padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; transition: background-color .2s, border-color .2s, color .2s; }
.check input:checked + span, .wpcf7-list-item input:checked + .wpcf7-list-item-label { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.check input:focus-visible + span, .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 3px solid rgba(31, 111, 235, .45); outline-offset: 2px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { color: var(--muted); font-size: 13px; text-align: center; }
.form__submit { margin-top: 24px; text-align: center; }

/* お問い合わせ：Contact Form 7 のフォーム。フォームの HTML は上の .form__row などのクラスで書いている（inc/contact.php） */
.contact-content { margin-bottom: 0; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 10px; }
.wpcf7-list-item { margin: 0; }
.form .wpcf7-not-valid-tip { margin-top: 6px; color: #d83a52; font-size: 13px; }
.wpcf7 form.form .wpcf7-response-output { margin: 32px 0 0; padding: 18px 24px; border: 0; border-radius: var(--radius-sm); }
.wpcf7 form.form.sent .wpcf7-response-output { background: #e9f8f0; color: #1c6b45; }
.wpcf7 form.form.invalid .wpcf7-response-output,
.wpcf7 form.form.unaccepted .wpcf7-response-output,
.wpcf7 form.form.payment-required .wpcf7-response-output,
.wpcf7 form.form.failed .wpcf7-response-output,
.wpcf7 form.form.aborted .wpcf7-response-output,
.wpcf7 form.form.spam .wpcf7-response-output { background: #fff0f2; color: #b72c44; }

.notice { margin-bottom: 32px; padding: 22px 28px; border-radius: var(--radius-sm); }
.notice--ok { background: #e9f8f0; color: #1c6b45; text-align: center; }
.notice--error { background: #fff0f2; color: #b72c44; }
.notice--error .plain-list li::before { background: #d83a52; }

.tel-box { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 48px; color: var(--muted); font-size: 14px; }
.tel-box a { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-family: var(--font-en); font-size: 30px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.tel-box .icon { color: var(--blue); }

.news-list { border-top: 1px solid var(--line); }
.news-list__item a { display: flex; align-items: center; gap: 28px; padding: 24px 12px; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: background-color .2s, padding .2s; }
.news-list__item a:hover { padding-left: 20px; background: var(--tint); }
.news-list time { flex: none; color: var(--muted); font-family: var(--font-en); font-size: 14px; letter-spacing: .06em; }
.news-list__title { flex: 1; font-weight: 500; }
.news-list .icon { color: var(--blue); }

.entry__title { margin: 6px 0 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.8vw, 30px); letter-spacing: .04em; }
.entry-content { margin-bottom: 56px; }
.entry-content img { border-radius: var(--radius-sm); }
.navigation.pagination { margin-top: 48px; text-align: center; }
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; margin: 0 3px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--navy); font-size: 14px; text-decoration: none; }
.nav-links .page-numbers.current { border-color: var(--blue); background: var(--blue); color: #fff; }
.nav-links a.page-numbers:hover { border-color: var(--blue); color: var(--blue); }

.entry-content h2 { margin: 2em 0 .8em; font-size: 24px; }
.entry-content h3 { margin: 1.8em 0 .6em; font-size: 19px; }
.entry-content ul { margin: 0 0 1em 1.4em; list-style: disc; }
.entry-content ol { margin: 0 0 1em 1.4em; list-style: decimal; }
.entry { margin-bottom: 56px; }
.entry__date { color: var(--muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-footer { padding: 72px 0 32px; background: var(--navy); color: rgba(255, 255, 255, .78); font-size: 14px; }
.site-footer a { color: rgba(255, 255, 255, .88); }
.site-footer .logo { color: #fff; }
.site-footer .logo__sub { color: rgba(255, 255, 255, .6); }
.site-footer__inner { display: flex; justify-content: space-between; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-footer__address { margin-top: 22px; line-height: 2; }
.site-footer__nav ul { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; }
.site-footer__copy { margin-top: 26px; color: rgba(255, 255, 255, .5); text-align: center; font-family: var(--font-en); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: 48px; }
	.hero__visual { max-width: 560px; width: 100%; margin: 0 auto; }
	.feature-grid, .flow { grid-template-columns: repeat(2, 1fr); }
	.flow__item:not(:last-child)::after { display: none; }
	.reason-grid, .service-grid, .work-grid { grid-template-columns: repeat(2, 1fr); }
	.ai-teaser { grid-template-columns: 1fr; gap: 48px; }
	.cta__box { flex-direction: column; text-align: center; padding: 52px 32px; }
}

@media (max-width: 860px) {
	:root { --header-h: 66px; }
	.nav-toggle { display: block; }
	.global-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px 24px 28px; background: #fff; box-shadow: 0 20px 30px rgba(16, 41, 74, .1); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
	.global-nav.is-open { visibility: visible; opacity: 1; transform: none; }
	.global-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.global-nav__list a { display: block; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
	.global-nav__list a::after { display: none; }
}

@media (max-width: 640px) {
	body { font-size: 15px; }
	.container { padding: 0 20px; }
	.pc-only { display: none; }
	.sp-only { display: inline; }
	.section { padding: 76px 0; }
	.section-head { margin-bottom: 40px; }
	.hero { padding: 44px 0 80px; }
	.hero__lead { font-size: 15px; }
	.hero__actions .btn { flex: 1 1 100%; }
	.hero__visual { min-height: 340px; }
	.mock-browser { left: 0; right: 0; }
	.hero__photo { left: 0; right: 0; bottom: 36px; border-radius: 22px; }
	.float-card--chart { right: 0; width: 140px; padding: 12px 14px; }
	.bars { height: 46px; }
	.float-card--ai { left: 0; bottom: 60px; }
	.float-card--cart { right: 0; bottom: 0; }
	.reason-grid, .service-grid, .work-grid, .feature-grid, .flow { grid-template-columns: 1fr; gap: 20px; }
	.logo__name { font-size: 16px; }
	.logo__mark { width: 38px; height: 38px; font-size: 19px; }
	.ai-teaser__visual { padding: 32px 18px; gap: 8px; }
	.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.compare__item { max-width: none; }
	.compare__item:first-child { grid-column: 1 / -1; justify-self: center; width: 64%; }
	.compare__arrow { grid-column: 1 / -1; justify-self: center; margin-bottom: 0; transform: rotate(90deg); }
	.compare__item figcaption { flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
	.cta { padding-bottom: 76px; }
	.section--tint + .cta { padding-top: 76px; }
	.cta__box { padding: 44px 24px; border-radius: 24px; }
	.cta__actions .btn { width: 100%; }
	.page-hero { padding: 52px 0 58px; }
	.info-table > div { grid-template-columns: 1fr; }
	.info-table dt { padding: 14px 20px 6px; background: transparent; color: var(--blue-dark); font-size: 13px; }
	.info-table dd { padding: 0 20px 16px; }
	.company-content table th, .company-content table td { display: block; width: auto; }
	.company-content table th { padding: 14px 20px 6px; border-bottom: 0; background: transparent; color: var(--blue-dark); font-size: 13px; }
	.company-content table td { padding: 0 20px 16px; }
	.map iframe { height: 300px; }
	.form { padding: 28px 20px; }
	.form__submit .btn { width: 100%; }
	.site-footer__inner { flex-direction: column; gap: 36px; }
	.news-list__item a { flex-wrap: wrap; gap: 4px 16px; padding: 18px 4px; }
	.news-list time { width: 100%; font-size: 13px; }
	.tel-box a { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.has-reveal .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   採用デザイン（C案：ミニマル）  2026-10-15 決定
   ここより上は共通の土台、ここから下がC案の指定。body に常に design-c クラスを付けて適用している
   （functions.php の nsc_body_class）。
   ========================================================================== */


.design-c {
	--blue: #1f6feb;
	--blue-dark: #1558c4;
	--blue-soft: #eef4ff;
	--sky: #1f6feb;
	--tint: #f6f7f9;
	--navy: #111827;
	--text: #374151;
	--muted: #6b7280;
	--line: #e5e7eb;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: none;
	--shadow-lg: none;
	--photo-before: #f1f2f4;
	--photo-after: #e9f1fe;
}

.design-c .container { max-width: 1240px; }
.design-c .container.narrow { max-width: 920px; }

/* ボタン・ラベル類：装飾を落とす */
.design-c .btn { border-radius: 0; }
.design-c .btn:hover { transform: none; }
.design-c .btn--primary { background: var(--navy); box-shadow: none; }
.design-c .btn--primary:hover { background: var(--blue); box-shadow: none; }
.design-c .btn--ghost { border-color: var(--navy); background: transparent; color: var(--navy); }
.design-c .btn--ghost:hover { background: var(--navy); color: #fff; }
.design-c .btn--white { color: var(--navy); }
.design-c .chip { padding: 0; border-radius: 0; background: none; color: var(--blue); letter-spacing: .08em; }
.design-c .chip--gray { color: var(--muted); }
.design-c .badge { top: 28px; right: 0; border-radius: 0; background: var(--blue); }
.design-c .req,
.design-c .check span,
.design-c .nav-toggle,
.design-c .ai-frame__tag { text-align: left; }

/* ヘッダー */
.design-c .site-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; }
.design-c .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: none; }
.design-c .logo__mark { border-radius: 0; background: var(--navy); box-shadow: none; }

/* ヒーロー：どの幅でもノートPCの写真を背景に敷き、文字を上に載せる。
   文字の下は白いグラデーションで薄め、読みやすさを保つ（幅ごとの調整は末尾の @media） */
.design-c .hero { padding: 0; border-bottom: 0; background: #e3f4fb url(../img/hero/desk-screen.jpg) right -14vw center / cover no-repeat; }
.design-c .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 28%, rgba(255, 255, 255, .5) 44%, rgba(255, 255, 255, 0) 58%); }
.design-c .hero__inner { position: relative; grid-template-columns: minmax(0, 640px); gap: 0; align-content: center; min-height: clamp(640px, 50vw, 800px); padding-top: 64px; padding-bottom: 72px; }
.design-c .hero__visual { display: none; }
.design-c .hero__label { margin-bottom: 36px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 14px; }
.design-c .dot { background: var(--blue); box-shadow: none; }
.design-c .hero__title { font-size: clamp(40px, 7.2vw, 92px); line-height: 1.24; letter-spacing: .02em; }
.design-c .marker { background: none; color: var(--blue); }
.design-c .hero__lead { max-width: 37em; margin: 44px 0 48px; font-size: 17px; }
.design-c .hero__platforms { gap: 0; margin-top: 64px; }
.design-c .hero__platforms li { padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; }
.design-c .hero__platforms li + li::before { content: "/"; margin: 0 14px; color: #c7ccd4; }

/* セクション見出し：英字を大きく、日本語を小さく添える */
.design-c .section { padding: 128px 0; }
.design-c .section-head { max-width: none; margin: 0 0 72px; text-align: left; }
.design-c .section-head .eyebrow { margin-bottom: 14px; color: var(--navy); font-size: clamp(38px, 5.4vw, 68px); line-height: 1.08; letter-spacing: -.01em; }
.design-c .section-head .section-head__title { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: .14em; }
.design-c .section-head__lead { max-width: 40em; margin-top: 24px; color: var(--text); }
.design-c .section-more { text-align: left; }
.design-c .lead-block { text-align: left; }

/* カード：面をやめ、上の罫線だけで区切る */
.design-c .reason-grid,
.design-c .service-grid { gap: 48px 40px; }
.design-c .reason-card,
.design-c .service-card,
.design-c .feature-card,
.design-c .flow__item { padding: 28px 0 0; border: 0; border-top: 1px solid var(--navy); border-radius: 0; background: transparent; box-shadow: none; }
.design-c .reason-card__num { margin-bottom: 22px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue); font-size: 14px; letter-spacing: .12em; }
.design-c .service-card--link { outline: 0; }
.design-c .service-card--link:hover { transform: none; box-shadow: none; }
.design-c .service-card--link:hover h3 { color: var(--blue); }
.design-c .service-card__icon { place-items: start; width: auto; height: auto; margin-bottom: 18px; border-radius: 0; background: none; font-size: 28px; }
.design-c .check-list .icon { border-radius: 0; background: none; }

/* AI画像作成 */
.design-c .ai-teaser__visual { border-radius: 0; background: var(--tint); }
.design-c .ai-frame,
.design-c .compare__img { border-radius: 0; }
.design-c .ai-frame--after,
.design-c .compare__img--after { box-shadow: none; }
.design-c .ai-teaser__arrow,
.design-c .compare__arrow { border-radius: 0; background: none; box-shadow: none; }

/* 制作実績 */
.design-c .work-grid { gap: 56px 40px; }
.design-c .work-card { border-radius: 0; background: transparent; box-shadow: none; }
.design-c .work-card:hover { transform: none; box-shadow: none; }
.design-c .work-card:hover .work-card__name { color: var(--blue); }
.design-c .work-card__thumb { border: 1px solid var(--line); }
.design-c .work-card__body { padding: 20px 0 0; }
.design-c .filter { justify-content: flex-start; gap: 0 32px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.design-c .filter__btn { margin-bottom: -1px; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
.design-c .filter__btn.is-active { border-bottom-color: var(--blue); background: none; color: var(--navy); font-weight: 700; }

/* 流れ */
.design-c .flow { gap: 40px; }
.design-c .flow__item::after { display: none; }
.design-c .flow__step { padding: 0; border-radius: 0; background: none; color: var(--blue); }

/* CTA・下層ページの帯 */
.design-c .cta__box { padding: 80px 72px; border-radius: 0; background: var(--navy); box-shadow: none; }
.design-c .page-hero { padding: 104px 0 80px; border-bottom: 1px solid var(--line); background: #fff; text-align: left; }
.design-c .page-hero__title { font-size: clamp(36px, 6vw, 76px); letter-spacing: .02em; }

/* 会社概要・フォーム */
.design-c .info-table { border-top: 1px solid var(--navy); border-radius: 0; box-shadow: none; }
.design-c .info-table dt { padding-left: 0; background: none; }
.design-c .info-table dd { padding-right: 0; }
.design-c .company-content table { border-top: 1px solid var(--navy); }
.design-c .company-content table th { padding-left: 0; background: none; }
.design-c .company-content table td { padding-right: 0; }
.design-c .map { border-radius: 0; box-shadow: none; }
.design-c .form { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.design-c .form input[type="text"],
.design-c .form input[type="email"],
.design-c .form input[type="tel"],
.design-c .form textarea { border-width: 1px; border-color: #c7ccd4; background: #fff; }
.design-c .form input.wpcf7-not-valid,
.design-c .form textarea.wpcf7-not-valid { border-color: #d83a52; }
.design-c .form__note,
.design-c .form__submit { text-align: left; }
.design-c .tel-box { align-items: flex-start; }
.design-c .notice { border-radius: 0; }

/* フッター：白地に罫線 */
.design-c .site-footer { border-top: 1px solid var(--line); background: #fff; color: var(--text); }
.design-c .site-footer a,
.design-c .site-footer .logo { color: var(--navy); }
.design-c .site-footer .logo__sub { color: var(--muted); }
.design-c .site-footer__inner { border-bottom-color: var(--line); }
.design-c .site-footer__copy { color: var(--muted); }

@media (min-width: 1280px) {
	.design-c .hero__title { font-size: clamp(56px, 5.2vw, 80px); }
	.design-c .hero__lead { max-width: 32em; margin: 36px 0 40px; }
	.design-c .hero__platforms { margin-top: 48px; }
}

/* スマホ：写真は文字の下で薄く見せ、下の方でノートPCが見えるようにする。文字サイズと余白もスマホ用に詰める */
@media (max-width: 640px) {
	.design-c .hero { background-position: 90% center; }
	.design-c .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .93) 72%, rgba(255, 255, 255, .35) 88%, rgba(255, 255, 255, 0) 100%); }
	.design-c .hero__inner { min-height: 0; padding-top: 48px; padding-bottom: 200px; }
	.design-c .hero__label { align-items: flex-start; margin-bottom: 20px; font-size: 12.5px; line-height: 1.7; }
	.design-c .hero__label .dot { flex: none; margin-top: .6em; }
	.design-c .hero__title { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.3; }
	.design-c .hero__lead { margin: 24px 0 32px; font-size: 15px; }
	.design-c .hero__actions { gap: 12px; }
	.design-c .hero__platforms { margin-top: 28px; }
	.design-c .hero__platforms li { font-size: 12px; }
	.design-c .hero__platforms li + li::before { margin: 0 8px; }

	.design-c .section { padding: 72px 0; }
	.design-c .section-head { margin-bottom: 36px; }
	.design-c .section-head .eyebrow { margin-bottom: 10px; font-size: 34px; }
	.design-c .section-head .section-head__title { font-size: 13.5px; }
	.design-c .section-head__lead { margin-top: 16px; font-size: 14.5px; }
	.design-c .reason-grid,
	.design-c .service-grid,
	.design-c .feature-grid { gap: 32px; }
	.design-c .reason-card,
	.design-c .service-card,
	.design-c .feature-card,
	.design-c .flow__item { padding-top: 22px; }
	.design-c .reason-card__num { margin-bottom: 14px; }
	.design-c .service-card__icon { margin-bottom: 12px; font-size: 24px; }
	.design-c .badge { top: 22px; }
	.design-c .flow { gap: 28px; }
	.design-c .work-grid { gap: 40px; }
	/* 絞り込みは折り返さず、横にスクロールさせる */
	.design-c .filter { flex-wrap: nowrap; gap: 0 20px; margin: 0 -20px 36px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
	.design-c .filter::-webkit-scrollbar { display: none; }
	.design-c .filter__btn { flex: none; white-space: nowrap; }

	.design-c .ai-teaser { gap: 36px; }
	.design-c .ai-teaser__visual { padding: 28px 16px; gap: 10px; }
	.design-c .ai-teaser__arrow { width: 24px; }

	.design-c .page-hero { padding: 52px 0 40px; }
	.design-c .page-hero__title { font-size: clamp(30px, 8.6vw, 36px); word-break: keep-all; overflow-wrap: anywhere; } /* 「・」などの区切りで改行し、1文字だけ次の行に残らないようにする */
	.design-c .cta__box { padding: 48px 22px; }
	.design-c .cta__title { font-size: 20px; }
	.design-c .cta__lead { text-align: left; }
}

/* タブレット〜小さめのノートPC：写真は右に寄せ、文字の側を広めに白く薄める */
@media (min-width: 641px) and (max-width: 1279px) {
	.design-c .hero { background-position: 92% center; }
	.design-c .hero::before { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .94) 58%, rgba(255, 255, 255, .55) 74%, rgba(255, 255, 255, 0) 92%); }
	.design-c .hero__inner { grid-template-columns: minmax(0, 520px); min-height: 0; padding-top: 96px; padding-bottom: 104px; }
	.design-c .hero__title { font-size: clamp(44px, 6.4vw, 64px); }
}


/* ==========================================================================
   トップ：サービスの詳細（ネットショップのアドバイザー／業務システムの作成）
   現行サイト service.html から移した2項目（2026-10-16）。元の図（画像）は HTML・CSS で描き直している
   ========================================================================== */
.svc-detail__body { max-width: 780px; }
.svc-detail__body > * + * { margin-top: 20px; }
.svc-detail__catch { color: var(--navy); font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.7; }
.svc-point { margin-top: 36px; padding: 28px 32px; background: var(--tint); }
.svc-point__title { margin-bottom: 10px; color: var(--blue-dark); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.svc-point strong { color: var(--navy); }
.svc-subhead { display: flex; align-items: center; gap: 14px; margin: 80px 0 28px; font-size: 20px; letter-spacing: .04em; }
.svc-subhead::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--blue); }
/* 本文と図を左右に並べる（アドバイザー：本文｜売上の図、業務システム：本文｜データ移行例）。1100px未満は縦に並べる */
.svc-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 64px; }
.svc-detail__grid .growth { margin: 0; }
.svc-detail__side .svc-subhead { margin-top: 0; }
/* 句の切れ目（<wbr>・読点・中黒）でだけ改行し、単語の途中で切れないようにする */
.nowrap { white-space: nowrap; } /* 本文中で、語の途中や1〜2文字だけの改行を避けたい箇所に使う */
.svc-detail__catch,
.svc-detail .check-list li,
.order-flow__link,
.order-flow__note,
.order-flow__db { word-break: keep-all; overflow-wrap: anywhere; }

/* 図1：売上の伸び（サイト作成〜在庫管理） */
.growth { margin: 64px 0 0; }
.growth__chart { display: flex; }
.growth__axis { position: relative; flex: none; width: 40px; margin: 0; border-right: 1px solid var(--navy); }
.growth__axis span { position: absolute; top: 18px; right: 14px; color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: .3em; writing-mode: vertical-rl; }
.growth__axis::after { content: ""; position: absolute; top: -2px; right: -6px; border: 6px solid transparent; border-top: 0; border-bottom: 10px solid var(--navy); }
.growth__steps { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 8px; height: 320px; padding: 0 0 0 14px; border-bottom: 1px solid var(--navy); }
.growth__steps li { display: flex; justify-content: center; height: calc(16% + var(--i) * 13.5%); padding: 14px 2px 0; background: #e3ecfb; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-align: center; word-break: keep-all; } /* 狭いときは「サイト／作成」のように <wbr> の位置で改行 */
.growth__steps li:nth-child(2) { background: #d4e2fa; }
.growth__steps li:nth-child(3) { background: #c2d6f8; }
.growth__steps li:nth-child(4) { background: #a9c5f5; }
.growth__steps li:nth-child(5) { background: #7fa9f1; } /* 白い文字だとコントラストが足りないため、文字は紺のまま */
.growth__steps li:nth-child(6) { background: var(--blue); color: #fff; }
.growth figcaption { margin-top: 16px; color: var(--muted); font-size: 13.5px; word-break: keep-all; overflow-wrap: anywhere; }

/* 図2：データ移行例（楽天の商品データ ⇄ 各サイト） */
.sync { margin: 0; }
.sync__diagram { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 0 4px; max-width: 760px; }
.sync__source { display: grid; place-items: center; margin: 0; padding: 24px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.6; text-align: center; }
.sync__hub { display: none; }
.sync__targets { display: grid; gap: 12px; }
.sync__targets li { display: flex; align-items: center; }
.sync__arrow { display: grid; place-items: center; flex: none; width: 56px; color: var(--blue); font-size: 24px; }
.sync__target { flex: 1; padding: 18px 20px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 15.5px; font-weight: 700; }
.sync figcaption .check-list { margin: 24px 0 0; }

/* 図3：注文処理例（販売サイト → システム ⇄ 注文情報 → 伝票発行・出荷） */
.order-flow { margin: 0; }
.order-flow__diagram { display: grid; grid-template-columns: minmax(0, 200px) 112px minmax(0, 1fr) 48px minmax(0, 1.1fr); align-items: start; gap: 0 4px; }
.order-flow__label { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }
.order-flow__shops { display: grid; gap: 8px; }
.order-flow__shops li { padding: 10px 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; }
.order-flow__note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.order-flow__link { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.order-flow__arrow { display: grid; place-items: center; color: var(--blue); font-size: 26px; }
.order-flow__system { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; padding: 12px; border: 1px solid var(--navy); background: #fff; }
.order-flow__box { display: grid; place-items: center; min-height: 64px; margin: 0; padding: 10px; background: var(--tint); color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; }
.order-flow__box--in { grid-row: 1 / 3; }
/* システムと注文情報のあいだ：左（取込み）は書き込みで下向き、右（検索・ダウンロード）は読み出しで上向き。列幅はシステムの枠とそろえる */
.order-flow__io { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.order-flow__io-arrow { display: grid; place-items: center; height: 36px; color: var(--blue); font-size: 22px; }
.order-flow__io-arrow--down .icon { transform: rotate(90deg); }
.order-flow__io-arrow--up .icon { transform: rotate(-90deg); }
.order-flow__db { margin: 0; padding: 14px 16px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.order-flow__db-name { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--navy); font-size: 14px; font-weight: 700; }
.order-flow__db-name .icon { color: var(--blue); font-size: 18px; }
.order-flow__col--out { display: grid; gap: 12px; padding-top: 36px; } /* 左2列の見出し（お客様からの注文／システム）の高さ分を空けて、上端をそろえる */
.order-flow__result { padding: 16px 18px; border: 1px solid var(--line); background: #fff; }
.order-flow__from { margin: 0 0 6px; color: var(--blue-dark); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.order-flow__result .order-flow__note { margin: 0 0 8px; }
.order-flow__result-main { margin: 0; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.6; }
.order-flow__result-main small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.order-flow__ship { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--navy); font-size: 14px; font-weight: 700; }
.order-flow__ship .order-flow__arrow { font-size: 18px; }

/* 注文処理例：横に5列並べると窮屈になる幅（1100px未満）では縦に並べ、矢印を下向きにする */
@media (max-width: 1099px) {
	.svc-detail__grid { grid-template-columns: minmax(0, 1fr); }
	.svc-detail__grid .growth { margin-top: 56px; }
	.svc-detail__side .svc-subhead { margin-top: 80px; }

	.order-flow__diagram { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; }
	.order-flow__col--out { padding-top: 0; }
	.order-flow__shops { display: flex; flex-wrap: wrap; }
	.order-flow__shops li { flex: 1 1 auto; }
	/* 矢印は中央の線上に置き、説明はその右に添える */
	.order-flow__link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; padding: 14px 0; text-align: left; }
	.order-flow__link .order-flow__arrow { grid-column: 2; transform: rotate(90deg); }
	.order-flow__link > span:not(.order-flow__arrow) { grid-column: 3; justify-self: start; }
	.order-flow__link br { display: none; }
}

/* 売上の図：棒を横向きにし、上から下へ伸びていくように並べる（縦の棒だと文字が収まらない幅まで） */
@media (max-width: 767px) {
	.growth__chart { flex-direction: column; }
	.growth__steps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 44px; align-items: stretch; gap: 8px; height: auto; padding: 0 0 14px; border-bottom: 0; border-left: 1px solid var(--navy); }
	.growth__steps li { align-items: center; justify-content: flex-start; width: calc(34% + var(--i) * 11%); height: auto; padding: 0 14px; font-size: 14px; }
	.growth__axis { order: 2; width: auto; height: 24px; border-right: 0; border-top: 1px solid var(--navy); }
	.growth__axis span { top: 6px; right: 14px; writing-mode: horizontal-tb; letter-spacing: .2em; }
	.growth__axis::after { top: -6px; right: -2px; border: 6px solid transparent; border-right: 0; border-left: 10px solid var(--navy); }
}

@media (max-width: 640px) {
	.svc-point { padding: 22px 20px; }
	.svc-subhead { margin: 56px 0 20px; font-size: 18px; }
	.svc-detail__side .svc-subhead { margin-top: 56px; }
	.svc-detail__grid .growth { margin-top: 44px; }

	/* データ移行例：元データを上に、移行先を下に並べる */
	.sync__diagram { grid-template-columns: minmax(0, 1fr); }
	.sync__source { padding: 18px; font-size: 16px; }
	.sync__source br { display: none; }
	.sync__hub { display: grid; place-items: center; padding: 10px 0; color: var(--blue); font-size: 26px; }
	.sync__hub .icon { transform: rotate(90deg); }
	.sync__arrow { display: none; }
	.sync__target { padding: 14px 18px; font-size: 15px; text-align: center; }
	.sync__targets { gap: 8px; }

	.order-flow__system { gap: 6px; padding: 8px; }
	.order-flow__box { padding: 10px 4px; }
	.order-flow__io { gap: 6px; padding: 0 8px; }
}