/* ============================================================
   base.css  ＝ サイト全体の「土台」
   ・色・余白・速さなどの数値（変数）をここに集めています
   ・ブラウザ標準の見た目のリセット、フォント、動きを減らす設定
   数値を変えたいときは、まずこのファイルの :root を探してください。
   ============================================================ */

:root {
  /* ---------- 色 ---------- */
  --color-red: #A31621;                 /* ボタン・数字・アイコン・強調線 */
  --color-gold: #8A6D3B;                /* 英語見出し・タグ・KVサムネの枠 */
  --color-gold-15: rgba(138, 109, 59, .15); /* 選ばれる理由の大番号 */
  --color-beige: #F1EFEB;               /* 特長・アクセスの背景 */
  --color-light-beige: #F5F5F3;         /* 利用シーン・流れ・お問い合わせの背景 */
  --color-text: #111111;                /* 本文 */
  --color-white: #FFFFFF;
  --color-footer: #3F3F3F;              /* フッター背景 */
  --color-footer-line: #9C9C9C;         /* フッターの区切り線 */
  --color-text-sub: #666666;            /* 薄い文字（暫定） */
  --color-line: #D0D0D0;                /* 区切り線・枠線（暫定） */
  --color-faq-q: #333333;               /* FAQのQ丸（暫定） */
  --color-faq-plus: #E8E8E8;            /* FAQの＋丸（暫定） */
  --color-faq-line: #F3F2F2;            /* FAQの質問と回答の間の線・行の線（貸会議室ネット実測） */
  --color-link: #116da2;                /* FAQ回答内リンクの青（貸会議室ネット実測） */

  /* ---------- フォント ---------- */
  --font-ja: "Yu Gothic", "YuGothic", "游ゴシック体", "Meiryo", sans-serif;
  --font-en: "Roboto", var(--font-ja);

  /* ---------- 幅・余白 ---------- */
  --content-width: 1280px;              /* PCの中身の最大幅 */
  --page-gutter-pc: 80px;               /* 左右の余白（PC 1440px時） */
  --page-gutter-tab: 40px;              /* 左右の余白（タブレット） */
  --page-gutter-sp: 20px;               /* 左右の余白（スマホ） */
  --section-space-lg: 80px;             /* セクション上下（PC） */
  --section-space-md: 64px;             /* セクション上下（タブレット） */
  --section-space-sm: 48px;             /* セクション上下（スマホ） */

  /* ---------- 切り替え幅（メモ。CSSの中では数値を直接書いています） ----------
     960px : PCとスマホの大きな切り替え（これ未満でヘッダーがメニューボタンになる）
     768px : タブレットとスマホの境目
     480px : 狭いスマホの微調整 */

  /* ---------- 角丸 ---------- */
  --radius-card: 8px;                   /* カード・写真 */
  --radius-cta: 4px;                    /* ボタン全般 */
  --radius-icon: 6px;                   /* 赤い角丸四角アイコン */
  --radius-round: 50%;                  /* 丸いもの */
  --radius-panel-lg: 16px;              /* 大きい白カード */

  /* ---------- 高さ ---------- */
  --header-height-pc: 90px;             /* ヘッダーの高さ（PC） */
  --header-height-sp: 64px;             /* ヘッダーの高さ（スマホ・タブレット。設計書に指定なしのため暫定） */
  --hero-height-pc: 700px;              /* KVの高さ（PC） */

  /* ---------- 動きの速さ ---------- */
  --motion-fast: .2s;                   /* 色の変化 */
  --motion-button: .4s;                 /* ボタンの塗り替わり */
  --motion-fade: 1s;                    /* KVのフェード */
  --motion-interval: 5s;                /* KVの自動切替の間隔（実際の値は hero-slider.js が index.html の data-interval から読みます） */
  --ease-standard: ease-out;
  --ease-comore: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ---------- リセット（ブラウザごとの見た目の差をならす） ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;              /* アンカーリンクでなめらかに移動 */
}

body {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                   /* 万一の横はみ出しで横スクロールが出ないように */
  /* 日本語の折り返しを「文節（イベント／ホール）」の区切りにする。
     新しいChrome・Edgeで効く。未対応のブラウザでは従来どおりの折り返し（表示は崩れない）。
     クライアントから折り返しの指摘が来たら、該当の見出しだけ手で区切りを付ける（設計書§4メモ） */
  word-break: auto-phrase;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

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

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

/* ---------- キーボード操作時の枠（赤い背景の上でも写真の上でも見えるように白＋黒の二重） ---------- */
:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-text);
}

/* ---------- 画面には出さず、読み上げソフトだけに伝える文字 ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 「動きを減らす」設定の人には、動き・自動再生をやめる ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}