/*
 * ======================================
 * MONOA Co., Ltd. site.css
 * 共通 main.css（./scss/ コンパイル）に対する追加スタイル
 *
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .monoa-root                 - ルート CSS 変数（モノトーン用パレット）
 * .monoa-header               - ヘッダー固定バー（透過 → スクロールで白）
 * .monoa-brand                - ロゴ画像コンテナ
 * .monoa-gnav                 - グローバルナビ（極細英字＋下線アニメ）
 * .monoa-hamburger            - SP用ハンバーガー
 * .monoa-hero                 - TOP用フルスクリーンMV
 * .monoa-section              - クランプ余白のセクションラッパー
 * .monoa-section--paper       - 紙色背景セクション
 * .monoa-section-head         - 「— 01 / Concept」スタイルの見出し
 * .monoa-eyebrow              - 英字アイブロー
 * .monoa-num                  - 英字斜体ナンバー
 * .monoa-concept              - TOP CONCEPT 2カラム
 * .monoa-biz                  - TOP BUSINESS（左 sticky + 右リスト）
 * .monoa-biz-list             - BUSINESS 横線区切りリスト
 * .monoa-cta-band             - 黒背景フルブリードCTA帯
 * .monoa-cta-link             - 細線CTA（上下ボーダー + 矢印）
 * .monoa-page-hero            - 下層ページ用フルブリード写真ヒーロー
 * .monoa-concept-block        - COMPANY 2カラム導入ブロック
 * .monoa-concept-images       - COMPANY 写真上下ずれグリッド
 * .monoa-origin               - COMPANY ORIGIN 2カラム
 * .monoa-profile-table        - COMPANY シャープ直線テーブル
 * .monoa-access               - COMPANY/ACCESS 地図2カラム
 * .monoa-intro                - SERVICE/CONTACT 導入2カラム
 * .monoa-svc                  - SERVICE 事業領域 alternating ブロック
 * .monoa-form                 - CONTACT 細線フォーム
 * .monoa-submit               - CONTACT 黒矩形送信ボタン
 * .monoa-cat-list             - ENGLISH カテゴリ 3列ボックス
 * .monoa-support              - ENGLISH 海外サポート 2カラム
 * .monoa-info-block           - ENGLISH 会社情報 dl テーブル
 * .monoa-two-col              - ENGLISH 標準2カラム
 * .monoa-footer               - フッター（ブランド + dl + ナビ + コピー）
 * .reveal                     - スクロールフェードイン
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 * 構造不足:
 *  - 「— 01 / Concept」スタイル（短いバー + 英字キャプション）の section-head
 *  - 透過→白へ切替わるスクロール連動ヘッダー（透過時テキスト白）
 *  - 細線（border-top + border-bottom）の極細CTAリンク + 矢印
 *  - ハイラインのフォーム（border-bottom only）スタイル
 *  - フルブリード写真ヒーローの中央タイトル（薄いオーバーレイ）
 *  - 2 つの写真を上下ずらして並べる asymmetric grid
 *
 * 装飾パターン不足:
 *  - clamp() 可変の section padding と type scale
 *  - 「Creating a more wonderful time」風の極細英字 italic タイトル
 *  - 上下ライン CTA（矢印が hover で伸びる）
 *
 * 値の粒度不足:
 *  - 極細ウェイト（200）の英字フォントの組み合わせ
 *  - 0.28〜0.32em の超ワイドな letter-spacing
 *
 */

:root {
  --c-bg: #ffffff;
  --c-fg: #000000;
  --c-paper: #f4f2ed;
  --c-mute: #6f6f6f;
  --c-line: #000000;
  --c-hair: rgba(0, 0, 0, 0.12);
  --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: "Noto Sans Display", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(24px, 3.8vw, 36px);
  --fs-h1:      clamp(22px, 3.2vw, 32px);
  --fs-h2:      clamp(20px, 2.4vw, 28px);
  --fs-h3:      18px;
  --fs-h3-lg:   20px;
  --fs-body:    clamp(15px, 1vw, 16px);
  --fs-body-lg: 16px;
  --fs-small:   15px;
  --fs-caption: 15px;
  --fs-nav:     15px;
  --header-h:   120px;
  --section-y:  clamp(80px, 10vw, 120px);
  --container:  1200px;
  --pad-x:      clamp(24px, 5vw, 80px);
}

/* Body base override（共通の Outfit 系を Noto Sans に） */
body {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--c-fg);
  background: var(--c-bg);
}

body p { line-height: 2.0; }
img, svg { display: block; max-width: 100%; }
/* 固定ヘッダー分のアンカー位置調整 */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* =======================
 * Reveal on scroll
 * ======================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =======================
 * Header
 * ======================= */
.monoa-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.monoa-header.is-scrolled {
  background: #ffffff;
  border-bottom-color: var(--c-hair);
}
.monoa-header__inner {
  height: 100%;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.monoa-brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.monoa-brand img {
  display: block;
  height: 88px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s ease;
}
.monoa-header.is-scrolled .monoa-brand img { height: 70px; }
.monoa-gnav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.monoa-gnav a {
  position: relative;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-nav);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
}
.monoa-gnav a:hover { opacity: 1; }
.monoa-gnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.monoa-gnav a:hover::after,
.monoa-gnav a.is-current::after {
  transform: scaleX(1);
}

/* Hamburger (SP) */
.monoa-hamburger {
  display: none;
  position: relative;
  width: 32px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.monoa-hamburger span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.monoa-hamburger span:nth-child(1) { top: 4px; }
.monoa-hamburger span:nth-child(2) { top: 12px; }
.monoa-hamburger span:nth-child(3) { top: 20px; }
.monoa-hamburger.is-open span:nth-child(1) { top: 12px; transform: rotate(45deg); }
.monoa-hamburger.is-open span:nth-child(2) { opacity: 0; }
.monoa-hamburger.is-open span:nth-child(3) { top: 12px; transform: rotate(-45deg); }

/* ヘッダー透過モード：ヒーロー／タイトル帯の上では白文字（ハンバーガー線・ナビ含む）→ スクロール後は黒 */
.monoa-header { color: #ffffff; }
.monoa-header .monoa-brand img { filter: brightness(0) invert(1); }
.monoa-header.is-scrolled { color: var(--c-fg); }
.monoa-header.is-scrolled .monoa-brand img { filter: none; }

/* =======================
 * TOP Hero
 * ======================= */
.monoa-hero {
  position: relative;
}
/* MV直後のキャッチコピー */
.monoa-catch {
  text-align: center;
}
.monoa-section.monoa-catch {
  padding-bottom: calc(var(--section-y) / 4);
}
.monoa-catch__en {
  font-family: var(--ff-en);
  font-weight: 200;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
}
.monoa-catch__ja {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 2.0;
  letter-spacing: 0.2em;
  margin: 0;
}
.monoa-hero__stage {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.monoa-hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.38) 100%);
  pointer-events: none;
}
.monoa-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #d9d6cf url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28194/mv.jpg') center / cover no-repeat;
  overflow: hidden;
}
.monoa-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.monoa-hero__visual #cms-slider-1-1-area,
.monoa-hero__visual #cms-slider-1-1-area > * {
  width: 100%;
  height: 100%;
}
.monoa-hero__visual #cms-slider-1-1-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.monoa-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.monoa-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 56px var(--pad-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.monoa-hero__copy { align-self: end; max-width: 720px; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.monoa-hero__copy-en {
  font-family: var(--ff-en);
  font-weight: 200;
  font-style: italic;
  font-size: calc(var(--fs-display) * 1.5);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  color: #ffffff;
}
.monoa-hero__copy-ja {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 1.95;
  letter-spacing: 0.2em;
  margin: 0;
  max-width: 36ch;
  color: #ffffff;
}
.monoa-hero__scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
}
.monoa-hero__scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 40%, transparent 100%);
  animation: monoa-drop 2.4s ease-in-out infinite;
}
@keyframes monoa-drop {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%      { transform: scaleY(1);   transform-origin: top; }
}

/* =======================
 * Section primitives
 * ======================= */
.monoa-section {
  padding-block: var(--section-y);
  padding-inline: max(var(--pad-x), calc((100% - var(--container)) / 2));
}
.monoa-section--paper { background: var(--c-paper); }
.monoa-section--pt0 { padding-top: 0; }

.monoa-section-head {
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: baseline;
  margin-bottom: 40px;
}
.monoa-section-head__label {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.monoa-section-head__label .bar {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--c-fg);
  vertical-align: middle;
  margin-right: 12px;
}

.monoa-eyebrow {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-fg);
}
.monoa-num {
  font-family: var(--ff-en);
  font-weight: 200;
  font-style: italic;
  letter-spacing: 0;
  color: var(--c-mute);
}

/* =======================
 * CTA (thin line link)
 * ======================= */
.monoa-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  min-width: 320px;
  justify-content: space-between;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-fg);
  text-decoration: none;
  transition: padding 0.35s ease;
}
.monoa-cta-link:hover { opacity: 1; }
.monoa-cta-link .arrow {
  width: 64px;
  height: 1px;
  background: var(--c-fg);
  position: relative;
  transition: width 0.35s ease;
}
.monoa-cta-link .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-fg);
  border-right: 1px solid var(--c-fg);
  transform: rotate(45deg);
}
.monoa-cta-link:hover .arrow { width: 84px; }
.monoa-cta-link.is-light { color: #ffffff; border-color: #ffffff; }
.monoa-cta-link.is-light .arrow { background: #ffffff; }
.monoa-cta-link.is-light .arrow::after {
  border-top-color: #ffffff;
  border-right-color: #ffffff;
}

/* =======================
 * Black CTA band
 * ======================= */
.monoa-cta-band {
  position: relative;
  background: var(--c-fg);
  color: var(--c-bg);
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.monoa-cta-band > *:not(.monoa-cta-band__bg) { position: relative; z-index: 2; }
.monoa-cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.monoa-cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
}
.monoa-cta-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.25) 100%);
}
.monoa-cta-band__corner {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.monoa-cta-band__title {
  margin: 0;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.monoa-cta-band__title em { font-style: italic; font-weight: 200; }
.monoa-cta-band__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.monoa-cta-band__right p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 2.0;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.85);
}

/* =======================
 * Page hero (sub pages)
 * ======================= */
.monoa-page-hero {
  position: relative;
  margin: 0;
  padding: 0;
  height: clamp(360px, 56vh, 560px);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--c-bg);
}
.monoa-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.monoa-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.monoa-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.42) 100%);
}
.monoa-page-hero__inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.monoa-page-hero__inner h1 {
  margin: 0;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =======================
 * TOP : CONCEPT
 * ======================= */
.monoa-concept {
  display: grid;
  grid-template-columns: 45% 45%;
  justify-content: space-between;
  column-gap: 5%;
  align-items: center;
}
.monoa-concept__label-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.monoa-concept__ph {
  position: relative;
  aspect-ratio: 6 / 5;
  width: 100%;
  overflow: hidden;
}
.monoa-concept__ph img { width: 100%; height: 100%; object-fit: cover; }
.monoa-concept__text h2 {
  margin: 0 0 28px;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: 0.04em;
}
.monoa-concept__text p {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  line-height: 2.0;
}

/* =======================
 * TOP : BUSINESS index
 * ======================= */
.monoa-biz {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.monoa-biz__left {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.monoa-biz__left h2 {
  margin: 20px 0 20px;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.monoa-biz-list {
  border-top: 1px solid var(--c-hair);
  list-style: none;
  padding: 0;
  margin: 0;
}
.monoa-biz-list__item a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-hair);
  transition: padding 0.4s ease;
  color: inherit;
  text-decoration: none;
}
.monoa-biz-list__item a:hover { padding-left: 10px; opacity: 1; }
.monoa-biz-list__item .n {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-small);
  color: var(--c-mute);
}
.monoa-biz-list__item .en {
  display: block;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h3-lg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.monoa-biz-list__item .ja {
  display: block;
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.28em;
  color: var(--c-mute);
  margin-bottom: 10px;
}
.monoa-biz-list__item .icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.4s ease;
}
.monoa-biz-list__item a:hover .icon { transform: translateX(4px); }

/* =======================
 * COMPANY : CONCEPT BLOCK / ORIGIN
 * ======================= */
.monoa-concept-block {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 120px;
}
.monoa-concept-block .monoa-section-head__label,
.monoa-origin .monoa-section-head__label,
.monoa-two-col__title .monoa-section-head__label,
.monoa-support .monoa-section-head__label {
  display: block;
  margin-bottom: 40px;
}
.monoa-concept-block__lead {
  font-family: var(--ff-en);
  font-weight: 200;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.3;
  margin: 0 0 16px;
}
.monoa-concept-block__ja-lead {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.4em;
  margin: 0 0 16px;
}
.monoa-concept-block p {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  line-height: 2.0;
}

.monoa-concept-images {
  max-width: 95%;
  margin: 50px auto;
  margin-top: 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  align-items: end;
}
.monoa-concept-images figure {
  margin: 0;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}
.monoa-concept-images figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.monoa-concept-images figure:nth-child(1) { transform: translateY(-32px); }
.monoa-concept-images figure:nth-child(2) { transform: translateY(32px); }
.monoa-concept-images figure:nth-child(3) { transform: translateY(-32px); }

.monoa-origin {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.monoa-origin__mark-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}
.monoa-origin__mark-row .x {
  font-style: italic;
  font-size: 0.7em;
  color: var(--c-mute);
}
.monoa-origin__ja-title {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.4em;
  margin: 0 0 16px;
}
.monoa-origin p {
  font-size: var(--fs-body);
  line-height: 2.0;
  margin: 0 0 18px;
}

/* =======================
 * COMPANY : PROFILE table
 * ======================= */
.monoa-profile-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.monoa-profile-table tr { border-top: 1px solid var(--c-hair); }
.monoa-profile-table tr:last-child { border-bottom: 1px solid var(--c-hair); }
.monoa-profile-table th,
.monoa-profile-table td {
  padding: 24px 12px 24px 0;
  vertical-align: top;
  text-align: left;
}
.monoa-profile-table th {
  width: 200px;
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--c-mute);
  padding-right: 32px;
}
.monoa-profile-table td {
  font-size: var(--fs-body);
  line-height: 1.85;
  font-weight: 300;
}
.monoa-profile-table .latin {
  color: var(--c-mute);
  font-family: var(--ff-en);
  font-style: italic;
  margin-left: 8px;
  font-size: var(--fs-small);
}

/* =======================
 * COMPANY : ACCESS
 * ======================= */
.monoa-access {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: stretch;
}
.monoa-access__info dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.85;
}
.monoa-access__map {
  width: 100%;
  min-height: 100%;
  border: 1px solid var(--c-line);
  background: #ddd;
  align-self: stretch;
}
.monoa-access__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  display: block;
  min-height: 360px;
}

/* =======================
 * SERVICE/CONTACT : intro
 * ======================= */
.monoa-intro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.monoa-intro__keyword {
  font-family: var(--ff-en);
  font-weight: 200;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.15;
  margin: 0;
}
.monoa-intro p {
  font-size: var(--fs-body);
  line-height: 2.0;
  margin: 0 0 16px;
}

/* =======================
 * SERVICE : 5事業 alternating
 * ======================= */
.monoa-svc {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 64px 0;
  border-top: 1px solid var(--c-hair);
}
.monoa-svc__text { width: 47%; }
.monoa-svc:last-of-type { border-bottom: 1px solid var(--c-hair); }
.monoa-svc--flip .monoa-svc__text { order: 2; }
.monoa-svc--flip .monoa-svc__visual { order: 1; }
.monoa-svc__num-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.monoa-svc__num {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-small);
  color: var(--c-mute);
  letter-spacing: 0.1em;
}
.monoa-svc h3 {
  margin: 0 0 10px;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.monoa-svc__ja-title {
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.3em;
  margin-bottom: 48px;
  color: var(--c-mute);
}
.monoa-svc p {
  font-size: var(--fs-body);
  line-height: 2.0;
  margin: 0;
}
.monoa-svc__visual {
  width: 40%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.monoa-svc__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =======================
 * CONTACT : form
 * ======================= */
.monoa-contact-side {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--c-hair);
}
.monoa-contact-side .item dt {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.monoa-contact-side .item dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.85;
}

.monoa-form-wrap {
  display: block;
}
.monoa-form-lead {
  margin: 0 0 24px;
  font-size: var(--fs-small);
  line-height: 1.85;
}
.monoa-rule {
  border: 0;
  border-top: 1px solid var(--c-hair);
  margin: 60px 0;
}

.monoa-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.monoa-form__field {
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px 0;
  border-top: 1px solid var(--c-line);
}
.monoa-form__field:last-of-type { border-bottom: 1px solid var(--c-line); }
.monoa-form__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.monoa-form__field label {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.monoa-form__field label .ja {
  margin-left: 10px;
  font-family: var(--ff-jp);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--c-mute);
  text-transform: none;
}
.monoa-form__req {
  font-family: var(--ff-en);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.monoa-form__req.is-required { color: var(--c-fg); }
.monoa-form__field input,
.monoa-form__field select,
.monoa-form__field textarea {
  width: 100%;
  padding: 8px 0;
  font: inherit;
  color: var(--c-fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  outline: none;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease;
}
.monoa-form__field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.85;
  border: 1px solid var(--c-line);
  padding: 12px 14px;
}
.monoa-form__field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}

.monoa-submit-row {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.monoa-submit {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 32px;
  background: var(--c-fg);
  color: var(--c-bg);
  border: 1px solid var(--c-fg);
  border-radius: 0;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: padding 0.35s ease;
}
.monoa-submit:hover { padding-right: 48px; opacity: 1; }
.monoa-submit .arrow {
  width: 28px;
  height: 1px;
  background: var(--c-bg);
  position: relative;
  transition: width 0.35s ease;
}
.monoa-submit .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-bg);
  border-right: 1px solid var(--c-bg);
  transform: rotate(45deg);
}

/* =======================
 * FORM CMS : 必須マークを「*」に
 * ======================= */
.monoa-form-cms {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--c-hair);
  padding: clamp(24px, 4vw, 48px);
}
.form-pattern-1 {
  background: transparent !important;
}
.form-contents {
  padding: 0 !important;
  font-size: 90% !important;
}
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required {
  position: relative;
}
/* ラジオボタンを縦並びに */
.form-pattern-1 dd label:has(input[type="radio"]),
.form-pattern-1 dd li:has(input[type="radio"]) {
  display: block;
  margin: 0 0 8px;
}
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '*' !important;
  color: #ff4f4f !important;
  background: transparent !important;
  font-size: 1.6em !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* =======================
 * ENGLISH : two-col / categories / support / info
 * ======================= */
.monoa-two-col {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px;
  align-items: start;
}
.monoa-two-col__title {
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.monoa-two-col__title .sub {
  display: block;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-mute);
  margin-top: 14px;
  text-transform: none;
}
.monoa-two-col p {
  font-size: var(--fs-body);
  line-height: 2.0;
  margin: 0 0 18px;
}

.monoa-overview-images {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: end;
}
.monoa-overview-images figure {
  margin: 0;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}
.monoa-overview-images figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.monoa-overview-images figure:nth-child(1) { transform: translateY(-28px); }
.monoa-overview-images figure:nth-child(2) { transform: translateY(28px); }

.monoa-cat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-hair);
}
.monoa-cat-list li {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 56px 40px;
}
.monoa-cat-list li:nth-child(3n-2) { padding-left: 0; }
.monoa-cat-list li:nth-child(3n)   { padding-right: 0; }
.monoa-cat-list li:not(:nth-child(3n)):not(:last-child) { border-right: 1px solid var(--c-hair); }
.monoa-cat-list li:nth-child(-n+3) { border-bottom: 1px solid var(--c-hair); }
.monoa-cat-list .n {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-small);
  color: var(--c-mute);
}
.monoa-cat-list figure {
  margin: 0;
  height: 260px;
  overflow: hidden;
  background: var(--c-paper);
}
.monoa-cat-list figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.monoa-cat-list .text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.monoa-cat-list .title {
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: var(--fs-h3-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
}
.monoa-cat-list .desc {
  font-size: var(--fs-body);
  line-height: 1.9;
  margin: 0;
}

.monoa-support {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}
.monoa-support__summary {
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-h3-lg);
  line-height: 1.5;
  margin: 0;
}
.monoa-support ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.monoa-support li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--c-hair);
}
.monoa-support li:last-child { border-bottom: 1px solid var(--c-hair); }
.monoa-support li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-fg);
  transform: rotate(45deg);
  margin-top: 9px;
}
.monoa-support li h4 {
  margin: 0 0 4px;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-h3-lg);
  letter-spacing: 0.06em;
}
.monoa-support li p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
}

.monoa-info-block {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-hair);
}
.monoa-info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--c-hair);
}
.monoa-info-row dt {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
}
.monoa-info-row dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.85;
}

/* =======================
 * Footer
 * ======================= */
.monoa-footer {
  border-top: 1px solid var(--c-line);
  padding: 72px var(--pad-x) 28px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}
.monoa-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.monoa-footer__brand .mark img {
  display: block;
  height: 90px;
  width: auto;
  object-fit: contain;
}
.monoa-footer__brand .slogan {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-fg);
}
.monoa-footer__brand .desc {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--c-mute);
  margin: 0;
  max-width: 36ch;
}
.monoa-footer dl {
  margin: 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 30px;
  column-gap: 24px;
  font-size: 13px;
  line-height: 1.85;
}
.monoa-footer dt {
  font-family: var(--ff-en);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 2px;
}
.monoa-footer dd { margin: 0; }
.monoa-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.monoa-footer__nav a {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.monoa-footer__copy {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* =======================
 * Responsive (SP)
 * ======================= */
@media (max-width: 820px) {
  :root {
    --header-h: 96px;
    --section-y: 80px;
    --fs-small: 13px;
    --fs-caption: 12px;
    --fs-nav: 12px;
  }
  .monoa-gnav { display: none; }
  .monoa-gnav.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px var(--pad-x);
    gap: 24px;
    z-index: 40;
  }
  body.is-top .monoa-header .monoa-gnav.is-open a { color: var(--c-fg); }
  .monoa-gnav.is-open a { font-size: 14px; color: var(--c-fg); }
  .monoa-hamburger { display: block; }
  .monoa-brand img { height: 72px; }
  .monoa-header.is-scrolled .monoa-brand img { height: 58px; }

  .monoa-hero__stage { min-height: 480px; }
  .monoa-hero__overlay { padding: 32px var(--pad-x); }
  .monoa-hero__scroll { display: none; }

  .monoa-page-hero { height: clamp(220px, 40vh, 300px); }

  .monoa-section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .monoa-concept-block .monoa-section-head__label,
  .monoa-origin .monoa-section-head__label,
  .monoa-two-col__title .monoa-section-head__label,
  .monoa-support .monoa-section-head__label { margin-bottom: 28px; }

  .monoa-concept { grid-template-columns: 1fr; gap: 28px; }
  .monoa-concept__ph { aspect-ratio: 8/5; }

  .monoa-biz { grid-template-columns: 1fr; gap: 40px; }
  .monoa-biz__left { position: static; }
  .monoa-biz-list__item a { grid-template-columns: 28px 1fr; }
  .monoa-biz-list__item .icon { display: none; }

  .monoa-cta-band {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .monoa-cta-band__corner { position: static; margin-bottom: 8px; color: rgba(255,255,255,0.7); }
  .monoa-cta-link { min-width: 0; width: 100%; }

  .monoa-concept-block,
  .monoa-origin,
  .monoa-access,
  .monoa-two-col,
  .monoa-support {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .monoa-concept-block { margin-bottom: 64px; }
  .monoa-concept-images,
  .monoa-overview-images {
    margin-top: 32px;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .monoa-concept-images figure:nth-child(1),
  .monoa-concept-images figure:nth-child(2),
  .monoa-concept-images figure:nth-child(3),
  .monoa-overview-images figure:nth-child(1),
  .monoa-overview-images figure:nth-child(2) { transform: none; }

  .monoa-profile-table th {
    width: 110px;
    padding-right: 16px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  .monoa-profile-table th,
  .monoa-profile-table td { padding-top: 18px; padding-bottom: 18px; }

  .monoa-access__map { min-height: 180px; aspect-ratio: 16/10; }

  .monoa-intro { grid-template-columns: 1fr; gap: 20px; }
  .monoa-svc, .monoa-svc--flip {
    flex-direction: column;
    gap: 28px;
    padding: 48px 0;
  }
  .monoa-svc__text, .monoa-svc__visual { width: 100%; }
  .monoa-svc--flip .monoa-svc__text { order: 1; }
  .monoa-svc--flip .monoa-svc__visual { order: 2; }

  .monoa-contact-side { grid-template-columns: 1fr; gap: 20px; }
  .monoa-form-wrap { grid-template-columns: 1fr; gap: 28px; }
  .monoa-form-note { position: static; }
  .monoa-submit { width: 100%; justify-content: space-between; }

  .monoa-cat-list { grid-template-columns: 1fr; }
  .monoa-cat-list li,
  .monoa-cat-list li:nth-child(3n-2),
  .monoa-cat-list li:nth-child(3n) {
    padding: 40px 0;
    border-right: 0;
  }
  .monoa-cat-list li:nth-child(-n+4):not(:last-child) { border-bottom: 1px solid var(--c-hair); }
  .monoa-cat-list figure { height: 220px; }

  .monoa-info-row { grid-template-columns: 1fr; gap: 6px; }

  .monoa-footer {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 48px;
  }
  .monoa-footer dl { row-gap: 15px; }
  .monoa-footer__nav { display: none; }
  .monoa-footer__copy {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}