.p-homeHero { padding-top: var(--spc-28); overflow: hidden; @media (max-width: 1024px) { padding-top: 24svh; } @media (max-width: 600px) { padding-top: 16svh; }} .p-homeHero-content { max-width: 128rem; margin-inline: auto;} .p-homeHero-bottom { position: relative; margin-top: calc(var(--spc-48) * -1); overflow: hidden; @media (max-width: 768px) { margin-top: calc(var(--spc-24) * -1); } @media (max-width: 600px) { margin-top: -4vw; }} .p-homeHero-content-inner { --col-a: 436; --col-s: 322; --col-t: 302; --col-a-w: 436fr; --col-s-w: 322fr; --col-t-w: 302fr; --col-w: calc(var(--col-a) + var(--col-s) + var(--col-t)); --col-pd: calc(var(--col-a) - var(--col-t)); display: grid; justify-content: center; grid-template-columns: var(--col-a-w) var(--col-s-w) var(--col-t-w); padding-right: calc(var(--col-pd) * 100% / var(--col-w)); position: relative; z-index: 1; @media (max-width: 1024px) { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 7vw auto auto auto auto; padding-right: 0; } @media (max-width: 600px) { grid-template-rows: 32vw auto auto auto auto; } & > .g-title { display: flex; justify-content: center; grid-column: 2 / 3; grid-row: 2 / 3; position: relative; padding-bottom: var(--spc-16); white-space: nowrap; z-index: 1; @media (max-width: 1024px) { padding-bottom: 7vw; } } & > .g-a { grid-column: 1 / 2; grid-row: 2 / 5; transition: transform 0.3s ease-out; transform: scale(1); @media (max-width: 1024px) { padding-top: 9.6vw; } svg { @media (max-width: 1024px) { width: calc(var(--col-a) / var(--col-w) * 70vw); margin-left: auto; } @media (max-width: 600px) { width: calc(var(--col-a) / var(--col-w) * 120vw); } } } & > .g-s { grid-column: 2 / 3; grid-row: 3 / 6; transition: transform 0.3s ease-out; transform: scale(1); svg { @media (max-width: 1024px) { width: calc(var(--col-s) / var(--col-w) * 70vw); margin-inline: auto; } @media (max-width: 600px) { width: calc(var(--col-s) / var(--col-w) * 120vw); } } } & > .g-t { grid-column: 3 / 4; grid-row: 1 / 4; transition: transform 0.3s ease-out; transform: scale(1); svg { @media (max-width: 1024px) { width: calc(var(--col-t) / var(--col-w) * 70vw); } @media (max-width: 600px) { width: calc(var(--col-t) / var(--col-w) * 120vw); transform: translateX(-10vw); } } }} .p-homeHero__subTitle + .p-homeHero__title { margin-top: var(--spc-2);} .p-homeHero__title { font-size: clamp(var(--fs-3xl-sp), 8vw, var(--fs-3xl));} .p-homeHero__images { display: flex; gap: var(--spc-2); width: max-content; animation: slideLeft 40s linear infinite; & > ul { display: flex; gap: var(--spc-2); & > li { width: 12.8rem; flex-shrink: 0; @media (max-width: 1024px) { width: 9.6rem; } } } &:first-child > ul { transform: translateX(-6.4rem); } & + .p-homeHero__images { margin-top: var(--spc-2); animation: slideLeft 36s linear infinite; }} @keyframes slideLeft { 0% { transform: translateX(-6.4rem); } 100% { transform: translateX(calc(-50% - 6.4rem)); }} .p-homeAboutus { position: relative; padding-block: var(--spc-40) 0; z-index: 1;} .p-homeAboutus-head + .p-homeAboutus-content { margin-top: var(--spc-12);} .p-homeAboutus-head-inner * { text-align: center;} .p-homeAboutus-content { padding-block: var(--spc-16); background-size: cover; background-position: center; background-repeat: no-repeat;} .p-homeAboutus-bottom { padding-bottom: var(--spc-24);} .p-homeAboutus-content-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spc-16); @media (max-width: 1024px) { gap: var(--spc-8); } @media (max-width: 768px) { grid-template-columns: 1fr; }} .p-homeAboutus-bottom { position: relative; padding-top: var(--spc-20); background-color: var(--c-white); &::before { content: 'into'; position: absolute; inset: -3.2rem 0 auto 0; width: var(--fs-3xs); margin: auto; writing-mode: vertical-rl; text-orientation: mixed; font-size: var(--fs-3xs); font-family: var(--ff-en); font-weight: var(--fw-en); line-height: 1em; transform: translateX(.5rem); } &::after { content: ''; position: absolute; inset: -3.2rem 0 auto 0; width: .1rem; height: 6.4rem; margin: auto; background-color: var(--c-black); transform: translateX(-.5rem); animation: verticalGrowAndMove 1.6s cubic-bezier(0.4,0,0.2,1) infinite; }} @keyframes verticalGrowAndMove { 0% { top: -3.2rem; height: 0; } 40% { top: -3.2rem; height: 6.4rem; } 50% { top: -3.2rem; height: 6.4rem; } 90% { top: 3.2rem; height: 0; } 100% { top: -3.2rem; height: 0; }} .p-homeAboutus__subTitle + .p-homeAboutus__title { margin-top: var(--spc-2);} .p-homeAboutus__issueTitle { display: flex; align-items: center; grid-column: 2 / 3; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 2 / 3; justify-self: center; } h3 { writing-mode: vertical-rl; text-orientation: mixed; }} .p-homeAboutus__issueThumb { grid-column: 1 / 2; grid-row: 1 / 2; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 768px) { aspect-ratio: 16 / 9; width: 100%; max-width: 32rem; justify-self: center; }} .p-homeAboutus__issueContent { display: flex; flex-direction: column; gap: var(--spc-5); grid-column: 3 / 4; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 3 / 4; width: 100%; max-width: 32rem; justify-self: center; }} .p-homeAboutus__valueTitle { display: flex; justify-content: center; h3 { writing-mode: vertical-rl; text-orientation: mixed; } & + .p-homeAboutus__valueContent { margin-top: var(--spc-12); }} .p-homeAboutus__valueContent { display: flex; flex-direction: row-reverse; justify-content: center; gap: var(--spc-8); @media (max-width: 768px) { flex-direction: column; gap: var(--spc-5); width: 100%; max-width: 32rem; margin-inline: auto; } p { line-height: 3em; writing-mode: vertical-rl; text-orientation: mixed; font-family: "Shippori Mincho B1", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS P明朝", "MS Mincho", serif; @media (max-width: 768px) { writing-mode: horizontal-tb; } span { margin-top: -.5em; @media (max-width: 768px) { margin-top: 0; margin-left: -.5em; } } } & + .p-homeAboutus__btn { margin-top: var(--spc-16); }} .p-homeAboutus__btn { display: flex; justify-content: center;} .p-homeOurService { background-size: contain; background-position: center; background-repeat: repeat;} .p-homeOurService-head + .p-homeOurService-content { margin-top: var(--spc-12);} .p-homeOurService-content + .p-homeOurService-bottom { margin-top: var(--spc-24);} .p-homeOurService-bottom-inner { @media (max-width: 768px) { display: flex; justify-content: center; }} .p-homeOurService__subTitle + .p-homeOurService__title { margin-top: var(--spc-2);} .p-homeOurService__title + .p-homeOurService__desc { margin-top: var(--spc-8);} .p-homeOurServiceSection { display: grid; grid-template-columns: 2.4rem 1fr; row-gap: var(--spc-8); column-gap: var(--spc-16); padding-top: var(--spc-2); border-top: .1rem solid var(--c-black); @media (max-width: 1024px) { column-gap: var(--spc-8); row-gap: var(--spc-6); } @media (max-width: 768px) { column-gap: var(--spc-4); } & > .g-head { grid-column: 1 / 3; } & > .g-label { h3 { line-height: 1em; writing-mode: vertical-rl; text-orientation: mixed; } } & > .g-content { display: flex; flex-direction: column; gap: var(--spc-6); p:first-child { margin-top: calc((var(--p-line-height) - var(--fs-sm)) / 2 * -1); } } & + .p-homeOurServiceSection { margin-top: var(--spc-12); }} .p-homeOurService__domain { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: var(--spc-8); @media (max-width: 1024px) { column-gap: var(--spc-6); } @media (max-width: 768px) { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--spc-4); & > .g-domain { padding-top: var(--spc-4); border-top: .1rem solid var(--c-black); &:first-child { padding-top: 0; border-top: none; } } } & > .g-domain.--thr { grid-column: 1 / 2; grid-row: 1 / 3; @media (max-width: 768px) { grid-row: 1 / 2; display: flex; flex-wrap: wrap; gap: var(--spc-4); } } & > .g-domain.--horizontal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spc-6); padding-bottom: var(--spc-8); @media (max-width: 1024px) { gap: var(--spc-4); padding-bottom: var(--spc-6); } @media (max-width: 768px) { padding-bottom: 0; } .g-domain-head { height: 100%; & + .g-domain-content { margin-top: 0; } } .g-domain-content { flex: 1; } & + .g-domain.--horizontal { padding-top: var(--spc-8); padding-bottom: 0; border-top: .1rem solid var(--c-black); @media (max-width: 1024px) { padding-top: var(--spc-6); } @media (max-width: 768px) { padding-top: var(--spc-4); } } } .g-domain-head { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 768px) { width: 9.6rem; } & + .g-domain-content { margin-top: var(--spc-3); } } .g-domain-content h4 span { display: block; }}