@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/company.css ─ 会社情報ページ固有

   0. ページヒーロー（会社情報の変形：左＝ページ名、右下＝会社を象徴する3項目）
   1. セクション番号（01〜05）
   2. 会社概要（PC：左＝見出し／右＝表）
   3. 活動イメージ（写真3点の編集的な組み）
   4. 代表者プロフィール（写真＋氏名＋経歴＋注記）
   5. 代表挨拶（写真なし・文章が主役）
   6. 社名・ロゴに込めた意味
   7. 所在地
   8. レスポンシブ

   代表者写真・氏名・個人の経歴の見た目は components.css（10章）にある。
   このページでは海の写真を使わない（TOPの黒潮セクションと役割が重なるため）。
   写真は4点。company-cafe / company-seminar / company-field-support＝会社が関わる
   複数の場面のイメージ（1つの組みとして見せる）、fukumoto.jpg＝代表者本人（実写）。
   代表者写真は 02 代表者プロフィールで出し、03 代表挨拶は写真なしで文章を主役にする。
   ============================================================= */

/* -------------------------------------------------------------
   0. ページヒーロー（会社情報の変形）
   共通の .page-hero（components.css）を、このページだけ上書きする。
   PC ：高さを抑え、左にページ名とリード、右下に会社名・所在地・設立年を
        細い罫線で静かに置く。写真もロゴも使わず、濃紺＋流線＋書体で成立させる。
   SP ：768px以下は共通ヒーローと同じ縦構成に戻し、右下の3項目は出さない
        （直下の会社概要に同じ情報があるため）。
   ------------------------------------------------------------- */
.page-hero-company{
  padding:calc(var(--header-h) + clamp(36px,4.2vw,58px)) 0 clamp(40px,4.4vw,60px);
}
.page-hero-company .page-hero-flow{bottom:-16%;height:88%}
.page-hero-company .page-hero-inner{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(32px,5vw,96px);align-items:end;
}
.page-hero-company .page-hero-title{font-size:clamp(28px,3.8vw,48px)}
.page-hero-company .page-hero-lead{max-width:34em}

/* 右下：会社を象徴する3項目。ラベル（英字・金）と値（明朝）を罫線で区切る */
.page-hero-facts{
  display:grid;grid-template-columns:auto minmax(0,1fr);
}
.page-hero-facts > div{display:contents}
/* 罫線を途切れさせないため、列の間隔は gap ではなく dd の左余白でつくる */
.page-hero-facts dt,.page-hero-facts dd{
  padding-block:12px;border-top:1px solid rgba(255,255,255,.2);
  line-height:25px;
}
.page-hero-facts dd{padding-left:22px}
.page-hero-facts > div:last-child :is(dt,dd){border-bottom:1px solid rgba(255,255,255,.2)}
.page-hero-facts dt{
  font-family:var(--font-en);font-size:9.5px;font-weight:600;letter-spacing:.24em;
  white-space:nowrap;color:var(--gold-light);
}
.page-hero-facts dd{font-size:14px;letter-spacing:.1em;color:#fff}
/* 読み込み後、3項目だけが少し遅れて静かに現れる（JSが動く環境のみ） */
.js-motion .page-hero-facts{
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s;
}
.js-motion.is-ready .page-hero-facts{opacity:1;transform:none}

/* -------------------------------------------------------------
   1. セクション番号
   見出しラベルの先頭に 01〜05 を置き、ページの構造を読みやすくする。
   ------------------------------------------------------------- */
.eyebrow-num{
  font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1;
  color:var(--gold-text);
}
.eyebrow-light .eyebrow-num{color:var(--gold-light)}

/* -------------------------------------------------------------
   2. 会社概要
   PC ：左＝見出しと「事業内容を見る」、右＝表。ヒーロー直下の余白を抑え、
        パンくず → 会社概要 が自然につながるようにする。
   SP ：見出し → 表 → リンク の縦積み。
   下の余白は控えめにし、続く活動イメージへ間を空けすぎない。
   ------------------------------------------------------------- */
.overview{
  background:var(--paper);
  padding-block:clamp(52px,6.2vw,90px) clamp(44px,5.4vw,80px);
}
/* 2行目を 1fr にして表の高さの余りを2行目へ寄せ、リンクが見出しの直下に付くようにする */
.overview-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:auto 1fr;
  align-content:start;align-items:start;
  gap:clamp(20px,2.6vw,36px) clamp(28px,4.6vw,76px);
}
.overview-head{grid-column:1;grid-row:1}
.overview-grid .spec-table{grid-column:2;grid-row:1 / 3}
.overview-link{grid-column:1;grid-row:2}

.spec-table{border-top:1px solid var(--line)}
.spec-table th,.spec-table td{
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.spec-table th{
  width:clamp(110px,12vw,170px);padding-right:clamp(16px,3vw,40px);
  font-size:13.5px;font-weight:500;letter-spacing:.12em;line-height:2;color:var(--muted);
}
.spec-table td{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft)}
.spec-table td ul{display:grid;gap:4px}
.spec-table td li{position:relative;padding-left:22px}
.spec-table td li::before{
  content:"";position:absolute;left:0;top:1em;width:11px;height:1px;background:var(--gold);
}

/* -------------------------------------------------------------
   3. 活動イメージ（写真3点の編集的な組み）
   01 会社概要（事実）→ 02 代表者プロフィール（人物）へ、ページのリズムを切り替える。
   1点だけを大きく見せず、地域の商い・学びの場・支援の実務という
   複数の場面を1つのまとまりとして見せる（セミナー単独の印象にしない）。
   PC ：左＝大きめ1点（3:2）、右＝上下2点（3:2）。右の2点で行の高さが決まり、
        左の1点はそれに合わせて上下をごくわずかに切る（切れ幅は列の間隔ぶんだけ）。
   SP ：上＝大きめ1点、下＝2点並び。すべて3:2のまま切り抜かない。
   帯の背景は上が紙色・下が白。境目を写真の下側に通し、写真が面をまたぐ見せ方にする。
   ------------------------------------------------------------- */
.activity-band{
  --activity-pb:clamp(48px,5.6vw,80px);    /* 帯の下余白（続くプロフィールの上余白と合わせて約170px） */
  --activity-split:120px;                  /* 写真の下端から境目までの高さ */
  padding-block:0 var(--activity-pb);
  background:linear-gradient(180deg,
    var(--paper) 0 calc(100% - var(--activity-pb) - var(--activity-split)),
    var(--white) calc(100% - var(--activity-pb) - var(--activity-split)) 100%);
}
.activity-band .eyebrow{margin-bottom:clamp(22px,2.6vw,30px)}
.activity-grid{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);
}
.activity-grid figure{position:relative;overflow:hidden;margin:0;min-height:0;background:var(--tint)}
.activity-grid img{display:block;width:100%;height:100%;object-fit:cover}
/* 左の大きめ1点：行の高さに従わせるため、画像は枠に貼り付ける */
.activity-main{grid-row:1 / 3}
.activity-main img{position:absolute;inset:0}
.activity-sub{aspect-ratio:3 / 2}
/* 表示領域に入ると3点が順に現れ（base.css の data-reveal-group）、写真はわずかに寄りが戻る */
.js-motion .activity-grid img{transform:scale(1.04);transition:transform 1.8s var(--ease)}
.js-motion .activity-grid.is-revealed img{transform:scale(1)}

/* -------------------------------------------------------------
   4. 代表者プロフィール
   「この人が誰か」を先に理解させる。写真は実写（AI生成・顔の改変なし）。
   会社の提供業務と、代表者個人の経歴を視覚的に分離する。
   PC：左＝写真（2行ぶんをまたぐ）、右上＝ラベル・肩書・氏名、右下＝経歴・注記。
   SP：ラベル・氏名 → 写真 → 経歴・注記（HTMLの並び）。活動写真3点の直後でも
       「誰の写真か」が先に分かるようにする。
   ------------------------------------------------------------- */
.profile-section{
  background:var(--white);
  padding-block:clamp(56px,6.2vw,88px) clamp(64px,7.4vw,108px);
}
.profile-grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:auto 1fr;
  align-content:start;align-items:start;
  gap:0 clamp(32px,4.6vw,76px);
}
.profile-visual{grid-column:1;grid-row:1 / 3;position:relative}
.profile-head{grid-column:2;grid-row:1}
.profile-body{grid-column:2;grid-row:2}
.profile-title{letter-spacing:.14em}
/* 見出しの中の肩書き（小さく上に置く） */
.profile-role{
  display:block;margin-bottom:12px;
  font-size:12px;letter-spacing:.16em;line-height:1.6;color:var(--muted);
}
.profile-section .profile{margin-top:clamp(26px,3.2vw,40px)}
.profile-section .profile li{font-size:14.5px}
/* 誤認防止注記：経歴の面（カード）とは別物に見せる。
   背景はページ地色のまま、左に細い金の縦罫だけを置き、小さめの補足文字で読ませる。 */
.profile-caution{
  margin-top:clamp(22px,2.8vw,32px);
  padding:2px 0 2px clamp(16px,1.8vw,22px);
  border-left:1px solid var(--gold);
}
.profile-caution .note{font-size:13px;line-height:1.95;letter-spacing:.05em}

/* -------------------------------------------------------------
   5. 代表挨拶
   写真なし。文章を主役に、設立の背景と想いを静かに読ませる。
   氏名・肩書は 02 で示すため、末尾の署名は置かない。
   PC：左＝見出し、右＝本文（1行の長さを抑える）。SP：見出し → 本文。
   ------------------------------------------------------------- */
.greeting{background:var(--paper);padding-top:clamp(64px,7.4vw,108px)}
.greeting-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.6vw,76px);align-items:start;
}
.greeting-head .sec-title{font-size:clamp(25px,3vw,38px)}
/* 本文の開始位置：ラベルの高さぶん（見出しの上端）に加えて32px下げ、
   見出しと本文が横並びの表に見えないよう、読み始めに呼吸をつくる（PCのみ） */
.greeting-body{padding-top:calc(clamp(0px,2.4vw,34px) + 32px)}
.greeting-body .prose{max-width:36em}
.greeting-body .prose > p{font-size:15.5px}

/* -------------------------------------------------------------
   6. 社名・ロゴに込めた意味
   海の写真は使わず、ロゴと余白で見せる。
   ------------------------------------------------------------- */
.naming{position:relative;overflow:hidden;background:var(--journey);color:#fff}
/* 背景へ薄く敷くロゴ */
.naming-watermark{
  position:absolute;right:-4%;bottom:-14%;z-index:0;
  width:min(56%,620px);height:auto;
  filter:brightness(0) invert(1);opacity:.07;pointer-events:none;
}
.naming-inner{position:relative;z-index:1}
.naming-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,5vw,80px);align-items:start;
}
.naming .sec-title{font-size:clamp(26px,3.6vw,46px)}
.naming .prose{margin-top:clamp(24px,3vw,36px)}
.naming-logo{
  display:grid;justify-items:center;gap:22px;
  padding:clamp(30px,4vw,48px) clamp(24px,3vw,40px);
  border:1px solid rgba(217,189,127,.42);border-radius:2px;
  background:rgba(6,22,31,.28);
}
.naming-logo img{width:min(190px,60%);height:auto;filter:brightness(0) invert(1)}
.naming-logo figcaption{
  font-size:13.5px;line-height:2;letter-spacing:.08em;color:var(--on-dark);text-align:center;
}

/* -------------------------------------------------------------
   7. 所在地
   Google Mapsの地図を埋め込む（2026-09-14 方針変更）。住所テキストと外部リンクも併記する。
   PC ：左＝見出し・住所・外部リンク・補足、右＝地図。地図の上端は見出しの高さに揃える。
   SP ：所在地情報 → 外部リンク → 地図 → 補足（HTMLの並び）。
   地図の大きさは --map-h で決める（PC 300〜360px／SP 260〜300px）。
   ------------------------------------------------------------- */
.access{background:var(--white)}
.access-grid{
  --map-h:clamp(300px,25vw,360px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
  align-content:start;align-items:start;
  gap:0 clamp(28px,4vw,64px);
}
.access-info{grid-column:1;grid-row:1}
.access-map{grid-column:2;grid-row:1 / 3;margin-top:clamp(0px,2.4vw,34px)}
.access-note{grid-column:1;grid-row:2}
/* 地図の枠。影や角丸は付けず、細い罫線だけ */
.access-map{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--tint)}
.access-map iframe{display:block;width:100%;height:var(--map-h);border:0}
.access-address{
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--gold);
}
.access-address p{font-size:clamp(17px,1.9vw,21px);line-height:1.95;letter-spacing:.08em}
.access-address .label{
  display:block;margin-bottom:10px;
  font-family:var(--font-en);font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--gold-text);
}
.access-links{margin-top:clamp(20px,2.4vw,28px)}
.access-links .text-link{color:var(--blue)}
.access-note{margin-top:clamp(22px,2.6vw,32px)}

/* -------------------------------------------------------------
   8. レスポンシブ
   ------------------------------------------------------------- */
@media (max-width:1180px){
  .page-hero-company .page-hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
}
@media (max-width:1024px){
  /* 会社概要は1カラムへ。見出し → 表 → リンク の順（HTMLの並び）に戻す */
  .overview-grid{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .overview-head,.overview-grid .spec-table,.overview-link{grid-column:auto;grid-row:auto}
  .overview-grid .spec-table{margin-top:clamp(30px,4vw,48px)}
  .overview-link{margin-top:26px}
  .profile-grid,.greeting-grid,.naming-grid,.access-grid{grid-template-columns:1fr}
  /* プロフィールは ラベル・氏名 → 写真 → 経歴・注記 の縦積みへ */
  .profile-grid{grid-template-rows:none}
  .profile-visual,.profile-head,.profile-body{grid-column:auto;grid-row:auto}
  .profile-visual{max-width:420px;margin-top:clamp(24px,3vw,36px)}
  .profile-section .profile{margin-top:clamp(28px,3.4vw,40px)}
  .greeting-body{padding-top:0}
  .naming-logo{max-width:420px}
  /* 所在地は 所在地情報 → 外部リンク → 地図 → 補足 の縦積みへ */
  .access-grid{grid-template-rows:none}
  .access-info,.access-map,.access-note{grid-column:auto;grid-row:auto}
  .access-map{margin-top:clamp(28px,4vw,40px)}
}
@media (max-width:768px){
  /* SP：共通ヒーローと同じ縦構成に戻す。右下の3項目は出さない */
  .page-hero-company{padding:calc(var(--header-h) + clamp(52px,8vw,96px)) 0 clamp(52px,7vw,88px)}
  .page-hero-company .page-hero-flow{bottom:-10%;height:78%}
  .page-hero-company .page-hero-inner{display:block}
  .page-hero-facts{display:none}
  /* 活動イメージ：上＝大きめ1点、下＝2点並び。すべて3:2のまま */
  .activity-band{--activity-pb:clamp(56px,7vw,72px);--activity-split:64px}
  .activity-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
  .activity-main{grid-column:1 / -1;grid-row:1;aspect-ratio:3 / 2}
  /* 地図はSPでは少し低くする */
  .access-grid{--map-h:clamp(260px,68vw,300px)}
}
@media (max-width:600px){
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block;width:auto}
  .spec-table tr{padding-block:18px;border-bottom:1px solid var(--line)}
  .spec-table th{padding:0 0 6px;border-bottom:0;font-size:12px}
  .spec-table td{padding:0;border-bottom:0;font-size:14.5px}
  .greeting-body .prose > p{font-size:14.5px}
  .naming-watermark{width:78%;right:-14%;bottom:-8%}
  .access-address p{font-size:16px}
}