/* =========================================================
   共通スタイル（全ページで使う）
   色・余白・角丸は css/variables.css の変数を使い、直接値を書かない
   ========================================================= */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
/* hidden 属性を付けた要素は、display の指定があっても必ず隠す（行き先のないボタンを一時的に隠すときなど） */
[hidden] { display: none !important; }
a { color: var(--color-navy); text-decoration: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- ボタン ---------- */
/* 形（btn + 大きさ）と色（btn--primary など）を組み合わせて使う */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.btn--sm { gap: 12px; padding: 13px 26px; font-size: 14px; min-height: 44px; }
.btn--md { gap: 22px; padding: 12px 26px; font-size: 13px; min-height: 44px; }
.btn--lg { justify-content: space-between; gap: 22px; padding: 16px 30px; font-size: 15px; min-width: 240px; }
.btn--block { display: flex; padding: 12px; font-size: 13px; min-height: 44px; }
/* 塗り（紺・白） */
.btn--primary { background: var(--color-navy); color: #ffffff; }
.btn--white { background: #ffffff; color: var(--color-navy); }
.btn--primary:hover,
.btn--white:hover { opacity: 0.85; }
/* 線（紺・白） */
.btn--outline { background: #ffffff; color: var(--color-navy); border: 1.5px solid var(--color-navy); }
.btn--outline:hover { background: var(--color-navy); color: #ffffff; }
.btn--outline-white { color: #ffffff; border: 1.5px solid #ffffff; }
.btn--outline-white:hover { background: #ffffff; color: var(--color-navy); }
.btn__arrow { width: 16px; height: 16px; flex: none; }

/* ---------- 英字ラベル（CONTACT など） ---------- */
.section-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-label);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__logo img { height: 34px; width: auto; }
.site-nav {
  display: flex;
  gap: 36px;
  font-size: 14px;
  font-weight: 500;
}
.site-nav a:hover { color: var(--color-blue); }
/* ≡ボタン（タブレット・スマホだけ表示） */
.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}
.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s, background-color 0.2s;
}
.site-header__toggle-bar { position: relative; }
.site-header__toggle-bar::before,
.site-header__toggle-bar::after { content: ""; position: absolute; left: 0; }
.site-header__toggle-bar::before { top: -7px; }
.site-header__toggle-bar::after { top: 7px; }
/* 開いているときは × にする */
.site-header.is-open .site-header__toggle-bar { background: transparent; }
.site-header.is-open .site-header__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 下層ページの上部（お問い合わせ・プライバシーポリシーなど） ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-soft);
  padding-bottom: 64px;
}
.page-hero__deco {
  position: absolute;
  pointer-events: none;
}
.page-hero__deco--leaf { right: -40px; top: -30px; width: 230px; opacity: 0.95; }
.page-hero__deco--navy { right: -150px; top: 200px; width: 420px; transform: rotate(-70deg); opacity: 0.9; }
.page-hero__deco--blue { left: -110px; bottom: -30px; width: 330px; transform: rotate(18deg); }
.page-hero__inner { position: relative; z-index: 2; padding-top: 40px; }
.page-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
}
.page-hero__lead { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.9; }
.page-hero__script {
  position: absolute;
  right: 12%;
  bottom: 40px;
  margin: 0;
  font-family: var(--font-script);
  font-size: 34px;
  line-height: 1.15;
  color: var(--color-navy);
  opacity: 0.18;
  transform: rotate(-8deg);
  text-align: right;
}

/* ---------- フッター ---------- */
.site-footer { background: var(--color-bg); }
.site-footer__main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 36px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.site-footer__brand img { height: 34px; width: auto; }
.site-footer__nav { display: flex; gap: 32px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.site-footer__nav a:hover { color: var(--color-blue); }
.site-footer__cta { padding: 14px 30px; }
.site-footer__bottom { background: var(--color-bg-gray); }
.site-footer__bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.site-footer__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer__legal a { color: var(--color-text-sub); }
.site-footer__legal a:hover { color: var(--color-blue); }
.site-footer__copy { margin: 0; }

/* ---------- タブレット：メニューを≡ボタンで開閉する（開くとヘッダーの下に縦に並ぶ） ---------- */
@media (max-width: 1024px) {
  .site-header { flex-wrap: wrap; row-gap: 8px; }
  /* 開いている間は背景を白にし、後ろの飾りが透けないようにする */
  .site-header.is-open { background: var(--color-bg); }
  .site-nav { display: none; order: 1; flex-basis: 100%; flex-direction: column; gap: 0; }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--color-gray-light); }
  .site-header__cta { margin-left: auto; }
  .site-header__toggle { display: flex; }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .site-header { padding-block: 16px; }
  .site-header__logo img { height: 28px; }
  /* お問い合わせボタンは横に収まらないので、開いたメニューの一番下に出す */
  .site-header__cta { display: none; order: 2; width: 100%; margin-top: 8px; }
  .site-header.is-open .site-header__cta { display: inline-flex; }
  .site-header__toggle { margin-left: auto; }
  .site-footer__nav { gap: 16px 24px; }
  .page-hero { padding-bottom: 48px; }
  .page-hero__deco--navy,
  .page-hero__script { display: none; }
  .page-hero__deco--leaf { width: 150px; }
}