@charset "UTF-8";

/* ============================================================
   デザイントークン（色・グラデを一元管理）
   ============================================================ */
:root {
  /* ブランドのグラデ（ボタン・矢印枠など） */
  --grad-brand: linear-gradient(135deg, #ad4ea7 0%, #8e61b6 50%, #24abff 100%);
  --grad-brand-loop: linear-gradient(90deg, #ad4ea7, #8e61b6, #24abff, #8e61b6, #ad4ea7);
  --grad-brand-loop-soft: linear-gradient(90deg, #d29ecd, #b8a2d6, #86c9ff, #b8a2d6, #d29ecd);
  --grad-brand-loop-med: linear-gradient(90deg, #c076bd, #a382c6, #55bbff, #a382c6, #c076bd);
  --grad-brand-med: linear-gradient(135deg, #c076bd 0%, #a382c6 50%, #55bbff 100%);
  /* 4事業の主色 */
  --c-01: #3ca0f5; /* BUILD  青 */
  --c-02: #c13bbf; /* AI     マゼンタ */
  --c-03: #38bec8; /* CLOUD  ティール */
  --c-04: #e66eaf; /* DX     ピンク */
  /* 4事業の2色グラデ（番号・矢印） */
  --grad-01: linear-gradient(135deg, #3ca0f5, #38c8d8);
  --grad-02: linear-gradient(135deg, #c13bbf, #8b5cf0);
  --grad-03: linear-gradient(135deg, #38bec8, #5fd096);
  --grad-04: linear-gradient(135deg, #e66eaf, #f5a082);
}

/* ============================================================
   リセット
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0px; background: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
ul, ol, li { list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
p { margin: 0px 0px 0px 0px; }
dl, dd, dt { margin: 0px 0px 0px 0px; }

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #11192f;
  background: #fbfbf8;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid #24abff; outline-offset: 2px; }

/* ============================================================
   共通パーツ（色・装飾）
   ============================================================ */
.section-label { font-family: "Cinzel", serif; letter-spacing: 0.14em; color: #8a90a0; }
.section-title { font-family: "Zen Old Mincho", serif; color: #11192f; font-weight: 600; }
.section-title--lg { line-height: 1.5; }

.btn-more { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; font-family: "Cinzel", serif; letter-spacing: 0.1em; border-radius: 8px; color: #a382c6; transition: color 0.55s ease; }
.btn-more::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 8px; padding: 1px; background: var(--grad-brand-med); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.btn-more::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 8px; background: var(--grad-brand-med); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; }
.btn-more:hover { color: #fbfbf8; }
.btn-more:hover::after { transform: scaleX(1); }

.btn-contact { display: inline-flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; letter-spacing: 0.08em; color: #fbfbf8; background: var(--grad-brand-loop-med); background-size: 200% 100%; background-position: 0% 50%; border-radius: 40px; transition: background-position 0.7s ease, box-shadow 0.5s ease, transform 0.5s ease; }
@keyframes btnContactFlow {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}
.btn-contact:hover { box-shadow: 0px 8px 22px rgba(70, 80, 160, 0.28); transform: translateY(-2px); animation: btnContactFlow 1s linear infinite; }
.btn-contact-lg { display: inline-flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; letter-spacing: 0.1em; color: #fbfbf8; background: var(--grad-brand-loop-med); background-size: 200% 100%; background-position: 0% 50%; border-radius: 40px; transition: background-position 0.7s ease, box-shadow 0.5s ease, transform 0.5s ease; }
.btn-contact-lg:hover { box-shadow: 0px 10px 28px rgba(70, 80, 160, 0.3); transform: translateY(-2px); animation: btnContactFlow 1s linear infinite; }

.site-logo { display: inline-flex; align-items: center; }
.site-logo__text { font-family: "Cinzel", serif; font-weight: 600; line-height: 1.15; color: #11192f; letter-spacing: 0.04em; }

/* 背景ウォーターマーク（巨大な薄いセリフ文字） */
.watermark { position: absolute; top: 0px; left: 0px; width: 100%; font-family: "Cinzel", serif; font-weight: 600; color: #11192f; opacity: 0.05; white-space: nowrap; overflow: hidden; pointer-events: none; letter-spacing: 0.04em; }
.watermark--center { text-align: center; }

/* フェードイン（元サイトの blur 解除に合わせる） */
.fade-in { opacity: 0; transform: translateY(20px); filter: blur(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out; }
.fade-in.is-visible { opacity: 1; transform: translateY(0px); filter: blur(0px); }

/* 開幕スプラッシュ（ロゴマーク登場アニメ） */
.loader { position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; background: #fbfbf8; z-index: 1000; transition: opacity 2s ease, visibility 2s ease; }
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loader__logo-wrap { display: block; opacity: 0; animation: splashLogoIn 1s ease-out 0.2s forwards; }
.loader__logo { display: block; animation: splashSpin 7s linear infinite; }
.loader__logo-text { display: block; font-family: "Zen Old Mincho", serif; font-weight: 600; letter-spacing: 0.04em; color: #11192f; line-height: 1; white-space: nowrap; font-size: 44px; }
/* 開幕リング: SVGではなく div の border-radius 円＋グラデ枠（mask）。width/heightで拡大するため
   iOS Safari の overflow/viewBox 由来で円が途中で切れる不具合が起きない。中心はサイズ変化に追従させる。 */
.loader__circle { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(135deg, #cdb0e6 0%, #c3b3e2 50%, #a8c6ef 100%); padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
@keyframes splashLogoIn { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: scale(1); } }
@keyframes splashSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100; transition: background 0.4s ease, box-shadow 0.4s ease; }
.site-header.is-scrolled { background: rgba(251, 251, 248, 0.45); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0px 1px 16px rgba(17, 25, 47, 0.05); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.global-nav__list a { font-family: "Cinzel", serif; letter-spacing: 0.06em; transition: color 0.3s ease; }
.global-nav__list a:hover { color: #24abff; }
.global-nav__list a[aria-current="page"] { color: #24abff; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; }
.nav-toggle__bar { display: block; background: #11192f; border-radius: 8px; transition: transform 0.3s ease, opacity 0.3s ease; }

/* ============================================================
   ヒーロー
   ============================================================ */
.section-hero { position: relative; overflow: hidden; background: #efeaf6; }
.hero-bg { position: absolute; inset: 0px; z-index: 0; animation: heroBgBreathe 22s ease-in-out infinite; will-change: transform; background:
  radial-gradient(38% 46% at 28% 32%, rgba(213, 180, 226, 0.85), rgba(213,180,226,0) 70%),
  radial-gradient(42% 50% at 72% 36%, rgba(176, 199, 240, 0.85), rgba(176,199,240,0) 70%),
  radial-gradient(46% 54% at 60% 64%, rgba(232, 186, 208, 0.8), rgba(232,186,208,0) 72%),
  radial-gradient(54% 64% at 40% 56%, rgba(186, 224, 232, 0.7), rgba(186,224,232,0) 74%),
  #efeaf6; }
.hero-blob { position: absolute; top: 50%; left: 50%; width: 52%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; animation: heroBlobFloat 14s ease-in-out infinite; will-change: transform; background:
  radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
  radial-gradient(closest-side at 60% 40%, rgba(178, 150, 220, 0.5), rgba(178,150,220,0) 70%); }
/* 漂う光のオーブ（装飾・HTML 追加不要の擬似要素） */
.hero-bg::before, .hero-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(36px); pointer-events: none; }
.hero-bg::before { width: 280px; height: 280px; top: 16%; left: 10%; background: radial-gradient(closest-side, rgba(176, 199, 240, 0.5), rgba(176,199,240,0)); animation: heroOrbA 16s ease-in-out infinite; }
.hero-bg::after { width: 320px; height: 320px; right: 8%; bottom: 12%; background: radial-gradient(closest-side, rgba(232, 186, 208, 0.45), rgba(232,186,208,0)); animation: heroOrbB 20s ease-in-out infinite; }
/* ゆっくり横切る光のシーン */
.section-hero::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 58%); transform: translateX(-120%); animation: heroSheen 10s ease-in-out 3.5s infinite; }
.section-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.section-hero__sub { font-family: "Zen Old Mincho", serif; color: #11192f; line-height: 1.9; opacity: 0; transform: translateY(28px); filter: blur(12px); transition: opacity 1.3s ease-out, transform 1.3s ease-out, filter 1.3s ease-out; }
.section-hero__title { font-family: "Cinzel", "Zen Old Mincho", serif; font-weight: 500; color: #11192f; line-height: 1.45; letter-spacing: 0.04em; }
/* 開幕演出の一部。ここの秒数はトップページの LCP（最大コンテンツの描画）に直結するが、
   ブランド表現として意図的にこの尺を保っている。 */
.hero-line { display: block; opacity: 0; transform: translateY(28px); filter: blur(12px); transition: opacity 1.3s ease-out, transform 1.3s ease-out, filter 1.3s ease-out; }
.section-hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity 1s ease-out; animation: heroScrollBob 2.6s ease-in-out infinite; }
.scroll-text { font-family: "Cinzel", serif; letter-spacing: 0.24em; color: #5a607a; }
.scroll-dots { display: flex; flex-direction: column; align-items: center; gap: 6px 0px; }
.scroll-dots i { width: 4px; height: 4px; border-radius: 50%; background: #5a607a; opacity: 0.15; animation: scrollDot 1.6s ease-in-out infinite; }
.scroll-dots i:nth-child(2) { animation-delay: 0.2s; }
.scroll-dots i:nth-child(3) { animation-delay: 0.4s; }
.scroll-dots i:nth-child(4) { animation-delay: 0.6s; }
@keyframes scrollDot { 0%, 100% { opacity: 0.15; } 35% { opacity: 1; } }
/* hero 環境アニメーション */
@keyframes heroBlobFloat {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-47%, -54%) scale(1.09); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes heroBgBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.06) rotate(1deg); }
}
@keyframes heroOrbA {
  0%, 100% { transform: translate(0px, 0px); }
  50%      { transform: translate(48px, 36px); }
}
@keyframes heroOrbB {
  0%, 100% { transform: translate(0px, 0px); }
  50%      { transform: translate(-56px, -32px); }
}
@keyframes heroSheen {
  0%        { transform: translateX(-120%) skewX(-12deg); }
  35%, 100% { transform: translateX(120%) skewX(-12deg); }
}
@keyframes heroScrollBob {
  0%, 100% { transform: translate(-50%, 0px); }
  50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-blob, .hero-bg::before, .hero-bg::after, .section-hero::after, .section-hero__scroll { animation: none; }
}
/* ヒーロー登場（スプラッシュ後に1行ずつ） */
body.is-loaded .section-hero__sub { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 0.1s; }
body.is-loaded .hero-line:nth-child(1) { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 0.5s; }
body.is-loaded .hero-line:nth-child(2) { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 0.95s; }
body.is-loaded .hero-line:nth-child(3) { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 1.4s; }
body.is-loaded .section-hero__scroll { opacity: 1; transition-delay: 2s; }

/* 下層ページ共通ヒーロー（淡色＋パステルオーブ） */
.page-hero { position: relative; overflow: hidden; background: #fbfbf8; text-align: center; }
.page-hero::before { content: ""; position: absolute; top: 50%; left: 50%; width: 92%; height: 132%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background:
  radial-gradient(40% 44% at 36% 44%, rgba(213, 180, 226, 0.65), rgba(213,180,226,0) 60%),
  radial-gradient(44% 46% at 66% 46%, rgba(176, 199, 240, 0.65), rgba(176,199,240,0) 60%),
  radial-gradient(46% 50% at 52% 60%, rgba(232, 186, 208, 0.55), rgba(232,186,208,0) 62%);
  animation: pageHeroOrb 14s ease-in-out infinite alternate; }
@keyframes pageHeroOrb { from { transform: translate(-50%, -50%); } to { transform: translate(-46%, -50%); } }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__en { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.1em; color: #11192f; opacity: 0; transform: translateY(24px); filter: blur(12px); transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }
.page-hero__ja { font-family: "Zen Old Mincho", serif; color: #8a90a0; opacity: 0; transform: translateY(24px); filter: blur(12px); transition: opacity 1.1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out; }
body.is-loaded .page-hero__en { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 0.25s; }
body.is-loaded .page-hero__ja { opacity: 1; transform: translateY(0px); filter: blur(0px); transition-delay: 0.55s; }
.breadcrumb { font-family: "Cinzel", serif; letter-spacing: 0.04em; color: #8a90a0; }
.breadcrumb a { transition: color 0.3s ease; }
.breadcrumb a:hover { color: #24abff; }
.breadcrumb span { color: #c0c0b8; }

/* ============================================================
   PARTNER（事業継続）
   ============================================================ */
.section-partner { position: relative; overflow: hidden; background: #fbfbf8; }
.section-partner__text p { color: #444b5e; }
/* 見出し・各段落・VIEW MORE をばらばらにフェードイン（親は表示のまま、子を時間差で） */
.section-partner__text.fade-in { opacity: 1; transform: none; filter: none; }
.section-partner__text > * { opacity: 0; transform: translateY(16px); filter: blur(10px); transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; }
.section-partner__text.is-visible > * { opacity: 1; transform: translateY(0px); filter: blur(0px); }
.section-partner__text.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.section-partner__text.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.section-partner__text.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.section-partner__text.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.section-partner__text.is-visible > *:nth-child(6) { transition-delay: 0.60s; }
.section-partner__text.is-visible > *:nth-child(7) { transition-delay: 0.72s; }
/* CONCEPTのコピー段落を1つずつ表示（company の文章アニメと同様）*/
.section-partner__copy > * { opacity: 0; transform: translateY(16px); filter: blur(10px); transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; }
.section-partner__text.is-visible .section-partner__copy > * { opacity: 1; transform: translateY(0px); filter: blur(0px); }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(1) { transition-delay: 0.20s; }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(2) { transition-delay: 0.30s; }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(3) { transition-delay: 0.40s; }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(4) { transition-delay: 0.50s; }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(5) { transition-delay: 0.60s; }
.section-partner__text.is-visible .section-partner__copy > *:nth-child(6) { transition-delay: 0.70s; }
.section-partner__art { position: relative; display: flex; align-items: center; justify-content: center; }
.art-blob { display: block; border-radius: 50%; filter: blur(8px); background:
  radial-gradient(closest-side at 40% 35%, rgba(180, 205, 240, 0.85), rgba(180,205,240,0) 72%),
  radial-gradient(closest-side at 65% 60%, rgba(212, 184, 226, 0.8), rgba(212,184,226,0) 72%),
  radial-gradient(closest-side, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%); }
.art-blob--lozenge { border-radius: 50% 50% 48% 52% / 60% 58% 42% 40%; }

/* ============================================================
   SERVICE
   ============================================================ */
.section-service { position: relative; overflow: hidden; background: linear-gradient(180deg, #e9ecf8 0%, #eef0f7 100%); }
.section-service__head { text-align: center; }
.section-service__lead p { color: #444b5e; }
.service-row { position: relative; background: #fdfdff1a; border-radius: 16px; overflow: hidden; box-shadow: 0px 16px 48px rgba(60, 70, 120, 0.06); }
.service-row__no { position: absolute; font-family: "Cinzel", serif; color: #b9c6ec; line-height: 1; }
.service-row__art { position: relative; display: flex; align-items: center; justify-content: center; }
/* 4事業のブロブ：各ブロブを「2色の丸」で構成。4つとも色も形もちがう
   01=青＋ティール / 02=マゼンタ＋紫 / 03=ティール＋グリーン / 04=ピンク＋コーラル */
.art-blob--discs { background:
  radial-gradient(38% 50% at 34% 56%, rgba(60,160,245,0.85), rgba(60,160,245,0) 72%),
  radial-gradient(38% 50% at 64% 42%, rgba(56,200,216,0.78), rgba(56,200,216,0) 72%); border-radius: 50%; }
.art-blob--rings { background:
  radial-gradient(40% 46% at 35% 40%, rgba(193,59,191,0.84), rgba(193,59,191,0) 72%),
  radial-gradient(40% 46% at 65% 60%, rgba(139,92,240,0.74), rgba(139,92,240,0) 72%); border-radius: 50%; }
.art-blob--infinity { background:
  radial-gradient(40% 50% at 32% 50%, rgba(56, 190, 200, 0.85), rgba(56, 190, 200, 0) 72%),
  radial-gradient(45% 50% at 68% 50%, rgb(48 224 106 / 80%), rgba(95, 208, 150, 0) 72%); border-radius: 50%; }
.art-blob--orbit { background:
  radial-gradient(37% 47% at 41% 56%, rgba(230, 110, 175, 0.84), rgba(230, 110, 175, 0) 72%),
  radial-gradient(31% 38% at 63% 36%, rgba(245, 160, 130, 0.88), rgba(245, 160, 130, 0) 72%); border-radius: 50%; }
.art-label { position: absolute; font-family: "Cinzel", serif; color: #ffffff; letter-spacing: 0.12em; }
.section-partner__art .art-blob--lozenge { background:
  radial-gradient(46% 56% at 38% 44%, rgba(142, 97, 182, 0.82), rgba(142, 97, 182, 0) 72%),
  radial-gradient(46% 56% at 64% 58%, rgba(36, 171, 255, 0.70), rgba(36, 171, 255, 0) 72%); }
.service-row__title { font-family: "Zen Old Mincho", serif; color: #11192f; font-weight: 600; }
.service-row__link { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 4; }
.service-row__arrow { position: absolute; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 50%; color: #8e61b6; transition: color 1.4s ease; }
.service-row__arrow::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 50%; padding: 1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.service-row__arrow::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 50%; background: var(--grad-brand); opacity: 0; transition: opacity 1.4s ease; z-index: -1; }
.service-row:hover .service-row__arrow { color: #fbfbf8; }
.service-row:hover .service-row__arrow::after { opacity: 1; }
/* 各行を「ブロブの2色グラデ」で色分け：番号＝グラデ文字／矢印＝グラデの枠線＋ホバーでグラデ塗り＋白「›」 */
.service-list .service-row:nth-child(1) .service-row__no { background: var(--grad-01); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-list .service-row:nth-child(2) .service-row__no { background: var(--grad-02); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-list .service-row:nth-child(3) .service-row__no { background: var(--grad-03); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-list .service-row:nth-child(4) .service-row__no { background: var(--grad-04); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-list .service-row:nth-child(1) .service-row__arrow { color: var(--c-01); }
.service-list .service-row:nth-child(2) .service-row__arrow { color: var(--c-02); }
.service-list .service-row:nth-child(3) .service-row__arrow { color: var(--c-03); }
.service-list .service-row:nth-child(4) .service-row__arrow { color: var(--c-04); }
.service-list .service-row:nth-child(1) .service-row__arrow::before,
.service-list .service-row:nth-child(1) .service-row__arrow::after { background: var(--grad-01); }
.service-list .service-row:nth-child(2) .service-row__arrow::before,
.service-list .service-row:nth-child(2) .service-row__arrow::after { background: var(--grad-02); }
.service-list .service-row:nth-child(3) .service-row__arrow::before,
.service-list .service-row:nth-child(3) .service-row__arrow::after { background: var(--grad-03); }
.service-list .service-row:nth-child(4) .service-row__arrow::before,
.service-list .service-row:nth-child(4) .service-row__arrow::after { background: var(--grad-04); }
/* 影も各事業カラーに合わせる（番号・矢印と同じ色系統） */
.service-list .service-row:nth-child(1) { box-shadow: 0px 16px 48px rgba(60, 160, 245, 0.22); }
.service-list .service-row:nth-child(2) { box-shadow: 0px 16px 48px rgba(193, 59, 191, 0.22); }
.service-list .service-row:nth-child(3) { box-shadow: 0px 16px 48px rgba(56, 190, 200, 0.22); }
.service-list .service-row:nth-child(4) { box-shadow: 0px 16px 48px rgba(230, 110, 175, 0.22); }
/* ホバー時は「›」が白（行色アイコン指定より後＝こちらが勝つ） */
.service-list .service-row:hover .service-row__arrow { color: #fbfbf8; }
/* 矢印：ホバー中はグラデ塗りがだんだん色変化（往復で緩やかに） */
@keyframes arrowFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.service-list .service-row:hover .service-row__arrow::after { background-size: 300% 300%; animation: arrowFlow 7s ease-in-out infinite; }
/* 本文 p をばらばらにフェードイン（カード表示後に順番に） */
.service-row__body p { color: #444b5e; opacity: 0; transform: translateY(16px); filter: blur(10px); transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; }
.service-row.is-visible .service-row__body p { opacity: 1; transform: translateY(0px); filter: blur(0px); }
.service-row.is-visible .service-row__body p:nth-child(2) { transition-delay: 0.25s; }
.service-row.is-visible .service-row__body p:nth-child(3) { transition-delay: 0.5s; }

/* ============================================================
   COMPANY
   ============================================================ */
.section-company { position: relative; overflow: hidden; background: #fbfbf8; }
.section-company__text p { color: #444b5e; }
.section-company__links { display: flex; justify-content: flex-end; }
.section-company__image img { border-radius: 16px; width: 100%; object-fit: cover; }
.section-company__map { display: block; width: 100%; height: 400px; border: 0px; border-radius: 16px; filter: grayscale(100%); transition: filter 0.5s ease; }
.section-company__map:hover { filter: grayscale(0%); }
/* アクセスマップ画像版：外周を透明にフェードして背景になじませる */
.section-company__image { text-align: center; }
.section-company__maplink { position: relative; display: inline-block; }

/* 地図マーカー（大阪駅前第2ビルの上で赤い丸が中央から外へふわっと広がる） */
.map-pin { position: absolute; left: 51%; top: 37%; z-index: 3; pointer-events: none; }
/* 中心の赤い点 */
.map-pin__body { position: absolute; left: 0px; top: 0px; width: 14px; height: 14px; transform: translate(-50%, -50%); background: #e8352e; border-radius: 50%; box-shadow: 0px 0px 6px rgba(232, 53, 46, 0.55); }
/* 波紋1（中央から外へ拡大しながらフェード） */
.map-pin__pulse { position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; border-radius: 50%; background: rgba(232, 53, 46, 0.4); transform: translate(-50%, -50%) scale(1); animation: mapPinRipple 1.8s ease-out infinite; }
/* 波紋2（時間差で連続的に広がる。bodyは拡大しないので基準に使える） */
.map-pin__body::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: rgba(232, 53, 46, 0.4); transform: translate(-50%, -50%) scale(1); animation: mapPinRipple 1.8s ease-out infinite; animation-delay: 0.9s; z-index: -1; }
@keyframes mapPinRipple {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin__pulse, .map-pin__body::before { animation: none; opacity: 0; }
}
.section-company__image img.section-company__map--photo {
  width: auto; max-width: 100%; height: auto; max-height: 480px; margin: 0px auto; border-radius: 0px; object-fit: initial; filter: none; background: transparent; cursor: pointer;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* 画像拡大モーダル（クリックで大きく表示） */
.js-zoomable { cursor: zoom-in; }
.img-modal { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 40px 40px 40px 40px; background: rgba(17, 25, 47, 0.82); opacity: 0; visibility: hidden; cursor: zoom-out; transition: opacity 0.3s ease, visibility 0.3s ease; }
.img-modal.is-open { opacity: 1; visibility: visible; }
.img-modal__img { max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 8px; background: #ffffff; box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.4); transform: scale(0.96); transition: transform 0.3s ease; }
.img-modal.is-open .img-modal__img { transform: scale(1); }
.img-modal__close { position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; color: #fbfbf8; background: rgba(255, 255, 255, 0.12); border-radius: 50%; transition: background 0.3s ease; }
.img-modal__close:hover { background: rgba(255, 255, 255, 0.24); }

/* ============================================================
   NEWS
   ============================================================ */
.section-news { position: relative; background: #f3f1fa; }
.section-news__head { text-align: center; }
.section-news__more { text-align: center; }
/* 新着情報は素早く表示（短め・わずかにスタッガー） */
.news-grid .news-card { transition-duration: 0.55s; }
.news-grid .news-card:nth-child(2) { transition-delay: 0.06s; }
.news-grid .news-card:nth-child(3) { transition-delay: 0.12s; }
.news-grid .news-card:nth-child(4) { transition-delay: 0.18s; }
.news-grid .news-card:nth-child(5) { transition-delay: 0.24s; }
.news-grid .news-card:nth-child(6) { transition-delay: 0.30s; }
.news-card a { display: block; border-top: 1px solid #c8c8d6; border-bottom: 1px solid #c8c8d6; transition: opacity 0.3s ease; height: 100%; }
.news-card a:hover { opacity: 0.6; }
.news-card__cat { display: inline-block; font-family: "Cinzel", serif; letter-spacing: 0.06em; color: #8a90a0; }
.news-card__cat--release { color: #24abff; }
.news-card__date { display: block; font-family: "Cinzel", serif; color: #11192f; }
.news-card__title { color: #11192f; }

/* ============================================================
   CONTACT CTA
   ============================================================ */
.section-contact { position: relative; overflow: hidden; background:
  radial-gradient(70% 90% at 20% 20%, rgba(213, 180, 226, 0.40), rgba(213,180,226,0) 75%),
  radial-gradient(70% 90% at 80% 20%, rgba(176, 199, 240, 0.40), rgba(176,199,240,0) 75%),
  radial-gradient(90% 80% at 50% 100%, rgba(232, 186, 208, 0.32), rgba(232,186,208,0) 78%),
  #efeaf6; color: #11192f; }
.contact-marquee { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.contact-marquee__track { display: flex; width: max-content; animation: contactMarquee 32s linear infinite; }
.contact-marquee__track span { font-family: "Cinzel", serif; font-weight: 600; color: #11192f; opacity: 0.06; white-space: nowrap; }
@keyframes contactMarquee { from { transform: translateX(0px); } to { transform: translateX(-50%); } }
.section-contact__inner { position: relative; z-index: 1; text-align: center; }
.section-contact__title { font-family: "Zen Old Mincho", serif; color: #11192f; font-weight: 600; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer { background: linear-gradient(180deg, #11192f 0%, #0b1020 100%); color: #fbfbf8; }
.site-footer__copy { font-family: "Cinzel", serif; letter-spacing: 0.04em; color: #8e9bc4; text-align: center; }
/* フッターの法務リンク（コピーライト行に置く）。和文なので Cinzel を継がせない。 */
.site-footer__legal { display: inline-block; font-family: "Noto Sans JP", sans-serif; letter-spacing: 0.02em; color: #8e9bc4; transition: color 0.3s ease; }
.site-footer__legal:hover { color: #ffffff; }
.site-footer__copy-text { display: block; }

/* ============================================================
   PC（min-width: 768px）
   ============================================================ */
@media (min-width: 768px) {
  .site-header__inner { padding: 24px 48px 24px 48px; }
  .site-logo__text { font-size: 28px; }
  .global-nav { display: flex; align-items: center; }
  .global-nav__list { display: flex; align-items: center; }
  .global-nav__list li { margin: 0px 32px 0px 0px; }
  .global-nav__list a { font-size: 13px; }
  .btn-contact { padding: 8px 28px 8px 28px; font-size: 13px; }
  .nav-toggle { display: none; }
  .loader__logo { width: 88px; height: 88px; }
  .page-hero { padding: 264px 40px 168px 40px; }
  .page-hero__en { font-size: 84px; margin: 0px 0px 20px 0px; }
  .page-hero__ja { font-size: 18px; }
  .breadcrumb { font-size: 12px; padding: 24px 40px 24px 40px; max-width: 1200px; margin: 0px auto 0px auto; }

  .section-hero { min-height: 100vh; padding: 0px 40px 0px 40px; }
  .section-hero__inner { min-height: 100vh; }
  .section-hero__sub { font-size: 16px; margin: 0px 0px 32px 0px; }
  .section-hero__title { font-size: 72px; }
  .section-hero__scroll { top: -60px; bottom: auto; }
  .scroll-text { font-size: 11px; margin: 0px 0px 12px 0px; }

  .section-partner { padding: 140px 48px 140px 48px; }
  .watermark { font-size: 200px; top: 40px; }
  .section-partner__inner { max-width: 1200px; margin: 0px auto 0px auto; }
  .section-partner__cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0px 56px; align-items: center; }
  .section-title--lg { font-size: 38px; }
  .section-partner__text .section-title { margin: 0px 0px 40px 0px; }
  .section-partner__text p { font-size: 15px; margin: 0px 0px 24px 0px; }
  .section-partner__text .btn-more { margin: 16px 0px 0px 0px; padding: 14px 32px 14px 32px; font-size: 12px; }
  .art-blob--lozenge { width: 380px; height: 300px; }

  .section-service { padding: 140px 48px 140px 48px; }
  .section-service__inner { max-width: 1160px; margin: 0px auto 0px auto; }
  .section-service__head { margin: 0px 0px 64px 0px; }
  .section-label { font-size: 14px; margin: 0px 0px 8px 0px; }
  .section-service__head .section-title { font-size: 29px; margin: 0px 0px 32px 0px; }
  .section-service__lead { max-width: 1000px; margin: 0px auto 32px auto; }
  .section-service__lead p { font-size: 15px; margin: 0px 0px 16px 0px; }
  .section-service__head .btn-more { padding: 14px 32px 14px 32px; font-size: 12px; }
  .service-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0px 48px; align-items: center; padding: 56px 56px 72px 56px; margin: 0px 0px 32px 0px; }
  .service-row__no { top: 32px; left: 48px; font-size: 40px; }
  .service-row__art { height: 280px; }
  .art-blob--discs, .art-blob--rings, .art-blob--infinity, .art-blob--orbit { width: 320px; height: 248px; }
  .art-label { font-size: 24px; }
  .service-row__title { font-size: 26px; margin: 0px 0px 24px 0px; }
  .service-row__arrow { right: 48px; bottom: 40px; width: 44px; height: 44px; font-size: 20px; }
  .service-row__body p { font-size: 15px; margin: 0px 0px 16px 0px; }

  .section-company { padding: 140px 48px 140px 48px; }
  .watermark--center { font-size: 220px; text-align: center; }
  .section-company__inner { max-width: 1160px; margin: 0px auto 0px auto; }
  .section-company__image { margin: 48px 0px 0px 0px; }
  .section-company__text .section-title { font-size: 44px; margin: 0px 0px 32px 0px; }
  .section-company__text p { font-size: 15px; margin: 0px 0px 16px 0px; }
  .section-company__links { margin: 40px 0px 0px 0px; gap: 0px 24px; }
  .section-company__links .btn-more { padding: 14px 32px 14px 32px; font-size: 12px; }

  .section-news { padding: 140px 40px 140px 40px; }
  .section-news__inner { max-width: 1440px; margin: 0px auto 0px auto; }
  .section-news__head { margin: 0px 0px 56px 0px; }
  .section-news__head .section-title { font-size: 44px; margin: 0px 0px 32px 0px; }
  .section-news__head .btn-more { padding: 14px 32px 14px 32px; font-size: 12px; }
  .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin: 0px 0px 56px 0px; }
  .section-news__more .btn-more { padding: 14px 32px 14px 32px; font-size: 12px; }
  .news-card a { padding: 24px 12px 32px 12px; }
  .news-card__cat { font-size: 11px; margin: 0px 0px 16px 0px; }
  .news-card__date { font-size: 13px; margin: 0px 0px 12px 0px; }
  .news-card__title { font-size: 14px; }

  .section-contact { padding: 120px 48px 120px 48px; }
  .contact-marquee__track span { font-size: 160px; padding: 0px 64px 0px 0px; }
  .section-contact__title { font-size: 32px; margin: 0px 0px 40px 0px; }
  .btn-contact-lg { padding: 22px 64px 22px 64px; font-size: 15px; }

  .site-footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 48px 40px 48px; max-width: 1200px; margin: 0px auto 0px auto; }
  .site-footer__copy { font-size: 14px; padding: 48px 48px 44px 48px; }
  .site-footer__legal { font-size: 13px; margin: 0px 0px 12px 0px; }
}

/* ============================================================
   SP（max-width: 767px）
   ============================================================ */
@media (max-width: 767px) {
  .site-header__inner { padding: 16px 20px 16px 20px; }
  .site-logo__text { font-size: 18px; }
  .global-nav { position: fixed; top: 0px; right: 0px; width: 82%; height: 100vh; background: #11192f; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0px 32px 0px 32px; transform: translateX(100%); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s; }
  .global-nav.is-open { transform: translateX(0px); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s; }
  .global-nav__list { display: block; }
  .global-nav__list li { margin: 0px 0px 28px 0px; opacity: 0; transform: translateX(28px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .global-nav__list a { font-size: 18px; color: #fbfbf8; }
  .btn-contact { margin: 16px 0px 0px 0px; padding: 12px 24px 12px 24px; font-size: 13px; }
  .global-nav.is-open .global-nav__list li { opacity: 1; transform: translateX(0px); }
  .global-nav.is-open .global-nav__list li:nth-child(1) { transition-delay: 0.30s; }
  .global-nav.is-open .global-nav__list li:nth-child(2) { transition-delay: 0.42s; }
  .global-nav.is-open .global-nav__list li:nth-child(3) { transition-delay: 0.54s; }
  .global-nav.is-open .global-nav__list li:nth-child(4) { transition-delay: 0.66s; }
  .global-nav .btn-contact { opacity: 0; transform: translateX(28px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .global-nav.is-open .btn-contact { opacity: 1; transform: translateX(0px); transition-delay: 0.78s; }
  .nav-toggle { display: flex; width: 32px; height: 22px; z-index: 110; }
  .nav-toggle__bar { width: 100%; height: 2px; margin: 0px 0px 6px 0px; }
  .nav-toggle__bar:last-child { margin: 0px 0px 0px 0px; }
  .nav-toggle.is-open .nav-toggle__bar { background: #fbfbf8; }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .loader__logo { width: 64px; height: 64px; }
  .page-hero { padding: 180px 24px 100px 24px; }
  .page-hero__en { font-size: 48px; margin: 0px 0px 14px 0px; }
  .page-hero__ja { font-size: 14px; }
  .breadcrumb { font-size: 11px; padding: 24px 24px 16px 24px; }

  .section-hero { min-height: 100vh; min-height: 100dvh; padding: 0px 24px 0px 24px; }
  .section-hero__inner { min-height: 100vh; min-height: 100dvh; }
  .section-hero__sub { font-size: 14px; margin: 0px 0px 24px 0px; }
  .section-hero__title { font-size: 38px; }
  .section-hero__scroll { top: -50px; bottom: auto; }
  .scroll-text { font-size: 10px; margin: 0px 0px 10px 0px; }

  .section-partner { padding: 72px 24px 72px 24px; }
  .watermark { font-size: 64px; top: 24px; }
  .section-title--lg { font-size: 26px; }
  .section-partner__text .section-title { margin: 0px 0px 24px 0px; }
  .section-partner__text p { font-size: 14px; margin: 0px 0px 20px 0px; }
  .section-partner__text .btn-more { margin: 16px 0px 0px 0px; padding: 12px 28px 12px 28px; font-size: 11px; }
  .section-partner__art { display: none; }
  .art-blob--lozenge { width: 240px; height: 200px; }

  .section-service { padding: 72px 20px 72px 20px; }
  .section-service__head { margin: 0px 0px 40px 0px; }
  .section-label { font-size: 13px; margin: 0px 0px 8px 0px; }
  .section-service__head .section-title { font-size: 28px; margin: 0px 0px 24px 0px; }
  .section-service__lead { margin: 0px 0px 24px 0px; }
  .section-service__lead p { font-size: 14px; margin: 0px 0px 16px 0px; }
  .section-service__head .btn-more { padding: 12px 28px 12px 28px; font-size: 11px; }
  .service-row { display: block; background: #fefefe00; border-radius: 16px; padding: 16px 24px 64px 24px; margin: 0px 0px 24px 0px; }
  .service-row__no { top: 24px; left: 24px; font-size: 32px; }
  .service-row__art { height: 216px; margin: 0px 0px 24px 0px; }
  .art-blob--discs, .art-blob--rings, .art-blob--infinity, .art-blob--orbit { width: 240px; height: 184px; }
  .art-label { font-size: 16px; }
  .service-row__title { font-size: 20px; margin: 0px 0px 16px 0px; }
  .service-row__arrow { right: 24px; bottom: 24px; width: 40px; height: 40px; font-size: 18px; }
  .service-row__body p { font-size: 14px; margin: 0px 0px 16px 0px; }

  .section-company { padding: 72px 24px 72px 24px; }
  .watermark--center { font-size: 72px; text-align: center; }
  .section-company__text .section-title { font-size: 32px; margin: 0px 0px 24px 0px; }
  .section-company__text p { font-size: 14px; margin: 0px 0px 16px 0px; }
  .section-company__links { margin: 32px 0px 0px 0px; gap: 0px 16px; }
  .section-company__links .btn-more { padding: 12px 24px 12px 24px; font-size: 11px; }
  .section-company__image { margin: 40px 0px 0px 0px; }
  .section-company__map { height: 280px; }
  /* SPは地図を画面幅より大きくズーム（左右はみ出しは section の overflow:hidden でクロップ。中央＝大阪駅前第2ビル＋ピンは維持） */
  .section-company__maplink { display: block; width: 140vw; margin: 0px 0px 0px calc(-20vw - 24px); }
  .section-company__image img.section-company__map--photo { width: 100%; max-width: 100%; max-height: none; margin: 0px; }

  .section-news { padding: 72px 24px 72px 24px; }
  .section-news__head { margin: 0px 0px 40px 0px; }
  .section-news__head .section-title { font-size: 32px; margin: 0px 0px 24px 0px; }
  .section-news__head .btn-more { padding: 12px 28px 12px 28px; font-size: 11px; }
  .news-grid { display: block; margin: 0px 0px 40px 0px; }
  .section-news__more .btn-more { padding: 12px 28px 12px 28px; font-size: 11px; }
  .news-card a { padding: 20px 0px 24px 0px; border-top: 0px; }
  .news-card:first-child a { border-top: 1px solid #c8c8d6; }
  .news-card__cat { font-size: 10px; margin: 0px 0px 12px 0px; }
  .news-card__date { font-size: 13px; margin: 0px 0px 8px 0px; }
  .news-card__title { font-size: 14px; }

  .section-contact { padding: 80px 24px 80px 24px; }
  .contact-marquee__track span { font-size: 72px; padding: 0px 32px 0px 0px; }
  .section-contact__title { font-size: 24px; margin: 0px 0px 32px 0px; }
  .btn-contact-lg { padding: 18px 48px 18px 48px; font-size: 14px; }

  .site-footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 32px 24px; }
  .site-footer__copy { font-size: 12px; padding: 24px 0px 32px 0px; margin: 32px 24px 0px 24px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  .site-footer__legal { font-size: 12px; margin: 0px 0px 12px 0px; }
}
.loader__logo { width: auto; height: auto; animation: none; }

@media (min-width: 768px) {
  .loader__logo { width: 220px; }
}
@media (max-width: 767px) {
  .loader__logo { width: 168px; }
  .loader__logo-text { font-size: 32px; }
}

/* ============================================================
   Valurea 追加（PRODUCTセクション / 下層ヘッダー被り回避 / footer法務）
   ============================================================ */
.section-product { position: relative; overflow: hidden; background: #f3f1fa; }
.section-product__media { display: flex; justify-content: center; }
.section-product__media img { display: block; width: 100%; max-width: 360px; border-radius: 16px; box-shadow: 0px 16px 48px rgba(60, 70, 120, 0.10); background: #ffffff; }
.section-product__title { font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; line-height: 1.4; }
.section-product__price { font-family: "Cinzel", serif; font-weight: 600; color: #11192f; }
.section-product__price span { font-family: "Noto Sans JP", sans-serif; font-weight: 400; color: #8a90a0; }
.section-product__copy { color: #444b5e; }

@media (min-width: 768px) {
  main > .breadcrumb:first-child { padding: 140px 40px 24px 40px; }
  .section-product { padding: 140px 48px 140px 48px; }
  .section-product__inner { max-width: 1280px; margin: 0px auto 0px auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0px 96px; align-items: center; }
  .section-product__text .section-label { font-size: 14px; margin: 0px 0px 8px 0px; }
  .section-product__title { font-size: 34px; margin: 0px 0px 24px 0px; }
  .section-product__price { font-size: 30px; margin: 0px 0px 24px 0px; }
  .section-product__price span { font-size: 14px; margin: 0px 0px 0px 8px; }
  .section-product__copy { font-size: 15px; line-height: 2.1; margin: 0px 0px 16px 0px; }
  .section-product__text .btn-more { margin: 24px 0px 0px 0px; padding: 14px 32px 14px 32px; font-size: 12px; }
}
@media (max-width: 767px) {
  main > .breadcrumb:first-child { padding: 100px 24px 16px 24px; }
  .section-product { padding: 72px 24px 72px 24px; }
  .section-product__inner { display: flex; flex-direction: column-reverse; }
  /* SPでは商品画像（section-product__media）は非表示 */
  .section-product__media { display: none; }
  .section-product__text .section-label { font-size: 13px; margin: 0px 0px 8px 0px; }
  .section-product__title { font-size: 26px; margin: 0px 0px 20px 0px; }
  .section-product__price { font-size: 26px; margin: 0px 0px 20px 0px; }
  .section-product__price span { font-size: 13px; margin: 0px 0px 0px 8px; }
  .section-product__copy { font-size: 14px; line-height: 1.95; margin: 0px 0px 16px 0px; }
  .section-product__text .btn-more { margin: 24px 0px 0px 0px; padding: 12px 28px 12px 28px; font-size: 11px; }
}

/* footer 背景に製品ビジュアルを薄く敷く（ダーク基調の上に半透明オーバーレイ） */
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  background-image: url("../images/footer-bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.1;
  pointer-events: none;
}

/* ============================================================
   FAQ（Q&A）
   ============================================================ */
.product-faq { background: #f3f1fa; }
.product-faq__inner { margin: 0px auto 0px auto; }
.product-faq__head { text-align: center; }
.faq-item { border-bottom: 1px solid #d8d8e4; }
.faq-item:first-child { border-top: 1px solid #d8d8e4; }
.faq-item__q { display: flex; align-items: baseline; font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; line-height: 1.6; }
.faq-item__q::before { content: "Q"; flex: 0 0 auto; font-family: "Cinzel", serif; font-weight: 600; color: #8e61b6; }
.faq-item__a { display: flex; align-items: baseline; }
.faq-item__a::before { content: "A"; flex: 0 0 auto; font-family: "Cinzel", serif; font-weight: 600; color: #b9c6ec; }
.faq-item__a-body p { color: #444b5e; }
.faq-item__a-body p:last-child { margin: 0px 0px 0px 0px; }

@media (min-width: 768px) {
  .product-faq { padding: 120px 48px 120px 48px; }
  .product-faq__inner { max-width: 900px; }
  .product-faq__head { margin: 0px 0px 56px 0px; }
  .product-faq__head .section-label { font-size: 14px; margin: 0px 0px 8px 0px; }
  .product-faq__head .section-title { font-size: 36px; }
  .faq-item { padding: 32px 32px 32px 32px; }
  .faq-item__q { font-size: 18px; margin: 0px 0px 16px 0px; }
  .faq-item__q::before { font-size: 18px; margin: 0px 16px 0px 0px; }
  .faq-item__a::before { font-size: 18px; margin: 0px 16px 0px 0px; }
  .faq-item__a-body p { font-size: 15px; line-height: 2; margin: 0px 0px 12px 0px; }
}
@media (max-width: 767px) {
  .product-faq { padding: 72px 24px 72px 24px; }
  .product-faq__inner { max-width: 100%; }
  .product-faq__head { margin: 0px 0px 40px 0px; }
  .product-faq__head .section-label { font-size: 13px; margin: 0px 0px 8px 0px; }
  .product-faq__head .section-title { font-size: 28px; }
  .faq-item { padding: 24px 0px 24px 0px; }
  .faq-item__q { font-size: 16px; margin: 0px 0px 12px 0px; }
  .faq-item__q::before { font-size: 16px; margin: 0px 12px 0px 0px; }
  .faq-item__a::before { font-size: 16px; margin: 0px 12px 0px 0px; }
  .faq-item__a-body p { font-size: 14px; line-height: 1.95; margin: 0px 0px 12px 0px; }
}

/* ============================================================
   footer 多段レイアウト（左ブランド + リンクカラム / 参考イメージ準拠）
   ============================================================ */
.footer-brand__name { font-family: "Cinzel", serif; font-weight: 600; color: #fbfbf8; letter-spacing: 0.08em; }
.footer-brand__addr { color: #aeb6cc; }
.footer-brand__contact { color: #aeb6cc; }
.footer-brand__contact a { color: #c8cee0; transition: color 0.3s ease; }
.footer-brand__contact a:hover { color: #ffffff; }
.footer-col__head { font-family: "Cinzel", serif; font-weight: 600; color: #fbfbf8; letter-spacing: 0.08em; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.footer-col ul li a { color: #aeb6cc; transition: color 0.3s ease; }
.footer-col ul li a:hover { color: #ffffff; }

@media (min-width: 768px) {
  .site-footer__inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 0px 32px; max-width: 1240px; margin: 0px auto 0px auto; padding: 88px 48px 88px 48px; text-align: left; border-bottom: 1px solid rgb(202 202 202 / 25%);}
  .footer-brand { flex: 0 1 auto; max-width: 300px; }
  .footer-brand__name { font-size: 22px; margin: 0px 0px 24px 0px; }
  .footer-brand__addr { font-size: 13px; line-height: 1.9; margin: 0px 0px 16px 0px; }
  .footer-brand__contact { font-size: 13px; line-height: 1.9; margin: 0px 0px 0px 0px; }
  .footer-cols { display: contents; }
  .footer-col { flex: 0 1 auto; }
  .footer-col__head { font-size: 13px; padding: 0px 0px 8px 0px; margin: 0px 0px 16px 0px; }
  .footer-col ul li { margin: 0px 0px 4px 0px; }
  .footer-col ul li a { font-size: 14px; }
}
@media (max-width: 767px) {
  .site-footer::before { opacity: 0.05; }
  .site-footer__inner { display: block; padding: 56px 24px 40px 24px; text-align: left; }
  .footer-brand { margin: 0px 0px 40px 0px; }
  .footer-brand__name { font-size: 20px; margin: 0px 0px 20px 0px; }
  .footer-brand__addr { font-size: 13px; line-height: 1.9; margin: 0px 0px 14px 0px; }
  .footer-brand__contact { font-size: 13px; line-height: 1.9; margin: 0px 0px 0px 0px; }
  .footer-cols { display: grid; grid-template-columns: 1fr; gap: 28px 0px; }
  .footer-col { text-align: left; }
  .footer-col__head { display: block; font-size: 12px; padding: 0px 0px 10px 0px; margin: 0px 0px 16px 0px; }
  .footer-col ul { padding: 0px 0px 0px 14px; }
  .footer-col ul li { margin: 0px 0px 0px 0px; }
  .footer-col ul li a { font-size: 13px; }
}

/* SP限定の改行ユーティリティ */
.br-sp { display: none; }
@media (max-width: 767px) { .br-sp { display: inline; } }

/* FEATURE: VIEW MORE をリスト下に中央表示 */
.section-service__more { text-align: center; }
@media (min-width: 768px) {
  .section-service__more { margin: 80px 0px 0px 0px; }
  .section-service__more .btn-more { padding: 14px 32px 14px 32px; font-size: 12px; }
}
@media (max-width: 767px) {
  .section-service__more { margin: 72px 0px 0px 0px; }
  .section-service__more .btn-more { padding: 12px 28px 12px 28px; font-size: 11px; }
}

/* ============================================================
   TRUST（選ばれています）— TOP の実績バッジ
   ============================================================ */
.section-trust { position: relative; overflow: hidden; background: #f3f1fa; }
.section-trust__head { text-align: center; }
.section-trust__lead p { color: #444b5e; }
.trust-grid { list-style: none; }
.trust-card img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0px 12px 30px rgba(17, 25, 47, 0.10); }
.trust-grid .trust-card { transition-duration: 0.55s; }
.trust-grid .trust-card:nth-child(2) { transition-delay: 0.08s; }
.trust-grid .trust-card:nth-child(3) { transition-delay: 0.16s; }
/* SP マーキー用の複製カードは PC では非表示 */
.trust-card--clone { display: none; }

@media (min-width: 768px) {
  .section-trust { padding: 140px 48px 140px 48px; }
  .section-trust__inner { max-width: 1160px; margin: 0px auto 0px auto; }
  .section-trust__head { margin: 0px 0px 64px 0px; }
  .section-trust__head .section-title { font-size: 29px; margin: 0px 0px 32px 0px; }
  .section-trust__lead { max-width: 1000px; margin: 0px auto 0px auto; }
  .section-trust__lead p { font-size: 15px; margin: 0px 0px 8px 0px; }
  .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px 48px; max-width: 1120px; margin: 0px auto 0px auto; }
}
@media (max-width: 767px) {
  .section-trust { padding: 72px 24px 72px 24px; }
  .section-trust__head { margin: 0px 0px 40px 0px; }
  .section-trust__head .section-title { font-size: 28px; margin: 0px 0px 24px 0px; }
  .section-trust__lead { margin: 0px 0px 0px 0px; }
  .section-trust__lead p { font-size: 14px; margin: 0px 0px 8px 0px; }

  /* SP：CSS のみの自動スクロール（contact-marquee と同方式の連続マーキー）。
     複製カードを並べ translateX を -50% まで動かすことで、継ぎ目なくループする。 */
  .trust-viewport { overflow: hidden; }
  .trust-grid { display: flex; flex-wrap: nowrap; width: max-content; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; animation: trustMarquee 22s linear infinite; }
  .trust-card { flex: 0 0 auto; width: 250px; margin: 0px 16px 0px 0px; opacity: 1; transform: none; filter: none; }
  .trust-card--clone { display: block; }
}
@keyframes trustMarquee {
  from { transform: translateX(0px); }
  to { transform: translateX(-50%); }
}
/* 視差・動きを抑える設定では自動スクロールを止め、縦積みにフォールバック */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .trust-viewport { overflow: visible; }
  .trust-grid { display: grid; grid-template-columns: 1fr; width: auto; gap: 24px 0px; max-width: 320px; margin: 0px auto 0px auto; animation: none; }
  .trust-card { width: auto; margin: 0px 0px 0px 0px; }
  .trust-card--clone { display: none; }
}