/************************************************************
 * page-company.php 専用CSS（代表者挨拶＆会社情報テーブル）
************************************************************/

/* ========== 共通 ========== */
:root { --header-h: 0px; }

body.page-template-page-company-php .site-main,
body.page-template-page-company-php #primary,
body.page-template-page-company-php .content-area,
body.page-template-page-company-php main.page-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ========== HERO ========== */
body.page-template-page-company-php .hero-section{
  position: relative;
  background-image: url("../img/company.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;               
  place-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  min-height: 400px;
  margin-top: 0 !important;                             
  padding-top: calc(var(--header-h) + 20px) !important; 
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

body.page-template-page-company-php .hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.4);
  z-index:0;
}

body.page-template-page-company-php .hero-content{
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

body.page-template-page-company-php .hero-title{
  font-size: 28px;
  margin-bottom: .5rem;
  color: #0a2f73;
  text-shadow: 1px 1px 2px rgba(255,255,255,.8);
}

body.page-template-page-company-php .hero-subtitle{
  font-size: 15px;
  color:#444;
  text-shadow: 1px 1px 2px rgba(255,255,255,.8);
  margin: 0;
}


body.page-template-page-company-php .hero-section + .company-info-section { 
  margin-top: 0 !important; 
}

/* ========== 会社情報セクション ========== */
body.page-template-page-company-php .company-info-section {
  background-color: #fff;
  padding: 60px 0;
  text-align: center;
}

body.page-template-page-company-php .company-info-section .section-title {
  font-size: 2rem;            
  color: #002b7f;
  margin-bottom: 2rem;
}

body.page-template-page-company-php .company-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 90%;
  max-width: 700px;
  font-size: 0.95rem;
}

body.page-template-page-company-php .company-table th,
body.page-template-page-company-php .company-table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  text-align: left;
}

body.page-template-page-company-php .company-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  width: 30%;
  color: #002b7f;
}


/* ========== 代表者セル（表内） ========== */

body.page-template-page-company-php .company-table .rep-cell,
body.page-template-page-company-php .company-table .rep-cell *{
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-weight: 400;
}

body.page-template-page-company-php .company-table .rep-flex{
  display: inline-flex;
  flex-direction: column;
  align-items: center;  
  gap: 6px;
}

body.page-template-page-company-php .company-table .rep-name{
  line-height: 1.6;
  letter-spacing: .02em;
  text-align: center;
  width: 100%;
}

body.page-template-page-company-php .company-table .rep-sign{
  display: block;
  height: 2em;
  width: auto;
  object-fit: contain;
  margin: 0 auto;      
}


/* ========== スマホ調整（代表者セル表） ========== */
@media (max-width: 768px){

  body.page-template-page-company-php .hero-section{
    min-height: 300px;
    padding-top: calc(var(--header-h) + 16px) !important;
    padding-bottom: 36px !important;
    background-position: center;
  }

  body.page-template-page-company-php .hero-title{
    font-size: 22px !important;
    line-height: 1.35;
    margin-bottom: .5rem;
    color: #0a2f73;
    text-shadow: 1px 1px 2px rgba(255,255,255,.8);
    word-break: keep-all;
    text-wrap: balance;
  }

  body.page-template-page-company-php .hero-subtitle{
    font-size: 13.5px !important;
    line-height: 1.6;
    color:#444;
    text-shadow: 1px 1px 2px rgba(255,255,255,.8);
    word-break: keep-all;
    text-wrap: balance;
    margin: 0;
  }

  body.page-template-page-company-php .company-info-section { 
    padding: 32px 0 52px; 
  }

  body.page-template-page-company-php .company-info-section .section-title { 
    font-size: 1.5rem; 
  }

  body.page-template-page-company-php .company-table { 
    width: 100%; font-size: 0.85rem; 
  }

  body.page-template-page-company-php .company-table th,
  body.page-template-page-company-php .company-table td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    box-sizing: border-box;
  }
  
  body.page-template-page-company-php .company-table th { 
    background-color: #f7f7f7; 
    border-bottom: none; 
  }

  body.page-template-page-company-php .company-table .rep-sign{ 
    height: 2.2em; 
  }
}

/* ========== 代表者挨拶セクション ========== */
.representative-section{
  background: #fff;
  padding: 48px 0 36px;
}

.representative-section .container{
  max-width: 1100px;
  padding-left: 16px;   
  padding-right: 16px;
  box-sizing: border-box;
}

.rep-wrap{
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vw, 50px);
  max-width: 900px; /* 幅を制限して中央に */
  margin: 0 auto;
}

.rep-text,
.rep-photo { min-width: 0; }

.rep-text{
  width: 100%; /* 横幅いっぱいに */
  display: flex;
  flex-direction: column;
  align-items: center;  
  text-align: center;  
  padding: 0;

  -webkit-text-size-adjust: 100%; /* iOSの自動拡大抑止 */
}

.rep-heading{
  font-size: 2rem;                    
  color: #002b7f;
  font-weight: 800;
  margin: 0 0 14px;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.rep-text p{
  margin: 0 0 10px;
  color: #333;
  line-height: 1.9;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  text-wrap: pretty;
  font-size: 0.95rem;   
}

.rep-signer-lines{
  display: grid;
  gap: 4px;
  justify-items: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rep-signer-org{ font-weight: 700; color: #0a2f73; }
.rep-signer-name{ font-weight: 800; color: #111; }

.rep-sign-inline{
  position: static;
  display: block;
  height: clamp(2.2em, 5vw, 3.2em);
  width: auto;
  max-width: 100%;      
  object-fit: contain;
  margin: 8px auto 0;
}

.rep-photo{
  width: 100%; /* 横幅いっぱいに */
  display: grid;
  place-items: center;
}
.rep-photo img{
  width: 100%;
  max-width: 480px; /* 写真のサイズを少し大きく */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  object-fit: cover;
}

/* ========== スマホ調整（代表者挨拶） ========== */

@media (max-width: 768px){
  .rep-text p{ 
    font-size: 0.85rem; 
  } 
  .rep-wrap{ flex-direction: column; align-items: stretch; }
  .rep-text{ order: 1; }
  .rep-heading{ font-size: 1.5rem; }    
  .rep-photo{ order: 2; }
  .rep-photo img{ max-width: 520px; margin: 8px auto 0; }
  .rep-sign-inline{ height: clamp(2.4em, 7vw, 3.6em); }
}

/* SPだけ改行させる br */
.sp-only-br { 
  display: none; 
}

@media (max-width: 768px){
  .sp-only-br { 
    display: block; 
  } 
}

/* ========== 修正用 ========== */

.rep-cell .rep-flex{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rep-cell .rep-name{
  font-weight: 700;
  color: #111;
  text-align: center;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rep-cell .rep-sign{
  height: 1.6em;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 署名行の行間が詰まり過ぎないよう保険（任意） */
.rep-signer-lines{ line-height: 1.45; }


body.page-template-page-company-php .hero-section{
  height: auto !important;                                   /* 100vh などを打ち消し */
  min-height: clamp(260px, 38vh, 420px) !important;          /* 気持ちよい高さレンジ */
  padding-top: calc(var(--fixed-top, var(--header-h, 0px)) + 16px) !important;
  padding-bottom: clamp(16px, 3vw, 32px) !important;
}

/* ===== page-company 専用：ヒーローの縦中央寄せ ===== */
body.page-template-page-company-php .hero-section{
  /* 余計なレイアウト指定を無効化して、Flex でど真ん中に */
  display: flex !important;
  align-items: center !important;   /* ← 縦中央 */
  justify-content: center !important;/* ← 横中央 */

  /* 高さは「少し低め」を維持（必要なら数値だけ好みに調整） */
  height: auto !important;
  min-height: clamp(280px, 38vh, 440px) !important;

  /* 上下に少しだけ余白（中央寄せに影響しない程度） */
  padding-top: clamp(12px, 2.5vw, 24px) !important;
  padding-bottom: clamp(12px, 2.5vw, 24px) !important;
}

/* ヒーロー内の要素に、他CSSの position/transform が効いていてもリセット */
body.page-template-page-company-php .hero-section .hero-content{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  text-align: center;
  max-width: 800px;
  width: 100%;
  padding: 0 20px;
}

/* モバイルでも常に中央寄せ／高さは少し低めに */
@media (max-width: 768px){
  body.page-template-page-company-php .hero-section{
    min-height: clamp(240px, 34vh, 360px) !important;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
}

/* =========================================================
   Guide page FINAL 修正
   - ヒーローはヘッダー高ぶんだけ丸ごと下げる（画像上端を出す）
   - テキストは絶対配置で 50% センタリング（他CSSの影響を遮断）
   - Guideページ以外には一切影響なし
========================================================= */

/* 1) ヒーロー本体：画像は真ん中、セクション自体を下げる */
body.page-template-page-guide-php .guide-hero{
  margin-top: var(--gd-header-gap, 0px) !important;       /* ヘッダー分だけ下げる */
  min-height: clamp(320px, 42vh, 560px) !important;       /* 高さは従来どおり */
  background-position: center center !important;          /* 画像の中央 */
  background-size: cover;
  background-repeat: no-repeat;
  position: relative !important;                          /* 絶対配置の基準 */
  padding: clamp(16px, 3vw, 28px) 20px !important;        /* 上下均等パディング */
  box-sizing: border-box;
  display: block !important;                              /* flex/gridの影響を断つ */
}

/* 2) コンテンツ：絶対配置で50%中央。containerのflex等を完全遮断 */
body.page-template-page-guide-php .guide-hero .hero-content{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(1100px, 100%) !important;
  text-align: center !important;
  display: block !important;            /* .containerのflex無効化 */
  padding: 0 0 !important;              /* 余計なズレ防止 */
}

/* 3) margin相殺ケア：見出しの上マージンを無効化 */
body.page-template-page-guide-php .guide-hero h2{
  margin-top: 0 !important;
}

/* 4) スマホでも同様（数値だけ少し控えめに） */
@media (max-width: 768px){
  body.page-template-page-guide-php .guide-hero{
    min-height: clamp(260px, 36vh, 420px) !important;
    background-position: center center !important;
  }
  body.page-template-page-guide-php .guide-hero .hero-content{
    width: min(90%, 1100px) !important;
  }
}