/*
Theme Name: MEDICOM
Theme URI: https://medicom-jp.com
Author: MEDICOM
Author URI: https://medicom-jp.com
Description: 株式会社メディコムのコーポレートサイトテーマ。施工実績とお知らせをブログ形式で投稿できます。
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medicom
Tags: corporate, business, blog, custom-post-type
*/

/* PC用スタイル */

/* Tailwind CSSはscriptタグで読み込むため、ここでは読み込まない */

/* =========================================
   Recruit Section Grid Layout
   ========================================= */
.grid.gap-10.lg\:grid-cols-2.lg\:items-center,
div.grid.gap-10[class*="lg:grid-cols-2"][class*="lg:items-center"] {
  padding-left: 5px !important;
}

/* =========================================
   Filter Buttons Width (hero-contentと同じ幅)
   ========================================= */
#filter-buttons {
  max-width: 80rem !important; /* hero-contentと同じ幅 */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* filter-buttonsの親要素も同じ幅に */
section.bg-white.py-4.pb-8 .container.mx-auto,
section.bg-white.border-b .container.mx-auto {
  max-width: 80rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================
   Key Information Section Width (headerと同じ幅)
   ========================================= */
section.bg-white.py-16.pb-16.md\:py-24.md\:pb-24 .container.mx-auto,
section.bg-white.py-16.pb-16[class*="md:py-24"][class*="md:pb-24"] .container.mx-auto {
  max-width: 80rem !important; /* max-w-7xlと同じ（1280px） */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================
   Benefits Section Width (headerと同じ幅、左右paddingなし)
   ========================================= */
/* 福利厚生・制度セクション */
section.bg-white.py-16.md\:py-24[style*="padding-bottom: 5rem"] .container.mx-auto,
section.bg-white.py-16.md\:py-24 .container.mx-auto {
  max-width: 80rem !important; /* max-w-7xlと同じ（1280px） */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   Voice Message Section Width (headerと同じ幅、左右paddingなし)
   ========================================= */
/* 先輩社員の声セクション */
section.bg-slate-50 .container.mx-auto {
  max-width: 80rem !important; /* max-w-7xlと同じ（1280px） */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   Technical Ability Section Width (headerと同じ幅、左右paddingなし)
   ========================================= */
/* 技術力と専門性ページのTechnical Ability Section */
section.bg-white[style*="padding-top: 100px"] .container.mx-auto,
section.bg-white[style*="padding-bottom: 70px"] .container.mx-auto,
section.bg-white.py-16.md\:py-24 .container.mx-auto,
section.py-16.md\:py-24 .container.mx-auto {
  max-width: 80rem !important; /* max-w-7xlと同じ（1280px） */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   Greeting Section Width (headerと同じ幅、左右paddingなし)
   ========================================= */
/* ご挨拶セクション（section.bg-white.py-24.md:py-32） */
/* PC時：ヘッダーと同じ幅（max-w-7xl = 80rem）、左右paddingなし */
section.bg-white.py-24.md\:py-32 .container.mx-auto,
section.bg-white.py-24.md\:py-32 .container[class*="mx-auto"],
section.bg-white[class*="py-24"][class*="md:py-32"] .container.mx-auto {
  max-width: 80rem !important; /* max-w-7xlと同じ（1280px） */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   共通セクションタイトルスタイル（全ページ統一）
   ========================================= */
.mc-section-title,
h2.mc-section-title {
  font-size: 30px !important;
  color: #000000 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.mc-section-subtitle,
p.mc-section-subtitle,
span.mc-section-subtitle {
  font-size: 17px !important;
  color: #003D96 !important;
  font-family: 'Koulen', 'Jost', sans-serif !important;
  font-weight: normal !important;
  margin-top: 5px !important;
  margin-bottom: 30px !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}

/* 他のスタイルを上書きして色を強制（最優先） */
.mc-section-subtitle,
p.mc-section-subtitle,
span.mc-section-subtitle,
.mc-section-subtitle[style],
span.mc-section-subtitle[style],
p.mc-section-subtitle[style],
div.text-center .mc-section-subtitle,
div.mb-20 .mc-section-subtitle,
div.fade-on-scroll .mc-section-subtitle,
div.mb-20.fade-on-scroll.text-center .mc-section-subtitle,
div.mb-20.fade-on-scroll.text-center span.mc-section-subtitle,
section .mc-section-subtitle,
section.bg-slate-50 .mc-section-subtitle,
section.bg-white .mc-section-subtitle,
section.bg-slate-50 div.text-center .mc-section-subtitle,
section.bg-white div.text-center .mc-section-subtitle,
section.bg-slate-50 div.mb-20.fade-on-scroll.text-center span.mc-section-subtitle,
section.bg-white div.mb-20.fade-on-scroll.text-center span.mc-section-subtitle,
main#main section .mc-section-subtitle,
main#main section.bg-slate-50 .mc-section-subtitle,
main#main section.bg-white .mc-section-subtitle,
main#main section div.mb-20.fade-on-scroll.text-center span.mc-section-subtitle {
  color: #003D96 !important;
  margin-top: 5px !important;
}

/* =========================================
   Base Styles & Typography
   ========================================= */
:root {
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-en: 'Koulen', 'Jost', sans-serif;
  /* Cool & Simple Palette */
  --color-primary: #003D96; /* bright blue */
  --color-dark: #0f172a; /* slate 900 */
  --color-gray: #64748b; /* slate 500 */
  --color-light: #f8fafc; /* slate 50 */
  --color-white: #ffffff;
  
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Brand tokens (match design) */
  --brand-blue: #003D96;
  --brand-blue-dark: #072d6f;
  --brand-navy: #05224f;
  --brand-surface: #f3f6fb;
}

body {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  color: #1A1A1A;
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   Fixed Header Offset (Admin Bar Safe)
   ========================================= */
body.admin-bar #main-header {
  top: 32px;
}



/* =========================================
   Header Height (Responsive)
   ========================================= */
.header-inner {
  height: 64px; /* SP: 64px */
}





.header-spacer {
  height: 64px; /* SP: 64px */
}





body.admin-bar .header-spacer {
  height: calc(64px + 32px);
}







/* =========================================
   Header Logo (Responsive)
   ========================================= */
.header-logo {
  height: auto;
  width: 140px; /* SP: 140px */
}

/* SP表示時にロゴの左側に余白を追加 */






/* =========================================
   Header/Footer components (match design)
   ========================================= */
.mc-nav-link,
header#main-header .mc-nav-link,
header#main-header nav .mc-nav-link,
nav .mc-nav-link,
a.mc-nav-link {
  color: #1f2937 !important; /* gray-800 */
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.25rem !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s ease !important;
}
.mc-nav-link:hover,
header#main-header .mc-nav-link:hover,
header#main-header nav .mc-nav-link:hover,
nav .mc-nav-link:hover,
a.mc-nav-link:hover { 
  color: var(--brand-blue) !important; 
}

/* より具体的なセレクタで確実に適用 */
header#main-header a.mc-btn-outline,
a.mc-btn-outline,
.mc-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.375rem !important;
  border-radius: 6px !important;
  border: 1px solid #003D96 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #003D96 !important;
  color: #003D96 !important;
  background: #fff !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
header#main-header a.mc-btn-outline:hover,
a.mc-btn-outline:hover,
.mc-btn-outline:hover { 
  background: rgba(0, 61, 150, 0.06) !important; 
  border: 1px solid #003D96 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #003D96 !important;
}
header#main-header a.mc-btn-outline svg,
a.mc-btn-outline svg,
.mc-btn-outline svg {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}
header#main-header a.mc-btn-outline span,
a.mc-btn-outline span,
.mc-btn-outline span {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-block !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}
header#main-header div.hidden.lg\:flex.lg\:items-center,
div.hidden.lg\:flex.lg\:items-center {
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  max-width: none !important;
}

.mc-footer {
  background: #003D96 !important;
  color: #fff !important;
  font-size: 0.875rem;
  line-height: 1.6;
}

.mc-footer a { 
  color: #fff; 
  transition: opacity 0.2s ease; 
  text-decoration: none;
}
.mc-footer a:hover { 
  opacity: 0.8; 
}

.mc-footer-heading {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mc-footer nav a {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
}

.mc-footer .border-b {
  border-color: rgba(255, 255, 255, 1);
  border-width: 1px;
}

.mc-footer .border-t {
  border-color: rgba(255, 255, 255, 1);
  border-width: 1px;
}

.mc-footer .font-semibold {
  font-weight: 600;
  color: #fff;
}

.mc-footer p {
  color: #fff;
  line-height: 1.8;
}

.mc-office-title { font-weight: 800; color: rgba(255, 255, 255, 0.92); }
.mc-office-meta { color: rgba(255, 255, 255, 0.7); }

/* SP表示時にフッターの一部を非表示 */


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #1A1A1A;
}

/* 本文テキストの色設定 */
p {
  color: #1A1A1A;
}

article,
.entry-content,
.post-content,
.prose {
  color: #1A1A1A;
}

article p,
.entry-content p,
.post-content p,
.prose p {
  color: #1A1A1A;
}

/* CTA部分のテキスト色設定 */
section.bg-slate-50 h2,
section.bg-slate-50 h3,
section.bg-slate-50 h4,
section.bg-slate-50 p,
section.bg-slate-50 .text-slate-800,
section.bg-slate-50 .text-slate-700,
section.bg-slate-50 span:not(.text-white) {
  color: #1A1A1A !important;
}

/* 英語フォントの適用 */
.font-en:not([class*="tracking-widest"]):not([class*="tracking-[0.2em]"]), 
.nav-item,
.btn-text,
.date-text {
  font-family: var(--font-en);
  letter-spacing: 4px !important;
  font-weight: normal;
}

/* tracking-widestクラスがある場合はletter-spacingを1pxに */
.font-en.tracking-widest,
.font-en[class*="tracking-widest"] {
  font-family: var(--font-en);
  letter-spacing: 1px !important;
  font-weight: normal;
}

/* tracking-[0.2em]クラスがある場合もletter-spacingを1pxに */
.font-en[class*="tracking-[0.2em]"],
p.font-en[class*="tracking-[0.2em]"],
p.font-en.font-bold[class*="tracking-[0.2em]"].uppercase,
section p.font-en.font-bold[class*="tracking-[0.2em]"].uppercase.text-sm {
  font-family: var(--font-en);
  letter-spacing: 1px !important;
  font-weight: normal;
}

/* インラインスタイルのletter-spacingを最優先 */
p[style*="letter-spacing: 1px"],
p.font-en[style*="letter-spacing: 1px"] {
  letter-spacing: 1px !important;
}

/* セクションタイトルのletter-spacingを1pxに */
p.mt-3.font-en.font-semibold,
p.font-en.font-semibold[class*="text-[14px]"] {
  letter-spacing: 1px !important;
}

/* =========================================
   Custom Utilities (Simple & Cool)
   ========================================= */

/* ミニマルなグラデーションテキスト */
.gradient-text {
  background: linear-gradient(to right, #003D96, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 洗練されたカードホバー */
.card-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* シンプルなボタンスタイル */
.btn-simple {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-simple:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* =========================================
   共通ボタンスタイル（全ページ統一）
   ========================================= */
.mc-btn-primary,
a.mc-btn-primary,
button.mc-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #003D96 !important;
  color: #ffffff !important;
  font-size: 0.875rem !important; /* 14px = text-sm */
  font-weight: 600 !important; /* font-semibold */
  letter-spacing: 1px !important;
  padding: 0.75rem 2rem !important; /* py-3 px-8 */
  border-radius: 0.5rem !important; /* rounded-lg */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  min-width: 227px !important;
  width: auto !important;
  white-space: nowrap !important;
  text-align: center !important;
  position: relative !important;
}

.mc-btn-primary:hover,
a.mc-btn-primary:hover,
button.mc-btn-primary:hover {
  background-color: #072d6f !important;
  color: #ffffff !important;
}

.mc-btn-primary:focus,
a.mc-btn-primary:focus,
button.mc-btn-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 61, 150, 0.1) !important;
}

.mc-btn-primary:active,
a.mc-btn-primary:active,
button.mc-btn-primary:active {
  background-color: #05224f !important;
}

/* ボタン内のテキストと矢印 */
.mc-btn-primary > span:not(:last-child),
a.mc-btn-primary > span:not(:last-child),
button.mc-btn-primary > span:not(:last-child) {
  color: #ffffff !important;
  text-align: center !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  left: 0 !important;
  transform: translateX(0) !important;
}

.mc-btn-primary > span:last-child,
a.mc-btn-primary > span:last-child,
button.mc-btn-primary > span:last-child {
  color: #ffffff !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  right: 15px !important;
  margin-left: 0 !important;
  left: auto !important;
}

/* レスポンシブ対応 */


/* 画像のオーバーレイ */
.img-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 60%);
}

/* =========================================
   Contact Form 7 & WPForms スタイル調整
   ========================================= */

/* フォームコンテナの基本スタイル */
.contact-form-container {
  max-width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Contact Form 7 のスタイルをテーマに合わせる */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wpcf7-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  width: 100%;
}

.wpcf7-form p label {
  margin-bottom: 0.25rem;
}

.wpcf7-form label {
  font-size: 1rem;
  font-weight: 700 !important;
  color: #1e293b;
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  width: 100%;
}

/* ラベルのテキスト部分を太字に（必須マークは除く） */
.wpcf7-form label,
.wpcf7-form p label,
.wpcf7-form .cf7-form-wrapper label,
.wpcf7-form .cf7-form-wrapper p label,
.wpcf7-form .cf7-form-wrapper .row label,
.wpcf7-form .cf7-form-wrapper .col-50 label {
  font-weight: 700 !important;
}

/* 必須マーク（※）は通常の太さに */
.wpcf7-form label .required-asterisk,
.wpcf7-form label span.required-asterisk,
.wpcf7-form label span.required,
.wpcf7-form .cf7-form-wrapper label .required-asterisk,
.wpcf7-form .cf7-form-wrapper label span.required-asterisk {
  font-weight: 400 !important;
}

/* Contact Form 7のカスタムレイアウト内のラベル */
.wpcf7-form .cf7-form-wrapper label {
  font-size: 1rem;
  font-weight: 700 !important;
  color: #1e293b;
  display: block !important;
  margin-bottom: 0.5rem !important;
  width: 100% !important;
}

/* カスタムレイアウト内の必須マーク（※）は通常の太さに */
.wpcf7-form .cf7-form-wrapper label .required-asterisk,
.wpcf7-form .cf7-form-wrapper label span.required-asterisk {
  font-weight: 400 !important;
}

/* ラベルの直後のbrタグを非表示 */
.wpcf7-form label + br,
.wpcf7-form p br:first-of-type {
  display: none;
}

/* Contact Form 7のpタグ内のラベルの直後のbrを非表示 */
.wpcf7-form p label ~ br {
  display: none;
}

/* 必須マークのスタイル（JavaScriptで追加される要素用） */
.wpcf7-form label .required-asterisk {
  color: #dc2626;
  font-size: 1rem;
  font-weight: 900;
  margin-left: 0.25rem;
  vertical-align: middle;
  line-height: 1;
  display: inline;
  white-space: nowrap;
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
  width: 100% !important;
  padding: 10px 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  height: 51px !important;
  background-color: #EEF1F8 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  color: #1e293b !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* textareaは高さを固定しない */
.wpcf7-form .wpcf7-textarea,
.wpcf7-form textarea.wpcf7-form-control {
  height: auto !important;
  min-height: 120px !important;
}

/* select要素は文字サイズ分の大きさに */
.wpcf7-form .wpcf7-select,
.wpcf7-form select.wpcf7-form-control {
  width: auto !important;
  min-width: 200px !important;
  max-width: 100% !important;
  padding: 10px 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  height: 51px !important;
  background-color: #EEF1F8 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  color: #1e293b !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* select要素の最初のoption（選択してください）の文字色のみ#969696に */
.wpcf7-form .wpcf7-select option:first-child,
.wpcf7-form select.wpcf7-form-control option:first-child,
.wpcf7-form .cf7-form-wrapper .wpcf7-select option:first-child,
.wpcf7-form .cf7-form-wrapper select.wpcf7-form-control option:first-child,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap select option:first-child,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap select option:first-child {
  color: #969696 !important;
}

/* 他のoption要素は通常の色 */
.wpcf7-form .wpcf7-select option:not(:first-child),
.wpcf7-form select.wpcf7-form-control option:not(:first-child) {
  color: #1e293b !important;
}

/* Contact Form 7のカスタムレイアウト内の入力フィールド */
.wpcf7-form .cf7-form-wrapper .wpcf7-text,
.wpcf7-form .cf7-form-wrapper .wpcf7-email,
.wpcf7-form .cf7-form-wrapper .wpcf7-tel,
.wpcf7-form .cf7-form-wrapper .wpcf7-textarea,
.wpcf7-form .cf7-form-wrapper input.wpcf7-form-control,
.wpcf7-form .cf7-form-wrapper textarea.wpcf7-form-control,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap input,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap textarea,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap input,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap textarea,
.wpcf7-form .cf7-form-wrapper .row .col-50 input,
.wpcf7-form .cf7-form-wrapper .row .col-50 textarea,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] input,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] textarea {
  width: 100% !important;
  padding: 10px 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  background-color: #EEF1F8 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  color: #1e293b !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Contact Form 7のカスタムレイアウト内のselect要素は文字サイズ分の大きさに */
.wpcf7-form .cf7-form-wrapper .wpcf7-select,
.wpcf7-form .cf7-form-wrapper select.wpcf7-form-control,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap select,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap select,
.wpcf7-form .cf7-form-wrapper .row .col-50 select,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] select {
  width: auto !important;
  min-width: 200px !important;
  max-width: 100% !important;
  padding: 10px 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  height: 51px !important;
  background-color: #EEF1F8 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  color: #1e293b !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
  text-align: left !important;
}

/* PC表示時は左揃えを確実に */


/* カスタムレイアウト内のselect要素の最初のoptionの文字色 */
.wpcf7-form .cf7-form-wrapper .wpcf7-select option:first-child,
.wpcf7-form .cf7-form-wrapper select.wpcf7-form-control option:first-child,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap select option:first-child,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap select option:first-child {
  color: #969696 !important;
}

/* 入力フィールドの下にスペースを追加 */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-select {
  margin-bottom: 0;
}

.wpcf7-form p:has(.wpcf7-text),
.wpcf7-form p:has(.wpcf7-email),
.wpcf7-form p:has(.wpcf7-tel),
.wpcf7-form p:has(.wpcf7-select) {
  margin-bottom: 2rem;
  width: 100% !important;
}

.wpcf7-form p:has(.wpcf7-textarea) {
  margin-bottom: 2rem;
  width: 100% !important;
}

/* 2列レイアウトを無効化 */
.wpcf7-form .wpcf7-form-control-wrap {
  width: 100% !important;
  display: block !important;
}

/* フォーム内のgridやflexレイアウトを無効化 */
.wpcf7-form > p,
.wpcf7-form > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Contact Form 7のカスタムレイアウト（cf7-form-wrapper、row、col-50）を無効化 */
.wpcf7-form .cf7-form-wrapper,
.wpcf7-form .cf7-form-wrapper .row {
  display: block !important;
  width: 100% !important;
}

.wpcf7-form .cf7-form-wrapper .row {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

.wpcf7-form .cf7-form-wrapper .col-50,
.wpcf7-form .cf7-form-wrapper .col-33,
.wpcf7-form .cf7-form-wrapper .col-66,
.wpcf7-form .cf7-form-wrapper [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ラベルと入力フィールドを縦並びに（ラベルが上、入力フィールドが下） */
.wpcf7-form .cf7-form-wrapper p {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
}

.wpcf7-form .cf7-form-wrapper p label {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
  order: 1 !important;
}

.wpcf7-form .cf7-form-wrapper p .wpcf7-form-control-wrap,
.wpcf7-form .cf7-form-wrapper p span.wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* select要素のラッパーを左揃えにする（PC表示時） */


.wpcf7-form .cf7-form-wrapper p input,
.wpcf7-form .cf7-form-wrapper p textarea,
.wpcf7-form .cf7-form-wrapper p select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

/* 通常のContact Form 7フォームでもラベルを上に */
.wpcf7-form p {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
}

.wpcf7-form p label {
  order: 1 !important;
  margin-bottom: 0.5rem !important;
  width: 100% !important;
}

.wpcf7-form p .wpcf7-form-control-wrap,
.wpcf7-form p span.wpcf7-form-control-wrap {
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.wpcf7-form p .wpcf7-form-control-wrap input,
.wpcf7-form p .wpcf7-form-control-wrap textarea,
.wpcf7-form p .wpcf7-form-control-wrap select,
.wpcf7-form p span.wpcf7-form-control-wrap input,
.wpcf7-form p span.wpcf7-form-control-wrap textarea,
.wpcf7-form p span.wpcf7-form-control-wrap select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-email::placeholder,
.wpcf7-form .wpcf7-tel::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder,
.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder,
.wpcf7-form .cf7-form-wrapper input::placeholder,
.wpcf7-form .cf7-form-wrapper textarea::placeholder,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap input::placeholder,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap textarea::placeholder,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus {
  outline: none !important;
  border-color: #003D96 !important;
  box-shadow: 0 0 0 3px rgba(0, 61, 150, 0.1) !important;
  background-color: #ffffff !important;
}

/* Contact Form 7のカスタムレイアウト内の入力フィールドのフォーカス */
.wpcf7-form .cf7-form-wrapper .wpcf7-text:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-email:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-tel:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-textarea:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-select:focus,
.wpcf7-form .cf7-form-wrapper input.wpcf7-form-control:focus,
.wpcf7-form .cf7-form-wrapper textarea.wpcf7-form-control:focus,
.wpcf7-form .cf7-form-wrapper select.wpcf7-form-control:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap input:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap textarea:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap select:focus,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap input:focus,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap textarea:focus,
.wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap select:focus,
.wpcf7-form .cf7-form-wrapper .row .col-50 input:focus,
.wpcf7-form .cf7-form-wrapper .row .col-50 textarea:focus,
.wpcf7-form .cf7-form-wrapper .row .col-50 select:focus,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] input:focus,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] textarea:focus,
.wpcf7-form .cf7-form-wrapper .row [class*="col-"] select:focus {
  outline: none !important;
  border-color: #003D96 !important;
  box-shadow: 0 0 0 3px rgba(0, 61, 150, 0.1) !important;
  background-color: #ffffff !important;
}

.wpcf7-form .wpcf7-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
  padding-top: 1rem;
}

.wpcf7-form .wpcf7-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
  cursor: pointer;
}

/* 送信ボタンの親要素を中央揃え */
.wpcf7-form p:has(.wpcf7-submit),
.wpcf7-form .submit-center,
.wpcf7-form .cf7-form-wrapper .submit-center {
  text-align: center !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* より強力なセレクタで送信ボタンのスタイルを強制 */
input.wpcf7-submit,
input[type="submit"].wpcf7-submit,
input.wpcf7-form-control.wpcf7-submit,
input.wpcf7-form-control.wpcf7-submit.has-spinner,
.wpcf7-form input.wpcf7-submit,
.wpcf7-form .wpcf7-submit,
.wpcf7-form .cf7-form-wrapper .wpcf7-submit,
.wpcf7-form .submit-center .wpcf7-submit,
.wpcf7-form input[type="submit"],
form.wpcf7-form input.wpcf7-submit,
form.wpcf7-form .wpcf7-submit,
form.wpcf7-form input.wpcf7-form-control.wpcf7-submit,
form.wpcf7-form input.wpcf7-form-control.wpcf7-submit.has-spinner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 14px 32px !important;
  background-color: #003D96 !important;
  background: #003D96 !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(0, 61, 150, 0.3) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 1px !important;
  position: relative !important;
  min-width: 120px !important;
  width: 320px !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}

.wpcf7-form .wpcf7-submit::after,
.wpcf7-form .cf7-form-wrapper .wpcf7-submit::after,
.wpcf7-form .submit-center .wpcf7-submit::after {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin-left: 4px !important;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .cf7-form-wrapper .wpcf7-submit:hover,
.wpcf7-form .submit-center .wpcf7-submit:hover,
input.wpcf7-form-control.wpcf7-submit:hover,
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background-color: #072d6f !important;
  background: #072d6f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(0, 61, 150, 0.3) !important;
}

.wpcf7-form .wpcf7-submit:active,
.wpcf7-form .cf7-form-wrapper .wpcf7-submit:active,
.wpcf7-form .submit-center .wpcf7-submit:active {
  background-color: #003D96 !important;
  color: #ffffff !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 61, 150, 0.2) !important;
}

.wpcf7-form .wpcf7-submit:focus,
.wpcf7-form .cf7-form-wrapper .wpcf7-submit:focus,
.wpcf7-form .submit-center .wpcf7-submit:focus {
  background-color: #003D96 !important;
  color: #ffffff !important;
  outline: none !important;
}

.wpcf7-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 500;
  animation: slideInDown 0.4s ease-out;
}

/* メッセージがない時は非表示 */
.wpcf7-response-output:empty,
.wpcf7-response-output[aria-hidden="true"]:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpcf7-mail-sent-ok {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  color: #166534;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam,
.wpcf7-validation-errors {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 2px solid #fca5a5;
  color: #991b1b;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}

.wpcf7-not-valid-tip::before {
  content: '⚠';
  font-size: 0.875rem;
}

.wpcf7-list-item {
  margin-bottom: 0.75rem;
}

.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.wpcf7-checkbox .wpcf7-list-item:hover,
.wpcf7-radio .wpcf7-list-item:hover {
  background-color: #f8fafc;
}

.wpcf7-checkbox input[type="checkbox"],
.wpcf7-radio input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: #003D96;
  cursor: pointer;
  flex-shrink: 0;
}

/* WPForms のスタイルをテーマに合わせる */
.wpforms-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.wpforms-container .wpforms-field {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 0;
}

.wpforms-container .wpforms-field-label {
  margin-bottom: 0.875rem;
}

.wpforms-container .wpforms-field-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  display: block;
  margin-bottom: 0.375rem;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: #1e293b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.wpforms-container .wpforms-field input[type="text"]::placeholder,
.wpforms-container .wpforms-field input[type="email"]::placeholder,
.wpforms-container .wpforms-field input[type="tel"]::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.wpforms-container .wpforms-field input[type="text"]:focus,
.wpforms-container .wpforms-field input[type="email"]:focus,
.wpforms-container .wpforms-field input[type="tel"]:focus,
.wpforms-container .wpforms-field input[type="url"]:focus,
.wpforms-container .wpforms-field input[type="number"]:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
  outline: none;
  border-color: #003D96;
  box-shadow: 0 0 0 4px rgba(0, 61, 150, 0.1), 0 4px 12px rgba(0, 61, 150, 0.15);
  background-color: #ffffff;
  transform: translateY(-1px);
}

.wpforms-container .wpforms-field textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
  padding-top: 1rem;
}

.wpforms-container .wpforms-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
  cursor: pointer;
}

.wpforms-container .wpforms-submit-container {
  text-align: center;
  margin-top: 1.5rem;
}

.wpforms-container .wpforms-submit-container button[type="submit"],
.wpforms-container .wpforms-submit-container input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem 3.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.2), 0 2px 4px 0 rgba(15, 23, 42, 0.1);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

.wpforms-container .wpforms-submit-container button[type="submit"]::before,
.wpforms-container .wpforms-submit-container input[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.wpforms-container .wpforms-submit-container button[type="submit"]:hover::before,
.wpforms-container .wpforms-submit-container input[type="submit"]:hover::before {
  left: 100%;
}

.wpforms-container .wpforms-submit-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit-container input[type="submit"]:hover {
  background: linear-gradient(135deg, #003D96 0%, #003D96 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -4px rgba(0, 61, 150, 0.4), 0 4px 8px -2px rgba(0, 61, 150, 0.3);
}

.wpforms-container .wpforms-submit-container button[type="submit"]:active,
.wpforms-container .wpforms-submit-container input[type="submit"]:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -2px rgba(0, 61, 150, 0.3);
}

.wpforms-confirmation-container {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  color: #166534;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
  animation: slideInDown 0.4s ease-out;
}

.wpforms-error-container {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 2px solid #fca5a5;
  color: #991b1b;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  animation: slideInDown 0.4s ease-out;
}

.wpforms-field-error .wpforms-error {
  color: #dc2626;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}

.wpforms-field-error .wpforms-error::before {
  content: '⚠';
  font-size: 0.875rem;
}

/* チェックボックスとラジオボタンのスタイル */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: #003D96;
  cursor: pointer;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.wpforms-container .wpforms-field-checkbox label:hover,
.wpforms-container .wpforms-field-radio label:hover {
  background-color: #f8fafc;
}

/* 必須マークのスタイル */
.wpcf7-form .wpcf7-validates-as-required span.required,
.wpcf7-form label span.required,
.wpforms-container .wpforms-required-label {
  color: #dc2626;
  margin-left: 0.25rem;
  font-weight: 700;
  font-size: 1rem;
}

/* WPFormsの必須マークのスタイル（JavaScriptで追加される要素用） */
.wpforms-container .wpforms-field-label .required-asterisk {
  color: #dc2626;
  font-size: 1rem;
  font-weight: 900;
  margin-left: 0.25rem;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
}

/* 必須項目の視覚的な強調 */
.required-mark {
  color: #dc2626;
  font-size: 1.125rem;
  font-weight: 900;
  margin-left: 0.25rem;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.required-field label {
  position: relative;
}

.required-input {
  border-left: 4px solid #dc2626 !important;
  background-color: #fef2f2 !important;
}

.required-input:focus {
  border-left-color: #003D96 !important;
  background-color: #ffffff !important;
}

/* 必須項目のラベルにアイコンを追加（オプション） */
.required-field label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #dc2626;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* フォールバックフォームのスタイル */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#contact-form .space-y-2 {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

#contact-form .space-y-2 label {
  margin-bottom: 0.875rem;
}

#contact-form label {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.02em;
  margin-bottom: 0.875rem;
  display: block;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea,
#contact-form select {
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: #1e293b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
  line-height: 1.5;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form input[type="tel"]:focus,
#contact-form textarea:focus,
#contact-form select:focus {
  outline: none;
  border-color: #003D96;
  box-shadow: 0 0 0 4px rgba(0, 61, 150, 0.1), 0 4px 12px rgba(0, 61, 150, 0.15);
  background-color: #ffffff;
  transform: translateY(-1px);
}

#contact-form textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
}

#contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
  cursor: pointer;
}

#contact-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem 3.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.2), 0 2px 4px 0 rgba(15, 23, 42, 0.1);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

#contact-form button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

#contact-form button[type="submit"]:hover::before {
  left: 100%;
}

#contact-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #003D96 0%, #003D96 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -4px rgba(0, 61, 150, 0.4), 0 4px 8px -2px rgba(0, 61, 150, 0.3);
}

#contact-form button[type="submit"]:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -2px rgba(0, 61, 150, 0.3);
}

/* レスポンシブ対応 */


/* SP表示時の送信ボタンサイズ調整 */


/* =========================================
   Animations (Subtle)
   ========================================= */

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  opacity: 0;
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-on-scroll {
  opacity: 1; /* JS無効時用 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 統計情報グリッドのパディング */
.mt-10.grid[class*="grid-cols-1"][class*="md:grid-cols-4"].fade-on-scroll {
  padding: 0 10rem !important;
}

/* 統計情報グリッド内のすべての要素のパディングを0に */
.mt-10.grid[class*="grid-cols-1"][class*="md:grid-cols-4"].fade-on-scroll > div.p-6.text-center {
  padding: 0 !important;
}

/* 統計情報グリッド内の白いラベルの幅を100%に */
.mt-10.grid[class*="grid-cols-1"][class*="md:grid-cols-4"].fade-on-scroll > div.p-6.text-center > div.bg-white.rounded-full {
  width: 100% !important;
  display: block !important;
}

/* 施工実績カードの角丸とドロップシャドウを削除 */
.mt-12.grid[class*="md:grid-cols-2"] > a.group.flex.flex-col.overflow-hidden.bg-white.shadow-sm {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mt-12.grid[class*="md:grid-cols-2"] > a.group.flex.flex-col.overflow-hidden.bg-white.shadow-sm:hover {
  box-shadow: none !important;
}

/* 施工実績カード内のh3タイトルのフォントカラーを青に */
.mt-12.grid[class*="md:grid-cols-2"] > a.group.flex.flex-col.overflow-hidden.bg-white.shadow-sm h3.text-xl.font-bold {
  color: #003D96 !important;
  font-size: 16px !important;
}

/* お知らせセクションのフォントウェイトをnormalに */
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll,
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll * {
  font-weight: normal !important;
}

/* お知らせセクション内のカテゴリーバッジの幅とテキスト中央配置 */
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll span.inline-flex.rounded-full.bg-white.border {
  width: 160px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* お知らせセクション内の日付表示の幅を固定 */
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll span.font-en.text-sm.text-black,
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll .font-en.text-sm.text-black {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  display: inline-block !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  font-weight: normal !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  letter-spacing: 1px !important;
}

/* お知らせセクション内のタイトルのフォントサイズを16pxに */
.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll div.font-semibold.text-slate-900 {
  font-size: 16px !important;
}

/* 採用情報セクションのタイトルとRECRUITを中央寄せに */
div.grid[class*="lg:grid-cols-2"][class*="lg:items-center"] > div.fade-on-scroll h2[class*="text-[32px]"].font-bold.text-slate-900,
div.grid[class*="lg:grid-cols-2"][class*="lg:items-center"] > div.fade-on-scroll p.mt-3.font-en[class*="text-[14px]"].font-semibold {
  text-align: center !important;
}

/* 採用情報セクション内の説明文のフォントサイズを16pxに */
div.grid[class*="lg:grid-cols-2"][class*="lg:items-center"] > div.fade-on-scroll p.mt-4[class*="text-[18px]"].leading-relaxed.text-slate-600 {
  font-size: 16px !important;
}

/* 採用情報セクション内のボタンを中央配置に */
div.grid[class*="lg:grid-cols-2"][class*="lg:items-center"] > div.fade-on-scroll div.mt-8 {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

/* CTAセクションのh2タイトルのフォントサイズを40pxに */
section.relative.overflow-hidden.bg-white[class*="py-20"][class*="md:py-28"] h2.text-3xl.font-bold.tracking-tight.text-slate-800[class*="md:text-5xl"] {
  font-size: 40px !important;
}

/* CTA Network Canvas（PC表示時） */
#cta-network-canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 0.3 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 共通ボタンクラス（.mc-btn-primary）で統一するため、個別のスタイルは削除 */

/* ヒーローセクション内の英語タイトル（OUR SERVICE等）のletter-spacingを2pxに */
p.text-white.font-en.font-bold.uppercase[class*="tracking"],
p.text-white.font-en.font-bold.uppercase[class*="mb-4"],
p.text-white.font-en.font-bold.uppercase[class*="mb-5"] {
  letter-spacing: 2px !important;
  margin-bottom: 20px !important;
}

/* ヒーローセクション内のh1タイトルの下マージンを0に */
#hero-section h1.text-white.font-bold.tracking-tight.leading-tight,
#hero-content h1.text-white.font-bold.tracking-tight.leading-tight,
h1.text-white.mb-4.font-bold.tracking-tight.leading-tight {
  margin-bottom: 0 !important;
}

/* パンくずリストのマージンボトムを2remに（全ページ共通） */
#hero-content > div.mb-6[class*="md:mb-8"],
#hero-content > div:first-child,
#hero-section #hero-content > div.mb-6[class*="md:mb-8"],
#hero-section #hero-content > div:first-child {
  margin-bottom: 2rem !important;
}

#hero-content > div.mb-6[class*="md:mb-8"] nav.text-white,
#hero-content > div:first-child nav.text-white,
#hero-section #hero-content > div.mb-6[class*="md:mb-8"] nav.text-white,
#hero-section #hero-content > div:first-child nav.text-white {
  margin-bottom: 2rem !important;
}

/* セクションタイトル下の英語ラベル（GREETING等）のletter-spacingを0に（.font-enの4pxを上書き） */
/* .mc-section-subtitle は除外 */
section span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
section.pt-\[85px\] span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
section.bg-slate-100 span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
div.text-center span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
div.fade-on-scroll span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
span.font-en.font-bold.tracking-widest.uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
span.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
span.text-\[#003D96\].font-en.font-bold.tracking-widest.uppercase.text-sm.block:not(.mc-section-subtitle),
span[class*="text-[#003D96]"].font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block:not(.mc-section-subtitle),
.font-en.font-bold.tracking-widest.uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
.font-en.font-bold[class*="tracking-widest"].uppercase.text-sm.block[class*="text-[#003D96]"]:not(.mc-section-subtitle),
.font-en.tracking-widest[class*="text-[#003D96]"]:not(.mc-section-subtitle),
.font-en[class*="tracking-widest"][class*="text-[#003D96]"] {
  letter-spacing: 1px !important;
}

/* プロセスステップの番号（01、02、03、04、05）のスタイル */
#process-steps-container span.font-bold[class*="text-[48px]"][class*="text-[#003D96]"],
#process-steps-container span.font-bold[class*="text-[56px]"][class*="text-[#003D96]"],
#process-steps-container span.font-bold[class*="text-[60px]"][class*="text-[#003D96]"],
#process-steps-container span.font-bold.leading-none[class*="text-[#003D96]"] {
  letter-spacing: 2px !important;
  font-family: 'Koulen', sans-serif !important;
  font-weight: normal !important;
}

/* 主な施工内容のh3に下線を追加 */
h3.text-\[20px\].font-bold.text-\[#003D96\].mb-2.ml-4,
h3[class*="text-[20px]"].font-bold[class*="text-[#003D96]"].mb-2.ml-4,
h3.text-\[20px\].font-bold.mb-2.ml-4,
h3[class*="text-[20px]"].font-bold.mb-2.ml-4,
section h3[class*="text-[20px]"].font-bold.mb-2.ml-4,
section#wireless h3[class*="text-[20px]"].font-bold.mb-2.ml-4,
section#network h3[class*="text-[20px]"].font-bold.mb-2.ml-4,
section#telecom h3[class*="text-[20px]"].font-bold.mb-2.ml-4,
section#wireless h3.text-\[20px\].font-bold.mb-2.ml-4,
section#network h3.text-\[20px\].font-bold.mb-2.ml-4,
section#telecom h3.text-\[20px\].font-bold.mb-2.ml-4,
section#wireless div.fade-on-scroll h3.text-\[20px\].font-bold.mb-2.ml-4,
section#network div.fade-on-scroll h3.text-\[20px\].font-bold.mb-2.ml-4,
section#telecom div.fade-on-scroll h3.text-\[20px\].font-bold.mb-2.ml-4,
section#wireless div.fade-on-scroll.relative.z-10 h3.text-\[20px\].font-bold.mb-2.ml-4,
section#network div.fade-on-scroll.relative.z-10 h3.text-\[20px\].font-bold.mb-2.ml-4,
section#telecom div.fade-on-scroll.relative.z-10 h3.text-\[20px\].font-bold.mb-2.ml-4,
main#main section#wireless h3.text-\[20px\].font-bold.mb-2.ml-4,
main#main section#network h3.text-\[20px\].font-bold.mb-2.ml-4,
main#main section#telecom h3.text-\[20px\].font-bold.mb-2.ml-4 {
  border-bottom: 2px solid #EEF1F8 !important;
  padding-bottom: 0.5rem !important;
  color: #003D96 !important;
}

/* 主な施工内容セクション内のボックスのボーダーカラーを#C3C3C3に */
div.bg-white.border.border-gray-300.p-5.mb-8.ml-4,
div.bg-white[class*="border"][class*="border-gray-300"].p-5.mb-8.ml-4 {
  border-color: #C3C3C3 !important;
}

/* 主な施工内容のh3下の区切り線の色を#C3C3C3に */
div.h-px.bg-gray-300.mb-4.ml-4,
div.h-px[class*="bg-gray-300"].mb-4.ml-4 {
  background-color: #C3C3C3 !important;
}

/* 主な施工内容セクション内のリストアイテムの丸い点の上マージンを11pxに */
ul.grid li.flex span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2,
ul.grid li.flex span[class*="w-2"][class*="h-2"].rounded-full[class*="bg-[#003D96]"].mt-2,
section ul.grid li.flex span.w-2.h-2.rounded-full[class*="bg-[#003D96]"].mt-2,
section#wireless ul.grid li.flex span.w-2.h-2.rounded-full[class*="bg-[#003D96]"].mt-2,
section#network ul.grid li.flex span.w-2.h-2.rounded-full[class*="bg-[#003D96]"].mt-2,
section#telecom ul.grid li.flex span.w-2.h-2.rounded-full[class*="bg-[#003D96]"].mt-2,
ul.grid.grid-cols-2 li.flex span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
section ul.grid.grid-cols-2 li.flex span.w-2.h-2.rounded-full[class*="bg-[#003D96]"].mt-2.flex-shrink-0,
main#main section#wireless ul.grid li.flex span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
main#main section#network ul.grid li.flex span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
main#main section#telecom ul.grid li.flex span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
main#main section#wireless ul.grid.grid-cols-2 li.flex.items-start span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
main#main section#network ul.grid.grid-cols-2 li.flex.items-start span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0,
main#main section#telecom ul.grid.grid-cols-2 li.flex.items-start span.w-2.h-2.rounded-full.bg-\[#003D96\].mt-2.flex-shrink-0 {
  margin-top: 11px !important;
}

/* プロセスステップセクションのコンテナpaddingを調整 */
section.bg-slate-100 .container.mx-auto {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* プロセスステップコンテナのpadding */
#process-steps-container {
  padding: 1rem 1rem !important;
  gap: 1rem !important;
}

/* デスクトップ表示時のgap調整 */


/* 技術力・資格セクションの要素を青色に */
p.text-\[#003D96\].font-en.font-bold.tracking-widest.uppercase,
p[class*="text-[#003D96]"].font-en.font-bold.tracking-widest.uppercase {
  color: #003D96 !important;
}

div.px-6.py-4.bg-white.rounded-lg.text-\[#003D96\].font-bold.text-center.shadow-lg,
div[class*="text-[#003D96]"].px-6.py-4.bg-white.rounded-lg.font-bold.text-center.shadow-lg {
  color: #003D96 !important;
}

/* リストアイテムの丸い点を青色に */
span.w-1\.5.h-1\.5.bg-\[#003D96\].rounded-full.mt-2.flex-shrink-0,
span[class*="bg-[#003D96]"].w-1\.5.h-1\.5.rounded-full.mt-2.flex-shrink-0 {
  background-color: #003D96 !important;
}

/* 技術力セクションの3つのボックスの間隔を狭く */
section.bg-gray-100 .grid.md\:grid-cols-3.gap-8 {
  gap: 1rem !important;
  width: 40rem !important;
  margin: 0 auto !important;
}

/* 技術力セクションの説明文にpaddingを追加 */
section.bg-gray-100 .grid.md\:grid-cols-3 .p-8 p.leading-relaxed {
  padding: 0 1.5rem !important;
}

/* お知らせ一覧の右矢印アイコンの色を青に */
article.insight-card .hidden.md\:flex.self-center.text-slate-300.group-hover\:text-blue-500 {
  color: #003D96 !important;
}

/* 機器セクションのボックスから罫線を削除し、ドロップシャドウを追加 */
section.py-16 .grid.md\:grid-cols-3 div.bg-white.rounded-lg.border,
section.py-16 .grid[class*="md:grid-cols-3"] div.bg-white.rounded-lg.border {
  border: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* コア技術セクションのボックスのpaddingを1remに */
section.bg-white .grid.md\:grid-cols-2 div.bg-white.p-6.md\:p-8.fade-on-scroll.border.rounded-lg,
section.bg-white .grid[class*="md:grid-cols-2"] div.bg-white.fade-on-scroll.border.rounded-lg {
  padding: 1rem !important;
}

/* コア技術セクション全体の上下paddingを50pxに */
section.bg-white[class*="py-16"][class*="md:py-24"]:nth-of-type(2) {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* 設備・機材セクションの上下paddingを50pxに */
section[class*="py-16"][class*="md:py-24"][style*="background-color: #f0f4f8"] {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* 有資格作業員数セクションの上paddingを45px、下paddingを70pxに */
section.bg-gray-100[class*="py-16"][class*="md:py-24"][style*="background-color: #EEF1F8"] {
  padding-top: 45px !important;
  padding-bottom: 70px !important;
}

/* 施工実績カテゴリータグの背景色とテキストカラーを変更 */
span.inline-block.px-3.py-1\.5.bg-blue-600.text-white.text-xs.font-bold.rounded-full.shadow-sm,
span.inline-block[class*="bg-blue-600"].text-white.text-xs.font-bold.rounded-full {
  background-color: #EEF1F8 !important;
  color: #1A1A1A !important;
}

/* 施工実績カードの日付を黒色に */
article.case-study-card div.text-sm.text-slate-400,
article.case-study-card div[class*="text-slate-400"] {
  color: #1A1A1A !important;
}

/* 施工実績カードのタイトルを青色に */
article.case-study-card h3.text-lg.font-bold.text-\[#003D96\],
article.case-study-card h3[class*="text-[#003D96]"].font-bold {
  color: #003D96 !important;
}

/* お知らせと施工実績の本文の段落間に余白を追加 */
.prose p,
.prose-lg p,
.prose-slate p,
div.prose p,
div.prose-lg p {
  margin-bottom: 1rem !important;
}

/* お知らせと施工実績の本文で最後の段落は余白なし */
.prose p:last-child,
.prose-lg p:last-child,
div.prose p:last-child,
div.prose-lg p:last-child {
  margin-bottom: 0 !important;
}

/* お知らせと施工実績の本文の画像の下に余白を追加 */
.prose img,
.prose-lg img,
.prose-slate img,
div.prose img,
div.prose-lg img {
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
}

/* 採用情報ページの特定セクションのpadding-topを0に */
section.bg-white[class*="py-16"][class*="pb-16"][class*="md:py-24"][class*="md:pb-24"] {
  padding-top: 0 !important;
}

/* 採用情報ページの福利厚生セクションのpadding-topを0に */
main#main > section.bg-white[class*="py-16"][class*="md:py-24"]:nth-of-type(4) {
  padding-top: 0 !important;
}

/* 採用情報ページの募集職種セクションのpadding-topを0に */
main#main > section.bg-white[class*="py-16"][class*="md:py-24"]:nth-of-type(5) {
  padding-top: 0 !important;
}

/* プロセスステップの親要素を真円に */
#process-steps-container > div.relative.z-10.text-center.fade-on-scroll {
  padding: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 4px solid #003D96 !important;
  margin: 0 auto !important;
  width: fit-content !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  background-color: white !important;
  max-width: 210px !important;
  max-height: 210px !important;
}

/* プロセスステップの円形コンテナ */
#process-steps-container div.rounded-full {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
}

/* プロセスステップの円形コンテナ内のコンテンツのスタイル */
#process-steps-container div.rounded-full[class*="border-4"][class*="border-[#003D96]"] > *,
#process-steps-container div.rounded-full.border-4.border-\[#003D96\] > * {
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* プロセスステップの番号のフォントサイズ調整 */
#process-steps-container div.rounded-full span[class*="text-[48px]"],
#process-steps-container div.rounded-full span[class*="text-[56px]"],
#process-steps-container div.rounded-full span[class*="text-[60px]"] {
  font-size: clamp(40px, 4.5vw, 56px) !important;
  line-height: 1 !important;
  font-weight: bold !important;
  margin-bottom: 0.25rem !important;
}

/* プロセスステップのタイトルのフォントサイズ調整 */
#process-steps-container div.rounded-full h3[class*="text-[18px]"],
#process-steps-container div.rounded-full h3[class*="text-[22px]"],
#process-steps-container div.rounded-full h3[class*="text-[24px]"] {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
}

/* プロセスステップの説明文のフォントサイズ調整 */
#process-steps-container div.rounded-full p[class*="text-[14px]"],
#process-steps-container div.rounded-full p[class*="text-[16px]"],
#process-steps-container div.rounded-full p[class*="text-[17px]"] {
  font-size: clamp(14px, 1.5vw, 16px) !important;
  line-height: 1.3 !important;
  font-weight: normal !important;
}

/* プロセスステップ間の罫線を常にセンターに配置 */
#process-steps-container .process-connector-line {
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
}

/* プロセス間の接続線を01と05の中心から出るように調整 */
#process-steps-container {
  position: relative !important;
}

#process-steps-container .process-connector-line {
  left: 10% !important;
  right: 10% !important;
  width: 80% !important;
}

/* タブレット表示時の円とテキストサイズ調整 */


/* 共通ボタンクラス（.mc-btn-primary）で統一するため、個別のスタイルは削除 */

/* 施工内容セクション内のh2タイトルの色を#003D96に */
section#wireless h2.text-\[34px\].font-bold.text-\[#003D96\],
section#network h2.text-\[34px\].font-bold.text-\[#003D96\],
section#telecom h2.text-\[34px\].font-bold.text-\[#003D96\],
section#wireless h2[class*="text-[34px]"].font-bold[class*="text-[#003D96]"],
section#network h2[class*="text-[34px]"].font-bold[class*="text-[#003D96]"],
section#telecom h2[class*="text-[34px]"].font-bold[class*="text-[#003D96]"] {
  color: #003D96 !important;
}


/* JSで制御 */
.js-scroll-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.js-scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   Layout Helpers
   ========================================= */

.container-tight {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.line-clamp-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 画像フォールバック */
.image-fallback {
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   Hero Background Slide Animation
   ========================================= */
#hero-section:not(.hero) {
  height: 290px; /* デザインの高さに合わせる */
  min-height: 290px; /* 最小高さも290pxに設定 */
  display: flex;
  align-items: flex-start; /* 上揃えに変更 */
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; /* パディングを含めて高さを計算 */
}

#hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background-image {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center; /* 右側に画像を配置 */
  margin-left: auto; /* 右寄せ */
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  z-index: 2;
}

.hero-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 横幅に合わせて縦も拡大 */
  object-position: right top; /* 右寄せ・上側 */
}


#hero-content {
  padding-top: 20px; /* 上から20pxの位置に配置 */
  padding-bottom: 0; /* 下側のパディングなし */
}

.hero-content-inner {
  width: 100%;
  min-height: clamp(520px, 70vw, 900px); /* 画面幅に応じて高さを拡大 */
  display: flex;
  align-items: center; /* 縦中央揃え */
  padding-left: 24px; /* 基本の左側24px */
  padding-right: 24px; /* 基本の右側24px */
  padding-top: 40px; /* 基本の上側パディング（SP用） */
  padding-bottom: 40px; /* 基本の下側パディング（SP用） */
  box-sizing: border-box;
}

/* 左側の青いパネル */
.hero-text-panel {
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, rgba(5, 34, 79, 0.95) 0%, rgba(0, 61, 150, 0.85) 100%);
  padding: 60px 48px;
  max-width: 750px;
  clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ヒーローテキストコンテンツのスタイル */
.hero-text-content {
  width: 100%;
  z-index: 10;
  padding-top: 0;
}


/* モバイル（SP）対応 */


/* タブレット対応 */


/* デスクトップ対応（1024px以上） */


/* ---------------------------------------------
   Hero layout (per provided design)
--------------------------------------------- */
#hero-section.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
  color: #fff;
}

/* デスクトップで別定義に上書きされないよう保護 */


/* 背景画像の上に薄いオーバーレイ（可読性向上） */
#hero-section.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(0, 0, 0, 0.0) 100%
  );
  z-index: 0;
}

#hero-section.hero .hero-content {
  position: relative;
  z-index: 2;
  color: #fff !important;
  max-width: 80rem; /* max-w-7xlと同じ（1280px） */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
  letter-spacing: 1px;
}

/* 念のため：ヒーロー内のテキスト色を強制（SP/PC共通） */
#hero-section.hero .hero-content * {
  color: #fff !important;
}

#hero-section.hero .sub-headline {
  font-family: 'Koulen', 'Jost', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  font-size: 50px !important;
  letter-spacing: 1px !important;
  margin-bottom: 2rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
}

#hero-section.hero .headline {
  font-size: 64px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin-bottom: 2.5rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
  margin-top: 0 !important;
}

#hero-section.hero .description {
  font-size: 19px !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}





/* 事業内容セクションは、テンプレ側（bg-white等）の配色に従う */
.services-section {
  background-color: transparent !important;
  color: inherit !important;
  padding-top: 70px !important;
  padding-bottom: 60px !important;
}

/* 事業内容セクション内の説明文のマージントップ */
.services-section div.text-center > p.mt-4.text-\[18px\] {
  margin-top: 40px !important;
}

/* 事業内容セクション内のグリッドのマージントップ */
.services-section div.mt-12.grid.gap-8.md\:grid-cols-3 {
  margin-top: 60px !important;
}

/* 事業内容セクション内のカードの白い背景部分のパディング */
section.services-section article.flex.flex-col.overflow-hidden.bg-\[#003D96\].fade-on-scroll div.bg-white.flex-1.flex.flex-col,
.services-section div.mt-12.grid.gap-8.md\:grid-cols-3 article.flex.flex-col.overflow-hidden.bg-\[#003D96\].fade-on-scroll div.bg-white.flex-1.flex.flex-col,
.services-section article div.bg-white.flex-1.flex.flex-col,
.services-section div.mt-12.grid.gap-8.md\:grid-cols-3 > article.flex.flex-col.overflow-hidden.bg-\[#003D96\].fade-on-scroll:nth-child(3) div.bg-white.flex-1.flex.flex-col {
  padding-top: 15px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* 事業内容セクション内の3番目のarticle要素（電気通信工事）のパディング */
.services-section div.mt-12.grid.gap-8.md\:grid-cols-3 > article.flex.flex-col.overflow-hidden.bg-\[#003D96\].fade-on-scroll:nth-child(3) {
  padding: 15px 0 40px !important;
}

/* 事業内容セクション内のカードのタイトル部分のマージン */
.services-section article div.bg-white.flex-1.flex.flex-col > div.flex.items-center.gap-3 {
  margin: 15px 0 0 !important;
}

/* 事業内容セクション内のボタンコンテナのマージントップ */
.services-section div.mt-10.flex.justify-center {
  margin-top: 50px !important;
}

/* Quality / Stats セクションの背景色とパディング */
section.bg-\[#f3f6fb\].py-16.md\:py-24 {
  background-color: #EEF1F8 !important;
  padding-top: 70px !important;
  padding-bottom: 60px !important;
}

/* News / お知らせセクションの背景色とパディング（max-w-5xlで特定） */
section.bg-\[#f3f6fb\].py-16.md\:py-24:has(div.max-w-5xl) {
  background-color: #EEF1F8 !important;
  padding-top: 120px !important;
  padding-bottom: 70px !important;
}

/* お知らせセクション内のリンク要素のパディング */
section.bg-\[#f3f6fb\].py-16.md\:py-24:has(div.max-w-5xl) a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
section.bg-\[#f3f6fb\].py-16.md\:py-24 div.max-w-5xl a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
section.bg-\[#f3f6fb\].py-16.md\:py-24 ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
section.bg-\[#f3f6fb\].py-16.md\:py-24 a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
section.bg-\[#f3f6fb\].py-16.md\:py-24 div.mt-10.overflow-hidden.bg-white.shadow-sm ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
div.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
section.bg-\[#f3f6fb\].py-16.md\:py-24 ul li a[class*="block"][class*="transition-colors"][class*="hover:bg-[#f7f9fd]"],
section.bg-\[#f3f6fb\].py-16.md\:py-24 a[class*="block"][class*="transition-colors"][class*="hover:bg-[#f7f9fd]"],
main#main section.bg-\[#f3f6fb\].py-16.md\:py-24 ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
main#main section.bg-\[#f3f6fb\].py-16.md\:py-24 div.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
main#main section.bg-\[#f3f6fb\].py-16.md\:py-24 div.mx-auto.max-w-5xl div.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll ul li a.block.transition-colors.hover\:bg-\[#f7f9fd\].no-underline,
div.mt-10.overflow-hidden.bg-white.shadow-sm.fade-on-scroll ul li a[class*="block"][class*="transition-colors"],
section.bg-\[#f3f6fb\] ul li a.block,
section.bg-\[#f3f6fb\] ul li a[class*="block"][class*="transition-colors"] {
  padding: 20px 30px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Achievements / Case studies セクションのパディング */
section.bg-white.py-16.md\:py-24:has(h2.text-\[32px\] + p.mt-3.font-en),
main#main > section.bg-white.py-16.md\:py-24:has(div.text-center h2.text-\[32px\].font-bold.text-slate-900),
main#main > section.bg-white.py-16.md\:py-24.achievements-section,
section.bg-white.py-16.md\:py-24.achievements-section {
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}

/* 施工実績セクション内のカードのパディング */
section.bg-white.py-16.md\:py-24:has(h2.text-\[32px\] + p.mt-3.font-en) a.group.flex.flex-col.overflow-hidden.bg-white.shadow-sm div.p-6.bg-white {
  padding: 25px 0 0 !important;
}

/* Recruit / 採用情報セクションのパディング（lg:grid-cols-2で特定） */
section.bg-white.py-16.md\:py-24:has(div.grid.lg\:grid-cols-2.lg\:items-center) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 採用情報セクション内の説明文のマージントップ */
section.bg-white.py-16.md\:py-24:has(div.grid.lg\:grid-cols-2.lg\:items-center) p.mt-4.text-\[18px\].leading-relaxed.text-slate-600 {
  margin-top: 40px !important;
}

/* 採用情報セクション内のボタンコンテナのマージントップ */
section.bg-white.py-16.md\:py-24:has(div.grid.lg\:grid-cols-2.lg\:items-center) div.mt-8 {
  margin-top: 50px !important;
}

/* ご挨拶セクション内のprose要素の左右パディングを削除 */
section.bg-white.py-24.md\:py-32 div.prose.prose-lg.text-slate-600.leading-relaxed {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* プライバシーポリシーページのspan要素の左右パディングを削除 */
section.bg-white.py-24.md\:py-32 span.text-blue-600.text-xs.font-en.font-bold.tracking-widest.uppercase.block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* プライバシーポリシーページのh2要素に左側の青色罫線とパディングを追加 */
section.bg-white.py-24.md\:py-32 h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3 {
  border-left: 4px solid #003D96 !important;
  padding: 10px 0 10px 15px !important;
  margin-bottom: 40px !important;
  font-size: 36px !important;
  color: #1A1A1A !important;
}

/* 協力業者募集ページの「事業内容」h2要素の左側罫線を削除 */
section.bg-white.py-24.md\:py-32 div.text-center.mb-20.fade-on-scroll h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3 {
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}

/* 協力業者募集ページの事業内容セクションのマージンボトムを10pxに設定 */
section.bg-white.py-24.md\:py-32:has(div.text-center.mb-20.fade-on-scroll h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3) {
  margin-bottom: 10px !important;
}

/* 協力業者募集ページの「Business content」span要素のマージンボトムを50pxに設定 */
section.bg-white.py-24.md\:py-32 div.text-center.mb-20.fade-on-scroll span.text-blue-600.text-xs.font-en.font-bold.tracking-widest.uppercase.block {
  margin-bottom: 50px !important;
  font-size: 17px !important;
}

/* 協力業者募集ページの「Why Partner With Us」span要素の色とフォントサイズを設定 */
section.bg-white.py-24.md\:py-32 div.text-center.fade-on-scroll span.text-blue-600.text-xs.font-en.font-bold.tracking-widest.uppercase.block {
  color: #003D96 !important;
  font-size: 17px !important;
}

/* 協力業者募集ページの「パートナーとして選ばれる理由」h2要素の罫線を削除 */
section.bg-white.py-24.md\:py-32 div.text-center.fade-on-scroll h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3 {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}

/* プライバシーポリシーページの個人情報保護方針のh2要素のフォントサイズ */
section.bg-white.py-24.md\:py-32 h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-8 {
  font-size: 26px !important;
}

/* プライバシーポリシーページのボックス要素の背景色と罫線色を変更 */
section.bg-white.py-24.md\:py-32 div.bg-slate-50.p-8.rounded-2xl.border.border-slate-200.shadow-sm {
  background-color: #FAFCFF !important;
  border-color: #EEF1F8 !important;
}

/* プライバシーポリシーページのmb-12要素に上側の罫線とパディングを追加 */
section.bg-white.py-24.md\:py-32 div.mb-12.fade-on-scroll {
  border-top: 1px solid #D9D9D9 !important;
  padding-top: 35px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 下層ページのhero-contentの幅をヘッダーに合わせる */
section#hero-section #hero-content {
  max-width: 80rem !important; /* max-w-7xlと同じ */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 下層ページのh1要素のパディングを削除 */
section#hero-section h1.text-white.mb-4.font-bold.tracking-tight.leading-tight {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* プライバシー情報ページのh2要素のフォントサイズを26pxに変更、マージンボトムを15pxに変更 */
section.bg-white.py-24.md\:py-32 h2.text-2xl.md\:text-3xl.font-bold.text-slate-900.mb-6 {
  font-size: 26px !important;
  margin-bottom: 15px !important;
}

/* プライバシー情報ページのtext-xl.font-semibold.text-blue-600クラスの色を黒に変更（株式会社メディコム、笹岡　茂など） */
section.bg-white.py-24.md\:py-32 p.text-xl.font-semibold.text-blue-600 {
  color: #000000 !important;
}

/* プライバシー情報ページのセクション間の罫線の色を#D9D9D9に変更、パディングを30px 0に変更、マージントップを0に */
section.bg-white.py-24.md\:py-32 div.pb-8.border-b.border-slate-200 {
  border-color: #D9D9D9 !important;
  padding: 30px 0 !important;
  margin-top: 0 !important;
}

/* プライバシー情報ページの「個人情報の取り扱いについて」h2要素のマージンボトムを40pxに変更 */
section.bg-white.py-24.md\:py-32 h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3 {
  margin-bottom: 40px !important;
}

/* プライバシー情報ページのmb-16.fade-on-scroll要素のマージンボトムを削除 */
section.bg-white.py-24.md\:py-32 div.mb-16.fade-on-scroll {
  margin-bottom: 0 !important;
}

/* プライバシー情報ページのbg-slate-50要素の罫線と背景色を変更 */
section.bg-white.py-24.md\:py-32 div.bg-slate-50.p-6.rounded-xl.border.border-slate-200.space-y-4 {
  border-color: #EEF1F8 !important;
  background-color: #FAFCFF !important;
}

/* プライバシー情報ページのbg-slate-50要素内のp要素にマージンボトムを追加 */
section.bg-white.py-24.md\:py-32 div.bg-slate-50.p-6.rounded-xl.border.border-slate-200.space-y-4 > div > p {
  margin-bottom: 20px !important;
}

/* プライバシー情報ページのsection要素のパディングボトムを0に変更（より具体的なセレクタで上書き） */
main#main > section.bg-white.py-24.md\:py-32,
main#main > section.bg-white[class*="py-24"][class*="md:py-32"],
section.bg-white.py-24.md\:py-32 {
  padding-bottom: 0 !important;
}



/* プライバシーポリシーページの番号表示要素のフォントをKoulenに変更 */
section.bg-white.py-24.md\:py-32 div.flex-shrink-0.bg-blue-600.text-white.rounded-lg.flex.items-center.justify-center.font-bold.text-xl {
  font-family: 'Koulen', sans-serif !important;
  background-color: #003D96 !important;
  width: 48px !important;
  height: 48px !important;
}

/* プライバシーポリシーページの個人情報保護方針セクションのgapを変更 */
section.bg-white.py-24.md\:py-32 div.flex.items-start.gap-4 {
  gap: 2rem !important;
}

/* プライバシーポリシーページの代表取締役社長の文字色を黒に */
section.bg-white.py-24.md\:py-32 div.mt-12.pt-8.border-t.border-slate-200.text-center.text-slate-600.fade-on-scroll p.text-lg.font-semibold.text-blue-600 {
  color: #1A1A1A !important;
}

/* プライバシーポリシーページの制定・改訂情報セクションのテキストを右寄せに */
section.bg-white.py-24.md\:py-32 div.mt-12.pt-8.border-t.border-slate-200.text-center.text-slate-600.fade-on-scroll {
  text-align: right !important;
}

/* プライバシーポリシーページの改訂日付のマージンボトム */
section.bg-white.py-24.md\:py-32 div.mt-12.pt-8.border-t.border-slate-200.text-center.text-slate-600.fade-on-scroll > p:nth-of-type(2) {
  margin-bottom: 10px !important;
}

/* プライバシーポリシーページのセクションのパディング */
section.bg-white.py-24.md\:py-32:has(div.mb-16.fade-on-scroll h2.text-3xl.md\:text-4xl.font-bold.text-slate-900.mb-3) {
  padding-top: 90px !important;
  padding-bottom: 60px !important;
}

/* ご挨拶セクションのパディング調整（PC表示時のみ） */


/* プライバシーポリシーページのお問い合わせ先セクションの文字色を黒に */
section.bg-white.py-24.md\:py-32 div.mt-16.fade-on-scroll div.bg-slate-50.p-8.rounded-2xl.border.border-slate-200.shadow-sm,
section.bg-white.py-24.md\:py-32 div.mt-16.fade-on-scroll div.bg-slate-50.p-8.rounded-2xl.border.border-slate-200.shadow-sm * {
  color: #1A1A1A !important;
}

section.bg-white.py-24.md\:py-32 div.mt-16.fade-on-scroll div.bg-slate-50.p-8.rounded-2xl.border.border-slate-200.shadow-sm a {
  color: #003D96 !important;
}

section.bg-white.py-24.md\:py-32 div.mt-16.fade-on-scroll div.bg-slate-50.p-8.rounded-2xl.border.border-slate-200.shadow-sm a:hover {
  color: #072d6f !important;
}

/* Contact Options Card Width - PC only */


/* Contact Form Box - Tablet and SP padding */


/* SP表示時の調整 - サービスセクションの罫線を最優先で削除 */


/* =========================================
   Breadcrumbs Style - No Wrap
   ========================================= */
#hero-section nav.text-white {
  color: white !important;
  white-space: nowrap;
  overflow: hidden;
}

/* SP表示時はパンくずリストの改行を許可 */


#hero-section nav.text-white span {
  color: white !important;
  white-space: nowrap;
}

#hero-section nav.text-white br {
  display: none;
}

#hero-section nav.text-white a {
  color: white !important;
  text-decoration: none;
}

#hero-section nav.text-white a:hover {
  opacity: 0.8;
  transition: opacity 0.2s;
}

/* =========================================
   Process Connector Line (施工の流れ)
   ========================================= */
.process-connector-line {
  height: 4px;
  background-color: #003D96;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}





/* Careers page - Right side layout for PC */


/* Employee Voice - Background Image for Right Column */
.single-employee-voice-bg {
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Employee Voice - Cross Pattern Background */
.employee-voice-grid {
  position: relative;
}

/* =========================================
   Single Post Page Styles (Figma Design)
   ========================================= */

/* 個別記事ページのコンテナ */
.single-post-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 180px;
  background-color: #FFFFFF;
}







/* 個別記事ページのコンテンツエリア */
.single-post-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 0;
}



/* メタ情報とナビゲーションのスタイル */
.single-post-meta {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid #003D96;
}

.single-post-navigation {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #003D96;
}



/* 個別記事ページの本文スタイル */
.single-post-prose {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  color: #1A1A1A;
  line-height: 1.75;
  letter-spacing: -0.03em;
}

.single-post-prose p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75em;
  letter-spacing: -0.03em;
  color: #1A1A1A;
  margin-bottom: 1.5rem;
}

.single-post-prose p:last-child {
  margin-bottom: 0;
}

/* 見出しスタイル */
.single-post-prose h1,
.single-post-prose h2,
.single-post-prose h3,
.single-post-prose h4,
.single-post-prose h5,
.single-post-prose h6 {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4em;
  letter-spacing: -0.03em;
  color: #003D96;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-post-prose h1:first-child,
.single-post-prose h2:first-child,
.single-post-prose h3:first-child {
  margin-top: 0;
}

/* リストスタイル */
.single-post-prose ul,
.single-post-prose ol {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: -0.03em;
  color: #1A1A1A;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.single-post-prose ul li,
.single-post-prose ol li {
  margin-bottom: 0.5rem;
}

.single-post-prose ul li::marker {
  color: #003D96;
}

/* リンクスタイル */
.single-post-prose a {
  color: #003D96;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.single-post-prose a:hover {
  opacity: 0.8;
}

/* 画像スタイル */
.single-post-prose img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  display: block;
}

/* 引用スタイル */
.single-post-prose blockquote {
  border-left: 4px solid #003D96;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #1A1A1A;
}

/* コードスタイル */
.single-post-prose code {
  background-color: #FAFCFF;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 14px;
  color: #003D96;
}

.single-post-prose pre {
  background-color: #FAFCFF;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 2rem 0;
}

/* WordPressのデフォルトページネーションを非表示 */
nav.navigation.pagination {
  display: none !important;
}

.single-post-prose pre code {
  background-color: transparent;
  padding: 0;
}

/* 区切り線 */
.single-post-prose hr {
  border: none;
  border-top: 1px solid #003D96;
  margin: 2rem 0;
}

/* メタ情報とナビゲーションの区切り線 */
.single-post-meta,
.single-post-navigation {
  border-top: 1px solid #003D96;
}

/* セクション背景色（必要に応じて） */
.single-post-section {
  background-color: #FAFCFF;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 4px;
}

/* レスポンシブ対応 */


/* プライバシー情報ページのsection要素のパディングボトムを0に変更（最優先・ファイル末尾） */
main#main > section.bg-white.py-24.md\:py-32 {
  padding-bottom: 0 !important;
  padding-top: 6rem !important;
}



/* =========================================
   Technology Page SP表示時のコンテンツはみ出し修正
   ========================================= */


  /* Employee Voice Single Box Border削除（SP表示時のみ） */
  article#post.bg-white div.mb-0.box-row-1,
  article.bg-white[class*="employee_voice"] div.mb-0.box-row-1,
  article#post div[class*="mb-0"][class*="box-row-1"],
  article#post.bg-white div.mb-0.box-row-2,
  article.bg-white[class*="employee_voice"] div.mb-0.box-row-2,
  article#post div[class*="mb-0"][class*="box-row-2"] {
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-width: 0 !important;
  }


  /* Core Technologies Sectionのパディング調整（SP表示時のみ） */
  section.bg-white.py-16.md\:py-24[style*="padding-top: 60px"],
  section.bg-white[class*="py-16"][class*="md:py-24"][style*="padding-top: 60px"],
  section.bg-white.py-16.md\:py-24[style*="padding: 2rem 0"],
  section.bg-white[class*="py-16"][class*="md:py-24"][style*="padding: 2rem 0"] {
    padding: 2rem 1rem !important;
  }

/* Core Technologies Sectionのパディング調整（PC表示時のみ） */


/* Key Metrics Sectionのコンテナ幅調整（PC表示時のみ） */


/* Key Metrics Sectionのグリッド幅調整（PC表示時のみ） */

/* PC用メディアクエリ */

@media (max-width: 782px) {

  body.admin-bar #main-header {
    top: 46px;
  }

}

@media (min-width: 768px) {

  .header-inner {
    height: 80px; /* タブレット: 80px */
  }

}

@media (min-width: 1024px) {

  .header-inner {
    height: 120px; /* PC: 120px */
  }

}

@media (min-width: 768px) {

  .header-spacer {
    height: 80px; /* タブレット: 80px */
  }

}

@media (min-width: 1024px) {

  .header-spacer {
    height: 120px; /* PC: 120px */
  }

}

@media (min-width: 768px) {

  body.admin-bar .header-spacer {
    height: calc(80px + 32px);
  }

}

@media (min-width: 1024px) {

  body.admin-bar .header-spacer {
    height: calc(120px + 32px);
  }

}

@media (max-width: 782px) {

  body.admin-bar .header-spacer {
    height: calc(64px + 46px);
  }

}

@media (min-width: 768px) {

  .header-logo {
    width: 180px; /* タブレット: 180px */
  }

}

@media (min-width: 1024px) {

  .header-logo {
    width: 212px; /* PC: 212px */
  }

}

@media (min-width: 768px) {

  .wpcf7-form .cf7-form-wrapper .wpcf7-select,
  .wpcf7-form .cf7-form-wrapper select.wpcf7-form-control,
  .wpcf7-form .cf7-form-wrapper .wpcf7-form-control-wrap select,
  .wpcf7-form .cf7-form-wrapper span.wpcf7-form-control-wrap select {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

}

@media (min-width: 768px) {

  .wpcf7-form .cf7-form-wrapper p .wpcf7-form-control-wrap,
  .wpcf7-form .cf7-form-wrapper p span.wpcf7-form-control-wrap {
    text-align: left !important;
  }
  
  .wpcf7-form .cf7-form-wrapper p .wpcf7-form-control-wrap select,
  .wpcf7-form .cf7-form-wrapper p span.wpcf7-form-control-wrap select {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

}

@media (max-width: 768px) {

  .contact-form-container {
    padding: 1.5rem;
  }
  
  .wpcf7-form .wpcf7-submit,
  .wpcf7-form .cf7-form-wrapper .wpcf7-submit,
  .wpcf7-form .submit-center .wpcf7-submit {
    width: 320px !important;
    max-width: 320px !important;
    padding: 14px 32px !important;
  }
  
  .wpforms-container .wpforms-submit-container button[type="submit"],
  .wpforms-container .wpforms-submit-container input[type="submit"],
  #contact-form button[type="submit"] {
    width: 100%;
    padding: 1rem 2rem;
  }

}

@media (min-width: 1025px) {

  #process-steps-container {
    gap: 1.25rem !important;
  }

}

@media (min-width: 768px) and (max-width: 1024px) {

  /* プロセスステップの親要素のサイズを縮小 */
  #process-steps-container > div.relative.z-10.text-center.fade-on-scroll {
    padding: 1.25rem !important;
  }
  
  /* プロセスステップの番号のフォントサイズを縮小 */
  #process-steps-container div.rounded-full span[class*="text-[48px]"],
  #process-steps-container div.rounded-full span[class*="text-[56px]"],
  #process-steps-container div.rounded-full span[class*="text-[60px]"] {
    font-size: clamp(36px, 4vw, 48px) !important;
  }
  
  /* プロセスステップのタイトルのフォントサイズを縮小 */
  #process-steps-container div.rounded-full h3[class*="text-[18px]"],
  #process-steps-container div.rounded-full h3[class*="text-[22px]"],
  #process-steps-container div.rounded-full h3[class*="text-[24px]"] {
    font-size: clamp(16px, 2vw, 22px) !important;
  }
  
  /* プロセスステップの説明文のフォントサイズを縮小 */
  #process-steps-container div.rounded-full p[class*="text-[14px]"],
  #process-steps-container div.rounded-full p[class*="text-[16px]"],
  #process-steps-container div.rounded-full p[class*="text-[17px]"] {
    font-size: clamp(12px, 1.3vw, 14px) !important;
  }
  
  /* プロセスステップコンテナの間隔を調整 */
  #process-steps-container {
    gap: 1rem !important;
  }

}

@media (min-width: 640px) and (max-width: 1023px) {

  #hero-section:not(.hero) {
    height: 290px; /* タブレットでもデザインの高さを維持 */
    min-height: 290px;
  }
  
  .hero-content-inner {
    padding-left: 48px; /* タブレットでは左側48px */
  }
  
  .hero-text-content {
    padding-top: 40px; /* タブレットでは上端40px */
  }
  
  .hero-slogan {
    font-size: 28px;
  }
  
  .hero-title {
    font-size: 48px;
    padding-top: 20px; /* タブレットでは調整 */
  }
  
  .hero-description {
    font-size: 15px;
  }

}

@media (min-width: 1024px) {

  /* 事業内容セクションのパディング（PC表示時のみ） */
  section.bg-white.py-16.md\:py-24.services-section,
  section.bg-white[class*="py-16"][class*="md:py-24"].services-section,
  .services-section {
    padding-top: 70px !important;
    padding-bottom: 60px !important;
  }

  /* 信頼される実績セクションのパディング（PC表示時のみ） */
  main#main > section.bg-white.py-16.md\:py-24.achievements-section,
  main#main > section.bg-white[class*="py-16"][class*="md:py-24"].achievements-section,
  section.bg-white.py-16.md\:py-24.achievements-section,
  section.bg-white[class*="py-16"][class*="md:py-24"].achievements-section,
  section.achievements-section[style*="padding-top"],
  section.achievements-section[style*="padding-bottom"],
  section.achievements-section[style],
  .achievements-section {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
  }

  /* 採用情報セクションのタイトルとRECRUITを中央寄せに（PC表示時のみ） */
  section.recruit-section .mc-section-title,
  section.recruit-section h2.mc-section-title,
  section.recruit-section .mc-section-subtitle,
  section.recruit-section p.mc-section-subtitle,
  main#main > section.recruit-section .mc-section-title,
  main#main > section.recruit-section h2.mc-section-title,
  main#main > section.recruit-section .mc-section-subtitle,
  main#main > section.recruit-section p.mc-section-subtitle,
  section.recruit-section div.fade-on-scroll .mc-section-title,
  section.recruit-section div.fade-on-scroll h2.mc-section-title,
  section.recruit-section div.fade-on-scroll .mc-section-subtitle,
  section.recruit-section div.fade-on-scroll p.mc-section-subtitle {
    text-align: center !important;
  }

  /* 沿革セクションのパディング（PC表示時のみ） */
  /* h2.mc-section-titleとspan.mc-section-subtitleを含む沿革セクションを特定 */
  main#main > section.bg-white.py-24.md\:py-32:has(h2.mc-section-title + span.mc-section-subtitle),
  main#main > section.bg-white[class*="py-24"][class*="md:py-32"]:has(h2.mc-section-title + span.mc-section-subtitle),
  section.bg-white.py-24.md\:py-32:has(h2.mc-section-title + span.mc-section-subtitle) {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  /* 沿革セクションのパディング（nth-of-typeで2番目のセクションを特定） */
  main#main > section.bg-white.py-24.md\:py-32:nth-of-type(2),
  main#main > section.bg-white[class*="py-24"][class*="md:py-32"]:nth-of-type(2) {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* 沿革セクション内のタイトル部分のマージンボトム（PC表示時のみ） */
  main#main > section.bg-white.py-24.md\:py-32:has(h2.mc-section-title + span.mc-section-subtitle) div.mb-20.fade-on-scroll.text-center,
  main#main > section.bg-white[class*="py-24"][class*="md:py-32"]:has(h2.mc-section-title + span.mc-section-subtitle) div.mb-20.fade-on-scroll.text-center,
  section.bg-white.py-24.md\:py-32:has(h2.mc-section-title + span.mc-section-subtitle) div.mb-20.fade-on-scroll.text-center,
  main#main > section.bg-white.py-24.md\:py-32:nth-of-type(2) div.mb-20.fade-on-scroll.text-center,
  main#main > section.bg-white[class*="py-24"][class*="md:py-32"]:nth-of-type(2) div.mb-20.fade-on-scroll.text-center {
    margin-bottom: 50px !important;
  }

  #hero-section:not(.hero) {
    height: 290px !important; /* デザインの高さに合わせる */
    min-height: 290px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .hero-slide-image {
    width: 100% !important;
    height: 100% !important; /* 親の高さに合わせて縦横100% */
    object-fit: cover !important; /* 横幅に合わせて縦も拡大 */
    object-position: right top !important; /* 右寄せ・上側 */
  }
  
  #hero-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px !important; /* 上から20pxの位置に配置 */
    padding-bottom: 0 !important; /* 下側のパディングなし */
  }
  
  .hero-content-inner {
    min-height: 452px !important;
    height: auto !important; /* コンテンツに合わせて高さを調整 */
    padding-left: 96px !important; /* 左側96px */
    padding-right: 0 !important;
    padding-top: 80px !important; /* 上側のパディング80px */
    padding-bottom: 60px !important; /* 下側のパディング80px */
    align-items: center !important; /* 縦中央揃え */
    box-sizing: border-box !important;
  }
  
  .hero-text-panel {
    padding: 60px 48px !important;
    max-width: 750px !important;
    clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%) !important;
  }
  
  .hero-background-image {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important; /* 元のサイズをそのまま使用 */
    object-position: right center !important; /* 右側に画像を配置 */
    margin-left: auto !important; /* 右寄せ */
  }
  
  .hero-text-content {
    max-width: 750px !important;
    padding-top: 0 !important; /* 垂直中央揃えなので上端パディングなし */
    width: auto !important;
  }
  
  .hero-slogan {
    font-size: 28px !important; /* 元のサイズ */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  
  .hero-title {
    font-size: 56px !important; /* 元のサイズ */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    padding-top: 0 !important;
    color: #ffffff !important;
  }
  
  .hero-description {
    font-size: 16px !important;
    line-height: 1.9 !important;
    margin-top: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

}

@media (min-width: 1024px) {

  #hero-section.hero {
    height: 100vh !important;
    min-height: 600px !important;
  }

}

@media (max-width: 1024px) {

  #hero-section.hero .hero-content {
    max-width: 80rem !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #hero-section.hero .headline {
    font-size: 2.8rem !important;
  }

}

@media (max-width: 768px) {

  #hero-section.hero {
    align-items: flex-start !important;
    /* SPは100vh固定をやめて、コンテンツ高さに合わせる */
    height: auto !important;
    min-height: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 56px !important;
    /* SP: 画像が必ず全て見えるように中央配置 */
    background-position: center center !important;
    /* 青い上下帯を出さないため、画像を拡大して全面表示 */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }

  #hero-section.hero .hero-content {
    max-width: 80rem !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: normal !important;
  }

  #hero-section.hero .headline {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  #hero-section.hero .sub-headline {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  
  #hero-section.hero .description {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

}

@media (min-width: 768px) {

  main#main > section.bg-white.py-24.md\:py-32,
  main#main > section.bg-white[class*="py-24"][class*="md:py-32"],
  section.bg-white.py-24.md\:py-32 {
    padding-bottom: 0 !important;
  }

}

@media (min-width: 640px) {

  section.bg-white.py-24.md\:py-32[style*="padding-top: 90px"],
  section.bg-white.py-24.md\:py-32[style*="padding-top: 90px"][style*="padding-bottom: 80px"],
  section.bg-white[class*="py-24"][class*="md:py-32"][style*="padding-top: 90px"],
  section.bg-white[class*="py-24"][class*="md:py-32"][style*="padding-top: 90px"][style*="padding-bottom: 80px"] {
    padding-top: 90px !important;
    padding-bottom: 80px !important;
  }

}

@media (min-width: 768px) {

  .contact-options-grid.grid.md\:grid-cols-2 > div,
  .contact-options-grid > div.text-center,
  .contact-options-grid > div.contact-card,
  .contact-options-grid > div {
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    flex: 0 0 400px !important;
  }
  
  .contact-options-grid.grid {
    grid-template-columns: 400px 400px !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }

}

@media (max-width: 1023px) {

  .contact-form-box,
  .max-w-3xl.mx-auto.bg-white.rounded-lg.shadow-sm,
  div[style*="max-width: 60rem"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  
  .contact-info-box,
  .max-w-4xl.mx-auto.rounded-lg {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }

}

@media (min-width: 768px) {

  .process-connector-line {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

}

@media (min-width: 1024px) {

  .process-connector-line {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

}

@media (min-width: 768px) {

  .careers-right-pc {
    display: grid !important;
  }

}

@media (max-width: 1440px) {

  .single-post-container {
    padding: 0 120px;
  }

}

@media (max-width: 1024px) {

  .single-post-container {
    padding: 0 60px;
  }

}

@media (max-width: 768px) {

  .single-post-container {
    padding: 0 24px;
  }

}

@media (max-width: 768px) {

  .single-post-content {
    padding: 32px 0;
  }

}

@media (max-width: 768px) {

  .single-post-meta {
    margin-top: 32px;
    padding-top: 24px;
  }
  
  .single-post-navigation {
    margin-top: 32px;
    padding-top: 24px;
  }

}

@media (max-width: 768px) {

  .single-post-prose p {
    font-size: 14px;
    line-height: 1.75em;
  }
  
  .single-post-prose h1,
  .single-post-prose h2,
  .single-post-prose h3,
  .single-post-prose h4,
  .single-post-prose h5,
  .single-post-prose h6 {
    font-size: 18px;
  }

}

@media (min-width: 768px) {

  main#main > section.bg-white.py-24.md\:py-32 {
    padding-bottom: 0 !important;
    padding-top: 8rem !important;
  }

}

@media (min-width: 640px) {

  section.bg-white.py-16.md\:py-24[style*="padding-top: 60px"],
  section.bg-white[class*="py-16"][class*="md:py-24"][style*="padding-top: 60px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

}

@media (min-width: 640px) {

  section.bg-gray-100.py-16.md\:py-24 .container.mx-auto[style*="width: 45rem"],
  section.bg-gray-100.py-16.md\:py-24 .container.mx-auto,
  section.bg-gray-100[class*="py-16"][class*="md:py-24"] .container.mx-auto[style*="width: 45rem"] {
    width: 55rem !important;
  }

}

@media (min-width: 640px) {

  section.bg-gray-100.py-16.md\:py-24 .grid.md\:grid-cols-3.gap-8,
  section.bg-gray-100[class*="py-16"][class*="md:py-24"] .grid[class*="md:grid-cols-3"][class*="gap-8"] {
    width: 55rem !important;
    max-width: 55rem !important;
  }

}