@charset "UTF-8";
h3 { margin: 0 0 10px;}

main .dis-tbl_tab {
    width: 100%; margin: 0 0 50px; padding: 0 0 30px;
    border-bottom: solid 2px #ddd;}

main .dis-tbl_tab > * { display: table-cell; vertical-align: top;}
main .dis-tbl_tab > *:first-child { box-sizing: border-box; width: 260px; padding: 0 30px 0 0;}

@media screen and (max-width:699px){
    main .dis-tbl_tab > *:first-child { padding: 0 20px 0 0;}
}

@media screen and (max-width:499px){
    main .dis-tbl_tab,
    main .dis-tbl_tab > * { display: block;}
    
    main .dis-tbl_tab > *:first-child { margin: 0 auto 20px; padding: 0;}
}

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

@media screen and (max-width:1499px){
    .main-img { background: url("../images/propeller_img.webp") no-repeat top left -260px;}
}

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

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

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

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

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

/**============================================================================================**/
/* プロペラ */
#propeller h2 { margin: 0 0 0 30px; padding: 0; border: none;}

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

#propeller 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;}
    
#propeller a:hover { background-color: rgba(255,255,255,0.5); background-blend-mode: lighten;}

#propeller img { width: 230px;}
#propeller a:hover img { opacity: 0.5;}

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

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

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

    #propeller img { width: 100px;}
}
/**============================================================================================**/

/**============================================================================================**/
/* ステンレスプロペラ */
#stainless3 ul { list-style: disc; padding: 0 0 0 25px;}

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

/**============================================================================================**/
/* アルミニウムプロペラ */
#aluminum1 .flex { 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;}
    
#aluminum1 .flex p { width: 67%;}
#aluminum1 .flex div { box-sizing: border-box; width: 33%; padding: 0 0 0 30px;}

@media screen and (max-width:799px){
    #aluminum1 .flex p { width: 60%;}
    #aluminum1 .flex div { width: 40%;}
}

@media screen and (max-width:599px){
    #aluminum1 .flex { display: block;}

    #aluminum1 .flex p { width: auto;}
    #aluminum1 .flex div { width: 220px; margin: 0 auto 20px; padding: 0;}
}

#aluminum1 .m-t30 img { margin: 10px 10px 0 0;}

/* シリーズ紹介 */
#aluminum2 ul { list-style: disc; padding: 0 0 0 25px;}

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

/**============================================================================================**/
/* その他プロペラ */
#other1 .dis-tbl_tab,
#other2 .dis-tbl_tab { margin: 0; padding: 0; border: none;}

#other1 .scroll { margin: 60px 0 0;}
#other2 .scroll { margin: 20px 0 0;}

@media screen and (max-width:599px){
    .scroll { overflow-x: scroll; padding: 0 0 15px;}
    
    /* スクロールバーの装飾 */
    .scroll::-webkit-scrollbar { height: 8px;}
    .scroll::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    .scroll::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}
    
    .scroll img { width: 600px; max-width: none; max-height: none;}
}

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

/**============================================================================================**/
/* アクセサリー */
#accessory h2 { margin: 0 0 0 30px; padding: 0; border: none;}

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

#accessory 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;}
    
#accessory a:hover { background-color: rgba(255,255,255,0.5); background-blend-mode: lighten;}

#accessory img { width: 230px;}
#accessory a:hover img { opacity: 0.5;}

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

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

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

    #accessory img { width: 100px;}
}

/**========================================**/
/* プロペラキットとラバーブッシュ */
#propeller-kits div img,
#rubber-hub div img { max-width: none; max-height: none;}

#propeller-kits div:not(:nth-of-type(1)),
#rubber-hub .scroll { margin: 50px 0 0;}

@media screen and (max-width:839px){
    #propeller-kits .scroll1,
    #rubber-hub .scroll { overflow-x: scroll; padding: 0 0 15px;}
    
    /* スクロールバーの装飾 */
    #propeller-kits .scroll1::-webkit-scrollbar,
    #rubber-hub .scroll::-webkit-scrollbar { height: 8px;}
    #propeller-kits .scroll1::-webkit-scrollbar-track,
    #rubber-hub .scroll::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #propeller-kits .scroll1::-webkit-scrollbar-thumb,
    #rubber-hub .scroll::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}    
}

@media screen and (max-width:569px){
    #propeller-kits div { overflow-x: scroll; padding: 0 0 15px;}
    
    /* スクロールバーの装飾 */
    #propeller-kits div::-webkit-scrollbar { height: 8px;}
    #propeller-kits div::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #propeller-kits div::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}    
}

/**========================================**/
/* RBX（ルーベックスブッシュキット） */
#rbx1 { padding-bottom: 80px; border-bottom: solid 2px #ddd;}

#rbx1 > img { display: block; margin: 40px 0 0;}

#rbx1 ul { list-style: disc; margin: 0 0 30px; padding: 0 0 0 25px;}

/* 表の設定 */
#rbx2 table { width: 100%; border-collapse: collapse; border-spacing: 0;}

#rbx2 table tr:nth-child(even) { background: #f8f8f8;}

#rbx2 table tr > * { border: solid 1px #ddd;}
#rbx2 table tr > *:first-child { text-align: left;}

#rbx2 table th {
    position: sticky; z-index: 2; top: 0;
    padding: 10px 5px;
    background: #0279aa;
    color: #fff; font-size: 18px; font-weight: 500; line-height: 1.2em;}

#rbx2 table th:first-child,
#rbx2 table td:first-child { position: sticky; left: 0;}

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

#rbx2 table th:first-child { z-index: 4; min-width: 400px;}

#rbx2 table td {
    padding: 5px;
    font-size: 14px; line-height: 1.8em; text-align: center;}

#rbx2 table td:first-child {
    z-index: 3;
    background: #fff;}

#rbx2 table tr.bg { background: #edfcfb;}

#rbx2 table tr.bg td:first-child { 
    z-index: 1;
    width: auto;
    background: #edfcfb; color: #ed9100; font-size: 18px;
    word-break: break-all;}

@media screen and (max-width:839px){
    #rbx2 .scroll { 
        overflow: scroll;
        height: 450px; padding: 0 15px 15px 0;}

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


    #rbx2 table th:first-child {min-width: 400px;}
    #rbx2 table th:nth-child(2) {min-width: 140px;}
    #rbx2 table th:nth-child(3) {min-width: 140px;}
}

@media screen and (max-width:699px){
    #rbx2 table th:first-child {min-width: 300px;}
}

@media screen and (max-width:499px){
    #rbx2 table th:first-child { min-width: 180px;}

}


/* LastUp2025.07.15_kimata */