@charset "UTF-8";
.grad{
		background: var(--grad-b_y);
}

/* ------------------------------------------------
        MV            
--------------------------------------------------- */
.section.mv .cont-inn{
	width:94%;
	max-width: 1360px;
	padding: 60px 0 26% 5.8%;
	background-image: url("../../../img/products/item01/top/mv.png");
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.page-ttl{
	font-size:4.6rem;
	color:var(--col-white)
}
.page-ttl span{
	background: var(--col-blue_green);
	padding: 0 0.3em;
	border-radius: 0.2em;
}
@media (max-width: 1200px) {
	.section.mv .cont-inn{
		padding: 60px 0 28% 0;
		background-size: 100%;
	}
}



@media (max-width: 768px) {
	.section.mv .cont-inn{
		padding: 18vw 0 0 0;
		padding-bottom:54vw;
		background-image: url("../../../img/products/item01/top/mv-top.png"),
						 url("../../../img/products/item01/top/mv-bottom.png");
		background-size: 35%, 100%;
		background-position:100% 43%,center 108%;
		/* background-position: right center; */
	}
    .page-ttl{
		font-size:5.8vw;
	}
}

/* ------------------------------------------------
		feature
--------------------------------------------------- */
.section.feature{
	width:100%;
	background:var(--col-white);
	padding: 100px 0;
	border-top-right-radius: 80px;
	border-top-left-radius: 80px;
}
@media (max-width: 768px) {
	.section.feature{
		padding: 8vw 0;
		border-top-right-radius: 8vw;
		border-top-left-radius: 8vw;

	}
}

/* ------------------------------------------------
		specification
--------------------------------------------------- */
.section.specification{
	width:100%;
	background:var(--col-white);
	padding: 40px 0 80px;
	border-bottom-right-radius: 80px;
	border-bottom-left-radius: 80px;
}
@media (max-width: 768px) {
	.section.specification{
		padding: 4vw 0 6vw;
		border-bottom-right-radius: 8vw;
		border-bottom-left-radius: 8vw;

	}
}

/* ------------------------------------------------
		case
--------------------------------------------------- */
.section.case{
	width:100%;
	padding: 90px 0 180px;
}

.case-wrap{
	display: flex;
	justify-content: space-between
}
.case-wrap .case-item{
	width:calc((100% - 40px) / 2);
	background: var(--col-white);
	border:2px solid var(--col-navy);
	border-radius:40px;
	padding: 30px;
	text-align: center;
	position: relative;
	box-shadow:var(--item_shadow-bg);
}
.case-item .item-name{
	position: absolute;
	top:-1.2em;
	left:0;
	right:0;
	margin: auto

}
.case-item .item-name span{
	color:var(--col-white);
	display: inline-block;
	padding: 0.4em 1em;
	border-radius: 2em;
	font-size:3.2rem;
	line-height: 1
}
.case-item:nth-child(1) .item-name span{
	background: var(--col-orange);
}
.case-item:nth-child(2) .item-name span{
	background: var(--col-navy);
}

.case-item .item-image{
	background: var(--col-gray); 
	border-radius:26px;
	padding: 30px 15px 15px
}
.case-item .item-image img{
	width:60%;
	margin: 0 auto
}
 .case-item .item-name{
	position: absolute;
	top:-1.2em;
	left:0;
	right:0;
	margin: auto

}
.case-item .item-txt{
	margin-top: 1em;
	font-size:1.8rem;
	padding: 0 70px
}
.case-item a{
	width:70px;
	height:70px;
	background: var(--col-blue_green);
	border-radius: 50%;	
	position: absolute;
	right:15px;
	bottom:30px;
	display: flex;
	align-items: center;
	justify-content: center
}
.case-item a img{
	width:40%
}
.case-item .item-txt span{
	display: inline-block
}
@media (max-width: 1200px) {
	.case-item .item-txt{
		padding: 0 6vw
	}
	.case-item a{
		width:6vw;
		height:6vw;
	}
}

@media (max-width: 768px) {
	.section.case{
		padding: 8vw 0 16vw;
	}

	.case-wrap{
		flex-wrap: wrap
	}
	.case-wrap .case-item{
		width:100%;
		border-radius:5vw;
		padding: 4vw;
		margin-top: 8vw;
		box-shadow:var(--item_shadow-bg_sp);
	}
	.case-item .item-name span{
		font-size:5.4vw;
	}

	.case-item .item-image{
		background: var(--col-gray); 
		border-radius:26px;
		padding: 4vw 2vw 2vw
	}
	.case-item .item-txt{
		font-size:3.6vw;
		padding-right: 1em
	}
	.case-item a{
		width:12vw;
		height:12vw;
		right:2vw;
		bottom:4vw;
	}
}