@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ - DXイノベ建設
    Version: 1.1.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =====================================================
   Design Token: DXイノベ建設 カラーシステム
   Primary:  #0A2540  ネイビー（信頼・技術）
   Accent:   #00B4D8  シアン（DX・未来感）
   Accent2:  #F0A500  ゴールド（実績・格）
   BG:       #F4F7FB  ライトグレー背景
   Text:     #1A1A2E  ダークテキスト
   ===================================================== */
:root {
  --dx-navy:   #0A2540;
  --dx-cyan:   #00B4D8;
  --dx-gold:   #F0A500;
  --dx-bg:     #F4F7FB;
  --dx-text:   #1A1A2E;
  --dx-white:  #FFFFFF;
}

/* =====================================================
   Override: ページヒーローセクション 縮小 + eyebrow非表示
   対象: 内部ページのみ（HOME は除外）
   ===================================================== */
.page-template-default .luna-page-hero {
  min-height: 10vh !important;
  padding: 20px 20px !important;
}
.page-template-default .luna-page-hero__eyebrow {
  display: none !important;
}
.page-template-default .luna-page-hero__title {
  font-size: clamp(22px, 4vw, 40px) !important;
}
.page-template-default .luna-page-hero__sub {
  margin-top: 8px !important;
}

/* =====================================================
   Override: ページヒーロー上部ギャップ解消
   ===================================================== */
.page-template-default .post_content .luna-page-hero:first-child {
  margin-top: -128px !important;
}
.admin-bar.page-template-default .post_content .luna-page-hero:first-child {
  margin-top: -96px !important;
}

/* ================================================
   fix_header 非表示
   ================================================ */
html.luna-header-transparent #fix_header {
  display: none !important;
}

/* =====================================================
   Fix: トップページ FV - SWELLコンテンツパディング除去
   ===================================================== */
.home #content {
  padding-top: 0 !important;
}

/* =====================================================
   Scroll Animation - js-* classes
   ===================================================== */
.js-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fade-only {
  opacity: 0;
  transition: opacity 1.0s ease;
}
.js-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fade-up.is-visible,
.js-fade-only.is-visible,
.js-slide-left.is-visible,
.js-slide-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =====================================================
   Fix: フッター copyright リンク文字色
   ===================================================== */
.l-footer .copyright a {
  color: #aaaaaa !important;
  text-decoration: underline !important;
}
.l-footer .copyright a:hover {
  color: #ffffff !important;
}

/* =====================================================
   Design System: 全ページ タイポグラフィ統一
   ===================================================== */
.wp-block-group.alignfull { padding-top: 2.5rem; padding-bottom: 2.5rem; }
#body_wrap:not(.home) .wp-block-group.alignfull { padding-top: 2.5rem !important; }
#body_wrap:not(.home) .post_content .wp-block-cover.alignfull { margin-bottom: 0 !important; }
.post_content h2 { margin: 1.5rem 0 1.25rem !important; }
.wp-block-group.alignfull h2.wp-block-heading { margin-top: 1.5rem !important; margin-bottom: 1.25rem !important; }
.wp-block-group.alignfull h2.wp-block-heading[style*='border'] { margin-top: 0 !important; margin-bottom: 0.75rem !important; }

/* H2 セクションボーダー（シアンアクセント） */
.kensetsu-section-h2 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  border-bottom: 2px solid #00B4D8;
  padding-bottom: 0.75rem;
}

.wp-block-group.alignfull h3.wp-block-heading { margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; }
.wp-block-group.alignfull .wp-block-columns { padding-top: 1.5rem; }
.wp-block-group.alignfull p + h2.wp-block-heading { margin-top: 0.5rem !important; }
.wp-block-cover h1.wp-block-heading { margin-top: 0.5rem !important; margin-bottom: 0 !important; }
.wp-block-cover h2.wp-block-heading { margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; }
.wp-block-cover p + h1.wp-block-heading,
.wp-block-cover p + h2.wp-block-heading { margin-top: 0.5rem !important; }

/* =====================================================
   Fix: OUR STRENGTHS - 画像高さ統一
   ===================================================== */
.taihoku-strength-img img,
.dx-strength-img img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   Fix: CONTACT label color + 2-column height align
   DXネイビー背景(#0A2540)対応
   ===================================================== */
[style*="#0A2540"] p[style*="F0A500"],
[style*="#0a2540"] p[style*="F0A500"],
[style*="#1a2b3c"] p[style*="F0A500"] { color: #F0A500 !important; }

[style*="#0A2540"] p[style*="00B4D8"],
[style*="#0a2540"] p[style*="00B4D8"],
[style*="#1a2b3c"] p[style*="00B4D8"] { color: #00B4D8 !important; }

[style*="#0A2540"] .wp-block-columns.alignwide,
[style*="#0a2540"] .wp-block-columns.alignwide,
[style*="#1a2b3c"] .wp-block-columns.alignwide { align-items: stretch; }

[style*="#0A2540"] .wp-block-columns.alignwide > .wp-block-column,
[style*="#0a2540"] .wp-block-columns.alignwide > .wp-block-column,
[style*="#1a2b3c"] .wp-block-columns.alignwide > .wp-block-column { display: flex; flex-direction: column; }

[style*="#0A2540"] .wp-block-column .wp-block-buttons,
[style*="#0a2540"] .wp-block-column .wp-block-buttons,
[style*="#1a2b3c"] .wp-block-column .wp-block-buttons { flex: 1; display: flex; flex-direction: column; }

[style*="#0A2540"] .wp-block-column .wp-block-button,
[style*="#0a2540"] .wp-block-column .wp-block-button,
[style*="#1a2b3c"] .wp-block-column .wp-block-button { flex: 1; display: flex; flex-direction: column; }

[style*="#0A2540"] .wp-block-column .wp-block-button__link,
[style*="#0a2540"] .wp-block-column .wp-block-button__link,
[style*="#1a2b3c"] .wp-block-column .wp-block-button__link { flex: 1 !important; display: flex !important; align-items: center; justify-content: center; }

[style*="#0A2540"] .wp-block-column .wp-block-group[style*="border"],
[style*="#0a2540"] .wp-block-column .wp-block-group[style*="border"],
[style*="#1a2b3c"] .wp-block-column .wp-block-group[style*="border"] { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* =====================================================
   DXイノベ建設 独自スタイル: カウンターセクション
   ===================================================== */
.dx-counter-section {
  background: var(--dx-navy);
  color: var(--dx-white);
  text-align: center;
  padding: 4rem 1rem;
}
.dx-counter-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--dx-cyan);
  line-height: 1;
  display: block;
}
.dx-counter-label {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  margin-top: 0.5rem;
  display: block;
}

/* =====================================================
   DX: サービスカード
   ===================================================== */
.dx-service-card {
  border-top: 3px solid var(--dx-cyan);
  background: #fff;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dx-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 180, 216, 0.15);
}
.dx-service-icon {
  font-size: 2rem;
  color: var(--dx-cyan);
  margin-bottom: 0.75rem;
}

/* =====================================================
   DX: セクション英語ラベル
   ===================================================== */
.dx-section-en {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--dx-cyan);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
}

/* =====================================================
   DX: ヒーローボタン
   ===================================================== */
.hero-btn-primary .wp-block-button__link {
  background-color: var(--dx-cyan) !important;
  color: var(--dx-white) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.hero-btn-primary .wp-block-button__link:hover {
  background-color: #0096b5 !important;
}
.hero-btn-secondary .wp-block-button__link {
  color: var(--dx-white) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* =====================================================
   DX: タグライン（ヘッダー直下帯）
   ===================================================== */
.l-headerBanner {
  background: var(--dx-navy) !important;
  color: var(--dx-cyan) !important;
}

/* =====================================================
   DX: テーブルスタイル（会社概要用）
   ===================================================== */
.wp-block-table td, .wp-block-table th {
  border-color: #e0e8f0 !important;
}
.wp-block-table th {
  background: var(--dx-bg) !important;
  color: var(--dx-navy) !important;
  font-weight: 600;
}

/* =====================================================
   DX: 施工事例カード（WORKSページ）
   ===================================================== */
.dx-works-card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.dx-works-card-tag {
  display: inline-block;
  background: var(--dx-cyan);
  color: var(--dx-white);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.5rem;
}

/* =====================================================
   DX: SP（スマートフォン）最適化
   ===================================================== */
@media (max-width: 767px) {
  .dx-counter-number {
    font-size: 2.2rem;
  }
  .dx-section-en {
    font-size: 0.72rem;
  }
}

/* =====================================================
   DX: テクノロジーセクション カードアイテム
   ===================================================== */
.tech-item-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tech-item-card:hover {
  border-color: rgba(0,180,216,0.6) !important;
  transform: translateY(-3px);
}

/* =====================================================
   DX: ビジョンセクション
   ===================================================== */
.vision-section .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: 4px;
}

/* =====================================================
   DX: CTAバナーセクション
   ===================================================== */
.cta-section {
  background-color: #00B4D8 !important;
}
.cta-btn-main .wp-block-button__link:hover {
  background-color: #f0f0f0 !important;
}

/* =====================================================
   DX: ソリューションカード 画像比率統一
   ===================================================== */
.dx-service-card .wp-block-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* =====================================================
   DX: SP最適化追加
   ===================================================== */
@media (max-width: 767px) {
  .tech-item-card {
    padding: 1.5rem 1rem !important;
  }
  .vision-section .wp-block-columns {
    flex-direction: column;
  }
}

/* wp:query post-template リストマーカー除去 */
.wp-block-post-template { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.wp-block-post-template > li { list-style: none !important; }
/* dx-works-card (query版) テキスト折り返し対策 */
.dx-works-card .wp-block-post-title a { word-break: keep-all; overflow-wrap: break-word; }
/* dx-works-tag インライン表示 */
.dx-works-tag-inline { display: inline-block; border-radius: 2px; }

/* WORKSカード等高揃え (wp:query版) */
.wp-block-post-template.is-flex-container { align-items: stretch !important; }
.dx-works-card { display: flex !important; flex-direction: column !important; height: 100% !important; }
.dx-works-card .wp-block-post-featured-image { flex-shrink: 0; }
.dx-works-card .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
.dx-works-card > .wp-block-group:last-child { flex: 1 !important; display: flex !important; flex-direction: column !important; }
.dx-works-card > .wp-block-group:last-child .wp-block-post-excerpt { flex: 1 !important; }

/* =====================================================
   Fix (2026-07-04): フェードイン フェールセーフ
   motion削減設定時は初期表示にして本文が消えないようにする
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .js-fade-up, .js-fade-only, .js-slide-left, .js-slide-right, .fade-in, [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================
   Fix (2026-07-04): eyebrowラベル可読性
   明背景上のシアンeyebrowを濃色化（濃紺帯上は明シアンを維持）
   ===================================================== */
.dx-section-en { color: #00728a !important; }
.wp-block-group[style*="0A2540" i] .dx-section-en,
.wp-block-group[style*="0a2540" i] .dx-section-en { color: #00B4D8 !important; }