@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #4c4c4c;
--primary: #33508f;
--secondary: #7fb3d6;
--bg: #bdeaf1;
--bg2: #bdeaf1;
/* font */
--sanserif: 'Noto Sans JP', sans-serif;
--gloock: 'Gloock', serif;
--lalezar: 'Lalezar', sans-serif;
--yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
--yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-cross: url('data:image/svg+xml,');
--icon-blank: url('data:image/svg+xml,');
--img-wave: url('data:image/svg+xml,');
--img-wave-menu: url('data:image/svg+xml,');
--img-line: url('data:image/svg+xml,');
--img-line-sp: url('data:image/svg+xml,');
--img-line-small: url('data:image/svg+xml,');
--img-line-small-sp: url('data:image/svg+xml,');
--img-line-title-sp: url('data:image/svg+xml,');
--icon-hamburger: url('data:image/svg+xml,');
/* val */
--padding-wave: 19px;
--loop-duration: 90s;
/* ease */
--slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
--easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
--easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
--easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}
@media (width <= 768px) {
:root {
--padding-wave: calc((100 / 750) * 21 * 1vw);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--loop-duration: 40s;
}
}
/* =====================
container context
===================== */
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
/* =====================
animation
===================== */
@keyframes loop {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes show-hide {
0%,
33.33% {
filter: opacity(1);
}
33.34%,
100% {
filter: opacity(0.3);
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--sanserif);
font-size: 16px;
line-height: 1.8;
color: var(--black);
@media (width <= 768px) {
font-size: calc((100 / 750) * 28 * 1vw);
}
}
body {
background: var(--bg);
@media (width > 768px) {
min-block-size: 1300px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <= 768px) {
.pc {
display: none;
}
}
/* p */
:where(p, li, dt, dd) {
line-height: 1.8;
}
/* =====================
header
===================== */
.header {
position: fixed;
inset-block-start: 20px;
inset-inline: 0;
z-index: 10;
display: block grid;
grid-template-columns: 1fr auto auto;
align-items: center;
justify-content: flex-start;
inline-size: calc(100% - 40px);
padding-block: 10px;
padding-inline: 10px;
margin-inline: auto;
background: white;
border-radius: calc(infinity * 1px);
@media (width <= 768px) {
inset-block-start: calc((100 / 750) * 16 * 1vw);
inline-size: calc((100 / 750) * 718 * 1vw);
padding-block: calc((100 / 750) * 9 * 1vw);
padding-inline: calc((100 / 750) * 10 * 1vw);
}
/* ==== logo ==== */
.logo {
display: block grid;
align-content: center;
inline-size: fit-content;
margin-inline-start: 14px;
@media (width <= 768px) {
inline-size: calc((100 / 750) * 540 * 1vw);
margin-inline-start: 1.9vw;
}
}
/* ==== nav ==== */
.nav {
block-size: 100%;
margin-inline-end: 40px;
@media (width <= 768px) {
display: none;
}
ul {
display: block grid;
grid-auto-flow: column;
gap: 40px;
align-items: center;
justify-content: flex-start;
block-size: inherit;
font-weight: 500;
& :where(li, a) {
display: block flow;
align-content: center;
block-size: inherit;
}
& a {
position: relative;
transition: color 250ms ease 0s;
&:hover {
color: var(--secondary);
}
&::after {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
display: block flow;
inline-size: 0;
block-size: 2px;
content: '';
background: var(--secondary);
border-radius: calc(infinity * 1px);
}
}
}
}
/* ==== contact ==== */
.contact {
display: block grid;
place-content: center;
inline-size: 65px;
aspect-ratio: 1 / 1;
color: white;
text-align: center;
background: var(--primary);
border-radius: calc(infinity * 1px);
transition: background 250ms ease 0s;
@media (width <= 768px) {
display: none;
}
@media (any-hover: hover) {
&:hover {
background: var(--secondary);
}
}
&::before {
display: block flow;
inline-size: 28px;
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-mail);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
/* ==== sp-menu ==== */
.sp-menu {
display: none;
place-content: center;
inline-size: calc((100 / 750) * 104 * 1vw);
aspect-ratio: 1 / 1;
background: var(--primary);
border-radius: calc(infinity * 1px);
&::before {
inline-size: calc((100 / 750) * 50 * 1vw);
block-size: calc((100 / 750) * 37 * 1vw);
content: '';
background-color: white;
mask-image: var(--icon-hamburger);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
display: block grid;
}
}
}
/* Menu on */
.menu-on .sp-menu {
&::before {
inline-size: calc((100 / 750) * 37.477 * 1vw);
block-size: calc((100 / 750) * 37.715 * 1vw);
mask-image: var(--icon-cross);
}
}
/* =====================
aside
===================== */
.aside {
padding-block-start: 70px;
translate: 0 var(--padding-wave);
@media (width <= 768px) {
padding-block-start: calc((100 / 750) * 70 * 1vw);
padding-inline: calc((100 / 750) * 40 * 1vw);
}
.wrapper {
position: relative;
z-index: 1;
max-inline-size: 1120px;
padding-block: 68px calc(var(--padding-wave) + 51px);
padding-inline: 85.5px 88.5px;
margin-inline: auto;
background: white;
border-radius: 40px 40px 0 0;
@media (width <= 768px) {
padding-block: calc((100 / 750) * 95 * 1vw) calc(var(--padding-wave) + 51px);
padding-inline: 0;
border-radius: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 40 * 1vw) 0 0;
}
}
.inner {
display: block grid;
align-items: center;
justify-content: space-between;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
justify-content: center;
}
/* ==== head ==== */
.head {
grid-area: 1 / 1 / 2 / 2;
padding-block: 50px 0;
padding-inline: 20px 0;
@media (width <= 768px) {
gap: 3.7vw;
justify-content: center;
padding-block: 0;
padding-inline: 0;
margin-inline: auto;
text-align: center;
& [lang='en'] {
justify-content: center;
letter-spacing: calc((100 / 750) * 2.88 * 1vw);
}
}
}
/* ==== description ==== */
.description {
grid-area: 2 / 1 / 3 / 2;
align-self: flex-start;
padding-block-start: 27px;
font-weight: 400;
@media (width <= 768px) {
align-self: center;
padding-block-start: 10.1vw;
font-size: calc((100 / 750) * 28 * 1vw);
& span {
display: block flow;
inline-size: 100%;
text-align: center;
}
}
}
/* ==== common ==== */
& :where(.tel, .mail) {
display: block grid;
gap: 22px;
translate: 3px 0;
@media (width <= 768px) {
gap: 0;
translate: 0 0;
}
& h2 {
font-family: var(--yugo);
font-size: 24px;
font-weight: bold;
line-height: 1;
@media (width <= 768px) {
font-size: calc((100 / 750) * 36 * 1vw);
text-align: center;
}
}
}
/* ==== tel ==== */
.tel {
grid-area: 1 / 2 / 2 / 3;
margin-block-end: 72px;
@media (width <= 768px) {
margin-block: 13.1vw 0;
}
& a {
display: block grid;
grid-auto-flow: column;
gap: 20px;
align-items: center;
justify-content: flex-start;
font-size: 48px;
font-weight: 700;
line-height: 1;
color: var(--primary);
@media (width <= 768px) {
gap: 2.7vw;
margin-block-start: 1.9vw;
font-size: calc((100 / 750) * 72 * 1vw);
}
&::before {
display: block flow;
inline-size: 38px;
aspect-ratio: 1 / 1;
content: '';
background-color: var(--black);
mask-image: url('../img/_common/tel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
translate: 0 2px;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 750) * 62 * 1vw);
translate: 0 0;
}
}
}
}
/* ==== mail ==== */
.mail {
grid-area: 2 / 2 / 3 / 3;
gap: 28px;
@media (width <= 768px) {
gap: 3vw;
margin-block-start: 10.7vw;
}
}
}
}
/* =====================
footer
===================== */
.footer {
position: relative;
z-index: 2;
overflow: hidden;
color: white;
/* ==== wrapper ==== */
.wrapper {
position: relative;
padding-block-start: var(--padding-wave);
&::before {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
display: block flow;
inline-size: 200%;
block-size: var(--padding-wave);
content: '';
background: var(--primary);
mask-image: var(--img-wave);
mask-repeat: repeat-x;
mask-position: center bottom;
mask-size: contain;
animation: loop var(--loop-duration) linear infinite;
}
}
/* ==== inner ==== */
.inner {
background: var(--primary);
}
/* ==== contents ==== */
.contents {
display: block grid;
justify-content: space-between;
padding-block: 86px 28px;
padding-inline: 10px;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
padding-block: 10.7vw 6.4vw;
padding-inline: calc((100 / 750) * 62 * 1vw);
}
/* ==== logo ==== */
.logo {
grid-area: 1 / 1 / 2 / 2;
@media (width <= 768px) {
inline-size: calc((100 / 750) * 605 * 1vw);
}
}
/* ==== address ==== */
.address {
display: block flow;
grid-area: 2 / 1 / 3 / 2;
margin-block-start: 20px;
font-size: 14px;
font-weight: normal;
line-height: 1.8;
@media (width <= 768px) {
margin-block-start: calc((100 / 750) * 41.8 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
& span {
display: block flow;
inline-size: 100%;
text-align: left;
}
a[href^='tel:'] {
text-decoration: underline;
}
}
}
/* ==== nav ==== */
.nav {
grid-area: 1 / 2 / 3 / 3;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.9px;
@media (width <= 768px) {
font-size: calc((100 / 750) * 28 * 1vw);
letter-spacing: calc((100 / 750) * 1.4 * 1vw);
}
& ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 54px 77px;
margin-block-start: 22px;
margin-inline-end: 15px;
font-weight: 500;
letter-spacing: 0.9px;
@media (width <= 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 12.9vw 0;
margin-block-start: 15vw;
margin-inline-end: 0;
}
& li {
margin-block: calc((1em - 1lh) / 2);
@media (width <= 768px) {
& a {
display: block flow;
}
}
}
}
}
/* ==== sub-nav ==== */
.sub-nav {
grid-area: 3 / 2 / 3 / 3;
& ul {
display: grid;
grid-auto-flow: column;
gap: 24px;
align-items: center;
justify-content: flex-end;
margin-block-start: 20px;
margin-inline-end: 15px;
font-size: 14px;
font-weight: 500;
color: var(--bg);
@media (width <= 768px) {
gap: calc((100 / 750) * 40 * 1vw);
justify-content: flex-start;
margin-block-start: 19.5vw;
margin-inline-end: 0;
font-size: calc((100 / 750) * 22 * 1vw);
}
& li {
margin-block: calc((1em - 1lh) / 2);
}
}
}
/* ==== copyright ==== */
.copyright {
grid-area: 4 / 1 / 5 / 2;
margin-block-start: 63px;
font-size: 13px;
font-weight: 400;
color: #ebebeb;
@media (width <= 768px) {
margin-block-start: 4vw;
font-size: calc((100 / 750) * 22 * 1vw);
}
}
}
}
/* =====================
sp-nav
===================== */
.sp-nav {
position: fixed;
inset: 0;
z-index: 9;
display: none;
block-size: 0;
max-block-size: 0;
overflow: hidden;
transition: all 350ms ease 0s;
/* ==== wrapper ==== */
.wrapper {
position: relative;
&::after {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
inline-size: 200%;
block-size: calc((100 / 750) * 22 * 1vw);
aspect-ratio: 1 / 1;
content: '';
background-color: var(--primary);
mask-image: var(--img-wave-menu);
mask-repeat: repeat-x;
mask-position: center top;
mask-size: contain;
translate: 0 97%;
}
}
/* ==== inner ==== */
.inner {
position: relative;
max-block-size: 90vh;
padding-block: calc((100 / 750) * 208 * 1vw) calc((100 / 750) * 54 * 1vw);
padding-inline: calc((100 / 750) * 64 * 1vw);
overflow-y: auto;
color: white;
background: var(--primary);
/* ==== global-nav ==== */
.global-nav {
display: block grid;
gap: 0;
& li a {
position: relative;
display: block grid;
grid-template-columns: 1fr auto;
padding-block: calc((100 / 750) * 41 * 1vw) calc((100 / 750) * 36.8 * 1vw);
padding-inline: 2.3vw 2.8vw;
font-size: calc((100 / 750) * 32 * 1vw);
font-weight: 500;
letter-spacing: calc((100 / 750) * 1.6 * 1vw);
border-block-end: 1px solid white;
&::before {
position: absolute;
inset-block-start: 51%;
inset-inline-end: 6.2vw;
z-index: 12;
inline-size: calc((100 / 750) * 11 * 1vw);
aspect-ratio: 11 / 26;
content: '';
background-color: var(--primary);
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
translate: 0 -50%;
}
&::after {
z-index: 1;
inline-size: calc((100 / 750) * 64 * 1vw);
aspect-ratio: 1 / 1;
content: '';
background: white;
border-radius: calc(infinity * 1px);
}
}
& li:last-child a {
border-block-end-color: transparent;
}
}
/* ==== sub-nav ==== */
.sub-nav {
display: block grid;
grid-auto-flow: column;
gap: calc((100 / 750) * 42 * 1vw);
align-items: center;
justify-content: center;
margin-block-start: calc((100 / 750) * 52 * 1vw);
font-size: calc((100 / 750) * 22 * 1vw);
font-weight: 500;
color: var(--bg);
& li {
margin-block: calc((1em - 1lh) / 2);
}
}
}
@media (width <= 768px) {
display: block;
}
}
/* Menu on */
.menu-on .sp-nav {
block-size: 100%;
max-block-size: calc(infinity * 1px);
.wrapper::after {
animation: loop var(--loop-duration) linear infinite;
}
}
/* =====================
utility
===================== */
.u-inner {
position: relative;
max-inline-size: 1120px;
margin-inline: auto;
@media (width <= 768px) {
padding-inline: calc((100 / 750) * 0 * 1vw);
}
}
/* ==== hover ==== */
.u-hover {
@media (any-hover: hover) {
transition: opacity 250ms ease 0s;
will-change: opacity;
&:hover {
opacity: 0.7;
}
}
}
/* ==== bg-color ==== */
.u-bg {
background: linear-gradient(180deg, var(--bg) 53.85%, white 100%);
}
/* ==== u-title ==== */
.u-title {
display: block grid;
gap: 4px;
align-self: flex-start;
inline-size: fit-content;
@media (width <= 768px) {
gap: calc((100 / 750) * 28 * 1vw);
}
/* en */
& [lang='en'] {
display: block grid;
grid-auto-flow: column;
gap: 15px;
align-items: baseline;
justify-content: flex-start;
margin-block: calc((1em - 1lh) / 2);
font-family: var(--lalezar);
font-size: 64px;
font-weight: 400;
line-height: 1;
color: var(--primary);
letter-spacing: 1.92px;
@media (width <= 768px) {
gap: calc((100 / 750) * 16 * 1vw);
font-size: calc((100 / 750) * 96 * 1vw);
letter-spacing: calc((100 / 750) * 2.88 * 1vw);
}
&[data-text='uppercase'] {
text-transform: uppercase;
}
&::before {
display: block flow;
inline-size: 30px;
block-size: 40px;
content: '';
background-image: url('../img/_common/water.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
translate: -1px 2px;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 750) * 40.214 * 1vw);
block-size: calc((100 / 750) * 53.692 * 1vw);
translate: 0 0.1vw;
}
}
}
/* line */
.line {
inline-size: 330px;
block-size: 4px;
margin-block-end: 21px;
background-color: #999;
mask-image: var(--img-line);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
@media (width <= 768px) {
inline-size: 100%;
inline-size: calc((100 / 750) * 527 * 1vw);
block-size: calc((100 / 750) * 8 * 1vw);
margin-block-end: 0;
mask-image: var(--img-line-sp);
translate: 0 -3.5vw;
}
&[data-color='white'] {
background-color: white;
}
&[data-color='secondary'] {
background-color: var(--secondary);
}
}
/* title */
.title {
margin-block: calc((1em - 1lh) / 2);
font-size: 20px;
font-weight: 700;
@media (width <= 768px) {
font-size: calc((100 / 750) * 32 * 1vw);
}
}
}
/* center */
.u-title[data-align='center'] {
margin-inline: auto;
text-align: center;
& [lang='en'] {
margin-inline: auto;
}
.line {
margin-inline: auto;
}
}
/* ==== u-head ==== */
.u-head {
position: relative;
display: block flex;
gap: 16px;
align-items: flex-start;
padding-block-end: 16px;
font-size: 32px;
font-weight: 700;
font-feature-settings: 'case' on;
line-height: 1.5;
color: var(--primary);
@media (width <= 768px) {
gap: 2.3vw;
padding-block-end: 7vw;
font-size: calc((100 / 750) * 40 * 1vw);
}
&::before {
display: block flow;
inline-size: 21.72px;
block-size: 29.48px;
content: '';
background-image: url('../img/_common/water.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
translate: 0 12px;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 750) * 30.28 * 1vw);
block-size: calc((100 / 750) * 40.428 * 1vw);
translate: 0 1.4vw;
}
}
&::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
display: block flow;
inline-size: 330px;
block-size: 4px;
content: '';
background-color: white;
mask-image: var(--img-line);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
&::after {
inline-size: calc((100 / 750) * 330 * 1vw);
block-size: calc((100 / 750) * 8 * 1vw);
margin-block-end: 0;
mask-image: var(--img-line-title-sp);
translate: 0 -3.5vw;
}
}
}
.u-head[data-color='secondary'] {
&::after {
background-color: var(--secondary);
}
}
/* ==== u-anchor ==== */
.u-anchor {
position: relative;
display: block grid;
grid-auto-flow: column;
gap: 33px;
align-items: center;
justify-content: flex-start;
inline-size: fit-content;
padding-block: 11px;
padding-inline: 45px 38px;
font-weight: 700;
line-height: 2.12;
color: var(--primary);
border: 2px solid var(--primary);
border-radius: calc(infinity * 1px);
transition: all 250ms ease 0s;
@media (width <= 768px) {
gap: calc((100 / 750) * 30 * 1vw);
padding-block: 2.935vw;
padding-inline: calc((100 / 750) * 70 * 1vw) calc((100 / 750) * 50 * 1vw);
font-size: calc((100 / 750) * 28 * 1vw);
line-height: 1.21;
border: calc((100 / 750) * 4 * 1vw) solid var(--primary);
}
@media (any-hover: hover) {
&:hover {
color: white;
background: var(--primary);
&::before {
background-color: var(--primary);
}
}
}
&::before {
position: absolute;
inset-inline-end: 55px;
display: block flow;
inline-size: 7.04px;
aspect-ratio: 7.04 / 16.28;
content: '';
background-color: white;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
&::before {
inset-inline-end: 9.9vw;
inline-size: calc((100 / 750) * 11 * 1vw);
aspect-ratio: 11 / 26;
}
}
&::after {
inline-size: 42px;
aspect-ratio: 1 / 1;
content: '';
background: currentcolor;
border-radius: calc(infinity * 1px);
transition: inherit;
}
@media (width <= 768px) {
&::after {
inline-size: calc((100 / 750) * 64 * 1vw);
}
}
}
.u-anchor[target='_blank'] {
&::before {
inset-inline-end: 52px;
inline-size: 12px;
aspect-ratio: 1 / 1;
mask-image: var(--icon-blank);
}
@media (width <= 768px) {
&::before {
inset-inline-end: 9.4vw;
inline-size: calc((100 / 750) * 23 * 1vw);
}
}
}
/* ==== u-mv ==== */
.u-mv {
--_height: 450px;
position: relative;
display: block grid;
min-block-size: var(--_height);
overflow: hidden;
@media (width <= 768px) {
--_height: calc((100 / 750) * 600 * 1vw);
}
&::after {
position: absolute;
inset-block-end: 60px;
inset-inline: 0;
z-index: 2;
display: block flow;
inline-size: 200%;
block-size: var(--padding-wave);
aspect-ratio: 1 / 1;
content: '';
background-color: var(--bg);
mask-image: var(--img-wave);
mask-repeat: repeat-x;
mask-position: left center;
mask-size: contain;
animation: loop var(--loop-duration) linear infinite;
}
@media (width <= 768px) {
&::after {
inset-block-end: 13vw;
}
}
/* ==== img ==== */
.picture {
position: absolute;
z-index: 1;
display: block flow;
inline-size: 100%;
block-size: var(--_height);
& img {
position: absolute;
top: 50%;
left: 50%;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
object-fit: cover;
translate: -50% -50%;
}
}
/* ==== text ==== */
.text {
position: relative;
z-index: 2;
display: block grid;
align-items: flex-start;
block-size: fit-content;
padding-block: 173px 0;
padding-inline: 80px;
color: white;
@media (width <= 768px) {
padding-block: calc((100 / 750) * 227 * 1vw) 0;
padding-inline: calc((100 / 750) * 40 * 1vw);
}
& [lang='en'] {
margin-block: calc((1em - 1lh) / 2);
font-family: var(--lalezar);
font-size: 96px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 2.88px;
text-shadow: 0 4px 4px rgb(0 0 0 / 25%);
@media (width <= 768px) {
font-size: calc((100 / 750) * 104 * 1vw);
letter-spacing: calc((100 / 750) * 3.12 * 1vw);
text-shadow: 0 calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 4 * 1vw) rgb(0 0 0 / 25%);
}
}
& .title {
margin-block: calc((1em - 1lh) / 2);
font-size: 28px;
font-weight: bold;
font-feature-settings: 'case' on;
line-height: 1;
text-shadow: 0 4px 4px rgb(0 0 0 / 25%);
@media (width > 768px) {
translate: 0 -3px;
}
@media (width <= 768px) {
font-size: calc((100 / 750) * 32 * 1vw);
text-shadow: 0 calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 4 * 1vw) rgb(0 0 0 / 25%);
translate: 0 calc((100 / 750) * 11 * -1 * 1vw);
}
}
}
/* ==== breadcrumb ==== */
.breadcrumb {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
z-index: 3;
display: block flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
justify-content: flex-end;
inline-size: 100%;
padding-block: 19px;
padding-inline: 60px;
font-size: 13px;
font-weight: 500;
color: var(--secondary);
background: var(--bg);
@media (width <= 768px) {
gap: 2.2vw;
padding-block: 5.9vw 2vw;
padding-inline: 5.2vw;
font-size: calc((100 / 750) * 22 * 1vw);
}
& [lang='en'] {
text-transform: uppercase;
}
.item {
display: block flex;
gap: 17px;
align-items: center;
@media (width <= 768px) {
gap: 2.3vw;
}
}
.item + .item::before {
content: '/';
}
}
}
/* ==== u-description ==== */
.u-description {
inline-size: fit-content;
padding-block: 16px;
padding-inline: 16px;
margin-block: calc((1em - 1lh) / 2);
margin-inline: auto;
background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(189 234 241 / 20%) 100%);
@media (width <= 768px) {
inline-size: 100%;
padding-block: 3.3vw;
padding-inline: calc((100 / 750) * 24 * 1vw);
font-size: calc((100 / 750) * 28 * 1vw);
background: linear-gradient(180deg, rgb(255 255 255 / 40%) 14.86%, rgb(189 234 241 / 20%) 100%);
}
}
body:not([data-page='top'], [data-page='contact'], [data-page='entry'])::after {
position: fixed;
top: 0;
left: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100dvh;
pointer-events: none;
content: '';
background: #fff;
opacity: 1;
transition: all 600ms ease-in-out 100ms;
}
.pageshow body::before {
opacity: 0;
}
.pageshow body::after {
opacity: 0;
}
body[data-page='company'] .header ul li:has([href='/company/']) a,
body[data-page='business'] .header ul li:has([href='/business/']) a,
body[data-page='sdgs'] .header ul li:has([href='/sdgs/']) a,
body[data-page='works'] .header ul li:has([href='/works/']) a,
body[data-page='recruit'] .header ul li:has([href='/recruit/']) a {
pointer-events: none;
&::after {
inline-size: 100%;
}
}
}