/* =========================================================
   sema-theme page-company.css（「会社について」固有）
   会社の姿勢を静かに伝えるブランドページ。余白・文字組み・濃淡・非対称で信頼感を出す。
   深緑の面は導入部の「会社名チップ」に一部だけ使い（面の重なり）、
   本文は単一の縦軸を保ちつつ、運営店舗だけを淡いアイボリー面にして1〜2か所の面変化に留める。
   代表メッセージ風・写真ヒーロー・白カードの連続・英字見出し・会社概要表・深緑共有面はコピーしない。
   共通土台（page.css）を継承。全クラス sema- プレフィックス。
   ========================================================= */

/* =========================================================
   導入領域（このページ専用）：アイボリー地＋深緑の会社名チップ（面の一部）＋
   段差でずらしたタイトル（面の重なり・非対称）＋短いブロンズ罫線
   ========================================================= */
.sema-co-hero{
  position:relative; overflow:hidden; background:var(--sema-ivory);
  padding:clamp(56px,8.5vw,108px) 0 clamp(30px,4vw,50px);
}
.sema-co-hero__inner{ position:relative; }

/* 正式名称（小さく・ゴシック）を深緑の小さな面に載せる＝深緑を一部だけ使う */
.sema-co-hero__name{
  display:inline-block; position:relative; z-index:1;
  background:var(--sema-sage-deep); color:var(--sema-ivory);
  font-family:var(--sema-sans); font-weight:500; font-size:.8rem; letter-spacing:.18em;
  padding:.7em 1.2em; margin:0;
}
/* タイトルは会社名チップから段差で右へずらす（非対称・面の重なり）。巨大にしない */
.sema-co-hero__title{
  position:relative; z-index:1;
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.72rem, 3vw, 2.3rem); line-height:1.4; letter-spacing:.12em;
  color:var(--sema-ink); margin:.55em 0 0 clamp(12px,3.5vw,52px);
}
/* タイトル下の短いブロンズ罫線（本文エリアへ続く合図） */
.sema-co-hero__title::after{
  content:""; display:block; width:40px; height:1px; background:var(--sema-bronze); margin-top:1em;
}

/* =========================================================
   本文：単一の縦軸（中央寄せ・やや広め）。要素の左右のずれで非対称をつくる
   ========================================================= */
.sema-co-body{ max-width:52rem; }

/* --- 導入リード（原稿冒頭の確定文）
   ★2026-08-24 変更。以前は margin-left:auto で右へずらし、左に縦罫線と余白を置いていた。
   そのぶん本文の見出し（事業内容など）より右から始まり、行頭が揃っていなかった。
   ユーザー指定により、見出しと同じ位置から始まるよう左揃えにする。
   罫線と padding を外すのは、残すと文字がその分だけ右へずれて揃わないため。 --- */
.sema-co-body .sema-co-lead{
  max-width:40rem; margin:0 0 clamp(44px,6vw,76px);
}
.sema-co-body .sema-co-lead p{
  font-family:var(--sema-serif); font-weight:500;
  font-size:clamp(1.12rem,1.7vw,1.28rem); line-height:2.05; letter-spacing:.04em;
  color:var(--sema-ink); margin:0;
}

/* --- 章の共通土台：単一の縦軸・章間は極細罫線（構造を章ごとに変えすぎない） --- */
.sema-co-body .sema-co-section{ margin:0; }
.sema-co-body .sema-co-section + .sema-co-section{
  margin-top:clamp(44px,6vw,72px);
  padding-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--sema-line);
}
.sema-co-body .sema-co-section > h2{
  font-family:var(--sema-serif); font-weight:600;
  font-size:clamp(1.3rem,2.5vw,1.62rem); line-height:1.5; letter-spacing:.06em;
  color:var(--sema-ink); margin:0 0 .9em; padding-bottom:.5em; position:relative;
}
.sema-co-body .sema-co-section > h2::after{
  content:""; position:absolute; left:0; bottom:0; width:38px; height:1px; background:var(--sema-bronze);
}
.sema-co-body .sema-co-section > p{ margin:0 0 1.3em; color:var(--sema-ink); }
.sema-co-body .sema-co-section > p:last-child{ margin-bottom:0; }

/* --- 事業内容：整然としたブロンズ罫線の定義リスト風（表にしすぎない） --- */
.sema-co-body .sema-co-business ul{
  list-style:none; margin:.6em 0 0; padding:0; max-width:34rem;
  border-top:1px solid var(--sema-line);
}
.sema-co-body .sema-co-business li{
  position:relative; margin:0; padding:.95em 0 .95em 1.5em;
  border-bottom:1px solid var(--sema-line);
  font-family:var(--sema-serif); font-size:1.02rem; color:var(--sema-ink);
}
.sema-co-body .sema-co-business li::before{
  content:""; position:absolute; left:0; top:1.55em; width:14px; height:1px; background:var(--sema-bronze);
}
.sema-co-body .sema-co-business li::marker{ content:none; }

/* --- 運営店舗：会社の事業の一部として、淡いアイボリー面に対等な罫線一覧で静かに案内 ---
   （「運営店舗」ページの深緑共有面はコピーしない。3店舗を対等・順位づけしない） */
.sema-co-body .sema-co-section.sema-co-stores{
  margin-top:clamp(44px,6vw,72px);
  padding:clamp(30px,4.5vw,52px) clamp(24px,4vw,44px);
  background:var(--sema-paper);
  border:1px solid var(--sema-line);
  border-top:1px solid var(--sema-line);                 /* 章間罫線ではなく面の境界に統一 */
}
.sema-co-body .sema-co-stores__list{
  margin-top:1.6em; border-top:1px solid var(--sema-line-2);
}
.sema-co-body .sema-co-store{
  display:flex; align-items:baseline; justify-content:space-between; gap:.8em 1.4em; flex-wrap:wrap;
  padding:1.05em 0; border-bottom:1px solid var(--sema-line);
}
.sema-co-body .sema-co-store h3{
  font-family:var(--sema-serif); font-weight:600; font-size:1.12rem; line-height:1.5; letter-spacing:.06em;
  color:var(--sema-ink); margin:0;
}
.sema-co-body .sema-co-store p{ margin:0; }
/* 公式リンク（外部）：静かなゴシック小＋外部を示す控えめな記号。可視文言は原稿のまま */
.sema-co-body .sema-co-store a{
  display:inline-flex; align-items:center; gap:.45em; white-space:nowrap;
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.05em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-co-body .sema-co-store a::after{
  content:"\2197"; color:var(--sema-bronze); font-size:.9em;   /* ↗ 外部を示す（内部→と区別） */
  transition:transform .25s var(--sema-ease);
}
.sema-co-body .sema-co-store a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-co-body .sema-co-store a:hover::after{ transform:translate(2px,-2px); }

/* --- お問い合わせのご案内（末尾導線）：静かな2窓口。大きなCTA帯にしない --- */
.sema-co-body .sema-co-contact__list{
  margin-top:1.6em; display:grid; gap:clamp(22px,3.2vw,34px);
}
.sema-co-body .sema-co-window{ padding-top:1.2em; border-top:1px solid var(--sema-line); }
.sema-co-body .sema-co-window h3{
  font-family:var(--sema-serif); font-weight:600; font-size:1.08rem; line-height:1.5; letter-spacing:.05em;
  color:var(--sema-ink); margin:0 0 .5em;
}
.sema-co-body .sema-co-window p{ color:var(--sema-ink-soft); font-size:.96rem; margin:0 0 .75em; }
.sema-co-body .sema-co-window p:last-child{ margin-bottom:0; }
/* 内部リンク（会社お問い合わせ／運営店舗一覧）：静かな矢印リンク */
.sema-co-body .sema-co-window a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.06em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-co-body .sema-co-window a::after{
  content:"\2192"; color:var(--sema-bronze); transition:margin .25s var(--sema-ease);  /* → 内部 */
}
.sema-co-body .sema-co-window a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-co-body .sema-co-window a:hover::after{ margin-left:.3em; }

/* =========================================================
   スマホ：PCの左右構成をそのまま縮めない。深緑チップ・面・整列・対等性・余韻を維持し、
   読み順（会社名→タイトル→リード→本文）を素直に縦へ。横スクロールは出さない。
   ========================================================= */
@media (max-width:767px){
  .sema-co-hero__title{ margin-left:clamp(10px,4vw,24px); }
  .sema-co-body{ max-width:none; }
  .sema-co-body .sema-co-lead{
    max-width:none;
  }
  /* 店舗行：店舗名の下に公式リンク（対等・面と罫線は維持） */
  .sema-co-body .sema-co-store{ gap:.4em; }
  .sema-co-body .sema-co-store p{ flex-basis:100%; }
}