@charset "UTF-8";@import url("./common.css");.h2Area{background-image: url(../img/about/h2_bg.jpg);@container ctnHtml (width <= 600px){background-image: url(../img/about/h2_bg_sp.jpg);}}section.about{position: relative;padding-bottom: 0;&::before{position: absolute;bottom: 0;left: 50%;content: "";width: 100%;height: 100%;background-image: url(../img/about/about_img.png);background-position: bottom center;background-repeat: no-repeat;background-size: 1440px;transform: translateX(-50%);pointer-events: none;z-index: 10;}.boxArea{position: relative;width: min(100%, var(--width-M));padding-bottom: 180px;background-image: url(../img/about/about_bg.jpg);background-position: center top;background-repeat: no-repeat;background-size: 100%;&::before{position: absolute;content: "";bottom: 0;left: 50%;width: 1px;height: 100px;border-left: 1px solid #FFF;transform: translateX(-50%);}.copyArea{position: relative;padding: 50px 100px 250px 200px;&::after{position: absolute;bottom: -50px;left: 5%;content: "";width: 450px;aspect-ratio: 3/1;background-image: url(../img/about/message_re.svg);background-position: center center;background-repeat: no-repeat;background-size: contain;mix-blend-mode: plus-lighter;z-index: 10;}p{font-size: 40px;font-weight: 600;line-height: 1.6;letter-spacing: 3px;color: var(--color-Design-Txt);writing-mode: vertical-rl;text-orientation: upright;}}.comArea{padding-top: 100px;p{color: #FFF;text-align: center;}}}@container ctnHtml (width <= 1000px){&::before{background-size: clamp(1100px, 85.21vw + 575.08px, 1440px);}.boxArea{width: 100%;padding-bottom: clamp(120px, 15.03vw + 27.36px, 180px);&::before{height: clamp(70px, 7.51vw + 23.68px, 100px);}.copyArea{padding-top: clamp(20px, 7.51vw - 26.31px, 50px);padding-bottom: clamp(150px, 25.06vw - 4.38px, 250px);padding-left: clamp(120px, 20.05vw - 3.50px, 200px);&::after{bottom: calc(clamp(25px, 6.26vw - 13.59px, 50px) * -1px);width: clamp(250px, 50.12vw - 58.77px, 450px);}p{font-size: clamp(26px, 3.50vw + 4.38px, 40px);letter-spacing: 2px;}}.comArea{padding-top: clamp(60px, 10.02vw - 1.75px, 100px);}}}@container ctnHtml (width <= 600px){&::before{position: absolute;bottom: 0;left: 0;content: "";width: 100%;height: 100%;background-image: url(../img/about/about_img_sp.png);background-position: bottom center;background-repeat: no-repeat;background-size: 100%;transform: translateX(0);pointer-events: none;z-index: 10;}.boxArea{padding-bottom: 18vh;background-size: 150%;&::before{height: 10vh;}.copyArea{padding: 3vh 0 12vh 30px;&::after{bottom: -7vh;left: 0;width: 70%;}p{font-size: 6cqw;line-height: 1.4;letter-spacing: 2px;}}.comArea{padding-top: 10vh;}}}}section.works{--works-workList-center-width: 300px;--works-workList-img-height: 500px;overflow: hidden;padding-top: 30px;padding-left: 0;padding-right: 0;.boxArea{width: 100%;.read{text-align: center;}.workList{display: grid;grid-template-columns: 1fr var(--works-workList-center-width) 1fr;grid-template-rows: 1fr auto;gap: 0;justify-content: flex-start;align-items: flex-start;width: 100%;margin-top: 100px;& + .workList{margin-top: 150px;}.work{grid-column: 2 / 4;grid-row: 1 / 2;overflow: hidden;height: calc(var(--works-workList-img-height) - 150px);padding-left: calc(var(--works-workList-center-width) + 70px);z-index: 1;.workCase{display: grid;grid-template-columns: auto auto;gap: 0 20px;align-items: flex-end;width: fit-content;font-size: 24px;line-height: 1.2;color: var(--color-Design-Red01);margin-top: 50px;span{&:first-child{margin-bottom: 20px;}&.workCaseNo{font-size: 70px;font-weight: 600;letter-spacing: 3px;color: var(--color-Design-Red01);-webkit-text-fill-color: var(--color-Design-Black01);-webkit-text-stroke: 1px var(--color-Design-Red01);paint-order: stroke;}}}.workTitle{font-size: 20px;letter-spacing: 1px;padding-left: 15px;border-left: 3px solid var(--color-Design-Red01);.workPlace{font-size: 26px;font-weight: 200;line-height: 1.4;}}}.workDetail{grid-column: 1 / 3;grid-row: 1 / 3;overflow: hidden;.workCopy{width: 100%;height: var(--works-workList-img-height);padding-top: 70px;background-position: center center;background-repeat: no-repeat;background-size: cover;p{font-size: 30px;font-weight: 400;line-height: 1.6;letter-spacing: 3px;writing-mode: vertical-rl;text-orientation: upright;}}.workItem{width: calc(var(--works-workList-center-width) + 400px);margin: 40px 0 0 auto;ul{margin-bottom: 40px;padding-bottom: 40px;border-bottom: 1px solid #FFF;}p{padding-right: 320px;}}}.workImg{grid-column: 2 / 4;grid-row: 2 / 3;overflow: hidden;width: 100%;height: var(--works-workList-img-height);z-index: 1;img{width: 100%;height: 100%;object-fit: cover;object-position: center;clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);}}&.reverse{.work{grid-column: 1 / 3;width: calc(var(--works-workList-center-width) + 400px);margin-left: auto;padding-left: unset;}.workDetail{grid-column: 2 / 4;.workItem{margin-left: 0;margin-right: auto;ul,p{padding-left: 350px;}p{padding-right: 0;}}}.workImg{grid-column: 1 / 3;img{clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);}}}}}@container ctnHtml (width <= 1300px){--works-workList-center-width: clamp(150px, 50vw - 357.5px, 300px);.boxArea{.workList{.work{padding-left: calc(var(--works-workList-center-width) + 50px);}.workDetail{.workItem{width: calc(var(--works-workList-center-width) + 350px);p{padding-right: clamp(230px, 33.33vw - 108.33px, 330px);}}}&.reverse{.work{width: calc(var(--works-workList-center-width) + 350px);}.workDetail{.workItem{ul,p{padding-left: clamp(200px, 50vw - 307.5px, 350px);}p{padding-right: 0;}}}}}}}@container ctnHtml (width <= 1000px){--works-workList-img-height: 400px;--works-workList-paddingSide: 15vw;.boxArea{.workList{grid-template-columns: 1fr;grid-template-rows: auto auto auto;gap: 50px 0;margin-top: 80px;& + .workList{margin-top: 100px;}.work{grid-column: 1 / 2;grid-row: 1 / 2;width: calc(100% - var(--works-workList-paddingSide));height: unset;padding-left: var(--works-workList-paddingSide);.workCase{gap: 0 15px;font-size: 20px;margin-top: 0;span{&:first-child{margin-bottom: 15px;}&.workCaseNo{font-size: 60px;letter-spacing: 2px;}}}.workTitle{font-size: 18px;.workPlace{font-size: 24px;font-weight: 400;}}}.workDetail{grid-column: 1 / 2;grid-row: 2 / 3;width: 100%;.workCopy{width: calc(100% - var(--works-workList-paddingSide));padding-top: 50px;p{font-size: 26px;letter-spacing: 2px;}}.workItem{width: calc(100% - var(--works-workList-paddingSide));margin-left: var(--works-workList-paddingSide);p{padding-right: var(--works-workList-paddingSide);}}}.workImg{grid-column: 1 / 2;grid-row: 3 / 4;width: 100%;height: calc(var(--works-workList-img-height) - 100px);padding-left: calc(var(--works-workList-paddingSide) - 5vw);img{clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);}}&.reverse{.work{grid-column: 1 / 2;grid-row: 1 / 2;width: calc(100% - var(--works-workList-paddingSide));margin-left: 0;padding-left: var(--works-workList-paddingSide);}.workDetail{grid-column: 1 / 2;grid-row: 2 / 3;width: 100%;.workCopy{margin-left: var(--works-workList-paddingSide);}.workItem{ul,p{padding-left: var(--works-workList-paddingSide);}}}.workImg{grid-column: 1 / 2;grid-row: 3 / 4;padding-left: 0;padding-right: calc(var(--works-workList-paddingSide) - 5vw);img{clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);}}}}}}@container ctnHtml (width <= 600px){--works-workList-img-height: 320px;--works-workList-paddingSide: 10vw;.boxArea{.workList{gap: 5vh 0;margin-top: 7vh;& + .workList{margin-top: 8vh;}.work{.workCase{gap: 0 10px;font-size: 18px;span{&:first-child{margin-bottom: 15px;}&.workCaseNo{font-size: 50px;}}}.workTitle{font-size: 16px;.workPlace{font-size: 20px;}}}.workDetail{.workCopy{padding-top: 30px;p{font-size: 24px;}}}.workImg{height: calc(var(--works-workList-img-height) - 120px);padding-left: var(--works-workList-paddingSide);}&.reverse{.workImg{padding-left: 0;padding-right: var(--works-workList-paddingSide);}}}}}}section.works{   .boxArea{.workList{&.case01{.workDetail{.workCopy{background-image: url(../img/about/work01_bg.jpg);p{margin-left: auto;margin-right: calc(var(--works-workList-center-width) + 200px);@container ctnHtml (width <= 1300px){margin-left: 130px;margin-right: auto;}@container ctnHtml (width <= 1000px){margin-left: 25vw;}@container ctnHtml (width <= 600px){margin-left: 15vw;}}}}}&.case02{.workDetail{.workCopy{background-image: url(../img/about/work02_bg.jpg);p{font-weight: 500;color: var(--color-Design-Txt);margin-left: calc(var(--works-workList-center-width) - 180px);margin-right: auto;@container ctnHtml (width <= 1300px){margin-left: calc(var(--works-workList-center-width) - clamp(80px, 33.33vw - 258.33px, 180px));}@container ctnHtml (width <= 1000px){margin-left: 15vw;}@container ctnHtml (width <= 600px){margin-left: 10vw;}}}}}&.case03{.workDetail{.workCopy{background-image: url(../img/about/work03_bg.jpg);p{margin-left: auto;margin-right: auto;}}}}}}}.workInfo{width: 100%;text-align: center;margin: var(--section-paddingTB-Pc) 0;padding: 70px 0;background-image: url(../img/about/info_bg.jpg);background-position: center center;background-repeat: no-repeat;background-size: cover;p{font-size: 24px;}@container ctnHtml (width <= 1000px){margin-top: var(--section-paddingTB-Tab);margin-bottom: var(--section-paddingTB-Tab);padding: 60px 0;p{font-size: 22px;}}@container ctnHtml (width <= 600px){font-size: 20px;margin-top: 0;margin-bottom: var(--section-paddingTB-Sp);padding: 5vh 0;p{font-size: 20px;}}}