/* =========================================================
   Reload Mind — main.css
   トークン／リセット／基本レイアウト／共通コンポーネント／
   各セクションの骨組みスタイル（後続で装飾・アニメ調整を重ねる）
   - カラー等は Figma ブラウザ Inspect 実測で後日確定
   ========================================================= */

/* ----- Design Tokens --------------------------------------- */
/* 値は Figma fileKey 1gviEghU1Dhy3AYzPngahn の variable defs（2026-04-26 取得）に整合 */
:root {
  /* color tokens — Figma 実測 FIX */
  --c-bg-base:       #ffffff;   /* body 背景（白） */
  --c-bg-page:       #ffffff;
  --c-bg-ivory:      #faf6ee;   /* ヒーロープレート/装飾用アイボリー */
  --c-text:          #363232;   /* Figma "テキスト" */
  --c-text-sub:      #6c6864;
  --c-brand:         #3eb9a1;   /* Footer 緑 */
  --c-brand-dark:    #2c8a78;
  --c-green-accent:  #3f9950;   /* Media ラベル緑 */
  --c-accent-blue:   #3e9eff;   /* Figma "青" */
  --c-accent-cyan:   #5cc0e8;   /* Figma "水色" */
  --c-accent-pink:   #ffa4cb;   /* Figma "ピンク" */
  --c-accent-orange: #ff8325;   /* Figma "オレンジ" */
  --c-accent-red:    #ff6363;   /* Figma "赤" */
  --c-accent-yellow: #f4c430;   /* PNG 目視（Figma 未定義） */
  --c-line:          #bfb7af;   /* Figma "ライン" */

  /* typography — Figma "見出し上"/"見出し"/"通常テキスト" */
  --ff-jp:    "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-serif: "Albert Sans", "Helvetica Neue", "Arial", sans-serif;
  --fs-base:  16px;
  --fs-lead:  18px;
  --fs-h1:    clamp(36px, 4.6vw, 56px);
  --fs-h2:    clamp(28px, 3.4vw, 46px);
  --fs-h3:    clamp(20px, 2.4vw, 28px);
  --ls-text:  .1em;   /* Figma 通常テキストの letterSpacing */

  /* layout */
  --wrap-max:  1200px;
  --wrap-pad:  clamp(16px, 4vw, 40px);

  /* motion */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --dur-base:  .45s;
}

/* ----- Reset & Base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior は instant に。smooth の途中でホイール等の操作が混ざると
   スクロール位置が中途半端な値で停止し「上が切れる / 下に余白」現象になるため。
   (元: smooth → 2026-05-04 クライアント報告で auto に切り替え)
   smooth の出現は <a href="#xxx"> クリック側 main.js の scrollIntoView({behavior:'smooth'})
   で局所的に発生させる。
   - scroll-padding は明示的に 0 (一部ブラウザの "auto" 解釈で意図せず大きな値になる事故対策)
   - overflow-anchor: none (lazy load 等のレイアウトシフトで scroll 位置が勝手に補正される
     "本体が上にずれる" 症状の根治) */
html {
  scroll-behavior: auto;
  scroll-padding-top: 0;
  scroll-padding-bottom: 0;
  overflow-anchor: none;
  -webkit-text-size-adjust: 100%;
}
body, .fp { overflow-anchor: none; }
body {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-brand); }
/* ロゴ (header / footer) はホバー色変化なし */
a[data-name="logo 1"], a[data-name="logo 3"] { transition: none; }
a[data-name="logo 1"]:hover, a[data-name="logo 3"]:hover { color: inherit; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; }
p { margin: 0 0 1em; }
.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ----- Layout primitives ---------------------------------- */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.site-main { padding-top: 80px; /* header高さぶん */ }

/* ----- Buttons -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.8em; font-weight: 700;
  transition: transform .2s, background .2s, color .2s;
}
.btn--pill { border-radius: 999px; }
.btn--cta   { background: #CFEBD9; color: var(--c-brand-dark); }
.btn--cta:hover { background: var(--c-brand); color: #fff; }
.btn--primary { background: #CFEBD9; color: var(--c-brand-dark); }
.btn--primary:hover { background: var(--c-brand); color: #fff; }

/* ----- Site header ---------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--wrap-max); margin: 0 auto; padding: 16px var(--wrap-pad);
}
.site-header__logo { display: flex; align-items: center; gap: 10px; }
.site-header__logo-dots { display: grid; grid-template-columns: repeat(2,6px); gap: 3px; }
.site-header__logo-dots span { width: 6px; height: 6px; border-radius: 50%; display: block; }
.site-header__logo-dots span:nth-child(1) { background: var(--c-accent-blue); }
.site-header__logo-dots span:nth-child(2) { background: var(--c-accent-yellow); }
.site-header__logo-dots span:nth-child(3) { background: var(--c-accent-red); }
.site-header__logo-dots span:nth-child(4) { background: var(--c-brand); }
.site-header__logo-text small { display: block; font-size: 10px; color: var(--c-text-sub); letter-spacing: .08em; }
.site-header__logo-text strong { font-size: 14px; letter-spacing: .06em; }
.site-header__menu { display: flex; gap: 28px; }
.site-header__menu a { font-size: 14px; }

.site-header__hamburger {
  display: none; width: 40px; height: 40px; border: 0; background: transparent; padding: 8px;
  flex-direction: column; justify-content: space-between;
}
.site-header__hamburger span {
  display: block; height: 2px; background: var(--c-text); transition: transform .3s;
}

/* ----- SP menu -------------------------------------------- */
.sp-menu {
  position: fixed; inset: 0 0 0 auto; width: min(82vw, 420px);
  background: var(--c-bg-base); z-index: 200;
  transform: translateX(100%); transition: transform .4s var(--ease-out);
  padding: 64px 28px; box-shadow: -20px 0 40px rgba(0,0,0,.08);
}
.sp-menu.is-open { transform: translateX(0); }
body.sp-menu-open { overflow: hidden; }
.sp-menu__close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  border: 1px solid var(--c-line); background: #fff; border-radius: 50%;
  font-size: 20px; line-height: 1;
}
.sp-menu__list { display: grid; gap: 24px; margin-bottom: 40px; }
.sp-menu__list a { font-size: 18px; font-weight: 700; }
.sp-menu__cta { width: 100%; }

/* ----- Marquee -------------------------------------------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track {
  display: inline-block; padding-block: .4em; font-family: var(--ff-serif);
  font-weight: 700; font-size: clamp(40px, 6vw, 96px);
  color: rgba(62,185,161,.18); letter-spacing: .02em;
  animation: marquee-slide 30s linear infinite;
}
.marquee--footer { background: transparent; }
.marquee--footer .marquee__track { color: rgba(62,185,161,.25); }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----- Hero (front page) --------------------------------- */
.hero { position: relative; padding: 40px 0 80px; overflow: hidden; }
.hero__body {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  align-items: center; max-width: var(--wrap-max);
  margin: 40px auto; padding: 0 var(--wrap-pad);
}
.hero__title {
  font-size: var(--fs-h1); line-height: 1.5; display: grid; gap: .2em;
}
.hero__subtitle { font-size: var(--fs-lead); color: var(--c-text-sub); margin-top: 1em; }
.hero__visual img { border-radius: 20px; }
.hero__rabbit { position: absolute; bottom: 20px; left: 0; right: 0; pointer-events: none; height: 160px; }

/* ----- Section head -------------------------------------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}
.section-head__title { font-size: var(--fs-h2); }
.section-head__more { font-size: 14px; font-weight: 700; color: var(--c-brand-dark); }

/* ----- Mission ------------------------------------------- */
.mission { padding: 80px 0; position: relative; background: var(--c-bg-page); }
.mission__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--wrap-pad); text-align: center; }
.mission__title { font-size: var(--fs-h2); margin-bottom: 24px; }

/* ----- Home news ----------------------------------------- */
.home-news { padding: 80px 0; }
.home-news__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.home-news__list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.news-card { border-bottom: 1px solid var(--c-line); }
.news-card__link {
  display: grid; grid-template-columns: 110px 70px 1fr 32px;
  align-items: center; gap: 16px; padding: 20px 8px;
}
.news-card__link:hover { background: rgba(62,185,161,.04); }
.news-card__date { font-family: var(--ff-serif); color: var(--c-text-sub); }
.news-card__badge {
  display: inline-block; padding: 2px 10px; border: 1px solid var(--c-brand);
  border-radius: 999px; font-size: 12px; color: var(--c-brand-dark);
  text-align: center;
}
.news-card__title { font-size: 15px; font-weight: 500; }
.news-card__icon {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line);
  display: grid; place-items: center; font-weight: 300; font-size: 18px;
}

/* ----- Home service -------------------------------------- */
.home-service { padding: 80px 0; background: var(--c-bg-page); }
.home-service__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.home-service__list { display: grid; gap: 24px; }
.service-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 18px;
  padding: 32px; display: grid; gap: 16px;
  grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto;
  align-items: start;
}
.service-card__num { font-family: var(--ff-serif); color: var(--c-brand); font-size: 14px; letter-spacing: .12em; }
.service-card__title { font-size: var(--fs-h3); grid-column: 1 / 2; }
.service-card__text { color: var(--c-text-sub); grid-column: 1 / 2; }
.service-card__visual {
  grid-row: 1 / 4; grid-column: 2 / 3; width: clamp(160px, 32vw, 320px);
  border-radius: 14px; overflow: hidden;
}
.service-card__more { grid-column: 1 / 2; font-weight: 700; color: var(--c-brand-dark); }

/* ----- Home media ---------------------------------------- */
.home-media { padding: 80px 0; }
.home-media__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.home-media__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center;
}

/* ----- Page hero (下層) ---------------------------------- */
.page-hero { position: relative; padding: 60px 0 40px; overflow: hidden; background: var(--c-bg-page); }
.page-hero__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.page-hero__title { font-size: var(--fs-h1); }
.breadcrumb { margin-top: 16px; font-size: 13px; color: var(--c-text-sub); }
.breadcrumb ol { display: flex; gap: 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; }

/* ----- Company table ------------------------------------- */
.company { padding: 60px 0; }
.company__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--wrap-pad); }
.company__table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.company__table th, .company__table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.company__table th { width: 220px; background: #FCFAF4; font-weight: 500; color: var(--c-text-sub); }
.company-map { padding: 20px 0 80px; }
.company-map__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.company-map__placeholder { padding: 40px; text-align: center; border: 2px dashed var(--c-line); color: var(--c-text-sub); }

/* ----- Service page -------------------------------------- */
.service-media, .service-ads { padding: 60px 0; }
.service-media__title, .service-ads__title { font-size: var(--fs-h2); margin-bottom: 32px; }
.service-media__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; align-items: start; }
.service-media__row--reverse .service-media__copy { order: 2; }
.service-media__subcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.sub-card { padding: 16px; border: 1px solid var(--c-line); border-radius: 10px; background: #FCFAF4; }
.service-ads__lead { max-width: 760px; color: var(--c-text-sub); margin-bottom: 32px; }
.service-ads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ad-card { padding: 24px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }

/* ----- Contact ------------------------------------------- */
.contact { padding: 60px 0 100px; position: relative; }
.contact__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--wrap-pad); }
.contact__head { text-align: center; margin-bottom: 32px; }
.contact__eyebrow { font-family: var(--ff-serif); color: var(--c-brand); letter-spacing: .15em; font-size: 14px; }
.contact__title { font-size: var(--fs-h2); margin-top: 8px; }
.contact__form { background: #fff; padding: 40px; border-radius: 18px; display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field--textarea label { margin-bottom: 4px; }
.field label { font-weight: 700; font-size: 14px; }
.field .required { background: var(--c-accent-red); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px; margin-left: 6px; }
.field input, .field textarea {
  padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 8px;
  background: #FCFAF4; font: inherit;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--c-brand); background: #fff; }
.contact__submit { text-align: center; margin-top: 12px; }
.contact__rabbit { position: absolute; right: 40px; bottom: 120px; width: 140px; opacity: .9; pointer-events: none; }

/* ----- News archive / single ----------------------------- */
.news-archive, .news-single { padding: 60px 0 100px; }
.news-archive__inner, .news-single__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.news-archive__layout, .news-single__layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.pagination .current { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

.news-sidebar { background: #fff; border-radius: 14px; padding: 24px; position: sticky; top: 100px; align-self: start; }
.news-sidebar__block + .news-sidebar__block { margin-top: 32px; }
.news-sidebar__title { font-size: 16px; border-bottom: 1px solid var(--c-line); padding-bottom: 8px; margin-bottom: 16px; }
.news-sidebar__list a { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px dotted var(--c-line); font-size: 13px; }
.news-sidebar__title-text { font-weight: 500; color: var(--c-text); }

.news-single__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.news-single__title { font-size: clamp(24px, 3vw, 34px); margin-bottom: 24px; }
.news-single__body { background: #fff; padding: 32px; border-radius: 14px; }
.news-single__back { margin-top: 32px; }
.news-single__back a { color: var(--c-brand-dark); font-weight: 700; }

/* ----- Footer -------------------------------------------- */
.site-footer__body { background: var(--c-brand); color: #fff; padding: 48px 0 24px; }
.site-footer__inner {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 24px;
  max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad);
}
.site-footer__logo { display: flex; gap: 10px; align-items: center; color: #fff; }
.site-footer__logo-dots { display: grid; grid-template-columns: repeat(2,6px); gap: 3px; }
.site-footer__logo-dots span { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: block; }
.site-footer__copy { font-size: 12px; margin: 8px 0 0; opacity: .85; }
.site-footer__menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; font-size: 13px; }
.site-footer__legal a { font-size: 12px; opacity: .85; }

/* ----- Scroll animation hooks ---------------------------- */
[data-animate] { opacity: 0; transform: translateY(20px); }
[data-animate].is-visible { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-animate="stagger"] > * { opacity: 0; transform: translateY(20px); }
[data-animate="stagger"].is-visible > * {
  opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .1s);
}

/* ----- Responsive ---------------------------------------- */
@media (max-width: 900px) {
  .site-header__nav, .site-header__cta { display: none; }
  .site-header__hamburger { display: flex; }
  .hero__body { grid-template-columns: 1fr; }
  .home-service__list .service-card { grid-template-columns: 1fr; }
  .service-card__visual { grid-row: auto; grid-column: 1 / -1; width: 100%; }
  .home-media__list { grid-template-columns: repeat(2, 1fr); }
  .news-archive__layout, .news-single__layout { grid-template-columns: 1fr; }
  .news-sidebar { position: static; }
  .service-media__row { grid-template-columns: 1fr; }
  .service-media__row--reverse .service-media__copy { order: 0; }
  .service-ads__grid { grid-template-columns: 1fr 1fr; }
  .company__table th { width: 120px; }
  .contact__rabbit { width: 90px; right: 20px; bottom: 40px; }
}
@media (max-width: 560px) {
  .service-ads__grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__menu { grid-template-columns: 1fr 1fr; }
  .news-card__link { grid-template-columns: 88px 56px 1fr 28px; gap: 10px; padding: 16px 4px; }
  .service-media__subcards { grid-template-columns: 1fr; }
}

/* =========================================================
   02. Company（会社概要） — Figma fileKey 1gviEghU1Dhy3AYzPngahn / nodeId 44:489
   完コピ実装: Figma frame 1440×3603 を絶対座標で1:1再現
   ========================================================= */

/* fp-body は header-blank.php / footer-blank.php 経由で <body> に付く */
.fp-body {
  margin: 0;
  background: #ffffff;
  color: #363232;
  -webkit-font-smoothing: antialiased;
}
/* PC ↔ SP 切替: 1024px をブレークポイント (1440 PC / 375 SP デザイン)
   SP は viewport 幅に zoom スケールして広範囲対応 (320〜1023px、タブレット含む)。
   CSS の zoom は <number>|<percentage> しか受け付けず calc(100vw / 375) は length に
   評価されて無効なので、main.js の applySpZoom() で viewport 幅を取得して inline 設定。
   1024px 以上は従来通り PC テンプレ (1440px 固定幅) を表示。 */
.fp--sp { display: none; }
@media (max-width: 1023px) {
  .fp--pc { display: none; }
  .fp--sp { display: block; }
}
/* PC viewport では SP 専用 UI (header-blank.php の hamburger trigger + drawer) を非表示 */
@media (min-width: 1024px) {
  .fp-sp-menu-trigger,
  .fp-sp-menu { display: none !important; }
}

/* ----- SP 完コピ: メニューボタン + drawer (Figma 47:2640 SP_menu) --
   ボタン本体: 44:479 (白丸) + 44:480/481 (2本線) を再利用、X 用 span 2本も追加。
   body.sp-menu-open で hamburger ↔ × にスイッチ (1ボタン2状態)。 */
.fp-sp-menu-trigger {
  /* SP frame 右上 (Figma Group 82 = SP coord left:311 top:24 → 右端から 24px) に固定。
     position:fixed なので SP wrapper の zoom (タブレット 〜1023px) の影響を受けない。
     375px viewport では right:24px = 311px の位置で Figma 通り、
     タブレット (768/834/1023px) でも viewport 右端からの位置を保つ。 */
  position: fixed;
  top: 24px;
  right: 24px;
  left: auto;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 210;  /* drawer (200) より上 */
}
.fp-sp-menu-trigger > * {
  pointer-events: none;
  position: absolute;
  /* 念のため shape thwomp / その他のアニメをここでブロック (キャッシュ対策) */
  animation: none !important;
  translate: 0 0 !important;
}
.fp-sp-menu-trigger__circle {
  inset: 0; display: block;
}
.fp-sp-menu-trigger__circle img { width: 100%; height: 100%; display: block; }
/* 2本線 (Figma 44:480 left:323 top:41 / 44:481 left:323 top:45 を相対化) */
.fp-sp-menu-trigger__line {
  background: #000000;
  left: 12px;       /* 44:480 left=323 - trigger left=311 → 12 */
  width: 15px; height: 1px;
}
.fp-sp-menu-trigger__line--top    { top: 17px; }   /* 41 - 24 = 17 */
.fp-sp-menu-trigger__line--bottom { top: 21px; }   /* 45 - 24 = 21 */
/* × (Figma 47:3004/47:3008 = 17px line, 中央, ±45deg) */
.fp-sp-menu-trigger__x {
  background: #000000;
  left: 50%; top: 50%;
  width: 17px; height: 1px;
  display: none;
}
.fp-sp-menu-trigger__x--a { transform: translate(-50%, -50%) rotate(45deg); }
.fp-sp-menu-trigger__x--b { transform: translate(-50%, -50%) rotate(-45deg); }
/* state toggle */
body.sp-menu-open .fp-sp-menu-trigger__line { display: none; }
body.sp-menu-open .fp-sp-menu-trigger__x { display: block; }
.fp-sp-menu {
  /* drawer 全体: 全 viewport を覆う overlay。背面は dim (Figma 背面シャドウ表現)。
     panel 自体は SP frame 中央寄せで内側に absolute 配置。 */
  position: fixed;
  inset: 0;
  display: none;
  z-index: 200;
  pointer-events: none;
  overflow: hidden; /* SP frame からはみ出る panel をクリップ */
  background: rgba(54, 50, 50, 0.18); /* 背面 dim */
}
.fp-sp-menu.is-open { display: block; pointer-events: auto; }
body.sp-menu-open { overflow: hidden; }
.fp-sp-menu__panel {
  /* Figma 47:3011 Subtract: 350×660 @ left:calc(50%+51.5) top:13 of 375 frame
     → SP frame 内 left=64, top=13, w=350, h=660 (右端は SP 右より 39px 外)。
     SP frame は viewport 中央寄せなので: viewport left = calc(50% - 187.5px + 64px) */
  position: absolute;
  top: 13px;
  left: calc(50% - 123.5px);
  width: 350px;
  height: 660px;
  background: #FAF6EE; /* FV Subtract と同色 (8b50576e.svg fill="#FAF6EE") */
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.fp-sp-menu__list {
  /* Figma SP frame 47:3023: left:111 top:126 / 5項目想定 gap:40
     panel (left:64 top:13) 相対: left = 111-64 = 47, top = 126-13 = 113
     6項目 (お問い合わせ含む) で同じ縦エリアに収めるため gap を 24 に縮小 */
  position: absolute;
  list-style: none; padding: 0; margin: 0;
  left: 47px;
  top: 113px;
  width: 118px;
  display: flex; flex-direction: column; gap: 24px;
}
.fp-sp-menu__list a {
  display: block;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: 1.8px;
  color: #363232;
  text-decoration: none;
  white-space: nowrap;
}

/* === Frame: 1440 × 3603 を中央寄せ === */
.fp {
  position: relative;
  width: 1440px;
  height: 3603px;
  margin: 0 auto;
  background: #ffffff;
  /* overflow: hidden だと .fp 自体が scroll container になり、
     ページ内 scrollIntoView が .fp 内部の scrollTop を消費して
     フッター位置が動的にずれる症状 (2026-05-04 クライアント報告) を引き起こす。
     overflow: clip ならクリップしつつ scroll container を作らないので根治する。 */
  overflow: clip;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

/* === Decor layer (Figma 絶対座標) ===
 * 親の z-index は付けない（子の z-index が hero-plate と並列で機能するため）
 */
.fp__decor { position: absolute; inset: 0; pointer-events: none; }
.d { position: absolute; display: block; line-height: 0; }
.d > img, .d > svg { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Figma DOM order:
 *   [BELOW PLATE: z:0] square-blue, ellipse10
 *   [HERO PLATE: z:1]
 *   [ABOVE PLATE / BELOW PANEL: z:2] その他の装飾（プレート上に被せる）
 *   [HERO TITLE: z:3]
 *   [PANEL: z:4 with backdrop-filter — z:0/2 がブラー対象]
 */

/* リボン: 外箱（回転後のbbox）= flex center / 内 d__rotor は SVG 自然サイズ + 回転
 * Figma の <wrapper bbox><rotor rotate><svg natural>...</svg></rotor></wrapper> 構造に対応
 */
.d--ribbon-tl,
.d--ribbon-tr,
.d--ribbon-mid {
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.d__rotor { display: block; flex: 0 0 auto; }
.d__rotor > img { display: block; width: 100%; height: 100%; }

/* TL: vector3 自然 2286.245 × 717.561, rotate 7.02° → bbox 2356 × 991 */
.d--ribbon-tl  { left: -634px; top: 631px;  width: 2356px; height: 991px; }
.d--ribbon-tl .d__rotor { width: 2286.245px; height: 717.561px; transform: rotate(7.02deg); }

/* TR: vector2 自然 570.905 × 1310.96, rotate -56.21° → bbox 1407 × 1203 */
.d--ribbon-tr  { left: 693px;  top: -289px; width: 1407px; height: 1203px; }
.d--ribbon-tr .d__rotor { width: 570.905px; height: 1310.96px; transform: rotate(-56.21deg); }

/* MID: vector6 自然 2004.221 × 1481.452, rotate -28.18° → bbox 2466 × 2252 */
.d--ribbon-mid { left: -524px; top: 1662px; width: 2466px; height: 2252px; }
.d--ribbon-mid .d__rotor { width: 2004.221px; height: 1481.452px; transform: rotate(-28.18deg); }
.d--triangle-yellow { left: -26px;  top: 1124px; width: 312px;  height: 312px;  transform: rotate(-39.58deg);  z-index: 2; }
.d--triangle-blue   { left: 890px;  top: 412px;  width: 118px;  height: 118px;  transform: rotate(4.65deg);    z-index: 2; }
.d--circle-red      { left: 1008px; top: 296px;  width: 79px;   height: 79px;   z-index: 2; }
.d--circle-cyan     { left: 394px;  top: 1696px; width: 91px;   height: 91px;   z-index: 2; }
.d--square-orange   { left: 1296px; top: 1318px; width: 54px;   height: 54px;   background: #ff8325; transform: rotate(68.64deg); z-index: 2; }
.d--square-pink     { left: 1092px; top: 521px;  width: 93px;   height: 93px;   background: #ffa4cb; transform: rotate(11.78deg); z-index: 2; }
.d--rabbit-mid      { left: 1320px; top: 1421px; width: 116px;  height: 116px;  z-index: 2; }
.d--rabbit-late     { left: 1523px; top: 2866px; width: 219px;  height: 219px;  z-index: 2; }

/* BELOW plate（Figma で hero-plate の前に DOM 配置されている装飾） */
.d--circle-pink     { left: 499px;  top: 2502px; width: 85px;   height: 85px;   z-index: 0; }
.d--square-blue     { left: 315px;  top: 2633px; width: 60px;   height: 60px;   background: #3e9eff; transform: rotate(34.56deg); z-index: 0; }

/* === Header Group85 === */
.fp__header { position: absolute; top: 16px; left: 96px; width: 1325px; height: 171px; z-index: 10; }
.fp__header-logo { position: absolute; left: 0; top: 64px; width: 230px; height: 47.5px; display: block; }
.fp__header-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fp__header-nav {
  position: absolute;
  top: 56px; left: 305px;
  width: 640px; height: 60px;
  background: #ffffff;
  border: 1px solid #363232;
  border-radius: 210px;
  display: flex; align-items: center; justify-content: center;
  gap: 29px;
  font: 500 16px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.6px;
  color: #363232;
}
.fp__header-nav a { color: #363232; text-decoration: none; }
.fp__header-nav a:hover { color: #3eb9a1; }

.fp__header-cta {
  position: absolute;
  top: 0; right: 0;
  width: 171px; height: 171px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.fp__header-cta-circle {
  position: absolute; inset: 0;
  background: url("../img/decor/ellipse6.svg") center / 100% 100% no-repeat;
}
.fp__header-cta-label {
  position: relative;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  z-index: 1;
}

/* === ヒーロー アイボリープレート === */
.fp__hero-plate {
  position: absolute;
  top: 36px; left: 50%;
  transform: translateX(-50%);
  width: 1360px; height: 400px;
  background: #faf6ee;
  border-radius: 80px;
  z-index: 1;
}

/* === Page title (z:3、装飾 z:2 と被らない位置だが念のため上) === */
.fp__page-title {
  position: absolute;
  top: 193px;
  left: calc(50% - 598px);
  margin: 0;
  font: 700 56px/109px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 5.6px;
  color: #363232;
  white-space: nowrap;
  z-index: 3;
}

/* === Breadcrumb (z:5、装飾より上) === */
.fp__breadcrumb {
  position: absolute;
  top: 458px; left: 123px;
  display: flex; align-items: center; gap: 17px;
  font: 500 16px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.6px;
  z-index: 5;
}
.fp__breadcrumb-link { width: 35px; color: #363232; text-decoration: none; }
.fp__breadcrumb-dot { width: 6px; height: 6px; border-radius: 50%; background: #56BB6B; }
.fp__breadcrumb-current { width: 69px; color: #BFB7AF; }

/* === Inner container (top:537, w:1440, h:3207) — z:4 で z:2 装飾の上、blur対象 === */
.fp__inner {
  position: absolute;
  top: 537px; left: 0;
  width: 1440px; height: 3207px;
  z-index: 4;
}

/* === Panel BG（背面装飾を blur するフロステッド効果付き） === */
.fp__panel-bg {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 1200px; height: 1910px;
  background: rgba(250, 250, 250, 0.68);
  border: 1px solid #BFB7AF;
  border-radius: 80px;
  z-index: 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* === Labels (left:245.5, top:123, gap:44) === */
.fp__labels {
  position: absolute;
  left: 245.5px; top: 123px;
  width: 278px;
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 44px;
  z-index: 2;
}
.fp__labels li {
  margin: 0; padding: 0;
  height: 40px;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  white-space: nowrap;            /* 適格請求書発行事業者登録番号 が折り返さないよう */
}

.fp__label-business,
.fp__label-bank,
.fp__label-url {
  position: absolute;
  left: 245.5px;
  margin: 0;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  z-index: 2;
}
.fp__label-business { top: 1206px; width: 543px; }
.fp__label-bank     { top: 1606px; width: 278px; }
.fp__label-url      { top: 1732px; width: 278px; }

/* === Values (left:645.5, top:123, gap:44) === */
.fp__values {
  position: absolute;
  left: 645.5px; top: 123px;
  width: 543px;
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 44px;
  z-index: 2;
}
.fp__values li {
  margin: 0; padding: 0;
  height: 40px;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  white-space: nowrap;            /* 全値項目を1行に収める（Figma 同様） */
  overflow: visible;
}
.fp__values a { color: #363232; text-decoration: underline; text-underline-offset: 2px; }
.fp__values a:hover { color: #2c8a78; }

.fp__value-business {
  position: absolute;
  left: 645.5px; top: 963px;
  width: 543px; height: 560px;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  z-index: 2;
}
/* 3パラ × 各h:40lh = 120 + 240 + 120 = 480 を 560 に分配するため間に 40px ずつ */
.fp__value-business p { margin: 0 0 40px; }
.fp__value-business p:last-child { margin-bottom: 0; }

.fp__value-bank {
  position: absolute;
  left: 645.5px; top: 1567px;
  width: 543px; height: 120px;
  margin: 0;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #363232;
  z-index: 2;
}

.fp__value-url {
  position: absolute;
  left: 645.5px; top: 1731px;
  width: 543px; height: 40px;
  margin: 0;
  font: 500 18px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  z-index: 2;
}
.fp__value-url a { color: #363232; text-decoration: underline; }

/* === Map (top:1989, w:1459.5, h:400 centered) === */
.fp__map {
  position: absolute;
  top: 1989px; left: 50%;
  transform: translateX(-50%);
  width: 1459.5px; height: 400px;
  z-index: 1;
}
.fp__map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* === Marquee (top:2529, left:41, w:1358, h:120) — z:3 でフッター上に重ねる === */
.fp__marquee {
  position: absolute;
  top: 2529px; left: 41px;
  width: 1358px; height: 120px;
  z-index: 3;
  overflow: hidden;
  border-radius: 110px;
}
.fp__marquee-pill {
  position: absolute; inset: 0;
  background: #ffffff;
  border: 1px solid #BFB7AF;
  border-radius: 110px;
  opacity: 0.91;
}
.fp__marquee-text {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 500 100px/1 'Albert Sans', sans-serif;
  color: #E8DFC9;
  letter-spacing: 2px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* === Footer Group69 (top:2621, w:1440, h:445) === */
.fp__footer { position: absolute; top: 2621px; left: 0; width: 1440px; height: 445px; z-index: 2; }
.fp__footer-bg { position: absolute; inset: 0; background: #3eb9a1; }
.fp__footer-content {
  position: absolute;
  top: 138px; right: 119px; bottom: 63px; left: 120px;
}
.fp__footer-logo {
  position: absolute;
  top: 22px; left: 0;
  width: 249.6px; height: 52px;
  display: block;
}
.fp__footer-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fp__footer-nav-1, .fp__footer-nav-2 {
  position: absolute;
  top: 0;
  width: 260px; height: 132px;
  margin: 0; padding: 0;
  list-style: none;
  font: 500 18px/44px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.8px;
  color: #ffffff;
}
.fp__footer-nav-1 { left: 657px; }
.fp__footer-nav-2 { left: 941px; }
.fp__footer-nav-1 li, .fp__footer-nav-2 li { margin: 0; padding: 0; }
.fp__footer-nav-1 a, .fp__footer-nav-2 a { color: #ffffff; text-decoration: none; }
.fp__footer-nav-1 a:hover, .fp__footer-nav-2 a:hover { opacity: .8; }

/* divider line: row1(118) + gap(40) = 158 から開始 */
.fp__footer-line {
  position: absolute;
  top: 158px; left: 0;
  width: 100%; height: 1px;
  display: block;
}
/* bottom row: divider(158) + gap(40) = 198 から開始 */
.fp__footer-privacy {
  position: absolute;
  top: 207px; left: 1035px; /* 198 + mt:9 = 207 */
  width: 165px; height: 24px;
  font: 500 15px/40px 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-decoration: none;
  display: flex; align-items: center;
}
.fp__footer-copy {
  position: absolute;
  top: 198px; left: 0;
  margin: 0;
  font: 500 12px/46px 'Albert Sans', sans-serif;
  letter-spacing: 1.2px;
  color: #ffffff;
  white-space: nowrap;
}

/* === SP fallback (1440 frame は固定なので、min-width 未満は横スクロール許容) === */
@media (max-width: 1440px) {
  .fp { transform-origin: top center; }
}

/* =========================================================
   Figma コメント #8 (2026-04-22, 伊与田氏): ボタンホバーで丸が大きくなる
   - .fp 内の <a> をホバーで内側の矢印アイコンを拡大
   - View More (Group137) 等の CTA に対応
   ========================================================= */
.fp a {
  transition: opacity .25s ease;
}
.fp a:hover { opacity: .92; }
.fp a img {
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  transform-origin: center;
}
.fp a:hover img {
  transform: scale(1.18);
}
/* ロゴ (header logo 1 / footer logo 3) はホバー時の scale を無効化 */
.fp a[data-name="logo 1"]:hover img,
.fp a[data-name="logo 3"]:hover img {
  transform: none;
}
.fp a[data-name="logo 1"] img,
.fp a[data-name="logo 3"] img {
  transition: none;
}
/* 完コピ生成された a 配下の rotate(-90deg) ラッパは scale を後付け */
.fp a [style*="rotate(-90deg)"] {
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  transform-origin: center;
}
.fp a:hover [style*="rotate(-90deg)"] {
  transform: rotate(-90deg) scale(1.12);
}

/* =========================================================
   text-reveal.js 用: <span data-tr-char> の初期スタイル
   (JS が opacity/transform を即座に上書きするが、JS 無効環境向けの保険として
    visibility だけは確保しておく)
   ========================================================= */
.fp [data-tr-char] {
  display: inline-block;
}

/* =========================================================
   うさぎ「ぴょん！止まる、ぴょん！」(プロトタイプ Demo 1 移植)
   src/rabbit/index.html の hopInPlace() を CSS keyframes 化。
   1 サイクル ≒ 6.68s、4 連続ホップ + 各ホップ後にランダム長の静止。
   高さは要素の自身高さに対する % で表現してコンテナサイズに比例。
   ========================================================= */
@keyframes reload-mind-rabbit-hop-place {
  /* Hop 1: 高さ ~33% / pause 0.8s */
  0%      { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  1.80%   { transform: translateY(0) scaleX(1.10) scaleY(0.85); animation-timing-function: ease-out; }
  6.29%   { transform: translateY(-33%) scaleX(0.95) scaleY(1.05); animation-timing-function: ease-in; }
  10.78%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  12.28%  { transform: translateY(0) scaleX(1.08) scaleY(0.9); animation-timing-function: ease-in-out; }
  14.52%  { transform: translateY(0) scaleX(1) scaleY(1); }
  /* Hop 2: 高さ ~53% / pause 0.3s */
  26.50%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  28.30%  { transform: translateY(0) scaleX(1.10) scaleY(0.85); animation-timing-function: ease-out; }
  33.53%  { transform: translateY(-53%) scaleX(0.95) scaleY(1.05); animation-timing-function: ease-in; }
  38.77%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  40.27%  { transform: translateY(0) scaleX(1.08) scaleY(0.9); animation-timing-function: ease-in-out; }
  42.51%  { transform: translateY(0) scaleX(1) scaleY(1); }
  /* Hop 3: 高さ ~27% / pause 1.2s */
  47.01%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  48.80%  { transform: translateY(0) scaleX(1.10) scaleY(0.85); animation-timing-function: ease-out; }
  52.55%  { transform: translateY(-27%) scaleX(0.95) scaleY(1.05); animation-timing-function: ease-in; }
  56.29%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  57.78%  { transform: translateY(0) scaleX(1.08) scaleY(0.9); animation-timing-function: ease-in-out; }
  60.03%  { transform: translateY(0) scaleX(1) scaleY(1); }
  /* Hop 4: 高さ ~47% / pause 0.4s */
  77.99%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  79.79%  { transform: translateY(0) scaleX(1.10) scaleY(0.85); animation-timing-function: ease-out; }
  85.03%  { transform: translateY(-47%) scaleX(0.95) scaleY(1.05); animation-timing-function: ease-in; }
  90.27%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  91.77%  { transform: translateY(0) scaleX(1.08) scaleY(0.9); animation-timing-function: ease-in-out; }
  94.01%  { transform: translateY(0) scaleX(1) scaleY(1); }
  100%    { transform: translateY(0) scaleX(1) scaleY(1); }
}

/* hop と同期した pose 切替 (jump-place 用):
 * 各ホップの「踏み切り (squash 終了) → 着地 (land 開始)」の airtime のみ jump pose webp を表示、
 * それ以外 (squash / land squash / pause) は pre-jump SVG を表示。 */
@keyframes reload-mind-rabbit-hop-pose-jump {
  0%, 1.80%       { opacity: 0; }
  1.81%, 10.78%   { opacity: 1; }   /* Hop 1 air */
  10.79%, 28.30%  { opacity: 0; }
  28.31%, 38.77%  { opacity: 1; }   /* Hop 2 air */
  38.78%, 48.80%  { opacity: 0; }
  48.81%, 56.29%  { opacity: 1; }   /* Hop 3 air */
  56.30%, 79.79%  { opacity: 0; }
  79.80%, 90.27%  { opacity: 1; }   /* Hop 4 air */
  90.28%, 100%    { opacity: 0; }
}
@keyframes reload-mind-rabbit-hop-pose-prejump {
  0%, 1.80%       { opacity: 1; }
  1.81%, 10.78%   { opacity: 0; }
  10.79%, 28.30%  { opacity: 1; }
  28.31%, 38.77%  { opacity: 0; }
  38.78%, 48.80%  { opacity: 1; }
  48.81%, 56.29%  { opacity: 0; }
  56.30%, 79.79%  { opacity: 1; }
  79.80%, 90.27%  { opacity: 0; }
  90.28%, 100%    { opacity: 1; }
}

/* =========================================================
   アイドル (プロトタイプ Demo 3 移植)
   sit  : ゆっくり傾ぎ (rotation -2°, 4.4s)
   wash : 細かい毛づくろい振動 (rotation 4°, 1.0s)
   ========================================================= */
@keyframes reload-mind-rabbit-idle-sit {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-2deg); }
}
@keyframes reload-mind-rabbit-idle-wash {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(4deg); }
}
/* stand idle: 呼吸 (scaleY 1.03 / scaleX 0.98) + 軽い上下バウンス */
@keyframes reload-mind-rabbit-idle-stand {
  0%, 100% { transform: scaleX(1) scaleY(1) translateY(0); }
  50%      { transform: scaleX(0.98) scaleY(1.03) translateY(-3px); }
}

/* =========================================================
   背景リボン (Vector 3/4/5/6) のゆるやかな漂い (Figma コメント #2 + 初期要望
   "緑色の帯が上から下へ流れる" / 参考: tokyotechnology.jp)
   parallax.js initRibbonFlow() が以下のクラスを outer flex bbox に付与する:
     - 上から下への 1 回 reveal (clip-path 1.4s) は JS 側で制御
     - 下記 drift は永続ループ。`translate` プロパティは inline transform と独立に
       合成されるため、Figma の rotate / scaleY を破壊しない。
   ========================================================= */
@keyframes reload-mind-ribbon-drift-1 {
  from { translate: 0 0; }
  to   { translate: 4px 12px; }
}
@keyframes reload-mind-ribbon-drift-2 {
  from { translate: 0 0; }
  to   { translate: -6px 10px; }
}
@keyframes reload-mind-ribbon-drift-3 {
  from { translate: 0 0; }
  to   { translate: 5px -8px; }
}
@keyframes reload-mind-ribbon-drift-4 {
  from { translate: 0 0; }
  to   { translate: -3px -10px; }
}
.fp__ribbon-drift--1 { animation: reload-mind-ribbon-drift-1 32s ease-in-out infinite alternate; }
.fp__ribbon-drift--2 { animation: reload-mind-ribbon-drift-2 28s ease-in-out infinite alternate; animation-delay: -7s; }
.fp__ribbon-drift--3 { animation: reload-mind-ribbon-drift-3 30s ease-in-out infinite alternate; animation-delay: -14s; }
.fp__ribbon-drift--4 { animation: reload-mind-ribbon-drift-4 26s ease-in-out infinite alternate; animation-delay: -3s; }

/* prefers-reduced-motion: アニメ全般の停止 */
@media (prefers-reduced-motion: reduce) {
  .fp a img,
  .fp a [style*="rotate(-90deg)"] {
    transition: none;
  }
  .fp a:hover img,
  .fp a:hover [style*="rotate(-90deg)"] {
    transform: none;
  }
  .fp [data-tr-char] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-name^="無題2317"],
  [data-name^="無題2317"] img,
  .d--rabbit-mid, .d--rabbit-late,
  .d--rabbit-mid img, .d--rabbit-late img,
  .fp__ribbon-drift--1, .fp__ribbon-drift--2,
  .fp__ribbon-drift--3, .fp__ribbon-drift--4 {
    animation: none !important;
  }
}

/* ===== Front page header nav hover (Figma-copy markup) =====
 * 26:390 がメニュー行のフレックスコンテナ。直下の各 div が項目 (コンセプト/お知らせ/...)。
 * 参考動画と同じ「hover で角丸矩形ハイライト」を ::before で実装。
 * 横方向は gap (29px) より小さく拡張、縦方向は pill 内に収まる程度に拡張。 */
/* page-contact.php は data-node-id がインスタンスプレフィックス付き
 * (例: "I46:575;26:390") のため $= (ends-with) でマッチさせる */
[data-node-id$="26:390"] > a,
[data-node-id$="26:390"] > div {
  z-index: 0;
  cursor: pointer;
  transition: color .22s ease;
}
[data-node-id$="26:390"] > a::before,
[data-node-id$="26:390"] > div::before {
  content: "";
  position: absolute;
  inset: -14px -12px;
  background: #CFEBD9;
  border-radius: 14px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .22s ease, transform .22s ease;
  z-index: -1;
}
[data-node-id$="26:390"] > a:hover,
[data-node-id$="26:390"] > div:hover { color: var(--c-brand-dark); }
[data-node-id$="26:390"] > a:hover::before,
[data-node-id$="26:390"] > div:hover::before { opacity: 1; transform: scale(1); }

/* お問い合わせ CTA (右肩の丸ボタン) */
a[data-node-id$="18:295"] { transition: opacity .2s ease, transform .2s ease; }
a[data-node-id$="18:295"]:hover { opacity: .85; transform: scale(1.05); }

/* View Transitions API は一旦無効化 (2026-04-30 軽量化のため off) */

/* ===== 背景シェイプの常時アニメ (クライアント要望 2026-04-29) =====
 * マリオのドッスン挙動: ゆっくり上昇 → 急落下 → 着地で減衰バウンス → 静止。
 * Figma 完コピの inline `transform: rotate(...)` を壊さないため、
 * CSS individual transform プロパティ `translate` を使う (合成可)。
 * duration / delay / 振幅は JS が CSS 変数で個別ばらつかせる。 */
/* 2D ベクトル化 (2026-05-05):
 * 親 rotator (transform: rotate) 配下の shape に animation を当てると、
 * 既存の 1D translate (0 calc(--y * -1)) は親の rotate で回転してしまい、
 * 画面上で「下方向に落ちる」見た目にならない。
 * → apex の translate を JS から (yx, yy) で個別に与えられるようにする。
 *   非 rotator shape: yx=0, yy=-Y (= 既存挙動、画面上向きジャンプ→落下)
 *   rotator shape   : 親回転 θ の逆行列で screen up = (0, -Y) を local 座標へ変換 */
@keyframes rm-shape-thwomp {
  /* 0–48% : ゆっくり上昇 */
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(.25,.1,.25,1); }
  48%  { translate: var(--rm-shape-yx, 0px) var(--rm-shape-yy, -60px); animation-timing-function: cubic-bezier(.5,0,.95,.5); }
  /* 48–56% : 急速落下 */
  56%  { translate: 0 0; animation-timing-function: cubic-bezier(.2,.8,.4,1); }
  /* 56–66% : 1 回目バウンス (大) */
  61%  { translate: calc(var(--rm-shape-yx, 0px) * 0.22) calc(var(--rm-shape-yy, -60px) * 0.22); animation-timing-function: cubic-bezier(.6,0,1,.6); }
  66%  { translate: 0 0; animation-timing-function: cubic-bezier(.2,.8,.4,1); }
  /* 66–74% : 2 回目バウンス (中) */
  70%  { translate: calc(var(--rm-shape-yx, 0px) * 0.10) calc(var(--rm-shape-yy, -60px) * 0.10); animation-timing-function: cubic-bezier(.6,0,1,.6); }
  74%  { translate: 0 0; animation-timing-function: cubic-bezier(.2,.8,.4,1); }
  /* 74–82% : 3 回目バウンス (小) */
  78%  { translate: calc(var(--rm-shape-yx, 0px) * 0.04) calc(var(--rm-shape-yy, -60px) * 0.04); animation-timing-function: cubic-bezier(.6,0,1,.6); }
  82%  { translate: 0 0; }
  /* 82–100% : 静止 (次サイクルまでの溜め) */
  100% { translate: 0 0; }
}
/* 横方向ゆらぎ。Y の bounce と独立周期で重畳することで、
 * 全シェイプが Y も X も全く同じ動きにならない。
 * 同様に 2D ベクトル化: 非 rotator shape は (X, 0)、rotator shape は逆回転後の local 座標。 */
@keyframes rm-shape-swayx {
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  100% { translate: var(--rm-shape-xx, 26px) var(--rm-shape-xy, 0px); }
}
[data-shape-anim] {
  animation:
    rm-shape-thwomp var(--rm-shape-dur, 4.5s)  var(--rm-shape-delay, 0s)   infinite,
    rm-shape-swayx  var(--rm-shape-xdur, 5.0s) var(--rm-shape-xdelay, 0s)  infinite alternate;
  animation-composition: add;
  will-change: translate;
  /* 画面外は paused にして CPU/GPU 解放 (shapes.js が IO で切替) */
  animation-play-state: var(--rm-shape-state, running);
}
@media (prefers-reduced-motion: reduce) {
  [data-shape-anim] { animation: none; translate: 0 0; }
}

/* ===== CTA arrow ホバー (右上にピコっと移動 / 拡大なし。クライアント要望 2026-05-04) =====
 * shapes.js のドッスン / 横移動とは無関係。
 * translate は CSS individual transform プロパティなので
 * 親 wrapper の transform: rotate(-90deg) と合成される。
 * "拡大なし" を担保するため矢印リンク配下の <img> / rotate ラッパに掛かる
 * `.fp a:hover img { scale(1.18) }` 等は同セクション末尾で打ち消している。 */
[data-name="arrow"] {
  translate: 0 0;
  /* 親 wrapper が rotate(-90deg) (CCW) の場合、視覚 BL = ローカル TL */
  transform-origin: 0% 0%;
  transition: translate 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
a:hover [data-name="arrow"],
[data-name="btn"]:hover [data-name="arrow"],
/* PC TOP サービスカード: overlay <a> hover で兄弟矢印に main.js が
   .is-card-hover を付与 → 同じ translate を発火 */
a.is-card-hover [data-name="arrow"] {
  /* rotate(-90deg) 下では local (+x,+y) が視覚的 (右,上) */
  translate: 28% 28%;
}
/* single.php は rotate(90deg) (CW) — origin と translate 方向を反転 */
[style*="rotate(90deg)"] > [data-name="arrow"] {
  transform-origin: 100% 100%;
}
a:hover [style*="rotate(90deg)"] > [data-name="arrow"],
[data-name="btn"]:hover [style*="rotate(90deg)"] > [data-name="arrow"] {
  translate: -28% -28%;
}
/* 矢印を内包するリンクでは img と rotate ラッパへの scale ホバーを打ち消す
   (緑矢印・灰色矢印・back 用 rotate(180deg) いずれも対象) */
.fp a:has([data-name="arrow"]):hover img,
[data-name="btn"]:has([data-name="arrow"]):hover img {
  transform: none;
}
.fp a:has([data-name="arrow"]):hover [style*="rotate(-90deg)"] {
  transform: rotate(-90deg);
}
.fp a:has([data-name="arrow"]):hover [style*="rotate(90deg)"] {
  transform: rotate(90deg);
}
.fp a:has([data-name="arrow"]):hover [style*="rotate(180deg)"] {
  transform: rotate(180deg) scaleX(-1);  /* single-news の戻る矢印は scaleX(-1) で反転している */
}
@media (prefers-reduced-motion: reduce) {
  [data-name="arrow"] { transition: none; }
  a:hover [data-name="arrow"],
  [data-name="btn"]:hover [data-name="arrow"],
  a.is-card-hover [data-name="arrow"] { translate: 0 0; }
  a:hover [style*="rotate(90deg)"] > [data-name="arrow"],
  [data-name="btn"]:hover [style*="rotate(90deg)"] > [data-name="arrow"] { translate: 0 0; }
}

/* ===== Toast (フォーム送信ダミー用、後でフォーム本実装時に置換予定) ===== */
.rm-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-text, #363232);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 1.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}
.rm-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Service / Ad section — 6 icons thwomp wave (2026-05-12) =====
   サービスページ「広告配信・広告運用事業」6カードのアイコン (円背景 +
   中身 glyph まで一塊) を、左→右・上→下の読み順で順にドッスン落下。
   既存 `rm-shape-thwomp` keyframe を流用し、apex 高さ (--rm-shape-yy)
   を装飾の 1/5〜1/6 に圧縮して控えめに。各カードの円と中身要素には
   同じ delay を当てて 1 ユニットとして動かす。
   JS 側 (main.js) で対象 data-node-id に .rm-ad-icon-thwomp を付与し、
   カードごとに --rm-hop-delay を 0s → 0.75s で段階的に設定する。 */
.rm-ad-icon-thwomp {
  animation: rm-shape-thwomp 3s linear infinite;
  animation-delay: var(--rm-hop-delay, 0s);
  --rm-shape-yy: -14px;
  --rm-shape-yx: 0px;
  will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
  .rm-ad-icon-thwomp { animation: none; translate: 0 0; }
}

/* ===== SP 汎用レイアウト (sp-company / sp-service / sp-news 等で再利用) =====
   2026-05-12: Figma SP が無いページの SP 版を flex 縦並びで作る共通基盤。
   viewport 幅 375px のレイアウトを前提に padding / typography を定義。 */
.fp--sp {
  /* .fp は width: 1440px / height: 3603px (page-company の値) をハードコードしているので、
     ここで SP 用に上書き。sp-top.php は inline style で width/height を持つので無害、
     sp-{company,service,news,contact,privacy} 等の inline を持たないテンプレ用に
     width 375px / height auto を強制する。 */
  width: 375px;
  height: auto;
  margin: 0 auto;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-weight: 500;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
.sp-page {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  background: #ffffff;
  overflow: clip;
  position: relative;
}
.sp-page__header {
  padding: 31px 24px 0;
  display: flex;
  align-items: center;
  height: 70px;
}
.sp-page__logo {
  display: block;
  width: 164px;
  height: 34px;
}
.sp-page__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sp-section {
  padding: 0 24px;
  margin-top: 60px;
}
.sp-section--no-pad {
  padding: 0;
}
.sp-hero {
  margin: 24px 24px 0;
  padding: 50px 32px;
  background: var(--c-bg-ivory);
  border-radius: 30px;
  text-align: center;
}
.sp-hero__title {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0;
}
.sp-breadcrumb {
  margin: 28px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-line);
  letter-spacing: 0.1em;
  justify-content: center;
}
.sp-breadcrumb a {
  color: var(--c-text);
  text-decoration: none;
}
.sp-breadcrumb__sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #56BB6B;
  display: inline-block;
}
.sp-table {
  background: rgba(250, 250, 250, 0.68);
  border: 1px solid var(--c-line);
  border-radius: 30px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}
.sp-table__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-table__label {
  font-size: 13px;
  font-weight: 700;
  color: #56BB6B;
  letter-spacing: 0.05em;
  margin: 0;
}
.sp-table__value {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-text);
  letter-spacing: 0.03em;
  margin: 0;
  word-break: break-word;
}
.sp-table__value a {
  color: var(--c-text);
  text-decoration: underline;
}
.sp-map {
  margin-top: 40px;
  width: 100%;
}
.sp-map__iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}
.sp-marquee {
  margin-top: 50px;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 14px 0;
}
.sp-marquee__inner {
  white-space: nowrap;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: #e8dfc9;
  animation: sp-marquee-scroll 20s linear infinite;
}
@keyframes sp-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.sp-footer {
  margin-top: 60px;
  background: var(--c-brand);
  padding: 50px 28px 24px;
  color: #ffffff;
}
.sp-footer__logo {
  display: block;
  width: 167px;
  height: 35px;
  margin-bottom: 28px;
}
.sp-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sp-footer__menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.sp-footer__menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.sp-footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin: 18px 0;
}
.sp-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.sp-footer__bottom a {
  color: #ffffff;
  text-decoration: none;
}

/* ===== sp-company 固有 (現状調整なし、将来追加) ===== */
.fp--sp-company {
  /* hook for company-specific overrides */
}

/* ===== SP TOP サービスカード全面リンク ===== */
.sp-service-card-link {
  -webkit-tap-highlight-color: rgba(63, 153, 80, 0.12);
  cursor: pointer;
  transition: background 120ms ease-out;
}
.sp-service-card-link:active {
  background: rgba(63, 153, 80, 0.06);
}

/* ===== PC TOP サービスカード全面リンク ===== */
.fp-pc-service-card-link {
  cursor: pointer;
  transition: background 160ms ease-out;
}
.fp-pc-service-card-link:hover {
  background: rgba(63, 153, 80, 0.04);
}
.fp-pc-service-card-link:focus-visible {
  outline: 2px solid #3f9950;
  outline-offset: -2px;
}

/* ===== PC contact form 入力欄 focus ===== */
.rm-pc-contact-input:focus {
  outline: 2px solid #3f9950;
  outline-offset: -2px;
}