@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("lib/ress.min.css");
/**
* home
*/
.p-ttl-en {
font-family: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 4rem;
font-weight: 300;
letter-spacing: 0.17rem;
}
.p-ttl-ja {
align-items: center;
color: #F39A00;
display: flex;
font-size: 2rem;
font-weight: 400;
gap: 2rem;
letter-spacing: 0;
}
@media screen and (max-width: 640px) {
.p-ttl-ja {
font-size: 1.6rem;
gap: 1.3rem;
padding: 0.2rem 0 0 0.2rem;
}
}
.p-ttl-ja:before {
background: #222222;
content: " ";
display: inline-block;
height: 1.8rem;
transform: rotate(30deg);
width: 1px;
}
.p-ttl-ja.u-font-white:before {
background: #fff;
}
.p-mv {
height: 68.9rem;
}
@media screen and (max-width: 640px) {
.p-mv {
height: auto;
}
}
.p-mv-img {
left: 1rem;
position: absolute;
top: 2.7rem;
width: 118rem;
}
@media screen and (max-width: 640px) {
.p-mv-img {
height: auto;
left: 0;
margin: 0 calc(50% - 50vw);
object-fit: contain;
top: -6rem;
width: 100vw;
}
}
@keyframes title-1-anime {
0% {
transform: translateX(-100%);
}
45%, to {
transform: translateX(0);
}
50%, to {
transform: translateX(0) scaleX(1);
}
to {
transform: translateX(0) scaleX(0);
}
}
@keyframes title-1-value-anime {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
61% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.p-mv .p-mv-ttl {
padding-top: 14rem;
}
@media screen and (max-width: 640px) {
.p-mv .p-mv-ttl {
padding-top: 2.1rem;
}
}
.p-mv .p-mv-ttl .mask {
display: block;
overflow: hidden;
padding-right: 1rem;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.p-mv .p-mv-ttl .mask:after {
background: #222222;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: content-box;
content: " ";
display: block;
height: 8.2rem;
right: 0;
top: 1.5rem;
position: absolute;
transform-origin: right;
transform: translateX(-100%);
width: 100%;
will-change: transform;
}
@media screen and (max-width: 640px) {
.p-mv .p-mv-ttl .mask:after {
height: 5.2rem;
top: 1rem;
}
}
.p-mv .p-mv-ttl strong {
display: inline-block;
opacity: 0;
position: relative;
font-family: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 8rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
}
@media screen and (max-width: 640px) {
.p-mv .p-mv-ttl strong {
font-size: 5rem;
}
}
.p-mv .p-mv-ttl.is-inview .mask {
margin: 1rem 0 0 -0.5rem;
}
.p-mv .p-mv-ttl.is-inview .mask strong {
animation-name: title-1-value-anime;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.p-mv .p-mv-ttl.is-inview .mask:after {
animation-name: title-1-anime;
animation-fill-mode: both;
animation-duration: 1.5s;
animation-timing-function: var(--ease-in-out-quart);
animation-delay: 0s;
z-index: 3;
}
.p-mv-ttl strong:first-letter {
color: #F39A00;
}
.p-mv-txt {
font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 2.5rem;
font-weight: 500;
letter-spacing: 0.11rem;
line-height: 2.04;
padding-top: 2.2rem;
}
@media screen and (max-width: 640px) {
.p-mv-txt {
font-size: 1.8rem;
line-height: 2.1111111111;
padding: 1.5rem 0 28rem;
}
}
.p-mv-scroll {
font-family: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
letter-spacing: 0.06rem;
padding-top: 5.3rem;
text-align: center;
writing-mode: vertical-rl;
}
@media screen and (max-width: 640px) {
.p-mv-scroll {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.6rem;
gap: 0.5rem;
justify-content: center;
writing-mode: unset;
}
}
.p-mv-scroll:after {
background: #222222;
content: " ";
display: inline-block;
height: 5.2rem;
margin: 1.2rem 0 0 -0.02rem;
width: 1px;
}
@media screen and (max-width: 640px) {
.p-mv-scroll:after {
height: 3.4rem;
margin: 0;
}
}
.p-about {
background: url('data:image/svg+xml;utf8,') no-repeat 0 3.6rem/174.57rem auto;
position: relative;
}
@media screen and (max-width: 640px) {
.p-about {
background: url('data:image/svg+xml;utf8,') no-repeat left 2rem top 24.8rem/51.845rem auto;
padding: 2.2rem 0 0;
}
}
.p-about-img {
left: 0;
position: absolute;
top: 9.3rem;
width: 62rem;
z-index: 2;
}
@media screen and (max-width: 640px) {
.p-about-img {
display: block;
height: 23.3rem;
position: unset;
width: 37rem;
}
.p-about-img img {
height: 100%;
object-fit: cover;
width: 100%;
}
}
.p-about-txt {
padding: 17.8rem 0 0 61.5rem;
}
@media screen and (max-width: 640px) {
.p-about-txt {
padding: 8.4rem 0 0;
}
}
.p-about .ttl {
font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.13rem;
line-height: 1.8333333333;
padding: 3.5rem 0 3.3rem;
}
@media screen and (max-width: 640px) {
.p-about .ttl {
font-size: 2.5rem;
line-height: 1.8;
padding: 2.5rem 0 1.8rem;
}
}
.p-about .txt:before {
background: #F5F5F2;
content: " ";
display: block;
height: 100%;
position: absolute;
margin: 0 calc(50% - 50vw - 31rem);
width: 100vw;
}
@media screen and (max-width: 640px) {
.p-about .txt:before {
display: none;
}
}
.p-about .txt p {
line-height: 2.5;
padding: 4.2rem 0 17.5rem;
position: relative;
}
@media screen and (max-width: 640px) {
.p-about .txt p {
background: #F5F5F2;
font-size: 1.6rem;
line-height: 2;
margin: 0 calc(50% - 50vw);
padding: 2.5rem 2rem 5rem;
width: 100vw;
}
}
@media screen and (max-width: 900px) {
.p-about .txt p br {
display: none;
}
}
.p-service {
background: url(../img/home_service_bg.webp) no-repeat left 0 bottom 17rem/49.5rem auto;
padding: 0 0 6.6rem 0;
}
@media screen and (max-width: 640px) {
.p-service {
background: none;
padding: 0 0 6rem;
}
}
.p-service-ttl {
width: 24.5rem;
}
.p-service-items {
display: flex;
flex-direction: column;
flex: 1;
gap: 2.8rem;
margin-right: calc(50% - 50vw);
}
@media screen and (max-width: 640px) {
.p-service-items {
padding: 6.6rem 0 0;
}
}
.p-service-item-inner {
align-items: start;
background-color: #fff;
display: flex;
gap: 7.8rem;
min-height: 36rem;
padding: 0 13rem 0 0;
}
@media screen and (max-width: 640px) {
.p-service-item-inner {
flex-direction: column;
gap: 2.7rem;
min-height: unset;
padding: 0 0 0 2rem;
}
}
.p-service-item-inner .num {
bottom: -1.8rem;
color: #F5F5F2;
font-family: "Oswald", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 14rem;
font-style: normal;
font-weight: 300;
line-height: 1;
position: absolute;
right: 0.3rem;
}
@media screen and (max-width: 640px) {
.p-service-item-inner .num {
display: none;
}
}
.p-service-item-inner img {
width: 36.733rem;
}
@media screen and (max-width: 640px) {
.p-service-item-inner img {
width: 35rem;
}
}
.p-service-item-inner div {
padding: 5.5rem 0;
}
@media screen and (max-width: 640px) {
.p-service-item-inner div {
padding: 0 0 4rem;
}
}
.p-service-item-inner div .ttl {
font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 0 0 1.7rem;
}
@media screen and (max-width: 640px) {
.p-service-item-inner div .ttl {
padding: 0 0 0.5rem;
}
}
.p-service-item-inner div .txt {
line-height: 2;
padding: 0 0 4rem;
}
@media screen and (max-width: 640px) {
.p-service-item-inner div .txt {
font-size: 1.6rem;
line-height: 2;
padding: 0 2rem 3.2rem 0;
}
}
.p-news {
padding: 10rem 0 13rem;
}
@media screen and (max-width: 640px) {
.p-news {
padding: 5.5rem 0 6rem;
}
}
.p-news .l-news-items {
padding-top: 5rem;
}
@media screen and (max-width: 640px) {
.p-news .l-news-items {
padding-top: 7.3rem;
}
}
.p-company {
background: #F5F5F2;
padding: 0 0 8.2rem;
}
@media screen and (max-width: 640px) {
.p-company {
background: #fff;
padding: 0 0 6rem;
}
}
.p-company .u-flex {
align-items: center;
gap: 8.9rem;
}
@media screen and (max-width: 640px) {
.p-company .u-flex {
align-items: start;
flex-direction: column;
gap: 0;
}
}
.p-company-img {
width: 53rem;
}
@media screen and (max-width: 640px) {
.p-company-img {
margin-left: calc(50% - 50vw);
width: 37rem;
}
}
.p-company-img img {
margin-bottom: -9.2rem;
position: relative;
top: -9.2rem;
}
@media screen and (max-width: 640px) {
.p-company-img img {
margin: 0;
top: 0;
}
}
.p-company-txt .ttl {
margin: 6rem 0 2.5rem;
}
@media screen and (max-width: 640px) {
.p-company-txt .ttl {
margin: 3rem 0 3.7rem;
}
}
.p-company-txt .txt {
padding: 0 0 7.5rem;
}
@media screen and (max-width: 640px) {
.p-company-txt .txt {
font-size: 1.6rem;
padding: 0 0 3rem;
}
}
.p-contact a {
align-items: center;
background: url(../img/home_contact_bg.webp) no-repeat 50% 50%/cover;
display: flex;
flex-direction: column;
justify-content: center;
height: 34.1rem;
transition: opacity 0.4s ease;
}
@media screen and (max-width: 640px) {
.p-contact a {
background: url(../img/home_contact_bg_sp.webp) no-repeat 50% 50%/cover;
height: 29.3rem;
}
}
.p-contact a:hover {
opacity: 0.5;
}
.p-contact .txt {
color: #fff;
padding: 3rem 0 0;
}/*# sourceMappingURL=home.css.map */