/* 
{
  Shippori Mincho Regular
  font-family: "shippori-mincho", sans-serif;
  font-weight: 400;
  font-style: normal;
  Shippori Mincho Bold
  font-family: "shippori-mincho", sans-serif;
  font-weight: 700;
  font-style: normal;
}
*/

* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

#mountain {
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
    box-sizing: border-box;
}


.sec-mv {
    width: 100vw;
    max-width: 1600px;
    margin: auto;

    h1 {
        width: 100vw;
        max-width: 1600px;
        height: calc(686 / 1600 * 100vw);
        max-height: 686px;
    }

    h1 img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .specs {
        width: calc(1200 / 1600 * 100vw);
        max-width: 1200px;
        margin: min(56.5px, calc(56.5 / 1600 * 100vw)) auto;
        display: flex;
        justify-content: center;
        align-items: center;

        li {
            display: flex;
            align-items: center;
            justify-content: center;

            .main {
                font-family: "shippori-mincho", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: min(50px, calc(50 / 1600 * 100vw));

                >span {
                    font-family: "noto-serif", serif;
                    font-weight: 500;
                    font-style: normal;
                    font-size: min(40px, calc(40 / 1600 * 100vw));
                }
            }

            .sub {
                font-size: min(24px, calc(24 / 1600 * 100vw));
                line-height: min(40px, calc(40 / 1600 * 100vw));
                color: #909090;
            }

            .spec-icon {
                display: block;
                width: min(120px, calc(120 / 1600 * 100vw));
                max-width: 120px;
                object-fit: contain;
            }
        }

        li:nth-child(1) {
            width: calc(364 / 1600 * 100vw);
            max-width: 364px;
            border-right: 1px solid #CCCCCC;
            padding-right: min(64px, calc(64 / 1600 * 100vw));

            .spec-icon {
                margin-right: min(10px, calc(10 / 1600 * 100vw));
            }
        }

        li:nth-child(2) {
            width: calc(438 / 1600 * 100vw);
            max-width: 438px;
            border-right: 1px solid #CCCCCC;

            .spec-icon {
                margin-right: min(22px, calc(22 / 1600 * 100vw));
            }
        }

        li:nth-child(3) {
            width: calc(400 / 1600 * 100vw);
            max-width: 400px;

            .spec-icon {
                margin-right: min(24px, calc(24 / 1600 * 100vw));
            }
        }

        .spec-txt {
            text-align: center;
        }

    }
}

.sec-lead {
    width: 100%;
    margin: auto;
    /* リード文 */
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/lead-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

    h2 {
        font-family: "shippori-mincho", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: min(50px, calc(50 / 1600 * 100vw));
    }

    p {
        margin-top: min(56px, calc(56 / 1600 * 100vw));
        font-size: min(20px, calc(20 / 1600 * 100vw));
        line-height: min(56px, calc(56 / 1600 * 100vw));
    }

}

.sec-lead__inner {
    max-width: 1600px;
    margin: auto;
    padding:
        min(158px, calc(158 / 1600 * 100vw)) 0 min(165px, calc(165 / 1600 * 100vw)) min(200px, calc(200 / 1600 * 100vw));
}

.sec-spec {
    /* スペック */
    margin: auto;
    width: 100vw;
}

.spec-inner {
    display: flex;
    margin: min(120px, calc(120 / 1600 * 100vw)) auto;
    position: relative;
    z-index: 10;
    max-width: 1600px;

    .spec-about {
        .index {
            width: calc(167 / 1600 * 100vw);
            max-width: 167px;
            object-fit: contain;
        }

        .ttl {
            font-size: min(36px, calc(36 / 1600 * 100vw));
            font-weight: bold;
        }

        .sub-text {
            margin-top: min(32px, calc(32 / 1600 * 100vw));
            font-size: min(18px, calc(18 / 1600 * 100vw));
            font-weight: bold;
            line-height: min(36px, calc(36 / 1600 * 100vw));
        }

        .text {
            margin-top: min(32px, calc(32 / 1600 * 100vw));
            font-size: min(18px, calc(18 / 1600 * 100vw));
            line-height: min(40px, calc(40 / 1600 * 100vw));
            font-weight: 400;
        }
    }
}

.sec-spec__wrap.spec01 .spec-inner {
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/bg-01.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: min(210px, calc(210 / 1600 * 100vw));
    gap: min(90px, calc(90 / 1600 * 100vw));

    .spec-img {
        width: calc(744 / 1600 * 100vw);
        max-width: 744px;
        margin-top: min(112px, calc(112 / 1600 * 100vw));

        img {
            display: block;
            width: 100%;
            object-fit: contain;
        }
    }

    .spec-about {
        width: calc(556 / 1600 * 100vw);
        max-width: 556px;
    }

    &::before {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(284.45 / 1600 * 100vw);
        max-width: 284.45px;
        height: calc(123.83 / 1600 * 100vw);
        max-height: 123.83px;
        top: 0;
        left: min(-50px, calc(-50 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco01-01.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &::after {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(118.12 / 1600 * 100vw);
        max-width: 118.12px;
        height: calc(70.83 / 1600 * 100vw);
        max-height: 70.83px;
        bottom: min(60px, calc(-60 / 1600 * 100vw));
        left: min(700px, calc(700 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco01-02.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.sec-spec__wrap.spec02 {
    background-color: #062C0A;
}

.sec-spec__wrap.spec02 .spec-inner {
    color: #fff;
    padding: min(65px, calc(65 / 1600 * 100vw)) 0 min(80px, calc(80 / 1600 * 100vw));
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: min(35px, calc(35 / 1600 * 100vw));

    .spec-img {
        width: calc(800 / 1600 * 100vw);
        max-width: 800px;
        padding-top: min(112px, calc(112 / 1600 * 100vw));

        img {
            display: block;
            width: 100%;
            object-fit: contain;
        }
    }

    .spec-about {
        .index {
            width: calc(174 / 1600 * 100vw);
            max-width: 174px;
            object-fit: contain;
        }

        .sub-ttl {
            width: calc(208 / 1600 * 100vw);
            text-align: center;
            margin-top: min(32px, calc(32 / 1600 * 100vw));
            font-size: min(18px, calc(18 / 1600 * 100vw));
            line-height: min(36px, calc(36 / 1600 * 100vw));
            border: 1px solid #fff;
        }

        .spec02-text {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .txt {
                font-family: "shippori-mincho", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: min(36px, calc(36 / 1600 * 100vw));

                >span {
                    font-size: min(70px, calc(70 / 1600 * 100vw));
                    display: inline-block;
                    padding: 0 min(8px, calc(8 / 1600 * 100vw));

                    &.slash {
                        padding: 0 min(24px, calc(24 / 1600 * 100vw));
                        font-size: min(36px, calc(36 / 1600 * 100vw));
                    }
                }
            }



            .txt-wrap {
                display: flex;
                flex-direction: column-reverse;
                font-size: min(36px, calc(36 / 1600 * 100vw));
                justify-content: start;

                >span {
                    display: block;

                    &:last-child {
                        font-size: min(18px, calc(18 / 1600 * 100vw));
                        line-height: 1;
                        text-align: center;
                    }
                }
            }
        }

        .text {
            margin-top: min(11px, calc(11 / 1600 * 100vw));
        }
    }

    &::before {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(158.27 / 1600 * 100vw);
        max-width: 158.27px;
        height: calc(250.64 / 1600 * 100vw);
        max-height: 250.64px;
        top: min(53px, calc(53 / 1600 * 100vw));
        right: min(54px, calc(54 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco02-01.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.2;
    }

    &::after {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(362.15 / 1600 * 100vw);
        max-width: 362.15px;
        height: calc(151.95 / 1600 * 100vw);
        max-height: 151.95px;
        bottom: min(56px, calc(56 / 1600 * 100vw));
        right: min(41px, calc(41 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco02-02.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

}

.sec-spec__wrap.spec03 .spec-inner {
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/bg-03.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: min(210px, calc(210 / 1600 * 100vw));
    gap: min(90px, calc(90 / 1600 * 100vw));

    .spec-img {
        width: calc(744 / 1600 * 100vw);
        max-width: 744px;
        padding-top: min(112px, calc(112 / 1600 * 100vw));

        img {
            display: block;
            width: 100%;
            object-fit: contain;
        }
    }

    .spec-about {
        width: calc(556 / 1600 * 100vw);
        max-width: 556px;
    }

    &::before {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(198.2 / 1600 * 100vw);
        max-width: 198.2px;
        height: calc(105.75 / 1600 * 100vw);
        max-height: 105.75px;
        top: min(-30px, calc(-30 / 1600 * 100vw));
        left: min(29px, calc(29 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco03-01.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &::after {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(236.24 / 1600 * 100vw);
        max-width: 236.24px;
        height: calc(156.92 / 1600 * 100vw);
        max-height: 156.92px;
        bottom: min(-40px, calc(-40 / 1600 * 100vw));
        left: min(570px, calc(570 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco03-02.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.sec-spec__wrap.spec04 {
    background-color: #62532E;
}

.sec-spec__wrap.spec04 .spec-inner {
    color: #fff;
    padding: min(65px, calc(65 / 1600 * 100vw)) 0 min(160px, calc(160 / 1600 * 100vw));
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 0;
    gap: min(90px, calc(90 / 1600 * 100vw));

    .ttl>span {
        font-family: "shippori-mincho", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: min(70px, calc(70 / 1600 * 100vw));
        margin-right: min(8px, calc(8 / 1600 * 100vw));
    }

    .spec-img {
        width: calc(800 / 1600 * 100vw);
        max-width: 800px;
        padding-top: min(112px, calc(112 / 1600 * 100vw));

        img {
            display: block;
            width: 100%;
            object-fit: contain;
        }
    }

    .spec-about {
        .index {
            width: calc(173 / 1600 * 100vw);
            max-width: 173px;
            object-fit: contain;
        }
    }

    &::before {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(158.27 / 1600 * 100vw);
        max-width: 158.27px;
        height: calc(250.64 / 1600 * 100vw);
        max-height: 250.64px;
        top: min(53px, calc(53 / 1600 * 100vw));
        right: min(54px, calc(54 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco04-01.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 1;
    }

    &::after {
        content: "";
        position: absolute;
        display: block;
        position: absolute;
        z-index: -1;
        width: calc(304.87 / 1600 * 100vw);
        max-width: 304.87px;
        height: calc(142.3 / 1600 * 100vw);
        max-height: 142.3px;
        bottom: min(109px, calc(109 / 1600 * 100vw));
        right: min(30px, calc(30 / 1600 * 100vw));
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/deco04-02.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.2;
    }
}

.sec-product {
    width: 100vw;
    margin: auto;
    padding: min(120px, calc(120 / 1600 * 100vw)) 0;
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/product-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-product__inner {
    width: calc(1200 / 1600 * 100vw);
    max-width: 1200px;
    margin: auto;
    padding: min(80px, calc(80 / 1600 * 100vw)) 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
}

.sec-about {
    background-color: #EFEDE9;
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/bg-btm.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;

    width: 100vw;
    margin: auto;
    padding: min(120px, calc(120 / 1600 * 100vw)) 0 min(680px, calc(680 / 1600 * 100vw));

    .link {
        display: block;
        background-color: #000;
        color: #fff;
        width: calc(296 / 1600 * 100vw);
        max-width: 296px;
        text-align: center;
        margin: auto;
        font-size: min(24px, calc(24 / 1600 * 100vw));
        padding: min(12px, calc(12 / 1600 * 100vw)) 0;
    }

    .link.buy {
        display: block;
        background-color: #3081C1;
        color: #fff;
        width: calc(296 / 1600 * 100vw);
        max-width: 296px;
        text-align: center;
        margin: auto;
        font-size: min(24px, calc(24 / 1600 * 100vw));
        padding: min(12px, calc(12 / 1600 * 100vw)) 0;
        margin-top: min(19px, calc(19 / 1600 * 100vw));

        &::before {
            content: "";
            display: inline-block;
            width: calc(24 / 1600 * 100vw);
            height: calc(24 / 1600 * 100vw);
            max-width: 24px;
            max-height: 24px;
            background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/icon-cart.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-right: min(20px, calc(20 / 1600 * 100vw));
            vertical-align: middle;
        }
    }
}

.sec-about__inner {
    width: calc(1160 / 1600 * 100vw);
    max-width: 1160px;
    margin: auto;

    h3 {
        font-size: min(44px, calc(44 / 1600 * 100vw));
        text-align: center;
        font-weight: bold;

        &::before {
            content: "［";
            display: inline-block;
            margin-right: min(40px, calc(40 / 1600 * 100vw));
        }

        &::after {
            content: "］";
            display: inline-block;
            margin-left: min(40px, calc(40 / 1600 * 100vw));
        }
    }

    .notice {
        text-align: center;
        margin-top: min(24px, calc(24 / 1600 * 100vw));
        font-size: min(18px, calc(18 / 1600 * 100vw));
    }

    hr {
        margin: min(80px, calc(80 / 1600 * 100vw)) 0;
        border-style: dotted;
    }
}

.product-list {
    margin-top: min(60px, calc(60 / 1600 * 100vw));
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: min(40px, calc(40 / 1600 * 100vw));

    li {
        width: calc(535 / 1600 * 100vw);
        max-width: 535px;
        background-color: #fff;
        border-radius: 20px;
        padding: min(32px, calc(32 / 1600 * 100vw));

        .product-img {
            position: relative;
            width: 100%;

            .item {
                display: block;
                width: calc(360 / 1600 * 100vw);
                max-width: 360px;
                object-fit: contain;
            }

            .weight {
                position: absolute;
                top: 0;
                right: 0;
                width: calc(158 / 1600 * 100vw);
                max-width: 158px;
                object-fit: contain;
            }
        }

        .ttl {
            margin-top: min(8px, calc(8 / 1600 * 100vw));
            font-size: min(32px, calc(32 / 1600 * 100vw));
            font-weight: bold;
            line-height: min(46px, calc(46 / 1600 * 100vw));
            text-align: center;
        }

        .txt {
            margin-top: min(24px, calc(24 / 1600 * 100vw));
            font-size: min(24px, calc(24 / 1600 * 100vw));
            line-height: min(35px, calc(35 / 1600 * 100vw));
            text-align: center;
        }

        .link-wrap {
            margin-top: min(24px, calc(24 / 1600 * 100vw));
        }
    }
}

.gear-list {
    margin-top: min(60px, calc(60 / 1600 * 100vw));

    li {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 20px;
        margin-bottom: min(40px, calc(40 / 1600 * 100vw));
        padding: min(60px, calc(60 / 1600 * 100vw)) 0 min(30px, calc(30 / 1600 * 100vw));
        gap: min(80px, calc(80 / 1600 * 100vw));

        .gear-img {
            display: block;
            width: calc(347 / 1600 * 100vw);
            max-width: 347px;
            object-fit: contain;
        }

        &:nth-child(even) {
            padding: min(60px, calc(60 / 1600 * 100vw)) 0;
            flex-direction: row-reverse;
            gap: min(100px, calc(80 / 1600 * 100vw));
        }
    }

    .link-wrap {
        margin-top: min(32px, calc(32 / 1600 * 100vw));
    }
}

.gear-detail {
    width: calc(524 / 1600 * 100vw);
    max-width: 524px;

    .gear-ttl {
        display: flex;
        justify-content: center;
        align-items: center;

        .gear-text {

            .ttl {
                font-size: min(32px, calc(32 / 1600 * 100vw));
                font-weight: bold;
                line-height: min(46px, calc(46 / 1600 * 100vw));
                text-align: center;
            }

            .txt {
                margin-top: min(32px, calc(32 / 1600 * 100vw));
                font-size: min(28px, calc(28 / 1600 * 100vw));
                line-height: min(40px, calc(40 / 1600 * 100vw));
                text-align: center;
            }
        }

        .sub-img {
            width: calc(164 / 1600 * 100vw);
            max-width: 164px;
            object-fit: contain;
        }
    }
}


/* sp */
@media (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .sec-mv {
        width: 100%;
        margin: auto;

        h1 {
            width: 100%;
            height: 100vw;
        }

        h1 img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .specs {
            width: 100%;
            margin: calc(24 / 375 * 100vw) auto calc(42 / 375 * 100vw);
            display: flex;
            justify-content: center;
            align-items: center;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .main {
                    font-size: calc(28 / 375 * 100vw);

                    >span {
                        font-size: calc(22 / 375 * 100vw);
                    }
                }

                .sub {
                    font-size: calc(12 / 375 * 100vw);
                    line-height: calc(20 / 375 * 100vw);
                }

                .spec-icon {
                    display: block;
                    width: calc(66 / 375 * 100vw);
                    max-width: 100%;
                    object-fit: contain;
                }
            }

            li:nth-child(1) {
                width: calc(128 / 375 * 100vw);
                border-right: 1px solid #ccc;
                padding-right: 0;

                .spec-icon {
                    margin-right: 0;
                }
            }

            li:nth-child(2) {
                width: calc(128 / 375 * 100vw);
                border-right: 1px solid #ccc;
                padding: 0;

                .spec-icon {
                    margin-right: 0;
                }
            }

            li:nth-child(3) {
                width: calc(128 / 375 * 100vw);
                padding-left: 0;

                .spec-icon {
                    margin-right: 0;
                }
            }
        }

    }

    .sec-lead {
        width: 100%;
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/lead-bg_sp.png);

        h2 {
            font-size: calc(36 / 375 * 100vw);
            line-height: calc(54 / 375 * 100vw);
        }

        p {
            margin-top: calc(29 / 375 * 100vw);
            font-size: calc(15 / 375 * 100vw);
            line-height: calc(36 / 375 * 100vw);
        }
    }

    .sec-lead__inner {
        width: 100%;
        padding:
            calc(66 / 375 * 100vw) 0 calc(80 / 375 * 100vw) calc(30 / 375 * 100vw);
    }

    .sec-spec {
        width: 100%;
        margin: auto;
    }

    .spec-inner {
        display: flex;
        flex-direction: column;
        margin: calc(24 / 375 * 100vw) auto calc(60 / 375 * 100vw);
        padding-left: calc(30 / 375 * 100vw);

        .spec-about {
            .index {
                width: calc(116 / 375 * 100vw);
                max-width: 100%;
                object-fit: contain;
            }

            .ttl {
                font-size: calc(28 / 375 * 100vw);
                font-weight: bold;
            }

            .sub-text {
                margin-top: calc(24 / 375 * 100vw);
                font-size: calc(18 / 375 * 100vw);
                line-height: calc(36 / 375 * 100vw);
            }

            .text {
                margin-top: calc(24 / 375 * 100vw);
                font-size: calc(15 / 375 * 100vw);
                line-height: calc(36 / 375 * 100vw);
            }
        }
    }


    .sec-spec__wrap.spec01 .spec-inner {
        background-image: none;
        padding-left: 0;
        gap: 0;

        .spec-img {
            width: calc(360 / 375 * 100vw);
            margin-top: calc(76 / 375 * 100vw);
            margin-left: auto;

            img {
                display: block;
                width: calc(360 / 375 * 100vw);
                object-fit: contain;
            }
        }

        .spec-about {
            width: 100%;
            padding-left: calc(30 / 375 * 100vw);
        }

        &::before {
            width: calc(168.15 / 375 * 100vw);
            max-width: 100%;
            height: calc(73.2 / 375 * 100vw);
            max-height: none;
            top: 0;
            left: auto;
            right: calc(34 / 375 * 100vw);

        }

        &::after {
            width: calc(80 / 375 * 100vw);
            max-width: 100%;
            height: calc(44 / 375 * 100vw);
            max-height: none;
            bottom: calc(270 / 375 * 100vw);
            right: calc(15 / 375 * 100vw);
            left: auto;
        }
    }

    .sec-spec__wrap.spec02 .spec-inner {
        padding: calc(32 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
        flex-direction: column;
        justify-content: flex-end;
        gap: 0;

        .spec-img {
            width: 100%;
            padding-top: calc(130 / 375 * 100vw);

            img {
                display: block;
                width: calc(341 / 375 * 100vw);
                /* width: 100%; */
                object-fit: contain;
            }
        }

        .spec-about {
            padding-left: calc(30 / 375 * 100vw);

            .index {
                width: calc(89 / 375 * 100vw);
                max-width: 100%;
                object-fit: contain;
            }

            .sub-ttl {
                width: calc(174 / 375 * 100vw);
                max-width: 100%;
                margin-top: calc(24 / 375 * 100vw);
                font-size: calc(15 / 375 * 100vw);
                line-height: calc(30 / 375 * 100vw);
            }

            .spec02-text {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .txt {
                    font-size: calc(22 / 375 * 100vw);

                    >span {
                        font-size: calc(42 / 375 * 100vw);
                        display: inline-block;
                        padding: 0 calc(3 / 375 * 100vw);

                        &.slash {
                            padding: 0 calc(12 / 375 * 100vw);
                            font-size: calc(22 / 375 * 100vw);
                        }
                    }
                }

                .txt-wrap {
                    display: flex;
                    flex-direction: column-reverse;
                    font-size: calc(22 / 375 * 100vw);
                    justify-content: start;

                    >span {
                        display: block;

                        &:last-child {
                            font-size: calc(12 / 375 * 100vw);
                            line-height: 1;
                            text-align: center;
                        }
                    }
                }
            }

            .text {
                margin-top: calc(11 / 375 * 100vw);
            }
        }

        &::before {
            width: calc(93.56 / 375 * 100vw);
            max-width: 100%;
            height: calc(148.16 / 375 * 100vw);
            max-height: none;
            top: calc(22 / 375 * 100vw);
            right: calc(12 / 375 * 100vw);
        }

        &::after {
            width: calc(215 / 375 * 100vw);
            max-width: 100%;
            height: calc(90 / 375 * 100vw);
            max-height: none;
            bottom: calc(310 / 375 * 100vw);
            right: calc(15 / 375 * 100vw);
        }
    }

    .sec-spec__wrap.spec03 .spec-inner {
        background-image: none;
        /* padding-left: calc(30 / 375 * 100vw); */
        padding-left: 0;
        gap: 0;

        .spec-img {
            width: calc(360 / 375 * 100vw);
            padding-top: calc(128 / 375 * 100vw);
            margin-left: auto;

            img {
                display: block;
                width: calc(360 / 375 * 100vw);
                object-fit: contain;
            }
        }

        .spec-about {
            width: 100%;
            padding-left: calc(30 / 375 * 100vw);
        }

        &::before {
            width: calc(117.16 / 375 * 100vw);
            max-width: 100%;
            height: calc(62.51 / 375 * 100vw);
            max-height: none;
            top: calc(30 / 375 * 100vw);
            left: auto;
            right: calc(30 / 375 * 100vw);

        }

        &::after {
            width: calc(139.64 / 375 * 100vw);
            max-width: 100%;
            height: calc(92.76 / 375 * 100vw);
            max-height: none;
            bottom: calc(250 / 375 * 100vw);
            right: calc(15 / 375 * 100vw);
            left: auto;
        }
    }

    .sec-spec__wrap.spec04 .spec-inner {
        padding: calc(32 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
        flex-direction: column;
        justify-content: flex-end;
        gap: 0;

        .spec-img {
            width: 100%;
            padding-top: calc(134 / 375 * 100vw);

            img {
                display: block;
                width: calc(315 / 375 * 100vw);
                object-fit: contain;
            }
        }

        .spec-about {
            padding-left: calc(30 / 375 * 100vw);

            .index {
                width: calc(89 / 375 * 100vw);
                max-width: 100%;
                object-fit: contain;
            }

            .ttl>span {
                font-size: calc(50 / 375 * 100vw);
                margin-right: calc(8 / 375 * 100vw);
            }

            .sub-ttl {
                width: calc(174 / 375 * 100vw);
                max-width: 100%;
                margin-top: calc(24 / 375 * 100vw);
                font-size: calc(15 / 375 * 100vw);
                line-height: calc(30 / 375 * 100vw);
            }
        }

        &::before {
            width: calc(93.56 / 375 * 100vw);
            max-width: 100%;
            height: calc(148.16 / 375 * 100vw);
            max-height: none;
            top: calc(22 / 375 * 100vw);
            right: calc(12 / 375 * 100vw);
        }

        &::after {
            width: calc(165 / 375 * 100vw);
            max-width: 100%;
            height: calc(78 / 375 * 100vw);
            max-height: none;
            bottom: calc(280 / 375 * 100vw);
            right: calc(15 / 375 * 100vw);
        }
    }

    .sec-product {
        width: 100%;
        margin: auto;
        padding: calc(60 / 375 * 100vw) calc(15 / 375 * 100vw);
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/product-bg_sp.png);
    }

    .sec-product__inner {
        width: 100%;
        margin: auto;
        padding: calc(24 / 375 * 100vw) calc(15 / 375 * 100vw);

        img {
            width: 100%;
        }
    }

    .sec-about {
        background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/bg-btm_sp.png);
        width: 100%;
        margin: auto;
        padding: calc(60 / 375 * 100vw) 0 calc(182 / 375 * 100vw);

        .link,
        .link.buy {
            display: block;
            width: calc(255 / 375 * 100vw);
            max-width: 100%;
            text-align: center;
            margin: auto;
            font-size: calc(18 / 375 * 100vw);
            padding: calc(8 / 375 * 100vw) 0;
            color: #fff;
        }

        .link {
            background-color: #000;
        }

        .link.buy {
            background-color: #3081c1;
            margin-top: calc(10 / 375 * 100vw);

            &::before {
                content: "";
                display: inline-block;
                width: calc(20 / 375 * 100vw);
                max-width: 100%;
                height: calc(20 / 375 * 100vw);
                max-height: none;
                margin-right: calc(15 / 375 * 100vw);
            }
        }
    }

    .sec-about__inner {
        width: 100%;
        padding: 0 calc(18 / 375 * 100vw);
        margin: auto;

        h3 {
            position: relative;
            font-size: calc(24 / 375 * 100vw);
            text-align: center;
            font-weight: bold;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                display: block;
                margin-right: 0;
                margin: auto;
                width: calc(6 / 375 * 100vw);
                height: calc(70 / 375 * 100vw);
                background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/left.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;


            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                display: block;
                margin-left: 0;
                margin: auto;
                width: calc(6 / 375 * 100vw);
                height: calc(70 / 375 * 100vw);
                background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/right.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;

            }
        }

        .notice {
            text-align: left;
            margin-top: calc(24 / 375 * 100vw);
            font-size: calc(15 / 375 * 100vw);
        }

        hr {
            margin: calc(40 / 375 * 100vw) 0;
            border-top: 5px dotted #000;
        }
    }

    .product-list {
        margin-top: calc(40 / 375 * 100vw);
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        gap: calc(16 / 375 * 100vw);

        li {
            width: 100%;
            max-width: 100%;
            background-color: #fff;
            padding: calc(24 / 375 * 100vw) calc(20 / 375 * 100vw);

            .product-img {
                position: relative;
                width: 100%;

                .item {
                    display: block;
                    width: calc(222 / 375 * 100vw);
                    max-width: 100%;
                    object-fit: contain;
                }

                .weight {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: calc(97.26 / 375 * 100vw);
                    max-width: 100%;
                    object-fit: contain;
                }
            }

            .ttl {
                margin-top: 0;
                font-size: calc(20 / 375 * 100vw);
                line-height: calc(32 / 375 * 100vw);
            }

            .txt {
                margin-top: calc(16 / 375 * 100vw);
                font-size: calc(16 / 375 * 100vw);
                line-height: calc(25 / 375 * 100vw);
                text-align: center;
            }

            .link-wrap {
                margin-top: calc(16 / 375 * 100vw);
            }
        }
    }

    .gear-list {
        margin-top: calc(40 / 375 * 100vw);

        li {
            flex-direction: column;
            width: 100%;
            border-radius: calc(20 / 375 * 100vw);
            margin-bottom: calc(40 / 375 * 100vw);
            padding: calc(30 / 375 * 100vw) calc(15 / 375 * 100vw) calc(30 / 375 * 100vw) calc(30 / 375 * 100vw);
            gap: calc(24 / 375 * 100vw);

            .gear-img {
                display: block;
                width: calc(347 / 375 * 100vw);
                max-width: 100%;
                padding-right: calc(15 / 375 * 100vw);
            }

            &:nth-child(even) {
                padding: calc(30 / 375 * 100vw) calc(15 / 375 * 100vw) calc(30 / 375 * 100vw) calc(30 / 375 * 100vw);
                flex-direction: column;
                gap: calc(24 / 375 * 100vw);
            }
        }

        .link-wrap {
            margin-top: calc(24 / 375 * 100vw);
        }
    }

    .gear-detail {
        width: 100%;

        .gear-ttl {
            display: flex;
            justify-content: center;
            align-items: center;


            .gear-text {
                .ttl {
                    white-space: nowrap;
                    text-align: left;
                    font-size: calc(20 / 375 * 100vw);
                    line-height: calc(32 / 375 * 100vw);
                }

                .txt {
                    margin-top: calc(8 / 375 * 100vw);
                    font-size: calc(18 / 375 * 100vw);
                    line-height: calc(27 / 375 * 100vw);
                    text-align: left;
                }
            }

            .sub-img {
                width: calc(85 / 375 * 100vw);
                max-width: 100%;
                object-fit: contain;
            }
        }
    }
}


.mountain-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    background: #000000;

    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.mountain-nav.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mountain-nav-wrap {
    overflow-x: auto;
}

.mountain-nav-inner {
    display: flex;
    justify-content: center;
    min-width: 1200px;
    border-top: 1px solid #808080;
}

.mountain-nav-link {
    display: flex;
    width: 400px;
    height: 65px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
    font-size: 16px;
    background: #000;
    border-top: 5px solid transparent;
    transition: border-top-color 0.3s ease;
    border-right: 1px solid #808080;

    &:last-child {
        border-right: 0;
    }
}

.mountain-nav-link.active {
    border-top-color: #CE5D2A;
}

/* sp */
@media (max-width: 768px) {
    .mountain-nav-inner {
        display: flex;
        justify-content: center;
        min-width: 100%;
        width: 100%;
    }

    .mountain-nav-link {
        border-top: calc(5 / 375 * 100vw) solid transparent;
        display: flex;
        width: calc(125 / 375 * 100vw);
        height: calc(65 / 375 * 100vw);
        font-size: calc(12 / 375 * 100vW);
    }
}

/* 動画対象のみクリック可能にする */
.spec-img.move {
    position: relative;
    cursor: pointer;
}

/* 再生マーク */
.spec-img.move::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(120 / 1600 * 100vw);
    max-width: 120px;
    height: calc(120 / 1600 * 100vw);
    max-height: 120px;
    background-image: url(/cms/product/dslr/om-omd/om/om5mk2/recommend/mountain/img/movie__parts.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



/* モーダル */
.movie-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.movie-modal.is-open {
    display: flex;
}

.movie-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.movie-modal__content {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
}

.movie-modal__close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    font-family: "noto-serif", serif;

}

.movie-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.movie-modal__frame iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

body.is-modal-open {
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .spec-img.move::before {
        width: 56px;
        height: 56px;
    }

    .spec-img.move::after {
        border-top-width: 11px;
        border-bottom-width: 11px;
        border-left-width: 17px;
    }

    .spec-img.move::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: calc(63 / 375 * 100vw);
        bottom: auto;
        left: calc(173 / 375 * 100vw);
        right: auto;
        margin: auto;
        width: calc(60 / 375 * 100vw);
        max-width: 100%;
        height: calc(60 / 375 * 100vw);
        max-height: none;
    }
}