@charset "utf-8";
/**
* About MediaQueries
* default style
* @media print, (min-width: 768px) {}
* @media screen and (max-width: 767.98px) {}
* @media (max-width: 479.98px) {}
* @media (max-width: 359.98px) {}
* -------------------------------------------------- */
.l-loading {
--ease: cubic-bezier(.3,1,.6,1);
display: grid;
place-items: center;
z-index: 6;
position: fixed;
inset: 0;
background: white;
mix-blend-mode: lighten;
}
.l-loading .maincopy {
--dashed: url('data:image/svg+xml;charset=utf-8,');
color: black;
}
/* メインコピーをフェードイン */
.l-loading .maincopy {
transition: opacity 1s, filter 1s;
}
.l-loading .maincopy:not(.is-motion) {
opacity: 0;
filter: blur(8px);
}
/* 矢印と点線を伸ばす */
.l-loading .d-yarrow .stroke,
.l-loading .d-yarrow .arrow {
transition: opacity 1s, transform 1s cubic-bezier(.1,1,.2,1);
transition-delay: .75s;
}
.l-loading .maincopy .ja .c2::before {
clip-path: inset(0);
transition: clip-path 1s cubic-bezier(.3,1,.3,1);
transition-delay: .75s;
}
.l-loading .maincopy:not(.is-motion) .d-yarrow .stroke {
transform: scaleY(0);
}
.l-loading .maincopy:not(.is-motion) .d-yarrow .arrow.-start {
opacity: 0;
transform: translateY( calc(var(--charaSize) * .5 * 1.28) );
}
.l-loading .maincopy:not(.is-motion) .d-yarrow .arrow.-end {
opacity: 0;
transform: translateY( calc(var(--charaSize) * .5 * -1.28) );
}
.l-loading .maincopy:not(.is-motion) .ja .c2::before {
clip-path: inset(0 100% 0 0);
}
/* Home visualの黒ベタをフェードアウト */
.home_visual.is-standby::after {
content: "";
position: absolute;
inset: 0;
background: black;
}
.home_visual.is-standby.is-fade::after {
opacity: 0;
transition: opacity 1s;
}
/* ローディングとキービジュアルのメインコピーを入れ替え */
.visual_overlay.is-standby {
opacity: 0;
}
.visual_overlay.is-show,
.l-loading.is-hide {
animation: overlayShow .6s cubic-bezier(.6,0,.1,1) both;
}
.l-loading.is-hide {
animation-name: loadingHide;
}
@keyframes overlayShow {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loadingHide {
from { opacity: 1; }
to { opacity: 0; }
}
/* :::::: 人類を、解こう。 :::::: */
.maincopy {
--charaSize: max(var(--cw) * 118 / var(--aspect), 59px);
--dashed: url('data:image/svg+xml;charset=utf-8,');
}
.maincopy {
display: grid;
justify-items: start;
row-gap: max(var(--cw) * 16 / var(--aspect), 8px);
position: relative;
left: 2%;
color: white;
fill: currentcolor;
font-size: var(--fontSize);
line-height: 1;
}
.maincopy .ja .d-yarrow {
--arrowSize: min(var(--cw) * 7 / var(--aspect), 7px);
grid-area: 1 / 2;
position: relative;
height: calc(var(--charaSize) * 1.28);
}
.maincopy .ja .d-yarrow .arrow {
rotate: none;
}
.maincopy .ja .d-yarrow .stroke {
position: absolute;
left: 0;
width: var(--arrowSize);
fill: none;
stroke: currentcolor;
stroke-width: max(var(--cw) * 1 / var(--aspect), .5px); /* 最細0.5pxで太くなり続ける */
}
.maincopy .ja .c2 {
position: relative;
}
.maincopy .ja .c2::before {
content: "";
position: absolute;
bottom: -6%;
left: 4%;
width: 47%;
height: 100%;
background: var(--dashed) left bottom / 100px auto no-repeat;
background-size: max(var(--cw) * 200 / var(--aspect), 100px) auto; /* 最細1pxで太くなり続ける */
}
.maincopy svg {
height: auto;
}
.maincopy [width="118"] {
width: var(--charaSize);
}
.maincopy [width="59"] {
width: calc(var(--charaSize) * .5);
}
@media print, (min-width: 768px) {
.maincopy .ja {
display: grid;
grid-auto-flow: column;
align-items: end;
}
.maincopy .ja > * {
grid-row: 1;
}
.maincopy .ja .c1 { grid-column: 1; }
.maincopy .ja .d-yarrow {
margin: 0 max(var(--cw) * 12 / var(--aspect), 6px);
}
.maincopy .ja .c2 { grid-column: 3; }
.maincopy .ja .c3 { grid-column: 4; }
.maincopy .ja .c4 { grid-column: 5; }
.maincopy .ja .c5 { grid-column: 6; }
.maincopy .ja .c6 { grid-column: 7; }
.maincopy .ja .c7 { grid-column: 8; }
.maincopy .ja .c8 { grid-column: 9; }
.maincopy .ja .c5,
.maincopy .ja .c6 {
margin-left: max(var(--cw) * 12 / var(--aspect), 6px);
}
.maincopy [width="420"] {
width: max(var(--cw) * 420 / var(--aspect), 210px);
}
}
@media screen and (max-width: 767.98px) {
.maincopy {
--charaSize: calc(var(--cw) * 68 / var(--aspect));
row-gap: calc(var(--cw) * 8 / var(--aspect));
left: 4%;
width: calc(var(--cw) * 264 / var(--aspect));
}
.maincopy .en {
text-indent: .5em;
}
.maincopy .ja {
display: flex;
flex-wrap: wrap;
align-items: end;
row-gap: calc(var(--cw) * 8 / var(--aspect));
}
.maincopy .ja .d-yarrow {
--arrowSize: calc(var(--cw) * 5 / var(--aspect));
}
.maincopy .ja .c2 {
margin-left: calc(var(--cw) * 4 / var(--aspect));
}
.maincopy .ja .c6 {
margin-left: calc(var(--cw) * 8 / var(--aspect));
}
.maincopy [width="420"] {
left: 2%;
width: calc(var(--cw) * 200 / var(--aspect));
}
}
/* :::::: Overlay :::::: */
.l-overlay {
z-index: 4;
position: fixed;
inset: 0;
background: white;
}
.l-overlay.is-hide {
pointer-events: none;
opacity: 0;
}
.l-overlay.is-motion {
transition: opacity .05s;
}
.l-overlay.is-motion.is-hide {
transition-duration: .6s;
}
/**
* Header
* -------------------------------------------------- */
.l-header {
--menuSize: clamp(64px, var(--cw) * 80 / var(--aspect), 80px);
--drawerSize: clamp(48px, var(--cw) * 80 / 1440, 80px);
}
.l-header > * {
z-index: 4;
position: fixed;
}
@media screen and (max-width: 767.98px) {
.l-header {
--menuSize: min(var(--cw) * 48 / var(--aspect), 80px);
--drawerSize: 48px;
}
}
/* :::::: Logo :::::: */
.l-header .logo {
position: absolute;
top: 24px;
left: var(--sidegap);
width: clamp(76px, var(--cw) * 170 / 1440, 170px);
color: black;
fill: currentcolor;
}
#page-home .l-header .logo,
#page-message .l-header .logo,
#page-office .l-header .logo,
#page-office2 .l-header .logo,
#page-project1 .l-header .logo,
#page-project2 .l-header .logo,
#page-project3 .l-header .logo,
#page-project4 .l-header .logo,
#page-cross-talk1 .l-header .logo,
#page-cross-talk2 .l-header .logo,
#page-cross-talk3 .l-header .logo,
#page-cross-talk4 .l-header .logo {
color: white;
}
body[id^="page-interview"] .l-header .logo {
visibility: hidden;
}
.l-header .logo svg {
width: 100%;
height: auto;
}
/* :::::: Menu :::::: */
.l-header .menu {
z-index: 5;
display: flex;
right: 0;
height: var(--menuSize);
}
.l-header .menu > * {
display: flex;
}
.l-header .menu .button {
display: grid;
place-items: center;
height: 100%;
}
.l-header .menu_list {
padding-right: min(var(--cw) * 20 / 1440, 20px);
padding-left: min(var(--cw) * 28 / 1440, 28px);
white-space: nowrap;
}
.l-header .menu_list .button {
padding: 0 1em .25em;
--fontBasis: 20;
--fontMin: .75rem;
font-size: var(--fontSize);
line-height: 1.2;
font-family: var(--fontEn);
letter-spacing: .05em;
text-transform: uppercase;
}
.l-header .menu_list .label {
display: inline-block;
scale: .9 1;
}
.l-header .menu_list .button.is-current {
background: linear-gradient(white, white) left 1em bottom / calc(100% - 2em) 8px no-repeat;
}
.l-header .menu .internship .button {
padding-top: .25em;
}
@media (hover) {
.l-header .menu .button:not(.link) {
cursor: default;
}
}
/* motion */
.l-header .menu:not(.is-appear) {
pointer-events: none;
transform: translateY(-100%);
}
.l-header .menu.is-motion {
transition: transform .4s var(--easeOut);
}
.l-header .menu.is-motion:not(.is-appear) {
transition-duration: .2s;
transition-timing-function: var(--easeInOut);
}
.l-header .menu:focus-within {
pointer-events: auto;
transform: none;
}
@media print, (min-width: 768px) {
.l-header .menu {
top: 0;
padding-right: calc(var(--drawerSize) + var(--sidegap));
border-radius: 0 0 0 var(--radius);
}
.l-header .menu::before {
content: "";
z-index: -1;
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--themecolor);
}
}
@media screen and (max-width: 767.98px) {
.l-header .menu {
justify-content: center;
bottom: 0;
left: 0;
}
.l-header .menu_list {
display: none;
}
/* motion */
.l-header .menu:not(.is-appear) {
transform: translateY(100%);
}
}
/* :::::: Pull menu :::::: */
.chapter_menu {
--space: min(var(--cw) * 48 / 1440, 48px);
z-index: -2;
position: absolute;
top: calc(100% - var(--space) * .5);
left: 0;
width: 100%;
border-radius: 0 0 0 var(--radius);
font-weight: 500;
}
.chapter_menu_inner {
padding: var(--space);
padding-bottom: calc(var(--space) * .5);
border-radius: inherit;
}
.chapter_menu::before {
z-index: -1;
content: "";
position: absolute;
inset: -40px 0 0;
border-radius: inherit;
background: #f5f5f5f5;
backdrop-filter: blur(8px);
}
/* motion */
:where(.l-header .chapter_menu):not(.is-active) {
z-index: -3;
pointer-events: none;
}
:where(.l-header .chapter_menu) .chapter_menu_inner {
clip-path: inset(0 0 100%);
}
:where(.l-header .chapter_menu)::before {
transform-origin: center top;
translate: 0 -100%;
}
:where(.l-header .chapter_menu).is-motion .chapter_menu_inner {
transition: clip-path .6s var(--easeOut);
}
:where(.l-header .chapter_menu).is-motion::before {
transition: translate .6s var(--easeInOut);
}
:where(.l-header .chapter_menu).is-active .chapter_menu_inner {
clip-path: inset(0);
}
:where(.l-header .chapter_menu).is-active::before {
translate: 0;
transition-duration: .5s;
transition-timing-function: var(--easeBack);
}
.chapter_label {
--fontBasis: 24;
--fontMin: .8125rem;
font-size: var(--fontSize);
}
.chapter_label .en {
margin-left: .5em;
color: var(--themecolor);
font: 500 max(75%, .625rem) / 1.5 var(--fontEn);
text-transform: uppercase;
}
.chapter_list {
margin-top: .5em;
}
.chapter_list .link {
display: block;
width: fit-content;
padding: .25em 0;
--fontBasis: 20;
--fontMin: .75rem;
font-size: var(--fontSize);
}
.chapter_list .link .arr {
width: 1.5rem;
height: auto;
margin-right: .5rem;
fill: none;
stroke: var(--themecolor);
}
.chapter_list .link .num {
font-size: 108%;
line-height: 1;
}
.chapter_list .project2 .link .main {
font-family: var(--fontEn);
}
.chapter_list .link .sub {
margin-left: .5em;
color: var(--themecolor);
font-size: 80%;
font-family: var(--fontEn);
text-transform: uppercase;
}
.chapter_list .-comingsoon {
opacity: .3;
}
.chapter_list .-comingsoon .arr {
stroke: gray;
}
.chapter_list .-comingsoon .sub {
position: relative;
color: gray;
font-size: 80%;
text-transform: none;
}
@media (hover) {
.chapter_list .link {
cursor: pointer;
background: linear-gradient(white, white) right bottom / 0 8px no-repeat;
transition: background-size .4s var(--easeOut);
}
.chapter_list .link[href]:hover {
background-position: left bottom;
background-size: 100% 8px;
transition-duration: .2s;
}
}
/* :::::: Entries :::::: */
.l-header .entry_list {
height: 80%;
font: 400 .875rem / 1.2 var(--font);
}
.l-header .entry_list a {
padding: 0;
color: white;
letter-spacing: 0;
--fontBasis: 14;
font-size: var(--fontSize);
background: #1a1a1a;
}
.l-header .entry_list .pointer::before {
background: #686868;
}
@media print, (min-width: 768px) {
.l-header .entry_list {
align-self: end;
column-gap: .9em;
}
.l-header .entry_list a {
width: 7.5em;
border-radius: calc(var(--radius) * .5) calc(var(--radius) * .5) 0 0;
}
}
@media screen and (max-width: 767.98px) {
.l-header .entry_list {
column-gap: 1px;
height: 100%;
width: calc(100% - var(--sidegap));
}
.l-header .entry_list > * {
width: 100%;
}
.l-header .entry_list a {
width: 100%;
--fontBasis: 12;
line-height: 1.2;
}
.l-header .entry_list .shinsotsu a {
border-radius: var(--radius) 0 0 0;
}
.l-header .entry_list .career a {
border-radius: 0;
}
.l-header .entry_list .internship a {
border-radius: 0 var(--radius) 0 0;
}
.l-header .entry_list .label {
display: flex;
align-items: center;
}
.l-header .entry_list .label::before {
content: "";
display: inline-block;
position: relative;
left: -.25em;
width: 1.5em;
height: calc(1.5em * .423);
vertical-align: middle;
background: url('data:image/svg+xml;charset=utf-8,') center / contain no-repeat;
}
}
/* :::::: Drawer :::::: */
.l-header .drawer {
display: grid;
place-items: center;
z-index: 6;
top: 0;
right: calc(var(--sidegap) * .5);
width: var(--drawerSize);
height: var(--menuSize);
color: black;
--fontBasis: 18;
--fontMin: .6875rem;
font-size: var(--fontSize);
line-height: 1.2;
font-family: var(--fontEn);
letter-spacing: .05em;
text-transform: uppercase;
}
.l-header .drawer > * {
grid-area: 1 / 1;
}
.l-header .drawer .label {
fill: currentcolor;
clip-path: inset(0);
translate: 0 -.2em;
scale: .9 1;
}
.l-header .drawer .bar {
width: 50%;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
translate: 0 .8em;
}
@media (hover) {
.l-header .drawer {
cursor: pointer;
}
}
/* motion */
.l-header .drawer.is-active .bar {
rotate: 16deg;
}
.l-header .drawer.is-active .bar + .bar {
rotate: -16deg;
}
.l-header .drawer.is-anim .bar {
animation: closeBar1 .2s var(--easeInOut) both;
}
.l-header .drawer.is-anim .bar + .bar {
animation: closeBar2 .2s var(--easeInOut) both;
}
.l-header .drawer.is-active.is-anim .bar {
animation: openBar1 .2s var(--easeBack) both;
}
.l-header .drawer.is-active.is-anim .bar + .bar {
animation: openBar2 .2s var(--easeBack) both;
}
@keyframes openBar1 {
from { rotate: none; }
to { rotate: 16deg; }
}
@keyframes openBar2 {
from { rotate: none; }
to { rotate: -16deg; }
}
@keyframes closeBar1 {
from { rotate: 16deg; }
to { rotate: none; }
}
@keyframes closeBar2 {
from { rotate: -16deg; }
to { rotate: none; }
}
@media print, (min-width: 768px) {
.l-header .drawer:not(.is-appear) {
transform: translateY(-100%);
}
.l-header .drawer.is-motion {
transition: transform .4s var(--easeOut);
}
.l-header .drawer.is-motion:not(.is-appear) {
transition-duration: .2s;
transition-timing-function: var(--easeInOut);
}
@media (hover) {
.l-header .drawer:focus-visible {
pointer-events: auto;
transform: none;
}
}
}
@media screen and (max-width: 767.98px) {
.l-header .drawer {
font-size: .6875rem;
}
}
/**
* Sitemap
* -------------------------------------------------- */
.sitemap_list {
display: grid;
font-weight: 500;
font-size: var(--fontSize);
line-height: 1.5;
letter-spacing: .1em;
white-space: nowrap;
}
.sitemap_list .link[aria-current="page"] {
pointer-events: none;
background: linear-gradient(white, white) left bottom / 100% .5em no-repeat;
}
.sitemap_list .chapter {
position: relative;
padding-left: 1.5em;
background: var(--dashedY);
}
.sitemap_list .chapter > .label {
width: fit-content;
--fontMin: .6875rem;
font-size: var(--fontSize);
}
.sitemap_list .chapter > .label .en {
margin-left: .5em;
font: 500 max(75%, .625rem) / 1 var(--fontEn);
text-transform: uppercase;
}
.sitemap_list .list {
margin-top: .5em;
}
.sitemap_list .list .project2,
.sitemap_list .list .instagram {
font-family: var(--fontEn);
line-height: 1.4;
letter-spacing: .05em;
}
.sitemap_list .list .project2 {
font-size: 108%;
}
.sitemap_list .list .kai,
.sitemap_list .list .instagram {
margin-top: 1em;
}
.sitemap_list .list .kai {
font-size: max(82.5%, .625rem);
}
.sitemap_list .list .instagram {
font-size: max(87.5%, .625rem);
}
.sitemap_list .list .kai .link,
.sitemap_list .list .instagram .link {
display: flex;
align-items: center;
width: fit-content;
column-gap: .5em;
}
.sitemap_list .list .kai .ico {
fill: none;
stroke: currentcolor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
.sitemap_list .list .kai .ico,
.sitemap_list .list .instagram .ico {
width: 1.5em;
height: auto;
}
.sitemap_list .list .link {
display: inline-block;
padding: .125em 0;
}
.sitemap_list .list .link .num {
font-size: 108%;
line-height: 1;
}
.sitemap_list .list .link[aria-current="page"] {
background-size: calc(100% - .2em) .5em;
}
.sitemap_list .list .link.-comingsoon {
cursor: default;
opacity: .3;
}
.sitemap_list .list .list {
margin-top: 0;
padding-left: 1em;
}
.sitemap_list .people-guide .list {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
column-gap: 1.4em;
}
.sitemap_list .list .list .link::before {
content: "";
display: inline-block;
width: .6em;
margin-right: .2em;
border-bottom: .1em solid currentcolor;
vertical-align: baseline;
}
@media (hover) {
.sitemap_list .link {
background: linear-gradient(white, white) right bottom / 0 8px no-repeat;
transition: background-size .4s var(--easeOut);
}
.sitemap_list .link[href]:hover {
background-position: left bottom;
background-size: 100% 8px;
transition-duration: .2s;
}
}
@media screen and (max-width: 767.98px) {
.sitemap_list {
--fontBasis: 12;
--fontMin: .6875rem;
}
.sitemap_list .list .link {
padding: .25em 0;
}
.sitemap_list .chapter > .label {
--fontBasis: 10;
--fontMin: .625rem;
}
}
/**
* People blank
* -------------------------------------------------- */
.people_blank {
display: flex;
justify-content: end;
align-items: center;
position: relative;
}
.people_blank img {
position: relative;
width: min(var(--cw) * var(--w) / 1440, var(--w) * 1px);
margin-left: max(var(--cw) * var(--shift) / 1440, var(--shift) * 1px);
}
.people_blank img[width="204"] { --w: 204; }
.people_blank img[width="192"] { --w: 192; }
.people_blank img[width="194"] { --w: 194; }
.people_blank img[width="171"] { --w: 171; }
.people_blank img[width="212"] { --w: 212; }
.people_blank img[width="182"] { --w: 182; }
.people_blank .p1,
.people_blank .p6 { --shift: -48; }
.people_blank .p2,
.people_blank .p5 { --shift: -80; }
.people_blank .p3 { --shift: -56; }
.people_blank .p4 { --shift: -40; }
.people_blank .p2,
.people_blank .p4 {
align-self: start;
}
/**
* Navigation
* -------------------------------------------------- */
.l-nav {
z-index: 5;
position: fixed;
inset: 0;
}
.nav_overlay {
z-index: -1;
position: absolute;
inset: 0;
background: #f5f5f5f5;
backdrop-filter: blur(8px);
}
.nav_overlay::before,
.nav_overlay::after {
content: "";
position: absolute;
inset: 0;
}
.nav_overlay::before {
background: url('data:image/svg+xml;charset=utf-8,') center / 10px 10px repeat;
}
.nav_overlay::after {
background: url('data:image/svg+xml;charset=utf-8,') center / 10px 10px repeat;
}
.nav_container {
display: grid;
overflow: auto;
overscroll-behavior: contain;
padding: 2em var(--sidegap);
}
.nav_container .logo {
display: block;
width: clamp(76px, var(--cw) * 170 / 1440, 170px);
}
.nav_container .logo svg {
width: 100%;
height: auto;
}
.nav_container .sitemap_list .people-guide {
margin-bottom: .25em;
}
.nav_container .sitemap_list .chapter > .label {
--fontBasis: 24;
--fontMin: .8125rem;
font-size: var(--fontSize);
}
.nav_container .sitemap_list .chapter > .label .en {
color: var(--themecolor);
}
.nav_container .people_blank {
place-self: end start;
}
.nav_container .people_blank img {
width: min(var(--cw) * var(--w) * .4 / 1440, var(--w) * .4px);
margin-left: max(var(--cw) * var(--shift) * .4 / 1440, var(--shift) * .4px);
}
@media print, (min-width: 768px) {
.l-nav {
display: grid;
place-items: center;
}
.nav_container {
grid-auto-flow: dense;
grid-template-columns: auto auto;
gap: min(var(--cw) * 40 / var(--aspect), 40px);
}
.nav_container .logo {
grid-column: 1;
justify-self: center;
}
.nav_container .people_blank {
grid-column: 1;
}
.nav_container .sitemap_list {
grid-row: span 2;
grid-column: 2;
grid-auto-flow: dense;
grid-template-columns: auto auto;
gap: min(var(--cw) * 40 / var(--aspect), 40px);
}
.nav_container .sitemap_list .-project,
.nav_container .sitemap_list .-people {
grid-column: 2;
}
.nav_container .sitemap_list .-people {
grid-row: span 2;
align-self: start;
}
}
@media screen and (max-width: 767.98px) {
.nav_container {
justify-items: center;
row-gap: clamp(24px, var(--cw) * 32 / var(--aspect), 48px);
position: absolute;
inset: 0;
padding-top: 64px;
}
.nav_container .logo {
order: 1;
width: min(var(--cw) * 76 / var(--aspect), 170px);
}
.nav_container .sitemap_list {
gap: min(var(--cw) * 16 / var(--aspect), 32px);
--fontBasis: 14;
--fontMin: .75rem;
}
.nav_container .sitemap_list .chapter > .label {
--fontBasis: 10;
--fontMin: .625rem;
}
.nav_container .sitemap_list .link {
padding: .3em 0;
}
.nav_container .sitemap_list .chapter > .list > li > .link::after {
content: "";
display: inline-block;
position: relative;
top: -.1em;
margin-left: .25em;
width: 1.25em;
height: calc(1.25em * .423);
vertical-align: middle;
background: url('data:image/svg+xml;charset=utf-8,') center / contain no-repeat;
}
.nav_container .people_blank {
display: none;
}
}
/* motion */
.l-nav:not(.is-active) {
pointer-events: none;
visibility: hidden;
}
.l-nav .nav_overlay,
.l-nav .nav_container {
clip-path: inset(0);
}
.l-nav:not(.is-open) .nav_overlay,
.l-nav:not(.is-open) .nav_container {
clip-path: inset(0 0 100%);
}
.l-nav.is-motion .nav_overlay,
.l-nav.is-motion .nav_container {
transition: clip-path .4s var(--easeOut);
}
.l-nav.is-motion:not(.is-open) .nav_overlay,
.l-nav.is-motion.is-open .nav_container {
transition-delay: .2s;
}
/**
* Footer
* -------------------------------------------------- */
.l-footer > * {
width: min(100%, 1440px);
margin: 0 auto;
}
/* :::::: Pagetop :::::: */
.l-footer .pagetop {
--size: 48px;
display: grid;
justify-items: center;
width: var(--size);
margin-bottom: clamp(48px, var(--cw) * 128 / 1440, 128px);
}
.l-footer .pagetop > svg {
fill: currentcolor;
}
.l-footer .pagetop::before {
order: 1;
content: "";
width: var(--size);
height: var(--size);
border-radius: var(--size);
background: var(--themecolor);
}
.l-footer .pagetop .arrow {
z-index: 1;
margin: 8px 0 -24px;
}
.l-footer .pagetop .arrow .stroke {
height: var(--size);
fill: none;
stroke: currentcolor;
stroke-width: var(--strokeWidth);
}
@media (hover) {
.l-footer .pagetop > svg,
.l-footer .pagetop::before,
.l-footer .pagetop .arrow,
.l-footer .pagetop .arrow .stroke {
transition: transform .4s var(--easeOut);
}
.l-footer .pagetop:hover > svg,
.l-footer .pagetop:hover::before,
.l-footer .pagetop:hover .arrow,
.l-footer .pagetop:hover .arrow .stroke {
transition: transform .4s var(--easeOut);
transition-duration: .2s;
}
.l-footer .pagetop .arrow .stroke {
transform-origin: center top;
}
.l-footer .pagetop:hover::before {
transform: scale(1.166);
}
.l-footer .pagetop:hover > svg,
.l-footer .pagetop:hover .arrow {
transform: translateY(8px);
}
.l-footer .pagetop:hover .arrow .stroke {
transform: scaleY(.844);
}
}
.l-footer .pagetop .arrow .arr {
display: block;
width: 7px;
height: 7px;
margin: 0 0 -4px;
fill: currentcolor;
}
/* :::::: Sitemap :::::: */
.l-footer .sitemap {
display: grid;
align-items: center;
padding: 40px var(--sidegap);
border-image: linear-gradient(var(--themecolor), var(--themecolor)) 0 fill / 0 / 0 50vw;
}
.l-footer .sitemap .logo {
display: block;
width: clamp(76px, var(--cw) * 170 / var(--aspect), 170px);
}
.l-footer .sitemap .logo svg {
width: 100%;
height: auto;
}
.l-footer .sitemap_list {
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
gap: 40px min(var(--cw) * 40 / 1440, 40px);
}
.l-footer .sitemap_list .chapter > .label {
color: white;
}
@media print, (min-width: 768px) {
.l-footer .sitemap {
grid-template-columns: 1fr auto;
column-gap: min(var(--cw) * 40 / var(--aspect), 40px);
}
}
@media screen and (max-width: 767.98px) {
.l-footer .sitemap {
justify-items: center;
row-gap: clamp(24px, var(--cw) * 32 / var(--aspect), 48px);
}
.l-footer .sitemap .logo {
order: 1;
width: min(var(--cw) * 76 / var(--aspect), 170px);
}
.l-footer .sitemap_list {
align-self: end;
align-items: start;
justify-content: center;
gap: 16px min(var(--cw) * 16 / var(--aspect), 40px);
}
.l-footer .sitemap_list .chapter:nth-child(1) { grid-area: 1 / 1; }
.l-footer .sitemap_list .chapter:nth-child(2) { grid-area: 3 / 1 / 4 / 3; }
.l-footer .sitemap_list .chapter:nth-child(3) { grid-area: 2 / 1; }
.l-footer .sitemap_list .chapter:nth-child(4) { grid-area: 1 / 2; }
.l-footer .sitemap_list .chapter:nth-child(5) { grid-area: 2 / 2; }
}
@media (max-width: 374.98px) {
.l-footer .sitemap_list .chapter {
grid-column: span 2
}
.l-footer .sitemap_list .chapter:nth-child(1) { grid-area: 1 / 1; }
.l-footer .sitemap_list .chapter:nth-child(2) { grid-area: 2 / 1; }
.l-footer .sitemap_list .chapter:nth-child(3) { grid-area: 3 / 1; }
.l-footer .sitemap_list .chapter:nth-child(4) { grid-area: 4 / 1; }
.l-footer .sitemap_list .chapter:nth-child(5) { grid-area: 5 / 1; }
}
/* :::::: People :::::: */
.l-footer .sitemap .people_blank {
place-self: end start;
}
.l-footer .sitemap .people_blank img {
width: min(var(--cw) * var(--w) * .4 / 1440, var(--w) * .4px);
margin-left: max(var(--cw) * var(--shift) * .4 / 1440, var(--shift) * .4px);
}
@media print, (min-width: 768px) {
.l-footer .sitemap .people_blank {
margin-top: max(-1.5em, -15px);
margin-left: min(1.5em, 15px);
}
}
@media screen and (max-width: 767.98px) {
.l-footer .sitemap .people_blank {
display: none;
}
}
/* :::::: Links :::::: */
.l-footer .links {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: min(var(--cw) * 24 / var(--aspect), 24px);
padding: 32px var(--sidegap);
color: white;
border-image: linear-gradient(black, black) 0 fill / 0 / 0 50vw;
}
.l-footer .links a {
display: inline-block;
padding: .5rem 0;
}
.l-footer .links_list {
grid-area: 1 / 1 / 3 / 2;
display: flex;
align-items: baseline;
column-gap: 2em;
font-weight: 500;
--fontBasis: 12;
font-size: var(--fontSize);
line-height: 1.5;
}
.l-footer .links_list a {
padding: .25rem 0;
}
.l-footer .links_list a[href="https://www.rui.ne.jp/"] {
font-weight: 700;
--fontBasis: 17;
--fontMin: .75rem;
font-size: var(--fontSize);
}
.l-footer .links a[aria-label="株式会社 類設計室"] {
justify-self: end;
width: clamp(98px, var(--cw) * 196 / 1440, 196px);
line-height: 0;
}
.l-footer .links a svg {
width: 100%;
height: auto;
fill: currentcolor;
}
.l-footer .copyright {
font: 300 .625rem / 1.25 "Josefin Sans", sans-serif;
}
@media (hover) {
.l-footer .links .link {
background: linear-gradient(white, white) right bottom / 0 8px no-repeat;
transition: background-size .4s var(--easeOut);
}
.l-footer .links .link[href]:hover {
background-position: left bottom;
background-size: 100% 8px;
transition-duration: .2s;
}
}
@media screen and (max-width: 767.98px) {
.l-footer .links {
align-items: end;
gap: min(var(--cw) * 24 / var(--aspect), 40px);
}
.l-footer .links_list {
grid-area: 1 / 1;
flex-wrap: wrap;
}
.l-footer .copyright {
grid-area: 2 / 1 / 3 / 3;
text-align: center;
}
}
/**
* Main
* -------------------------------------------------- */
.l-main {
overflow: hidden;
min-height: 80vh;
padding-bottom: clamp(48px, var(--cw) * 128 / 1440, 128px);
}
/* motion */
.l-main_part.is-hide {
opacity: 0;
}
.l-main_part.is-motion {
transition: opacity .4s;
}
.l-main_part.is-motion.is-hide {
transition-duration: .2s;
}
/**
* Component
* -------------------------------------------------- */
.title .num,
.c-subject .num {
position: relative;
top: .025em;
font-size: 112%;
font-weight: 600;
line-height: 1;
}
/* :::::: Typograph :::::: */
.c-subject {
font-weight: 700;
--fontBasis: 36;
--fontMin: 1rem;
font-size: var(--fontSize);
}
.c-label {
width: fit-content;
padding: .3em .4em 0 .8em;
color: var(--themecolor);
--fontBasis: 20;
--fontMin: .75rem;
font-size: var(--fontSize);
background: var(--dashedX), var(--dashedY);
background-position: left top, left bottom;
}
.c-paragraph {
font-size: var(--fontSize);
line-height: 2;
}
.c-paragraph em {
font-style: normal;
}
.c-paragraph strong {
color: var(--themecolor);
}
.c-note {
--fontBasis: 14;
--fontMin: .5625rem;
font-size: var(--fontSize);
line-height: 1.5;
}
.c-note.-idt {
padding-left: 1em;
text-indent: -1em;
}
@media screen and (max-width: 767.98px) {
.c-subject {
--fontBasis: 20;
}
.c-label {
--fontBasis: 16;
--fontMin: .6875rem;
}
.c-paragraph {
--fontBasis: 14;
line-height: 1.75;
}
.c-note {
--fontBasis: 10;
}
}
/* :::::: 虫眼鏡 :::::: */
.c-lupe {
--lh: 2;
--shift: 0;
--zoom: 200;
--top: .5;
--size: 4em;
display: inline-grid;
position: relative;
white-space: nowrap;
}
.c-lupe > * {
grid-area: 1 / 1;
}
.c-lupe .target {
padding-left: .65em;
letter-spacing: .65em;
}
.c-lupe .zoom::before,
.c-lupe .zoom::after {
position: absolute;
}
.c-lupe .zoom::before {
content: "";
top: calc(50% - var(--size) * var(--top));
left: calc(var(--shift) * .54);
width: var(--size);
height: calc(var(--size) * 1.1544);
background: url(../img/home/people_grass.svg) center / cover no-repeat;
}
.c-lupe .zoom::after {
content: attr(data-zoom);
top: calc(50% - var(--size) / var(--zoom) * 100 * var(--top));
left: calc(var(--shift) / var(--zoom) * 54);
width: calc(var(--size) / var(--zoom) * 100);
height: calc(var(--size) / var(--zoom) * 100);
font-size: calc(var(--zoom) * 1%);
line-height: var(--lh);
text-indent: calc(var(--shift) * -.4);
white-space: nowrap;
clip-path: inset(2px round 50%);
}
@media screen and (max-width: 767.98px) {
.c-lupe {
--size: 4em;
}
}
/* :::::: 対談 :::::: */
.c-paragraph.-talk {
--speaker: min(var(--cw) * 136 / 1440, 136px);
}
.c-paragraph.-talk .speaker {
align-self: start;
display: grid;
justify-items: center;
row-gap: .25em;
width: var(--speaker);
--fontMin: .5625rem;
font-size: var(--fontSize);
}
.c-paragraph.-talk .speaker img {
border-radius: 50%;
}
.c-paragraph.-talk .c-textlink {
color: inherit;
}
.c-paragraph.-talk .url {
color: gray;
word-break: break-all;
}
@media print, (min-width: 768px) {
.c-paragraph.-talk {
display: grid;
grid-auto-flow: row dense;
align-items: center;
column-gap: min(var(--cw) * 48 / var(--aspect), 48px);
grid-template-columns: var(--speaker) 1fr var(--speaker);
}
.c-paragraph.-talk .speaker {
height: var(--speaker);
}
.c-paragraph.-talk:nth-of-type(2n) .speaker {
grid-column: 3;
}
.c-paragraph.-talk:nth-of-type(2n) .t {
grid-column: 2;
}
}
@media screen and (max-width: 767.98px) {
.c-paragraph.-talk {
--speaker: calc(5.5em * 1.75);
}
.c-paragraph.-talk::after {
content: "";
display: block;
clear: both;
}
.c-paragraph.-talk .speaker {
float: left;
margin-right: 2em;
--fontBasis: 10;
}
}
/* :::::: Lists :::::: */
.c-cards {
--col: 3;
--gap: min(var(--cw) * 32 / var(--aspect), 32px);
display: grid;
grid-template-columns: repeat(var(--col), 1fr);
gap: var(--gap);
}
.c-cards .card {
display: grid;
align-content: start;
row-gap: 1em;
}
.c-cards .card:nth-child(3 + 1) {
margin-top: min(var(--cw) * 32 / var(--aspect), 32px);
}
.c-cards .card .image {
position: relative;
border-radius: 0 var(--radius) 0 0;
}
.c-cards .card .image::before {
--shadow: min(var(--cw) * 16 / var(--aspect), 16px);
content: "";
z-index: -1;
position: absolute;
inset: var(--shadow) calc(var(--shadow) * -1) calc(var(--shadow) * -1) var(--shadow);
border-radius: inherit;
background: var(--bgGrid);
}
@media screen and (max-width: 767.98px) {
.c-cards {
--col: 1;
--gap: calc(var(--cw) * 32 / var(--aspect));
}
.c-cards .card:nth-child(1 + 1) {
margin-top: min(var(--cw) * 32 / var(--aspect), 32px);
}
.c-cards .card .image::before {
--shadow: calc(var(--cw) * 8 / var(--aspect));
}
}
/* :::::: List :::::: */
.c-list {
line-height: 1.5;
}
.c-list li {
padding-left: .5em;
text-indent: -.5em;
}
.c-list li::before {
content: "";
display: inline-block;
position: relative;
top: -.1em;
width: .2em;
height: .2em;
margin-right: .3em;
border-radius: .2em;
vertical-align: middle;
background: currentcolor;
}
/* :::::: Link arrow :::::: */
.arr {
position: relative;
top: -.1em;
width: 1.5em;
height: auto;
vertical-align: middle;
}
/* :::::: Link :::::: */
.c-link {
display: block;
width: fit-content;
position: relative;
padding-bottom: .5em;
font-weight: 500;
}
.c-link::before {
content: "";
position: absolute;
inset: 0;
background: var(--dashedX);
}
.c-link .arr {
margin-right: .5em;
stroke: var(--themecolor);
}
.c-link.-comingsoon {
pointer-events: none;
opacity: .3;
}
.c-link.-comingsoon .arr {
stroke: gray;
}
@media (hover) {
.c-link {
transition: color .4s;
}
.c-link::before {
mask: linear-gradient(white, white) left bottom / 100% 8px no-repeat;
transition: mask-size .4s var(--easeOut);
}
.c-link:hover {
color: var(--themecolor);
transition-duration: .2s;
}
.c-link:hover::before {
mask-position: right bottom;
mask-size: 0 8px;
transition-duration: .2s;
}
}
/* :::::: Text link :::::: */
.c-textlink {
color: var(--themecolor);
background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
@media (hover) {
.c-textlink {
cursor: pointer;
transition: background-size .4s cubic-bezier(.3,1,.7,1);
}
.c-textlink:hover {
background-position: right bottom;
background-size: 0 1px;
transition-duration: .2s;
}
}
/* :::::: Tab button :::::: */
.c-tab {
--arrowSize: min(var(--cw) * 16 / var(--aspect), 16px);
position: relative;
padding: 1em 2em;
font-weight: 700;
--fontBasis: 20;
--fontMin: .75rem;
font-size: var(--fontSize);
line-height: 1.5;
text-align: center;
background: white;
transition: background-color .1s;
}
.c-tab::before {
content: "";
position: absolute;
bottom: 100%;
left: calc(50% - var(--arrowSize) * .5);
width: var(--arrowSize);
height: var(--arrowSize);
clip-path: polygon(0 0, 100% 0, 50% 100%);
background: var(--themecolor);
transition: opacity .4s, translate .4s var(--easeOut);
}
.c-tab.is-active {
background: #ffe5df;
transition-duration: .4s
}
.c-tab:not(.is-active)::before {
opacity: 0;
translate: 0 .5em;
transition-duration: .1s
}
@media (hover) {
.c-tab {
cursor: pointer;
}
}
@media screen and (max-width: 767.98px) {
.c-tab {
--arrowSize: calc(var(--cw) * 12 / var(--aspect));
padding: .75em 1em;
--fontBasis: 16;
--fontMin: .625rem;
}
}
/* :::::: Button :::::: */
.c-button {
display: block;
width: fit-content;
padding: 1.25em 2.5em;
border-radius: 5em;
color: white;
font: 400 1rem / 1.5 var(--font);
font-size: clamp(.625rem, var(--cw) * 20 / var(--aspect), 1rem); /* イレギュラー */
text-align: center;
text-transform: uppercase;
letter-spacing: .1em;
background: black;
}
.c-button .label {
z-index: 1;
position: relative;
}
.c-button .arr {
margin-right: 1em;
stroke: currentcolor;
stroke-width: var(--strokeWidth);
}
@media screen and (max-width: 767.98px) {
.c-button {
font-size: clamp(.625rem, var(--cw) * 12 / var(--aspect), 1rem);
}
}
.c-button .pointer {
position: absolute;
}
@media (hover) {
.c-button {
--y: 0;
--x: 0;
cursor: pointer;
overflow: hidden;
}
.c-button .pointer {
pointer-events: none;
position: absolute;
inset: -24px;
border-radius: inherit;
transform: translate(var(--x), var(--y));
}
.c-button .pointer::before {
content: "";
position: absolute;
top: 0;
left: 0;
aspect-ratio: 1 / 1;
width: 170%;
border-radius: 50%;
background: var(--themecolor);
translate: -50% -50%;
transition: scale .3s var(--easeOut);
}
.c-button:not(:hover) .pointer::before {
scale: 0;
transition-duration: .3s;
}
}
/* :::::: Video UI :::::: */
.c-video,
.c-video .poster,
.c-video .poster .play {
display: grid;
place-items: center;
}
.c-video > *,
.c-video .poster > * {
grid-area: 1 / 1;
}
.c-video .poster,
.c-video .poster .play {
z-index: 1;
transition: opacity .4s;
}
.c-video .poster {
position: relative;
--fontBasis: 16;
--fontMin: .625rem;
font-size: var(--fontSize);
}
.c-video .poster .play {
--size: min(var(--cw) * 160 / 1440, 160px);
width: var(--size);
height: var(--size);
border: 1px solid white;
border-radius: var(--size);
transition: opacity .4s, scale .4s;
}
.c-video .poster .play .arr {
overflow: visible;
width: calc(var(--size) * .25);
height: calc(var(--size) * .3);
margin-left: calc(var(--size) * .075);
fill: none;
stroke: white;
stroke-width: 1;
}
.c-video .poster::after {
content: "";
position: absolute;
inset: 0;
border-top: 1em solid var(--themecolor);
border-bottom: 1em solid var(--themecolor);
background: #0002;
transition: border-width .4s, background-color .4s;
}
.c-video .poster .play,
.c-video .poster::after {
transition-timing-function: var(--easeOut);
}
.c-video.is-playing .poster {
pointer-events: none;
opacity: 0;
transition-duration: .2s;
}
.c-video.is-playing .poster .play {
opacity: 0;
scale: 1.2;
}
.c-video.is-playing .poster::after {
border-width: 0;
}
@media (hover) {
.c-video .poster {
cursor: pointer;
}
.c-video .poster:hover .play,
.c-video .poster:focus-visible .play {
scale: 1.08;
}
.c-video .poster:hover::after,
.c-video .poster:focus-visible::after {
border-width: .6em;
background: #0004;
}
}
/* :::::: Scrollbar :::::: */
@media screen and (max-width: 767.98px) {
.c-scrollbar {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--themecolor) #ccc;
}
.c-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.c-scrollbar::-webkit-scrollbar-thumb {
border-radius: 6px;
background: var(--themecolor);
box-shadow: 0 0 0 .5px white;
}
.c-scrollbar::-webkit-scrollbar-track {
border-radius: 6px;
background: whitesmoke;
}
.c-scrollbar::-webkit-scrollbar-button,
.c-scrollbar::-webkit-scrollbar-corner {
dispaly: none;
}
.c-scrollbar.-white {
scrollbar-color: white #ccc;
}
.c-scrollbar.-white ::-webkit-scrollbar-thumb{
background: white;
box-shadow: 0 0 0 .5px var(--themecolor);
}
/* for Simplebar.js */
.c-scrollbar .simplebar-track.simplebar-vertical {
display: none;
}
.c-scrollbar .simplebar-scrollbar:before,
.c-scrollbar .simplebar-scrollbar.simplebar-visible:before {
opacity: 1;
background: var(--themecolor);
box-shadow: 0 0 0 .5px #fff8;
}
.c-scrollbar.-white .simplebar-scrollbar.simplebar-visible:before {
background: white;
box-shadow: 0 0 0 .5px var(--themecolor);
}
}
/**
* Utility / JavaScript
* -------------------------------------------------- */
.u-visuallyhidden {
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
}
.u-align_c {
text-align: center;
justify-self: center;
}
.u-align_r {
text-align: right;
justify-self: right;
}
svg.line {
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Typography */
.c.pnc { /* 句読点 */
display: inline-block;
width: .7em;
}
.c.nkgr { /* 中黒 */
margin-inline: -.15em;
}
.c.bs { /* Brackets start (行頭の鉤括弧に) */
margin-inline-start: -.5em;
}
.c.bo { /* Brackets open */
margin-inline-start: -.3em;
}
.c.bc { /* Brackets close */
margin-inline-end: -.3em;
}
.is-fixed {
position: fixed;
inset: 0;
}
.scrollbar.is-fixed {
overflow-y: scroll;
}
:root {
--themecolor: #ff5028;
--tagblue: #005bac;
--tagorange: #e76c1a;
--taggreen: #147b3b;
--taggray: #61899c;
--tagsilver: #b0c4cd;
--white: white;
--black: black;
--aspect: 1440;
--font: "Inter", "Zen Kaku Gothic Antique", sans-serif;
--fontJa: "Zen Kaku Gothic Antique", sans-serif;
--fontEn: "Reddit Sans Condensed", sans-serif;
--fontNum: "Barlow Condensed", sans-serif;
--fontBasis: 16;
--fontMin: .625rem;
--easeIn: cubic-bezier(.3,0,.7,0);
--easeOut: cubic-bezier(.3,1,.7,1);
--easeInOut: cubic-bezier(.7,0,.3,1);
--easeBack: cubic-bezier(.3,1.6,.7,1)
}
* {
--fontSize: clamp(var(--fontMin), var(--cw) * var(--fontBasis) / var(--aspect), var(--fontBasis) * .0625rem);
--fontLiquid: max(var(--cw) * var(--fontBasis) / var(--aspect), var(--fontMin));
}
@media screen and (max-width: 767.98px) {
:root {
--aspect: 375;
--fontBasis: 14;
}
* {
--fontSize: max(var(--cw) * var(--fontBasis) / var(--aspect), var(--fontMin));
--fontLiquid: max(var(--cw) * var(--fontBasis) / var(--aspect), var(--fontMin));
}
}
body {
/* container: body / inline-size;
* コンテナクエリを使うと position: relative できなくなってしまうので
* JavaScript で明示的に body の横幅 を取得して変数 --cw に保持
* var(--cw) * {目標サイズ} / {ブレイクポイント} という式で使う */
--cw: 100vw; /* Container Width */
--vh: 100svh;
--breakout: calc(50% - var(--cw) * .5);
/* 画面幅が 1440px の時に左右パディングが 120px となるよう伸縮 (最大 120px) */
--sidegap: min(var(--cw) * 120 / var(--aspect), 120px);
--radius: min(var(--cw) * 30 / var(--aspect), 30px);
--sectionSpace: min(var(--cw) * 80 / var(--aspect), 80px);
--strokeWidth: 1px;
/* preserveAspectRatio="slice" = アスペクト比を維持して伸縮 = 線幅はbackground-sizeによって可変 */
--dashedXSvg: url('data:image/svg+xml;charset=utf-8,');
--dashedYSvg: url('data:image/svg+xml;charset=utf-8,');
/* 画面幅が 1440px のとき線幅 2px となるよう伸縮 (最太 2px) */
--dashedX: var(--dashedXSvg) left bottom / min(var(--cw) * 200 / var(--aspect), 200px) auto repeat-x;
--dashedY: var(--dashedYSvg) left top / auto min(var(--cw) * 200 / var(--aspect), 200px) repeat-y;
/* グリッド背景 */
--bgGrid: whitesmoke var(--bgGridSvg) center / 17px;
--bgGridSvg: url('data:image/svg+xml;charset=utf-8,');
--dashedTalkMember: url('data:image/svg+xml;charset=utf-8,');
}
::-webkit-full-page-media, :future, :root body {
--dashedX: var(--dashedXSvg) left bottom / 200px auto repeat-x;
--dashedY: var(--dashedYSvg) left top / auto 200px repeat-y;
}
@media print, (min-width: 768px) {
.u-md { display: none !important; }
}
@media screen and (max-width: 1079.98px) {
::-webkit-full-page-media, :future, :root body {
--dashedX: var(--dashedXSvg) left bottom / 150px auto repeat-x;
--dashedY: var(--dashedYSvg) left top / auto 150px repeat-y;
}
}
@media screen and (max-width: 767.98px) {
.u-dt { display: none !important; }
body {
--sidegap: calc(var(--cw) * 24 / var(--aspect));
--radius: min(var(--cw) * 10 / var(--aspect), 30px);
--sectionSpace: calc(var(--cw) * 48 / var(--aspect));
--strokeWidth: clamp(.5px, var(--cw) * .5 / var(--aspect), 1px);
/* 画面幅が 375px のとき線幅 1px となるよう伸縮 (最細 1px) */
--dashedX: var(--dashedXSvg) left bottom / max(var(--cw) * 100 / var(--aspect), 100px) auto repeat-x;
--dashedY: var(--dashedYSvg) left top / auto max(var(--cw) * 100 / var(--aspect), 100px) repeat-y;
}
}
@media screen and (max-width: 479.97px) {
::-webkit-full-page-media, :future, :root body {
--dashedX: var(--dashedXSvg) left bottom / 100px auto repeat-x;
--dashedY: var(--dashedYSvg) left top / auto 100px repeat-y;
}
}
html {
scroll-behavior: auto;
-webkit-text-size-adjust: 100%;
}
body {
overscroll-behavior: auto;
color: var(--black);
font: 400 1em / 1.75 var(--font);
letter-spacing: .05em;
/* -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; */
background: var(--white);
}
*,*::before,*::after{box-sizing:border-box;}
:where(ul,ol){list-style:none;padding:0;}
:where(img,svg,video,iframe){vertical-align:middle;}
:where(img[height],picture>img,video[height]){height:auto;}
:where(input,button,textarea,select,small){font:inherit;}
:where(body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd){margin:0;}
:where(img,picture,video,iframe){display:inline-block;max-width:100%;}
:where(a){color:inherit;text-decoration:inherit!important;text-decoration-skip-ink:auto;}
:where(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;color:currentcolor;background:none;}
:where(sub){vertical-align:baseline;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}
/** splide-core.min.css */
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
/* simplebar.min.css */
[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}