@charset "UTF-8";
/**
 * company.css — 会社概要ページ（固定ページ・slug: company）専用
 *
 * 読み込み条件は functions.php セクション2の $kennet_under に
 *   'company' => 'company'
 * を登録する（common.css の後に読む）。
 *
 * ■ ここに書くもの／書かないもの
 *   書く    … 会社概要ページならではの差分（表とロゴの2カラム・地図・経営理念と SDGs の2カラム・
 *             年表2本の列づかい・最下部の JRA 帯）と、ページ末尾の CONTACT 帯（.cmp-contact）
 *   書かない… 本文の体裁（見出し・段落・リンク・表の罫線と余白）は
 *             common.css 474行〜「コンテンツ内見出し（固定ページ・投稿共通）」以降の
 *             .page__body が正本。二重管理にしないため、ここは差分だけを持つ。
 *             見出しの赤い縦線は common.css 487〜491行の `.page__body h2` がそのまま効くので
 *             このファイルで見出しを定義し直さない。
 *             ヒーロー帯（.page-title）・パンくず・ボタン（.btn）・矢印（.ar 系）も共通部品を流用する。
 *
 * ■ カンプについて
 *   このページは Figma のカンプが無く、既存サイト（www.earphone-guide.jp/company/）の内容を
 *   新サイトの共通部品に載せ替えるページ。今村様のご依頼は「お客様のご指示通りで、
 *   トンマナを合わせてコーディングで制作」＝内容は現行のまま・見た目は新サイト側。
 *   現行サイトの緑のテーブル見出しや白い角丸カードは持ち込まない。新しい装飾も足さない。
 *
 * ■ 数値の作り方
 *   カンプ幅 1440px 基準のリキッド。clamp(最小, 実測px ÷ 14.4 vw, 実測px) で 1440px 時に実測値へ一致。
 *   実測の出どころは 支給資料/既存サイト原本_20260819/company_既存表示_1440px.png（1440×5313）。
 *   固定値は「コンテナ最大幅・1px の罫線・固定でないと整わない箇所」の3種だけに使い、その場で理由を書く。
 *   メディアクエリは max-width の単独指定（下の帯へ継承させるため min-width で下限を切らない）。
 */

/* =============================================================================
 * 1. 会社概要の表（左）とロゴ（右）の2カラム
 *
 * 現行サイトの実測（1440px）
 *   内容の左右 165px〜1275px（幅 1110px）／左カラムの表 165〜約712px／
 *   右のロゴ画像 726〜1276px（画像の元データ 576×154 を 0.95 倍で表示）
 *   ＝ 左右ほぼ同じ幅の2カラム。よって等分割にする（等分割は grid で持つ）。
 * ========================================================================== */
.cmp-profile {
  /* 2026-08-19 CEO 指摘対応：2カラム（表＋右ロゴ）をやめ、ロゴを上・表を全幅にした。
     理由は page-company.php の該当コメントに記載。 */
}

/* 項目名の列。現行サイトの実測＝表の幅 555px に対して項目名の列 130px ＝ 23.4%。
   等分割ではないのでこの比率をそのまま % で持つ（grid には置き換えない）。 */
.cmp-profile__table th {
  /* 全幅化に伴い、沿革・歴史の年表（152行付近）と同じ「内容ぶんまで縮む」定石にそろえた。
     ページ内の表3本で項目名の列の作り方が統一される。 */
  width: 1%;
  /* 日本語は文字と文字の間で改行できるため、指定が無いと狭い画面で
     「営業時間」が縦一列に割れてしまう。折り返しを止めると、この列は
     いちばん長い項目名（古物営業法）より狭くならない＝下限が自動で決まる。 */
  white-space: nowrap;
}

/* 電話番号。tel: リンクにはするが見た目は素のテキストにする。
   現行サイトの実測は本文と同じ色（#333）で下線なしのため、リンク色と下線を付けると
   現行サイトの見え方が変わってしまう。新サイトの本文色は #111（common.css 20行の
   --color_dark）なので inherit で本文色にそろえる。
   common.css 528行の `.page__body a`（詳細度 0,1,1）に勝たせるため .page__body で囲う。 */
.page__body .cmp-profile__tel {
  color: inherit;
  text-decoration: none;
}
.page__body .cmp-profile__tel:hover {
  color: inherit;
}

/* ロゴ画像。見出しと表のあいだに実寸（576px）で中央置き。
   狭い画面での縮小は common.css 9行のリセット（img { max-width:100%; height:auto }）に、
   上下の余白は common.css 540行の `.page__body img` に任せる。 */
.page__body .cmp-profile__logo {
  margin-inline: auto;
}

/* 住所のビル名。769px 付近で「リードシー／築地ビル7階」と途中で折れるのを防ぐ。
   この塊は約176pxで、375px のときの全幅セルにも収まる。 */
.cmp-profile__nobr {
  white-space: nowrap;
}


/* =============================================================================
 * 2. 地図
 * ========================================================================== */
.cmp-map {
  margin-top: clamp(3rem, 3.33vw, 4.8rem); /* 1440px で 48px（当方設計） */
}

.cmp-map iframe {
  display: block;
  width: 100%;
  /* 高さは固定 px を書かず比で持つ。1120 は 1440px 時の .section__inner の内容幅、
     450 は原本 834行の iframe の height 属性。この比なら 1440px で現行と同じ高さになる。 */
  aspect-ratio: 1120 / 450;
  border: 0;
}


/* =============================================================================
 * 3. 経営理念（左）と SDGsへの取組み（右）の2カラム
 *
 * 現行サイトの実測（1440px）＝ 左 135〜699px ／ 右 741〜1305px ＝ 564px の等分割・間隔 42px。
 * ========================================================================== */
/* 本文セクションの上余白。2026-08-19 CEO 指示「.section 上の間隔が空きすぎ。
   プライバシーポリシーの時と同じように狭めて」により、common.css 80行の
   `padding: clamp(6rem, 6.88vw, 10rem) 0;` の上側だけを半分にする（下は変えない）。
   値は legal.css 118〜120行と同一。company.css はこのページでしか読まず、
   ページ内で .section が付くのは本文のセクション1つだけ（CONTACT 帯は .cmp-contact で
   .section を持たない）ため、他ページへは波及しない。 */
.section {
  padding-top: clamp(3rem, 3.44vw, 5rem);
}

/* 2026-08-19 CEO 指示：見出しの上と、経営理念／SDGs の塊の上をもう少し空ける。
   common.css 481行の `.page__body h2` は法務2ページと共用のため触らず、
   このページだけに効く .cmp__body で上書きする（巻き込み変更を避ける）。 */
.cmp__body h2 {
  margin-top: clamp(5.6rem, 5.56vw, 8rem); /* 1440px で 80px（既定 40px の倍） */
}

/* ただし本文の先頭の見出しだけは上余白を外す。ここは .section の上余白（上の指定）が
   すでに間隔を持っているため、80px を足すと二重になって上端が空きすぎる
   （2026-08-19 CEO 指摘）。法務2ページは先頭が段落なのでこの問題が出ていなかった。 */
.cmp__body > h2:first-child {
  margin-top: 0;
}

.cmp-mission {
  margin-top: clamp(5.6rem, 5.56vw, 8rem); /* 1440px で 80px。地図との間隔 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.4rem, 2.92vw, 4.2rem); /* 1440px で 42px（実測） */
  align-items: start; /* 左右で文章量が違うので上端でそろえる */
}

/* 2カラムの先頭の見出しは、上の間隔を .cmp-mission が持つので 0 に戻す
   （そうしないと 80px が二重にかかり、左右の見出しも下がりすぎる）。 */
.cmp-mission__col > h2:first-child {
  margin-top: 0;
}

/* 中のロゴ2点。上下の余白は common.css 540行の `.page__body img` のままでよいので触らない。
   幅は素材の実寸（イヤホンガイド 352×80 ／ SDGs 530×198）を上限にする。
   現行サイトはこれを 1.6 倍・1.06 倍に引き伸ばして白い角丸カードに収めているが、
   引き伸ばすとぼやけるため実寸で止め、列の中央に置く。 */
.cmp-mission__img {
  width: 100%;
  max-width: 35.2rem;
  /* 2026-08-19 CEO 指摘対応：中央置きだと左揃えの文章のあいだに画像だけが浮いて見えたため、
     経営理念のロゴは文章と同じ左揃えにした。SDGs 側は下の指定で中央のまま。 */
}
.cmp-mission__img--sdgs {
  max-width: 53rem;
  margin-inline: auto;
}

/* 「詳細はこちら」ボタン。現行サイトと同じく段落の下・中央。 */
.cmp-mission__btn-wrap {
  margin-top: clamp(2.4rem, 2.78vw, 4rem); /* 1440px で 40px（当方設計） */
  text-align: center;
}

/* common.css 528行の `.page__body a`（詳細度 0,1,1）が 826行の `.btn`（0,1,0）に勝ってしまい、
   ボタンにリンク色と下線が付く。ボタンのぶんだけ .page__body 付きで打ち消す。
   max-width は、SP で縦積みにしたとき .btn の固定幅 32rem が画面をはみ出さないようにする保険。 */
.page__body .cmp-mission__btn {
  max-width: 100%;
  color: #fff;
  text-decoration: none;
}
.page__body .cmp-mission__btn:hover {
  color: #fff;
}


/* =============================================================================
 * 4. 年表2本（沿革／イヤホンガイドの歴史）
 * ========================================================================== */
/* 年月の列は内容ぶんまで縮める（width: 1% は表の列を最小幅にそろえる定石）。
   折り返しを止めているのは、年月と内容の対応が崩れると意味が変わるため。
   原稿の桁そろえ用の半角スペース（「1997年 4月」）は原本のまま残してある。 */
.cmp-chronology th {
  width: 1%;
  white-space: nowrap;
}


/* =============================================================================
 * 5. 最下部の JRA 帯
 *
 * 現行サイトの実測（1440px）＝ 帯の上下 50px ／ ロゴ 120×48px ／
 * ロゴと文字の間 16px（原本 1120行の全角スペース1文字ぶん）／全体は中央寄せ。
 * ========================================================================== */
.cmp-jra {
  padding-block: clamp(3rem, 3.47vw, 5rem); /* 1440px で 50px（実測） */
}

.cmp-jra__body {
  display: flex;
  flex-wrap: wrap; /* 画面が狭いときは文字がロゴの下に回る */
  align-items: center;
  justify-content: center;
  gap: 1.6rem; /* 実測 16px。原本は全角スペース1文字で空けている */
}

.cmp-jra__logo {
  flex: 0 0 auto;
  width: clamp(9rem, 8.33vw, 12rem); /* 1440px で 120px（原本 1120行の style="width:120px"） */
  height: auto;
}

.cmp-jra__txt {
  text-align: center; /* 折り返して2行になったときのため */
}


/* =============================================================================
 * 6. contact（CONTACT 帯）
 * assets/css/legal.css 209〜444行の CONTACT 帯から、クラスの接頭辞だけ
 * .legal-contact → .cmp-contact に置き換えて転記（同じコンポーネント・数値は1つも変えていない）。
 * legal.css 側の数値はさらに assets/css/warranty.css → assets/css/top.css（.top-contact 系）が
 * 出所で、各宣言に書いてある top.css の行番号もそのまま残してある。
 * legal.css は privacy_policy / provision の2スラッグでしか読み込まれず本ページでは効かないため、
 * クラスを別（cmp-contact__*）にして必要な分だけここに持つ。
 * ========================================================================== */
.cmp-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.cmp-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（warranty.css 500〜575行 ／ 出所は top.css 1950〜2025行）
 * -------------------------------------------------------------------------- */
.cmp-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.cmp-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.cmp-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.cmp-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem ／ 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.cmp-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.cmp-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.cmp-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.cmp-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.cmp-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem ／ 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  text-decoration: none;
  letter-spacing: .05em;
}

.cmp-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem ／ 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * 右カラム（ボタン2本・warranty.css 580〜649行 ／ 出所は top.css 2031〜2100行）
 * -------------------------------------------------------------------------- */
.cmp-contact__btns {
  display: flex; /* top.css 2032行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2036行。Figma wrap gap 20 */
  min-width: 0;
}

.cmp-contact__btn {
  position: relative; /* top.css 2039行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2044行。Figma 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2045行と同値 */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.cmp-contact__btn--rental {
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002・top.css 2050行 */
  color: #fff;
}

.cmp-contact__btn--inquiry {
  background: #fff; /* top.css 2055行 */
  color: var(--color_main);
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.cmp-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.cmp-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.cmp-contact__btn-icon {
  position: absolute; /* top.css 2064行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.cmp-contact__btn-txt {
  display: flex; /* top.css 2072行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.cmp-contact__btn-main {
  font-size: 2.4rem; /* top.css 2080行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.cmp-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2087行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.cmp-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* =============================================================================
 * 7. 1023px 以下（legal.css 389〜406行から転記・CONTACT 帯の分だけ）
 * 2カラムのままだと右カラムが 600px を切り、ボタンの中の文字
 * （最長「レンタル・購入・デモ機などのご相談はこちら」＝約330px）と
 * 左右のアイコン・矢印（合わせて148px）が競って折り返しが増えるため縦積みにする。
 * ========================================================================== */
@media (max-width: 1023px) {
  .cmp-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて置く
     （営業時間の枠だけが 850px まで伸びて間延びするのを防ぐ） */
  .cmp-contact__intro,
  .cmp-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* =============================================================================
 * 8. 768px 以下（本文まわり）
 * ========================================================================== */
@media (max-width: 768px) {
  /* 2カラムはどちらも縦積み */
  /* .cmp-profile は 2026-08-19 に2カラムをやめたのでここでは扱わない。 */
  .cmp-mission {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --------------------------------------------------------------------------
   * 会社概要の表は項目名と内容を縦に積む。
   *
   * common.css 670〜674行は SP で `.page__body table` を display: block ／
   * overflow-x: auto ／ white-space: nowrap にする（横スクロールする比較表むけの指定）。
   * 縦積みとは相容れないので、この表のぶんだけ打ち消す。
   * 打ち消しは `.page__body .cmp-profile__table`（詳細度 0,2,0）で
   * common.css 側（0,1,1）に勝たせている。
   *
   * 罫線について：display: block にすると border-collapse: collapse が働かなくなり、
   * 上下に並んだセルの「下の罫線」と「上の罫線」が2本重なって太く見える。
   * そこで全セルの上辺を消し、表の上辺だけ1本引いて1本線にそろえる。
   * 1px は細線のため固定（リキッドにすると端末により消えたり太ったりする。
   * common.css 604行の罫線も同じ理由で 1px 固定）。
   * -------------------------------------------------------------------------- */
  .page__body .cmp-profile__table,
  .page__body .cmp-profile__table tbody,
  .page__body .cmp-profile__table tr,
  .page__body .cmp-profile__table th,
  .page__body .cmp-profile__table td {
    display: block;
    width: 100%;
    overflow-x: visible;
    white-space: normal;
  }

  .page__body .cmp-profile__table {
    border-top: 1px solid var(--color_line);
  }

  .page__body .cmp-profile__table th,
  .page__body .cmp-profile__table td {
    border-top: 0;
  }

  /* --------------------------------------------------------------------------
   * 年表2本は SP でも2列のまま（年月と内容の対応が命）。
   * こちらも common.css 670〜674行の横スクロール指定を打ち消して表のまま組む。
   * 年月の列だけ折り返しを止め、狭い画面ではセルの余白を詰めて内容の幅を稼ぐ。
   * -------------------------------------------------------------------------- */
  .page__body .cmp-chronology {
    display: table;
    overflow-x: visible;
    white-space: normal;
  }

  .page__body .cmp-chronology th,
  .page__body .cmp-chronology td {
    padding: 1rem .8rem; /* common.css 605行の clamp(1rem, 1.11vw, 1.6rem) の左右を詰める */
  }

  .page__body .cmp-chronology th {
    white-space: nowrap;
  }

  /* 地図。横が狭いと帯のように潰れるので、原本 834行の iframe の属性
     （width="600" height="450"）と同じ 4:3 に戻す。 */
  .cmp-map iframe {
    aspect-ratio: 4 / 3;
  }
}


/* =============================================================================
 * 9. 768px 以下（CONTACT 帯・legal.css 413〜444行から転記。出所は top.css 2320〜2375行）
 * ========================================================================== */
@media (max-width: 768px) {
  .cmp-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .cmp-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .cmp-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  .cmp-contact__btn-main {
    /* 1行に収める（トップと同じ扱い＝top.css 2364行）。最長の「お問い合わせ・見積相談」は
       19px だと 219px 必要で入る幅が 203px しかなく折り返す。17px なら 196px で収まる。 */
    font-size: 1.7rem;
  }

  .cmp-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2370行 */
    line-height: 1.4;
  }

  .cmp-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}