@charset "euc-jp";
@import url("tekigou-common.css");
#boat-0002 { max-width: 780px; margin: 0 auto; font-size: 16px;}

#maker-tab { display: block; table-layout: auto;}
#boat-0002 .dis-tbl_tab { width: 100%;}
#boat-0002 label {
    display:table-cell; position: relative; padding:8px 0 5px; 
    border-radius: 0 30px 0 0;background:#e0e0e0;
    color: #333; font-weight: 600; text-align: center; line-height:1.0em; cursor: pointer;}

#boat-0002 label:hover { color: #fff;}

#boat-0002 label[for="drive-tab01"]:hover { background:#00e6d8;}
#boat-0002 label[for="drive-tab02"]:hover { background:#ddd300;}
#boat-0002 label[for="drive-tab03"]:hover { background:#0078db;}
#boat-0002 label[for="drive-tab04"]:hover { background:#cc0000;}

@media screen and (max-width:599px){
    #boat-0002 label { font-size: 14px; }
}

@media screen and (max-width:499px){
    #boat-0002 .dis-tbl_tab { display: block; font-size: 0;}
    #boat-0002 label {
        display: inline-block;  
        box-sizing: border-box; width: 32.33%; margin: 0 1% 10px 0; padding:8px 5px; 
        border: solid 1px #888; border-radius: 4px; background: #fff;
        color: #333; line-height:1.0em;}
}

/*選択したタブの背景色、文字色*/
#drive-tab01:checked ~ #maker-tab label[for="drive-tab01"] { border: none; background:#00e6d8; color: #fff;}
#drive-tab02:checked ~ #maker-tab label[for="drive-tab02"] { border: none; background:#ddd300; color: #fff;}
#drive-tab03:checked ~ #maker-tab label[for="drive-tab03"] { border: none; background:#0078db; color: #fff;}
#drive-tab04:checked ~ #maker-tab label[for="drive-tab04"] { border: none; background:#cc0000; color: #fff;}
 
/* タブ切替で表示するエリア */
#volvo,
#mercruiser,
#yanmar {
    overflow: hidden;
    max-height: 0; margin: 0 auto; 
    opacity: 0;}


#volvo { border: solid 0px #ddd300;}
#mercruiser { border: solid 0px #00e6d8;}
#yanmar { border: solid 0px #cc0000;}

#drive-tab01:checked ~ #mercruiser,
#drive-tab02:checked ~ #volvo,
#drive-tab03:checked ~ #yamaha,
#drive-tab04:checked ~ #yanmar { max-height:5000px; border-width: 5px 2px; opacity: 1;}

.scroll { overflow-y: scroll; height: 60vh;}
table { font-size: 14px;}

th { 
    position: sticky; top: 0; z-index: 3;
    background: #eee; 
    color: #000;}
th:nth-of-type(2) { width: 50px;}
th:nth-of-type(3) { width: 50px;}
th:nth-of-type(4) { text-align: left; }
    

.fixed02 {
    position: relative; z-index: 2;
    width: 150px;
    background: #eee;
    word-break: break-all;}

th::before {
    content: "";
    position: absolute; top: -1px; left: -1px; z-index: 1;
    width: 100%; height: 100%;
    border: 1px solid #888;}


td[colspan="4"] { 
    background: #000; 
    color: #fff; font-weight: 600; text-align: left; word-break: break-all;}
td:nth-of-type(4) { text-align: left; word-break: break-all; }

td a { position: relative; z-index: 4;}

@media screen and (max-width:499px){
    table { width: 600px;}

    .fixed01 { left: 0; z-index: 4;}

    .fixed02 { position: sticky; left: 0;}
    
    .fixed02::before {
        content: "";
        position: absolute; top: -1px; left: -1px; z-index: 1;
        width: 100%; height: 100%;
        border: 1px solid #888;}

}

/* LastUp2024.03.14_kimata */