@charset "utf-8";

/* =========================================================
ABOUT PAGE — /about.html 
スコープ：.page-about 配下のみ（他ページ非影響）
- タイポグラフィ
- 主要取引先（タグカードUI + ロゴスライダー）
- 代表挨拶（カード + 署名）
- レスポンシブ + アクセシビリティ
========================================================= */

/* =========================================================
タイポグラフィ最適化
========================================================= */

.page-about h2,
.page-about h3,
.page-about h4{
  text-wrap: balance;
}

.page-about .content p{
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

@supports (hanging-punctuation: first last){
  .page-about .content p{
    hanging-punctuation: first last;
  }
}

/* =========================================================
主要取引先：セクション共通
========================================================= */

.page-about .company_partners{
  margin-top: 28px;
}

/* ✅ 見出しを中央揃え + 下線演出（about.css側を採用） */
.page-about .company_partners h4{
  font-size: 18px;
  letter-spacing: .06em;
  margin-bottom: 14px;
  color: #2b5864;
  text-align: center;
  position: relative;
}

.page-about .company_partners h4::after{
  content:"";
  display:block;
  width: 60px;
  height: 2px;
  background: #2e94ad;
  margin: 14px auto 0;
}

/* =========================================================
主要取引先：タグカードUI
- HTML上の .bp-note を “タグの親” として扱う
- .bp-name を “タグ” として扱う
========================================================= */

/* タグコンテナ（about.css側を採用） */
.page-about .company_partners .bp-note{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 20px;

  /* 文章ブロックとして使っていた頃の名残を無効化（安全） */
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1.9;
}

/* タグカード（about.css側を採用） */
.page-about .company_partners .bp-name{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .04em;
  color: #2b5864;
  background: #f4f8f9;
  border: 1px solid rgba(43,88,100,.15);
  border-radius: 999px;
  white-space: nowrap;
  transition: all .18s ease;

  /* partners.cssの keep-all 方針も取り込む */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.page-about .company_partners .bp-name:hover{
  background: #e8f2f4;
  border-color: rgba(43,88,100,.25);
  transform: translateY(-1px);
}

/* “他多数”などの補足（任意要素） */
.page-about .company_partners .bp-more{
  font-size: 12px;
  color: rgba(0,0,0,.45);
  padding: 6px 0;
}

/* bp-sep はタグUIでは基本不要だが、HTMLに残っていても崩れないよう抑制 */
.page-about .company_partners .bp-sep{
  display: none;
}

/* =========================================================
主要取引先：ロゴスライダー（partners.css側をベースに採用）
========================================================= */

.page-about .company_partners .bp-stage{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 12px 14px;
}

/* 両端フェード */
.page-about .company_partners .bp-stage::before,
.page-about .company_partners .bp-stage::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 90px;
  z-index: 2;
  pointer-events:none;
}
.page-about .company_partners .bp-stage::before{
  left:0;
  background: linear-gradient(to right, rgba(242,246,247,0.98), rgba(242,246,247,0));
}
.page-about .company_partners .bp-stage::after{
  right:0;
  background: linear-gradient(to left, rgba(242,246,247,0.98), rgba(242,246,247,0));
}

/* トラック（走査） */
.page-about .company_partners .bp-track{
  --bp-duration: 22s;
  --bp-shift: 600px;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0;
  width: max-content;
  animation: bp-partners-marquee var(--bp-duration) linear infinite;
  will-change: transform;
}

/* hoverで一時停止 */
.page-about .company_partners .bp-stage:hover .bp-track{
  animation-play-state: paused;
}

@keyframes bp-partners-marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--bp-shift)),0,0); }
}

/* ロゴカード */
.page-about .company_partners .bp-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(248,250,252,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  user-select:none;
  text-decoration: none;
  min-height: 52px;
}

.page-about .company_partners .bp-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.10);
}

.page-about .company_partners .bp-item img{
  height: 38px;
  width: auto;
  max-width: 160px;
  display:block;
  object-fit: contain;
}

/* 2段目（逆方向） */
.page-about .company_partners .bp-stage.bp-rev .bp-track{
  animation-direction: reverse;
  --bp-duration: 26s;
}

/* inert が付いた要素は触れない */
.page-about .company_partners .bp-stage[inert]{
  pointer-events: none;
}

/* =========================================================
brユーティリティ
========================================================= */

.page-about .br-sp,
.page-about .br-tab,
.page-about .br-pc{ display:none; }

@media (max-width: 640px){
  .page-about .br-sp{ display:block; height:0; }
}
@media (min-width: 641px) and (max-width: 960px){
  .page-about .br-tab{ display:block; height:0; }
}
@media (min-width: 961px){
  .page-about .br-pc{ display:block; height:0; }
}

/* =========================================================
代表ご挨拶
========================================================= */

.page-about .ceo-message{
  margin-top: 60px;
  padding: 50px 40px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.05);
  border-radius: 8px;
}

.page-about .ceo-title{
  text-align:center;
  font-size:28px;
  letter-spacing:.15em;
  margin-bottom:40px;
}

.page-about .ceo-title::after{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background:#2e94ad;
  margin:20px auto 0;
}

.page-about .ceo-sub{
  text-align:center;
  font-size:22px;
  line-height:1.6;
  letter-spacing:.08em;
  margin-bottom:40px;
  color:#2e94ad;
}

.page-about .ceo-body p{
  font-size:16px;
  line-height:2.2;
  letter-spacing:.05em;
  margin-bottom:30px;
}

.page-about .ceo-photo{
  max-width:40%;
}

.page-about .ceo-photo img{
  border-radius:6px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* =========================================================
代表署名
========================================================= */

.page-about .ceo-signature{
  margin-top: 40px;
  text-align: right;
  padding-top: 30px;
  position: relative;
}

.page-about .ceo-signature::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:180px;
  height:1px;
  background:linear-gradient(to left,#2e94ad,transparent);
}

.page-about .ceo-role{
  display:block;
  font-size:13px;
  letter-spacing:.2em;
  color:#666;
  margin-bottom:5px;
}

.page-about .ceo-sign-name{
  display:block;
  font-family:'Noto Serif JP', serif;
  font-size:26px;
  letter-spacing:.25em;
  color:#111;
}

.page-about .ceo-sign-name::after{
  content:"";
  display:block;
  width:120px;
  height:2px;
  margin-top:8px;
  background:#2e94ad;
  margin-left:auto;
}

/* =========================================================
レスポンシブ統合
========================================================= */

@media (min-width:641px) and (max-width:960px){
  .page-about .ceo-message{
    padding:40px 25px;
  }

  .page-about .ceo-sub{
    font-size:20px;
  }

  .page-about .ceo-body p{
    font-size:15px;
    line-height:2.1;
  }

  .page-about .ceo-sign-name{
    font-size:22px;
  }
}

@media (max-width:640px){
  /* タグ */
  .page-about .company_partners .bp-note{
    gap: 8px;
  }

  .page-about .company_partners .bp-name{
    font-size: 11px;
    padding: 5px 10px;
  }

  /* スライダー */
  .page-about .company_partners .bp-stage::before,
  .page-about .company_partners .bp-stage::after{
    width: 56px;
  }

  .page-about .company_partners .bp-track{
    gap: 8px;
  }

  .page-about .company_partners .bp-stage{
    padding: 10px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-about .company_partners .bp-stage::-webkit-scrollbar{
    display: none;
  }

  .page-about .company_partners .bp-item{
    min-height: 44px;
    padding: 8px 10px;
  }

  .page-about .company_partners .bp-item img{
    height: 28px;
    max-width: 120px;
  }

  /* SPでは2段目非表示 */
  .page-about .company_partners .bp-stage.bp-rev{
    display:none;
  }

  /* hover演出は軽め */
  .page-about .company_partners .bp-item:hover{
    transform: none;
    box-shadow: none;
  }

  /* 代表挨拶 */
  .page-about .ceo-message{
    padding:30px 15px;
  }

  .page-about .ceo-photo{
    float:none;
    max-width:100%;
    margin-bottom:20px;
  }

  .page-about .ceo-sub{
    font-size:18px;
  }

  .page-about .ceo-body p{
    font-size:14px;
    line-height:2.0;
  }

  .page-about .ceo-signature{
    text-align:center;
  }

  .page-about .ceo-signature::before{
    left:50%;
    transform:translateX(-50%);
  }

  .page-about .ceo-sign-name{
    font-size:20px;
  }

  .page-about .ceo-sign-name::after{
    margin-left:auto;
    margin-right:auto;
  }

  /* brユーティリティ：SPではpc/tab無効（誤表示防止） */
  .page-about .br-pc,
  .page-about .br-tab{ display:none !important; }
}

/* =========================================================
SPテーブル微調整（about限定）
========================================================= */

@media screen and (max-width:460px){
  .page-about .content table.table_01{
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .page-about .content table.table_01 th,
  .page-about .content table.table_01 td{
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

/* =========================================================
OSの “動きを減らす” 設定（アクセシビリティ）
========================================================= */

@media (prefers-reduced-motion: reduce){
  .page-about .company_partners .bp-track{
    animation:none !important;
  }
  .page-about .company_partners .bp-stage.bp-rev{
    display:none;
  }
}