@charset "UTF-8";

/* =========================================================
   会社概要ページ（page-company.php / slug: company）
   DOM構造は Media（archive.php / media.css）をベンチマークにミラー。
   クラス名はページ固有（company_*）。body.loaded(fadeIn)/js_page_top は main.js（全ページ共通）。
========================================================= */

/* ※ page_top は共通パーツ化（template-parts/page-top.php + common.css の .page_top）に移行 */

/* ラッパー（= media_wrapper 相当）。
   下端を丸く（= .media_wrapper と揃える。overflow:hidden で暗色 inner の下端をクリップ）。PC 80px / SP 40px。 */
.company_wrapper {
  position: relative;
  background-color: #f3f0ed;
  overflow: hidden;
  border-radius: 0 0 80px 80px;
}

/* 背景の侍ウォーターマーク（= media_bg 相当。既存 media 画像を流用） */
.company_bg {
  background: url(../img/media/media_bg_passive.png) top / cover no-repeat;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
body.loaded .company_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/media/media_bg_active.png) top / cover no-repeat;
  opacity: 0;
  transform: scale(1.05);
  animation: companyFadeInScale 1.2s ease 0.5s forwards;
}
@keyframes companyFadeInScale {
  0% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* タイトル（= media_title_wrap / media_title 相当） */
.company_title_wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.company_title {
  margin: 190px 110px 90px;
  font-size: 120px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #000;
  text-align: center;
  opacity: 0;
}
body.loaded .fadeIn {
  animation: companyFadeIn 0.8s ease 0.6s forwards;
}
@keyframes companyFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* メイン（= .media 相当。屋根は media と同様に background-image + padding-top で配置）
   ※ background-color は付けない（屋根画像の左右にグレー帯が出るため。暗色は company_inner 側で持つ） */
.company {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-image: url(../img/company/company_roof_pc.webp);
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 24vw; /* 屋根（富士）の高さ分の余白。aspect 3840:963 ≒ 25vw */
  color: #fff;
}

/* 暗色の帯（= media_inner 相当。幅は持たせず全幅、背景色はここで） */
.company_inner {
  background-color: #1a1a1a;
  padding: 40px 40px 140px;
}

/* 本文の幅（= media_inner_content 相当） */
.company_inner_content {
  max-width: 800px;
  margin: 0 auto;
}
/* 見出し（= media_head 流用） */
.company .company_head {
  margin-top: 100px;
  margin-bottom: 50px;
  font-size: 24px;
  letter-spacing: .19em;
}
.company .company_head::before {
  content: "◆";
  display: inline-block;
  font-size: .6em;
  color: #e3c192;
  margin-right: .5em;
  transform: translateY(-.2em);
}

/* テーブル */
.company_table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Yuji Syuku", serif;
  font-feature-settings: "palt" 1;
}
.company_table th,
.company_table td {
  border-top: 1px solid #d6d3d0;
  border-bottom: 1px solid #d6d3d0;
  padding: 10px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  color: #fff;
}
.company_table th {
  width: 200px;
  background-color: #272727;
  border-right: 1px solid #fff;
  white-space: nowrap;
}
.company_table_sub {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.71;
}
.company_table_list {
  list-style: disc;
  padding-left: 24px;
}
.company_table_book {
  display: flex;
  align-items: center; /* PC: テキストを画像の上下中央に揃える */
  gap: 20px;
}
.company_table_book_img {
  flex: 0 0 128px; /* PC: 画像は固定幅128px（native 400×640 なので拡大してもボケない） */
}
.company_table_book_img img {
  display: block;
  width: 100%;
  height: auto;
}
.company_table_book_txt {
  flex: 1 1 auto;
}

/* 最下部（著書の行）のボーダーを消す（PCは th/td とも下線なし） */
.company_table tr:last-child th,
.company_table tr:last-child td {
  border-bottom: none;
}
/* PC: 最下部（著書）の行に下線を引く（上の罫線と同色） */
@media (min-width: 751px) {
  .company_table tr:last-of-type {
    border-bottom: 1px solid #d6d3d0;
  }
}

/* =========================================================
   SP
========================================================= */
@media (max-width: 750px) {
  /* 黒背景の下端を丸く（= .media_wrapper SP と揃える。overflow:hidden で暗色 inner の下端をクリップ） */
  .company_wrapper {
    border-radius: 0 0 40px 40px;
  }
  .company_title {
    margin: 110px 16px 50px;
    font-size: min(48px, 12vw);
  }
  .company {
    background-image: url(../img/company/company_roof_sp.webp);
    padding-top: 45vw; /* SP屋根 aspect 1125:531 ≒ 47vw */
  }
  .company_inner {
    /* padding は calc(@2x/750*100%)（% は親=全幅 .company の幅基準。750基準で 375→24/20/80px, 750→48/40/160px） */
    padding: calc(48 / 750 * 100%) calc(40 / 750 * 100%) calc(160 / 750 * 100%);
  }
  .company .company_head {
    margin-bottom: 4.2666666667vw;
    font-size: 5.3333333333vw;
  }

  /* テーブルは縦積み */
  .company_table,
  .company_table tbody,
  .company_table tr,
  .company_table th,
  .company_table td {
    display: block;
    width: 100%;
  }
  .company_table th {
    width: 100%;
    border-right: none;
  }
  .company_table th,
  .company_table td {
    border-top: none;
  }
  .company_table tr:first-child th {
    border-top: 1px solid #d6d3d0;
  }
  /* SPフォント・paddingは可変に（Figma値px をキャップ、その倍/750*100vw を流動項） */
  .company_table th,
  .company_table td {
    font-size: min(32px, 32 / 750 * 100vw);
    padding: min(20px, 20 / 750 * 100vw);
  }
  .company_table_sub {
    font-size: min(28px, 28 / 750 * 100vw);
  }
  .company_table_book {
    align-items: flex-start; /* SP: テキストは画像の上端に揃える（現状維持） */
    gap: 14px;
  }
  .company_table_book_img {
    flex: 0 0 36%; /* SP: 画像幅は可変36%のまま（現状維持） */
  }
  /* SPは th(著書ラベル)の下線は残し、最下部(td=書籍)のみ下線なし */
  .company_table tr:last-child th {
    border-bottom: 1px solid #d6d3d0;
  }
}