@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ■ 汎用ユーティリティ（値の粒度不足）
 * .oj-gap-*           - gap 8/12/14/16/18/22/24/26/28/32/40/44/48/56/64px
 * .oj-mb-*            - margin-bottom 32/44/48/56px
 * .oj-mt-*            - margin-top 4/6/8px
 * .oj-h-*             - height 300/320/360px
 * .oj-section--*      - セクション上下padding 88/80px、お問い合わせ用の非対称padding
 *
 * ■ タイポグラフィ（値の粒度不足）
 * .oj-h2 / .oj-h3     - 30px / 20〜21px の小見出し
 * .oj-lead            - 16px / lh2.1 本文
 * .oj-text            - 15px / lh2 本文
 * .oj-note            - 13px 注釈
 * .oj-label-en        - Josefin Sans の英字ラベル（ゴールド・字間0.22em）
 *                       --md: 12px / --lg: 12px + 字間0.28em
 * .oj-sign            - 署名テキスト
 *
 * ■ 共通パーツの見た目差分（構造不足）
 * .oj-topbar          - ヘッダー上のインフォメーションバー（共通CSSに該当なし）
 * .oj-header*         - sticky 92px ヘッダー（.header / .header__* の値差分）
 * .oj-footer*         - grid 1fr/380px のフッター（.footer-body の flex 35/60 と異なる）
 * .oj-btn*            - 高さ固定・自動幅の pill ボタン（.btn は max-width:300px 固定幅）
 * .oj-heading*        - 英字ラベル(12px/0.28em ゴールド) + 日本語見出し の縦積み見出し
 *                       --sub(30px) / --sm(28px) / --md(27px) / --on-navy / --gap-22
 * .oj-page-hero       - ドットパターン背景・左寄せの下層ヒーロー
 *
 * ■ レイアウト（構造不足）
 * .oj-split           - 1.1fr / 1fr の2カラム grid
 * .oj-2col-side--*    - 1fr + 固定幅（300/380/420/440px）の2カラム grid
 * .oj-lineup*         - 画像とテキストが隙間なく接する見開きカード
 * .oj-checklist       - 丸チェックマーク付き2列チェックリスト
 * .oj-event-bar       - 4列dl + 右端ボタンの横並びバー
 *
 * ■ カード・ボックス（装飾パターン不足）
 * .oj-card-strength   - 上ゴールド罫 + 丸数字のカード
 * .oj-card-product    - 画像上・本文下の商品カード
 * .oj-card-tech       - 左ゴールド罫のカード
 * .oj-card-white / .oj-card-gray / .oj-box-outline / .oj-box-navy / .oj-box-flat
 * .oj-box-7n / .oj-box-figure / .oj-figure-clip
 * .oj-imgph           - 斜めストライプの画像プレースホルダ（未支給素材用）
 * .oj-dl / .oj-dl--spec / .oj-dl--event  - grid ベースの定義リスト
 * .oj-table / .oj-table--company         - .table-basic の padding / 色 / th幅の差分
 * .oj-history         - .dl-timeline のサイト固有値（260px + 1fr / ゴールド年号）
 *
 * ■ フォーム（構造不足）
 * .oj-form / .oj-field / .oj-input / .oj-textarea / .oj-radio / .oj-req / .oj-any
 * .oj-contact-box     - 電話・FAX の強調枠
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 【値の粒度不足】
 *  - gap / margin の刻みが 5px・10px 単位のため、元データの 22/26/32/44/48/56/64px が出せない
 *  - font-size utility (.fz-*) に 11/15/17/19/21/25/27/30/34/54 が無く、本文・見出しの実寸が出せない
 *  - height utility (.h-*) に 320/360 が無い
 *  - .section の padding が変数1つ（$section_padding）で、ページごとの 76/80/88/96px を出し分けられない
 *
 * 【指定方向不足】
 *  - grid のカラム比率を指定する utility が無い（.grid-2/3/4 は等幅のみ）。
 *    「1fr + 固定px」「1.1fr / 1fr」等はレイアウトの基本形だが共通CSSに該当が無い
 *
 * 【状態不足】
 *  - ボタンの hover が「背景⇔文字色の反転」固定。元データの「ゴールド→白背景+紺文字」
 *    のような任意の組み合わせを指定する modifier が無い
 *
 * 【構造不足】
 *  - .btn が max-width:300px / width:100% の固定幅前提で、高さ固定・内容量に応じた
 *    自動幅の pill ボタン（元データの標準ボタン）が組めない
 *  - ヘッダー上のインフォメーションバー（topbar）に相当する component が無い
 *  - .header__nav-item のリンクが flex-column（EN+JA 2段）固定で、1段ナビの想定が無い
 *  - .footer-body__inner が flex 35%/60% 固定で、grid の「可変 + 固定px」に組み替えられない
 *  - フォームの行（ラベル + 必須バッジ + 入力欄）を組む component が .form-input のみ
 *
 * 【装飾パターン不足】
 *  - ドットパターン（radial-gradient）背景のヒーローが無い
 *  - 素材未支給時の画像プレースホルダ（斜めストライプ + ラベル）が無い
 *
 * 【line-height の継承差異（実装時の注意）】
 *  - 共通CSSは body に line-height:1.8 を敷いているが、元データ(claude-design-output)の
 *    body には line-height 指定が無く normal。そのため元データ側で line-height を
 *    明記していない要素（見出し・ボタン・バッジ・テーブルセル・年号等）は、
 *    本CSSで明示的に line-height:normal を指定して実寸を一致させている。
 *    この指定を消すと 1.8 が継承され、要素の高さが数px〜十数px膨らんで
 *    以降のセクション位置がずれる。
 *
 * 【FontAwesome のバージョン差異】
 *  - 共通SCSSの擬似要素アイコンは font-family:"Font Awesome 5 Free" 固定だが、
 *    実装指示書で読み込むのは FontAwesome v6（family は "Font Awesome 6 Free"）。
 *    そのままだと豆腐文字になるため、使用箇所の ::before / ::after を content:none で
 *    打ち消し、HTML 側に <i class="fa-*"> を置いている。
 *
 */

/* ==========================================================================
   1. ベース
   ========================================================================== */
body {
  min-width: 1200px;
  /* 共通CSSの overflow-x:hidden はスクロールコンテナを作り、
     ヘッダーの position:sticky を無効化するため戻す（固定幅レイアウトのため横溢れは発生しない） */
  overflow-x: visible;
}

a:hover {
  color: #C6A15B;
  opacity: 1;
}

/* FontAwesome v6 を読み込むため、共通CSS側の v5 前提の擬似要素アイコンを打ち消す */
.header__tel::before,
.sp-nav__link::after {
  content: none;
}

/* ==========================================================================
   2. 汎用ユーティリティ（値の粒度不足の補完）
   ========================================================================== */
.oj-gap-8  { gap: 8px; }
.oj-gap-12 { gap: 12px; }
.oj-gap-14 { gap: 14px; }
.oj-gap-16 { gap: 16px; }
.oj-gap-18 { gap: 18px; }
.oj-gap-22 { gap: 22px; }
.oj-gap-24 { gap: 24px; }
.oj-gap-26 { gap: 26px; }
.oj-gap-28 { gap: 28px; }
.oj-gap-32 { gap: 32px; }
.oj-gap-40 { gap: 40px; }
.oj-gap-44 { gap: 44px; }
.oj-gap-48 { gap: 48px; }
.oj-gap-56 { gap: 56px; }
.oj-gap-64 { gap: 64px; }

.oj-mb-32 { margin-bottom: 32px; }
.oj-mb-44 { margin-bottom: 44px; }
.oj-mb-48 { margin-bottom: 48px; }
.oj-mb-56 { margin-bottom: 56px; }

.oj-mt-4 { margin-top: 4px; }
.oj-mt-6 { margin-top: 6px; }
.oj-mt-8 { margin-top: 8px; }

.oj-h-300 { height: 300px; }
.oj-h-320 { height: 320px; }
.oj-h-360 { height: 360px; }

.oj-self-start { align-self: flex-start; }
.oj-shrink-0   { flex-shrink: 0; }
.oj-max-w-860  { max-width: 860px; }
.oj-max-w-940  { max-width: 940px; }
.oj-mx-auto    { margin-left: auto; margin-right: auto; }

.oj-section--88    { padding: 88px 0; }
.oj-section--80    { padding: 80px 0; }
.oj-section--intro { padding: 72px 0 40px; }
.oj-section--form  { padding: 20px 0 88px; }

/* ==========================================================================
   3. タイポグラフィ
   ========================================================================== */
.oj-label-en {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: normal;
  color: #C6A15B;
}
.oj-label-en--md { font-size: 1.2rem; }
.oj-label-en--lg {
  font-size: 1.2rem;
  letter-spacing: 0.28em;
}
.oj-h2 {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  color: #1A2B4C;
  line-height: 1.6;
  letter-spacing: normal;
}
.oj-h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1A2B4C;
  line-height: normal;
  letter-spacing: normal;
}
.oj-h3--lg { font-size: 2.1rem; }
.oj-lead {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.1;
  color: #4B5468;
  letter-spacing: normal;
}
.oj-lead--tall { line-height: 2.2; }
.oj-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2;
  color: #4B5468;
  letter-spacing: normal;
}
.oj-text--tall  { line-height: 2.1; }
.oj-text--card  { line-height: 1.95; }
.oj-note {
  margin: 0;
  font-size: 1.3rem;
  line-height: normal;
  color: #6B7688;
  letter-spacing: normal;
}
.oj-sign {
  margin: 6px 0 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: #1A2B4C;
  line-height: normal;
}

/* ==========================================================================
   4. 見出し（.heading + サイト固有の実寸）
   ========================================================================== */
.oj-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oj-heading .heading__en {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: normal;
  color: #C6A15B;
}
.oj-heading .heading__ja {
  margin: 0;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  color: #1A2B4C;
}
/* 下層ページのセクション見出し */
.oj-heading--sub { gap: 14px; }
.oj-heading--sub .heading__ja { font-size: 3rem; }
.oj-heading--sub-lh .heading__ja { line-height: 1.6; }
/* 元データで見出しが本文と同じ 22px gap のスタックに直接並ぶ導入セクション用 */
.oj-heading--gap-22 { gap: 22px; }
/* 小サイズ（TOPの会社概要 / お問い合わせカード内） */
.oj-heading--sm { gap: 10px; }
.oj-heading--sm .heading__ja { font-size: 2.8rem; }
/* 中サイズ（WAVERU 相乗効果） */
.oj-heading--md { gap: 16px; }
.oj-heading--md .heading__ja { font-size: 2.7rem; }
/* 紺背景のセクション上 */
.oj-heading--on-navy .heading__ja { color: #FFFFFF; }
/* 見出しブロック内のリード文 */
.oj-heading__lead {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2.1;
  color: #4B5468;
}
.oj-heading__sub-lead {
  margin: 0;
  font-size: 1.6rem;
  line-height: normal;
  color: #D5DCE9;
}

/* ==========================================================================
   5. ボタン（.btn + サイト固有の実寸）
   ========================================================================== */
.oj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: none;
  height: 58px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.oj-btn--gold {
  background: #C6A15B;
  border-color: #C6A15B;
  color: #FFFFFF;
}
.oj-btn--gold:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #1A2B4C;
  opacity: 1;
}
.oj-btn--gold-navyhover:hover {
  background: #1A2B4C;
  border-color: #1A2B4C;
  color: #FFFFFF;
}
.oj-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
}
.oj-btn--ghost:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #1A2B4C;
  opacity: 1;
}
.oj-btn--outline {
  height: 52px;
  padding: 0 30px;
  border: 1px solid #1A2B4C;
  border-radius: 26px;
  background: transparent;
  color: #1A2B4C;
  font-size: 1.5rem;
}
.oj-btn--outline:hover {
  background: #1A2B4C;
  border-color: #1A2B4C;
  color: #FFFFFF;
  opacity: 1;
}
.oj-btn--outline-56 {
  height: 56px;
  padding: 0 32px;
  border-radius: 28px;
}
.oj-btn--full { width: 100%; }
.oj-btn--submit {
  align-self: center;
  margin-top: 8px;
  height: 62px;
  padding: 0 64px;
  border: 0;
  border-radius: 31px;
  background: #1A2B4C;
  color: #FFFFFF;
  font-size: 1.7rem;
  letter-spacing: 0.08em;
}
.oj-btn--submit:hover {
  background: #C6A15B;
  color: #FFFFFF;
  opacity: 1;
}
.oj-btn i { font-size: 1.7rem; }

/* ==========================================================================
   6. トップバー + ヘッダー
   ========================================================================== */
.oj-topbar {
  width: 100%;
  background: #1A2B4C;
  color: #FFFFFF;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}
.oj-topbar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  height: 34px;
  line-height: normal;
}
.oj-topbar__sep { opacity: 0.5; }

.oj-header {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E4E8EF;
}
.oj-header__inner {
  max-width: 1180px;
  padding: 0;
  height: 92px;
  gap: 34px;
}
.oj-header__logo img { height: 34px; }

.oj-header__nav {
  margin-left: 0;
  margin-right: auto;
  gap: 28px;
}
.oj-header__nav .header__nav-item a {
  flex-direction: row;
  align-items: center;
  padding: 34px 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: #1A2B4C;
  white-space: nowrap;
}
.oj-header__nav .header__nav-item a:hover { color: #C6A15B; }
.oj-header__nav .header__nav-item a::after { display: none; }
.oj-header__nav .header__nav-item--current a::after {
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background: #C6A15B;
  transform: none;
  transition: none;
}
.oj-header__nav .header__nav-ja {
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  color: inherit;
}

.oj-header__right {
  gap: 18px;
  height: auto;
}
.oj-header__tel-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.oj-header__tel-label {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  line-height: normal;
  color: #C6A15B;
}
.oj-header__tel {
  /* 共通CSSの .header__tel は英字フォント固定だが、元データは本文フォント（Zen Maru Gothic） */
  font-family: inherit;
  gap: 7px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #1A2B4C;
  white-space: nowrap;
}
.oj-header__tel:hover {
  color: #C6A15B;
  opacity: 1;
}
.oj-header__tel-icon {
  font-size: 1.6rem;
  color: #C6A15B;
}

.oj-header__cta {
  flex-direction: row;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  background: #C6A15B;
  border-radius: 24px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: normal;
  color: #FFFFFF;
  white-space: nowrap;
}
.oj-header__cta:hover {
  background: #B08F4C;
  color: #FFFFFF;
}
.oj-header__cta i { font-size: 1.6rem; }

/* ==========================================================================
   7. メインビュー
   ========================================================================== */
.oj-mv {
  position: relative;
  width: 100%;
  height: 660px;
  background: #0E1728;
  overflow: hidden;
}
/* --------------------------------------------------------------------------
   #slideshow は CMSスライダー差し替え時の外枠。
   CMSスライダー（内部でSwiperを使用）は高さ100%で外枠に追従する仕様のため、
   外枠 → CMS出力エリア → .swiper → .swiper-wrapper → .swiper-slide の
   すべてに高さを通す。
   ※ .swiper-wrapper / .swiper-slide に position:absolute を指定すると
     Swiperの横スライド（transform）が効かず全スライドが重なるため指定しない。
   -------------------------------------------------------------------------- */
.oj-mv #slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 660px;
}
/* CMSが出力する表示エリア（#cms-slider-1-1-area）とその内側のラッパー */
.oj-mv #slideshow > div,
.oj-mv #cms-slider-1-1-area,
.oj-mv #cms-slider-1-1-area > div {
  width: 100%;
  height: 100%;
}
.oj-mv .swiper,
.oj-mv .swiper-container {
  width: 100%;
  height: 100%;
}
.oj-mv .swiper-wrapper {
  height: 100%;
}
.oj-mv .swiper-slide {
  height: 100%;
  overflow: hidden;
}
.oj-mv .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.oj-mv .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ページネーション・矢印はオーバーレイ（z-index:1）より前面に置く */
.oj-mv .swiper-pagination,
.oj-mv .swiper-button-prev,
.oj-mv .swiper-button-next {
  z-index: 3;
  color: #FFFFFF;
}
.oj-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 18, 34, 0.86) 0%, rgba(10, 18, 34, 0.66) 40%, rgba(10, 18, 34, 0.18) 72%, rgba(10, 18, 34, 0.3) 100%);
  pointer-events: none;
}
.oj-mv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  /* CMSスライダーの矢印・ページネーションのクリックを妨げない */
  pointer-events: none;
}
.oj-mv__inner a {
  pointer-events: auto;
}
.oj-mv__en {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.32em;
  line-height: normal;
  color: #E0BE7C;
}
.oj-mv__title {
  margin: 0;
  font-size: 5.4rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.oj-mv__lead {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.9;
  color: #E8ECF4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.oj-mv__btns {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

/* ==========================================================================
   8. レイアウト
   ========================================================================== */
.oj-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.oj-2col-side {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}
.oj-2col-side--440 { grid-template-columns: 1fr 440px; }
.oj-2col-side--300 { grid-template-columns: 300px 1fr; }
.oj-2col-side--380 {
  grid-template-columns: 1fr 380px;
  gap: 48px;
}
.oj-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.oj-row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.oj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
/* 左のテキストカラムと高さを揃える（親の align-items:start を打ち消す） */
/* 図解画像。切り抜かず元の比率のまま幅いっぱいに表示する */
.oj-img-figure {
  display: block;
  width: 100%;
  height: auto;
}
.oj-img-intro {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
  background: #F5F7FA;
}
.oj-tag {
  padding: 10px 20px;
  border-radius: 22px;
  background: #F5F7FA;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: normal;
  color: #1A2B4C;
}

/* ==========================================================================
   9. 下層ページヒーロー
   ========================================================================== */
.oj-page-hero {
  padding: 76px 0;
  text-align: left;
  background-color: #F5F7FA;
  background-image: radial-gradient(#C3CEE0 1.4px, transparent 1.5px), radial-gradient(#C3CEE0 1.4px, transparent 1.5px);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  border-bottom: 1px solid #E4E8EF;
}
.oj-page-hero .heading__en {
  display: block;
  margin-bottom: 16px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: normal;
  color: #C6A15B;
}
.oj-page-hero .heading__ja {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
  color: #1A2B4C;
}
.oj-page-hero__lead {
  margin: 16px 0 0;
  font-size: 1.8rem;
  line-height: 1.8;
  color: #4B5468;
}

/* ==========================================================================
   10. カード・ボックス
   ========================================================================== */
/* TOP：こだわり／信頼のポイント */
.oj-card-strength {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 34px;
  background: #F5F7FA;
  border-top: 3px solid #C6A15B;
}
.oj-card-strength__head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.oj-card-strength__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid #1A2B4C;
  border-radius: 50%;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.8rem;
  line-height: normal;
  color: #1A2B4C;
}
.oj-card-strength__title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}

/* TOP：主要取扱商品 */
.oj-card-product {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}
.oj-card-product__img {
  display: block;
  width: 100%;
  height: 410px;
  object-fit: cover;
}
.oj-card-product__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 36px 44px;
}
.oj-card-product__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1A2B4C;
}
.oj-card-product__catch {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.7;
  color: #C6A15B;
}

/* 枠線ボックス / 紺ボックス / 白カード / グレーカード */
.oj-box-outline {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 44px;
  border: 1px solid #E4E8EF;
}
.oj-box-navy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 52px 44px;
  background: #1A2B4C;
  color: #FFFFFF;
}
.oj-box-navy__title {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.6;
}
.oj-box-navy__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2;
  color: #D5DCE9;
}
.oj-box-navy__tel {
  margin: 6px 0 0;
  font-size: 1.5rem;
  line-height: normal;
  color: #D5DCE9;
}
.oj-box-navy__tel strong {
  font-size: 2.2rem;
  font-weight: 700;
  color: #FFFFFF;
}
.oj-card-white {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 36px;
  background: #FFFFFF;
}
.oj-card-gray {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 36px;
  background: #F5F7FA;
}
.oj-box-flat {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px;
  background: #FFFFFF;
}

/* ゲルマニウム：7N訴求ボックス／図解ボックス／テクノロジーカード */
.oj-box-7n {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 44px;
  background: #FFFFFF;
}
.oj-box-7n__num {
  flex-shrink: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 9.2rem;
  line-height: 1;
  color: #C6A15B;
}
.oj-box-7n__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oj-box-7n__title {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}
.oj-box-figure {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 44px 44px;
  background: #FFFFFF;
}
/* 図版は支給データ（1075×778）をそのままの比率で表示する */
.oj-figure-clip {
  width: 100%;
  text-align: center;
}
.oj-figure-clip img {
  display: inline-block;
  width: 1075px;
  max-width: 100%;
  height: auto;
}
.oj-card-tech {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px;
  background: #FFFFFF;
  border-left: 3px solid #C6A15B;
}
/* 見出し頭のアイコン。2行になっても文字が回り込まないよう幅を確保する */
.oj-card-tech__icon {
  display: inline-block;
  width: 1.3em;
  margin-right: 4px;
  font-size: 1.8rem;
  color: #C6A15B;
  text-align: center;
  vertical-align: baseline;
}

/* ゲルマニウム：ブランドラインナップ */
.oj-lineup {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.oj-lineup__row {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 44px;
  align-items: stretch;
  background: #F5F7FA;
}
.oj-lineup__row--navy {
  grid-template-columns: 1fr 460px;
  background: #1A2B4C;
  color: #FFFFFF;
}
.oj-lineup__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.oj-lineup__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px 44px 44px 0;
}
.oj-lineup__body--left { padding: 44px 0 44px 44px; }
.oj-lineup__logo {
  align-self: flex-start;
  width: auto;
  height: 54px;
  object-fit: contain;
  object-position: left;
  mix-blend-mode: multiply;
}
.oj-lineup__title {
  margin: 0;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}
.oj-lineup__title-en {
  margin-left: 12px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: #C6A15B;
}
.oj-lineup__catch {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.8;
  color: #4B5468;
}
.oj-lineup__row--navy .oj-lineup__title { color: #FFFFFF; }
.oj-lineup__row--navy .oj-lineup__catch,
.oj-lineup__row--navy .oj-text { color: #D5DCE9; }
.oj-lineup__ph { min-height: 300px; }
/* ノーイメージ画像は切り抜かず全体を表示する（素材支給後は --noimg を外す） */
.oj-lineup__img--noimg {
  object-fit: contain;
  padding: 40px;
  background: #F5F7FA;
}

/* WAVERU：紺セクションの3カラム特徴 */
.oj-section-navy {
  background: #1A2B4C;
  color: #FFFFFF;
}
.oj-card-feature-navy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 3px solid #C6A15B;
}
.oj-card-feature-navy .oj-h3 { color: #FFFFFF; }
.oj-card-feature-navy .oj-text { color: #D5DCE9; }

/* WAVERU：チェックリスト */
.oj-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 48px;
  padding: 44px 48px;
  background: #FFFFFF;
}
.oj-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.6rem;
  line-height: 1.9;
  color: #333844;
}
.oj-checklist__mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #C6A15B;
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: normal;
}

/* 画像プレースホルダ（素材未支給箇所） */
.oj-imgph {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(135deg, #E7ECF4 0px, #E7ECF4 10px, #F2F5FA 10px, #F2F5FA 20px);
}
.oj-imgph__label {
  padding: 7px 14px;
  background: #FFFFFF;
  font-family: "Josefin Sans", monospace;
  font-size: 1.2rem;
  letter-spacing: normal;
  line-height: normal;
  color: #8A94A6;
}
/* 元データで字間 0.14em が入っている箇所（TOPの商品プレースホルダ）のみ */
.oj-imgph__label--tracked { letter-spacing: 0.14em; }
.oj-imgph--dark {
  background-image: repeating-linear-gradient(135deg, #24365A 0px, #24365A 10px, #1F3153 10px, #1F3153 20px);
}
.oj-imgph--dark .oj-imgph__label {
  background: transparent;
  border: 1px solid #C6A15B;
  color: #C6A15B;
  letter-spacing: normal;
}

/* ==========================================================================
   11. 定義リスト・テーブル・リスト
   ========================================================================== */
.oj-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
}
.oj-dl dt {
  padding: 14px 0;
  border-top: 1px solid #EEF1F6;
  font-weight: 700;
  color: #1A2B4C;
}
.oj-dl dd {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid #EEF1F6;
  color: #4B5468;
}
.oj-dl--spec {
  grid-template-columns: 100px 1fr;
  line-height: 2;
}
.oj-dl--spec dt,
.oj-dl--spec dd {
  padding: 12px 0;
  border-top: 1px solid #E4E8EF;
}
.oj-dl--event {
  grid-template-columns: auto 1fr auto 1fr;
  gap: 14px 24px;
  line-height: 1.8;
}
.oj-dl--event dt {
  padding: 0;
  border: 0;
  color: #C6A15B;
  font-weight: 700;
}
.oj-dl--event dd {
  padding: 0;
  border: 0;
  color: #4B5468;
}

.oj-table { font-size: 1.5rem; }
.oj-table th,
.oj-table td {
  padding: 18px 24px;
  border: 1px solid #E4E8EF;
  text-align: left;
  line-height: normal;
  vertical-align: top;
}
.oj-table th {
  width: 240px;
  background: #F5F7FA;
  color: #1A2B4C;
  font-weight: 700;
}
.oj-table td { color: #4B5468; }
.oj-table--company { background: #FFFFFF; }
.oj-table--company th,
.oj-table--company td { padding: 20px 24px; }
.oj-table--company th {
  width: 220px;
  background: #FBFCFE;
}
.oj-table td.oj-table__multi { line-height: 2; }

.oj-list-ol,
.oj-list-ul {
  margin: 0;
  padding-left: 22px;
  font-size: 1.5rem;
  line-height: 2.1;
  color: #4B5468;
}
.oj-list-ol { list-style: decimal; }
.oj-list-ul { list-style: disc; }

/* 沿革（.dl-timeline のサイト固有値） */
.oj-history .dl-timeline__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-top: 1px solid #E4E8EF;
  border-bottom: none;
}
.oj-history .dl-timeline__row:last-child { border-bottom: 1px solid #E4E8EF; }
.oj-history .dl-timeline__year {
  min-width: 0;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: normal;
  color: #C6A15B;
  white-space: normal;
}
.oj-history .dl-timeline__text {
  font-size: 1.6rem;
  line-height: 1.9;
  color: #4B5468;
}

/* ==========================================================================
   12. 催事バー
   ========================================================================== */
/* 展示会・イベント写真（1000×750＝4:3） */
.oj-event-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.oj-lightbox {
  display: block;
  cursor: zoom-in;
}
.oj-lightbox:hover .oj-event-photo {
  opacity: 0.8;
}

/* -- ライトボックス（js/common.js で生成） */
.oj-lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.oj-lb.is-open {
  opacity: 1;
  visibility: visible;
}
.is-lb-open {
  overflow: hidden;
}
.oj-lb__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  /* flex子要素の最小幅（画像の原寸）で画面外へはみ出さないようにする */
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oj-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.oj-lb__close,
.oj-lb__prev,
.oj-lb__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 2rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.oj-lb__close:hover,
.oj-lb__prev:hover,
.oj-lb__next:hover {
  background: rgba(255, 255, 255, 0.3);
}
.oj-lb__close { top: 16px; right: 16px; }
.oj-lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.oj-lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.oj-lb.is-single .oj-lb__prev,
.oj-lb.is-single .oj-lb__next {
  display: none;
}
@media (max-width: 639px) {
  .oj-lb {
    padding: 70px 12px;
  }
  .oj-lb__prev,
  .oj-lb__next {
    top: auto;
    bottom: 12px;
    transform: none;
  }
}
.oj-event-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 40px 44px;
  border: 1px solid #E4E8EF;
}

/* ==========================================================================
   13. フォーム
   ========================================================================== */
.oj-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 48px 44px;
  border: 1px solid #E4E8EF;
}
.oj-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oj-field__label {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}
.oj-req,
.oj-any {
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 1.1rem;
  line-height: normal;
}
.oj-req {
  background: #C6A15B;
  color: #FFFFFF;
}
.oj-any {
  border: 1px solid #C9D0DD;
  color: #6B7688;
}
.oj-field__note {
  margin-left: 10px;
  font-size: 1.3rem;
  font-weight: 400;
  color: #6B7688;
}
.oj-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #D8DEE9;
  border-radius: 4px;
  background: #FBFCFE;
  color: #333844;
  font-family: inherit;
  font-size: 1.6rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.oj-input:focus {
  border-color: #C6A15B;
  background: #FFFFFF;
  outline: none;
}
.oj-textarea {
  height: auto;
  padding: 16px;
  line-height: 1.9;
  resize: vertical;
}
.oj-fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.oj-fieldset legend {
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}
.oj-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #E4E8EF;
  border-radius: 4px;
  background: #FBFCFE;
  font-size: 1.6rem;
  line-height: normal;
  color: #333844;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.oj-radio:hover { border-color: #C6A15B; }
.oj-radio input {
  width: 18px;
  height: 18px;
  /* 共通CSSの * リセットが radio の UA マージンを消してしまうため、
     元データ（リセットが margin を消していない）と同じ位置になるよう戻す */
  margin: 3px 3px 0 5px;
  accent-color: #1A2B4C;
}

.oj-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oj-contact-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 30px;
  border: 2px solid #1A2B4C;
}
.oj-contact-box--gold { border-color: #C6A15B; }
.oj-contact-box__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: normal;
  color: #1A2B4C;
}
.oj-contact-box__num {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: normal;
  color: #1A2B4C;
}
/* 番号頭のアイコン。番号より一回り小さく、ゴールドで表示 */
.oj-contact-box__num-icon {
  margin-right: 10px;
  font-size: 2.2rem;
  color: #C6A15B;
  vertical-align: baseline;
}
.oj-contact-box__note {
  margin: 0;
  font-size: 1.4rem;
  line-height: normal;
  color: #4B5468;
}
.oj-contact-box__note--lh { line-height: 1.9; }

/* --------------------------------------------------------------------------
   13-1. CMSフォーム（.form-pattern-1）の上書き
   CMS側が出力するインラインCSS・後読みCSSに勝つ必要があるため !important を使う。
   -------------------------------------------------------------------------- */
/* 送信ボタン：サイト共通の .oj-btn--submit と同じデザイン・中央配置 */
.form-pattern-1 .submit-btn,
.form-pattern-1 button.submit-btn,
.form-pattern-1 input.submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  min-width: 280px !important;
  height: 62px !important;
  margin: 8px auto 0 !important;
  padding: 0 64px !important;
  border: 0 !important;
  border-radius: 31px !important;
  background: #1A2B4C !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.3s, color 0.3s !important;
}
.form-pattern-1 .submit-btn:hover,
.form-pattern-1 button.submit-btn:hover,
.form-pattern-1 input.submit-btn:hover {
  background: #C6A15B !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}
/* 必須ラベル：サイト共通の .oj-req と同じゴールド */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須' !important;
  margin-left: 10px !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  background: #C6A15B !important;
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: normal !important;
}

/* 任意ラベル：サイト共通の .oj-any と同じ白地＋グレー罫（CMS既定は非表示のため content で表示） */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  content: '任意' !important;
  display: inline-block !important;
  margin-left: 10px !important;
  padding: 2px 8px !important;
  border: 1px solid #C9D0DD !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #6B7688 !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

/* ==========================================================================
   13-2. お問い合わせ完了ページ（thanks.php）
   ========================================================================== */
.oj-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 60px 60px;
  border: 2px solid #E4E8EF;
  text-align: center;
}
.oj-thanks__icon {
  font-size: 6.4rem;
  line-height: normal;
  color: #C6A15B;
}
.oj-thanks__title {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  color: #1A2B4C;
}
.oj-thanks__lead { margin: 0; }
.oj-thanks__note {
  margin: 0;
  padding: 24px 28px;
  background: #F5F7FA;
  text-align: left;
}
.oj-thanks__caution {
  margin: 0;
  text-align: left;
}
.oj-thanks__btn {
  align-self: center;
  margin-top: 14px;
}

/* ==========================================================================
   14. フッター
   ========================================================================== */
.oj-footer__body {
  padding: 64px 0 0;
  background: #1A2B4C;
}
.oj-footer__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 48px;
}
.oj-footer__left,
.oj-footer__right {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.oj-footer__right { align-items: flex-start; }
.oj-footer__name {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: normal;
  color: #FFFFFF;
}
.oj-footer__en {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  line-height: normal;
  color: #C6A15B;
}
.oj-footer__info {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2;
  color: #D5DCE9;
}
.oj-footer__nav {
  gap: 12px 28px;
  margin-top: 8px;
}
.oj-footer__nav .footer-body__nav-item a {
  font-size: 1.4rem;
  line-height: normal;
  color: #D5DCE9;
}
.oj-footer__nav .footer-body__nav-item a:hover { color: #C6A15B; }
.oj-footer__cta-label {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  line-height: normal;
  color: #C6A15B;
}
.oj-footer__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: normal;
  color: #FFFFFF;
}
.oj-footer__tel:hover {
  color: #C6A15B;
  opacity: 1;
}
.oj-footer__tel-icon {
  font-size: 2.4rem;
  color: #C6A15B;
}
.oj-footer__bottom {
  padding: 0;
  background: #1A2B4C;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.oj-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1180px;
  height: 62px;
  margin: 0 auto;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #A8B3C6;
}

/* ==========================================================================
   15. ページトップボタン
   SCSS側は $base_color（紺）だが、本サイトではゴールドを主役にする。
   main.css より後に読み込まれるため詳細度は同じで上書きできる（再コンパイルでも消えない）。
   ========================================================================== */
.page-top__link {
  background: #C6A15B;
  color: #FFFFFF;
}
.page-top__link:hover {
  background: #1A2B4C;
  color: #FFFFFF;
}