@charset "utf-8";

/* HOME
========================================================= */

/* メイン画像
--------------------------------------------------------- */

.homeMain { background: #000; }

.homeMainWrap { height: clamp(400px, calc(50.17vw + 15px), 700px); display: flex; flex-wrap: wrap; }
.homeMainEx { width: 40%; display: flex; flex-wrap: wrap; align-items: center; background: #222; padding: 0 40px 0 clamp(30px, calc(3.47vw + 3px), 70px); box-sizing: border-box; }
.homeMainCopy { font-size: clamp(2.4rem, calc(2.61vw + -2px), 4.8rem); font-weight: 700; color: #fff; line-height: 2.5; margin-top: 70px; }
.homeMainCopyTxt { opacity: 0; transform: translate(0,30px); }
.homeMainCopyTxt:nth-child(1) { animation: fadeup 1s forwards .3s; }
.homeMainCopyTxt:nth-child(2) { animation: fadeup 1s forwards .7s; }
.homeMainCopyTxt:nth-child(3) { animation: fadeup 1s forwards 1s; }

@keyframes fadeup{
	0%   { opacity: 0; transform: translate(0, 30px); }
	100% { opacity: 1; transform: translate(0, 0px); }
}

.homeMainSlide { position: relative; color: #000; font-weight: 700; width: 60%; box-sizing: border-box; }


@media (max-width: 1000px) {
	.homeMainEx { width: 50%; }
	.homeMainSlide { width: 50%; }
}

.homeMainSlideItem { height: 100%; width: 100%; pointer-events: none; opacity: 0; transition: .25s; overflow: hidden; }
.homeMainSlideItem:nth-child(1) { background: url(/cms/cwc/product/coating/common/images/img_visual_01.webp) no-repeat center/cover; }
.homeMainSlideItem:nth-child(2) { background: url(/cms/cwc/product/coating/common/images/img_visual_02.webp) no-repeat right/cover; position: absolute; content: ""; inset: 0 auto auto 0; height: 100%; width: 100%; z-index: 2; opacity: 0; }
.homeMainSlideItem:nth-child(3) { background: url(/cms/cwc/product/coating/common/images/img_visual_03.webp) no-repeat center/cover; position: absolute; content: ""; inset: 0 auto auto 0; height: 100%; width: 100%; z-index: 3; opacity: 0; }
.homeMainSlideItem:nth-child(4) { background: url(/cms/cwc/product/coating/common/images/img_visual_05.webp) no-repeat center/cover; position: absolute; content: ""; inset: 0 auto auto 0; height: 100%; width: 100%; z-index: 4; opacity: 0; }
.homeMainSlideItem:nth-child(5) { background: url(/cms/cwc/product/coating/common/images/img_visual_04.webp) no-repeat center/cover; position: absolute; content: ""; inset: 0 auto auto 0; height: 100%; width: 100%; z-index: 5; opacity: 0; }
.homeMainSlideItem.active { pointer-events: all; opacity: 1; transition: 1s;}
.homeMainSildeName { position: relative; width: 100%; height: 100%; display: block; }
.homeMainSlideTxt { opacity: 0; font-size: clamp(4.8rem, calc(2.01vw + 33px), 6rem); }
.homeMainSlideItem:nth-child(1) .homeMainSlideTxt { position: absolute; content: ""; inset: auto clamp(30px,calc(10.03vw + -47px),90px) clamp(30px,calc(6.69vw + -21px),70px) auto; color: #fff; }
.homeMainSlideItem:nth-child(2) .homeMainSlideTxt { position: absolute; content: ""; inset: auto auto clamp(30px,calc(6.69vw + -21px),70px) clamp(30px,calc(5.02vw + -9px),60px); color: #000; }
.homeMainSlideItem:nth-child(3) .homeMainSlideTxt { position: absolute; content: ""; inset: auto clamp(30px,calc(10.03vw + -47px),90px) clamp(30px,calc(6.69vw + -21px),70px) auto; color: #fff; }
.homeMainSlideItem:nth-child(4) .homeMainSlideTxt { position: absolute; content: ""; inset: auto clamp(30px,calc(10.03vw + -47px),90px) clamp(30px,calc(6.69vw + -21px),70px) auto; color: #fff; }
.homeMainSlideItem:nth-child(5) .homeMainSlideTxt { position: absolute; content: ""; inset: auto auto clamp(30px,calc(6.69vw + -21px),70px) clamp(30px,calc(5.02vw + -9px),60px); color: #000; font-size: clamp(3.8rem, calc(1.91vw + 23px), 6rem); }
.homeMainSlideItem.active .homeMainSlideTxt { animation: fadeup 1s forwards .7s; }

.homeLead { margin: clamp(90px, calc(25.08vw + -103px), 240px) auto; }
.homeLeadTxt { font-size: clamp(1.8rem, calc(0.67vw + 13px), 2.2rem); line-height: 2; }

.homeChoiceType { position: relative; }
.homeChoiceTypeItem { position: relative; width: calc(50% + clamp(37.5px, calc(6.27vw + -11px), 75px)); height: clamp(300px, calc(50.17vw + -85px), 600px); display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.homeChoiceTypeItem:nth-child(1) { clip-path: polygon(0 0, 100% 0, calc(100% - clamp(75px,calc(12.54vw + -21px),150px)) 100%, 0% 100%); background: rgba(0, 0, 0, 0.2); background: url(/cms/cwc/product/coating/common/images/color_visual_01.webp) no-repeat center/cover;}
.homeChoiceTypeItem:nth-child(2) { position: absolute; content: ""; inset: 0 0 auto auto; clip-path: polygon(clamp(75px,calc(12.54vw + -21px),150px) 0, 100% 0, 100% 100%, 0% 100%); background: rgba(50, 0, 0, 0.2); background: url(/cms/cwc/product/coating/common/images/color_visual_00.webp) no-repeat center/cover; align-items: flex-end; }
.homeChoiceTypeLabel { position: relative; font-size: clamp(3.2rem, calc(3.68vw + 4px), 5.4rem); font-weight: 700; height: 135px; display: flex; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,.8); text-align: center; color: #000; width: 100%; justify-content: center; transition: .5s; }
.homeChoiceTypeLabelWrap { position: relative; }
.homeChoiceTypeLabelWrap::after { position: absolute; content: ""; inset: 0 clamp(-90px,calc(-4.34vw + -7px),-40px) 0 auto; margin: auto 0; width: 40px; height: 40px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); transition: .5s; }

.homeChoiceTypeLogo { width: 100%; background: rgba(0, 0, 0, .8); height: 135px; display: flex; flex-wrap: wrap; align-items: center; transition: .5s; }
.homeChoiceTypeLogoFig { position: relative; max-width: clamp(280px, calc(13.38vw + 177px), 360px); width: 100%; padding: 25px 0 10px; margin: 0 0 0 clamp(30px, calc(23.44vw + -150px), 300px); }
.homeChoiceTypeLogoFig::after { position: absolute; content: ""; inset: 0 clamp(-90px,calc(-4.34vw + -7px),-40px) 0 auto; margin: auto 0; width: 40px; height: 40px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); transition: .5s; }
.homeChoiceTypeTxt { box-sizing: border-box; position: absolute; content: ""; inset: -1px auto auto 0; width: calc(50vw + (600px * .268)); height: calc(100% + 2px); display: flex; flex-wrap: wrap; color: #fff; font-size: clamp(2rem, calc(3.01vw + -3px), 3.8rem); line-height: 2; opacity: 0; transition: .5s; }
.homeChoiceTypeItem:nth-child(1) .homeChoiceTypeTxt { align-items: center; padding-left: clamp(190px, calc(10.03vw + 113px), 250px); padding-right: clamp(40px,calc(18.39vw + -101px),150px); transform: translate(-100%, 0) skewX(-15deg); background: #fff; color: #000; }
.homeChoiceTypeItem:nth-child(2) .homeChoiceTypeTxt { justify-content: flex-end; align-items: center; padding-left: clamp(40px,calc(18.39vw + -101px),150px); padding-right: clamp(150px, calc(8.36vw + 86px), 200px); text-align: right; transform: translate(100%, 0) skewX(-15deg); background: #000; color: #fff; }
.active.homeChoiceTypeItem:nth-child(1) .homeChoiceTypeTxt { transform: translate(calc(0px - (600px * .25)), 0) skewX(-15deg); opacity: 1; }
.active.homeChoiceTypeItem:nth-child(2) .homeChoiceTypeTxt { transform: translate(0, 0) skewX(-15deg); opacity: 1; }
.homeChoiceTypeTxtWrap { transform: skewX(15deg); }


@media (min-width: 769px) {
	.homeChoiceTypeItem:hover .homeChoiceTypeLabel { height: 200px; background: rgba(255, 255, 255, 1); }
	.homeChoiceTypeItem:hover .homeChoiceTypeLogo { height: 200px; background: rgba(0, 0, 0, 1); }
	.homeChoiceTypeItem:hover .homeChoiceTypeLabelWrap::after { inset: 0 clamp(-110px,calc(-5.21vw + -10px),-50px) 0 auto; width: 30px; height: 30px; }
	.homeChoiceTypeItem:hover .homeChoiceTypeLogoFig::after { inset: 0 clamp(-110px,calc(-5.21vw + -10px),-50px) 0 auto; width: 30px; height: 30px; }
}

@media screen and (max-width: 767px) {
	.homeMainWrap { height: auto; display: flex; flex-direction: column; }
	.homeMainEx { width: 100%; align-items: center; padding: 0 clamp(20px, calc(2.24vw + 13px), 30px); order: 2; }
	.homeMainCopy { font-size: clamp(2rem, calc(1.12vw + 16px), 2.5rem); margin-top: 0; order: 1; line-height: 1.89; padding: 30px 0; }

	.homeMainSlide { font-size: clamp(3.2rem, calc(2.24vw + 25px), 4.2rem); width: 100%; height: 300px; }
	.homeMainSlideItem:nth-child(2) { background: url(/cms/cwc/product/coating/common/images/img_visual_02_sp.webp) no-repeat right/cover; }
	.homeMainSlideTxt { font-size: clamp(3.2rem, calc(2.24vw + 25px), 4.2rem); }
	.homeMainSlideItem:nth-child(1) .homeMainSlideTxt { inset: auto 25px 25px auto; }
	.homeMainSlideItem:nth-child(2) .homeMainSlideTxt { inset: auto auto 25px 25px; }
	.homeMainSlideItem:nth-child(3) .homeMainSlideTxt { inset: auto 25px 25px auto; }
	.homeMainSlideItem:nth-child(4) .homeMainSlideTxt { inset: auto 25px 25px auto; }
	.homeMainSlideItem:nth-child(5) .homeMainSlideTxt { inset: auto auto 25px 25px; font-size: clamp(3.2rem, calc(2.24vw + 25px), 4.2rem); }

	.homeLead { margin: 60px auto; }
	.homeLeadTxt { font-size: 1.7rem; line-height: 1.71; }

	.homeChoiceTypeItem { width: 100%; height: 270px; }
	.homeChoiceTypeItem:nth-child(1) { clip-path: none; }
	.homeChoiceTypeItem:nth-child(2) { clip-path: none; position: relative; }
	.homeChoiceTypeLabel { font-size: 2.6rem; height: 100px; }
	.homeChoiceTypeLabelWrap::after { inset: 0 -40px 0 auto; width: 20px; height: 20px; }
	.homeChoiceTypeLogo { height: 100px; }
	.homeChoiceTypeLogoFig { max-width: clamp(180px, calc(22.37vw + 108px), 280px); padding: clamp(15px, calc(2.24vw + 8px), 25px) 0 10px; margin: 0 auto; }
	.homeChoiceTypeLogoFig::after { inset: 0 -40px 0 auto; width: 20px; height: 20px; }
	.homeChoiceTypeItem:nth-child(1) .homeChoiceTypeTxt { padding-left: 190px; padding-right: 20px; transform: translate(-100%, 0) skewX(0deg); }
	.homeChoiceTypeItem:nth-child(2) .homeChoiceTypeTxt { padding-left: 40px; padding-right: 20px; transform: translate(100%, 0) skewX(0deg); }
	.active.homeChoiceTypeItem:nth-child(1) .homeChoiceTypeTxt { transform: translate(calc(0px - (600px * .25)), 0) skewX(0deg); opacity: 1; }
	.active.homeChoiceTypeItem:nth-child(2) .homeChoiceTypeTxt { transform: translate(0, 0) skewX(0deg); }
	.homeChoiceTypeTxtWrap { transform: skewX(0deg); }
	
	
	
	
}