@charset "UTF-8";

/**
 * =================================================================
 * page-electrical-light.css
 * 照明器具の確認と接続専用スタイルシート
 * 1. 共通カラー・レイアウト（ミユキブルー）
 * 2. 設置状況の確認（3枚並びカード）
 * 3. 取り付け方法（3枚並びステップ）
 * 4. 責任区分詳細（金・青の塗り分け）
 * 6. 事前準備（チェックリストとキャラ）
 * 8. 退去時の扱い（手順リスト）
 * 99. 印刷・スマホ対応（メディアクエリ）
 * =================================================================
 */

/* -----------------------------------------------------------------
   1. 共通カラー・レイアウト定義
----------------------------------------------------------------- */
:root {
    --miyuki-blue: #0070b8;
    --miyuki-gold: #d4a017; /* 見本画像の金色 */
    --bg-light-gray: #f8f9fa;
    --bg-light-blue: #f0f7ff;
    --white: #ffffff;
    --border: #e9ecef;
}

body { margin: 0; font-family: "Noto Sans JP", sans-serif; line-height: 1.8; color: #333; background: #fff; }

/* ヒーローエリア */
.hero-header-full {
    height: 100vh; width: 100%; position: relative;
    background: url('../img/light_top.jpg') no-repeat center center / cover;
    display: flex; align-items: center; justify-content: flex-start;
}
.hero-header-full::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0, 112, 184, 0.4), rgba(0, 0, 0, 0.6));
}
.hero-inner-left { position: relative; z-index: 10; padding-left: 5%; color: #fff; }
.hero-inner-left h1 { font-size: 5rem; margin: 0; font-weight: 700; letter-spacing: 0.1em; }

/* メインコンテンツ幅固定 */
.main-content-fixed { max-width: 1000px; margin: 0 auto; padding: 100px 20px; }
.section-container { margin-bottom: 80px; }

/* ミユキブルーの縦棒見出し */
.ideal-bar-heading {
    font-size: 1.6rem; color: var(--miyuki-blue);
    border-left: 7.5px solid var(--miyuki-blue);
    padding-left: 18px; margin: 40px 0 35px;
}

/* -----------------------------------------------------------------
   2. 設置状況の確認（配線器具の3枚並びカード）
----------------------------------------------------------------- */
.method-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.fixture-card { background: var(--bg-light-gray); border: 1px solid var(--border); border-radius: 5px; padding: 30px 20px; text-align: center; }

/* 器具画像の枠（背景グレーを再現） */
.fixture-visual { 
    height: 140px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 15px; 
    background: #e6e7e8; /* 画像の見本色 */
}
.fixture-visual img { max-width: 90%; height: auto; }
.fixture-card h4 { font-size: 0.95rem; color: #333; margin: 0; font-weight: bold; }

/* 設置できない場合の警告（金色帯） */
.gold-banner-head {
    background-color: var(--miyuki-gold);
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 30px 0 15px;
}
.attn-card-bg { background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 0; text-align: left; }

/* -----------------------------------------------------------------
   3. 取り付け手順（3枚並びステップ）
----------------------------------------------------------------- */
.step-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.step-item { background: #fff; border: 1px solid #eee; padding: 0; text-align: center; }
.step-item img { width: 100%; height: auto; display: block; }
.step-item p { font-size: 0.9rem; text-align: left; padding: 15px; margin: 0; line-height: 1.6; min-height: 4.5em; }

/* -----------------------------------------------------------------
   4. 責任区分セクション（image_aa34e0.png 再現スタイル）
----------------------------------------------------------------- */

.res-modern-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid #eee;
}

/* ヘッダー：ミユキブルーの幅一杯の帯 */
.res-main-header {
    background-color: var(--miyuki-blue);
    color: #fff;
    padding: 25px;
    text-align: center;
}
.res-main-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* グリッドレイアウト */
.res-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding: 35px;
    background-color: #fcfcfc;
}

/* 個別カード */
.res-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    height: auto;
}

/* カード上部のカラーライン */
.res-card-head {
    padding: 20px 25px;
    background: #fff;
    position: relative;
}
.res-card-head.blue-line { border-top: 5px solid var(--miyuki-blue); }
.res-card-head.gold-line { border-top: 5px solid var(--miyuki-gold); }
.res-card-head.gray-line { border-top: 5px solid #888; }

.badge-tag {
    display: inline-block;
    background: #f0f0f0;
    color: #888;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
}

.res-card-head h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

/* リスト形式（画像通りの左右配置） */
.res-list {
    list-style: none;
    padding: 0 25px 25px;
    margin: 0;
}
.res-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px dotted #eee;
    font-size: 0.95rem;
    color: #555;
}
.res-list li .label {
    color: #999;
}

/* 独自サービス枠：画像下部の薄いオレンジ枠 */
.miyuki-service-card {
    margin-top: 20px;
    background: #fff9f0;
    border: 1px solid #ffedcc;
    padding: 20px 25px;
    border-radius: 6px;
}
.miyuki-service-card h5 {
    color: #e74c3c;
    font-weight: bold;
    margin: 0 0 8px;
    font-size: 1rem;
}
.miyuki-service-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
}

/* 余白管理 */
.m-b-20 { margin-bottom: 20px; }

/* スマホ対応 */
@media (max-width: 850px) {
    .res-grid-layout {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}


/* -----------------------------------------------------------------
   6. 事前準備（チェックリストとキャラ）
----------------------------------------------------------------- */
.prep-main-box { display: flex; align-items: center; background: var(--bg-light-gray); border-radius: 20px; padding: 50px; gap: 40px; }
.prep-list-container { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.prep-item { background: #fff; padding: 18px 25px; border-radius: 10px; display: flex; align-items: center; border: 1px solid #eee; width: 100%; }
.prep-item i { color: var(--miyuki-blue); margin-right: 15px; }
.yuki-img { width: 160px; height: auto; }

/* -----------------------------------------------------------------
   8. 退去時の扱い（手順リスト）
----------------------------------------------------------------- */
.payment-main-box { background-color: var(--bg-light-gray); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 15px; }
.payment-item { background-color: var(--white); padding: 25px 30px; border-radius: 12px; display: flex; align-items: flex-start; border: 1px solid #eee; }
.payment-item .num { color: var(--miyuki-blue); font-weight: 900; font-size: 1.2rem; margin-right: 20px; }

.yuki-finish-area { text-align: center; margin-top: 20px; }
.yuki-mini-full { width: 120px !important; height: auto; }

/* -----------------------------------------------------------------
   99. 印刷・スマホ対応
----------------------------------------------------------------- */
.t-r { text-align: right; }
.mtop10 { margin-top: 10px; }
.small-text { font-size: 0.8rem; color: #888; }

@media (max-width: 850px) {
    .method-grid-3, .step-guide-grid, .responsibility-detail-grid, .prep-main-box, .payment-main-box {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .hero-inner-left h1 { font-size: 3rem; }
}

/* -----------------------------------------------------------------
   追加修正：システム管理課 メンテナンス用
   ----------------------------------------------------------------- */

/* 余白共通クラスの定義（HTML内の mtop30 に対応） */
.mtop30 { margin-top: 30px !important; }

/* ステップバッジの装飾強化 */
.step-item {
    position: relative;
    overflow: hidden;
}
.step-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--miyuki-blue);
    color: #fff;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 5;
}