/* =========================================================
   KYO. — Base（リセット / 基本タイポ / 共通部品）
   ========================================================= */

/* --- Reset (minimal) ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.9;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* --- Layout helpers ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: var(--maxw-wide); }
.section { padding-block: clamp(64px, 8vw, 120px); }

/* --- サブページ共通ヒーロー（帯）------------------------- */
/* 会社概要 / お問合せ / SNS で共有。背景写真の寄せなどページ固有の調整は各ページCSSで */
.subhero {
  position: relative;
  min-height: clamp(300px, 34vw, 440px);
  margin-top: var(--header-h);
  display: grid; place-items: center; text-align: center;
  color: #fff; overflow: hidden;
}
.subhero__bg { position: absolute; inset: 0; z-index: 0; }
.subhero__bg img { width: 100%; height: 100%; object-fit: cover; }
.subhero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(38,35,30,0.34), rgba(38,35,30,0.40)); }
.subhero__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }
.subhero__label { font-family: var(--font-serif); font-size: clamp(15px, 1.7vw, 20px); letter-spacing: 0.22em; margin-bottom: 16px; }
.subhero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 4.2vw, 50px); line-height: 1.4; letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.32);
}
/* タイトル下の一文（SNSページ） */
.subhero__sub {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(22px, 3.1vw, 42px); line-height: 1.4; letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.32);
}
/* スマホ: 見本と同じ「2行」に収まる最大サイズ。30pxだと語中で折り返して3行に割れる
   （※ .subhero__sub の後に置くこと。前に置くと後勝ちで打ち消される） */
@media (max-width: 600px) {
  .subhero { min-height: clamp(260px, 66vw, 320px); }
  .subhero__title { font-size: 22px; line-height: 1.6; }
  .subhero__sub   { font-size: 18px; }   /* 見本の 50:42 の比率をスマホでも保つ */
  .subhero__label { font-size: 13px; letter-spacing: 0.18em; margin-bottom: 10px; }
}

/* --- Section label（英大文字＋―和文― 枠見出し） --------- */
.sec-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 40px;
  border: 1px solid var(--c-ink);
  background: var(--c-white);
}
.sec-label__en {
  font-family: var(--font-en);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--c-ink);
}
.sec-label__ja {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--c-ink-soft);
}
.sec-label--plain { border: none; background: none; padding: 0; }

/* --- Buttons -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 18px 40px;
  border-radius: 999px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--gold { background: var(--c-gold); color: #fff; }
.btn--gold:hover { background: var(--c-gold-dark); }
.btn--green { background: var(--c-green); color: #fff; }
.btn--green:hover { background: var(--c-green-dark); }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn__arrow { font-size: 0.9em; }

/* “View more” — 下線＋矢じり（ABOUT US など明るい背景の導線） */
.viewmore {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--c-ink);
}
.viewmore__arrow { width: 92px; height: 8px; overflow: visible; transition: transform var(--dur) var(--ease); }
.viewmore:hover .viewmore__arrow { transform: translateX(6px); }

/* “View more” — ダークピルボタン（SUMERA / RENT の導線） */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--c-charcoal);
  color: #fff;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 12px 28px;
  border-radius: 999px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-more:hover { background: #111; }
.btn-more__arrow { width: 36px; height: 8px; overflow: visible; }

/* --- Reveal on scroll ----------------------------------- */
/* JS有効時のみ隠す（オブザーバ不発時もコンテンツが消えないように） */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Utilities ------------------------------------------ */
.center { text-align: center; }
.mincho { font-family: var(--font-serif); }
.gold { color: var(--c-gold); }
.green { color: var(--c-green); }
.red { color: var(--c-red); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}