/* ===================================
   base.css — リセット・CSS変数
=================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* カラー（Ver02概要準拠） */
  --color-bg:      #fcfcfc;
  --color-text:    #2e2e2e;
  --color-sub:     #4d4d54;
  --color-gold:    #BD9315;
  --color-border:  #e8e8e8;

  /* ワイヤーフレーム専用プレースホルダー色 */
  --wf-placeholder: #d0d0d0;
  --wf-placeholder-dark: #b0b0b0;
  --wf-placeholder-label: #a0a0a0;

  /* タイポグラフィ */
  --type-hero:   clamp(3rem, 7vw, 5rem);   /* 48〜72px ヒーロー級 */
  --type-l:      clamp(1.5rem, 3vw, 2rem);
  --type-m:      clamp(1.1rem, 2vw, 1.4rem);
  --type-s:      1rem;
  --type-xs:     0.85rem;
  --type-xxs:    0.75rem;

  /* ヒーローの行間 */
  --lh-hero: 1.05;

  /* 余白（概要書準拠） */
  --space-section: clamp(100px, 10vw, 140px);
  --space-el:      clamp(20px, 3vw, 40px);

  /* コンテナ */
  --container-max:    1400px;
  --container-narrow: 760px;

  /* ヘッダー高さ */
  --header-h: 70px;

  /* サイドガター幅 */
  --gutter-width: clamp(8px, 2vw, 32px);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* スクロールバー（Firefox） */
  scrollbar-color: #323245 #E6E6E8;
}

/* スクロールバー（Chrome / Safari） */
::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: #E6E6E8; }
::-webkit-scrollbar-thumb { background: #323245; border-radius: 3px; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: elza, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--type-s);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* サイドガター縦線 */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  z-index: 9999;
  pointer-events: none;
}
body::before { left:  var(--gutter-width); }
body::after  { right: var(--gutter-width); }

/* サイドガター装飾テキスト */
.gutter-text {
  position: fixed;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.15em;
  opacity: 1;
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  color: #303042;
  font-family: "tt-modernoir", sans-serif;
  font-weight: 300;
}
.gutter-text--left-top {
  left: calc(var(--gutter-width) / 2 - 0.4rem);
  top: 160px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.gutter-text--left {
  left: calc(var(--gutter-width) / 2 + 0.4rem);
  bottom: 40px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
.gutter-text--right {
  right: calc(var(--gutter-width) / 2 + 0.4rem);
  top: 75px;
  transform: rotate(-90deg);
  transform-origin: right top;
}
.gutter-text--right-bottom {
  right: calc(var(--gutter-width) / 2 - 0.4rem);
  bottom: 120px;
  transform: rotate(-90deg);
  transform-origin: right bottom;
}

@media (max-width: 767px) {
  .gutter-text { display: none; }
}

/* サイドガター◆マーク */
.gutter-diamond {
  position: fixed;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #303042;
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
  pointer-events: none;
  z-index: 200;
}
.gutter-diamond--left  { left:  calc(var(--gutter-width) / 2 - 3px); }
.gutter-diamond--right { right: calc(var(--gutter-width) / 2 - 3px); }

@media (max-width: 767px) {
  .gutter-diamond { display: none; }
}

/* 英語・英数字：Elza */
.text-en {
  font-family: "elza", sans-serif;
}

/* 日本語文章：ゴシックMB101 */
.text-ja {
  font-family: "gothic-mb101", sans-serif;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}