@charset "utf-8";
/* Toppage CSS */
.menu_list li:first-of-type a::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 1px;
    margin: auto;
    background: rgb(34,178,233);
    transform: scale(1.1, 1);
}

.mv{
	position: relative;
	top: 0;
	left: 0;
	height: 100vh;
}

.video_area{
	position: absolute;
    z-index: -1;/*最背面に設定*/
    top: 0;
    left: 0;
	right: 0;
    bottom:0;
    overflow: hidden;
}

.video{
    position: absolute;
    z-index: -1;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    width: 177.777vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height: 100%;
    min-width: 100%;
}

.play{
	position: absolute;
	bottom: 10%;
	display: flex;
	width: 70%;
	align-items: center;
	padding-left: 4%;
}

.play_icon{
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
}

.play_icon img{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 5px;
	right: 0;
	width: 50%;
	margin: auto;
}

.play_txt{
	padding-left: 10%;
	font-size: clamp(1.8rem, 3vw, 2rem);
	font-weight: 900;
	color: #fff;
}

.intro{
	margin: 20% 0;
}

.intro_ttl_wrap{
	width: 100%;
	padding: 10% 0;
	background: #001489;
}

.intro_ttl{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: clamp(2.5rem, 5vw, 6rem);
	color: #fff;
}

.intro img{
	width: 100%;
	height: 40vh;
	object-fit: cover;
}

.products{
	position: relative;
	margin: 20% auto;
}

.products_wrap{
	width: 98%;
	margin: 0 auto;
}

.products_box{
	width: 100%;
}

.products_ttl{
	margin-bottom: 20px;
	text-align: center;
	font-size: clamp(2.5rem, 4vw, 6rem);
	color: rgb(34,178,233);
}

.products_item_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.products_item{
	margin: 10% auto;
}

.products_txt{
	margin: 5% 0;
}

.item_ttl{
	display: block;
	text-align: center;
	font-size: clamp(2rem, 4vw, 3rem);
	color: #000;
}

.item_size{
	display: block;
	text-align: center;
	font-size: clamp(1.6rem, 4vw, 2rem);
	color: #6c757d;
}

.summary{
	position: relative;
	height: 40vh;
	padding: 5%;
	margin: 10% 0;
	background: url(../img/top_img.jpg) no-repeat;
	background-position: 50% center;
	background-size: cover;
	color: #fff;
}

.summary_box{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	width: 90%;
	padding: 3%;
	margin: 0 auto;
	background: rgba(0,0,0,.3);
	border-radius: 10px;
}

.summary_ttl{
	margin: 5% 0 15%;
	font-size: clamp(2.5rem, 4vw, 4rem);
}

.summary_txt{
	margin: auto;
	line-height: 1.5;
	font-size: clamp(1.8rem, 3vw, 2rem);
}


/*sp (最小320px)
*******************************************************/



/*tab (560px以上)
*******************************************************/
@media screen and (min-width: 560px) {

.mv{
	height: 65vh;
}

.intro{
	padding: 0;
}

.intro_ttl_wrap{
	padding: 5% 0;
}

.products_txt{
	 padding-top: 5%;
}

}


/*pc (1025px以上)
*******************************************************/
@media screen and (min-width: 1025px) {
.menu_list li:first-of-type a::before {
    height: 3px;
}

.mv{
	height: 100vh;
}

.video{
	left: 0;
	transform: translate(0, -50%);
}

.play{
	bottom: 7%;
	width: 20%;
}

.play_txt{
	position: absolute;
	right: 0;
}

.play:hover .play_icon{
	background: #fff;
}

.play:hover .play_txt{
	color: #fff;
}

.intro{
}

.intro_ttl_wrap{
	padding: 1% 0;
}

.intro_ttl{
	margin: 2% auto;
}

.intro_txt{
	width: 70%;
	line-height: 1.5;
}

.intro img{
	height: 60vh;
}

.products{
	width: 85%;
	padding-bottom: 5%;
	margin: 0 auto;
}

.products_txt{
	 padding-top: 5%;
}

.summary{
	height: 60vh;
	margin: 10% auto;
}

.summary_box{
	width: 40%;
	left: 5%;
	right: auto;
}


}