/* =========================================================
   会社概要ページ（/company/）本文スタイル
   Illustratorデザイン（会社概要 :company:.png）の実寸をそのまま再現
   デザイン2000px幅 ＝ 実装1500px幅（×0.75換算）
   ヘッダー・フッター・サイドバーはマッキーさんの共通部品のため、ここには書かない
   ========================================================= */

:root{
  --blue:#0954A5;        /* 見出し・項目名（公開中のトップ・/kanri/ と統一・和田さん確定 2026/08/27） */
  --rule:#3F7EC1;        /* 表の罫線 */
  --rule-top:#BFD4EA;    /* 表のいちばん上の薄い罫線 */
  --text:#333333;        /* 本文（公開中サイトと統一・和田さん確定 2026/08/27） */

  /* ★見出しの字間（全ページ・全セクション共通）
     見出しは詰めない。ふつうに空ける（和田さん指示・2026/08/27） */
  --h-tracking:.02em;
}

.cmp{
  font-family:"Noto Sans JP","Source Han Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.cmp *{box-sizing:border-box;}

/* ---------- ページタイトル（写真2枚＋会社概要） ---------- */
.cmp-hero{
  position:relative;
  width:100%;
  height:393px;
  display:flex;
  overflow:hidden;
}
.cmp-hero img{display:block;width:100%;height:393px;object-fit:cover;}
/* 「会社概要」の文字は写真に含まれているため、見出しは読み上げ・検索向けに隠して置く */
.cmp-hero__ttl{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 2カラム ---------- */
.cmp-wrap{
  width:1121px;
  margin:0 auto;
  display:flex;
  gap:3px;
  align-items:flex-start;
}
.cmp-main{width:842px;flex:0 0 842px;min-width:0;padding-top:123.75px;}
.cmp-side{width:276px;flex:0 0 276px;padding-top:123.75px;}

/* サイドバー（マッキーさん担当のためダミー） */
.cmp-side__dummy{
  border:2px dashed #bfc6cc;border-radius:6px;background:#f4f6f8;
  padding:20px 12px;text-align:center;color:#7d858c;font-size:12px;line-height:1.9;
}
.cmp-side__dummy strong{display:block;font-size:13px;color:#5c646b;margin-bottom:8px;}
.cmp-side__dummy i{display:block;height:44px;background:#e2e7eb;border-radius:4px;margin:8px 0;}

/* ---------- ご挨拶 ---------- */
.cmp-label{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:var(--blue);
  line-height:1;
}
.cmp-greet-ttl{
  margin:59.25px 0 0;
  font-size:31.5px;
  font-weight:700;
  color:var(--blue);
  /* ★2026/08/31 クライアント指示で2行に改行。1行のときの line-height:1 だと
     2行目が詰まりすぎるため、行間だけ 1.45 にした。文字サイズ・色・字間は変えていない */
  line-height:1.45;
  letter-spacing:var(--h-tracking);
  /* 冒頭のカギカッコを外にぶら下げ、文字の左端を本文とそろえる
     ★2行になったので、2行目にはぶら下げがかからないよう
       text-indent ではなく1行目だけに効く形のまま維持 */
  text-indent:-.55em;
}
.cmp-greet-body{
  margin:24.25px 0 0;
  font-size:14.4px;
  line-height:39px;   /* デザインの行ピッチ */
}
.cmp-greet-body p{margin:0;}

/* ---------- 代表メッセージ ---------- */
.cmp-ceo{
  position:relative;
  margin:50.75px 0 0;
  min-height:285px;
}
.cmp-ceo__text{
  width:400px;
  font-size:12.5px;
  line-height:28.5px;
}
.cmp-ceo__figure{
  position:absolute;
  left:374.25px;
  top:0;
  width:318.75px;
  margin:0;
}
.cmp-ceo__photo{display:block;width:100%;height:253.5px;}
.cmp-ceo__photo img{display:block;width:100%;height:100%;object-fit:cover;}
.cmp-ceo__cap{
  margin:25.5px 0 0;
  text-align:right;
  font-size:14px;
  font-weight:500;
  line-height:1;
}

/* ---------- ロゴ2点 ---------- */
.cmp-logos{
  display:flex;
  gap:15px;
  margin:31.5px 0 0;
}
/* ロゴは枠線ごとデザインから切り出しているので、CSSで枠を描かない */
/* ★和田さん指示 2026/08/29：2つのロゴにリンクを貼った。
   （左＝アットエアコンTOP／右＝シャッター屋.com）
   flexの子が img から a に変わるので、a に同じ寸法を持たせて見た目を変えない。 */
.cmp-logos a{display:block;width:250.5px;height:77.25px;line-height:0;}
.cmp-logos img{display:block;width:250.5px;height:77.25px;}

/* ---------- 会社情報の表 ---------- */
/* ★罫線は本文カラム（842px）いっぱいではなく、デザイン実測の 754px で止める。
   （和田さん指示 2026/08/28「本文テキストの右の空白に線が走っているので消してほしい」）
   デザイン実測：会社概要.ai の罫線は 12本とも x=275.2 / 幅736.1
   本文の折り返しを1文字も変えないよう、border ではなく疑似要素で線を引いている。 */
.cmp-dl{
  margin:121.25px 0 0;
  padding:1px 0;          /* 元の border-top / border-bottom 1px ぶんの高さを保つ */
  position:relative;
}
.cmp-dl::before,
.cmp-dl::after{content:"";position:absolute;left:0;width:754px;height:1px;}
.cmp-dl::before{top:0;background:var(--rule-top);}
.cmp-dl::after{bottom:0;background:var(--rule);}
.cmp-dl__row{
  display:flex;
  padding:14.25px 0 16px;  /* 元の 15px ＋ 線1pxぶん。見た目の高さは変わらない */
  position:relative;
}
.cmp-dl__row::after{
  content:"";position:absolute;left:0;bottom:0;
  width:754px;height:1px;background:var(--rule);
}
.cmp-dl__row:last-child{padding-bottom:15px;}
.cmp-dl__row:last-child::after{display:none;}
.cmp-dl__t{
  flex:0 0 229.5px;
  font-size:14.7px;
  font-weight:700;
  color:var(--blue);
  line-height:1.4;
}
.cmp-dl__d{
  flex:1 1 auto;
  min-width:0;
  font-size:13.7px;
  line-height:37px;   /* デザインの行ピッチ */
}
/* 営業時間の欄だけ行間が狭い */
.cmp-dl__d--narrow{line-height:31.5px;}
.cmp-dl__d p{margin:0;}

/* ---------- 楽に頼めて（全幅・ページ中央） ---------- */
.cmp-closing{
  margin:198.75px 0 0;
  text-align:center;
}
.cmp-spbr{display:none;}   /* PCでは1行 */
.cmp-closing__h{
  margin:0;
  font-size:46.5px;
  font-weight:900;
  color:var(--blue);
  line-height:1;
  letter-spacing:var(--h-tracking);
}
.cmp-closing__p{
  width:934.5px;
  margin:35.5px auto 0;
  font-size:13.75px;
  line-height:27.75px;
  color:#000;
  text-align:left;
}

/* 全幅の写真（2枚が1枚の帯になっている） */
.cmp-photos2{
  margin:78.45px 0 0;
  height:309.75px;
}
.cmp-photos2 img{display:block;width:100%;height:309.75px;object-fit:cover;}

/* CTAまでの間隔 */
.cmp-cta{margin-top:111px;}

/* このページの上部へ */
.cmp-pagetop{
  width:1110px;margin:40px auto 0;text-align:right;
}
.cmp-pagetop a{
  display:inline-block;background:#eef1f4;color:#43505c;
  font-size:12px;padding:9px 22px;border-radius:3px;text-decoration:none;
}

/* =========================================================
   スマホ（768px以下）
   ========================================================= */
@media (max-width:768px){
  .cmp-hero{height:180px;}
  .cmp-hero img{height:180px;}
  .cmp-hero__ttl{font-size:25px;letter-spacing:.12em;text-indent:.12em;}
  .cmp-wrap{
    display:block;
    width:auto;
    padding:0 8%;
  }
  .cmp-main{width:auto;flex:none;padding-top:44px;}
  /* スマホではサイドバーはフッターの中に入る（共通部品）ので、ページ側には出さない */
  .cmp-side{display:none;}
  .cmp-label{font-size:16px;}
  .cmp-greet-ttl{
    margin-top:26px;
    font-size:22px;
    line-height:1.55;
  }
  .cmp-greet-body{
    margin-top:24px;
    font-size:14.5px;
    line-height:2.05;
  }
  .cmp-greet-body br{display:none;}
  .cmp-ceo{margin-top:36px;min-height:0;}
  .cmp-ceo__text{width:auto;font-size:14px;line-height:2.05;}
  .cmp-ceo__text br{display:none;}
  .cmp-ceo__figure{position:static;left:auto;width:100%;margin-top:22px;}
  .cmp-ceo__photo{height:auto;aspect-ratio:425/338;}
  .cmp-ceo__photo img{height:auto;aspect-ratio:425/338;}
  .cmp-ceo__cap{margin-top:12px;font-size:14px;}
  .cmp-logos{margin-top:24px;gap:10px;}
  .cmp-logos a{width:calc(50% - 5px);height:auto;}
  .cmp-logos a img{width:100%;height:auto;}
  .cmp-logos > img{width:calc(50% - 5px);height:auto;}
  .cmp-dl{margin-top:44px;}
  /* スマホでは線を画面幅いっぱいに戻す */
  .cmp-dl::before,
  .cmp-dl::after,
  .cmp-dl__row::after{width:100%;}
  .cmp-dl__row{display:block;padding:16px 0 17px;}
  .cmp-dl__row:last-child{padding-bottom:16px;}
  .cmp-dl__t{margin-bottom:6px;font-size:14px;}
  .cmp-dl__d{font-size:14px;line-height:2.05;}
  .cmp-dl__d--narrow{line-height:1.9;}
  .cmp-closing{margin-top:60px;padding:0 8%;}
  .cmp-closing__h{font-size:24px;line-height:1.5;}
  .cmp-spbr{display:inline;}   /* スマホでは2行に固定 */
  .cmp-closing__p{width:auto;margin-top:22px;font-size:14px;line-height:2.05;}
  .cmp-photos2{height:auto;margin-top:26px;}
  .cmp-photos2 img{height:auto;aspect-ratio:2000/413;}
  /* スマホのCTAは上100px・左右余白なし（cta.css 側で指定・全ページ共通） */
  .cmp-pagetop{width:auto;padding:0 8%;margin-top:28px;}
}

/* ★2026/09/03 修正：この754pxブロックがスマホ用メディアクエリの「外」に書かれていたため、
   スマホにも754pxが効いて、ページ全体が横に広がる崩れが起きていた（会社概要でクライアント指摘）。
   PC専用（min-width:769px）で包んで、スマホには効かないようにした。中身は1文字も変えていない。 */
@media (min-width:769px){
/* ★全ページ共通ルール（2026/08/28 和田さん確定）本文ブロックは754px。
   842px（本文カラムいっぱい）にしない。サイドバーに接触して見えるため。
   ※トップページと、サイドバーが無いページは対象外。 */
.cmp-main .cmp-label,
.cmp-main .cmp-greet-ttl,
.cmp-main .cmp-greet-body,
.cmp-main .cmp-greet-body p,
.cmp-main .cmp-ceo,
.cmp-main .cmp-logos,
.cmp-main .cmp-dl,
.cmp-main .cmp-dl__row{width:754px;}
}