/* ドロワー（共通ハンバーガーメニュー）＋退場幕＋sg-scrollfx のCSS。
   旧: parts/sg-menu.php のインライン<style>（2026-07-30に外部化）。
   読み込み順は mlx.css より後（init.php）。 */

/* iOS Safari の自動文字拡大を無効化（2026-08-07・オーナー報告「実機で横幅
   いっぱいにならず改行される」）。sgページは style.css を読まないため本指定が
   どこにも無く、実機のみ長文テキストが勝手に拡大→早く折り返していた。
   全ページ共通で読み込まれる本ファイルに置く（style.css 側の同指定と重複可） */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* =============================================================
   sg-menu: 変数（renewal.css / margin.css から使用分のみ・値そのまま）
   ページ側の :root 変数（--serif-en / --paper-on-dark 等）とは名前が
   衝突しないため安全。
   ============================================================= */
:root {
  --f-ease: cubic-bezier(0.16, 0.84, 0.22, 1);
  --f-paper: #faf8f4;
  --f-ink: #1f1d1a;
  --f-white: #f4f1ec;
  --f-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --en-font: "Cormorant Garamond", "Times New Roman", serif;

  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ink: #1f1d1a;
  --m-paper: #faf8f4;
  --m-accent: #55504a;
  --m-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --m-latin: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif;
}

/* =============================================================
   基層（renewal.css より）
   ============================================================= */
.m-header {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 3vw, 54px);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 1.3s var(--f-ease) 0.55s,
    transform 1.3s var(--f-ease) 0.55s;
}

/* このドロワーを全ページの唯一のグローバルメニューにする。
   旧テンプレートの p-* ナビが残るページでも、別のリンク構成が重なって
   表示されないよう、この共通パーツ側で確実に無効化する。 */
body .p-header,
body .p-hamburger,
body .p-navbar,
body .js-navbar {
  display: none !important;
}
.is-ready .m-header {
  opacity: 1;
  transform: none;
}
.m-logo {
  width: clamp(150px, 15vw, 210px);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.28));
}
.m-menu {
  width: 72px;
  height: 58px;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.m-menu span.m-menu__line {
  position: absolute;
  right: 0;
  width: 72px;
  height: 1px;
  background: rgba(255, 250, 241, 0.86);
  transform-origin: center; /* 開閉で origin を変えない（右端ピボットだと閉じ時に線が振れて「カクッ」となる）。開状態(下部)も center */
  transition: transform 0.8s var(--f-ease), opacity 0.8s ease;
}
.m-menu span.m-menu__line--top {
  top: 8px;
}
.m-menu span.m-menu__line--bottom {
  top: 22px;
}
.m-menu__label {
  position: absolute;
  left: 0;
  top: 38px;
  width: 100%;
  margin: 0;
  color: rgba(255, 250, 241, 0.86);
  font-family: var(--m-latin);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  white-space: nowrap;
  transition: color 0.7s var(--m-ease), opacity 0.35s ease;
}
.m-menu__label-word {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-style: normal;
}
.m-menu__label-word b {
  font-weight: 400;
  line-height: 1;
}
.m-menu__label-word--close {
  display: none;
}
.m-menu:hover span.m-menu__line--top {
  transform: translateX(-7px);
}
.m-menu:hover span.m-menu__line--bottom {
  transform: translateX(7px);
}

.m-nav {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(360px, 34vw) minmax(300px, 24vw) minmax(
      330px,
      28vw
    );
  align-items: center;
  justify-content: center;
  gap: clamp(52px, 5vw, 96px);
  padding: 8vh clamp(44px, 5vw, 86px);
  background: var(--m-paper);
  color: var(--f-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s var(--f-ease), visibility 0.75s;
}
.m-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.m-nav__ambient {
  /* 画面に固定して全面を覆う（オーナー指示 2026-07-30）。
     旧 absolute では、スクロール領域(.m-nav は overflow-y:auto)の
     「表示高さ」ぶんしか覆えず、中身が画面より高いスマホでは
     下までスクロールすると動画が切れて地色が出ていた。
     .m-nav 自体が position:fixed で transform も持たないため、
     fixed にすればスクロールしても常に画面全体を覆う */
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.52;
  filter: grayscale(1) brightness(1.12) contrast(0.82);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.nav-photo,
.nav-contents,
.nav-info {
  position: relative;
  z-index: 1;
}
.nav-close {
  position: absolute;
  z-index: 3;
  right: 4.2vw;
  top: 46px;
  width: 74px;
  height: 74px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-close span {
  position: absolute;
  left: 9px;
  top: 36px;
  width: 58px;
  height: 1px;
  background: #252724;
  transform-origin: center;
}
.nav-close span:first-child {
  transform: rotate(24deg);
}
.nav-close span:last-child {
  transform: rotate(-24deg);
}
.nav-photo {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/5.55;
  align-self: center;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--f-ease), transform 0.95s var(--f-ease);
}
.m-nav.is-open .nav-photo {
  opacity: 1;
  transform: none;
}
/* ホバーで下層KVをクロスフェード表示する層（base画像の上・グラデ/文字の下）。
   2枚を交互に前面化＋微ズームで「ふわっと」切り替える */
.nav-photo__kv {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) brightness(0.88);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--m-ease, cubic-bezier(0.165, 0.84, 0.44, 1)),
    transform 1.5s var(--m-ease, cubic-bezier(0.165, 0.84, 0.44, 1));
  pointer-events: none;
}
.nav-photo__kv.is-front {
  opacity: 1;
  transform: scale(1);
}
.nav-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18),
      rgba(0, 0, 0, 0.06) 44%,
      rgba(0, 0, 0, 0.16)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
}
.nav-photo img,
.m-nav .nav-photo img {
  height: 100%;
  object-fit: cover;
  /* Philosophy01（横位置写真）: 建物（玄関まわり）と夕焼け空が両方入る
     位置に固定（オーナー指示 2026-07-29）。縦長の額には元写真の約半分の
     幅しか入らないため、60%=玄関ポーチ〜夕景の範囲を切り取る */
  object-position: 60% center;
  filter: saturate(0.8) brightness(0.88);
}
.nav-photo p {
  position: absolute;
  z-index: 3;
  left: 44px;
  right: 44px;
  bottom: 48px;
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.75;
  letter-spacing: 0.12em;
}
.nav-photo p span {
  display: inline-block;
}
/* ホバー項目に連動して写真上の文字を差し替え、ふわっと結像（JSがテキストと再生クラスを付与） */
@keyframes m-nav-cap-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.nav-photo p span.is-cap-swap {
  animation: m-nav-cap-in 0.6s var(--m-ease, cubic-bezier(0.165, 0.84, 0.44, 1))
    both;
}
.nav-contents {
  justify-self: center;
  width: 100%;
  max-width: 360px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--f-ease) 0.08s,
    transform 0.95s var(--f-ease) 0.08s;
}
.m-nav.is-open .nav-contents {
  opacity: 1;
  transform: none;
}
.nav-contents > p,
.nav-address span {
  margin: 0 0 42px;
  font-family: var(--en-font);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: #8b8376;
}
/* レイアウトA（オーナー選定 2026-07-21）: 主要7項目を1カラムの大リストで縦に並べ、
   サブ項目（SERVICEのサービス群 / INFORMATIONのカテゴリー）は各行の右横に小さく添える。
   視線が上から下へ一直線になる行構造 */
.nav-contents > div {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.8vh, 44px);
}
.nav-content-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 12px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s var(--f-ease), transform 0.72s var(--f-ease);
}
.nav-content-item > a {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  color: #252724;
  text-align: left;
  font-family: var(--en-font);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.45s ease;
}
/* 主ラベル: ホバーで下線が左から引かれる（右スライドは廃止・オーナー指示 2026-07-21） */
.nav-content-item > a .nav-lbl {
  position: relative;
  display: inline-block;
  /* 旧デザイン層が残るページ（philosophy/news/zeh/固定ページ等）では
     renewal.css の `.nav-content-item > a span`（11px・#8b8376・明朝・
     margin-top:8px）が主ラベルにも当たり「文字だけ小さいドロワー」になる
     （2026-07-27 オーナー報告）。親<a>のタイポ継承を明示して全ページ同一に */
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.nav-content-item > a .nav-lbl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--m-ease, cubic-bezier(0.165, 0.84, 0.44, 1));
}
.nav-content-item > a:hover .nav-lbl::after {
  transform: scaleX(1);
}
/* 和文サブは大ラベルの右横に小さく（:not(.nav-lbl)で主ラベルを除外） */
.nav-content-item > a span:not(.nav-lbl) {
  display: inline;
  margin: 0;
  font-family: var(--f-serif);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: #4b4740; /* 薄すぎ(#8b8376)を濃く（オーナー指示 2026-07-21） */
}
/* サブリストは行の右側に横流し（ベースライン揃え・折返し可） */
.nav-content-item ul {
  display: flex;
  font-family: inherit;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-content-item li a {
  display: inline-block;
  color: #3a3731; /* 薄すぎ(#6b6358)を濃く */
  /* 親ラベルと同じ英字書体を当てる（オーナー指示 2026-08-02）。
     指定が無く和文明朝(Zen Old Mincho)の欧文グリフで描かれていたため、
     Dialo / Renovation ／ Reform だけ親と別書体に見えていた。
     和文（不動産・一般建築）は --en-font のフォールバックで
     従来どおり Zen Old Mincho が当たる */
  font-family: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", serif;
  font-size: 16px; /* 14px→16px（オーナー指示 2026-08-02: 子リンクが小さい） */
  line-height: 1.7;
  letter-spacing: 0.12em;
  white-space: normal;
  text-decoration: none;
  position: relative;
  transition: color 0.45s ease;
}
.nav-content-item li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--m-ease, cubic-bezier(0.165, 0.84, 0.44, 1));
}
.nav-content-item li a:hover::after {
  transform: scaleX(1);
}
/* ホバー: モノクロの色変化のみ（下線は上の::afterが担当・右スライドは廃止） */
.nav-content-item > a:hover {
  color: #000;
}
.nav-content-item li a:hover {
  color: #1a1a1a;
}
.m-nav.is-open .nav-content-item {
  opacity: 1;
  transform: none;
}
.m-nav.is-open .nav-content-item:nth-child(1) {
  transition-delay: 0.16s;
}
.m-nav.is-open .nav-content-item:nth-child(2) {
  transition-delay: 0.2s;
}
.m-nav.is-open .nav-content-item:nth-child(3) {
  transition-delay: 0.24s;
}
.m-nav.is-open .nav-content-item:nth-child(4) {
  transition-delay: 0.28s;
}
.m-nav.is-open .nav-content-item:nth-child(5) {
  transition-delay: 0.32s;
}
.m-nav.is-open .nav-content-item:nth-child(6) {
  transition-delay: 0.36s;
}
.m-nav.is-open .nav-content-item:nth-child(7) {
  transition-delay: 0.4s;
}
.nav-info {
  justify-self: center;
  width: min(360px, 100%);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--f-ease) 0.16s,
    transform 0.95s var(--f-ease) 0.16s;
}
.m-nav.is-open .nav-info {
  opacity: 1;
  transform: none;
}
.nav-info > img {
  width: 210px;
  margin-bottom: 34px;
}
.nav-tagline {
  margin: 0 0 58px;
  color: #5a4539;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.08em;
}
.nav-address p {
  margin: 0 0 28px;
  color: #4b4942;
  font-size: 14px;
  line-height: 2;
}
.nav-actions {
  display: grid;
  gap: 14px;
  margin: 34px 0 42px;
}
.nav-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  background: #2a211e;
  color: var(--f-white);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.nav-info small {
  color: #aaa293;
  font-size: 13px;
}

@media (max-width: 900px) {
  .m-header {
    height: 92px;
  }
  .m-logo {
    width: 150px;
  }
  .m-menu,
  .m-menu span.m-menu__line {
    width: 58px;
  }
  .m-menu__label {
    font-size: 10px;
  }
  .m-nav {
    display: block;
    overflow: auto;
    padding: 96px 24px 54px;
  }
  .nav-close {
    right: 22px;
    top: 22px;
    width: 56px;
    height: 56px;
  }
  .nav-close span {
    left: 8px;
    top: 28px;
    width: 42px;
  }
  .nav-photo {
    width: min(330px, 78vw);
    aspect-ratio: 4/5;
    margin: 0 auto 54px;
  }
  .nav-photo p {
    left: 28px;
    right: 28px;
    bottom: 32px;
    font-size: 22px;
  }
  .nav-contents {
    width: min(430px, 100%);
    margin: 0 auto 54px;
  }
  .nav-contents > p,
  .nav-address span {
    margin-bottom: 28px;
  }
  .nav-contents > div {
    gap: 28px;
  }
  .nav-info {
    width: min(520px, 100%);
    margin: 0 auto;
    padding-top: 48px;
    border-top: 1px solid rgba(29, 32, 31, 0.12);
  }
  .nav-info > img {
    width: 180px;
  }
}
@media (max-width: 560px) {
  .m-nav {
    padding: 86px 22px 46px;
  }
  .nav-photo {
    width: 100%;
    max-width: 330px;
    margin-bottom: 44px;
  }
  .nav-photo p {
    left: 24px;
    right: 24px;
    bottom: 26px;
    font-size: 20px;
    line-height: 1.7;
  }
  /* ---- スマホの「押せる場所」を確保する（オーナー指示 2026-07-30）----
     旧: 主リンクは文字幅ぶん・高さ34pxしか押せず、子リンクは24px高（Dialoは36x24px）
     だった。主リンクは全幅58px・子リンクは全幅46pxの行にして指で押せる面を確保する
     （Appleの推奨タップ領域44ptを満たす）。
     区切り罫線は当初入れたがオーナー指示で撤去（2026-07-30）。
     線の代わりに項目間の余白と行の高さで塊を分ける */
  .nav-contents > div {
    gap: 10px;
  }
  .nav-content-item {
    display: block;
  }
  .nav-content-item > a {
    display: flex;
    align-items: baseline;
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 14px 2px;
    font-size: 24px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  /* 子リンクは親の下に全幅の行として積む（字下げで親への従属を示す） */
  .nav-content-item ul {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding-left: 14px;
  }
  .nav-content-item li a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
  }
  .nav-actions a {
    min-height: 58px;
  }
}

/* =============================================================
   意匠上書き層（margin.css より・値そのまま）
   ============================================================= */
/* メニューは m-page-veil(9400) より下・ヘッダーより下。ページ内容より上。 */
.m-nav {
  z-index: 8500;
  transition: opacity 0.45s ease, visibility 0.45s;
}
/* ヘッダーはメニューより上・スクロール追従の固定表示 */
.m-header {
  position: fixed;
  z-index: 8600;
  /* 大画面: ページ側のガター拡張と同じ式で、ロゴ/ハンバーガーを中央1472px枠に整列 */
  padding: 0 max(clamp(24px, 3vw, 54px), calc((100vw - 1472px) / 2));
}
/* 閉じる操作はハンバーガー（X変形）に一本化するため nav-close は隠す */
.m-nav .nav-close {
  display: none;
}
.m-menu span.m-menu__line {
  transition: transform 0.7s var(--m-ease), background-color 0.7s var(--m-ease);
}
.m-menu[aria-expanded="false"]:hover span.m-menu__line--top {
  transform: translateX(-9px);
}
.m-menu[aria-expanded="false"]:hover span.m-menu__line--bottom {
  transform: translateX(9px);
}
.m-menu[aria-expanded="true"] span.m-menu__line {
  top: 15px;
  background: var(--m-ink);
  transform-origin: center;
}
.m-menu[aria-expanded="true"] span.m-menu__line--top,
.m-menu[aria-expanded="true"]:hover span.m-menu__line--top {
  transform: rotate(24deg);
}
.m-menu[aria-expanded="true"] span.m-menu__line--bottom,
.m-menu[aria-expanded="true"]:hover span.m-menu__line--bottom {
  transform: rotate(-24deg);
}
.m-menu[aria-expanded="true"] .m-menu__label {
  font-size: 10px;
}
.m-menu[aria-expanded="true"] .m-menu__label-word--menu {
  display: none;
}
.m-menu[aria-expanded="true"] .m-menu__label-word--close {
  display: flex;
}
/* メニュー内コンテンツの立ち上がり（初期＋段差ディレイ） */
.m-nav .nav-content-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--m-ease), transform 0.7s var(--m-ease);
}
.m-nav .nav-photo,
.m-nav .nav-info {
  transition: opacity 0.9s var(--m-ease), transform 0.9s var(--m-ease);
}
.m-nav .nav-contents {
  transition: opacity 0.6s ease, transform 0.7s var(--m-ease);
}
.m-nav.is-open .nav-contents {
  transition-delay: 0.2s;
}
.m-nav.is-open .nav-photo {
  transition-delay: 0.3s;
}
.m-nav.is-open .nav-info {
  transition-delay: 0.85s;
}
.m-nav.is-open .nav-content-item:nth-child(1) {
  transition-delay: 0.45s;
}
.m-nav.is-open .nav-content-item:nth-child(2) {
  transition-delay: 0.53s;
}
.m-nav.is-open .nav-content-item:nth-child(3) {
  transition-delay: 0.61s;
}
.m-nav.is-open .nav-content-item:nth-child(4) {
  transition-delay: 0.69s;
}
.m-nav.is-open .nav-content-item:nth-child(5) {
  transition-delay: 0.77s;
}
.m-nav.is-open .nav-content-item:nth-child(6) {
  transition-delay: 0.85s;
}
.m-nav.is-open .nav-content-item:nth-child(7) {
  transition-delay: 0.93s;
}
/* ロゴ構造（白/墨2枚重ねの opacity クロスフェード） */
.m-logo {
  position: relative;
}
.m-logo img {
  display: block;
  width: 100%;
  transition: opacity 0.7s var(--m-ease);
}
.m-logo .m-logo__dark {
  position: absolute;
  inset: 0;
}
/* フルスクリーンナビ：和紙白・明朝 */
.m-nav {
  background: var(--m-paper);
}
.m-nav .nav-contents p,
.m-nav .nav-photo p span {
  font-family: var(--m-mincho);
  letter-spacing: 0.14em;
}
.m-nav .nav-content-item > a {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  color: var(--m-ink);
}
.m-nav .nav-info p,
.m-nav .nav-address {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  color: #3a3731; /* var(--m-accent)=#55504a は薄いため濃く（オーナー指示 2026-07-21） */
}
/* ドロワーの子リンク（Dialo / Renovation ／ Reform など）は親ラベルと同じ
   英字書体を当てる（オーナー指示 2026-08-02）。旧: 上のグループに含めて
   var(--m-mincho) を当てていたため、英字が和文明朝の欧文グリフで描かれ
   親の Cormorant Garamond と別書体に見えていた。
   和文の子（不動産・一般建築）はフォールバックで従来どおり Zen Old Mincho */
.m-nav .nav-content-item ul a {
  font-family: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", serif;
  letter-spacing: 0.06em;
  color: #3a3731;
}
.m-nav .nav-info small {
  font-family: var(--m-latin);
  letter-spacing: 0.24em;
  color: var(--m-accent);
}
/* 会社情報の和文・電話番号は住所と同じ明朝体に統一する。 */
.m-nav .nav-actions a {
  font-family: var(--m-mincho);
  font-weight: 400;
}

/* =============================================================
   新デザイン（sg）向け最小上書き
   旧CSSのロゴ明暗切替は body.l-home / is-header-solid（dequeue 済みの
   margin.js が付与）に依存していた。新ページではその JS が無いため、
   ・既定＝白(光)ロゴ・白ハンバーガー（ヒーローが暗いため）で固定
   ・スクロールでヒーローを抜けたら墨へ（本パーツの script が .m-header に
     is-solid を付与）
   ・メニュー展開中は紙地になるため墨ロゴ
   ============================================================= */
.m-header .m-logo .m-logo__light {
  opacity: 1;
}
.m-header .m-logo .m-logo__dark {
  opacity: 0;
}
.m-header.is-solid .m-logo .m-logo__light,
body:has(.m-nav.is-open) .m-logo .m-logo__light {
  opacity: 0;
}
.m-header.is-solid .m-logo .m-logo__dark,
body:has(.m-nav.is-open) .m-logo .m-logo__dark {
  opacity: 1;
}
.m-header.is-solid .m-menu span.m-menu__line {
  background: var(--m-ink);
}
.m-header.is-solid .m-menu__label,
body:has(.m-nav.is-open) .m-menu__label {
  color: var(--m-ink);
}
/* 通常テンプレートの下層ページも線と同じ墨色で MENU を読めるようにする。 */
body:not(.l-home) .m-menu__label {
  color: var(--m-ink);
}

/* --- 明るいKV（sg-pagehead）ページ: ヘッダーを最初から墨色に ---
   下層の明るい編集的KVでは白ロゴ/白ハンバーガーが背景に埋もれるため、
   body.sg-lighthead のとき resting から墨ロゴ・墨ハンバーガーで固定する
   （メニュー展開中も紙地なので墨のまま一貫）。 */
body.sg-lighthead .m-header .m-logo__light {
  opacity: 0;
}
body.sg-lighthead .m-header .m-logo__dark {
  opacity: 1;
}
body.sg-lighthead .m-header .m-menu span.m-menu__line {
  background: var(--m-ink);
}
body.sg-lighthead .m-header .m-menu__label {
  color: var(--m-ink);
}

/* MENU の文字色は常に二本線と同じ色を使う。背景の明暗で片方だけが
   読めなくならないよう、親ボタンの currentColor を共通の基準にする。 */
.m-menu {
  color: rgba(255, 250, 241, 0.86);
}
.m-menu span.m-menu__line {
  background: currentColor;
}
.m-menu__label {
  color: inherit;
}
.m-header.is-solid .m-menu,
body:has(.m-nav.is-open) .m-menu,
body:not(.l-home) .m-menu,
body.sg-lighthead .m-menu {
  color: var(--m-ink);
}

/* --- 最上部固定＆開いた中身の天揃え（オーナー指示: ハンバーガーが埋もれる対策） ---
   入場アニメ(is-ready)が未付与のとき header が opacity:0/translateY(-14px) のまま
   不可視になり「埋もれる」ため、resting 状態を常時可視・最上部固定に固定する。
   ドロワーは縦中央→天揃えにし、開いた直後から中身が最上部に見えるようにする
   （ヘッダー高ぶんの余白を確保し、内容が長ければドロワー内でスクロール）。 */
.m-header {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s,
    transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s;
  top: 0;
}
/* メニュー開閉の「カクッ」対策: overflow:hidden でスクロールバーが消えると
   本文幅が広がり右端固定のボタンがバー幅ぶん動くため、ガターを常時確保して
   レイアウト幅を不変にする（オーバーレイスクロールバー環境では元々幅0で無影響） */
html {
  scrollbar-gutter: stable;
}
/* 横ドリフト対策: 中間幅で fixed のドロワー等が横あふれを作ると、ブラウザに
   よってはページが横スクロール可能になり「コンテンツが左に切れて見える」
   崩れが出る（fixed ヘッダーだけ正位置に残る）。ページの横スクロールを
   根本から禁止する（clip はスクロールコンテナ化しないので sticky も壊さない） */
html,
body {
  overflow-x: clip;
}
/* 閉状態ドロワーのグリッド最小内容幅（約1180px）が中間幅でページ外へ
   あふれないよう、あふれはドロワー内で閉じる（開時の縦スクロールは維持） */
.m-nav {
  overflow-x: hidden;
}
/* 中間幅では3カラムの最小幅(360/300/330px)が収まらないため、縮小可能にして
   開いたドロワーが欠けないようにする（901px未満は既存の block レイアウト） */
@media (min-width: 901px) and (max-width: 1220px) {
  .m-nav {
    grid-template-columns: minmax(0, 34vw) minmax(0, 24vw) minmax(0, 30vw);
    gap: clamp(28px, 3.5vw, 52px);
  }
}
.m-nav {
  align-items: start;
  align-content: start;
  padding-top: 132px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .m-nav {
    padding-top: 104px;
  }

  /* スマホはトップページと同じリンク主体のメニューに統一する。
     写真を外し、ヘッダー直下からナビゲーションを表示する。 */
  body .m-nav .nav-photo {
    display: none;
  }
}

/* =============================================================
   表示アニメのカクつき対策（全ページ共通の後勝ち上書き。
   下層の全幅写真帯＋大見出し（sp-statement 等）で顕著だったもの）
   1) 字間セトル m-ls-in は letter-spacing を毎フレーム変えるため
      テキスト全体の再レイアウトが走りカクつく → 廃止し blur結像のみに
      （セレクタ・時間は各テンプレート定義と同一。本パーツはbody内に
       出力されるため後勝ちで上書きされる）
   2) 静的フィルタ付きの全幅写真レイヤーを合成レイヤーへ昇格し、
      前面テキストのアニメ中に写真の再ペイント/再フィルタを避ける
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.m-on .m-group.is-visible .m-reveal-h {
    animation: m-blur-in 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
    animation-delay: var(--d, 0s);
  }
}
.sp-statement .st-bg,
.pg-close-bg,
.credo-bg,
.pg-hero-bg .ph-img {
  transform: translateZ(0);
  will-change: transform;
}
/* =============================================================
   超ワイド画面対策（全ページ共通）
   画像列を画面端までブリードさせる編集グリッド（sp-row / split 系）は
   上限幅が無いと大画面で内容が端へ流れ、中心から大きくずれて見える。
   一定幅で止めて中央寄せにする（通常幅では従来どおり端までブリード。
   全幅の写真帯・ヒーロー・KVは左右対称のため対象外＝フル幅のまま）。
   ============================================================= */
.sp-row,
.sp-row.rev,
.split,
.split-float {
  max-width: 1680px;
  margin-inline: auto;
}

/* =============================================================
   スクロール連動アニメーション（sg-scrollfx・全ページ共通）
   方針: 「静けさ」を壊さない微視差のみ。transform/translate 系だけで
   完結させ再レイアウトを起こさない（reduced-motion では全て無効）。
   A) リビール画像の内層が縦にゆっくり流れる（窓越しの視差）
   B) 下層KVの大字英字がスクロールで静かに横ドリフト
   C) works一覧: 右カラムが左よりわずかに遅れて流れる（奥行き）
   駆動は本パーツ末尾の sg-scrollfx スクリプト。
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* 写真の内層を上下 16% ブリードさせ、スクロールで ±13%（高さ比例・
     sg-scrollfx が算出）動かす。sola-resort 参照の「140% 内包」相当の深さ */
  html.m-on [data-sgplx].m-reveal-img::before {
    top: -16%;
    bottom: -16%;
    translate: 0 var(--py, 0);
  }
  .pg-hero-bg .ph-img,
  .sp-statement .st-bg {
    top: -13%;
    bottom: -13%;
    translate: 0 var(--py, 0);
  }
  .wk-grid .wk-col.r {
    will-change: translate;
  }
}

/* 画像リビール前に「白い枠」が見えるのを防ぐ（全ページ共通）:
   リビール待ちのボックスは中身が透明（白地が透ける）のにドロップシャドウ
   だけ描画され、影付きの白いカードに見える。結像が終わるまで影を消し、
   完了後（遅延 --d + ワイプ1.4s を見込んで1.8s後）にフェードで戻す。 */
@media (prefers-reduced-motion: no-preference) {
  html.m-on .m-reveal-img {
    transition: box-shadow 0.9s ease 1.8s;
  }
  html.m-on .m-group:not(.is-visible) .m-reveal-img {
    box-shadow: none;
  }
}
/* スマホは影を全廃（オーナー指摘 2026-07-19: 画像の読込が遅い実機では
   リビール後も画像到着まで「影付きの空箱＝枠」が見えるため。
   スマホでは影の視覚寄与も小さい） */
@media (max-width: 900px) {
  .ph,
  .m-reveal-img,
  .kv-sat {
    box-shadow: none !important;
  }
}

/* ゴーストボタンの反転挙動を全sgページで統一。
   濃色背景上では白い面が立ち上がり、文字と矢印は墨色へ切り替わる。 */
:is(.sg-pill, .works-btn, .svc-more, .contact-btn) {
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.sg-pill, .works-btn, .svc-more):hover {
    background: #fff !important;
    color: #242220 !important;
    border-color: #fff !important;
    opacity: 1 !important;
  }
  .contact-btn:hover {
    background: #242220 !important;
    color: #fff !important;
    border-color: #242220 !important;
    opacity: 1 !important;
  }
}
:is(.sg-pill, .works-btn, .svc-more):focus-visible {
  background: #fff !important;
  color: #242220 !important;
  border-color: #fff !important;
  opacity: 1 !important;
  outline: 2px solid rgba(168, 152, 120, 0.9);
  outline-offset: 3px;
}
.contact-btn:focus-visible {
  background: #242220 !important;
  color: #fff !important;
  border-color: #242220 !important;
  opacity: 1 !important;
  outline: 2px solid rgba(168, 152, 120, 0.9);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .m-header {
    opacity: 1 !important;
    transform: none !important;
  }
  .m-nav .nav-content-item,
  .m-nav .nav-photo,
  .m-nav .nav-info {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 退場幕（.m-exit-veil）— margin-motion.css の等価移植。
   sgページは margin-motion.css/js を読まないため、ドロワー内リンクの
   遷移時にここで白幕（右下から全面を覆う135度ソフトエッジ）を出す。
   z-index 9600 > ドロワー 8500 / ヘッダー 8600 のため開いたままの
   ドロワーごと幕が覆う。 */
.m-exit-veil {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
  background: #fff;
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 220% 220%;
  mask-size: 220% 220%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}
.m-exit-veil.is-closing {
  animation: m-exit-veil-in 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) both 1;
}
@keyframes m-exit-veil-in {
  from {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
  to {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-exit-veil {
    display: none;
  }
}

/* 入場幕（.m-page-veil）が流れている間はヘッダー（ロゴ＋ハンバーガー）を
   完全に伏せる。幕のソフトエッジは左上から透けるため、そのままだと
   左上のロゴだけが先に「ぱっ」と現れる（オーナー報告 2026-07-28）。
   トップの html.sg-loader-active .m-header と同じ仕掛けの下層版。
   幕が抜けたら m-veil-active が外れ、既存の .m-header transition で
   ふわっと入場する */
html.m-veil-active .m-header {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* --- スマホ視差（CSS scroll-driven・2026-08-07） ----------------------
   PCの sg-scrollfx（JSが--pyを書き込む）はタッチ端末では起動しないため
   （コンポジタ先行スクロールでJS駆動は原理的にカクつく）、帯背景（下層ヒーロー・STATEMENT帯）をスクロール連動アニメーションで縦に流す。
   ・wipe/settle（リビール）と drift（視差）は同じ animation プロパティに
     同居させる（別ルールに分けるとカスケードで片方が消える）
   ・drift の duration は auto 必須（省略は 0s 扱いでタイムラインに乗らない）
   ・overflow:hidden はスクロールコンテナ扱いになり view() の基準を奪うため
     対応環境では clip に切り替える（見た目同一） */
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    .pg-hero-bg .ph-img,
    .sp-statement .st-bg{
      animation:sg-mplx-drift auto linear both;
      animation-timeline:view();
    }
  }
}
/* 各ページCSSにも同名キーフレームあり（同一内容・重複定義は無害） */
@keyframes sg-mplx-drift{from{translate:0 6%;}to{translate:0 -6%;}}