@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : special.css
Description : 動画
===================================================================== */

.special {
    padding: calc(120 / 750 * 100%) 0 calc(300 / 750 * 100%);
}

.special h2 {
    margin-bottom: calc(40 / 650 * 100%);
}

.special_sns,
.special_test {
    margin-bottom: calc(40 / 650 * 100%);
}

.special_subttl {
    font-family: 'Noto Serif JP', serif;
    font-size: 4rem;
    text-align: center;
    margin-bottom: calc(30 / 650 * 100%);
    color: #9b200c;
    font-weight: 700;
}

.special_subttl::before, .special_subttl::after {
    content: '';
    position: absolute;
    background: url(../images/deco/bg_deco2.png) no-repeat center/contain;
    width: calc(39 / 650 * 100%);
    padding-top: calc(26 / 650 * 100%);
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.special_subttl::before {
    left: 0;
    margin-left: calc(10 / 650 * 100%);
}

.special_subttl::after {
    right: 0;
    margin-right: calc(10 / 650 * 100%);
}

/*
.special_bnr {
	background: url(../images/special/bg_special_bnr_sp.png) no-repeat center/contain;
	width: calc(666 / 650 * 100%);
	padding: calc(25 / 650 * 100%);
	margin: 0 0 calc(20 / 650 * 100%) calc(-8 / 650 * 100%);
}

.special_bnr a img {
	-o-object-fit: cover;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	-o-object-position: center;
	object-position: center;
	height: calc(618 / 750 * 100vw);
}
*/

.special_bnr {
    width: calc(666 / 650 * 100%);
    padding: calc(23 / 650 * 100%) calc(18 / 650 * 100%);
    background: url(../images/special/bg_special_bnr_pc.png) no-repeat center/contain;
    margin: 0 auto calc(15 / 1000 * 100%);
}

.special_bnr a img {
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    -o-object-position: center;
    object-position: center;
    height: calc(230 / 750 * 100vw);
}



@media screen and (min-width: 768px) {
    .special {
        padding: calc(120 / 1200 * 100%) 0 calc(220 / 1200 * 100%);
    }

    .special h2 {
        margin-bottom: calc(40 / 1000 * 100%);
    }

    .special_sns,
    .special_test {
        margin-bottom: calc(50 / 1000 * 100%);
    }

    .special_subttl {
        font-size: 3.4rem;
        margin-bottom: calc(15 / 1000 * 100%);
    }

    .special_subttl::before,
    .special_subttl::after {
        width: calc(24 / 800 * 100%);
        padding-top: calc(16 / 800 * 100%);
    }

    .special_subttl::before {
        margin-left: calc(160 / 800 * 100%);
    }

    .special_subttl::after {
        margin-right: calc(160 / 800 * 100%);
    }

    .special_bnr {
        width: calc(844 / 1000 * 100%);
        margin: 0 auto calc(15 / 1000 * 100%);
        padding: calc(16 / 650 * 100%) calc(15 / 650 * 100%);
    }

    .special_bnr a img {
        height: calc(293 / 1200 * 100vw);
    }

}

@media screen and (min-width: 1200px) {
    .special {
        padding: 120px 0 220px;
    }

    .special_bnr a img {
        height: 293px;
    }
}