/* ivalue — 共通スタイル */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Zen Kaku Gothic New', sans-serif; color: #2B2E38; background: #fff; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.75; letter-spacing: .01em; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: #C0691F; text-decoration: none; }
a:hover { color: #A85815; }
ul { list-style: none; }
h1, h2, h3 { word-break: auto-phrase; }
.en { font-family: 'Outfit', sans-serif; }
.container { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes driftDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* リビール */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .drift-col > div, .marquee-track { animation: none !important; }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-weight: 700; transition: all .2s; }
.btn-primary { background: #E4843C; color: #fff; box-shadow: 0 14px 30px rgba(228,132,60,.34); }
.btn-primary:hover { background: #C0691F; color: #fff; transform: translateY(-2px); }
.btn-ghost { color: #24262E; border: 1.5px solid #D6CDBE; background: #fff; }
.btn-ghost:hover { border-color: #E4843C; color: #C0691F; }
.btn-lg { font-size: 17px; padding: 18px 34px; }
.btn-md { font-size: 15px; padding: 16px 26px; }

/* セクションバッジ */
.sec-badge { display: inline-flex; align-items: center; gap: 9px; background: #E4843C; border-radius: 8px; padding: 8px 15px; }
.sec-badge span.t { font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; color: #fff; }
/* パズルピースのマーク（faviconと同系のジグソー形状） */
.sec-badge span.m { display: inline-block; width: 14px; height: 14px; flex: none; background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4%2021%20V9%20H8.6%20A3.2%203.2%200%201%201%2013.4%209%20H18%20V12.6%20A3.2%203.2%200%201%201%2018%2017.4%20V21%20Z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat; }
.sec-title { margin-top: 12px; font-size: clamp(26px, 3.2vw, 42px); font-weight: 900; letter-spacing: -.02em; line-height: 1.3; }
.sec-lead { margin-top: 16px; font-size: 17px; color: #59544B; text-wrap: pretty; }

/* 日本語の文節改行（Chrome/Edge 119+のみ有効、他ブラウザは従来どおり）。
   「1サイトあたり」等が行末で泣き別れするのを防ぐ */
h1, h2, h3, .lead, .sec-lead, .side-lead { word-break: auto-phrase; }

/* アンカー移動時に sticky ヘッダーの下へ潜り込まないようオフセット */
:where([id]) { scroll-margin-top: 84px; }

/* トップバー */
.topbar { background: #F3EFE8; border-bottom: 1px solid #EAE3D8; }
.topbar .container { padding-top: 8px; padding-bottom: 8px; display: flex; justify-content: flex-end; gap: 22px; font-size: 12px; font-weight: 500; }
.topbar a { color: #6A645A; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid #EAE3D8; }
.site-header .container { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { height: 26px; width: auto; }
.brand .reg { font-size: 11px; font-weight: 600; color: #2B2E38; align-self: flex-start; margin-left: -4px; }
/* ロゴ併記用の®マーク（色は親から継承） */
.regmark { font-size: 11px; font-weight: 600; line-height: 1; align-self: flex-start; }
.gnav { display: flex; align-items: center; gap: 22px; margin-left: 6px; }
.gnav a { color: #4A463E; font-size: 14px; font-weight: 700; padding: 10px 0; }
.gnav a:hover { color: #C0691F; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-actions .dl { font-size: 13.5px; font-weight: 700; color: #4A463E; }
.header-cta { display: inline-flex; align-items: center; gap: 8px; background: #E4843C; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 999px; box-shadow: 0 8px 20px rgba(228,132,60,.30); }
.header-cta:hover { background: #C0691F; color: #fff; transform: translateY(-1px); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid #EAE3D8; border-radius: 12px; background: #fff; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: #2B2E38; border-radius: 2px; transition: all .25s; }
.menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 27px; }
.menu-open .menu-btn span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* フッター */
.scroll-hint { display: none; }
.site-footer { background: #24262E; color: #fff; padding: 72px 0 40px; }
.footer-grid { display: grid; grid-template-columns: minmax(230px,1.7fr) repeat(4, minmax(0,1fr)); gap: 32px; }
.footer-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; min-width: 0; }
.footer-col h4 { font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.footer-col nav { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; font-size: 13.5px; }
.footer-col nav a, .site-footer .flinks a { color: #C8C9CE; }
.footer-col nav a:hover, .site-footer .flinks a:hover { color: #F6C74A; }
.footer-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #948C80; line-height: 1.8; }
.flinks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 12.5px; }

/* ══ レスポンシブ：タブレット ══ */
@media (max-width: 1024px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .topbar { display: none; }
  .gnav, .header-actions { display: none; }
  .menu-btn { display: block; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid > div:first-child { grid-column: span 2; }
  .mobile-menu { display: none; position: fixed; inset: 61px 0 0; z-index: 49; background: #fff; overflow-y: auto; padding: 24px; }
  .menu-open .mobile-menu { display: block; }
  /* メニュー展開中は背面ページのスクロールをロック */
  body.menu-open { overflow: hidden; }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a { display: block; padding: 16px 4px; font-size: 16px; font-weight: 700; color: #2B2E38; border-bottom: 1px solid #EFEAE1; }
  .mobile-menu .sub { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 13px; }
  .mobile-menu .sub a { color: #6A645A; }
  .mobile-menu .cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  body.menu-open { overflow: hidden; }
}

/* ══ レスポンシブ：スマホ ══ */
@media (max-width: 768px) {
  /* 横スクロールカルーセル化（縦長化するカード群に付与） */
  .hscroll { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-left: -20px; margin-right: -20px; padding: 12px 20px 8px; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * { flex: none; scroll-snap-align: start; }
  .scroll-hint { display: block !important; margin-top: 10px; font-size: 11.5px; color: #A79E92; text-align: center; }
  .container { padding-left: 20px; padding-right: 20px; }
  .btn-lg { font-size: 15px; padding: 16px 26px; width: 100%; }
  .btn-md { width: 100%; }
  .sec-lead { font-size: 15px; }
  /* 見出し：PC用の<br>を無効化して自然な折り返しに */
  h1 br, h2 br { display: none; }
  h1, h2 { text-wrap: balance; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
  .site-footer { padding: 56px 0 32px; }
}

/* ─ ページ遷移アニメーション（View Transitions対応ブラウザのみ有効） ─ */
@view-transition { navigation: auto; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  ::view-transition-old(root) { animation: vt-fade-out .16s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in .26s ease .05s both; }
  .topbar { view-transition-name: topbar; }
  .site-header { view-transition-name: site-header; }
}

/* ─ 現在ページのナビハイライト（main.jsが is-active を付与） ─ */
.gnav a.is-active, .mobile-menu nav a.is-active { color: #C0691F; }