/* ===========================================
   UMJ 統合 会社概要ページ Styles
=========================================== */

:root {
    --umj-orange: #f15a24;
    --umj-blue: #3A8DFF;
    --umj-text: #333;
    --umj-bg: #F7F9FB;
    --white: #ffffff;
    --font-main: "Noto Sans JP", "Poppins", system-ui, -apple-system, sans-serif;
}

#company-page-unified {
    font-family: var(--font-main);
    color: var(--umj-text);
    background: #fff;
}
#company-page-unified .inner {
    width: min(1200px, 92%);
    margin: 0 auto;
}

/* ===========================================
   共通セクション
=========================================== */
.section-block {
    padding: 80px 0;
}
.section-heading {
    font-size: 30px;
    font-weight: 700;
    color: var(--umj-orange);
    margin-bottom: 40px;
    text-align: left;
}

/* ===========================================
   HERO
=========================================== */
.hero-section {
    height: 45vh;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero-section::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(80,180,255,0.55) 0%,
        rgba(255,255,255,0.8) 45%,
        rgba(241,90,36,0.55) 100%
    );
}
.hero-title {
    position:relative;
    font-size:40px;
    font-weight:800;
    color:#fff;
    text-shadow:0 0 10px rgba(0,0,0,0.5);
}

/* ===========================================
   キーメッセージ
=========================================== */
.keymessage-section {
    padding:40px 0 20px;
    background:#fff;
}
.keymessage {
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:#444;
}

/* ===========================================
   経営理念（MVV）
=========================================== */
.mvv-section {
    background:#fff;
}
.mvv-item {
    padding:24px 0;
    border-bottom:1px solid #e5e5e5;
}
.mvv-title {
    font-size:18px;
    font-weight:700;
    padding-bottom:4px;
    border-bottom:2px solid var(--umj-orange);
    display:inline-block;
}
.mvv-item p {
    font-size:15px;
    line-height:1.9;
    margin-top:10px;
}
.values-table {
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}
.values-table th,
.values-table td {
    border:1px solid #ddd;
    padding:10px 12px;
    font-size:14px;
}
.values-table th {
    width:180px;
    background:#f5f5f7;
    text-align:left;
}

/* ===========================================
   会社概要（背景グレー＋白カード）
=========================================== */
.profile-section {
    background:var(--umj-bg);
}
.profile-card {
    background:#fff;
    border-radius:12px;
    padding:32px 24px 40px;
    box-shadow:0 4px 14px rgba(0,0,0,0.03);
}

.outline-table {
    width:100%;
    border-collapse:collapse;
    border:1px solid #ddd;
    background:#fff;
}
.outline-table th {
    width:200px;
    font-size:15px;
    background:#F2F4F7;
    font-weight:700;
    text-align:left;
    padding:14px 18px;
    border-bottom:1px solid #ddd;
}
.outline-table td {
    font-size:15px;
    padding:14px 18px;
    border-bottom:1px solid #eee;
}

/* ===========================================
   アクセス（白カード）
=========================================== */
.access-section {
    background:#fff;
}
.access-card {
    background:#fff;
    border-radius:12px;
    border:1px solid #ddd;
    padding:30px;
    box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.access-address {
    font-size:16px;
    font-weight:700;
    margin-bottom:18px;
}
.map-container iframe {
    width:100%;
    height:380px;
    border-radius:12px;
    border:none;
    margin-bottom:24px;
}
.traffic h4 {
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
}
.traffic ul {
    padding-left:20px;
}
.traffic li {
    font-size:15px;
    line-height:1.8;
    margin-bottom:4px;
}

/* ===========================================
   沿革（背景グレー＋白カード）
=========================================== */
.history-section {
    background:var(--umj-bg);
}
.history-card {
    background:#fff;
    border-radius:12px;
    padding:32px 24px 40px;
    box-shadow:0 4px 14px rgba(0,0,0,0.03);
}

.history-list {
    list-style:none;
    padding-left:0;
}
.history-list li {
    position:relative;
    padding-left:28px;
    font-size:15px;
    margin-bottom:20px;
    line-height:1.85;
}
.history-list .dot {
    width:12px;
    height:12px;
    background:var(--umj-orange);
    border-radius:50%;
    position:absolute;
    left:0;
    top:7px;
}

/* ===========================================
   導入企業ロゴスライダー（決定版）
=========================================== */
.logo-flow-area {
    padding:60px 0;
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}
.logo-flow-title {
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:var(--umj-orange);
    margin-bottom:24px;
}

/* ★高さを確保し絶対に表示させる - overflow: hidden; を適用 */
.logo-flow-inner {
    width:100%;
    height:188px; /* ロゴ帯2つ分 + margin-top: 80px + 28px + 80px */
    max-height: 188px; /* 念のためmax-heightも設定 */
    overflow:hidden;
    position:relative;
}
/* 個別のロゴの行を調整 */
.logo-flow-inner > .logo-flow-row {
    position:absolute; /* 2つのロゴ帯を上下に重ねるために絶対配置 */
    left:0;
}
.logo-flow-inner > .logo-flow-row:nth-child(2) {
    top: 108px; /* 1行目の高さ 80px + margin-top 28px */
}


/* ★流れる帯 */
.logo-flow-row {
    display:inline-flex;
    align-items:center;
    height:80px; /* ← 必須 */
    gap:40px;
    white-space:nowrap;
    animation:flow-left 160s linear infinite;
}
.logo-flow-row.reverse {
    animation:flow-right 180s linear infinite;
}

.logo-flow-item img {
    display:block;
    height:60px;
    width:auto;
    filter:grayscale(25%);
    transition:0.25s;
}
.logo-flow-item img:hover {
    filter:grayscale(0%);
    transform:scale(1.08);
}

/* ===========================================
   @keyframes の修正（-100% から -50% へ）
=========================================== */
@keyframes flow-left {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); } 
}
@keyframes flow-right {
    /* 右向きは、2回目のリストの始まり（-50%）から1回目のリストの始まり（0）に移動 */
    from { transform:translateX(-50%); } 
    to   { transform:translateX(0); }
}
/* ===========================================
   @keyframes の修正（-100% から -50% へ）
=========================================== */
@keyframes flow-left {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); } 
}
@keyframes flow-right {
    /* 右向きは、2回目のリストの始まり（-50%）から1回目のリストの始まり（0）に移動 */
    from { transform:translateX(-50%); } 
    to   { transform:translateX(0); }
}
/* ===========================================
   法定リンク（最下部）
=========================================== */
.legal-links {
    padding:40px 0 20px;
    background:#fff;
}
.legal-links-inner {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}
.legal-btn {
    display:inline-block;
    padding:10px 20px;
    border:1px solid #ddd;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:14px;
    text-decoration:none;
    transition:0.2s;
}
.legal-btn:hover {
    border-color:var(--umj-orange);
    color:var(--umj-orange);
}

/* 代表メッセージ：2カラムレイアウト */
.ceo-flex-2col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 左：写真 */
.ceo-flex-2col .ceo-photo img {
    width: 360px;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.15);
}

/* 右：本文 */
.ceo-flex-2col .ceo-message-text {
    flex: 1;
    font-size: 17px;
    line-height: 1.9;
}

/* ★主要メッセージを強調（冒頭） */
.ceo-message-lead {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #c44a14;
    border-left: 6px solid var(--umj-orange);
    padding-left: 14px;
}

/* ★途中の強調文 */
.ceo-message-highlight {
    font-size: 19px;
    font-weight: 700;
    margin: 25px 0 15px;
    color: #d45618;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .ceo-flex-2col {
        flex-direction: column;
    }
    .ceo-flex-2col .ceo-photo img {
        width: 100%;
        max-width: 400px;
        margin-bottom: 20px;
    }
}

/* ===========================================
   CTA
=========================================== */
.page-cta {
    text-align:center;
    background:var(--umj-orange);
    color:#fff;
    padding:60px 20px;
}
.page-cta h2 {
    font-size:26px;
    margin-bottom:20px;
}
.page-cta a {
    background:#fff;
    color:var(--umj-orange);
    padding:14px 28px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    margin:6px;
    display:inline-block;
    transition:0.2s;
}
.page-cta a:hover {
    opacity:0.85;
}

/* ===========================================
   レスポンシブ
=========================================== */
@media (max-width:960px) {
    .hero-title { font-size:34px; }

    .section-heading { font-size:24px; }

    .ceo-flex {
        flex-direction:column;
        align-items:center;
    }
    .ceo-photo img {
        margin-bottom:20px;
    }
}

@media (max-width:600px) {
    .hero-title { font-size:28px; }
    .keymessage { font-size:18px; }
    .ceo-message-text { font-size:16px; }
}
/* ============================================
   会社概要テーブルのスマホ最適化
   （page-id-9129 = 会社概要ページ想定）
   ============================================ */

@media (max-width: 768px) {

  /* テーブル全体をカード風に */
  .page-id-9129 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .page-id-9129 table tr {
    display: block;
    padding: 12px 10px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  /* 見出し（左列）を上に、内容（右列）をその下に縦積み */
  .page-id-9129 table th,
  .page-id-9129 table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0;
    text-align: left;
  }

  .page-id-9129 table th {
    font-weight: 700;
    color: #333;
    border: none;
    padding-bottom: 2px;
  }

  .page-id-9129 table td {
    color: #555;
    line-height: 1.6;
    border: none;
  }

  /* 行同士の境界線は不要なので打ち消し */
  .page-id-9129 table tr + tr {
    border-top: none;
  }
}
/* ============================================
   UMJ - 会社概要ページスマホ最適化（完全版）
   ============================================ */
@media (max-width: 768px) {

    /* ページ全体の余白調整 */
    .company-container,
    .page-id-9129 .company-container {
        width: 92% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* 見出しの余白修正 */
    .company-title,
    .page-id-9129 h2 {
        font-size: 24px !important;
        margin-top: 20px !important;
        margin-bottom: 16px !important;
        line-height: 1.4 !important;
        padding-left: 4px !important;
    }

    /* テーブル自体 */
    .company-table,
    .company-table table,
    table.company-info {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;  /* はみ出し防止 */
        background: #fff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* 各セル */
    .company-table td,
    .company-table th,
    table.company-info td,
    table.company-info th {
        padding: 14px 12px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        word-break: break-word !important;
        border: 1px solid #e5e5e5 !important;
    }

    /* 左側（項目名） */
    .company-table th,
    table.company-info th {
        width: 35% !important;
        background: #f7f8f9 !important;
        font-weight: 700 !important;
        color: #333 !important;
    }

    /* 右側（内容） */
    .company-table td,
    table.company-info td {
        width: 65% !important;
        color: #333 !important;
    }

    /* 最下部の余白 */
    .company-table {
        margin-bottom: 32px !important;
    }
}
/* ============================================================
   UMJ 会社概要ページ — スマホ最適化 完全統合版
   （既存の競合CSSをすべて打ち消し、正常レイアウトに統一）
   ============================================================ */
@media (max-width: 768px) {

    /* ページ全体の横幅調整 */
    #company-page-unified .inner,
    .company-container {
        width: 92% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* セクションタイトル */
    #company-page-unified h2,
    .section-heading {
        font-size: 24px !important;
        margin: 24px 0 12px !important;
        line-height: 1.4 !important;
    }

    /* ★ テーブル（会社概要）完全統一 */
    .outline-table,
    .outline-table table,
    table.outline-table,
    table.company-info,
    .company-table table,
    .company-table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        background: #fff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 32px !important;
    }

    /* セル共通 */
    .outline-table th,
    .outline-table td,
    table.company-info th,
    table.company-info td,
    .company-table th,
    .company-table td {
        padding: 12px 14px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        border: 1px solid #e3e3e3 !important;
        word-break: break-word !important;
    }

    /* 見出し（左セル） */
    .outline-table th,
    table.company-info th,
    .company-table th {
        width: 35% !important;
        font-weight: 700 !important;
        background: #f5f7fa !important;
        color: #333 !important;
    }

    /* 内容（右セル） */
    .outline-table td,
    table.company-info td,
    .company-table td {
        width: 65% !important;
        color: #333 !important;
    }

    /* 行の余白と角丸 */
    .outline-table tr,
    table.company-info tr,
    .company-table tr {
        border-bottom: none !important;
    }

    /* 沿革（タイムライン）の調整 */
    .history-list li {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        padding-left: 26px !important;
        line-height: 1.75 !important;
    }
    .history-list .dot {
        width: 10px !important;
        height: 10px !important;
        left: 2px !important;
        top: 6px !important;
    }

    /* 代表メッセージの写真・本文 */
    .ceo-flex-2col {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .ceo-flex-2col .ceo-photo img {
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto 16px !important;
    }
    .ceo-message-text {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    /* 法定リンクの間隔 */
    .legal-links-inner {
        gap: 10px !important;
    }
    .legal-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}
/* ============================================
   会社概要（テンプレート）スマホ最適化 強制適用版
============================================ */

@media (max-width: 768px) {

  /* テンプレートに確実に適用されるセレクタ */
  body.page-template-template-company-unified table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
  }

  body.page-template-template-company-unified table tr {
    display: block !important;
    padding: 12px 10px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  }

  body.page-template-template-company-unified table th,
  body.page-template-template-company-unified table td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  body.page-template-template-company-unified table th {
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 4px !important;
  }

  body.page-template-template-company-unified table td {
    color: #555 !important;
    line-height: 1.7 !important;
  }
}