@charset "UTF-8";

/**========================================**/
/* イメージ画像 */
.main-img { background: url("../images/pwc-parts_img.webp") no-repeat top center;}

@media screen and (max-width:1699px){
    .main-img { background: url("../images/pwc-parts_img.webp") no-repeat top left -155px;}
}

@media screen and (max-width:1199px){
    .main-img { 
        background: url("../images/pwc-parts_img.webp") no-repeat top left -155px;
        background-size: auto 100%;}
}

@media screen and (max-width:999px){
    .main-img { 
        background: url("../images/pwc-parts_img.webp") no-repeat top left -125px;
        background-size: auto 100%;}
}

@media screen and (max-width:699px){
    .main-img { 
        background: url("../images/pwc-parts_img.webp") no-repeat top left -100px;
        background-size: auto 100%;}
}

@media screen and (max-width:499px){
    .main-img { 
        background: url("../images/pwc-parts_img.webp") no-repeat top left -130px;
        background-size: auto 100%;}
}

@media screen and (max-width:399px){
    .main-img { 
        background: url("../images/pwc-parts_img.webp") no-repeat top left -115px;
        background-size: auto 100%;}
}

/**============================================================================================**/

/**============================================================================================**/
/* PWCパーツ */
#pwc-parts h2 { margin: 0 0 0 30px; padding: 0; border: none;}

#pwc-parts li { margin: 60px 0 0;}
#pwc-parts li:first-child { margin: 0;}

#pwc-parts a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; width: 100%; height: 241px; padding: 0 15px;
    border: solid 1px #ddd;
    background-image: url("../images/propeller/accessory/accessory_bg.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;}
    
#pwc-parts a:hover { background-color: rgba(255,255,255,0.5); background-blend-mode: lighten;}

#pwc-parts img { width: 230px;}
#pwc-parts a:hover img { opacity: 0.5;}

@media screen and (max-width:499px){
    #pwc-parts h2 { margin-left: 10px;}

    #pwc-parts a { height: 30%; padding: 0 5px;}
    
    #pwc-parts img { width: 150px;}
}

@media screen and (max-width:399px){
    #pwc-parts h2 { font-size: 18px; line-height: 1.3em;}

    #pwc-parts img { width: 100px;}
}

/**============================================================================================**/

/**============================================================================================**/
/* ジェットポンプ */
#impellers1 div,
#impellers2 div { font-size: 0;}

#impellers1 div img,
#impellers2 div img { display: inline-block; width: 32.33%; margin: 0 0.5%;}

@media screen and (max-width:599px){
    #impellers1 div img,
    #impellers2 div img { width: 49%; margin: 0 0.5% 5px;}
}

/* シリーズ紹介 */
#impellers2 h3 { margin: 60px 0 10px;}
#impellers2 h3:nth-of-type(1) { margin: 0 0 15px;}

/* 適合表 */
#impellers3 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}

#impellers3 li { 
    position: relative;
    box-sizing: border-box; width: 25%; margin: 0 0 20px; padding: 0 15px 0 20px;
    line-height: 1.5em;}

#impellers3 li::before {
    content: '';
    position: absolute; top: 7px; left: 0;
    width: 0;  height: 0;
    border-style: solid; border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #000f53;}


@media screen and (max-width:749px){
    #impellers3 li { width: 33.33%;}
}
@media screen and (max-width:499px){
    #impellers3 li { width: 50%;}
}



#impellers3 > div { margin: 40px 0 0;}

#impellers3 h3 {
    margin: 0; padding: 10px;
    background: #0279aa;
    color: #f6f6f6; font-size: 18px;}

#impellers3 table { width: auto; border-collapse: collapse; border-spacing: 0;}

#impellers3 table tr > * { 
    padding: 5px;
    border: solid 1px #999;
    font-size: 12px; line-height: 1.6em; text-align: center;
    word-break: break-all;}
    
#impellers3 table th { 
    position: sticky; z-index: 2; top: 0;
    box-sizing: border-box;
    background: #edfcfb; font-weight: 500;}

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

/* SEADOO */
#sd table { width: 1120px;}
#sd table th:nth-child(1) { width: 55px;}
#sd table th:nth-child(3) { width: 75px;}
#sd table th:nth-child(4) { width: 65px;}
#sd table th:nth-child(5) { width: 70px;}
#sd table th:nth-child(6) { width: 50px;}
#sd table th:nth-child(7) { width: 100px;}
#sd table th:nth-child(8) { width: 420px;}

/* SEADOO JETBOAT */
#sd-boat table { width: 800px;}
#sd-boat table th:nth-child(1) { width: 95px;}
#sd-boat table th:nth-child(3) { width: 75px;}
#sd-boat table th:nth-child(4) { width: 75px;}
#sd-boat table th:nth-child(5) { width: 65px;}
#sd-boat table th:nth-child(6) { width: 70px;}
#sd-boat table th:nth-child(7) { width: 50px;}
#sd-boat table th:nth-child(8) { width: 125px;}

/* Mercury Sport jet */
#mer table { width: 800px;}
#mer table th:nth-child(1),
#mer table th:nth-child(2),
#mer table th:nth-child(3),
#mer table th:nth-child(4),
#mer table th:nth-child(5),
#mer table th:nth-child(6),
#mer table th:nth-child(7) { width: auto;}

/* YAMAHA */
#yam table { width: 950px;}
#yam table th:nth-child(1) { width: 55px;}
#yam table th:nth-child(3) { width: 75px;}
#yam table th:nth-child(4) { width: 65px;}
#yam table th:nth-child(5) { width: 70px;}
#yam table th:nth-child(6) { width: 50px;}
#yam table th:nth-child(7) { width: 125px;}
#yam table th:nth-child(8) { width: 310px;}

/* YAMAHA JETBOAT */
#yam-boat table { width: 800px;}
#yam-boat table th:nth-child(1),
#yam-boat table th:nth-child(2),
#yam-boat table th:nth-child(3),
#yam-boat table th:nth-child(4),
#yam-boat table th:nth-child(5),
#yam-boat table th:nth-child(6),
#yam-boat table th:nth-child(7) { width: auto;}

/* KAWASAKI */
#kaw table { width: 985px;}
#kaw table th:nth-child(1) { width: 55px;}
#kaw table th:nth-child(2) { width: auto;}
#kaw table th:nth-child(3) { width: 75px;}
#kaw table th:nth-child(4) { width: 65px;}
#kaw table th:nth-child(5) { width: 70px;}
#kaw table th:nth-child(6) { width: 50px;}
#kaw table th:nth-child(7) { width: 115px;}
#kaw table th:nth-child(8) { width: 355px;}

/* HONDA */
#hon table { width: 800px;}
#hon table th:nth-child(1),
#hon table th:nth-child(2),
#hon table th:nth-child(3),
#hon table th:nth-child(4),
#hon table th:nth-child(5),
#hon table th:nth-child(6),
#hon table th:nth-child(7),
#hon table th:nth-child(8) { width: auto;}

/* POLARIS */
#pol table { width: 905px;}
#pol table th:nth-child(1) { width: 55px;}
#pol table th:nth-child(2) { width: auto;}
#pol table th:nth-child(3) { width: 70px;}
#pol table th:nth-child(4) { width: 65px;}
#pol table th:nth-child(5) { width: 70px;}
#pol table th:nth-child(6) { width: 50px;}
#pol table th:nth-child(7) { width: 115px;}
#pol table th:nth-child(8) { width: 295px;}

/* TIGERSHARK */
#tig table { width: 800px;}
#tig table th:nth-child(1),
#tig table th:nth-child(2),
#tig table th:nth-child(3),
#tig table th:nth-child(4),
#tig table th:nth-child(5),
#tig table th:nth-child(6),
#tig table th:nth-child(7),
#tig table th:nth-child(8) { width: auto;}


#impellers3 strong { color: #f60; font-weight: 900;}

#impellers3 .scroll { 
    overflow: scroll;
    height: 450px; padding: 0 15px 15px 0;}

/* スクロールバーの装飾 */
#impellers3 .scroll::-webkit-scrollbar { width: 8px; height: 8px;}
#impellers3 div[class^="scroll"]::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
#impellers3 div[class^="scroll"]::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}

@media screen and (max-width:839px){
    #impellers3 .scroll-x { overflow-x: scroll; padding: 0 0 15px;}
    
    #impellers3 .scroll-x::-webkit-scrollbar { height: 8px;}
}
/**============================================================================================**/

/**============================================================================================**/
/* インペラ */
#jet-pump h3 {
    margin: 40px 0 10px; padding: 10px;
    background: #0279aa;
    color: #f6f6f6; font-size: 18px;}

#jet-pump table { width: 100%; border-collapse: collapse; border-spacing: 0;}
    
#jet-pump table tr.bg { background: #f4f4f4;}

#jet-pump table tr > * { 
    padding: 5px;
    border: solid 1px #999;
    font-size: 14px; line-height: 1.6em; text-align: center;
    word-break: break-all;}

#jet-pump table th { 
    box-sizing: border-box;
    background: #edfcfb;}

#jet-pump table th:nth-child(1) { width: 80px;}
#jet-pump table th:nth-child(2) { width: 230px;}
#jet-pump table th:nth-child(3) { width: 90px;}
#jet-pump table th:nth-child(4) { width: 155px;}


@media screen and (max-width:839px){
    #jet-pump table { width: 800px;}
    
    #jet-pump table th { position: sticky; z-index: 2; top: 0;}
    
    #jet-pump table th::before {
        content: "";
        position: absolute; top: -1px; left: -1px; z-index: 1;
        width: 100%; height: 100%;
        border: solid 1px #999;}

    #jet-pump .scroll { 
        overflow: scroll;
        height: 450px; padding: 0 15px 15px 0;}

    /* スクロールバーの装飾 */
    #jet-pump .scroll::-webkit-scrollbar { width: 8px; height: 8px;}
    #jet-pump .scroll::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #jet-pump .scroll::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}
}

/**============================================================================================**/

/**============================================================================================**/
/* インテークグレート */
#intake h3 {
    margin: 40px 0 10px; padding: 10px;
    background: #0279aa;
    color: #f6f6f6; font-size: 18px;}

#intake table { width: 100%; border-collapse: collapse; border-spacing: 0;}
    
#intake table tr.bg { background: #f4f4f4;}

#intake table tr > * { 
    padding: 5px;
    border: solid 1px #999;
    font-size: 14px; line-height: 1.6em; text-align: center;
    word-break: break-all;}

#intake table th { 
    box-sizing: border-box;
    background: #edfcfb;}

#intake table th:nth-child(1),
#intake table th:nth-child(3) { width: 90px;}
#intake table th:nth-child(4) { width: 155px;}


@media screen and (max-width:839px){
    #intake table { width: 800px;}
    
    #intake table th { position: sticky; z-index: 2; top: 0;}
    
    #intake table th::before {
        content: "";
        position: absolute; top: -1px; left: -1px; z-index: 1;
        width: 100%; height: 100%;
        border: solid 1px #999;}

    #intake .scroll1 { 
            overflow: scroll;
            height: 450px; padding: 0 15px 15px 0;}

    #intake .scroll2 { 
            overflow-x: scroll;
            padding: 0 0 15px;}

    /* スクロールバーの装飾 */
    #intake .scroll1::-webkit-scrollbar { width: 8px; height: 8px;}
    #intake .scroll2::-webkit-scrollbar { height: 8px;}
    #intake div[class^="scroll"]::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #intake div[class^="scroll"]::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}
}

/**============================================================================================**/

/**============================================================================================**/
/* アクセサリー */
#accessory div { margin: 60px 0 0;}

@media screen and (max-width:599px){
    #accessory img { width: 700px; max-width: none; max-height: none;}

    #accessory .scroll1 { 
            overflow: scroll;
            height: 450px; padding: 0 15px 15px 0;}

    #accessory .scroll2 { 
            overflow-x: scroll;
            padding: 0 0 15px;}

    /* スクロールバーの装飾 */
    #accessory .scroll1::-webkit-scrollbar { width: 8px; height: 8px;}
    #accessory .scroll2::-webkit-scrollbar { height: 8px;}
    #accessory div[class^="scroll"]::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #accessory div[class^="scroll"]::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}
}

/* LastUp2025.07.15_kimata */