@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 リッチ化*/

    /*画像部*/
#contrich {
    font-size: 1.6rem;

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

        > img {
            width: 100%;
        }

        .hero-text {

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

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

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

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

            @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: 265px;

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

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

                > p {
                    height: 90px;
                    margin: -20px 0 0;

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

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

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

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

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

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

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

    .ate_com:nth-child(3) ,
    .ate_com:nth-child(2) {
        margin: -20px 0 0;
    }

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

    .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: 0 auto;

        > span {
            font-weight: bold;
            display: block;
            margin: 0 0 15px;
            font-size: 1.8rem;
        }

        > p {
            margin: -40px 0 0;
        }
    }
    
}