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

#maker-tab { display: block; table-layout: auto;}
#outboat-0004 .dis-tbl_tab { width: 100%;}
#outboat-0004 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;}

#outboat-0004 label:hover { color: #fff;}
#outboat-0004 label[for="outboat-tab01"]:hover { background:#0078db;}
#outboat-0004 label[for="outboat-tab02"]:hover { background:#ddd300;}
#outboat-0004 label[for="outboat-tab03"]:hover { background:#000e44;}
#outboat-0004 label[for="outboat-tab04"]:hover { background:#cc0000;}
#outboat-0004 label[for="outboat-tab05"]:hover { background:#00e6d8;}

@media screen and (max-width:599px){
    #outboat-0004 label { padding:12px 0; font-size: 14px; }
    #outboat-0004 label { font-size: 14px; }
}
@media screen and (max-width:499px){
    #outboat-0004 .dis-tbl_tab { display: block; font-size: 0;}
    #outboat-0004 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;}


}


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


#suzuki { border: solid 0px #ddd300;}
#tohatsu { border: solid 0px #000e44;}
#honda { border: solid 0px #cc0000;}
#mercury  { border: solid 0px #00e6d8;}

#outboat-tab01:checked ~ #yamaha,
#outboat-tab02:checked ~ #suzuki,
#outboat-tab03:checked ~ #tohatsu,
#outboat-tab04:checked ~ #honda,
#outboat-tab05:checked ~ #mercury { max-height:5000px; border-width: 5px 2px; opacity: 1;}

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


@media screen and (max-width:799px){
    table { width: 800px;}
    .scroll { overflow-x: scroll;}
}

th { 
    position: sticky; z-index: 2;
    background: #c3e2f1;
    color: #000;}

#suzuki th,
#yamaha th { top: 32px;}
#tohatsu th,
#honda th { top: 0;}
    
#suzuki th[rowspan="2"],
#suzuki th[colspan="2"],
#yamaha th[rowspan="2"],
#yamaha th[colspan="2"] { top: 0;}

.fixed01 { left: 0; z-index: 4;}
.fixed02 { left: 121px; z-index: 4; width: 60px;}
.fixed03 {
    position: sticky; left: 0; z-index: 3;
    width: 110px;
    background: #dcf1e9;
    word-break: break-all;}

.fixed04 {
    position: sticky; left: 121px; z-index: 3;
    background: #eee;
    word-break: break-all;}

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

td { position: sticky; z-index: 1;}
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;}
    
    .fixed02::before {
        content: "";
        position: absolute; top: -1px; left: -1px; z-index: 1;
        width: 100%; height: 100%;
        border: 1px solid #888;}

}

#outboat-0004 p.asterisk {
    position: relative; 
    margin: 8px 0; padding: 0 0 0 22px; 
    color: #e00; font-size: 12px;line-height: 1.5em;}
    
#outboat-0004 p.asterisk:before {
    content:'※'; 
    position: absolute; top: 0; left: 6px;}


/* LastUp2024.03.14_kimata */