body {
    background-color: #eeeeee;
}

/*ヘッダー*/
header {
    background-color: #0000ff; 
    padding: 20px;        
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    display: flex;
    width: 98%;         
    flex-wrap: wrap;
}
header img {
  max-width: 100%;  /* 親要素の幅を超えて大きくならない */
  height: auto;     /* 横幅に合わせて、縦横比を保ったまま縮小する */
}

/*ボタン*/
.header-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; 

}

.header-button button:hover {
    opacity: 0.8; 
}

/* 修理書 */
#repair.active{
    font-weight: bold;
    font-size: 40px; 
    color:  rgb(216, 98, 157);           
    background-color: white; 
}
#repair{
    font-size: 40px; 
    color: white;           
    background-color:  rgb(216, 98, 157); 
}
/*解説書*/
#kai.active{
    font-weight: bold;
    font-size: 40px; 
    color: rgb(87, 188, 219);       
    background-color: white; 
}
#kai{
    font-size: 40px; 
    color: white;          
    background-color: rgb(87, 188, 219); 
}
/*配線図集*/
#wire.active{
    font-weight: bold;
    font-size: 40px; 
    color: rgb(187, 190, 3);        
    background-color: white;  
}
#wire{
    font-size: 40px; 
    color: black;          
    background-color: rgb(251, 255, 0); 
}
/*機能別修理書*/
#fcrepair.active{
    font-weight: bold;
    font-size: 40px; 
    color: rgb(0, 204, 0);      
    background-color: white;  
}
#fcrepair{
    font-size: 40px; 
    color: white;    
    background-color: rgb(0, 204, 0);   
}
/*コネクタ集*/
#connect.active{
    font-weight: bold;
    font-size: 40px; 
    color: rgb(255, 187, 0);         
    background-color: white;  
}
#connect{
    font-size: 40px; 
    color: rgb(255, 255, 255);          
    background-color: rgb(255, 187, 0);    
}


.screens {
  position: relative;
}

.screen{
    width: 100%;         /* 横幅 100% */
    height: 500px;       /* 縦幅 500px */
    position: relative;  /* 親要素 */
}


.repair_screen,
.kai_screen,
.wire_screen,
.fcrepair_screen,
.connect_screen{
    position: absolute;
    opacity: 0;           
    pointer-events: none;  

}

.repair_screen.active{
    
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
}

.kai_screen.active{
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
}




.wire_screen.active{
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
}




.fcrepair_screen.active{
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
}

.connect_screen.active{
    position: absolute;           /* 子要素 */
    opacity: 1;                   /* 要素の透明度 */
    pointer-events: auto;         /* マウスイベントをオン */
    width: 100%;                  /* 横幅 100% */
    height: 100%;                 /* 縦幅 100% */
}



.side {
  background-color:#ced2ff;
  width:15%;
  height:710px;
  text-align:center;
  margin-top: 0.5%;
} 
.content {
  width: calc(100% - 15% - 1%);
  height:710px;
  text-align:left;
  margin-top: 0.5%;
  margin-left: 0.5%;
  

}
article {
    display:flex;
}


.repair-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.repair-button button:hover {
    opacity: 0.8; 
}

#r-first.active{
    font-weight: bold;
    font-size: 15px; 
    color: red;           
    background-color: white; 
}
#r-first{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: red;  
}

#r-general,#r-service,#r-trouble{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: rgb(101, 158, 48);  
}

#r-general.active{
    font-weight: bold;
    font-size: 15px; 
    color: rgb(101, 158, 48);           
    background-color: white; 
}

#r-service.active{
    font-weight: bold;
    font-size: 15px; 
    color: rgb(101, 158, 48);           
    background-color: white; 
}

#r-trouble.active{
    font-weight: bold;
    font-size: 15px; 
    color: rgb(101, 158, 48);           
    background-color: white; 
}


#r-engine,#r-sus,#r-drive,#r-brake,#r-mission,#r-steering,#r-AC,#r-airbag,#r-body,#r-control{
    font-weight: bold;
    font-size: 15px; 
    color:  white;         
    background-color: rgb(216, 98, 157);  
}

#r-engine.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}


#r-sus.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-drive.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-brake.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-mission.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-steering.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-AC.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-airbag.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-body.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

#r-control.active{
    font-size: 15px; 
    color: rgb(216, 98, 157);           
    background-color: white; 
}

.r-screen,
.k-screen,
.w-screen,
.fc-screen,
.c-screen {
    display: none;
}

.r-screen.active,
.k-screen.active,
.w-screen.active,
.fc-screen.active,
.c-screen.active {
    display: block;
}
.r-engine,.r-sus,.r-drive,.r-brake,.r-mission,.r-steering,.r-AC,.r-airbag,.r-body,.r-control{
    position: absolute;
    opacity: 0;           
    pointer-events: none;  

}

.general{
    font-size: 25px;
    font-weight: bold;
    padding: 10px 20px; 
    color: rgb(101, 158, 48);
}



.kai-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.kai-button button:hover {
    opacity: 0.8; 
}

#k-first.active{
    font-weight: bold;
    font-size: 15px; 
    color: red;           
    background-color: white; 
}
#k-first{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: red;  
}

#k-general,#k-engine,#k-sus,#k-drive,#k-brake,#k-mission,#k-steering,#k-AC,#k-airbag,#k-body,#k-control,#k-kan{
    font-weight: bold;
    font-size: 15px; 
    color:  white;         
    background-color: rgb(87, 188, 219);
}

#k-general.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);           
    background-color: white; 
}

#k-engine.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);           
    background-color: white; 
}


#k-sus.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-drive.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);         
    background-color: white; 
}

#k-brake.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-mission.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-steering.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-AC.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);           
    background-color: white; 
}

#k-airbag.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-body.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);         
    background-color: white; 
}

#k-control.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}

#k-kan.active{
    font-size: 15px; 
    color: rgb(87, 188, 219);          
    background-color: white; 
}


.k-engine,.k-sus,.k-drive,.k-brake,.k-mission,.k-steering,.k-AC,.k-airbag,.k-body,.k-control,.k-can{
    position: absolute;
    opacity: 0;           
    pointer-events: none;  

}


.fc-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.fc-button button:hover {
    opacity: 0.5; 
}

#fc-first.active{
    font-weight: bold;
    font-size: 15px; 
    color: red;           
    background-color: white; 
}
#fc-first{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: red;  
}

#fc-1nz,#fc-u340e,#fc-u340f{
    font-weight: bold;
    font-size: 15px; 
    color:  black;         
    background-color: rgb(0, 204, 0); 
}

#fc-1nz.active{
    font-size: 15px; 
    color: rgb(0, 204, 0);         
    background-color: white; 
}

#fc-u340e.active{
    font-size: 15px; 
    color: rgb(0, 204, 0);           
    background-color: white; 
}

#fc-u340f.active{
    font-size: 15px; 
    color: rgb(0, 204, 0);           
    background-color: white; 
}

.wire-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.wire-button button:hover {
    opacity: 0.8; 
}

#w-first.active{
    font-weight: bold;
    font-size: 15px; 
    color: red;           
    background-color: white; 
}
#w-first{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: red;  
}

#w-connect,#w-engine,#w-brake,#w-mission,#w-AC,#w-airbag,#w-body,#w-control,#w-gisou{
    font-weight: bold;
    font-size: 15px; 
    color:  black;         
    background-color: rgb(251, 255, 0); 
}

#w-connect.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-engine.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-brake.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-mission.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-AC.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-airbag.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-body.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-control.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

#w-gisou.active{
    font-size: 15px; 
    color: rgb(187, 190, 3);           
    background-color: white; 
}

.connect-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.connect-button button:hover {
    opacity: 0.8; 
}

#c-first.active{
    font-weight: bold;
    font-size: 15px; 
    color: red;           
    background-color: white; 
}
#c-first{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: red;  
}
#c-a.active{
    font-weight: bold;
    font-size: 15px; 
    color: rgb(255, 187, 0);      
    background-color: white; 
}
#c-a{
    font-weight: bold;
    font-size: 15px; 
    color: white;           
    background-color: rgb(255, 187, 0);
}

/* ==========================================
   ここからスマホ・タブレット用の設定（画面幅768px以下）
   ========================================== */
@media (max-width: 768px) {

    /* 1. ヘッダーの調整 */
    header {
        height: auto;         /* 高さを自動にして中身が溢れないようにする */
        padding: 10px;
        flex-direction: column;  /* スマホでは縦並びにする（必要に応じて） */
        align-items: center;
    }

    /* ヘッダー内のメインボタン（修理書・解説書など） */
    #repair, #repair.active,
    #kai, #kai.active,
    #wire, #wire.active,
    #fcrepair, #fcrepair.active,
    #connect, #connect.active {
        font-size: 20px;         /* 40pxはスマホでは大きすぎるので20pxに縮小 */
        padding: 5px 10px;
    }

    .header-button {
        flex-wrap: wrap;         /* ボタンが溢れたら自動で折り返す */
        justify-content: center;
        gap: 8px;
    }

    /* 2. メインレイアウトを横並びから「縦並び」に変える */
    article {
        flex-direction: column;  /* サイドバーとコンテンツを縦に並べる */
    }

    /* サイドバー（メニューボタン群） */
    .side {
        width: 100%;             /* 横幅いっぱいに広げる */
        height: auto;            /* 高さは中身に合わせる */
        min-height: auto;
        padding: 10px 0;
    }

    /* サイドバー内のボタンの並び（横並びに変えると見やすい） */
    .repair-button, .kai-button, .fc-button, .wire-button, .connect-button {
        flex-direction: row;     /* 縦並びから横並びに変更 */
        flex-wrap: wrap;         /* 入りきらないボタンは下へ折り返し */
        justify-content: center;
        gap: 5px;
    }

    /* 3. メインコンテンツエリア */
    .content {
        width: 100%;             /* 横幅いっぱいに広げる */
        margin-left: 0;          /* 左の余白をリセット */
        padding: 10px;
        height: auto;            /* 710pxの固定を解除 */
        min-height: auto;
    }
    
    /* 切り替わる画面全体の高さもスマホに合わせて自動にする */
    .screen {
        height: auto;
    }
}