@charset "UTF-8";@import url("./common.css");#loading{position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: grid;justify-content: center;align-items: center;width: 100vw;height: 100dvh;background-color: var(--color-Design-Blue01);z-index: 99999;&::before{position: relative;top: 0;bottom: 0;left: 0;right: 0;display: grid;justify-content: center;align-items: center;content: "河合電工";width: fit-content;height: 100px;font-size: 34px;font-weight: 600;line-height: 1.2;letter-spacing: 2px;color: #FFF;padding-left: 75px;background-image: url(../img/common/logo.svg);background-position: center left;background-repeat: no-repeat;background-size: 60px;animation-duration: 3s;animation-iteration-count: 1;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);animation-name: loadingAnim;animation-delay: 1s;z-index: 10;opacity: 0;}}@keyframes loadingAnim{0%{transform: translateY(15px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}}.mv{position: relative;clear: both;display: flow-root;overflow: hidden;width: 100%;height: 100vh;z-index: var(--zIndex-TopMain);.boxArea{display: grid;justify-content: flex-start;align-items: center;width: min(100%, var(--width-L));height: 100%;margin: 0 auto;padding: 0 clamp(50px, 2.86vw + 32.37px, 70px);.comArea{.mainCopy{font-size: clamp(60px, 7.51vw + 13.68px, 90px);line-height: 1.1;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}.readCom{font-size: clamp(20px, 0.85vw + 14.71px, 26px);font-weight: 600;line-height: 1.4;letter-spacing: 2px;margin-top: 40px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}}@container ctnHtml (width <= 600px){padding: 0 var(--contents-Sidemargin-Sp);.comArea{.mainCopy{font-size: 14.5cqw;}.readCom{font-size: 20px;letter-spacing: 1px;margin-top: 40px;}}}.scrollDown{position: absolute;right: 50%;bottom: 10%;writing-mode: vertical-rl;&::before{position: absolute;left: 0;right: 0;bottom: -75px;content: "";width: 1px;height: 60px;margin: auto;background-color: #FFF;animation: scrollDownAnim 2s infinite;}@container ctnHtml (width <= 1000px){bottom: 20%;}@container ctnHtml (width <= 600px){bottom: 20%;}}}.mainImg{position: absolute;left: 0;top: 0;width: 100%;height: 100vh;background-image: url(../img/home/main_bg01.jpg);background-position: center center;background-repeat: no-repeat;background-size: cover;opacity: 0;animation: mainImgAnim 21s linear 0s infinite;z-index: -1;&:nth-of-type(2){background-image: url(../img/home/main_bg02.jpg);animation: mainImgAnim 21s linear 7s infinite;}&:nth-of-type(3){background-image: url(../img/home/main_bg03.jpg);animation: mainImgAnim 21s linear 14s infinite;}@container ctnHtml (width <= 600px){background-image: url(../img/home/main_bg01_sp.jpg);&:nth-of-type(2){background-image: url(../img/home/main_bg02_sp.jpg);}&:nth-of-type(3){background-image: url(../img/home/main_bg03_sp.jpg);}}}}@keyframes scrollDownAnim{0%{transform: scale(1, 0);transform-origin: 0 0;}50%{transform: scale(1, 1);transform-origin: 0 0;}51%{transform: scale(1, 1);transform-origin: 0 100%;}100%{transform: scale(1, 0);transform-origin: 0 100%;}}@keyframes mainImgAnim{0%{opacity: 0;}10%{opacity: 1;}40%{opacity: 1;}50%{transform: scale(1.15) translateY(-15px);opacity: 0;}100%{opacity: 0;}}section.message{padding-right: 0;h2{padding-right: var(--contents-Sidemargin-Pc);}.boxArea{display: grid;grid-template-columns: auto min(45%, 600px);grid-template-rows: 1fr auto;gap: 100px 100px;justify-content: flex-start;align-items: flex-start;.messageCom{grid-column: 1 / 2;grid-row: 1 / 2;.catchCopyL{font-size: 50px;font-weight: 600;line-height: 1.4;letter-spacing: 4px;margin-bottom: 100px;}}.messageImg{position: relative;grid-column: 2 / 3;grid-row: 1 / 3;&::after{position: absolute;bottom: -50px;left: 50%;content: "";width: clamp(400px, 26.75vw + 128.16px, 480px);aspect-ratio: 10/3;background-image: url(../img/home/message_rap.svg);background-position: center center;background-repeat: no-repeat;background-size: contain;transform: translateX(-50%);mix-blend-mode: plus-lighter;}img{width: 100%;aspect-ratio: 10/13;object-fit: cover;object-position: center;}}.btArea{grid-column: 1 / 2;grid-row: 2 / 3;.btBase{margin-top: 0;margin-left: 0;}}}@container ctnHtml (width <= 1000px){padding-right: var(--contents-Sidemargin-Tab);h2{padding-right: 0;}.boxArea{grid-template-columns: 100%;grid-template-rows: auto auto auto;gap: 100px 0;.messageCom{grid-column: 1 / 2;grid-row: 1 / 2;.catchCopyL{font-size: clamp(40px, 2.50vw + 24.56px, 50px);letter-spacing: 2px;margin-bottom: 70px;}}.messageImg{grid-column: 1 / 2;grid-row: 2 / 3;img{display: block;width: 450px;margin: 0 auto;}}.btArea{grid-column: 1 / 2;grid-row: 3 / 4;.btBase{margin-top: 30px;margin-left: auto;}}}}@container ctnHtml (width <= 600px){padding-bottom: 0;.boxArea{gap: 5vh 0;.messageCom{.catchCopyL{font-size: 30px;letter-spacing: 2px;margin-bottom: 5vh;}}.messageImg{&::after{bottom: -30px;width: 240px;}img{width: 70%;}}.btArea{.btBase{margin-top: 5vh;}}}}}section.service{overflow: hidden;padding-left: 0;padding-right: 0;.boxArea{display: grid;grid-template-columns: 55% 45%;gap: 0;justify-content: center;align-items: flex-start;width: 100%;> div{display: grid;grid-template-columns: auto;grid-template-rows: auto auto;gap: 0;justify-content: center;align-items: center;padding: 40px 0;background-position: center center;background-repeat: no-repeat;background-size: cover;p{&:nth-of-type(1){width: fit-content;font-weight: 600;line-height: 1;margin: 0 auto}&:nth-of-type(2){width: fit-content;font-family: var(--font-family-NSJ);font-size: 30px;font-weight: 400;line-height: 1.8;span{padding: 0 10px 2px;}}}&.serviceKansen{width: 100%;aspect-ratio: 3/2;background-image: url(../img/home/service_kansen.jpg);p{&:nth-of-type(1){font-size: 11cqw;span{display: block;font-size: 6cqw;margin-top: 30px;}}&:nth-of-type(2){span{background-color: #424EC1;}}}}&.serviceDenki{margin-top: 20%;aspect-ratio: 10/7;background-image: url(../img/home/service_denki.jpg);p{&:nth-of-type(1){font-size: 7cqw;span{font-size: 4cqw;margin-top: 30px;}}&:nth-of-type(2){span{background-color: #C14C42;}}}}}}@container ctnHtml (width <= 1300px){.boxArea{> div{padding: 30px 0;p{&:nth-of-type(2){font-size: 2.2cqw;}}}}}@container ctnHtml (width <= 1000px){padding-bottom: 0;.boxArea{display: block;> div{&.serviceKansen{width: 70%;padding: 20px 0;p:nth-of-type(1){font-size: 15cqw;span{font-size: 8cqw;margin-top: 25px;}}}&.serviceDenki{width: 60%;margin-top: 0;margin-left: 40%;padding: 60px 0;p:nth-of-type(1){font-size: 10cqw;line-height: 0.8;span{font-size: 5cqw;margin-top: 30px;}}}}}}@container ctnHtml (width <= 600px){.boxArea{> div{p{&:nth-of-type(2){font-size: 4cqw;}}&.serviceKansen{width: 90%;aspect-ratio: 3/2.5;padding: 30px 0;p{&:nth-of-type(1){font-size: 20cqw;span{font-size: 12cqw;margin-top: 15px;}}}}&.serviceDenki{width: 80%;aspect-ratio: 10/8;margin-top: 0;margin-left: 20%;padding: 35px 0;p{&:nth-of-type(1){font-size: 12cqw;span{font-size: 7cqw;margin-top: 30px;}}}}}}}}section.works{margin-top: -200px;padding-top: calc(var(--section-paddingTB-Pc) + 100px);background-image: url(../img/home/works_bg.jpg);background-position: left top;background-repeat: no-repeat;background-size: contain;.boxArea{> p:nth-of-type(1){text-align: center;}.worksList{width: min(100%, var(--width-L));margin: 70px auto 0;ul{display: grid;grid-template-columns: repeat(3, 1fr);gap: 0 30px;justify-content: flex-start;align-items: center;width: 100%;li{display: grid;justify-content: flex-start;align-items: center;aspect-ratio: 1/1;padding: 0 40px;background-position: center center;background-repeat: no-repeat;background-size: cover;.worksItem{.worksCopy{font-size: 27px;font-weight: 600;line-height: 1.4;letter-spacing: 1px;}.worksName{position: relative;font-size: clamp(20px, 1.33vw + 6.40px, 24px);line-height: 1.4;margin-top: 110px;margin-bottom: 40px;&::after{position: absolute;content: "";bottom: -20px;left: 0;width: 140px;height: 0;border-top: 1px solid #FFF;}& + p{margin-top: 40px;}}}&:nth-of-type(1){background-image: url(../img/home/works01.jpg);}&:nth-of-type(2){background-image: url(../img/home/works02.jpg);}&:nth-of-type(3){background-image: url(../img/home/works03.jpg);.worksItem{.worksCopy{letter-spacing: -1px;}}}}}}}@container ctnHtml (width <= 1300px){.boxArea{.worksList{ul{li{padding: 0 clamp(20px, 6.68vw - 47.95px, 40px);.worksItem{.worksCopy{font-size: clamp(22px, 1.67vw + 5.01px, 27px);letter-spacing: 0;}.worksName{font-size: clamp(16px, 1.00vw + 9.82px, 20px);margin-top: clamp(70px, 16.72vw - 99.89px, 120px);margin-bottom: clamp(24px, 5.35vw - 30.36px, 40px);&::after{bottom: calc(-1 * clamp(12px, 2.67vw - 15.18px, 20px));width: 100px;}& + p{margin-top: clamp(20px, 6.68vw - 47.95px, 40px);}}}&:nth-of-type(3){.worksItem{.worksCopy{br{display: none;}}}}}}}}}@container ctnHtml (width <= 1000px){margin-top: 0;padding-top: var(--section-paddingTB-Tab);.boxArea{.worksList{width: min(100%, 640px);margin-top: 50px;ul{grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 20px 20px;li{padding: 0 clamp(20px, 2.50vw + 4.56px, 30px);.worksItem{.worksName{font-size: 18px;margin-top: 60px;}}}}}}}@container ctnHtml (width <= 600px){padding-top: var(--section-paddingTB-Sp);background-position: center center;background-size: cover;.boxArea{.worksList{width: 84%;margin-top: 4vh;ul{display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(3, 1fr);gap: 3vh 0;li{padding: 0 20px;.worksItem{.worksCopy{font-size: 5.5cqw;}&::after{bottom: -20px;width: 100px;}.worksName{font-size: 5cqw;margin-top: 8vh;}}&:nth-of-type(3){.worksItem{.worksCopy{br{display: block;}}}}}}}}}}section.about{position: relative;background-image: url(../img/home/about_bg.jpg);background-position: center top;background-repeat: no-repeat;background-size: cover;&::before{position: absolute;content: "";top: 0;left: 0;width: 100%;height: 100%;background-image: url(../img/home/about_img.png);background-position: center center;background-repeat: no-repeat;background-size: 1440px;pointer-events: none;z-index: 10;}&::after{position: absolute;content: "";bottom: -70px;left: 50%;width: 1px;height: 100px;border-left: 1px solid #FFF;transform: translateX(-50%);z-index: 20;}.boxArea{width: 100%;p{text-align: center;&.catchCopy{margin-bottom: 100px;}}}@container ctnHtml (width <= 1000px){&::before{background-size: 1300px;}&::after{bottom: -50px;height: 80px;}}@container ctnHtml (width <= 600px){background-image: url(../img/home/about_bg_sp.jpg);background-position: top center;background-repeat: no-repeat;background-size: cover;&::before{background: none;}&::after{bottom: -40px;height: 70px;}}}section.recruit{overflow: hidden;display: grid;grid-template-columns: 200px auto;gap: 0;justify-content: flex-start;align-items: flex-start;width: min(100%, 1400px);margin-left: auto;margin-right: auto;@container ctnHtml (1000px < width){h2{font-size: clamp(120px, 10.03vw + 18.06px, 150px);font-weight: 500;line-height: 1.2;letter-spacing: 2px;color: var(--color-Design-Red01);writing-mode: vertical-rl;text-orientation: sideways;}}.boxArea{display: grid;grid-template-columns: 65% 35%;gap: 0;justify-content: flex-start;align-items: center;width: min(100%, calc(var(--width-L) - 200px));.recruitCom{grid-column: 1 / 2;grid-row: 1 / 2;color: var(--color-Design-Txt);margin-right: -100px;padding: 50px 150px 60px 100px;background-color: #FFF;.catchCopy{margin-bottom: 30px;}.btArea{.btBase{margin-top: 50px;margin-left: 0;}}}.recruitImg{grid-column: 2 / 3;grid-row: 1 / 2;img{width: 100%;aspect-ratio: 1/1.2;object-fit: cover;object-position: center;}}}@container ctnHtml (width <= 1300px){grid-template-columns: clamp(150px, 16.72vw - 19.90px, 200px) auto;.boxArea{width: min(100%, calc(var(--width-L) - clamp(150px, 16.72vw - 19.90px, 200px)));.recruitCom{margin-right: -100px;padding-top: 50px;padding-bottom: 60px;padding-left: clamp(50px, 16.72vw - 119.89px, 100px);padding-right: clamp(120px, 10.03vw + 18.06px, 150px);br{display: none;}.btArea{.btBase{margin-top: 40px;}}}.recruitImg{img{aspect-ratio: 1/1.4;}}}}@container ctnHtml (width <= 1000px){display: block;.boxArea{align-items: flex-start;.recruitCom{padding-right: 150px;.catchCopy{margin-bottom: 4vh;}}.recruitImg{padding-top: 50px;}}}@container ctnHtml (width <= 600px){display: block;padding-left: 0;padding-right: 0;.boxArea{display: grid;grid-template-columns: 100%;grid-template-rows: auto auto;gap: 0;justify-content: flex-start;align-items: flex-start;width: 100%;.recruitCom{grid-column: 1 / 2;grid-row: 2 / 3;width: 90%;margin-top: -100px;padding: 150px 30px 50px;}.recruitImg{grid-column: 1 / 2;grid-row: 1 / 2;width: 60%;margin-left: auto;padding-top: 0;img{aspect-ratio: 1/1;}}}}}