@charset "UTF-8";
/* =============================================================
   有限会社三共製作所 — 企業情報ページ専用スタイル (company.css)
   対応テンプレート: page-company.php（Template Name: 企業情報）
   画像参照は company.css と同階層の images/ を相対参照

   共通パーツ（ヘッダー／パンくず／page-title／フッター／ベースリセット）は
   assets/sankyo-global.css の「サブページ共通パーツ」セクションを利用
   （body.skss-subpage スコープ）。このファイルは企業情報ページ専用の
   ブロックスタイルのみを扱う。
   ============================================================= */

:root {
  --panel: #efece9;
  --white: #ffffff;
  --orange: #f39800; /* サイト共通アクセント（オレンジ） */
}

*, *::before, *::after { box-sizing: border-box; }

.en {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: .08em;
}

/* 14px下限ルールの safety net */
.co-page p, .co-page li, .co-page dd, .co-page dt,
.co-page td, .co-page th, .co-page summary, .co-page label { font-size: 1rem; }
.co-page small { font-size: 14px; }

/* =============================================================
   イントロ（結論要約）
   ============================================================= */
.co-intro { padding: 56px 0 8px; }
.co-intro__inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.co-intro__lead { font-size: clamp(17px, 2vw, 19px); line-height: 2; color: #3a312d; }
.co-intro__lead strong { color: var(--teal); }

/* =============================================================
   セクション共通（Philosophy / Greeting / About / History）
   ============================================================= */
.co-section { padding: 56px 0; }
.co-section--alt { background: var(--panel); }
#history.co-section--alt { background: none; }
.co-section__inner {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px;
}

.co-head { position: relative; z-index: 0; text-align: center; margin-bottom: 32px; }
/* .co-head__group：JP見出し（co-head__en）と英字画像（co-head__jp）を1セットにまとめる箱。
   inline-blockのshrink-to-fitは「width:100%（%指定）を持つ子」を幅計算から無視する仕様のため、
   co-head__jp（max-width:180px・縦横比維持で決まる幅）だけが基準幅を決定する。
   co-head__en（JP見出しテキスト）はwidth:100%でその基準幅に追従＋text-justifyで文字を均等配置するため、
   経営理念(4字)〜沿革(2字)まで見出しの文字数が変わっても、画像サイズを保ったまま
   JP見出し側の文字間が自動で広がる/縮まる */
.co-head__group { display: inline-block; }
.co-head__en {
  position: relative;
  display: block; width: 100%; box-sizing: border-box; white-space: nowrap;
  font-size: clamp(28px, 4vw, 44px); color: var(--ink); line-height: 1;
  padding-bottom: 12px; border-bottom: 2px solid var(--orange);
  /* JP見出しの文字を箱の横幅いっぱいに均等配置＝co-head__jp画像の幅に文字間が自動で追従する */
  text-align: justify; text-align-last: justify; text-justify: inter-character;
}
/* .co-head__group .co-head__jp（詳細度0,2,0）で、sankyo-global.cssの
   body.skss-subpage img { max-width:100%; }（詳細度0,1,1）に確実に勝たせる */
.co-head__group .co-head__jp { display: block; width: auto; max-width: 180px; height: auto; margin-top: 10px; }
/* co-head__enを基準に絶対位置で調整できる装飾画像（トップページの.hero__deco/.hero__leadと同じ考え方）。
   以前は.co-head（centering用の全幅コンテナ）基準だったため、.co-head__enが中央寄せで
   見出しテキストの長さごとに左右位置・border-bottom線との距離感がズレていた。
   .co-head__en（.co-head__group内でco-head__jp画像の幅に合わせたブロック要素）を基準にすることで、
   見出しの文字数に関わらずborder-bottom線との距離感が一定になる */
.co-head__deco {
  --co-head-deco-size: 60px; /* アイコンの大きさ。この数値だけ変えればOK */
  position: absolute;
  top: 0;
  left: 0;
  width: var(--co-head-deco-size);
  height: auto;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Philosophy ---------- */
/* #philosophyを前置し、.co-page p { font-size:1rem; }（14px下限safety net、
   詳細度: 1クラス+1要素）にfont-sizeが打ち消されないよう詳細度を確保 */
#philosophy .co-philosophy {
  font-size: clamp(17px, 2vw, 20px); line-height: 2.1; color: #3a312d; text-align: center;
}

/* ---------- Greeting ---------- */
.co-greeting {
  display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 64px);
}
.co-greeting__photo { flex: 1 1 40%; min-width: 0; }
.co-greeting__photo figure {
  border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(35,24,21,.14);
}
.co-greeting__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.co-greeting__body { flex: 1 1 60%; min-width: 0; }
.co-greeting__body p { font-size: 16px; line-height: 2; color: #3a312d; margin-bottom: 18px; }
.co-greeting__sign {
  margin-top: 8px; font-weight: 700; text-align: right; color: var(--ink);
}

/* ---------- About（会社概要テーブル） ---------- */
.co-table { border-top: 1px solid #d9d4cf; max-width: 750px; margin: 0 auto; }
.co-table__row {
  display: flex; gap: 24px; padding: 16px 4px; border-bottom: 1px solid #d9d4cf;
}
.co-table__row dt {
  flex: none; width: 11em; font-weight: 700; color: var(--navy);
}
.co-table__row dd { flex: 1 1 auto; color: #3a312d; line-height: 1.8; }
.co-table__row dd a { color: var(--teal); text-decoration: underline; }

/* ---------- History（沿革タイムライン。日付→ティールの線+ドット→テキスト） ---------- */
.co-history {
  counter-reset: none;
  position: relative;
  left: 50%;
  width: 100%;
  max-width: 800px;
  transform: translateX(-50%);
}
.co-history li {
  display: flex; align-items: center; padding: 14px 4px;
}
.co-history__date {
  flex: none; width: fit-content; text-align: right;
  font-weight: 700; color: var(--ink); font-size: 15px;
}
/* co-history__line が余白を全て吸収して伸び縮みするため、
   co-history__text は右端いっぱいに自然と寄る（flex:noneで自身の幅のみ） */
.co-history__line {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 2px;
  margin: 0 14px;
  background: var(--teal);
}
.co-history__line::after {
  content: "";
  position: absolute; right: -4px; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
}
.co-history__text {
  flex: none;
  color: var(--ink);
}

/* =============================================================
   FAQ（equipment.css / service.cssと同一仕様。ページごとに読み込みが分かれるため重複定義）
   ============================================================= */
.faq { padding: 72px 0 88px; }
.faq__inner { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: 24px; }
.faq__heading { text-align: center; margin-bottom: 36px; }
.faq__heading-en { display: block; font-size: clamp(28px, 4vw, 44px); color: var(--ink); line-height: 1; }
.faq__heading-jp { display: block; margin-top: 10px; font-size: 15px; letter-spacing: .3em; color: var(--teal); }
.faq-item {
  border-bottom: 1px solid #d9d4cf; padding: 20px 4px;
}
.faq-item:first-of-type { border-top: 1px solid #d9d4cf; }
.faq-item__q {
  cursor: pointer; list-style: none; font-weight: 700; font-size: 17px;
  padding-right: 32px; position: relative; line-height: 1.7;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: translateY(-65%) rotate(45deg); transition: transform .2s;
}
.faq-item[open] .faq-item__q::after { transform: translateY(-35%) rotate(-135deg); }
.faq-item__q .faq-item__mark { color: var(--teal); font-family: "Bebas Neue", sans-serif; margin-right: 10px; }
.faq-item__a { margin-top: 14px; font-size: 16px; line-height: 1.95; color: #3a312d; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 920px) {
  .co-greeting { flex-direction: column; }
  .co-greeting__photo { flex: 1 1 100%; width: 100%; max-width: 420px; margin-inline: auto; }
  .co-greeting__body { flex: 1 1 100%; }

  /* ①ページ・各セクションの左右余白（padding-inline）をモバイルのみ15pxに統一 */
  .co-intro__inner,
  .co-section__inner,
  .faq__inner {
    padding-inline: 15px;
  }

  /* ②14px下限ルールのsafety net（font-size:1rem固定）をモバイルのみ解除 */
  .co-page p, .co-page li, .co-page dd, .co-page dt,
  .co-page td, .co-page th, .co-page summary, .co-page label { font-size: unset; }

  /* ③co-head__decoのサイズ・left/topをモバイルのみ変更 */
  .co-head__deco {
    --co-head-deco-size: 50px;
    left: -35px;
    top: -5px;
  }

  /* co-head__enのfont-size・padding-bottomをモバイルのみ変更 */
  .co-head__en {
    font-size: clamp(28px, 2.5vw, 35px);
    padding-bottom: 8px !important;
  }

  /* ④沿革（co-history）：liの左側に円マーカー＋点線の縦タイムライン装飾を追加。
     PC用の横線装飾（.co-history__line、日付とテキストの間の線+ドット）は
     この装飾と二重になるためモバイルでは非表示にする（マークアップは無変更） */
  .co-history__line {
    display: none;
  }
  .co-history li {
    position: relative;
    padding-left: 28px;
  }
  .co-history li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--teal);
    border-radius: 50%;
    background: #fff;
    z-index: 1;
  }
  .co-history li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 9px;
    top: calc(50% + 8px);
    bottom: -14px;
    width: 0;
    border-left: 1px solid var(--teal);
  }
}

@media (max-width: 560px) {
  .co-intro { padding: 40px 0 4px; }
  .co-section { padding: 40px 0; }
  .co-table__row { flex-direction: column; gap: 4px; }
  .co-table__row dt { width: auto; }
  .co-history li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .co-history__date { width: auto; text-align: left; }
  .co-history__line { display: none; }
  .faq { padding: 48px 0 56px; }
}

/* PC版のみ：co-head__decoの位置調整・co-head__enのpadding-bottom削除
   （モバイルは従来通り top:0/left:0/padding-bottom:12pxのまま） */
@media (min-width: 921px) {
  .co-head__deco {
    top: -15px;
    left: -45px;
  }
  .co-head__en {
    padding-bottom: 12px !important;
    font-size: clamp(25px, 3vw, 30px);
  }
}