/* =========================================================
  page-company.css
  - COMPANYページ専用（事故防止のため必ずスコープ）
========================================================= */

/* container幅：トップ寄せ（必要なら） */
body.page.page-company .container{
  max-width: 1120px;
}

/* =========================================================
  Typography（Company内の見出し整え）
========================================================= */
body.page.page-company .hero-title,
body.page.page-company .section-head .jp,
body.page.page-company .h2{
  font-family: "Noto Serif JP", serif;
}

/* リンク下線事故防止（必要なら） */
body.page.page-company a,
body.page.page-company a *{
  text-decoration: none !important;
}

/* =========================================================
  section-surface（Companyで使う面）
========================================================= */
body.page.page-company .section-surface{
  padding: 86px 0;
  position: relative;
  background:
    radial-gradient(960px 420px at 50% 12%, rgba(111,143,122,.10), transparent 62%),
    radial-gradient(820px 420px at 12% 52%, rgba(111,143,122,.06), transparent 62%),
    transparent;
}
body.page.page-company .section-surface::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: var(--noise);
  opacity:.55;
  mix-blend-mode:multiply;
}

/* 斜めカット（上下の面切り替え） */
body.page.page-company .diagonal{
  position:absolute;
  left:0; right:0;
  height: 34px;
  pointer-events:none;
  opacity:.85;
  z-index: 0;
}
body.page.page-company .diagonal.top{ top:-1px; }
body.page.page-company .diagonal.bottom{ bottom:-1px; }

body.page.page-company .diagonal.top::before,
body.page.page-company .diagonal.bottom::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,28 L1200,6 L1200,40 L0,40 Z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E")
    center / 1200px 40px repeat-x;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.05));
}

/* Companyのヒーロー（section-surface内）文字バランス */
body.page.page-company .company-hero{
  padding: 92px 0 70px;
  position: relative;
}
body.page.page-company .section-surface .hero-title{ margin: 0 0 10px; }
body.page.page-company .section-surface .hero-en{ margin: 0 0 14px; }
body.page.page-company .section-surface .hero-lead{
  margin: 0;
  max-width: 72ch;
  line-height: 2.0;
}

/* SP余白 */
@media (max-width: 600px){
  body.page.page-company .section-surface{ padding: 74px 0; }
  body.page.page-company .company-hero{ padding: 78px 0 60px; }
}

/* =========================================================
  Panel（Company内の情報パネル）
========================================================= */
body.page.page-company .panel{
  border-radius: 28px;
  background:
    radial-gradient(560px 260px at 14% 22%, rgba(47,127,111,.10), transparent 62%),
    rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.07);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  margin-top: 18px;
}
body.page.page-company .panel::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  background-image: var(--noise);
  mix-blend-mode:multiply;
}
body.page.page-company .panel > *{ position: relative; z-index: 1; }

@media (max-width: 600px){
  body.page.page-company .panel{ padding: 16px 14px 14px; }
}

/* =========================================================
  会社概要：カードグリッド
========================================================= */
body.page.page-company .spec-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 820px){
  body.page.page-company .spec-grid{ grid-template-columns: 1fr 1fr; }
}
body.page.page-company .spec{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 12px 26px rgba(0,0,0,.05);
  padding: 14px 14px 12px;
}
body.page.page-company .spec .k{ margin:0 0 6px; font-weight: 600; }
body.page.page-company .spec .t{
  margin:0;
  color: rgba(17,17,17,.74);
  line-height: 1.9;
}

/* =========================================================
  人物カード（役員/パートナー）
========================================================= */
body.page.page-company .people-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 820px){
  body.page.page-company .people-grid{ grid-template-columns: 1fr 1fr; }
}
body.page.page-company .p-card{
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  padding: 14px 14px 12px;
  overflow: hidden;
}
body.page.page-company .p-k{
  margin:0;
  font-size: 11.5px;
  letter-spacing:.18em;
  color: rgba(47,127,111,.95);
  text-transform: uppercase;
}
body.page.page-company .p-name{
  margin: 6px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(17,17,17,.90);
}
body.page.page-company .p-role{
  margin:0 0 8px;
  font-size: 13.5px;
  color: rgba(17,17,17,.68);
  line-height: 1.7;
}
body.page.page-company .p-desc{
  margin:0;
  font-size: 13.5px;
  color: rgba(17,17,17,.74);
  line-height: 1.95;
}
body.page.page-company .p-tags{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page.page-company .p-tags li{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  font-size: 12px;
  color: rgba(17,17,17,.70);
}

/* =========================================================
  代表紹介（写真 + メッセージ）
========================================================= */
body.page.page-company .rep-feature{
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(520px 240px at 12% 18%, rgba(47,127,111,.10), transparent 60%),
    rgba(255,255,255,.90);
  box-shadow: 0 16px 36px rgba(0,0,0,.07);
  padding: 16px 16px 14px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
body.page.page-company .rep-feature::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.14;
  background-image: var(--noise);
  mix-blend-mode:multiply;
}
body.page.page-company .rep-feature > *{ position: relative; z-index: 1; }

body.page.page-company .rep-k{
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: rgba(47,127,111,.95);
  text-transform: uppercase;
}
body.page.page-company .rep-body{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px){
  body.page.page-company .rep-body{ grid-template-columns: 1fr; }
}

body.page.page-company .rep-photo{
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  background: #fff;
}
body.page.page-company .rep-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
@media (max-width: 860px){
  body.page.page-company .rep-photo{ max-width: 420px; aspect-ratio: 16 / 9; }
}
body.page.page-company .rep-base{
  margin-top: 10px;
  padding: 10px 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}
body.page.page-company .rep-name{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(17,17,17,.90);
}
body.page.page-company .rep-role{
  margin: 0;
  font-size: 13.5px;
  color: rgba(17,17,17,.68);
  line-height: 1.7;
}

body.page.page-company .rep-right{
  display:grid;
  gap: 12px;
}
body.page.page-company .rep-message{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(0,0,0,.05);
  padding: 12px 12px 10px;
}
body.page.page-company .rep-message-k{
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: rgba(47,127,111,.95);
  text-transform: uppercase;
}
body.page.page-company .rep-message-t{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(17,17,17,.88);
  line-height: 1.6;
}
body.page.page-company .rep-message-d{
  margin: 0;
  font-size: 13.5px;
  color: rgba(17,17,17,.70);
  line-height: 1.9;
}

/* Note small */
body.page.page-company .note-small{
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(17,17,17,.60);
  line-height: 1.8;
}

/* =========================================================
  許認可：value cards
========================================================= */
body.page.page-company .value-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 820px){
  body.page.page-company .value-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
body.page.page-company .value-card{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 14px 30px rgba(0,0,0,.05);
  padding: 14px 14px 12px;
}
body.page.page-company .value-k{
  margin:0 0 6px;
  font-size: 11.5px;
  letter-spacing:.18em;
  color: rgba(47,127,111,.95);
  text-transform: uppercase;
}
body.page.page-company .value-t{
  margin:0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(17,17,17,.88);
  line-height: 1.6;
}
body.page.page-company .value-d{
  margin:0;
  font-size: 13.5px;
  color: rgba(17,17,17,.70);
  line-height: 1.9;
}

/* =========================================================
  Company：つなぎ目（diagonal）を“自然に溶ける”仕様に差し替え
  - SVG repeat / drop-shadow を廃止して、clip-path + fade に変更
========================================================= */

body.page.page-company{
  /* 紙面の白（paper系と馴染む値） */
  --paper-surface: rgba(255,255,255,.88);
}

/* diagonal本体：余計な影や繰り返し感を消す */
body.page.page-company .diagonal{
  height: 52px;              /* 帯っぽさを減らしつつ馴染ませる */
  opacity: 1;
  z-index: 0;
}

/* 既存SVGを無効化（上書き） */
body.page.page-company .diagonal.top::before,
body.page.page-company .diagonal.bottom::before{
  background: none !important;
  filter: none !important;
}

/* 新しい“面” */
body.page.page-company .diagonal::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--paper-surface);
}

/* ふわっと溶けるフェード（境界の硬さを消す） */
body.page.page-company .diagonal::after{
  content:"";
  position:absolute;
  inset:-10px 0; /* 少し広げて境界の硬さを軽減 */
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 55%,
    var(--paper-surface) 100%
  );
  opacity: .95;
  filter: blur(.6px);
}

/* 角度：TOP（次の面へ入っていく形） */
body.page.page-company .diagonal.top{
  top: -1px;
}
body.page.page-company .diagonal.top::before,
body.page.page-company .diagonal.top::after{
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 62%,
    0% 100%
  );
}

/* 角度：BOTTOM（次の面へ抜けていく形） */
body.page.page-company .diagonal.bottom{
  bottom: -1px;
}
body.page.page-company .diagonal.bottom::before,
body.page.page-company .diagonal.bottom::after{
  clip-path: polygon(
    0% 38%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* SP：少し薄く＆高さ抑え */
@media (max-width: 600px){
  body.page.page-company .diagonal{ height: 44px; }
  body.page.page-company .diagonal::after{
    inset:-8px 0;
    opacity: .90;
    filter: blur(.5px);
  }
}
/* =========================================================
  company: セクションのつなぎ目（帯）を消すパッチ
  - 1pxの隙間 / 背景レイヤーの端 / wave/diagonalの境界を重ねて吸収
========================================================= */

/* セクション同士を 1px だけ重ねて“継ぎ目”を消す */
.page-company .section-surface,
.page-company .section--paper{
  position: relative;
  z-index: 0;
}
.page-company .section-surface{ margin-bottom: -1px; }
.page-company .section--paper{ margin-top: -1px; }

/* wave / diagonal を 1px だけはみ出させて境界線を出さない */
.page-company .wave,
.page-company .diagonal{
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

/* すでに top/bottom クラスがある前提で“微調整” */
.page-company .wave--top{ top: -1px; }
.page-company .wave--bottom{ bottom: -1px; }
.page-company .diagonal.top{ top: -1px; }
.page-company .diagonal.bottom{ bottom: -1px; }

/* 念のため：セクションの背景が“端で切れて帯っぽく”ならないようにフェードを足す
   ※帯が強い場合だけ効かせたいので薄め */
.page-company .section--paper::before,
.page-company .section-surface::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-24px; bottom:-24px;   /* 上下を少し延長して境界をなじませる */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,0) 82%,
    rgba(255,255,255,.10)
  );
  z-index: 0;
  pointer-events:none;
}

/* =========================================================
  company：つなぎ目を根絶（セクション背景を廃止して body 背景に統一）
  - diagonal / wave を使わず、背景は body.page のみで連続させる
========================================================= */

/* 1) 切替パーツを無効化（帯の原因を消す） */
body.page.page-company .diagonal,
body.page.page-company .wave{
  display:none !important;
}

/* 2) セクション自体の“面”を持たせない（背景の切替をなくす） */
body.page.page-company .section-surface,
body.page.page-company .section--paper{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) セクションに付けているノイズやフェード疑似要素を止める */
body.page.page-company .section-surface::before,
body.page.page-company .section-surface::after,
body.page.page-company .section--paper::before,
body.page.page-company .section--paper::after{
  content:none !important;
}

/* 4) もし pages.css 側で section--paper に“帯っぽい線”がある場合の保険 */
body.page.page-company .section--paper{
  border:0 !important;
  box-shadow:none !important;
}

/* 5) セクション間の余白だけ整える（見た目のリズムは維持） */
body.page.page-company .section-surface{
  padding: 92px 0 72px;
}
body.page.page-company .section--paper{
  padding: 72px 0;
}

@media (max-width: 600px){
  body.page.page-company .section-surface{
    padding: 78px 0 60px;
  }
  body.page.page-company .section--paper{
    padding: 60px 0;
  }
}

/* =========================================================
   Company - Map
========================================================= */

body.page-company .map-embed{
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

body.page-company .map-embed iframe{
  display:block;
  width:100%;
  height:360px;
}

@media (max-width:768px){
  body.page-company .map-embed iframe{
    height:260px;
  }
}