@charset 'UTF-8';

/*領域のサイズをMAX500pxに指定*/
.ksinc_outsize {
    max-width: 500px;
}

/*インクルード（ID：MK4PFRDL100_41、MK4PFRDL100_42、MK4PFRDL100_43） メーカーキャンペーン*/
#mkcp {
    border-style: dotted;
    border-width: 1px;
    padding: 10px 10px 10px 10px;
    max-width: 500px;

    .mk_tittle1 {
        font-weight: bold;
        font-size: 1.6rem;
        margin: 0 0 5px;
    }

    .mk_tittle2 {
        font-weight: bold;
        line-height: 1.3;
        margin: 0 0 5px;
        font-size: 1.5rem;
    }

    .mk_period {
        margin: 0 0 10px;

        > span {
            font-size: 1.3rem;
        }
    }

    > a {

        > img {
            display: block;
            margin: 0 0 10px;
            border: solid 1px var(--bk-gray)!important;
        }
    }

    .mk_com {
        position: relative;
        padding: 0 0 0 20px;
        color: var(--global_clr_red);
        margin: 10px 0 0;

        > a {
            color: var(--global_clr_red)!important;
            font-weight: bold;
        }

        .fc_bk {
            color: var(--global_clr_black);

            > a {
            color: var(--global_clr_black)!important;
            }
        }

        &:before {
            content: "\203B";
            position: absolute;
            top: 0;
            left: 0;
        }

    }
}


/*コンポーネント（ID：CMS_KEC_MK4PFRDL400_01） 商品ページ上部バナー*/
#itbn {
    margin: 0 0 30px;
}


/*商品概要2 リッチ化*/

    /*画像部*/
#contrich2 {
    font-size: 1.6rem;
    margin: 70px 0 0;

    .richhero {
        max-width: 1000px;
        margin: 0 auto 30px;

        > img {
            width: 100%;
            margin: 0 0 40px;
        }

        .hero-text {

            > h3 {
                font-size: 2.0rem;
                font-weight: bold;
                height: 54px;
            }
        }
    }

    .richflex {
        display: flex;
        flex-wrap: wrap;
        gap: 70px 20px;
        margin: 100px 0 0;

        @media screen and (max-width: 598px) {
            gap: 40px 20px;
        }

        .richinner {
            width: calc((100% - 40px) / 3);

            @media screen and (max-width: 1050px) {
                width: calc((100% - 20px) / 2);
            }

            @media screen and (max-width: 598px) {
                width: 100%;
            }

            .txtbox {
                margin: 0 0 20px;
                height: 120px;

                > h3 {
                    font-size: 2.0rem;
                    font-weight: bold;

                    @media screen and (max-width: 598px) {
                        height: auto;
                    }
                }

                > p {
                    margin: 20px 0 0;

                    @media screen and (max-width: 598px) {
                        height: auto;
                    }
                }
            }

            .imgbox {
                text-align: center;
                margin: 50px 0 0;

                > img {
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }
        }
    }

    /*動画部*/
    .moviebox {
        position: relative;
        aspect-ratio: 16 / 9;
        margin: 100px auto 0;
        max-width: 1200px;

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    /*部品*/
        /*文章中の注釈*/
    sup {
        font-size: 1.0rem;
        vertical-align: middle;
    }

        /*注釈説明*/
    .ate_com,
    .ate1  {
        font-size: 1.4rem;
        position: relative;
        padding: 0 0 0 30px;
        text-align: left;
        margin: 20px 0 0;
    }

    .ate_com:nth-child(4) ,
    .ate_com:nth-child(3) {
        margin: 5px 0 0!important;
    }

    .txtbox {
        .ate_com:nth-child(3) {
            margin: 20px 0 0!important;
        }    
    }

    .ate3,
    .ate2 {
        font-size: 1.4rem;
        position: relative;
        padding: 0 0 0 30px;
        text-align: left;
        margin: 5px 0 0;
    }

    .ate_com {

        &:before {
            position: absolute;
            content: "※";
            top: 0;
            left: 0;
        }
    }

    .ate1 {

        &:before {
            position: absolute;
            content: "※1";
            top: 0;
            left: 0;
        }
    }

    .ate2 {

        &:before {
            position: absolute;
            content: "※2";
            top: 0;
            left: 0;
        }
    }

    .ate3 {

        &:before {
            position: absolute;
            content: "※3";
            top: 0;
            left: 0;
        }
    }

        /*最下部 アテンションボックス*/
    .oth_combox {
        padding: 0 20px;
        border: dashed 2px;
        max-width: 1000px;
        width: 100%;
        margin: 70px auto 0;
        padding: 20px;

        @media screen and (max-width: 768px) {
            margin: 70px auto;
        }

        > span {
            font-weight: bold;
            display: block;
            font-size: 1.8rem;
        }

        > p {
            margin: 5px 0 0;
        }
    }
    
}

.h1 {
    .txtbox {
        height: 170px !important;

        @media screen and (max-width: 768px) {
            height: 180px !important;
        }
    }
}