@charset "UTF-8";
/* ==========================================================================
   RIZON警備株式会社 / TOP デザインA案
   common.css : リセット・デザイントークン・共通レイアウト・共通コンポーネント
   --------------------------------------------------------------------------
   数値の根拠：デザイン画像 de_1-01.jpg（8000x4966px）を 1920x1192px 相当に
   換算した実測値。各トークン末尾のコメントが 1920px 時の設計値。
   画像からの読み取りのため、色・サイズは近似値として扱う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundation : reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

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

[hidden] { display: none; }

/* --------------------------------------------------------------------------
   2. Foundation : design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- color（デザイン画像からの近似値。確定後はここだけ差し替える） --- */
  --c-bg:       #000000;
  --c-text:     #ffffff;
  --c-text-dim: rgba(255, 255, 255, .55);
  --c-surface:  #191919;                      /* ボタン地。実測 rgb(25,25,25) */
  --c-placeholder: #380000;                   /* 写真の仮置き（えんじ色）。実測 rgb(56,0,0) */

  /* --- font --- */
  --ff-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* --- layout --- */
  --frame-x:  clamp(12px, 2.604vw, 50px);     /* 50px  ヘッダーロゴの左端（デザインのガイド位置） */
  --gutter:   clamp(20px, 3.646vw, 70px);     /* 70px  本文の左右余白 */
  --gutter-r: clamp(20px, 5.964vw, 114.5px);  /* 114.5px セクション本文エリアの右余白 */
  --rail-x:   clamp(20px, 5.104vw, 98px);     /* 98px  右レール・SCROLLの右余白 */
  --header-h: clamp(64px, 6.198vw, 119px);    /* 119px ヘッダー高さ */

  /* --- typography --- */
  --fz-ui:    clamp(13px, 1.146vw, 22px);     /* 22px  ナビ・レール・SCROLL・英文 */
  --fz-catch: clamp(30px, 6.250vw, 120px);    /* 120px キャッチコピー */
  --ls-catch: -.06em;                         /* 実測の字送り112.8px = 120px x .94 */
  --fz-heading: clamp(28px, 4.479vw, 86px);   /* 86px  各セクションの大見出し */
  --fz-body:    clamp(14px, 1.146vw, 22px);   /* 22px  セクション本文（SPで小さくなりすぎないよう最小14px） */
  --heading-mt: clamp(24px, 2.500vw, 48px);   /* 48px  英字ラベルと大見出しの間 */

  /* --- logo --- */
  --logo-w:     clamp(84px, 6.625vw, 127.2px);  /* 127.2px ヘッダーロゴ幅 */
  --logo-gap:   clamp(2px, .214vw, 4.1px);      /* 4.1px   ロゴとタグラインの間 */
  --tagline-fz: calc(var(--logo-w) * .0943);    /* ロゴ幅に追従させ常に同じ幅で収める */

  /* --- motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   3. Foundation : base
   -------------------------------------------------------------------------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-base);
  font-weight: 700;
  line-height: 1.7;
  overflow-x: hidden;
}

body.is-menu-open { overflow: hidden; }

/* 行頭の始め括弧「を半角幅に詰める（デザインの組み方に合わせる）。
   Google Fonts版の Zen Kaku Gothic New は palt が効かないため手動で詰める */
.u-kakko-open { margin-left: -.5em; }

/* PCだけで効かせる改行（SPでは自然な折り返しに任せる） */
@media (max-width: 767px) {
  .u-br-pc { display: none; }
}

/* --------------------------------------------------------------------------
   5. Layout : header
   -------------------------------------------------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;  /* メニュー展開中もCLOSEボタンを押せるようオーバーレイより前面 */
  width: 100%;
  height: var(--header-h);
  background: var(--c-bg);
}

.l-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: var(--frame-x);
  padding-right: var(--gutter);
}

.l-header__nav {
  margin-left: auto;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

/* 全画面メニューと同じ項目が重複するため、展開中は隠す */
.is-menu-open .l-header__nav {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   5.5 Layout : footer
   de_1-08.jpg を 1920px 換算で実測（高さ 502.1px）
   -------------------------------------------------------------------------- */
.l-footer {
  padding-top: var(--footer-pt);
  padding-bottom: var(--footer-pb);

  /* --- フッター固有トークン（括弧内は1920px時の設計値） --- */
  --footer-pt:      clamp(40px, 3.260vw, 62.6px);    /* 62.6px  上余白（ロゴ上端まで） */
  --footer-pb:      clamp(20px, 1.458vw, 28px);      /* 28px    下余白 */
  --footer-pr:      clamp(20px, 8.276vw, 158.9px);   /* 158.9px ナビ右端の余白 */
  --footer-logo-w:  clamp(150px, 14.865vw, 285.4px); /* 285.4px ロゴ幅 */
  --footer-nav-fz:  clamp(18px, 1.458vw, 28px);      /* 28px    ナビ文字 */
  --footer-nav-gap: clamp(20px, 1.844vw, 35.4px);    /* 35.4px  ナビ下線と次の項目の間（行送り71.5px） */
}

.l-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-left: var(--gutter);
  padding-right: var(--footer-pr);
}

/* 1. 会社情報 */
.l-footer__logo {
  width: var(--footer-logo-w);
  margin-left: clamp(0px, .641vw, 12.3px);   /* 12.3px 字面を下の社名とそろえる */
}

.l-footer__logo img {
  width: 100%;
  height: auto;
}

.l-footer__name,
.l-footer__info {
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 2;                    /* 行送り 44px / 22px */
}

.l-footer__name { margin-top: clamp(8px, .578vw, 11.1px); }

.l-footer__info-row {
  display: grid;
  grid-template-columns: 4em 1fr;    /* 項目名は4文字分（電話番号）にそろえる */
}

.l-footer__info dd::before { content: "："; }

/* 2. ナビ */
.l-footer__menu { flex: 0 0 38.19%; }  /* 645.8px（内側 1691.1px に対する比率） */

.l-footer__nav-item + .l-footer__nav-item { margin-top: var(--footer-nav-gap); }

.l-footer__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(12px, 1.406vw, 27px) clamp(4px, .37vw, 7.1px) 0;
  border-bottom: 1px solid var(--c-text);
  font-size: var(--footer-nav-fz);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity .3s var(--ease);
}

.l-footer__nav-link .c-chevron { font-size: var(--fz-ui); }   /* 矢印はボタンと同じ大きさ */

.l-footer__nav-link:hover,
.l-footer__nav-link:focus-visible { opacity: .6; }

.l-footer__nav-link:hover .c-chevron,
.l-footer__nav-link:focus-visible .c-chevron { transform: translateX(4px) rotate(45deg); }

.l-footer__privacy {
  margin-top: clamp(20px, 1.745vw, 33.5px);
  font-size: 11px;                   /* デザインは約10px。読みやすさを考え11pxにしている */
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.l-footer__privacy-link { cursor: pointer; }

.l-footer__privacy-link:hover,
.l-footer__privacy-link:focus-visible { text-decoration: underline; }

/* 3. コピーライト（ロゴの左端〜ナビの右端の中央） */
.l-footer__copy {
  margin-top: clamp(20px, 1.406vw, 27px);
  padding-left: var(--gutter);
  padding-right: var(--footer-pr);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.l-footer__copy small { font-size: inherit; }

/* 1023px以下：会社情報の下にナビを置く */
@media (max-width: 1023px) {
  .l-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(40px, 7vw, 56px);
    padding-right: var(--gutter);
  }

  .l-footer__menu { flex-basis: auto; }

  /* 指で押しやすいよう、項目の間隔をリンク自体の余白にして押せる高さを約44pxにする */
  .l-footer__nav-item + .l-footer__nav-item { margin-top: 0; }

  .l-footer__nav-link { padding-top: 16px; padding-bottom: 10px; }

  .l-footer__copy {
    margin-top: 40px;
    padding-right: var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   6. Component : ロゴロックアップ
   -------------------------------------------------------------------------- */
.c-logo__mark {
  width: var(--logo-w);
  height: auto;
}

.c-logo__tagline {
  display: block;
  margin-top: var(--logo-gap);
  font-size: var(--tagline-fz);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .072em;      /* ロゴマークと同じ幅に収まるよう調整（実測値で確定） */
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Component : グローバルナビ
   他ページ未制作のため href を持たない。クリックしても遷移しない。
   -------------------------------------------------------------------------- */
.c-gnav {
  display: flex;
  align-items: center;
  gap: var(--gutter);          /* 実測 70px */
}

.c-gnav__link {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: var(--fz-ui);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s var(--ease);
}

.c-gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.5em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease);
}

.c-gnav__link:hover::after,
.c-gnav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.c-gnav__link .c-chevron { margin-left: .38em; }

/* --------------------------------------------------------------------------
   8. Component : VIEW ALL / ハンバーガー
   ラベルと3本の罫線。罫線幅は stretch でラベル幅に自動で揃う。
   -------------------------------------------------------------------------- */
.c-menubtn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(3px, .281vw, 5.4px);             /* 5.4px  ラベルと罫線の間 */
  margin-left: clamp(16px, 2.323vw, 44.6px);  /* 44.6px ナビとの間 */
}

.c-menubtn__label {
  font-size: var(--fz-ui);
  line-height: 1;
  white-space: nowrap;
  transition: opacity .3s var(--ease);
}

.c-menubtn__bars {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, .365vw, 7px);               /* 罫線ピッチ8px - 線幅1px */
}

.c-menubtn__bars i {
  display: block;
  height: 1px;
  background: var(--c-text);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}

.c-menubtn:hover .c-menubtn__label,
.c-menubtn:focus-visible .c-menubtn__label { opacity: .6; }

/* 展開中は3本線を1本に収束させる。
   PCは罫線がラベル幅（約98px）まで伸びていてXにすると間延びするため、
   ラベルのCLOSE表示と合わせてこの形にする。SPではXに変形させる。 */
.c-menubtn[aria-expanded="true"] .c-menubtn__bars i:nth-child(1) { transform: translateY(8px); }
.c-menubtn[aria-expanded="true"] .c-menubtn__bars i:nth-child(2) { opacity: 0; }
.c-menubtn[aria-expanded="true"] .c-menubtn__bars i:nth-child(3) { transform: translateY(-8px); }

/* --------------------------------------------------------------------------
   8.5 Component : 見出し前の英字ラベル（罫線＋英字）
   TOPの各セクションで共通（WE ARE RIZON… / OUR SERVICE など）
   -------------------------------------------------------------------------- */
.c-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10px, .953vw, 18.3px);          /* 18.3px 罫線と文字の間 */
  font-size: var(--fz-ui);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin-top: -.21em;   /* 文字の上端（キャップハイト）をセクションの上余白に揃える */
}

.c-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(40px, 4.526vw, 86.9px);        /* 86.9px 罫線の長さ */
  height: 2px;                                /* 実測 2px */
  background: currentColor;
}

/* --------------------------------------------------------------------------
   8.6 Component : セクションの大見出し（ABOUT / SERVICE 共通）
   -------------------------------------------------------------------------- */
.c-heading {
  margin-top: var(--heading-mt);
  font-size: var(--fz-heading);
  font-weight: 900;
  line-height: 1.32;                 /* 行送り 113.5px / 86px */
  letter-spacing: var(--ls-catch);   /* FVのキャッチと同じ字詰め */
}

/* --------------------------------------------------------------------------
   8.7 Component : 右向きの矢印（ナビ・ボタン共通）
   -------------------------------------------------------------------------- */
.c-chevron {
  display: inline-block;
  flex: none;
  width: .42em;
  height: .42em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}

/* --------------------------------------------------------------------------
   8.8 Component : ボタン（業務内容を詳しく見る など）
   遷移先ページが未制作のため、現状は href を持たせていない。
   -------------------------------------------------------------------------- */
.c-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(18px, 2.315vw, 44.5px) clamp(20px, 2.625vw, 50.4px) clamp(18px, 2.315vw, 44.5px) clamp(20px, 2.010vw, 38.6px);
  border-radius: clamp(8px, .677vw, 13px);   /* 13px */
  background: var(--c-surface);
  font-size: var(--fz-ui);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--ease);
}

.c-button:hover,
.c-button:focus-visible { background-color: #2a2a2a; }

.c-button:hover .c-chevron,
.c-button:focus-visible .c-chevron { transform: translateX(4px) rotate(45deg); }

/* 写真の上に置くボタン。実測でえんじ地に白10%を重ねた色と一致 */
.c-button--translucent { background-color: rgba(255, 255, 255, .1); }

.c-button--translucent:hover,
.c-button--translucent:focus-visible { background-color: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   9. Component : 全画面メニュー
   中の項目も href を持たないため遷移しない。
   -------------------------------------------------------------------------- */
.c-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--c-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}

.c-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.c-overlay__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--header-h) + 4vh) var(--gutter) 6vh;
}

.c-overlay__list { margin-block: auto; }   /* 上下のアキを均等にしてリストを中央へ */

.c-overlay__item + .c-overlay__item { margin-top: clamp(14px, 1.8vw, 34px); }

.c-overlay__link {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.5vw, 28px);
  cursor: pointer;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}

.c-overlay__link:hover,
.c-overlay__link:focus-visible { transform: translateX(clamp(8px, .8vw, 16px)); }

.c-overlay__ja {
  font-size: clamp(28px, 3.4vw, 64px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.c-overlay__en {
  font-size: var(--fz-ui);
  color: var(--c-text-dim);
  letter-spacing: .08em;
}

.c-overlay__foot {
  padding-top: 6vh;
  font-size: var(--fz-ui);
  letter-spacing: .28em;
  color: var(--c-text-dim);
}

/* --------------------------------------------------------------------------
   10. Motion : 初回表示（控えめ）
   JS有効時のみ初期状態を隠し、is-ready 付与で再生する。
   -------------------------------------------------------------------------- */
.js .c-logo,
.js .c-gnav__item,
.js .c-menubtn {
  opacity: 0;
  transform: translateY(-8px);
}

.is-ready .c-logo,
.is-ready .c-gnav__item,
.is-ready .c-menubtn {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.is-ready .c-logo                    { transition-delay: .25s; }
.is-ready .c-gnav__item:nth-child(1) { transition-delay: .38s; }
.is-ready .c-gnav__item:nth-child(2) { transition-delay: .44s; }
.is-ready .c-gnav__item:nth-child(3) { transition-delay: .50s; }
.is-ready .c-gnav__item:nth-child(4) { transition-delay: .56s; }
.is-ready .c-gnav__item:nth-child(5) { transition-delay: .62s; }
.is-ready .c-menubtn                 { transition-delay: .68s; }

/* --------------------------------------------------------------------------
   10.5 Motion : スクロールでの登場（FV以下）
   main.js が使える環境でだけ html に is-reveal-on を付けて有効にする。
   JSが動かない／動きを減らす設定のときは最初から表示されたまま。
   表示し終えると data-reveal 属性ごと外れ、要素本来のスタイル（hover の transition など）に戻る。
   -------------------------------------------------------------------------- */
.is-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s var(--ease) var(--reveal-delay, 0s),
    transform 1s var(--ease) var(--reveal-delay, 0s);
}

/* 大きな写真パネルは動かさずフェードだけにする */
.is-reveal-on [data-reveal="fade"] {
  transform: none;
  transition: opacity 1.2s var(--ease) var(--reveal-delay, 0s);
}

/* 縦書きの白い箱は読む方向（上→下）に表示する */
.is-reveal-on [data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease) var(--reveal-delay, 0s);
}

.is-reveal-on [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

.is-reveal-on [data-reveal="wipe"].is-inview { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  .js .c-logo,
  .js .c-gnav__item,
  .js .c-menubtn {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

/* --------------------------------------------------------------------------
   11. Responsive : ~1199px（ナビをハンバーガーへ）
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .l-header__nav { display: none; }

  .c-menubtn {
    margin-left: auto;
    align-items: flex-end;
  }

  .c-menubtn__bars { width: clamp(26px, 4vw, 40px); }
}

/* セクションが1カラムになる幅では、横幅に対して文字が小さく見えるため一段大きくする */
@media (max-width: 1023px) {
  :root {
    --fz-heading: clamp(28px, 5.6vw, 52px);
    --fz-body:    clamp(14px, 1.95vw, 17px);
  }
}

@media (max-width: 767px) {
  .c-menubtn__label { display: none; }
  .c-menubtn__bars  { gap: 6px; }

  /* SPはラベルがないため、アイコンだけで閉じると分かるようXにする */
  .c-menubtn[aria-expanded="true"] .c-menubtn__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .c-menubtn[aria-expanded="true"] .c-menubtn__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .c-overlay__foot { letter-spacing: .18em; }
}