@charset "utf-8";

.cm_box{
	position: relative;
	overflow: hidden;
	/* margin-top: 60px; */
}
.cm_30sec{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 10;
}
.cm_30sec video{
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	margin: 0 auto;
}

.cm_box img{
	/* width: 100%; */
	/* height: auto; */
}

.cm_box img.slider_img{
	width: auto;
	/* max-height: 700px; */
	height: auto;
	max-width: 100%;
}

.cm_box img.img_text{
	width: unset;
	height: unset;
}

.cm_box .slider{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.slider{
	opacity: 0;
}

.slider.is-active{
	opacity: 1;
	transition: 0.5s;
}

.toppage header{
	opacity: 0;
	pointer-events: none;
	transition: 0.3s;
}
.toppage header.is-active{
	opacity: 1;
	pointer-events: all;
}

.unmute{
	position: absolute;
	width: 100px;
	height: 35px;
	right: 140px;
	top: 20px;
	/* background: #fff; */
	background-color: rgb(59 69 149 / 60%);
	border-radius: 100px;
	/* padding: 0.2em 1.5em; */
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid 1px #878ebf;
	line-height: 1;
	line-height: 1;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}
.unmute.is-none{
	display: none;
}

.new_bnr_list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1300px;
	margin: 0 auto 20px;
	padding: 0 2%;
}
.new_bnr_list::after{
	content: "";
	width: 24%;
	display: block;
	max-width: 310px;
}
.new_bnr_list li{
	max-width: 310px;
	width: 24%;
}
.new_bnr_list li img{
	width: 100%;
	height: auto;
}
.new_bnr_list li:nth-child(n + 5){
	margin-top: 1%;
}



.cm100vh{
	width: 100vw;
	height: 100svh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: 0.3s;
}
.cm100vh.is-none{
	opacity: 0;
	pointer-events: none;
}


@media screen and (max-width:1100px){
.cm_box{
	margin-top: 60px;
}
.slider .slide-item .img_text {
    top: 30%;
}
}

@media screen and (max-width:800px){
.new_bnr_list li {
    width: 32%;
}
.new_bnr_list li:nth-child(n + 4){
	margin-top: 2%;
}
}
@media screen and (max-width:650px){
.unmute {
    width: 80px;
    height: 25px;
    right: 100px;
    top: 10px;
}
}



@media screen and (max-width: 650px) {
.slider .slide-item .img_text {
    width: 300px;
}
}
@media screen and (max-width: 480px) {
.cm_box img.slider_img {
    height: 250px;
}
}