/* ========================================
   CSS変数（Custom Properties）定義
   ======================================== */
:root {
    /* カラー */
    --color-primary: #3FBEF1;
    --color-primary-dark: #0B88C5;
    --color-primary-light: #5DD3FF;
    --color-primary-hover: #2CA1D5;
    --color-primary-hover-dark: #0A7BB0;
    --color-secondary: #FF6B35;
    --color-text-primary: #404040;
    --color-text-secondary: #666666;
    --color-text-tertiary: #808282;
    --color-text-light: #B3B3B3;
    --color-text-white: #FFFFFF;
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F7F9;
    --color-bg-tertiary: #E8ECF0;
    --color-border: #DDDDDD;
    --color-border-light: #CCCCCC;
    
    /* スペーシング */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --spacing-5xl: 8rem;
    
    /* フォントサイズ */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* フォントウェイト */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 行間 */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    --line-height-extra-loose: 2.0;
    
    /* トランジション */
    --transition-fast: 200ms;
    --transition-normal: 400ms;
    --transition-slow: 600ms;
    --transition-ease: ease-out;
    
    /* ブレークポイント */
    --breakpoint-md: 768px; /* 後方互換性のため残す */
    --breakpoint-lg: 900px;
    --breakpoint-xl: 1024px;
    --breakpoint-2xl: 1392px;
    
    /* レスポンシブ改善用ブレークポイント */
    --breakpoint-mobile-max: 767px; /* モバイル上限 */
    --breakpoint-tablet-min: 768px; /* タブレット下限 */
    --breakpoint-tablet-max: 1279px; /* タブレット上限 */
    --breakpoint-desktop-sm-min: 1280px; /* 小型デスクトップ下限 */
    --breakpoint-desktop-sm-max: 1919px; /* 小型デスクトップ上限 */
    --breakpoint-desktop-lg-min: 1920px; /* 大型デスクトップ下限 */
    
    /* ボーダー半径 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* シャドウ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* Z-index */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 5;
    --z-fixed: 10;
    --z-modal: 1000;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

/* アニメーション用マーカー要素（非表示） */
/* 詳細度を上げて!importantを削除 - span要素とaria-hidden属性を組み合わせて確実に非表示にする */
span[data-s-a36af116-824a-494e-806e-96f271813bd4][aria-hidden="true"],
span[data-s-84c89377-ade0-4445-8631-d89b3d7436cf][aria-hidden="true"] {
    display: none;
    visibility: hidden;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ========================================
   アニメーション
   ======================================== */
.appear {
    opacity: 1;
    animation: fadeIn var(--transition-slow) var(--transition-ease);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   トランジション
   ======================================== */
.duration-400 {
    transition-duration: var(--transition-normal);
}

.duration-600 {
    transition-duration: var(--transition-slow);
}

/* ========================================
   スペーシングユーティリティ
   ======================================== */
.pt-25 {
    padding-top: 100px;
}

.pb-15 {
    padding-bottom: 60px;
}

.mt-30 {
    margin-top: 120px;
}

/* ========================================
   アクセシビリティ
   ======================================== */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================
   ヘッダー・ナビゲーション
   ======================================== */

/* ナビゲーション - タブレット用スタイル */
@media (min-width: 768px) and (max-width: 1279px) {
    /* ナビゲーションリンクのフォントサイズ */
    .nav ul li a {
        font-size: 0.875rem; /* 14px */
        padding-left: 0.5rem; /* 8px */
        padding-right: 0.5rem; /* 8px */
    }
    
    /* ナビゲーションのギャップ */
    .nav ul {
        gap: 0.5rem; /* 8px */
    }
    
    /* アクションボタンのフォントサイズ */
    nav[aria-label="アクションボタン"] ul li a span {
        font-size: 0.875rem; /* 14px */
    }
    
    /* アクションボタンのパディング */
    nav[aria-label="アクションボタン"] ul li a {
        padding-left: 0.75rem; /* 12px */
        padding-right: 0.75rem; /* 12px */
    }
}

/* ナビゲーション - 小型デスクトップ用スタイル */
@media (min-width: 1280px) and (max-width: 1919px) {
    /* ナビゲーションリンクのフォントサイズ */
    .nav ul li a {
        font-size: 1rem; /* 16px */
        padding-left: 0.75rem; /* 12px */
        padding-right: 0.75rem; /* 12px */
    }
    
    /* ナビゲーションのギャップ */
    .nav ul {
        gap: 0.75rem; /* 12px */
    }
    
    /* アクションボタンのフォントサイズ */
    nav[aria-label="アクションボタン"] ul li a span {
        font-size: 1rem; /* 16px */
    }
    
    /* アクションボタンのパディング */
    nav[aria-label="アクションボタン"] ul li a {
        padding-left: 1rem; /* 16px */
        padding-right: 1rem; /* 16px */
    }
}

/* ナビゲーション - 大型デスクトップ用スタイル */
@media (min-width: 1920px) {
    /* ナビゲーションリンクのフォントサイズ */
    .nav ul li a {
        font-size: 1.125rem; /* 18px */
        padding-left: 1rem; /* 16px */
        padding-right: 1rem; /* 16px */
    }
    
    /* ナビゲーションのギャップ */
    .nav ul {
        gap: 1rem; /* 16px */
    }
    
    /* アクションボタンのフォントサイズ */
    nav[aria-label="アクションボタン"] ul li a span {
        font-size: 1.125rem; /* 18px */
    }
    
    /* アクションボタンのパディング */
    nav[aria-label="アクションボタン"] ul li a {
        padding-left: 1.25rem; /* 20px */
        padding-right: 1.25rem; /* 20px */
    }
}

/* ヒーローセクション - モバイル用スタイル */
@media (max-width: 767px) {
    /* モバイル用イラストの背景グラデーションを削除 */
    section.hero #lottie-figure2 .hero-illustration-bg::before {
        display: none;
    }

    /* モバイル用ロッティーアニメーションの拡大 */
    section.hero #lottie-figure2 .hero-illustration-bg dotlottie-wc svg,
    section.hero #lottie-figure2 .hero-illustration-bg dotlottie-wc canvas {
        width: 100%;
        height: 500px;
        transform: scale(1.0); /* HTML側のTailwindクラスでサイズ制御するため拡大をリセット */
        transform-origin: center center;
    }
}

/* タブレット用スタイル */
@media (min-width: 768px) and (max-width: 1279px) {
    /* ヒーローセクション - タブレット用Lottieアニメーション */
    section.hero #lottie-figure2 .hero-illustration-bg dotlottie-wc svg,
    section.hero #lottie-figure2 .hero-illustration-bg dotlottie-wc canvas {
        width: 100%;
        height: 600px;
        transform: scale(1.1);
        transform-origin: center center;
    }
    
    /* PC用Lottieアニメーション（タブレット用の高さ調整） */
    section.hero #lottie-figure1 dotlottie-wc {
        height: 600px !important;
    }
    
    /* 提供サービスセクションのギャップ調整（Tailwindのgap-[4rem]を上書き） */
    #about > div > div:last-child {
        gap: 2rem !important; /* 32px - タブレットサイズではgap-[4rem]（64px）が大きすぎる場合がある */
    }
    
    /* 提供サービスセクションのカード幅調整 */
    #about article {
        width: calc(50% - 1rem) !important; /* タブレットではgap分を考慮して調整 */
    }
}

/* 小型デスクトップ用スタイル */
@media (min-width: 1280px) and (max-width: 1919px) {
    /* ヒーローセクション - 小型デスクトップ用Lottieアニメーション */
    section.hero #lottie-figure1 dotlottie-wc {
        height: 700px;
    }
}

/* 大型デスクトップ用スタイル */
@media (min-width: 1920px) {
    /* ヒーローセクション - 大型デスクトップ用Lottieアニメーション */
    section.hero #lottie-figure1 dotlottie-wc {
        height: 800px;
    }
    
    /* ヒーローセクション - 大型デスクトップ用テキスト */
    section.hero .hero-text-pc h1 {
        font-size: 3.5rem; /* 56px */
    }
    
    section.hero .hero-text-pc {
        gap: 2rem; /* 32px */
    }
}

/* ヒーローセクション - タブレット用テキスト調整 */
@media (min-width: 768px) and (max-width: 1279px) {
    section.hero .hero-text-pc h1 {
        font-size: 2.5rem; /* 40px */
    }
    
    section.hero .hero-text-pc p {
        font-size: 0.875rem; /* 14px */
    }
    
    /* ヒーローセクションのギャップ調整（Tailwindのgap-20を上書き） */
    section.hero > div > div {
        gap: 2rem !important; /* 32px - タブレットサイズではgap-20（80px）が大きすぎる */
    }
    
    /* ヒーローセクションの幅調整（タブレットサイズでコンテンツが詰まらないように） */
    section.hero .hero-text-pc {
        flex: 0 0 auto;
        width: calc(40% - 1rem) !important; /* タブレットでは40%に調整 */
        min-width: 0;
    }
    
    section.hero #lottie-figure1 {
        flex: 0 0 auto;
        width: calc(60% - 1rem) !important; /* タブレットでは60%に調整 */
        min-width: 0;
    }
}

/* ヒーローセクション - 小型デスクトップ用テキスト調整 */
@media (min-width: 1280px) and (max-width: 1919px) {
    section.hero .hero-text-pc h1 {
        font-size: 3rem; /* 48px */
    }
    
    section.hero .hero-text-pc p {
        font-size: 0.9375rem; /* 15px */
    }
    
    section.hero > div > div {
        gap: 5rem; /* 80px */
    }
}

/* ========================================
   その他コンポーネント - レスポンシブ調整
   ======================================== */

/* ニュースセクション - タブレット用調整 */
@media (min-width: 768px) and (max-width: 1279px) {
    #news h2 {
        font-size: 1.75rem; /* 28px */
    }
    
    #news .news-item {
        padding-top: 1.5rem; /* 24px */
        padding-bottom: 1.5rem; /* 24px */
    }
    
    /* ニュースセクションのギャップ調整（Tailwindのgap-[10rem]を上書き） */
    #news > div > div {
        gap: 3rem !important; /* 48px - タブレットサイズではgap-[10rem]（160px）が大きすぎる */
    }
    
    /* ニュースセクションの幅調整 */
    #news > div > div > div:first-child {
        width: 35% !important; /* タブレットでは35%に調整 */
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }
    
    #news > div > div > div:last-child {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ニュースセクション - 小型デスクトップ用調整 */
@media (min-width: 1280px) and (max-width: 1919px) {
    #news h2 {
        font-size: 1.875rem; /* 30px */
    }
}

/* ニュースセクション - 大型デスクトップ用調整 */
@media (min-width: 1920px) {
    #news h2 {
        font-size: 2rem; /* 32px */
    }
}

/* FAQセクション - タブレット用調整 */
@media (min-width: 768px) and (max-width: 1279px) {
    #faq h2 {
        font-size: 1.75rem; /* 28px */
    }
    
    .faq-details summary {
        font-size: 1rem; /* 16px */
        padding: 0.75rem 1rem; /* 12px 16px */
    }
    
    /* FAQセクションのギャップ調整（Tailwindのgap-[10rem]を上書き） */
    #faq > div > div {
        gap: 3rem !important; /* 48px - タブレットサイズではgap-[10rem]（160px）が大きすぎる */
    }
    
    /* FAQセクションの幅調整 */
    #faq > div > div > div:first-child {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    
    #faq > div > div > div:last-child {
        width: 35% !important; /* タブレットでは35%に調整 */
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }
}

/* FAQセクション - 小型デスクトップ用調整 */
@media (min-width: 1280px) and (max-width: 1919px) {
    #faq h2 {
        font-size: 1.875rem; /* 30px */
    }
    
    .faq-details summary {
        font-size: 1.125rem; /* 18px */
        padding: 1rem 1.5rem; /* 16px 24px */
    }
}

/* FAQセクション - 大型デスクトップ用調整 */
@media (min-width: 1920px) {
    #faq h2 {
        font-size: 2rem; /* 32px */
    }
    
    .faq-details summary {
        font-size: 1.25rem; /* 20px */
        padding: 1rem 1.5rem; /* 16px 24px */
    }
}

/* フッター - 760-767px範囲の調整（ブレークポイント間のギャップ対応） */
@media (min-width: 760px) and (max-width: 767px) {
    /* フッター上部セクション（資料請求とお問い合わせ）の内部divの幅調整 */
    /* max-w-[1392px] mx-autoが中央配置して余白を生む問題を解決 */
    footer > section:first-child > div {
        width: 100% !important; /* 画面幅いっぱいに */
        max-width: 100% !important; /* max-w-[1392px]を上書き */
        margin-left: 0 !important; /* mx-autoを無効化 */
        margin-right: 0 !important;
        padding-left: 1.5rem !important; /* 24px - タブレットではpx-10（40px）が大きすぎる */
        padding-right: 1.5rem !important; /* 24px */
    }
}

/* フッター - タブレット用調整 */
@media (min-width: 768px) and (max-width: 1279px) {
    footer h2 {
        font-size: 1.5rem; /* 24px */
    }
    
    footer p {
        font-size: 0.875rem; /* 14px */
    }
    
    /* フッター上部セクション（資料請求とお問い合わせ）の内部divの幅とパディング調整 */
    /* 760-1059px範囲でmax-w-[1392px]が画面幅より小さく、中央配置される問題を解決 */
    footer > section:first-child > div {
        width: 100% !important; /* 画面幅いっぱいに */
        max-width: 100% !important; /* max-w-[1392px]を上書き */
        margin-left: 0 !important; /* mx-autoを無効化 */
        margin-right: 0 !important;
        padding-left: 1.5rem !important; /* 24px - タブレットではpx-10（40px）が大きすぎる */
        padding-right: 1.5rem !important; /* 24px */
    }
    
    /* フッター上部セクションのギャップ調整 */
    footer > section:first-child > div > div {
        gap: 2rem !important; /* 32px - タブレットサイズではgap-12（48px）が大きすぎる */
    }
    
    /* フッター上部セクションの記事幅調整（gap-2remと区切り線1pxを正確に考慮） */
    footer > section:first-child article {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(50% - 1rem - 0.5px) !important; /* gap-2rem（32px）の半分と区切り線1pxの半分を考慮 */
        min-width: 0 !important;
    }
    
    /* フッター上部セクションの区切り線 */
    footer > section:first-child > div > div > div[aria-hidden="true"] {
        width: 1px !important;
        flex-shrink: 0 !important;
    }
}

/* フッター - 小型デスクトップ用調整 */
@media (min-width: 1280px) and (max-width: 1919px) {
    footer h2 {
        font-size: 1.75rem; /* 28px */
    }
    
    footer p {
        font-size: 0.9375rem; /* 15px */
    }
}

/* フッター - 大型デスクトップ用調整 */
@media (min-width: 1920px) {
    footer h2 {
        font-size: 2rem; /* 32px */
    }
    
    footer p {
        font-size: 1rem; /* 16px */
    }
}

/* ========================================
   モバイルドロワーメニュー - Tailwind競合を避けるための専用スタイル
   ======================================== */

/* ========================================
   ニュースセクション - 理想レイアウト
   ======================================== */

/* ========================================
   サービスセクション - CSS調整
   ======================================== */

/* サービスセクション - Lottieアニメーションサイズ調整 */
/* HTML側のTailwindクラス (w-40 h-40 md:w-56 md:h-56) で制御するため、CSSの固定サイズ指定をコメントアウト */
/*
モバイル用（デフォルト）
.service-lottie-container.service-lottie-container {
    width: 10rem !important;
    height: 10rem !important;
}

タブレット用
@media (min-width: 768px) and (max-width: 1279px) {
    .service-lottie-container.service-lottie-container {
        width: 12rem !important;
        height: 12rem !important;
    }
}

小型デスクトップ用（デフォルトのw-56 h-56を維持）
@media (min-width: 1280px) and (max-width: 1919px) {
    .service-lottie-container.service-lottie-container {
        width: 14rem !important;
        height: 14rem !important;
    }
}

大型デスクトップ用
@media (min-width: 1920px) {
    .service-lottie-container.service-lottie-container {
        width: 16rem !important;
        height: 16rem !important;
    }
}
*/

/* ========================================
   提供サービスセクション - カード2のグラデーション
   ======================================== */

/* 提供サービスセクション - Lottieアニメーションサイズ調整 */
/* HTML側のTailwindクラス (w-[200px] h-[200px] md:w-[280px] md:h-[280px]) で制御するため、CSSの固定サイズ指定をコメントアウト */
/*
モバイル用
.service-card-lottie-container.service-card-lottie-container {
    width: 12rem !important;
    height: 12rem !important;
}

タブレット用
@media (min-width: 768px) and (max-width: 1279px) {
    .service-card-lottie-container.service-card-lottie-container {
        width: 14rem !important;
        height: 14rem !important;
    }
}

小型デスクトップ用（デフォルトのw-[280px]を維持）
@media (min-width: 1280px) and (max-width: 1919px) {
    .service-card-lottie-container.service-card-lottie-container {
        width: 17.5rem !important;
        height: 17.5rem !important;
    }
}

大型デスクトップ用
@media (min-width: 1920px) {
    .service-card-lottie-container.service-card-lottie-container {
        width: 20rem !important;
        height: 20rem !important;
    }
}
*/

/* カード2のホバー時のグラデーション背景 */
.service-card-business {
    position: relative;
    overflow: hidden;
}

.service-card-business::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom right, #3FBEF1, #2CA1D5);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    z-index: 0;
    border-radius: 0.75rem; /* rounded-xl */
}

.service-card-business:hover::before {
    opacity: 1;
}

.service-card-business > * {
    position: relative;
    z-index: 1;
}

/* カード1のホバー時のオレンジ背景も同様にトランジション - !important削減: HTML側でtransition-colors duration-400クラスを使用済み */
/* スタイルはHTML側で対応済みのため、CSSルールを削除 */

/* ========================================
   FAQセクション - スタイル
   ======================================== */

/* FAQアイテムのスタイル */
.faq-item {
    margin-bottom: 1.5rem;
}

/* details要素のスタイル */
.faq-details {
    border-radius: 0.5rem;
    overflow: hidden;
}

.faq-details summary {
    list-style: none;
}

.faq-details summary::-webkit-details-marker {
    display: none;
}

/* detailsが開いた時のアイコン回転 */
.faq-details[open] summary i.fa-chevron-down {
    transform: rotate(180deg);
}

/* ========================================
   フッター - 会社情報address要素
   ======================================== */

/* ========================================
   会社概要セクション - スマホ版テーブルスタイル
   ======================================== */
@media (max-width: 767px) {
    /* 会社概要セクション内のテーブルを改行テキスト風に表示 */
    /* section.bg-white > div.max-w-\[1200px\] > div.bg-white.rounded-xl > table の構造を想定 */
    section.bg-white .bg-white.rounded-xl table {
        display: block;
        width: 100%;
    }
    
    section.bg-white .bg-white.rounded-xl tbody {
        display: block;
        width: 100%;
    }
    
    section.bg-white .bg-white.rounded-xl tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid #E5E7EB;
        padding: 1rem 0;
    }
    
    section.bg-white .bg-white.rounded-xl tr:last-child {
        border-bottom: none;
    }
    
    section.bg-white .bg-white.rounded-xl th {
        display: block;
        width: 100%;
        background-color: transparent !important;
        padding: 0 1.5rem 0.5rem 1.5rem;
        font-weight: 700;
        color: #404040;
        text-align: left;
    }
    
    section.bg-white .bg-white.rounded-xl td {
        display: block;
        width: 100%;
        padding: 0 1.5rem;
        color: #666666;
    }
    
    /* 地図セクションの特別なスタイル */
    section.bg-white .bg-white.rounded-xl td:has(#map) {
        padding-top: 0.5rem;
    }
}

/* ========================================
   沿革セクション - スマホ版テーブルスタイル
   ======================================== */
@media (max-width: 767px) {
    /* 沿革セクション内のテーブルを改行テキスト風に表示 */
    /* section[class*="bg-[#F5F7F9]"] > div.max-w-\[1200px\] > div.bg-white.rounded-xl > table の構造を想定 */
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl table {
        display: block;
        width: 100%;
    }
    
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl tbody {
        display: block;
        width: 100%;
    }
    
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid #E5E7EB;
        padding: 1rem 0;
    }
    
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl tr:last-child {
        border-bottom: none;
    }
    
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl th {
        display: block;
        width: 100%;
        background-color: transparent !important;
        padding: 0 1.5rem 0.5rem 1.5rem;
        font-weight: 700;
        color: #404040;
        text-align: left;
    }
    
    section[class*="bg-[#F5F7F9]"] .bg-white.rounded-xl td {
        display: block;
        width: 100%;
        padding: 0 1.5rem;
        color: #666666;
    }
}

/* ========================================
   資料請求フォーム - 進捗バー
   ======================================== */
.form-progress {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.form-progress li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
}

.form-progress li::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: calc(50% + 1rem);
    width: calc(100% - 2rem);
    height: 2px;
    background: #E5E7EB;
    z-index: 0;
}

.form-progress li:last-child::after {
    display: none;
}

.form-progress li.current .enumerate,
.form-progress li.completed .enumerate {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.form-progress li.forward .enumerate,
.form-progress li.backward .enumerate {
    background: #E5E7EB;
    color: var(--color-text-secondary);
}

.form-progress .enumerate {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.form-progress .content {
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--color-text-secondary);
}

.form-progress li.current .content,
.form-progress li.completed .content {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* 確認表示スタイル */
.confirm-display {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid #E5E7EB;
}

.confirm-display:last-child {
    border-bottom: none;
}

.confirm-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.confirm-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* ========================================
   お問い合わせフォーム - スタイル
   ======================================== */

/* 動的セクションのアニメーション */
.contact-dynamic-section {
    animation: fadeIn var(--transition-normal) var(--transition-ease);
}

/* フォーム入力欄のスタイル（既存のTailwindクラスと併用） */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea,
#contactForm select {
    font-size: 16px; /* iOSの自動ズームを防ぐ */
}

@media (max-width: 767px) {
    #contactForm input[type="text"],
    #contactForm input[type="email"],
    #contactForm input[type="tel"],
    #contactForm textarea,
    #contactForm select {
        font-size: 16px; /* スマホでも16px以上を維持 */
        padding: 14px; /* タップしやすいサイズ */
    }
    
    #contactForm button[type="submit"],
    #contactForm button[type="reset"] {
        min-height: 48px; /* 最小タップサイズ */
    }
}

/* ラジオボタンとチェックボックスのスタイル */
#contactForm input[type="radio"],
#contactForm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#contactForm label {
    cursor: pointer;
}

/* エラーメッセージのスタイル */
#contactForm .text-red-500 {
    color: #d32f2f;
    font-size: var(--font-size-sm);
    margin-top: 4px;
    display: block;
}

#contactForm input.border-red-500,
#contactForm textarea.border-red-500,
#contactForm select.border-red-500 {
    border-color: #d32f2f;
    background-color: #ffebee;
}

/* フォーカス時のスタイル */
#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(63, 190, 241, 0.3);
}

/* 必須マーカーのスタイル */
#contactForm .text-\[#FF6B35\] {
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold);
}

/* 任意マーカーのスタイル */
#contactForm .text-\[#666666\] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

/* 文字数カウンター（将来の拡張用） */
.contact-char-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: right;
    margin-top: 4px;
}

/* メールアドレスをCSSのcontentで表示（スパム対策） */
.contact-email-address::after {
    content: "info@gs-fiber.com";
}