@charset 'UTF-8';

/* -------------------------------------------------------------
    TOP2
-------------------------------------------------------------- */
#top {
	background: var(--cmnbg);
}

#top .js-slidebg .trg::after {
	background: var(--cmnbg2);
}

.top-inner {
	width: 1300px;
	margin: 0 auto;
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.top-inner {
		width: 1200px;
	}
}

@media screen and (max-width: 768px) {
	.top-inner {
		width: 100%;
	}
}

/* -------------------------------------------------------------
    mv
-------------------------------------------------------------- */
.mv-area {
	position: relative;
}

.mv-area h1 {
	top: 200px;
	color: #fff;
	display: block;
	font-weight: 400;
	font-size: 1.2rem;
	right: 40px;
	position: absolute;
	z-index: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 0 1px;
}

.mv-catch {
	position: absolute;
	top: 63%;
	left: 40px;
	z-index: 3;
}
.mv-catch p{
	color: #fff;
	font-style: italic;
	font-weight: 800;
	font-size: 5.5rem;
	line-height: 1.5;
	letter-spacing: .08em;
}

@media screen and (max-width: 768px) {
	.mv-area h1 {
		color: #000;
		font-size: 1.0rem;
		top: 103px;
		width: 50%;
		right: 20px;
		line-height: 1.5;
		text-align: right;
	}
	
	.mv-catch {
		top: 64%;
		padding: 0 20px;
		left: auto;
		width: 100%;
	}

	.mv-catch p{
		font-size: 2.5rem;
		line-height: 1.7;
		letter-spacing: .05em;
	}

}

/* -------------------------------------------------------------
    top-section-ttl/top-section-catch
-------------------------------------------------------------- */
.top-section-ttl {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.top-section-ttl .en {
	font: italic 800 5.5rem /1 var(--en);
	letter-spacing: .03em;
}

.top-section-ttl .ja {
	font-size: 1.8rem;
	font-weight: 500;
	margin: 10px 0 0;
	letter-spacing: .05em;
}

.top-section-catch {
	font-size: 2.9rem;
	font-weight: bold;
	letter-spacing: .07em;
	line-height: 1.55;
}

@media screen and (max-width: 768px) {
	.top-section-ttl .en {
		font-size: 3.5rem;
		line-height: 1.2;
	}

	.top-section-ttl .ja {
		font-size: 1.6rem;
		margin: 0;
	}

	.top-section-catch {
		font-size: 2.4rem;
		letter-spacing: .05em;
		line-height: 1.66;
		text-align: left;
	}
}

/* -------------------------------------------------------------
    cmn-btn
-------------------------------------------------------------- */
.cmn-btn a {
	align-items: center;
	border: 1px solid var(--cmnblack);
	display: flex;
	min-width: 250px;
	padding: 20px 45px;
	position: relative;
	transition: 1s;
	overflow: hidden;
	height: 70px;
	justify-content: center;
}

@media screen and (min-width: 769px) {
	.cmn-btn a::before {
		background: var(--cv3);
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		transition: .7s;
		transform: translateX(-98%) translateY(-25%);
		clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
	}
}
.cmn-btn span {
	font-size: 1.7rem;
	font-weight: 500;
	position: relative;
	color: var(--cmnblack);
	transition: .5s;
	letter-spacing: .05em;
}

@media screen and (min-width: 769px) {
	.cmn-btn a:hover {
		border-color: var(--main2);
	}

	.cmn-btn a:hover:before {
		transform: translateX(-20%) translateY(-25%);
	}

	.cmn-btn a:hover span {
		color: #fff;
	}
}

@media screen and (max-width: 768px) {
	.cmn-btn a {
		padding: 20px 15px;
		min-width: unset;
	}

	.cmn-btn span {
		font-size: 1.6rem;
	}
}

/* -------------------------------------------------------------
    scroll-hint-icon
-------------------------------------------------------------- */
.scroll-hint-icon {
	z-index: 2;
}

@media screen and (min-width: 769px) {
	.scroll-hint-icon {
		display: none !important;
	}
}

/* -----------------------------------------------------------
    reason-area
-------------------------------------------------------------- */
.reason-area {
	position: relative;
	padding: 0 0 100px;
	background-image: linear-gradient(119deg, rgb(231, 244, 255), rgb(245, 251, 255));
}

.reason-area::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1600px;
	height: 1371px;
	content: '';
}

.reason-area.lazyloaded::before{
	background: url('../img/top-reason-bg.png') center/contain no-repeat;
}

.reason-area .reason-header {
	display: flex;
	gap: 70px;
	align-items: center;
}

.reason-area .top-section-catch {
	padding: 0 0 5px;
}

.reason-area .reason-contents {
	position: relative;
	padding-top: 25vw;
}

@media screen and (min-width: 769px) and (max-width: 1600px) {
	.reason-area .reason-contents {
		padding-top: 400px;
	}
}

.reason-area .reason-list {
	display: flex;
	margin: 65px 0 0;
	align-items: flex-start;
	gap: 5%;
}

.reason-area .reason-item {
	width: 30%;
}

.reason-area .reason-img {
	width: 100%;
	aspect-ratio: 390/370;
	overflow: hidden;
}

.reason-area .reason-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reason-area .reason-subcatch {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.55;
	position: relative;
	z-index: 2;
	width: fit-content;
	margin: -45px 0 0 0;
	padding: 18px 20px;
	letter-spacing: .1em;
	color: #fff;
	background: rgba(23, 23, 26, .98);
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.reason-area .reason-subcatch {
		font-size: 1.7rem;
	}
}

.reason-area .reason-catch {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 20px 0 0;
	letter-spacing: .09em;
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.reason-area .reason-catch {
		font-size: 2rem;
	}
}

.reason-area .reason-note {
	margin: 20px 0 0;
}

.reason-area .reason-note p {
	margin: 18px 0 0;
}

.reason-area .reason-note p:first-of-type {
	margin: 0;
}

.reason-area .reason-btn {
	display: flex;
	margin: 65px auto 0;
	gap: 30px;
	justify-content: center;
}

@media screen and (max-width: 768px) {
	.reason-area {
		padding: 0 0 60px;
	}

	.reason-area::before {
		width: 100%;
		height: auto;
		aspect-ratio: 750/1371;
		top: 40%;
	}
	
	.reason-area.lazyloaded::before {
		background: url('../img/top-reason-bg-sp.png') center/contain no-repeat;
	}

	.reason-area .reason-header {
		display: block;
	}

	.reason-area .top-section-catch {
		font-size: 2.3rem;
		margin: 20px 0 0;
		padding: 0;
	}

	.reason-area .reason-contents {
		padding-top: 60px;
	}

	.reason-area .reason-list {
		flex-direction: column;
		margin: 40px 0 0;
		gap: 40px;
	}

	.reason-area .reason-item {
		width: 100%;
		background: transparent;
	}

	.reason-area .reason-img {
		aspect-ratio: 335/220;
	}

	.reason-area .reason-subcatch {
		font-size: 1.6rem;
		width: calc(100% - 20px);
		margin: -45px auto 0 0;
		padding: 15px 15px 15px 18px;
	}

	.reason-area .reason-catch {
		font-size: 2.4rem;
		margin: 15px 0 0;
		padding: 0;
	}

	.reason-area .reason-note {
		display: none;
	}

	.reason-area .reason-btn {
		display: block;
		margin: 40px auto 0;
	}
	
	.reason-area .reason-btn .cmn-btn:last-child{
		margin-top: 25px;
	}
}

/* -----------------------------------------------------------
    service-area
-------------------------------------------------------------- */
.service-area {
	position: relative;
	display: flex;
	height: 450px;
	align-items: center;
}

.service-area .top-section-ttl .ja {
	margin: 5px 0 0;
}

.service-area .top-inner {
	position: relative;
	z-index: 3;
}

.service-area .top-section-catch {
	font-size: 2.8rem;
	line-height: 1.8;
	margin: 20px 0 0;
	letter-spacing: .1em;
}

.service-area .service-bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.service-area .service-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-area .service-bg-sp {
	display: none;
	width: 100%;
	aspect-ratio: 375/200;
}

.service-area .service-bg-sp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 768px) {
	.service-area {
		display: block;
		height: auto;
	}

	.service-area .top-section-ttl {
		flex-direction: column;
		color: #fff;
		align-items: flex-start;
		gap: 0;
	}
	
	.service-area .top-section-ttl .en {
		background-size: 100% 100%;
		background-image: url(../img/clip-grad-gray.jpg);
		-webkit-background-clip: text;
		color: transparent;
	}

	.service-area .top-inner {
		margin: 40px 0 0;
	}

	.service-area .top-section-catch {
		font-size: 2.4rem;
		line-height: 1.7;
		letter-spacing: .05em;
		color: #fff;
	}

	.service-area .service-bg {
		display: none;
	}

	.service-area .service-bg-sp {
		display: block;
	}
}

/* -----------------------------------------------------------
    imported-area
-------------------------------------------------------------- */
.imported-area {
	position: relative;
	padding: 0 0 110px;
	background: var(--cmnbg2);
}

.imported-area::before {
	position: absolute;
	top: 450px;
	right: 0;
	width: 1600px;
	height: 840px;
	content: '';
}

.imported-area.lazyloaded::before {
	background: url('../img/bg-grad-flash.jpg')right top/contain no-repeat;
}

.imported-area .imported-case-header {
	font-size: 3.5rem;
	font-weight: bold;
	margin: 80px 0 0;
	color: #fff;
}

.imported-area .imported-intro {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	padding: 110px 0 0;
	align-items: center;
	gap: 50px;
}

.imported-area .imported-intro-img {
	width: 35.38%;
	height: 440px;
	flex-shrink: 0;
	overflow: hidden;
}

.imported-area .imported-intro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imported-area .imported-intro-txt .title {
	font-size: 4.7rem;
	font-weight: 800;
	display: flex;
	letter-spacing: .02em;
	color: #fff;
	align-items: center;
	gap: 20px;
}

.imported-area .imported-intro-txt .icon img {
	width: 72px;
	aspect-ratio: 73/72;
}

.imported-area .imported-intro-txt .catch {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.7;
	margin: 35px 0 0;
	letter-spacing: .07em;
	color: #fff;
}

.imported-area .imported-intro-txt .note {
	margin: 30px 0 0;
	letter-spacing: .09em;
	color: var(--gray2);
}

.imported-area .cmn-btn {
	margin: 45px 0 0;
}

.imported-area .cmn-btn a {
	width: 280px;
	border-color: #fff;
}

.imported-area .cmn-btn span {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.imported-area {
		padding: 0 0 60px;
	}

	.imported-area::before {
		top: 53.33vw;
		right: 0;
		left: auto;
		width: 100%;
		height: auto;
		opacity: 1;
		aspect-ratio: 750/930;
	}
	
	.imported-area.lazyloaded::before {
		background: url('../img/bg-grad-flash-sp.jpg') right top/contain no-repeat;
	}

	.imported-area .imported-case-header {
		font-size: 2.5rem;
		margin: 50px 0 0;
	}

	.imported-area .imported-intro {
		flex-direction: column;
		padding: 55px 20px 0;
		gap: 25px;
	}

	.imported-area .imported-intro-img {
		width: 100%;
		height: auto;
		aspect-ratio: 335/220;
	}

	.imported-area .imported-intro-txt .title {
		font-size: 2.6rem;
		gap: 10px;
	}

	.imported-area .imported-intro-txt .icon img {
		width: 54px;
	}

	.imported-area .imported-intro-txt .catch {
		font-size: 2rem;
		line-height: 2;
		margin: 25px 0 0;
	}

	.imported-area .imported-intro-txt .note {
		padding: 22px 15px 23px;
		background: #262729;
	}

	.imported-area .cmn-btn {
		margin: 35px 0 0;
	}

	.imported-area .cmn-btn a {
		width: 100%;
	}
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.imported-area .imported-intro-txt .catch br {
		display: none;
	}
}

/* -----------------------------------------------------------
    category-area
-------------------------------------------------------------- */
.category-area .category-main .category-main-box:first-of-type {
	margin: 115px 0 0;
}

.category-area .category-main-box {
	position: relative;
	display: flex;
	margin: 100px 0 0;
	align-items: center;
	gap: 60px;
}

.category-area .category-main-box .cmn-btn {
	margin: 40px 0 0;
}

.category-area .category-main-box .cmn-btn a {
	width: 300px;
}

.category-area [data-topcate="replacement"] .icon img {
	width: 82px;
	aspect-ratio: 312/290;
}

.category-area [data-topcate="repair"] .icon img {
	width: 74px;
	aspect-ratio: 252/194;
}

.category-area [data-topcate="aiming"] .icon img {
	width: 88px;
	aspect-ratio: 330/290;
}

.category-area .category-main-img {
	width: 45%;
	height: 500px;
	flex-shrink: 0;
	overflow: hidden;
}

.category-area .category-main-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category-area .category-main-txt .title {
	font-size: 4.7rem;
	font-weight: 800;
	display: flex;
	letter-spacing: .02em;
	align-items: center;
	gap: 15px;
}

.category-area .category-main-txt .catch {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.6;
	margin: 30px 0 0;
	letter-spacing: .05em;
}

.category-area .category-main-txt .note {
	margin: 27px 0 0;
	letter-spacing: .09em;
}

@media screen and (max-width: 768px) {
	.category-area .category-main .category-main-box:first-of-type {
		margin: 0;
	}

	.category-area .category-main-box {
		flex-direction: column;
		margin: 60px 0 0;
		gap: 25px;
	}

	.category-area .category-main-box .cmn-btn {
		margin: 35px 0 0;
	}

	.category-area .category-main-box .cmn-btn a {
		width: 100%;
	}

	.category-area [data-topcate="replacement"] .icon img {
		width: 56px;
	}

	.category-area [data-topcate="repair"] .icon img {
		width: 45px;
	}

	.category-area [data-topcate="aiming"] .icon img {
		width: 58px;
	}

	.category-area .category-main-img {
		width: 100%;
		height: auto;
		aspect-ratio: 335/220;
	}

	.category-area .category-main-txt .title {
		font-size: 2.6rem;
		gap: 8px;
	}

	.category-area .category-main-txt .catch {
		font-size: 2rem;
		line-height: 1.8;
		margin: 20px 0 0;
	}

	.category-area .category-main-txt .note {
		margin: 20px 0 0;
	}
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.category-area .category-main-txt .catch br {
		display: none;
	}
}

/* -----------------------------------------------------------
    other-area
-------------------------------------------------------------- */
.other-area {
	margin: 60px 0 0;
}

.other-area .other-header {
	font-size: 4.5rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.other-area .other-list {
	display: flex;
	margin: 65px 0 0;
	flex-wrap: wrap;
	gap: 40px 30px;
}

.other-area .other-item {
	overflow: hidden;
	width: calc((100% - 60px) / 3);
	height: 150px;
}

.other-area .other-item a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: .5s;
}

.other-area .other-item a::before {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

.other-area .other-item a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	transition: .5s;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.other-area .other-item a:hover::after {
	transition: .5s;
	transform: scale(1.07);
}

.other-area [data-topother="polishing"] a::after {
	background-image: url(../img/top-polishing.jpg);
}

.other-area [data-topother="wr"] a::after {
	background-image: url(../img/top-wr.jpg);
}

.other-area [data-topother="bodycoating"] a::after {
	background-image: url(../img/top-bodycoating.jpg);
}

.other-area [data-topother="headlight"] a::after {
	background-image: url(../img/top-headlight.jpg);
}

.other-area [data-topother="electrical"] a::after {
	background-image: url(../img/top-electrical.jpg);
}

.other-area [data-topother="dentrepair"] a::after {
	background-image: url(../img/top-dentrepair.jpg);
}

.other-area .other-ttl {
	font-size: 2.1rem;
	font-weight: bold;
	line-height: 1.33;
	position: absolute;
	z-index: 3;
	right: 15px;
	bottom: 15px;
	letter-spacing: .04em;
	color: #fff;
}

.other-area .other-ttl span {
	position: relative;
	display: block;
	padding: 0 27px 0 0;
	text-align: right;
}

.other-area .other-ttl span::before {
	position: absolute;
	top: 50%;
	right: 0;
	width: 19px;
	height: 9px;
	content: '';
	transition: .5s;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(../img/cmn-arrow-white.svg) center/contain no-repeat;
}

@media screen and (max-width: 768px) {
	.other-area {
		margin: 40px 0 0;
	}

	.other-area .other-header {
		font-size: 2.5rem;
	}

	.other-area .other-list {
		flex-direction: column;
		margin: 40px 0 0;
		gap: 25px;
	}

	.other-area .other-item {
		width: 100%;
		height: auto;
		aspect-ratio: 335/120;
	}

	.other-area .other-item a::before {
		background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
	}

	.other-area [data-topother="electrical"] .other-ttl {
		font-size: 1.7rem;
	}

	.other-area .other-ttl {
		font-size: 1.8rem;
	}
}

/* -----------------------------------------------------------
    carfilm-area
-------------------------------------------------------------- */
.carfilm-area {
	display: flex;
	margin: 35px 0 0;
	align-items: center;
	gap: 40px;
}

.carfilm-area:hover .carfilm-img img {
	transition: .5s;
	transform: scale(1.07);
}

.carfilm-area .carfilm-img {
	overflow: hidden;
	width: 50%;
	flex-shrink: 0;
	aspect-ratio: 650/250;
}

.carfilm-area .carfilm-img img {
	width: 100%;
	height: 100%;
	transition: .5s;
	object-fit: cover;
}

.carfilm-area .carfilm-txt {
	position: relative;
	padding: 0 0 30px;
}

.carfilm-area .carfilm-txt::before {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 23px;
	height: 11px;
	content: '';
	background: url(../img/cmn-arrow-blue.svg) center/contain no-repeat;
}

.carfilm-area .carfilm-txt .title {
	font-size: 3.4rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--cmnblack);
}

.carfilm-area .carfilm-txt .catch {
	font-size: 2.1rem;
	font-weight: 500;
	line-height: 1.9;
	margin: 30px 0 0;
	letter-spacing: .03em;
	color: var(--cmnblack);
}

@media screen and (max-width: 768px) {
	.carfilm-area {
		flex-direction: column;
		margin: 15px 0 0;
		gap: 20px;
	}

	.carfilm-area .carfilm-img {
		width: 100%;
		height: auto;
	}

	.carfilm-area .carfilm-txt {
		padding: 0;
	}

	.carfilm-area .carfilm-txt::before {
		bottom: 6px;
		width: 20px;
		height: 9px;
	}

	.carfilm-area .carfilm-txt .title {
		font-size: 2.3rem;
	}

	.carfilm-area .carfilm-txt .catch {
		font-size: 1.6rem;
		line-height: 1.6;
		margin: 15px 0 0;
		letter-spacing: 0;
	}
}

/* -------------------------------------------------------------
    imported-case
-------------------------------------------------------------- */
.imported-case-wrap {
	margin: 45px 0 0;
}

.imported-case {
	display: flex;
	flex-wrap: wrap;
}

[data-topimported="row"] {
	margin: 50px 0 0;
}

[data-topimported="col"] .imported-case__item {
	width: calc(100% / 3);
}

[data-topimported="row"] .imported-case__item {
	width: calc(100% / 2);
}

.imported-case__item {
	flex-shrink: 0;
}

[data-topimported="col"] .imported-case__item:first-child {
	border-right: 2px solid var(--cmnbg2);
}

[data-topimported="col"] .imported-case__item:nth-child(2) {
	border: 2px solid var(--cmnbg2);
	border-width: 0 2px;
}

[data-topimported="col"] .imported-case__item:nth-child(3) {
	border-left: 2px solid var(--cmnbg2);
}

[data-topimported="row"] .imported-case__item:first-child {
	border-right: 2px solid var(--cmnbg2);
	border-bottom: 2px solid var(--cmnbg2);
}

[data-topimported="row"] .imported-case__item:nth-child(2) {
	border-left: 2px solid var(--cmnbg2);
	border-bottom: 2px solid var(--cmnbg2);
}

[data-topimported="row"] .imported-case__item:nth-child(3) {
	border-right: 2px solid var(--cmnbg2);
	border-top: 2px solid var(--cmnbg2);
}

[data-topimported="row"] .imported-case__item:nth-child(4) {
	border-left: 2px solid var(--cmnbg2);
	border-top: 2px solid var(--cmnbg2);
}

.imported-case__link {
	background: #39393f;
	display: block;
	padding: 40px;
	height: 100%;
	width: 100%;
}

@media screen and (min-width: 769px) {
	.imported-case__link:hover {
		background: #61646d;
	}
}

.imported-case__mfr {
	font-size: 2.5rem;
	font-weight: bold;
}

.imported-case__model {
	font-size: 1.7rem;
}

.imported-case__cate {
	align-items: center;
	display: flex;
	gap: 15px;
	color: #fff;
}

.imported-case__inner {
	margin: 20px 0 0;
}

[data-topimported="row"] .imported-case__inner {
	align-items: center;
	display: flex;
	gap: 20px;
}

[data-topimported="col"] .imported-case__img {
	aspect-ratio: 352/240;
	width: 100%;
	margin: 20px 0 0;
}

[data-topimported="row"] .imported-case__img {
	flex-shrink: 0;
	aspect-ratio: 280/180;
	width: 51%;
}

.imported-case__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imported-case__element {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 7px;
}

[data-topimported="col"] .imported-case__element {
	margin: 25px 0 0;
}

.imported-case .cmnwork-info-service {
	color: #cbd2e6;
	margin: 0 8px 10px 0;
	line-height: 1.3;
	width: 100%;
}

.imported-case__element li:not(.cmnwork-info-service) {
	align-items: center;
	background: #fff;
	color: var(--main);
	display: flex;
	gap: 3px;
	height: 30px;
	justify-content: center;
	padding: 0 15px;
	line-height: 1;
}

.imported-case .cmnwork-info-time {
	font-size: 1.8rem;
	font-weight: 500;
	padding-bottom: 2px !important;
}

.imported-case .cmnwork-info-money {
	font-size: 1.5rem;
}

.imported-case .cmnwork-info-money span {
	font: 700 2.3rem /1 var(--en);
}

.imported-case__option {
	color: #cbd2e6;
	align-items: center;
	display: flex;
	gap: 10px 15px;
	flex-wrap: wrap;
	margin: 25px 0 0;
}

.imported-case__option li::before {
	content: "#";
}

@media screen and (max-width: 768px) {
	.imported-case-wrap {
		display: flex;
		overflow-x: scroll;
		padding: 0 20px 10px 20px;
		gap: 15px;
		margin: 30px 0 0;
	}

	.imported-case {
		align-items: flex-start;
		gap: 15px;
	}

	.imported-case {
		flex-shrink: 0;
		margin: 0 !important;
	}

	.imported-case__item {
		flex-shrink: 0;
		width: 280px !important;
	}

	.imported-case__link {
		padding: 25px 20px;
	}

	.imported-case__cate {
		display: block;
	}

	.imported-case__inner {
		display: block !important;
	}

	.imported-case__mfr {
		font-size: 2rem;
	}

	.imported-case__model {
		font-size: 1.6rem;
		line-height: 1.5;
		margin: 10px 0 0;
	}

	.imported-case__img {
		aspect-ratio: 240/150 !important;
		margin: 20px 0 0 !important;
		width: 100% !important;
	}

	.imported-case .cmnwork-info-service {
		width: 100%;
		margin: 0 0 5px;
	}
	
	.imported-case .cmnwork-info-time {
		font-size: 1.7rem;
	}
	
	.imported-case .cmnwork-info-money {
		font-size: 1.4rem;
	}
	
	.imported-case .cmnwork-info-money span {
		font-size: 2.2rem;
	}

	.imported-case__option {
		font-size: 1.5rem;
		margin: 20px 0 0;
	}

	.imported-case__element {
		margin: 20px 0 0 !important;
		gap: 10px 7px;
	}
}

/* -----------------------------------------------------------
    works-area
-------------------------------------------------------------- */
.works-area {
	background: var(--cmnbg2);
	position: relative;
	padding: 100px 0;
	margin: 110px 0 0;
}

.works-area::before {
	content: "";
	width: 1600px;
	height: 420px;
	position: absolute;
	left: 0;
	top: 0;
}

.works-area.lazyloaded::before {
	background: url("../img/bg-grad-flash-l.jpg")center/contain no-repeat;
}

.works-area .top-section-ttl {
	color: #fff;
}

.works-area .top-section-ttl .ja {
	margin: 13px 0 0 !important;
}

.works-area .top-section-ttl .en {
	-webkit-background-clip: text;
	color: transparent;
}

.works-area.lazyloaded .top-section-ttl .en {
	background-image: url(../img/clip-grad-gray.jpg);
}

.works-area .works-header {
	display: flex;
	align-items: center;
	gap: 70px;
	position: relative;
}

#top .works-area .top-section-catch {
	color: #fff;
	letter-spacing: .09em;
}

.works-area .cmn-btn {
	align-items: center;
	display: flex;
	left: 0;
	position: absolute;
	right: 0;
	margin: 0 auto;
	text-align: right;
	top: 120px;
	justify-content: flex-end;
}

.works-area .cmn-btn a {
	border-color: #fff;
	width: 180px;
	height: 60px;
	min-width: unset;
	padding: 0;
}

.works-area .cmn-btn span {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.works-area {
		padding: 60px 0;
		margin: 60px 0 0;
	}

	.works-area::before {
		width: 100%;
		aspect-ratio: 750/930;
		right: 0;
		left: auto;
		height: auto;
	}
	
	.works-area.lazyloaded::before {
		background: url("../img/bg-grad-flash-l-sp.jpg")right top/100% auto no-repeat;
	}

	.works-area .works-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	#top .works-area .top-section-catch {
		letter-spacing: .05em;
		margin: 15px 0 0;
	}

	.works-area .cmn-btn {
		position: static;
		width: 100%;
		margin: 30px auto 0;
	}

	.works-area .cmn-btn a {
		width: 100%;
		height: 70px;
	}
}

/* -----------------------------------------------------------
    links-area
-------------------------------------------------------------- */
.links-area {
	padding: 120px 0 110px;
	background: var(--cmnbg3);
}

.links-area .links-inner {
	display: flex;
	gap: 60px;
}

.links-area .links-box {
	width: calc((100% - 60px) / 2);
}

.links-area .links-box-img {
	position: relative;
	width: 100%;
	aspect-ratio: 57/35;
	overflow: hidden;
}

.links-area .links-box-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (min-width: 769px) {
	.links-area .links-box:hover .links-box-img img {
		transform: scale(1.05);
		transition: .5s;
	}
}

.links-area .links-box-en {
	font: italic 800 4rem/1 var(--en);
	position: absolute;
	bottom: -6px;
	left: 0;
	color: var(--cmnbg3);
}

.links-area .links-box-ttl {
	color: var(--cmnblack);
	font-size: 4.2rem;
	font-weight: bold;
	position: relative;
	margin: 25px 0 0;
	letter-spacing: .02em;
}

.links-area .links-box-catch {
	color: var(--cmnblack);
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.8;
	position: relative;
	margin: 25px 0 0;
	letter-spacing: .07em;
}

.links-area .links-box-catch::before {
	position: absolute;
	top: 50%;
	right: 0;
	width: 22px;
	height: 10px;
	content: '';
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(../img/cmn-arrow-black-long.svg) center/contain no-repeat;
}

@media screen and (max-width: 768px) {
	.links-area {
		padding: 60px 0;
	}

	.links-area .links-inner {
		flex-direction: column;
		gap: 50px;
	}

	.links-area .links-box {
		width: 100%;
	}

	.links-area .links-box-en {
		font-size: 3rem;
	}

	.links-area .links-box-ttl {
		font-size: 2.8rem;
		position: relative;
		width: fit-content;
		margin: 15px 0 0;
		padding: 0 30px 0 0;
	}

	.links-area .links-box-ttl::before {
		position: absolute;
		top: 50%;
		right: 0;
		width: 20px;
		height: 9px;
		content: '';
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		background: url(../img/cmn-arrow-black-long.svg) center/contain no-repeat;
	}

	.links-area .links-box-catch {
		font-size: 1.7rem;
		margin: 17px 0 0;
	}

	.links-area .links-box-catch::before {
		display: none;
	}
}

/* -----------------------------------------------------------
   niwork-top__list
-------------------------------------------------------------- */
.niwork-top__scroll {
	margin: 60px 0 0;
	overflow: unset !important;
}

.works-area .splide__arrows {
	display: none !important;
}

.niwork-top__list {
	display: flex;
}

.niwork-top__item {
	flex-shrink: 0;
	position: relative;
	width: 700px !important;
}

.niwork-top__link {
	background: #39393f;
	display: block;
	padding: 40px;
	position: relative;
	height: 100%;
	width: 700px !important;
}

@media screen and (min-width: 769px) {
	.niwork-top__link:hover {
		background: #61646d;
	}
}

.niwork-top__link .cmnwork-option {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.niwork-top__link .cmnwork-option [class^="works-flag-"] {
	color: #bdc4d9;
}

.niwork-top__link .cmnwork-option [class^="works-flag-"]::before {
	content: "#";
}

.niwork-top__link .cmnwork-info-service {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	margin: 0 7px 0 0;
}

.niwork-top__link .cmnwork-info-car {
	align-items: center;
	display: flex;
	background: #cbd2e6;
	color: var(--cmnblack);
	font-size: 1.8rem;
	font-weight: 500;
	justify-content: center;
	padding: 8px 15px 10px;
	height: 34px;
}

.niwork-top__link .niwork-top__element {
	gap: 7px;
}

.niwork-top__link .niwork-top__element li:not(.cmnwork-info-car) {
	align-items: center;
	display: flex;
	background: #fff;
	color: var(--main);
	font-weight: 600;
	justify-content: center;
	height: 34px;
}

.niwork-top__link .cmnwork-info-time {
	font-size: 1.8rem;
	padding: 8px 15px 10px;
}

.niwork-top__link .cmnwork-info-money {
	font-size: 1.5rem;
	padding: 8px 15px;
}

.niwork-top__link .cmnwork-info-money span {
	font: 700 2.3rem /1 var(--en);
	margin: 0 2px 0 0;
}

.niwork-top__ttl {
	color: #fff;
	font-weight: bold;
	font-size: 2.3rem;
	line-height: 1.5;
	letter-spacing: .05em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 25px 0 0;
}

.multiple-image .niwork-top__thumb {
	margin: 40px 0 0;
}

.single-image .niwork-top__thumb {
	margin: 25px 0 0;
}

.niwork-top__element {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 25px 0 0;
}

.niwork-top__user {
	margin: 25px 0 0;
	gap: 20px;
}

.niwork-top__user li {
	color: #bdc4d9;
	font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
	.niwork-top__scroll {
		margin: 30px 0 0;
		overflow: auto !important;
	}

	.niwork-top__list {
		align-items: flex-start;
		padding: 0 0 15px 20px;
		display: flex !important;
	}

	.niwork-top__item {
		border: none;
		flex-shrink: 0;
		width: 325px !important;
	}

	.niwork-top__link::before {
		font-size: 1.6rem;
		bottom: 20px;
		right: 20px;
	}

	.niwork-top__link {
		padding: 25px 20px 30px;
		width: 300px !important;
	}

	.niwork-top__link .cmnwork-info-service {
		font-size: 1.7rem;
		display: block;
		line-height: 1.3;
	}

	.niwork-top__link .cmnwork-info-car {
		font-size: 1.5rem;
		padding: 6px 10px 7px;
	}
	
	.niwork-top__link .cmnwork-option {
		gap: 12px;
	}

	.niwork-top__link .cmnwork-option [class^="works-flag-"] {
		font-size: 1.4rem;
	}

	.niwork-top__link .cmnwork-info-time {
		font-size: 1.5rem;
		padding: 6px 10px 8px;
	}

	.niwork-top__link .cmnwork-info-money {
		font-size: 1.4rem;
		padding: 6px 10px 8px;
	}

	.niwork-top__link .cmnwork-info-money span {
		font-size: 1.8rem;
	}

	.niwork-top__ttl {
		font-size: 1.8rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: 60px;
		letter-spacing: .03em;
		white-space: wrap;
		margin: 15px 0 0;
	}

	.niwork-top__thumb {
		margin: 30px 0 0 !important;
	}

	[data-worktop_ba="before"] {
		width: 162px;
		height: 112px;
	}

	.niwork-top__link .niwork-top__element {
		gap: 7px;
		margin: 17px 0 0;
	}
}

/* -----------------------------------------------------------
    サムネイル1枚 & BeforeAfter画像の投稿が1枚だった場合
-------------------------------------------------------------- */
.single-image [data-worktop_ba="before"] {
	display: none;
}

.single-image [data-worktop_ba="after"] {
	aspect-ratio: 3/2;
	width: 70%;
	overflow: hidden;
	margin: 25px auto 0;
}

.single-image [data-worktop_ba="after"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
}

.single-image [data-worktop_ba="after"] .bacap {
	display: none;
}

@media screen and (max-width: 768px) {
	.single-image [data-worktop_ba="after"] {
		width: 100% !important;
	}
}

/* -----------------------------------------------------------
    BeforeAfter画像
-------------------------------------------------------------- */
.niwork-top__bawrap {
	align-items: center;
	display: flex;
	gap: 5%;
}

.niwork-top__ba {
	flex-shrink: 0;
}

[data-worktop_ba="before"] {
	width: 230px;
	height: 160px;
	position: relative;
}

.niwork-top__thumb.oneimg [data-worktop_ba="before"] {
	display: none;
}

[data-worktop_ba="after"] {
	width: 340px;
	height: 220px;
}

.niwork-top__link.single-image [data-worktop_ba="after"] {
	width: 400px;
	height: 236px;
	overflow: hidden;
	margin: 0 auto;
}

[data-worktop_ba="before"]::before {
	background: url(../img/cmnworks-arrow.svg)center/contain no-repeat;
	content: "";
	right: -24px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 17px;
	height: 24px;
}

.niwork-top__ba .baimgwrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.niwork-top__ba .baimg {
	aspect-ratio: 3/2;
	width: 100%;
	height: 100%;
}

.niwork-top__ba img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.niwork-top__ba .bacap {
	font-family: var(--en);
	font-style: italic;
	left: 0;
	top: calc(-1em + 2px);
	position: absolute;
}

[data-worktop_ba="before"] .bacap {
	color: var(--sub4);
	font-size: 1.6rem;
	font-weight: 500;
	position: absolute;
}

[data-worktop_ba="after"] .bacap {
	color: #aec1f8 !important;
	font-size: 2.1rem;
	font-weight: 800;
}

.niwork-top__thumb.oneimg [data-worktop_ba="after"] .bacap {
	display: none;
}

@media screen and (max-width: 768px) {
	.niwork-top__bawrap {
		align-items: flex-start;
		gap: 30px;
		flex-direction: column;
	}

	[data-worktop_ba="before"] {
		width: 162px;
		height: 112px;
	}

	[data-worktop_ba="after"] {
		aspect-ratio: 340/220;
		width: 100%;
		height: auto !important;
	}

	[data-worktop_ba="before"]::before {
		bottom: -28px;
		left: 50%;
		top: auto;
		-webkit-transform: translateX(-50%) rotate(270deg);
		transform: translateX(-50%) rotate(-270deg);
	}

	.niwork-top__ba .bacap {
		top: calc(-1em + 1px);
	}

	[data-worktop_ba="after"] .bacap {
		font-size: 1.6rem;
	}

	[data-worktop_ba="before"] .bacap {
		font-size: 1.4rem;
	}

	[data-worktop_ba="before"] .bacap {
		font-size: 1.2rem;
	}

	[data-worktop_ba="after"] .bacap {
		font-size: 1.5rem;
	}

	.niwork-top__user {
		margin: 15px 0 0;
		gap: 13px 20px;
	}

	.niwork-top__user .mfr {
		order: 1;
	}

	.niwork-top__user .model {
		order: 2;
	}

	.niwork-top__user .address {
		order: 3;
	}
}

/* -------------------------------------------------------------
    news-area   標準仕様
-------------------------------------------------------------- */
#top .ninews-area {
	background: #fff;
	padding: 110px 0;
}

#top .ninews-area .ninews-head {
	width: 200px;
}

#top .ninews-area .top-section-ttl .en {
	font-size: 4.5rem;
}

#top .ninews-area .top-section-ttl .ja {
	font-size: 1.7rem;
	margin: 15px 0 0;
}

#top .ninews-area .ninews-head-link {
	color: var(--cmnblack);
	padding: 0 20px 0 0;
	position: relative;
	margin: 30px 0 0;
}

#top .ninews-area .ninews-head-link:hover {
	color: var(--main);
}

#top .ninews-area .ninews-head-link::before {
	content: "";
	background: url(../img/cmn-arrow-black.svg) center/contain no-repeat;
	width: 14px;
	height: 10px;
	position: absolute;
	top: 53%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 0;
}

#top .ninews-area .ninews-list {
	width: calc(100% - 200px);
}

#top .ninews-area .ninews-date {
	color: var(--gray);
	font-size: 1.4rem;
	letter-spacing: .07em;
}

#top .ninews-area .ninews-cate-wrap .ninews-cate:nth-child(3n) {
	display: none;
}

#top .ninews-area .ninews-title {
	color: var(--cmnblack);
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: .07em;
	line-height: 1.5;
}

@media screen and (max-width: 768px) {
	#top .ninews-area {
		padding: 50px 0;
	}

	#top .ninews-area .ninews-head {
		margin: 0 0 20px;
		width: 100%;
	}

	#top .ninews-area .top-section-ttl .en {
		font-size: 3rem;
	}

	#top .ninews-area .top-section-ttl .ja {
		margin: 0;
	}

	#top .ninews-area .ninews-head-link {
		font-size: 1.5rem;
		margin: 0;
		padding: 0 20px 0 0;
	}

	#top .ninews-area .ninews-list {
		width: 100%;
	}

	#top .ninews-area .ninews-date {
		font-size: 1.3rem;
	}

	#top .ninews-area .ninews-title {
		font-size: 1.5rem;
	}
}

/* -------------------------------------------------------------
    news-area   ninews-no-thumb サムネイルなし
-------------------------------------------------------------- */
#top .ninews-no-thumb .ninews-title::before {
	content: "\f105";
	color: var(--link);
	font: 900 1.4rem/1 var(--webicon);
	right: 7px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#top .ninews-no-thumb .ninews-item a {
	border-bottom: 1px solid var(--border2);
	gap: 20px;
	padding: 30px 0 30px 10px;
}

#top .ninews-no-thumb .ninews-item a::before {
	background: var(--link);
	bottom: -1px;
	content: "";
	width: 0;
	height: 1px;
	position: absolute;
	left: 0;
	transition: .5s;
}

#top .ninews-no-thumb .ninews-item a:hover::before {
	width: 100%;
	transition: .5s;
}

#top .ninews-no-thumb .ninews-title {
	padding: 0 35px 0 0;
}

#top .ninews-no-thumb .ninews-item a:hover .ninews-title::before {
	right: 0;
}

#top .ninews-no-thumb .ninews-date {
	width: 95px;
}

#top .ninews-no-thumb .ninews-elements {
	gap: 20px;
}

@media screen and (max-width: 768px) {
	#top .ninews-no-thumb .ninews-item:not(:last-child) {
		margin-bottom: 18px;
	}

	#top .ninews-no-thumb .ninews-item a {
		padding: 0 0 18px;
	}

	#top .ninews-no-thumb .ninews-elements {
		gap: 10px;
	}

	#top .ninews-no-thumb .ninews-title {
		margin: 8px 0 0 0;
		padding: 0 18px 0 0;
	}

	#top .ninews-area .ninews-title::before {
		font-size: 1.3rem;
		top: 53%;
	}
}

/* -------------------------------------------------------------
    news-area   ninews-have-thumb サムネイルあり
-------------------------------------------------------------- */
#top .ninews-have-thumb.ninews-list {
	gap: 25px;
}

#top .ninews-have-thumb .ninews-item {
	flex-shrink: 0;
	width: calc((100% - 25px) / 2);
}

#top .ninews-have-thumb .ninews-item:nth-child(n+3) {
	display: none;
}

#top .ninews-have-thumb .ninews-item a {
	gap: 20px;
}

#top .ninews-thumb__img {
	width: 240px;
	height: 180px;
}

#top .ninews-thumb__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
}

#top .ninews-have-thumb a:hover img {
	transform: scale(1.07);
}

#top .ninews-thumb__elements {
	gap: 15px 10px;
	width: calc(100% - 240px - 20px);
}

#top .ninews-have-thumb .ninews-title {
	-webkit-line-clamp: 2;
	max-height: 50px;
}

#top .ninews-have-thumb .ninews-elements {
	gap: 12px;
}

@media screen and (max-width: 768px) {
	#top .ninews-have-thumb .ninews-item {
		width: 100%;
	}

	#top .ninews-have-thumb .ninews-item:nth-child(n+2) {
		display: none;
	}

	#top .ninews-have-thumb .ninews-item a {
		gap: 15px;
	}

	#top .ninews-thumb__img {
		width: 50%;
		height: auto;
		aspect-ratio: 1/.716;
	}

	#top .ninews-thumb__elements {
		gap: 10px 5px;
		width: calc(45% - 15px);
	}

	#top .ninews-have-thumb .ninews-elements {
		gap: 5px 10px;
	}
}