@charset "utf-8";
body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #2F2F2F;
	margin: 0;
	padding: 0;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
}
.pc{ display: block; }
.sp{ display: none; }

#main {
	background-color: #000;
}
#kv {
	width: 100%;
	text-align: center;
}
	#kv h1 {
		margin: 0 auto;
        width: 100%;
        font-size: 0;
	}
	#kv h1 picture {
        width: 100%;
        position: relative;
	}
	#kv h1 img {
		width: 100%;
		height: auto;
	}

.adcopy {
	background-color: #DC732A;
	width: 100%;
	margin: 50px 0 0 0;
}
	.adcopy h2 {
		padding: 20px 30px;
		max-width: 1000px;
		margin: 0 auto;
	}

.content {
	background: -webkit-linear-gradient(left, #080808 0%, #313131 50%, #080808 100%);
	background: -o-linear-gradient(left, #080808 0%, #313131 50%, #080808 100%);
	background: linear-gradient(to right, #080808 0%, #313131 50%, #080808 100%);
	color: #fff;
	text-align: center;
}

	.content .contents__inner {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 0 50px 0;
	}
	.content .contents__inner.bnrarea {
		background-color: #EFEFEF;
		padding: 50px 0;
	}
	.content .contents__inner.bnrarea .bnr__inner {
		background-color: rgb(255 255 255 / 0.5);
		max-width: 1000px;
		margin: 0 auto;
		padding: 50px 0;
		z-index: 99;
		position: relative;
	}

		.content .contents__inner::before {
			position: absolute;
			content: "";
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			top: 0;
			left: 0;
			width: clamp(600px, 60vw, 1500px);
			aspect-ratio: 1500 / 480;
			background-image: url(../_images/content_bg_l.png);
		}
		.content .contents__inner::after {
			position: absolute;
			content: "";
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			bottom: 0;
			right: 0;
			width: clamp(800px, 76vw, 1900px);
			aspect-ratio: 1900 / 980;
			background-image: url(../_images/content_bg_r.png);
		}
		.content .contents__inner.rich::after {
			position: absolute;
			content: "";
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			bottom: 0;
			right: 0;
			width: clamp(1000px, 76vw, 2000px);
			aspect-ratio: 2080 / 1040;
			background-image: url(../_images/content_bg_r_rich.png);
		}
		.content .contents__inner.bnrarea::before {
			position: absolute;
			content: "";
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			top: 0;
			left: 0;
			width: clamp(600px, 60vw, 1800px);
			aspect-ratio: 1800 / 600;
			background-image: url(../_images/content_bg_l_inner.png);
		}
		.content .contents__inner.bnrarea::after {
			position: absolute;
			content: "";
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 0;
			bottom: 0;
			right: 0;
			width: clamp(1100px, 76vw, 2100px);
			aspect-ratio: 2100 / 1100;
			background-image: url(../_images/content_bg_r_inner.png);
		}
			.content .contents__inner.bnrarea .bnr__inner {

			}
				.content .contents__inner.bnrarea .bnr__inner h3 {
					margin: 0 0 30px 0;
				}
				/*.content .contents__inner.bnrarea .bnr__inner h3 img {
					max-height: 180px;
				}*/
				.content .contents__inner.bnrarea .bnr__inner p {
					margin: 0 0 10px 0;
					color: #000;
					font-size: 26px;
					font-weight: bold;
				}
				.content .contents__inner.bnrarea .bnr__inner .bnr {
					max-width: 690px;
					margin: 40px auto 0 auto;

				}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul {

					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li {
						margin: 0 0 25px 0;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li:last-child {
						margin: 0;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p {
						margin: 0;
						padding: 0;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li a:hover {
						text-decoration: none;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p:first-child {
						font-size: 0;
						line-height: 0;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p:last-child {
						display: flex;
						justify-content: center;
						align-items: center;
						
						padding: 10px 0;
						border-radius: 0 0 10px 10px;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24px;
						font-weight: bold;
						position: relative;
					}
						.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p:last-child::after {
							content: "▶︎";
							font-size: 16px;
							margin-left: 10px;
							transform: scale(0.6, 1);
						}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li img {
						width: 100%;
						border-radius: 10px 10px 0 0;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li img.brc {
						width: 100%;
						border-radius: 10px!important;
					}
					.content .contents__inner.bnrarea .bnr__inner .bnr ul li img.brcvpoint {
						width: 100%;
						border-radius: 10px!important;
						border: 2px solid #093f8d;
						box-sizing: border-box;
					}

		.content .contents__inner h3 {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0;
			position: relative;
		}
			.content .contents__inner h3.border {
				border-bottom: 1px solid #fff;
			}
			.content .contents__inner h3.w01 {
				max-width: 725px;
				margin: 0 auto 20px auto!important;
			}
			.content .contents__inner h3.w02 {
				max-width: 705px;
				margin: 0 auto 20px auto!important;
			}
			.content .contents__inner h3.w03 {
				max-width: 830px;
				margin: 0 auto 20px auto!important;
			}
			.content .contents__inner h3.w04 {
				max-width: 490px;
				margin: 0 auto 20px auto!important;
			}
			.content .contents__inner h3 img {
				width: 100%;
				display: block;
			}
			.content .contents__inner h3 .date {
				width: 60%;
				padding: 6px 0;
				background-color: #EC6C00;
				margin: 0 auto 10px auto;
			}
				.content .contents__inner h3 .date img {
					width: 250px;
					margin: 0 auto;
				}

		.content .contents__inner .goods {
			max-width: 1000px;
			margin: 0 auto;
			z-index: 99;
			position: relative;
		}
			.content .contents__inner .goods ul {
				display: -webkit-box;
				display: flex;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
			}
			.content .contents__inner .goods.special ul {
				display: block;
			}
			.content .contents__inner .goods ul::after {
				content:"";
				width: 30%;
			}
				.content .contents__inner .goods ul li {
					width: calc(96% / 3);
					display:flex;
					flex-direction:column;
					margin-bottom: 25px;
				}
				.content .contents__inner .goods.column4 ul li {
					width: calc(96% / 4);
				}
				.content .contents__inner .goods.special ul li {
					width: 80%;
					margin: 0 auto 30px auto;
				}
				.content .contents__inner .goods.special ul li:last-child {
					margin: 0 auto;
				}
				.content .contents__inner .goods.driverecorder ul {
					width: 80%;
					margin: 0 auto;
				}
				.content .contents__inner .goods.driverecorder ul li {
					width: calc(96% / 2);
					display:flex;
					flex-direction:column;
					margin-bottom: 25px;
				}
				.content .contents__inner .goods.driverecorder ul li p {
					line-height: 0;
				}
					.content .contents__inner .goods ul li a,
					.content .contents__inner .goods ul li a:link,
					.content .contents__inner .goods ul li a:visited,
					.content .contents__inner .goods ul li a:focus,
					.content .contents__inner .goods ul li a:active {
						text-decoration: none;
						filter: none;
					}
					.content .contents__inner .goods ul li a:hover {
						opacity: 1;
						transition: filter 0.1s ease;
						filter: brightness(1.05);
					}
					.content .contents__inner .goods ul li a:hover p.btn {
						background-color: #FE4F47;
					}
					.content .contents__inner .goods ul li p {
						display: flex;
						font-size: 0;
					}
					.content .contents__inner .goods ul li p img {
						width: 100%;
						height: auto;
					}
					.content .contents__inner .goods ul li p.btn {
						background-color: #E73A0D;
						color: #fff;
						padding: 10px;
						font-size: 18px;
						font-weight: bold;
						align-items: center;
						justify-content: space-between;
						position: relative;
					}
					.content .contents__inner .goods.special ul li p.btn {
						padding: 15px;
						font-size: 24px;
					}
						.content .contents__inner .goods ul li a p.btn::after {
							content: "";
							position: absolute;
							right: 15px;
							display: inline-block;
							width: 40px;
							height: 20px;
							background-image: url('../_images/btn_arrow02.svg');
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
							transition: .15s;
							top: 50%;
							transform: translateY(-50%);
						}
						.content .contents__inner .goods.special ul li p.btn::after {
							width: 65px;
							height: 33px;
						}
						.content .contents__inner .goods ul li a:hover p.btn::after {
							right: 10px;
						}

		.content .contents__inner .btn-products {
			z-index: 99;
			position: relative;
			margin: 15px 0 0 0;
		}
			.content .contents__inner .btn-products a {
				position: relative;
				max-width: 1000px;
				padding: 40px 0;
				margin: 0 auto;
				background-image: linear-gradient(90deg, #C69C53, #E9FACE 50%, #C69C53);
				font-size: 36px;
				letter-spacing: 0.1em;
				font-weight: bold;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.content .contents__inner .btn-products a:hover {
				text-decoration: none;
				opacity: 1;
				transition: filter 0.1s ease;
				filter: brightness(1.2);
			}
			.content .contents__inner .btn-products a::after {
				position: absolute;
				top: 50%;
				right: 35px;
				transform: translateY(-50%);
				content: "";
				width: 86px;
				height: 46px;
				background-image: url('../_images/btn_arrow01.svg');
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				pointer-events: none;
				transition: .2s;
			}
			.content .contents__inner .btn-products a:hover::after{
				right: 25px;
			}

		.content .contents__inner .caption {
			max-width: 1000px;
			font-size: 16px;
			line-height: 160%;
			padding: 10px 0 50px 0;
			margin: 0 auto;
			text-align: left;
			color: #fff;
			z-index: 99;
			position: relative;
		}
		.content .contents__inner p.txt {
			font-size: 22px;
			line-height: 44px;
			padding: 25px 0 80px 0;
			font-weight: bold;
		}

	.content .contents__inner .attention {
		margin: 30px 0 20px 0;
		font-size: 20px;
	}
	.content .contents__inner .btn-cta a {
		max-width: 800px;
		margin: 0 auto 10px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #fff;
		color: #fff;
		/*height: 90px;*/
		padding: 35px 0;
		background-color: #ff6e00;
		position: relative;
		border-radius: 10px;
		font-size: 28px;
		font-weight: 600;
		letter-spacing: 0.1em;
		z-index: 99;
	}
		.content .contents__inner .btn-cta a img {
			width: 60px;
			height: auto;
			margin-right: 25px;
			margin-left: 10px;
		}
		.content .contents__inner .btn-cta a:hover {
			text-decoration: none;
			/*transition: background-color .4s;
			-webkit-box-shadow: 3px 3px 0 #002368;
			box-shadow: 3px 3px 0 #002368;*/

			opacity: 1;
			transition: filter 0.1s ease;
			filter: brightness(1.2);
		}
		.content .contents__inner .btn-cta a::before {
			content: "▶︎";
			position: absolute;
			right: 25px;
			font-size: 20px;
			transform: scale(0.6, 1);
		}

	.content .separator {
		width: 100%;
		background-image: url(../_images/announce_bg.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		padding: 5px 0;
	}

	.content .btn-official {
		max-width: 1000px;
		margin: 0 auto;
		padding: 50px 0;
		text-align: center;
	}
		.content .btn-official a:hover {
			text-decoration: none;
			opacity: 1;
			transition: filter 0.1s ease;
			filter: brightness(1.2);
		}
		.content .btn-official img {
			width: 100%;
		}

	.content .btn-top a {
		position: relative;
		max-width: 860px;
		padding: 20px 0;
		margin: 30px auto 10px auto;
		background-image: linear-gradient(90deg, #C69C53, #E9FACE 50%, #C69C53);
		font-size: 30px;
		letter-spacing: 0.1em;
		font-weight: bold;
		color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
		.content .btn-top a:hover {
			text-decoration: none;
			opacity: 1;
			transition: filter 0.1s ease;
			filter: brightness(1.2);
		}
		.content .btn-top a::after {
			position: absolute;
			top: 50%;
			right: 35px;
			transform: translateY(-50%);
			content: "";
			width: 86px;
			height: 46px;
			background-image: url('../_images/btn_arrow01.svg');
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			pointer-events: none;
			transition: .2s;
		}
		.content .btn-top a:hover::after{
			right: 25px;
		}

@media only screen and (max-width: 1160px) {
	.adcopy {
		margin: 2.5rem 0 0 0;
	}
	.content .contents__sale {
		padding: 3rem 2rem 0 2rem;
	}
	.content .contents__inner {
		padding: 0 2rem 3rem 2rem;
	}
		.content .contents__inner .goods ul li p.btn {
			font-size: 0.9rem;
		}
		.content .contents__inner .goods.special ul li p.btn {
			padding: 0.7rem 1.2rem;
			font-size: 1.2rem;
		}
		.content .contents__inner .goods.special ul li p.btn::after {
			width: 3.2rem;
			height: 1.6rem;
		}
	
	.content .contents__inner.bnrarea {
		padding: 2rem 1rem 2rem 1rem;
	}
	.content .contents__inner.bnrarea .bnr__inner {
		padding: 2rem 1.5rem;
	}
	.content .contents__inner:last-child {
		padding: 2rem 1rem 2rem 1rem;
	}
		.content .contents__inner .bnr {
			margin: 0 auto 0.5rem auto;
		}
	
	.content .contents__inner .btn-products a {
		padding: 2rem 0;
		font-size: 1.8rem;
	}
		.content .contents__inner .btn-products a::after {
			right: 1.6rem;
			width: 4.3rem;
			height: 2.3rem;
		}

	.content .contents__inner .caption {
		font-size: 1rem;
		padding: .5rem 0 2rem 0;
	}
	
	.content .btn-official {
		margin: 0 auto;
		padding: 35px 0;
	}
	.content .separator {
		padding: 0.25rem 0;
	}
}


@media only screen and (max-width: 1000px) {
	.content .btn-official {
		margin: 0 20px;
	}
}

@media only screen and (max-width: 767px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	
	.adcopy {
		margin: 1.0rem 0 0 0;
	}
		.adcopy h2 {
			padding: 0.8rem 1.2rem;
		}
	
	.content .contents__inner {
		padding: 0 1rem 1rem 1rem;
	}
	.content .contents__inner.rich {
		padding: 0 1rem 1rem 1rem;
	}
	.content .contents__inner.rich::after {
		width: 22rem;
	}
		.content .contents__inner h3 {
			padding: .3rem 0 0 0;
		}
		.content .contents__inner h3.w01,
		.content .contents__inner h3.w02,
		.content .contents__inner h3.w03,
		.content .contents__inner h3.w04 {
			margin: 0 auto 0.4rem auto!important;
		}
		.content .contents__inner h3.w01 {
			width: 95%;
		}
		.content .contents__inner h3.w02 {
			width: 90%;
		}
		.content .contents__inner h3.w03 {
			width: 100%;
		}
		.content .contents__inner h3.w04 {
			width: 75%;
		}
	
		.content .contents__inner h3 .date {
			width: 80%;
			padding: 0.4rem 0;
			background-color: #EC6C00;
			margin: 0.2rem auto 0.7rem auto;
		}
			.content .contents__inner h3 .date img {
				width: 13rem;
				margin: 0 auto;
			}
	
		.content .contents__inner .goods ul {
			/*display: block;*/
		}
			.content .contents__inner .goods ul::after {
				display: none;
			}
			.content .contents__inner .goods.column4 ul li,
			.content .contents__inner .goods ul li {
				width: calc(97.5% / 2);
				margin-bottom: 0.7rem;
			}
			.content .contents__inner .goods.column1 ul li {
				width: calc(100% / 1);
				margin-bottom: 0.7rem;
			}
			.content .contents__inner .goods ul li:last-child {
				/*margin: 0 auto;*/
			}
			.content .contents__inner .goods ul li.last:last-child {
				width: calc(100% / 1);
			}
			.content .contents__inner .goods ul li p.btn {
				font-size: 0.8rem;
				padding: 0.5rem 0.5rem 0.35rem 0.5rem;
			}
				.content .contents__inner .goods ul li p.btn::after {
					width: 1.8rem;
					height: 0.9rem;
				}
	
	
		.content .contents__inner .goods ul li a:hover {
			opacity: 1;
			filter: brightness(1);
		}
		.content .contents__inner .goods ul li a:hover p.btn {
			background-color: #E73A0D;
		}
		.content .contents__inner .goods ul li a p.btn::after {
			width: 1.6rem;
			height: 0.9rem;
			right: 0.3rem;
		}
		.content .contents__inner .goods ul li a:hover p.btn::after {
			right: 0.3rem;
		}
	
		.content .contents__inner .goods.driverecorder ul {
			width: 100%;
		}
			.content .contents__inner .goods.driverecorder ul li {
				width: 100%;
				margin-bottom: 0.5rem;
			}
			.content .contents__inner .goods.driverecorder ul li:last-child {
				margin-bottom: 0;
			}
				.content .contents__inner .attention {
					margin: 1.2rem 0 0.5rem 0;
					font-size: 0.9rem;
				}
	
		.content .contents__inner .btn-cta {
			width: 100%;
			height: initial;
			margin: 0 auto;
			justify-content: left;
			font-size: 1.2rem;
			text-align: left;
		}
			.content .contents__inner .btn-cta a {
				height: initial;
				margin-top: 1rem;
				margin-bottom: 1.0rem;
				justify-content: left;
				font-size: 1rem;
				padding: 1.2rem 0;
				text-align: left;
				border-radius: 0.5rem;
			}
				.content .contents__inner .btn-cta a:hover {
					filter: brightness(1);
				}
				.content .contents__inner .btn-cta a::before {
					right: 1rem;
					font-size: 1rem;
				}
				.content .contents__inner .btn-cta a img {
					width: 3rem;
					margin-right: 1rem;
					margin-left: 1.5rem;
				}
	
	    .content .contents__inner .btn-products {
			margin: 0.4rem 0px 0px;
		}
			.content .contents__inner .btn-products a {
				padding: 1.5rem 0;
				font-size: 1.1rem;
				margin: 0.5rem 0;
			}
			.content .contents__inner .btn-products a:hover {
				filter: brightness(1);
			}
			.content .contents__inner .btn-products a::after {
				right: 0.4rem;
				width: 2.8rem;
				height: 0.9rem;
			}
			.content .contents__inner .btn-products a:hover::after{
				right: 0.4rem;
			}
	
		.content .contents__inner .goods.special ul li {
			width: 100%;
			margin: 0 auto 1rem auto;
		}
			.content .contents__inner .goods.special ul li p.btn {
				padding: 0.5rem 0.6rem;
				font-size: 0.9rem;
			}
			.content .contents__inner .goods.special ul li p.btn::after {
				width: 1.8rem;
				height: 1rem;
			}
		.content .contents__inner::before {
			width: 22rem;
			/*width: clamp(320px, 60vw, 800px);*/
		}
		.content .contents__inner::after {
			width: 22rem;
			/*width: clamp(340px, 60vw, 800px);*/
		}
		.content .contents__inner:last-child {
			padding: 1.5rem 1rem 5rem 1rem;
		}
	
		.content .contents__inner.bnrarea {
			padding: 1rem 1rem;
		}
		.content .contents__inner.bnrarea::before {
			width: 23rem;
		}
		.content .contents__inner.bnrarea::after {
			width: 22rem;
		}
		.content .contents__inner.bnrarea .bnr__inner {
			padding: 1rem;
		}
			.content .contents__inner.bnrarea .bnr__inner p {
				margin: 0;
				font-size: 1rem;
			}
			.content .contents__inner.bnrarea .bnr__inner .bnr {
				margin: 1.2rem auto 0 auto;
			}
			.content .contents__inner.bnrarea .bnr__inner .bnr ul li {
				margin: 0 0 0.5rem;
			}
			.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p:last-child {
				padding: 0.4rem 0;
				border-radius: 0 0 10px 10px;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 0.8rem;
				font-weight: bold;
				position: relative;
			}
			.content .contents__inner.bnrarea .bnr__inner .bnr ul li a p:last-child::after {
				font-size: 0.7rem;
				margin-left: .5rem;
			}
	
	.content .btn-top a {
		padding: 1.2rem 0;
        font-size: 1.15rem;
        margin: 0.5rem 0;
	}
		.content .btn-top a::after {
			right: 0.5rem;
			width: 3.0rem;
			height: 1.0rem;
		}
	.content .btn-top a:hover {
		filter: brightness(1);
	}
	.content .btn-official {
		width: auto;
		padding: 1.2rem 1rem;
		margin: 0 auto;
	}
	.content .contents__inner .caption {
		padding: .5rem 0 1rem 0;
		font-size: 0.76rem;
	}
}