@charset "UTF-8";
/* CSS Document */

html {
	font-size: 62.5%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
}
_:lang(x)::-ms-backdrop, body {
    font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
} 

body {
	-webkit-text-size-adjust: 100%;
	font-size: 2.1rem;
	line-height: 1.3;
}

#cont{ max-width: 100%; background: #000; text-align: center; margin: 0; padding: 0;}
#cont h1{
	background: #D0101F;
	text-align: center;
	padding: 28px 0 29px;
	line-height: 0;
}

#cont h2{
	background: #D0101F;
	text-align: center;
	padding: 20px 0;
	line-height: 0;
}
#cont h3{text-align:center; color: #fff;}

#cont p, #cont li, #cont dd, #cont div{
	font-feature-settings: "palt";
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
}
#cont p, #cont li { color: #fff;}
#cont sup{ vertical-align: top; font-size: 50%; font-weight: normal; position: relative; top: 0.5em;}

#cont .notes{ font-size:0.9vw;}
#cont p.notes{ text-align: left;}
#cont img{
	max-width: 100%;
	height: auto;
}

#main{ margin: 0; padding: 0;}
#main img{ width: 100%; vertical-align:top;}
@media screen and (min-width : 640px ){   
	#cont br.pcbr { display:block;}
	#cont br.spbr { display:none;}
}
@media screen and ( max-width:640px) {
	#cont h1{padding: 24px 0;}
	#cont h2{padding: 20px 22%;}
	#cont img{ width: 100%;}
	#cont br.pcbr { display:none;}
	#cont br.spbr { display:block;}
	#cont .notes{ font-size: 2.03vw;}
}

/*///// LINE UP /////*/
.lineup{
	background: url("../img/silver_bk.png") no-repeat center;
	background-size: cover;
	text-align: center;
	padding: 60px 0;
}

#cont .lineup h2{
	background: transparent;
	margin: 0 auto;
	display: inline-block;
	border-bottom: 9px solid #000;
	padding: 5px 0 10px;
}

.lineup ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* LINE UP*/
.lineup ul.item{ margin: 40px calc(22% - 50px) 60px 22%;} 
.lineup ul.item li{
	display: flex;
	align-items: flex-start;
	text-align: left;
	width: 50%;
	box-sizing: border-box;
}
.lineup ul.item li:nth-child(2n+1){justify-content: flex-start;}
.lineup ul.item li:nth-child(2n){justify-content: flex-end;}

.lineup ul.item li:nth-child(n+3){ margin: 64px 0 0;}
.lineup ul.item li > div:first-child{ margin-right: 10px;}
.lineup .item span{ display: block; text-align: center; font-size: 1.3rem; color: #000; margin-top: 3px;}


/* SET LINE UP*/
.lineup ul.set{ margin: 20px 10% 60px;} 
.lineup ul.set > li { 
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	margin: 40px 0 0;
	width: 50%;
}

.lineup ul.set li ul { margin-right:10px;}
.lineup ul.set li ul li{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.lineup .setTxt{ text-align: left; width: 45%;}
.lineup dl{ margin-top: 10px;  align: left;}
.lineup dl dt{ color: #000; font-size:1.6rem; margin: 0 0 10px; }
.lineup .set dl dt{ margin: 0 0 10px;}
.lineup dl dd{ font-size:1.4rem;}
.lineup dl dd.price{ font-size:1.3rem;}
.lineup dl dd.marker{
	display: inline-block;
	line-height: 1.2;
}
.lineup dd.marker.item1{background:linear-gradient(transparent 70%, #D0101F 0%);}
.lineup dd.marker.item2{background:linear-gradient(transparent 70%, #327AFF 0%);}
.lineup dd.marker.item3{background:linear-gradient(transparent 70%, #FFFFFF 0%);}
.lineup dd.marker.item4{background:linear-gradient(transparent 70%, #808080 0%);}
#cont .lineup p{ color: #000; text-align: center;}

@media screen and ( max-width:640px) {
	.lineup{
		background: url("../img/silver_bk_sp.png") no-repeat center;
		background-size: cover;
		padding: 60px 15%; 
	}
	.lineup.below{ padding: 10px 15% 60px;}
	
	.lineup h2{
		border-bottom: 4px solid #000;
		padding: 5px 0 5px;
	}
	.lineup h2.itemTit{width: 33.12vw;}
	.lineup h2.setTit{width: 54.06vw;}
	/* LINE UP*/
	.lineup ul.item{ margin: 50px 0 60px;} 
	.lineup ul.item.slider > li{
		width: 100%;
	}
	.lineup ul.item li:nth-child(2n+1){justify-content: center;}
	.lineup ul.item li:nth-child(2n){justify-content: center;}

	.lineup ul.item li:nth-child(n+3){ margin: 0 0 0;}
	.lineup ul.item li > div:first-child{width: 34%;}
	.lineup ul.item li > div:last-child{width: 56%;}

	/* SET LINE UP*/
	.lineup ul.set{ margin: 50px 0 20px;} 
	.lineup ul.set > li {
		display: block;
		margin: 0 auto;
		max-width: 100%;
	}
	.lineup ul.set li ul { max-width: 70%; margin: 0 auto;}
	.lineup ul.set li ul li:first-child{ width: 28%; }
	.lineup ul.set li ul li:last-child{ width: 72%; }
	.lineup .setTxt{ text-align: left; width: 70%; margin: 20px auto 0;}
	.lineup dl{ margin-top: 20px;}
	.lineup dl dt{ font-size:3.43vw; letter-spacing: 0.1em;}
	.lineup dl dd{ font-size:2.96vw; white-space: nowrap;}
	.lineup dl dd.price{ font-size:2.5vw;}
}

.blackbtn{ margin: 10px 0 0; display: flex; align-items: flex-start; }
.blackbtn a{
	display: block;
	width: 178px; 
	padding: 8px 0;
	font-size: 1.5rem;
	text-decoration: none;
	color: #fff;
	background: #000;
	text-align: center;
	margin-right: 21px;
	transition: .2s;
}
.blackbtn a:after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 14px;
	margin: 0 0 0 10px;
	background: url("../img/arrow.svg") no-repeat;
	background-size: contain;
	vertical-align: middle;
}
.blackbtn a:hover{ background: #D0101F;}
.blackbtn span{ margin-top: -10px; width: 55px; height: 55px; line-height: 0; }

@media screen and ( max-width:640px) {
	.blackbtn{ margin: 10px 0 0;}
	.blackbtn a{width: 31.25vw;	padding: 14px 0; font-size: 2.65vw;}
	.blackbtn span{ margin-top: -15px; width: 75px; height: 75px; padding-bottom: 5px;}
}
/*///// CONCEPT /////*/
#concept{
	background: #000 url("../img/red_bk.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 0;
	padding-top: 78.81%;
	position: relative;

}
#concept h3{
	position: absolute;
	top: 7.4%;
	left: 0;
	right: 0;
	margin: auto;
}
#concept p{
	position: absolute;
	top: 24%;
	left: 50%;
	font-size:2.4rem;
	font-size: 1.66vw;
	line-height: 1.9;
	text-align: left;
}
#concept div{
	position: absolute;
	top: 22.7%;
	left: 0;
	width: 100%;
}
#concept img{ width: 100%; vertical-align:top;}

#concept p.notes{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 91%;
	text-align: center;
	font-size: 0.90vw;

}

@media screen and ( max-width:640px) {
	#concept{
		background: #000 url("../img/red_bk_sp.png") no-repeat bottom;
		background-size: contain;
		width: 100%;
		height: 100%;
		padding: 70px 0;
	}
	#concept h3{
		position: static;
		margin-bottom: 50px;
	}
	#concept p{
		position: static;
		font-size:3.28vw;
		line-height: 1.8;
		text-align: center;
	}
	#concept div{
		position: static;
		margin: 40px 0 30px;
	}
	#concept p.notes{
		position: static;
		text-align: left;
		font-size: 2.03vw;
		margin: 0 10%;
	}
}

/*///// INTRODUCTION /////*/
.intro1{
	position: relative;
	padding: 80px 0;
}
.intro1:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -40px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #000 transparent transparent;
	border-width: 40px 40px 0 40px;
	z-index: 50;
}

.intro1 h3{font-size:4.5rem; line-height: 1.4; letter-spacing: 0.1em;}
.intro1 h3 span.txt{font-size:3.4rem;}
.intro1 h3 span.underLine{ display: inline-block; border-bottom: 6px solid #fff;}
.intro1 > p{margin: 40px 0 60px; letter-spacing: 0.12em; line-height: 1.6;}
.intro1 .arrow{ width:50px; margin: 60px auto;}
.intro1 ul{
	display: flex;
	justify-content: center;
}
.intro1 ul li{
	text-align: center;
	position: relative;
	width: 36.4%;
	padding:40px;
	box-sizing: border-box;
}
.intro1 ul li:first-child{
	border: 4px solid #72849e;
	margin-right: 60px;
}
.intro1 ul li:last-child{
	border: 4px solid #a53b3f;
}
.intro1 ul li h4{
	font-size: 1.94vw;
	display: inline-block;
	white-space: nowrap;
	background: #000;
	color: #fff;
	position: absolute;
	top: -1.2em;
	left: 50%;
    transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	padding: 10px 20px;
}
.intro1 ul li p{margin: 20px 0 30px; font-size: 1.2rem; }
.intro1 ul li span{ display: inline-block; border: 1px solid #fff; width: 6em; margin-right: 5px; line-height: 1.2;}

@media screen and ( max-width:640px) {
	.intro1{padding: 70px 10% 60px;}
	.intro1:after{
		bottom: -5.5vw;
		border-width: 6vw 6vw 0 6vw;
	}
	.intro1 h3{font-size:6.25vw; line-height: 1.7;}
	.intro1 h3 span.txt{ display: inline-block; font-size:4.68vw; margin-bottom:10px;}
	.intro1 h3 span.underLine{ border-bottom: 0.93vw solid #fff; line-height: 1.2;}
	.intro1 p{ font-size: 3.43vw; margin: 20px 0 40px; line-height: 1.6; letter-spacing: 0; }
	.intro1 ul{
		flex-direction: column;
	}
	.intro1 ul li{
		width: 100%;
		margin: 0 auto 60px;
		padding: 40px 9.37vw;
	}
	.intro1 ul li:first-child{margin-right: 0;}
	.intro1 ul li h4{
		font-size: 4.37vw;
	}
	.intro1 .arrow{ width:8%; margin: 40px auto;}
	#cont .intro1 ul li p{ font-size: 2.18vw; }
	.product{ position: relative; display: block; width: 100%; margin-bottom: 20px;}
	.product p.product1{ position: absolute; top:55%; left:7%; line-height: 2;}
	.product p.product2{ position: absolute; top:55%; left:20%; line-height: 2;}
}

.intro2{
	background: #4d4d4d;
	position: relative;
	padding: 107px 0 40px;
}
.intro2:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -40px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #4d4d4d transparent transparent transparent;
	border-width: 40px 40px 0 40px;
	z-index: 50;
}
.intro2 .hukidashi{
	background: url("../img/sec2_img2.png") no-repeat 50% 50%;
	background-size: 20%;
	margin-top: 40px;
}
.intro2 ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 15%;
}
.intro2 ul li{
	width: 50%;
	margin-top: 30px;
	box-sizing: border-box;
}
.intro2 ul li:nth-child(2n){ padding-left: 20%; text-align: right;}
.intro2 ul li:nth-child(2n+1){ padding-right: 20%; text-align: left;}

@media screen and ( max-width:640px) {
	.intro2{padding: 80px 0 40px;}
	.intro2:after{
		bottom: -5.5vw;
		border-width: 6vw 6vw 0 6vw;
	}
	.intro2 .hukidashi{
		background-size: 30%;
		margin-top: 0;
	}
	.intro2 ul{
		display: flex;
		margin: 0 10%;
	}
	.intro2 ul li{
		width: 50%;
		margin-top: 10px;
		box-sizing: border-box;
	}
	.intro2 ul li:nth-child(2n){ padding-left: 20%; text-align: right;}
	.intro2 ul li:nth-child(2n+1){ padding-right: 20%; text-align: left;}
}


#intro3{ 
	background: url("../img/triangle_bk.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 0;
	padding-top: 67.08%;
	position: relative;
}
#intro3 img{ width:100%;}
#intro3 h3{
	position: absolute;
	left: 0;
	top: 12%;
	width: 100%;
}

#intro3 div{ width: 100%;}
#intro3 #smpimg{
	position: absolute;
	left: 0;
	top:25.8%;
}

#intro3 #point{
	position: absolute;
	left: 0;
	top:32.6%;
}

#intro3 p#pointtxt {
	position: absolute;
	left: 50%;
	top:73.1%;
	text-align: left;
	line-height: 1.8;
	margin-bottom: 20px;
	font-size: 2.08vw;
}

#intro3 p.notes{
	position: absolute;
	left: 50%;
	top:86%;
	font-size: 0.90vw;
	text-align: left;
	line-height: 1.8;
}


@media screen and ( max-width:640px) {
	#intro3{ 
		background: url("../img/triangle_bk_sp.png") no-repeat center;
		background-size: contain;
		padding-top: 136.5%;
	}
	#intro3 h3{
		top: 10.7%;
	}
	#intro3 #smpimg{
		top:30.5%;
	}
	#intro3 #point{
		top:34.7%;
	}
	#intro3 p#pointtxt{
		left: 45%;
		top: 65%;
		font-size: 3.59vw;
		line-height: 1.4;
	}
	#intro3 p.notes{
		left: 11%;
		top:84%;
		line-height: 1.5;
		font-size: 2.18vw;
		letter-spacing: 0.05em;
	}
}


/*///// POINT /////*/
.point{
	padding: 80px 0;
}

.point ul{
	border: 4px solid #D0101F;
	margin: 70px 10.9vw 0;
	box-sizing: border-box;
	overflow: hidden;
}
.point ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 4.16vw 40px 5vw;
	margin: 130px 0 0;
	position: relative;
}
.point ul li:nth-child(2n):after{
	position: absolute;
	content: '';
	left:0;
	bottom: -4px;
	width: 100%;
	height: 4px;
	background-color: #D0101F;  
	transform: skewY(-5deg);
	transform-origin: bottom right;
}
.point ul li:nth-child(2n+1):after{
	position: absolute;
	content: '';
	left:0;
	bottom: -4px;
	width: 100%;
	height: 4px;
	background-color: #D0101F;
	transform: skewY(5deg);
	transform-origin: bottom left;
}

.point ul li:first-child{ margin: 55px 0 0;}
.point ul li:nth-child(2){ padding: 0 0 0 5vw;}
.point ul li:last-child{ padding: 0 4.16vw 40px 5vw;}
.point ul li:nth-child(2n+1){
	flex-direction: row-reverse;
}
.point ul li:nth-child(2n){
	flex-direction: row;
}
.point .txtarea{ min-width: 33.68vw;}
.point ul li:nth-child(2n+1) .txtarea{ margin: 0 0 0 5%; padding: 0;}
.point ul li:nth-child(2n) .txtarea{ margin: 0 5% 0 0;}

.point .imgarea.mgt{ margin-top:25px;}
#cont .point h3{
	display: flex;
	align-items: center;
	font-size: 2.36vw;
	text-align: left;
	padding-bottom: 5px;
	border-bottom: 5px solid #D0101F;
	margin-bottom: 16px;
	white-space: nowrap;
	width: 100%;
}
.point h3 span{
	display: inline-block;
	margin-right: 5px;
	padding-top: 5px;
	min-width: 3em;
}
#cont .point h3 + p{
	font-size: 1.45vw;
	text-align: left;
	line-height: 1.8;
	white-space: nowrap;
}

#cont .point p.notes{ margin-top: 60px;}
#cont .point ul li:first-child p.notes{ margin-top: 150px;}
.point h3 sup{ margin-top: -2em;}

@media screen and ( max-width:640px) {
	.point{padding: 70px 0;}
	.point ul{
		border: 4px solid #D0101F;
		margin: 60px 7.5vw 0;
	}
	.point ul li{
		flex-direction: column;
		padding: 0 6.25vw 40px;
		margin: 100px 0 0;
	}

	.point ul li:first-child{ margin: 40px 0 0;}
	.point ul li:nth-child(2){ padding: 0 6.25vw 40px;}
	.point ul li:last-child{ padding: 0 6.25vw 40px;}
	.point ul li:nth-child(2n+1),
	.point ul li:nth-child(2n){
		flex-direction: column;
	}
	.point ul li:nth-child(2n):after{
		bottom: -4px;
		height: 4px;
	}
	.point ul li:nth-child(2n+1):after{
		bottom: -4px;
		height: 4px;
	}
	.point .txtarea{ margin: 0 0; width: 100%;}
	.point ul li:nth-child(2n+1) .txtarea{ margin: 0 0;}
	.point ul li:nth-child(2n) .txtarea{ margin: 0 0;}

	.point .imgarea{ margin: 0 0; width: 100%;}
	.point .imgarea.mgt{ margin-top:0;}

	#cont .point h3{
		font-size: 5vw;
		margin-bottom: 40px;
		padding-bottom: 15px;
		border-bottom: 4px solid #D0101F;
	}
	.point h3 span{
		width: 16%;
		margin-right: 10px;
		padding-top: 5px;
		min-width: 0;
	}
	#cont .point h3 + p{
		font-size: 3.12vw;
		line-height: 1.8;
		white-space: normal;
		margin-bottom: 40px;
	}

	#cont .point p.notes{ margin-top:0; margin-bottom: 30px;}
	#cont .point ul li:first-child p.notes{ margin-top:0; margin-bottom: 30px;}
}
/*///// TOTAL CARE /////*/
.care{
	background: url("../img/silver_bk2.png") no-repeat;
	background-size: cover;
	padding: 80px 0;
}

.care ul{
	display: flex;
	justify-content: center;
}

.care ul.carebox{ margin-top: 61px;}

.care ul.carebox > li{
	position: relative;
	display: block;
	margin-right: 40px;
	border: 4px solid #000;
	width: 23%;
}

.care ul.carebox > li:before {
    content:  '';
	position: absolute;
	top: 61%;
    left: 100%;
	margin-top: -34px;
	border: 34px solid transparent;
	border-left: 34px solid #000000;
}

.care ul.carebox > li:last-child { margin-right: 0;}
.care ul.carebox > li:last-child:before { content:  none;}
.care ul.carebox li ul li:first-child { margin-right: 20px;}
.care ul.carebox li dd.notes{ margin-top: 20px;}

.blackbox{
	background: #000;
	color: #fff;
	padding: 20px 0;
}
.blackbox h4{font-size: 1.73vw; line-height: 1.4;}
.blackbox h4 span{ display: block; font-size: 3.54vw; letter-spacing: 0.2em;}
.blackbox p{ font-size: 1.45vw; margin-top: 15px;}

dl dd{ color: #000; font-size:1.6rem; line-height: 1.6; }
.blackbox + div{padding:30px 0;}

@media screen and ( max-width:640px) {
	dl dd{ font-size:2.5vw; }
	.care{
		background: url("../img/silver_bk2_sp.png") no-repeat;
		padding: 80px 0 70px;
		background-size: cover; 
	}
	.care h3{ width: 70%; margin: 0 auto;}
	.care ul{ flex-direction: column;}
	.care ul.carebox{ margin-top: 50px;}
	.care ul.carebox > li{
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 60px;
		width: 60%;
	}
	.care ul.carebox > li:before {
		top: auto;
		bottom:-10.78vw;
		left: 50%;
		margin-left: -5.39vw;
		border: 5.39vw solid transparent;
		border-top: 5.39vw solid #000;
	}
	.care ul.carebox > li:last-child { margin-right: auto; margin-bottom: 0;}
	.care ul.carebox li ul {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		margin: 0 5%;
	}
	.care ul.carebox li ul li { width: 50%;}
	.care ul.carebox li ul li:first-child { margin-right: 0;}
	.care ul.carebox li ul li dt{ width: 70%; margin: 0 auto;}
	.care ul.carebox li dt{ width: 35%; margin: 0 auto;}
	.care ul.carebox li dd.notes{ font-size: 2.18vw; margin-top: 5px;}
	.blackbox{padding: 25px 0;}
	.blackbox h4{font-size: 4.21vw; line-height: 1.4;}
	.blackbox h4 span{ display: block; font-size: 7.96vw;}
	.blackbox p{font-size: 2.96vw; margin-top: 30px; }
	.blackbox + div{padding:20px 0;}
}

/*///// USER'S VOICE /////*/
.voice{
	text-align: center;
	padding: 60px 0 76px;
}
.voice h3{font-size: 4.5rem; letter-spacing: 0.12em;}
.voice ul{
	display: flex;
	justify-content: center;
	margin: 80px 0 60px;
}
.voice ul li{
	width: 13%;
	margin-right: 40px;
	text-align: center;
}
.voice ul li:last-child{ margin-right:0;}
#cont .voice p.notes{text-align: center;}

@media screen and ( max-width:640px) {
	.voice{
		padding: 60px 0;
		width: 90%;
		margin: 0 auto;
	}
	#cont .voice h3{font-size: 6.09vw; letter-spacing: 0.14em; line-height: 1.5;}
	.voice ul{margin: 35px 18% 35px;}
	.voice ul.voice_slider li{
		width: 100%;
		margin-right: 0;
	}
}

/*///// BANNER /////*/
.bnrarea{ padding: 40px 20%;}
.bnrarea ul{ display: flex; justify-content: center;}
.bnrarea ul li{ width: 100%; margin: 0 0 0 0;}
.bnrarea ul li img{ width: 100%;}

@media screen and ( max-width:640px) {
	.bnrarea{padding: 40px 0;}
	.bnrarea ul{ width: 81%; margin: 0 auto; flex-direction: column;}
}


/*// slider //*/
button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.slide-arrow{
	position: absolute;
	top: 0;
}
.lineup_prev{
	left: -8%;
	width: 7%;
	height: 100%;
	background: url("../img/arrow_prev.png") no-repeat center;
	background-size: contain;
	z-index: 100;
}
.lineup_next{
	right: -8%;
	width: 7%;
	height: 100%;
	background: url("../img/arrow_next.png") no-repeat center;
	background-size: contain;
	z-index: 100;
}
.voice_prev{
	left: -24%;
	width: 12%;
	height: 100%;
	background: url("../img/arrow_red_prev.png") no-repeat center;
	background-size: contain;
	z-index: 100;
}
.voice_next{
	right: -24% ;
	width: 12%;
	height: 100%;
	background: url("../img/arrow_red_next.png") no-repeat center;
	background-size: contain;
	z-index: 100;
}