/* ==========================================================================
   リニューアル（案A「回転バレルの滑り層」）共通レイヤー
   - 既存CSSの後に読み込み、変数の上書きと rn- 接頭辞の部品だけを足す
   - 本文は端末のゴシック体（Webフォントは見出し・英字・等幅の3書体に限定＝表示速度対策）
   - 動きは CSS のみ。動きを減らす設定・印刷では止め、止まった状態が完成形
   ========================================================================== */

:root {
  --rn-ink: #111214;
  --rn-ink2: #1c1d20;
  --rn-ink3: #0b0c0d;
  --rn-paper: #f3f1ec;
  --rn-white: #ffffff;
  --rn-gold: #b38f2d;          /* ロゴの金。明るい地では線・罫だけに使う */
  --rn-gold-on-dark: #c9a54a;  /* 暗い地の上の金の文字 */
  --rn-sub-light: rgba(17, 18, 20, 0.75);
  --rn-sub-dark: rgba(255, 255, 255, 0.78);
  --rn-line-light: rgba(17, 18, 20, 0.16);
  --rn-line-dark: rgba(255, 255, 255, 0.16);
  --rn-font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --rn-font-head: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --rn-font-en: "Oswald", "Arial Narrow", sans-serif;
  --rn-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --rn-pad: clamp(20px, 5vw, 72px);
  --rn-max: 1296px;
  --rn-slope: 0.57735;         /* 60°の斜め（滑り層の角度）: 高さ1pxあたりの横ずれ */

  /* 既存テーマの変数を案Aに寄せる */
  --font-sans: var(--rn-font-body);
  --font-display: var(--rn-font-en);
  --color-primary: var(--rn-gold);
}

body {
  font-family: var(--rn-font-body);
  color: var(--rn-ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   ヘッダー（既存の HTML・開閉スクリプトはそのまま。色と書体だけ差し替える）
   -------------------------------------------------------------------------- */
.im-header {
  --font-display: var(--rn-font-en);
  --font-body: var(--rn-font-body);
  --header-bg: var(--rn-ink);
  --header-bg-scrolled: rgba(17, 18, 20, 0.96);
  --header-text: #ffffff;
  --header-text-muted: rgba(255, 255, 255, 0.6);
  --header-border: rgba(255, 255, 255, 0.12);
  --header-accent: var(--rn-gold-on-dark);
  --header-accent-hover: #e0c27a;
  --header-accent-light: rgba(201, 165, 74, 0.12);
  --header-accent-glow: rgba(201, 165, 74, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.im-header .menu-item__en { display: none; }
.im-header .menu-item__ja { font-size: 14px; letter-spacing: 0.04em; color: #fff; }
.im-header .menu-item__dropdown { background: var(--rn-ink2); border: 1px solid var(--rn-line-dark); box-shadow: none; }
.im-header .menu-item__dropdown a { color: rgba(255, 255, 255, 0.86); }
.im-header .menu-item__dropdown a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.im-header__cta--primary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.im-header__cta--primary .im-header__cta-en { display: none; }
.im-header__cta--primary:hover { border-color: var(--rn-gold-on-dark) !important; }
.im-header__burger span { background: #fff !important; }
.im-header__toggle-label { color: #fff; }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.im-footer {
  --font-display: var(--rn-font-mono);
  --font-body: var(--rn-font-body);
  --footer-bg: var(--rn-ink3);
  --footer-accent: var(--rn-gold-on-dark);
}

/* --------------------------------------------------------------------------
   共通部品
   -------------------------------------------------------------------------- */
.rn-head { font-family: var(--rn-font-head); font-weight: 900; letter-spacing: 0.02em; }
.rn-en { font-family: var(--rn-font-en); }
.rn-mono { font-family: var(--rn-font-mono); letter-spacing: 0.08em; }

/* 画面いっぱいに広げる（.container の中から抜け出す） */
.rn-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.rn-inner { max-width: calc(var(--rn-max) + var(--rn-pad) * 2); margin: 0 auto; padding: 0 var(--rn-pad); box-sizing: border-box; }

/* 章番号の注記（§ 01 ── Knowledge） */
.rn-label { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--rn-font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--rn-ink); }
.rn-label__line { display: inline-block; width: 48px; height: 1px; background: currentColor; }
.rn-dark .rn-label { color: var(--rn-gold-on-dark); }

.rn-title { margin: 22px 0 0; font-family: var(--rn-font-head); font-weight: 900; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.25; color: var(--rn-ink); }
.rn-dark .rn-title { color: #fff; }
.rn-lead { margin: 18px 0 0; font-size: 15px; line-height: 2; color: var(--rn-sub-light); }
.rn-dark .rn-lead { color: var(--rn-sub-dark); }

.rn-section { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 100px) 0; }
.rn-section--paper { background: var(--rn-paper); }
.rn-section--white { background: #fff; }
.rn-section--ink { background: var(--rn-ink); color: #fff; }
.rn-section--ink2 { background: var(--rn-ink2); color: #fff; }
.rn-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* 巨大英字の透かし */
.rn-wm { position: absolute; z-index: 0; font-family: var(--rn-font-en); font-weight: 600; line-height: 0.8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(17, 18, 20, 0.08); pointer-events: none; user-select: none; font-size: clamp(120px, 15vw, 220px); }
.rn-dark .rn-wm, .rn-section--ink .rn-wm, .rn-section--ink2 .rn-wm { -webkit-text-stroke-color: rgba(255, 255, 255, 0.06); }

/* トンボ（四隅の角） */
.rn-tombo { position: relative; }
.rn-tombo::before, .rn-tombo::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--rn-tombo, #fff); border-style: solid; pointer-events: none; }
.rn-tombo::before { left: 14px; top: 14px; border-width: 1px 0 0 1px; }
.rn-tombo::after { right: 14px; bottom: 14px; border-width: 0 1px 1px 0; }

/* ボタン */
.rn-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 0 26px; font-size: 15px; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: opacity .2s; }
.rn-btn:hover { opacity: .85; }
.rn-btn--white { background: #fff; color: var(--rn-ink); }
.rn-btn--ink { background: var(--rn-ink); color: #fff; }
.rn-btn--line-dark { border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; }
.rn-btn--line-light { border: 1px solid var(--rn-ink); color: var(--rn-ink); }
.rn-arrow { width: 18px; height: 18px; flex-shrink: 0; }
.rn-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; }

/* 金の斜め（滑り層）の記号 */
.rn-mark { display: inline-block; width: 12px; height: 12px; background: var(--rn-gold); transform: skewX(-30deg); flex-shrink: 0; }

/* 罫線の表（図面の表題欄） */
.rn-spec { margin: 0; border-bottom: 1px solid var(--rn-line-light); }
.rn-spec__row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rn-line-light); }
.rn-spec__key { width: 200px; flex-shrink: 0; margin: 0; }
.rn-spec__key small { display: block; font-family: var(--rn-font-mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(17, 18, 20, 0.6); }
.rn-spec__key b { font-size: 13.5px; }
.rn-spec__val { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.9; }

/* --------------------------------------------------------------------------
   相談欄（template-parts/cta.php）
   -------------------------------------------------------------------------- */
.rn-cta { position: relative; overflow: hidden; background: var(--rn-ink); color: #fff; padding: clamp(64px, 8vw, 96px) 0; }
.rn-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.rn-cta__title { margin: 22px 0 0; font-family: var(--rn-font-head); font-weight: 900; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.45; }
.rn-cta__lead { margin: 18px 0 0; font-size: 15px; color: var(--rn-sub-dark); }
.rn-cta__contact { display: flex; flex-wrap: wrap; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.rn-cta__tel { display: flex; flex-direction: column; justify-content: center; min-width: 300px; padding: 24px 32px 24px 0; border-right: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.rn-cta__tel small { font-family: var(--rn-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--rn-gold-on-dark); }
.rn-cta__tel strong { font-family: var(--rn-font-en); font-size: clamp(34px, 3.4vw, 46px); font-weight: 500; line-height: 1.15; letter-spacing: .02em; }
.rn-cta__buttons { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 0 20px 32px; }
.rn-cta__buttons .rn-btn { width: 290px; min-height: 50px; font-size: 14.5px; }
.rn-cta__visual img { width: 100%; height: auto; display: block; }
.rn-cta__visual { --rn-tombo: var(--rn-gold); }
.rn-cta__visual figcaption { margin-top: 12px; font-family: var(--rn-font-mono); font-size: 10.5px; color: rgba(255,255,255,.6); }
.rn-cta__drum { width: 100%; max-width: 560px; height: auto; }

/* --------------------------------------------------------------------------
   全画面メニュー（header.php の .rn-menu。開閉は既存の main.js が .im-header.is-open を付ける）
   右に 60° の切り口の写真窓、切り口と平行に金の滑り層の線。項目は開くと下から順に出る
   -------------------------------------------------------------------------- */
.im-header__nav { --menu-bg: var(--rn-ink); background: var(--rn-ink); }
.im-header__nav::before, .im-header__nav::after { display: none; }
.rn-menu.im-menu { position: relative; display: block; flex: 1 1 auto; min-height: 100%; padding: 0; overflow: visible; }
.rn-menu__wm { position: absolute; left: -12px; bottom: -40px; z-index: 0; font-family: var(--rn-font-en); font-weight: 600; font-size: clamp(140px, 18vw, 280px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); pointer-events: none; user-select: none; }
.rn-menu__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 0; clip-path: polygon(86% 0, 100% 0, 100% 100%, calc(86% - 100vh * 0.57735) 100%); opacity: 0; transition: opacity .6s ease .15s; }
.rn-menu__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; filter: brightness(.55) saturate(.9); }
.rn-menu__line { position: absolute; top: 0; left: calc(86% - 30px); z-index: 0; width: 1.5px; height: 100%; background: var(--rn-gold); transform-origin: top left; transform: skewX(-30deg) scaleY(0); transition: transform 1.2s cubic-bezier(.6, 0, .2, 1) .2s; pointer-events: none; }
.im-header.is-open .rn-menu__photo { opacity: 1; }
.im-header.is-open .rn-menu__line { transform: skewX(-30deg) scaleY(1); }
/* メニューを開いている間はヘッダーの「お問い合わせ」を隠す（メニュー内の相談の欄と重複するため） */
.im-header.is-open .im-header__actions { visibility: hidden; }
.rn-menu a:focus-visible { outline: 1px solid var(--rn-gold-on-dark); outline-offset: 2px; }

.rn-menu__panel.im-menu__panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 100%; max-width: calc(var(--rn-max) + var(--rn-pad) * 2); margin: 0 auto; padding: 128px var(--rn-pad) 48px; box-sizing: border-box; }
.rn-menu__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 44px 72px; max-width: 680px; }
.rn-menu__group { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.12s + var(--g) * .07s); }
.im-header.is-open .rn-menu__group { opacity: 1; transform: none; }
.rn-menu__label { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--rn-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--rn-gold-on-dark); }
.rn-menu__label i { width: 36px; height: 1px; background: currentColor; }
.rn-menu__group-title { margin: 10px 0 0; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, 0.55); }
.rn-menu__list { margin: 10px 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.rn-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--rn-font-head); font-weight: 900; font-size: 19px; line-height: 1.4; color: #fff; text-decoration: none; transition: color .2s, padding .25s; }
.rn-menu__link .rn-arrow { width: 16px; height: 16px; color: var(--rn-gold-on-dark); opacity: .5; transition: opacity .2s, transform .25s; }
.rn-menu__link:hover { color: var(--rn-gold-on-dark); padding-left: 6px; }
.rn-menu__link:hover .rn-arrow { opacity: 1; transform: translateX(3px); }
.rn-menu__link[aria-current="page"] { color: var(--rn-gold-on-dark); }
.rn-menu__link[aria-current="page"] span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--rn-gold); transform: skewX(-30deg); vertical-align: 2px; }

.rn-menu__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; opacity: 0; transition: opacity .5s ease .45s; }
.im-header.is-open .rn-menu__foot { opacity: 1; }
.rn-menu__company { display: flex; gap: 32px; margin: 0; }
.rn-menu__company div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.rn-menu__company dt { font-size: 13px; font-weight: 700; color: #fff; }
.rn-menu__company dt span { display: block; font-family: var(--rn-font-mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; color: var(--rn-gold-on-dark); }
.rn-menu__company dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); }
.rn-menu__company dd small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.rn-menu__contact { display: flex; align-items: stretch; background: rgba(17, 18, 20, 0.86); border: 1px solid rgba(255, 255, 255, 0.18); }
.rn-menu__tel { display: flex; flex-direction: column; justify-content: center; padding: 18px 26px; border-right: 1px solid rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; }
.rn-menu__tel small { font-family: var(--rn-font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--rn-gold-on-dark); }
.rn-menu__tel strong { font-family: var(--rn-font-en); font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; }
.rn-menu__btns { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 20px; }
.rn-menu__btns .rn-btn { width: 240px; min-height: 46px; padding: 0 20px; font-size: 14px; }

@media (max-width: 1100px) {
  .rn-menu__photo { clip-path: polygon(90% 0, 100% 0, 100% 100%, calc(90% - 100vh * 0.57735) 100%); }
  .rn-menu__line { left: calc(90% - 30px); }
  .rn-menu__groups { max-width: 620px; gap: 36px 48px; }
}
@media (max-width: 900px) {
  .rn-menu__photo { position: relative; top: auto; bottom: auto; height: 120px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px)); margin-top: 72px; }
  .rn-menu__panel.im-menu__panel { padding: 24px var(--rn-pad) 40px; gap: 36px; }
  .rn-menu__line { display: none; }
  .rn-menu__groups { grid-template-columns: 1fr; gap: 28px; max-width: none; }
  .rn-menu__link { font-size: 17px; padding: 11px 0; }
  .rn-menu__foot { flex-direction: column; align-items: stretch; }
  .rn-menu__company { flex-direction: column; gap: 14px; }
  .rn-menu__contact { flex-direction: column; }
  .rn-menu__tel { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .rn-menu__btns .rn-btn { width: 100%; }
  .rn-menu__wm { font-size: 120px; bottom: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-menu__group, .rn-menu__foot, .rn-menu__photo, .rn-menu__line, .rn-menu__link { transition: none !important; }
}

/* --------------------------------------------------------------------------
   動き
   -------------------------------------------------------------------------- */
@keyframes rnRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rnWipe { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(-30% 0, 100% 0, 100% 100%, -30% 100%); } }
@keyframes rnSlide { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
@keyframes rnDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rnGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rnScroll { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.rn-rise { animation: rnRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.rn-fade { animation: rnFade .8s ease both; }
.rn-wipe { animation: rnWipe 1.1s cubic-bezier(.7, 0, .2, 1) both; }
.rn-slide { opacity: 0; animation: rnSlide 20s linear infinite both; }
.rn-slide:first-child { opacity: 1; }
.rn-draw { stroke-dasharray: 1; animation: rnDraw 1.6s cubic-bezier(.6, 0, .2, 1) both; }
.rn-d1 { animation-delay: .15s; } .rn-d2 { animation-delay: .3s; } .rn-d3 { animation-delay: .45s; } .rn-d4 { animation-delay: .6s; } .rn-d5 { animation-delay: .9s; }
.rn-s1 { animation-delay: 5s; } .rn-s2 { animation-delay: 10s; } .rn-s3 { animation-delay: 15s; }
.rn-scrollbar { animation: rnScroll 2.4s ease-in-out infinite; }
@supports (animation-timeline: view()) {
  .rn-sv { animation: rnRise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-rise, .rn-fade, .rn-wipe, .rn-slide, .rn-draw, .rn-scrollbar, .rn-sv { animation: none !important; }
  .rn-slide { opacity: 0; } .rn-slide:first-child { opacity: 1; }
}
@media print {
  .rn-rise, .rn-fade, .rn-wipe, .rn-slide, .rn-draw, .rn-scrollbar, .rn-sv { animation: none !important; }
  .rn-slide { opacity: 0; } .rn-slide:first-child { opacity: 1; }
}

/* --------------------------------------------------------------------------
   スマホ・タブレット
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rn-cta__grid { grid-template-columns: 1fr; gap: 32px; }
  .rn-cta__title { font-size: clamp(21px, 6vw, 30px); }
  .rn-cta__drum { display: block; max-width: 320px; margin: 0 auto; }
  .rn-cta__tel { min-width: 0; width: 100%; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .rn-cta__buttons { width: 100%; padding: 20px 0; }
  .rn-cta__buttons .rn-btn { width: 100%; }
  .rn-spec__key { width: 120px; }
}