@charset "UTF-8";
 [data-sa=fadeIn] {
opacity: var(--sa-fadeIn-opacity, 0);
transition-property: opacity;
transition-duration: var(--sa-fadeIn-duration-override, var(--sec-slow));
}
[data-sa=fadeIn].is-show {
--sa-fadeIn-opacity: 1;
}
[data-sa=fadeInUp] {
--sa-fadeInUp-translate-default: var(--sa-fadeInUp-translate-override, 0 50px);
opacity: var(--sa-fadeInUp-opacity, 0);
translate: var(--sa-fadeInUp-translate, var(--sa-fadeInUp-translate-default));
transition-property: opacity, translate;
transition-duration: var(--sa-fadeInUp-duration-override, var(--sec-slow));
}
[data-sa=fadeInUp].is-show {
--sa-fadeInUp-opacity: 1;
--sa-fadeInUp-translate: none;
}
[data-sa=mask] {
position: relative;
visibility: hidden;
width: fit-content;
}
[data-sa=mask]::after {
content: "";
position: absolute;
inset: 0;
visibility: visible;
background-color: var(--sa-mask-color, currentColor);
clip-path: inset(0 100% 0 0);
}
[data-sa=mask].is-show {
animation-name: sa-mask;
animation-duration: var(--sa-mask-duration, var(--sec-slow));
animation-fill-mode: both;
}
[data-sa=mask].is-show::after {
animation-name: sa-mask-before;
animation-duration: var(--sa-mask-duration, var(--sec-slow));
animation-fill-mode: both;
}
[data-sa=scaleIn] {
scale: var(--sa-scaleIn-scale, 0);
opacity: var(--sa-scaleIn-opacity, 0);
transition-property: scale, opacity;
transition-duration: var(--sa-scaleIn-duration-override, var(--sec-slow));
}
[data-sa=scaleIn].is-show {
--sa-scaleIn-scale: 1;
--sa-scaleIn-opacity: 1;
} [data-sa-parent*=fadeIn].is-show {
--sa-fadeIn-group-opacity: 1;
--sa-fadeIn-group-translate: none;
}
[data-sa-child*=fadeIn] {
opacity: var(--sa-fadeIn-group-opacity, 0);
transition-property: opacity;
transition-duration: var(--sa-fadeIn-group-duration-override, var(--sec-slow));
}
[data-sa-parent*=fadeInUp].is-show {
--sa-fadeInUp-group-opacity: 1;
--sa-fadeInUp-group-translate: none;
}
[data-sa-child*=fadeInUp] {
--sa-fadeInUp-group-translate-default: var(--sa-fadeInUp-group-translate-override, 0 50px);
opacity: var(--sa-fadeInUp-group-opacity, 0);
translate: var(--sa-fadeInUp-group-translate, var(--sa-fadeInUp-group-translate-default));
transition-property: opacity, translate;
transition-duration: var(--sa-fadeInUp-group-duration-override, var(--sec-slow));
}
[data-sa-parent=mask] {
position: relative;
visibility: hidden;
width: fit-content;
}
[data-sa-parent=mask]::after {
content: "";
position: absolute;
inset: 0;
visibility: visible;
background-color: var(--sa-mask-color, currentColor);
clip-path: inset(0 100% 0 0);
}
[data-sa-child=mask].is-show [data-sa-group=mask] {
animation-name: sa-mask;
animation-duration: var(--sa-mask-duration, var(--sec-slow));
animation-delay: var(--sa-mask-delay, 0s);
animation-fill-mode: both;
}
[data-sa-child=mask].is-show [data-sa-group=mask]::after {
animation-name: sa-mask-before;
animation-duration: var(--sa-mask-duration, var(--sec-slow));
animation-delay: var(--sa-mask-delay, 0s);
animation-fill-mode: both;
}
[data-sa-parent*=scaleIn].is-show {
--sa-scaleIn-group-scale: 1;
--sa-scaleIn-group-opacity: 1;
}
[data-sa-child*=scaleIn] {
scale: var(--sa-scaleIn-group-scale, 0);
opacity: var(--sa-scaleIn-group-opacity, 0);
transition-property: scale, opacity;
transition-duration: var(--sa-scaleIn-group-duration-override, var(--sec-slow));
} @keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scaleIn {
0% {
scale: 0;
}
100% {
scale: 1;
}
}
@keyframes marquee {
0% {
translate: 0 0;
}
100% {
translate: -100% 0;
}
}
@keyframes sa-mask {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
50.01% {
visibility: visible;
}
100% {
visibility: visible;
}
}
@keyframes sa-mask-before {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
@keyframes border-anime {
0% {
background-size: 0 var(--m-border-width);
}
100% {
background-size: 100% var(--m-border-width);
}
}
.l-wrapper {
min-width: var(--min-device-width);
}
.l-container {
container: l-container/inline-size;
}
.l-section {
--l-section-inner-width-default: var(--site-width);
--l-section-space-inline-default: var(--space-inline);
--l-section-space-inline: var(--l-section-space-inline-override, var(--l-section-space-inline-default));
}
.l-section:where(._gutter) {
padding-inline: var(--l-section-space-inline);
}
.l-section._container {
container: l-section/inline-size;
}
.l-section__inner {
--l-section-inner-width: var(--l-section-inner-width-override, var(--l-section-inner-width-default));
width: 100%;
max-width: var(--l-section-inner-width);
margin-inline: auto;
background-clip: content-box;
}
.l-section__inner._container {
container: l-section-inner/inline-size;
}
.l-section__inner:where(._gutter) {
max-width: calc( 						var(--l-section-inner-width) + 						(var(--l-section-space-inline) * 2) 					);
padding-inline: var(--l-section-space-inline);
}
.l-section__full {
margin-inline: calc(var(--l-section-space-inline) * -1);
}
.l-column {
--l-column-head-width-default: 410px;
--l-column-columnGap-default: 20px;
--l-column-rowGap-default: 0;
--l-column-head-width: var(--l-column-head-width-override, var(--l-column-head-width-default));
--l-column-columnGap: var(--l-column-columnGap-override, var(--l-column-columnGap-default));
--l-column-rowGap: var(--l-column-rowGap-override, var(--l-column-rowGap-default));
display: grid;
grid-template-columns: var(--l-column-head-width) 1fr;
column-gap: var(--l-column-columnGap);
row-gap: var(--l-column-rowGap);
}
.l-column__head {
grid-area: 1/1/2/2;
}
.l-column__head._sticky {
position: sticky;
top: calc(var(--header-size) + var(--space-block-lg));
align-self: start;
}
.l-column__body {
min-width: 0;
}
.l-column:where(:has(.l-column__foot)) {
grid-template-rows: 1fr auto;
}
.l-column:where(:has(.l-column__foot)) .l-column__body {
grid-row: span 2;
}
.l-column._vertical {
grid-template-columns: 1fr;
}
.l-column._vertical .l-column__head {
position: revert;
}
.l-column._vertical .l-column__body {
grid-row: span 1;
}
@media (width <= 1400px) {
.l-column._vertical\@xl {
grid-template-columns: 1fr;
}
.l-column._vertical\@xl .l-column__head {
position: revert;
}
.l-column._vertical\@xl .l-column__body {
grid-row: span 1;
}
}
@media (width <= 1000px) {
.l-column._vertical\@lg {
grid-template-columns: 1fr;
}
.l-column._vertical\@lg .l-column__head {
position: revert;
}
.l-column._vertical\@lg .l-column__body {
grid-row: span 1;
}
}
@media (width <= 900px) {
.l-column._vertical\@md {
grid-template-columns: 1fr;
}
.l-column._vertical\@md .l-column__head {
position: revert;
}
.l-column._vertical\@md .l-column__body {
grid-row: span 1;
}
}
@media (width <= 800px) {
.l-column._vertical\@md2 {
grid-template-columns: 1fr;
}
.l-column._vertical\@md2 .l-column__head {
position: revert;
}
.l-column._vertical\@md2 .l-column__body {
grid-row: span 1;
}
}
@media (width <= 768px) {
.l-column._vertical\@sm {
grid-template-columns: 1fr;
}
.l-column._vertical\@sm .l-column__head {
position: revert;
}
.l-column._vertical\@sm .l-column__body {
grid-row: span 1;
}
}
@media (width <= 700px) {
.l-column._vertical\@sm2 {
grid-template-columns: 1fr;
}
.l-column._vertical\@sm2 .l-column__head {
position: revert;
}
.l-column._vertical\@sm2 .l-column__body {
grid-row: span 1;
}
}
@media (width <= 600px) {
.l-column._vertical\@sm3 {
grid-template-columns: 1fr;
}
.l-column._vertical\@sm3 .l-column__head {
position: revert;
}
.l-column._vertical\@sm3 .l-column__body {
grid-row: span 1;
}
}
@media (width <= 500px) {
.l-column._vertical\@xs {
grid-template-columns: 1fr;
}
.l-column._vertical\@xs .l-column__head {
position: revert;
}
.l-column._vertical\@xs .l-column__body {
grid-row: span 1;
}
}
@media (width <= 400px) {
.l-column._vertical\@xs2 {
grid-template-columns: 1fr;
}
.l-column._vertical\@xs2 .l-column__head {
position: revert;
}
.l-column._vertical\@xs2 .l-column__body {
grid-row: span 1;
}
}
.l-split-header {
--l-bend-columnGap-default: 20px;
--l-bend-rowGap-default: 0;
--l-bend-columnGap: var(--l-bend-columnGap-override, var(--l-bend-columnGap-default));
--l-bend-rowGap: var(--l-bend-rowGap-override, var(--l-bend-rowGap-default));
display: grid;
grid-template-columns: 1fr auto;
column-gap: var(--l-bend-columnGap);
row-gap: var(--l-bend-rowGap);
}
.l-split-header__body {
grid-column: span 2;
}
.l-split-header__foot {
grid-area: 1/2/2/3;
}
.l-split-header:not(:has(.l-split-header__foot)) .l-split-header__head {
grid-column: span 2;
}
.l-split-header._vertical {
grid-template-columns: 1fr;
}
.l-split-header._vertical .l-split-header__head,
.l-split-header._vertical .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical .l-split-header__foot {
grid-area: auto;
}
@media (width <= 1400px) {
.l-split-header._vertical\@xl {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@xl .l-split-header__head,
.l-split-header._vertical\@xl .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@xl .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 1000px) {
.l-split-header._vertical\@lg {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@lg .l-split-header__head,
.l-split-header._vertical\@lg .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@lg .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 900px) {
.l-split-header._vertical\@md {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@md .l-split-header__head,
.l-split-header._vertical\@md .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@md .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 800px) {
.l-split-header._vertical\@md2 {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@md2 .l-split-header__head,
.l-split-header._vertical\@md2 .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@md2 .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 768px) {
.l-split-header._vertical\@sm {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@sm .l-split-header__head,
.l-split-header._vertical\@sm .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@sm .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 700px) {
.l-split-header._vertical\@sm2 {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@sm2 .l-split-header__head,
.l-split-header._vertical\@sm2 .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@sm2 .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 600px) {
.l-split-header._vertical\@sm3 {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@sm3 .l-split-header__head,
.l-split-header._vertical\@sm3 .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@sm3 .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 500px) {
.l-split-header._vertical\@xs {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@xs .l-split-header__head,
.l-split-header._vertical\@xs .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@xs .l-split-header__foot {
grid-area: auto;
}
}
@media (width <= 400px) {
.l-split-header._vertical\@xs2 {
grid-template-columns: 1fr;
}
.l-split-header._vertical\@xs2 .l-split-header__head,
.l-split-header._vertical\@xs2 .l-split-header__body {
grid-column: span 1;
}
.l-split-header._vertical\@xs2 .l-split-header__foot {
grid-area: auto;
}
}
.l-row-gap {
--l-row-gap-default: 60px;
--l-row-gap: var(--l-row-gap-override, var(--l-row-gap-default));
display: flex;
flex-direction: column;
row-gap: var(--l-row-gap);
}
.l-row-gap._section {
--l-row-gap-default: var(--space-block-section);
}
.l-row-gap._xxl {
--l-row-gap-default: var(--space-block-xxl);
}
.l-row-gap._xxl-half {
--l-row-gap-default: var(--space-block-xxl-half);
}
.l-row-gap._xl {
--l-row-gap-default: var(--space-block-xl);
}
.l-row-gap._lg {
--l-row-gap-default: var(--space-block-lg);
}
.l-row-gap._md {
--l-row-gap-default: var(--space-block-md);
}
.l-row-gap._sm {
--l-row-gap-default: var(--space-block-sm);
}
.l-row-gap._xs {
--l-row-gap-default: var(--space-block-xs);
}
.l-row-gap._xxs {
--l-row-gap-default: var(--space-block-xxs);
}
.l-row-gap._xxxs {
--l-row-gap-default: var(--space-block-xxxs);
}
.l-row-gap._xxxxs {
--l-row-gap-default: var(--space-block-xxxxs);
}
.l-row-gap._section-trim {
--l-row-gap-default: var(--space-block-section-trim);
}
.l-row-gap._xxl-trim {
--l-row-gap-default: var(--space-block-xxl-trim);
}
.l-row-gap._xxl-half-trim {
--l-row-gap-default: var(--space-block-xxl-half-trim);
}
.l-row-gap._xl-trim {
--l-row-gap-default: var(--space-block-xl-trim);
}
.l-row-gap._lg-trim {
--l-row-gap-default: var(--space-block-lg-trim);
}
.l-row-gap._md-trim {
--l-row-gap-default: var(--space-block-md-trim);
}
.l-row-gap._sm-trim {
--l-row-gap-default: var(--space-block-sm-trim);
}
.l-row-gap._xs-trim {
--l-row-gap-default: var(--space-block-xs-trim);
}
.l-row-gap._xxs-trim {
--l-row-gap-default: var(--space-block-xxs-trim);
}
.l-row-gap._xxxs-trim {
--l-row-gap-default: var(--space-block-xxxs-trim);
}
.l-row-gap._xxxxs-trim {
--l-row-gap-default: var(--space-block-xxxxs-trim);
}
.l-spacer._section {
height: var(--space-block-section);
}
.l-spacer._xxl {
height: var(--space-block-xxl);
}
.l-spacer._xxl-half {
height: var(--space-block-xxl-half);
}
.l-spacer._xl {
height: var(--space-block-xl);
}
.l-spacer._lg {
height: var(--space-block-lg);
}
.l-spacer._md {
height: var(--space-block-md);
}
.l-spacer._sm {
height: var(--space-block-sm);
}
.l-spacer._xs {
height: var(--space-block-xs);
}
.l-spacer._xxs {
height: var(--space-block-xxs);
}
.l-spacer._xxxs {
height: var(--space-block-xxxs);
}
.l-spacer._xxxxs {
height: var(--space-block-xxxxs);
}
.l-spacer._section-trim {
height: var(--space-block-section-trim);
}
.l-spacer._xxl-trim {
height: var(--space-block-xxl-trim);
}
.l-spacer._xxl-half-trim {
height: var(--space-block-xxl-half-trim);
}
.l-spacer._xl-trim {
height: var(--space-block-xl-trim);
}
.l-spacer._lg-trim {
height: var(--space-block-lg-trim);
}
.l-spacer._md-trim {
height: var(--space-block-md-trim);
}
.l-spacer._sm-trim {
height: var(--space-block-sm-trim);
}
.l-spacer._xs-trim {
height: var(--space-block-xs-trim);
}
.l-spacer._xxs-trim {
height: var(--space-block-xxs-trim);
}
.l-spacer._xxxs-trim {
height: var(--space-block-xxxs-trim);
}
.l-spacer._xxxxs-trim {
height: var(--space-block-xxxxs-trim);
}
.l-media {
--l-media-content-width-default: 450px;
--l-media-columnGap-default: 50px;
--l-media-rowGap-default: var(--space-block-md);
--l-media-gutter-default: var(--site-gutter);
--l-media-vertical-order-default: "image" "content";
--l-media-gutter:
var(--l-media-gutter-override, var(--l-media-gutter-default));
--l-media-content-width:
var(--l-media-content-width-override, var(--l-media-content-width-default));
--l-media-columnGap:
var(--l-media-columnGap-override, var(--l-media-columnGap-default));
--l-media-rowGap:
var(--l-media-rowGap-override, var(--l-media-rowGap-default));
--l-media-vertical-order:
var(--l-media-vertical-order-override, var(--l-media-vertical-order-default));
display: grid;
grid-template-columns: var(--l-media-gridTemplateColumns);
grid-template-areas: var(--l-media-gridTemplateAreas);
column-gap: var(--l-media-columnGap);
row-gap: var(--l-media-rowGap);
}
.l-media:where(._v_reverse) {
--l-media-vertical-order-default: "content" "image";
}
@media (width <= 1000px) {
.l-media {
--l-media-columnGap-default: 25px;
}
}
.l-media:where(._gutter) {
padding-inline: var(--l-media-gutter);
}
.l-media:where(:not(._reverse)) {
--l-media-gridTemplateColumns: var(--l-media-content-width) 1fr;
--l-media-gridTemplateAreas: "content image";
}
.l-media:where(._reverse) {
--l-media-gridTemplateColumns: 1fr var(--l-media-content-width);
--l-media-gridTemplateAreas: "image content";
}
.l-media__content {
min-width: 0;
grid-area: content;
}
.l-media__image {
min-width: 0;
grid-area: image;
margin-inline: var(--l-media-marginInline, 0);
}
.l-media:where(._full):where(:not(._reverse)) {
--l-media-marginInline: 0 calc(var(--l-media-gutter) * -1);
}
.l-media:where(._full):where(._reverse) {
--l-media-marginInline: calc(var(--l-media-gutter) * -1) 0;
}
.l-media._vertical {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
@media (width <= 1400px) {
.l-media._vertical\@xl {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 1000px) {
.l-media._vertical\@lg {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 900px) {
.l-media._vertical\@md {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 800px) {
.l-media._vertical\@md2 {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 768px) {
.l-media._vertical\@sm {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 700px) {
.l-media._vertical\@sm2 {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 600px) {
.l-media._vertical\@sm3 {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 500px) {
.l-media._vertical\@xs {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
@media (width <= 400px) {
.l-media._vertical\@xs2 {
--l-media-gridTemplateColumns: 1fr;
--l-media-gridTemplateAreas: var(--l-media-vertical-order);
--l-media-marginInline: 0;
}
}
.mw_confirm-show {
display: none;
}
body:has(.mw_wp_form.mw_wp_form_confirm) .mw_confirm-hidden {
display: none;
}
body:has(.mw_wp_form.mw_wp_form_confirm) .mw_confirm-show {
display: revert;
} .wp-pagenavi {
display: grid;
justify-content: center;
align-items: center;
column-gap: 20px;
font-family: var(--ff-dominant);
font-size: 1.875rem;
line-height: 1.2;
grid-template: "first prev pages next last" auto/auto auto auto auto auto;
}
.wp-pagenavi_wrapper._mt {
margin-block-start: var(--space-block-lg);
}
.wp-pagenavi .pages {
grid-area: pages;
}
.wp-pagenavi .first {
grid-area: first;
}
.wp-pagenavi .previouspostslink {
grid-area: prev;
}
.wp-pagenavi .nextpostslink {
grid-area: next;
}
.wp-pagenavi .last {
grid-area: last;
}
.wp-pagenavi .current,
.wp-pagenavi .page,
.wp-pagenavi .extend {
display: none;
}
.wp-pagenavi .pages {
display: inline-flex;
column-gap: 2px;
align-items: center;
justify-content: center;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .first,
.wp-pagenavi .last {
text-decoration: none;
}
:where(.wp-block-post-content, .wp-gutenberg) {
font-size: 1rem;
line-height: 2;
--wp--preset--font-size--small: rem(14);
--wp--preset--font-size--medium: rem(16);
--wp--preset--font-size--large: rem(18);
--wp--preset--font-size--x-large: rem(20);
}
:where(.wp-block-post-content, .wp-gutenberg) a:not([class]) {
text-decoration: underline;
}
:where(.wp-block-post-content, .wp-gutenberg) a:not([class]):focus-visible {
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
:where(.wp-block-post-content, .wp-gutenberg) a:not([class]):hover {
text-decoration: none;
}
}
:where(.wp-block-post-content, .wp-gutenberg) :where(p, ol, ul, table,
[class*="wp-block"]):not(:last-child) {
margin-bottom: 40px;
}
.wp-block-heading {
margin-bottom: 40px;
border-bottom: 2px solid;
font-weight: 700;
}
h2.wp-block-heading {
font-size: 1.5rem;
}
h3.wp-block-heading {
font-size: 1.375rem;
}
h4.wp-block-heading {
font-size: 1.25rem;
}
h5.wp-block-heading {
font-size: 1.125rem;
}
h6.wp-block-heading {
font-size: 1rem;
}
:where(.wp-gutenberg :is(ul,ol):not([class])),
.wp-block-list {
padding-left: 1.4em;
}
:where(.wp-gutenberg ul:not([class])),
ul.wp-block-list {
list-style-type: disc;
}
:where(.wp-gutenberg ol:not([class])),
ol.wp-block-list {
list-style-type: decimal;
}
:where(.wp-gutenberg li:not([class])),
.wp-block-list-item {
list-style-type: inherit;
}
:where(.wp-block-post-content, .wp-gutenberg) :is(th, td) {
padding: 5px;
border: 1px solid;
text-align: left;
}
.c-heading {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxs);
margin-block-end: var(--space-block-xs);
}
.c-heading__mark {
padding: 0 5px;
color: var(--color-light);
font-family: var(--typography-dmn_lg-font-family);
font-weight: var(--typography-dmn_lg-font-weight);
font-size: var(--typography-dmn_lg-font-size);
line-height: var(--typography-dmn_lg-line-height);
--letter-spacing: var(--typography-dmn_lg-letter-spacing);
background: linear-gradient(transparent 0%, transparent 15%, var(--color-primary) 15%, var(--color-primary) 94%, transparent 94%, transparent 100%);
box-decoration-break: clone;
}
.c-heading__sub {
order: -10;
position: relative;
color: var(--color-primary);
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
padding-inline-start: 15px;
}
.c-heading__sub::before {
content: "";
position: absolute;
left: 0;
top: 0.5lh;
translate: 0 -35%;
width: 8px;
aspect-ratio: 1/1;
background-color: var(--color-primary);
border-radius: 9999px;
}
.c-heading2 {
margin-block-end: var(--space-block-sm);
font-family: var(--typography-title_md-font-family);
font-weight: var(--typography-title_md-font-weight);
font-size: var(--typography-title_md-font-size);
line-height: var(--typography-title_md-line-height);
--letter-spacing: var(--typography-title_md-letter-spacing);
}
.c-heading2::after {
content: "";
display: block;
width: 70px;
height: 4px;
margin-block-start: calc(var(--space-block-xxxs) - 2px);
background-color: var(--c-heading2-color, var(--color-primary));
}
.c-heading2._light {
color: var(--color-light);
--c-heading2-color: currentColor;
}
.c-heading2._center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.c-heading3 {
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 10px;
margin-block-end: var(--space-block-xxs);
color: var(--color-primary);
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.c-heading3::before {
content: "";
display: block;
height: 2px;
background-color: currentColor;
translate: 0 0.5lh;
}
.c-arrow {
display: grid;
place-content: center;
width: 38px;
aspect-ratio: 1/1;
border-radius: 9999px;
background-color: rgba(var(--color-primary-rgb), 0.2);
}
.c-arrow._plane {
width: fit-content;
aspect-ratio: revert;
background-color: transparent;
}
.c-arrow__icon {
transition-property: translate;
transition-duration: var(--sec);
}
.c-arrow_trigger:focus-visible .c-arrow__icon {
translate: 5px 0;
}
@media (hover: hover) and (pointer: fine) {
.c-arrow_trigger:hover .c-arrow__icon {
translate: 5px 0;
}
}
.c-arrow._c_secondary {
color: var(--color-secondary);
background-color: rgba(var(--color-secondary-rgb), 0.2);
}
.c-cityscape {
--c-cityscape-height: 128px;
--c-cityscape-overflow: 20px;
height: var(--c-cityscape-height);
}
@media (width <= 1000px) {
.c-cityscape {
--c-cityscape-height: 83px;
--c-cityscape-overflow: 10px;
}
}
.c-cityscape__bg {
position: relative;
height: calc(var(--c-cityscape-height) + var(--c-cityscape-overflow));
background: url(//nagaratrading.co.jp/tY8WaK46uN/assets/img/cmn/cityscape.svg) repeat-x center top;
}
@media (width <= 1000px) {
.c-cityscape__bg {
background-image: url(//nagaratrading.co.jp/tY8WaK46uN/assets/img/cmn/cityscape_sp.svg);
background-position: 0 0;
background-size: auto 100%;
}
}
.c-cityscape__illust {
position: absolute;
right: calc(50% + 106px);
bottom: 0;
}
@media (width <= 1000px) {
.c-cityscape__illust {
right: auto;
left: 105px;
width: 110px;
}
}
.c-arch {
margin-block-start: -1px;
display: flex;
justify-content: center;
}
.c-arch svg {
width: 100%;
min-width: 1400px;
height: 100px;
}
@media (width <= 768px) {
.c-arch svg {
min-width: 0;
height: 26px;
}
}
.c-character {
display: grid;
grid-template-columns: 120px 1fr;
column-gap: 10px;
border-radius: 9999px;
padding: 10px;
align-items: center;
color: var(--color-primary);
background-color: var(--color-bg-ash-light);
}
.c-character_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: var(--space-block-xxs);
}
@media (width <= 768px) {
.c-character_wrapper {
grid-template-columns: 1fr;
}
}
.c-character_container {
container: c-character/inline-size;
}
@container c-character (width <= 400px) {
.c-character {
grid-template-columns: 80px 1fr;
}
}
.c-character__image {
grid-area: 1/1/2/2;
position: relative;
aspect-ratio: 1/1;
clip-path: circle(50% at center);
}
.c-character__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-character__detail {
padding-block-start: var(--space-block-xxxxs);
}
.c-character__history {
margin-block-end: var(--space-block-xxxs-trim);
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.c-character__history br {
display: none;
}
@container c-character (width <= 360px) {
.c-character__history br {
display: revert;
}
}
.c-character__name {
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
}
.c-character__year {
display: inline-block;
min-width: 2.3em;
}
.c-list-categories {
border-radius: var(--radius);
padding: var(--space-block-xxs) var(--space-inline);
background-color: var(--color-bg-ash-light);
}
.c-list-categories__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-block-xxxs) 10px;
}
@media (width <= 768px) {
.c-list-categories__list {
justify-content: start;
}
}
.c-list-categories__list a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
min-height: 44px;
border: 2px solid var(--color-primary);
border-radius: 9999px;
padding: 5px 10px;
color: var(--c-list-categories-color, var(--color-primary));
font-family: var(--typography-std_md_bold-font-family);
font-weight: var(--typography-std_md_bold-font-weight);
font-size: var(--typography-std_md_bold-font-size);
line-height: var(--typography-std_md_bold-line-height);
--letter-spacing: var(--typography-std_md_bold-letter-spacing);
background-color: var(--c-list-categories-bg, var(--color-light));
transition-property: background-color;
transition-duration: var(--sec);
}
.c-list-categories__list .current-cat {
--c-list-categories-color: var(--color-light);
--c-list-categories-bg: var(--color-primary);
}
.c-categories {
display: flex;
flex-wrap: wrap;
gap: var(--space-block-xxxxs) 4px;
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
}
.c-categories > li {
display: flex;
align-items: center;
justify-content: center;
min-height: 20px;
color: var(--color-light);
background-color: var(--color-primary);
border-radius: 9999px;
padding-block-end: 2px;
padding-inline: 10px;
line-height: 1;
text-align: center;
}
.c-tel {
max-width: 464px;
border: 2px solid var(--color-primary);
border-radius: var(--radius);
padding: var(--space-block-xxs) 10px;
text-align: center;
}
.c-tel__main {
display: inline-flex;
align-items: center;
column-gap: 12px;
margin-block-end: var(--space-block-xxxxs);
color: var(--color-primary);
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.c-topic {
padding-block: var(--space-block-xxs);
padding-inline: 20px;
border-radius: var(--radius);
background-color: var(--color-bg-ash-light);
}
.c-topic__title {
margin-block-end: var(--space-block-xxxs);
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
.c-bread {
padding-block: var(--space-block-xxxs);
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
}
@media (width <= 768px) {
.c-bread {
display: none;
}
}
.c-bread__list {
word-break: break-all;
}
.c-bread__list > li {
display: inline;
}
.c-bread__list > li + li:before {
content: ">";
}
.c-button {
position: relative;
isolation: isolate;
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: 5px;
max-width: 100%;
width: 300px;
min-height: 64px;
padding-block: 5px;
padding-inline: 19px 11px;
border: 2px solid;
border-radius: 9999px;
color: var(--color-primary);
font-family: var(--typography-std_md_bold-font-family);
font-weight: var(--typography-std_md_bold-font-weight);
font-size: var(--typography-std_md_bold-font-size);
line-height: var(--typography-std_md_bold-line-height);
--letter-spacing: var(--typography-std_md_bold-letter-spacing);
text-align: center;
text-decoration: none;
background-color: var(--color-light);
background-clip: padding-box;
appearance: none;
cursor: pointer;
}
.c-button_wrapper._mt {
margin-block-start: var(--space-block-sm);
}
.c-button_wrapper._center {
text-align: center;
}
.c-button_wrapper._center:has(> :not(:only-child)) {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-block-xxs) 20px;
}
.c-button:has(> :not(:only-child)) {
justify-content: space-between;
}
.c-button._w_fluid {
width: 100%;
}
.c-button._c_secondary {
color: var(--color-secondary);
}
.c-button._c_primary {
color: var(--color-light);
background-color: var(--color-primary);
}
.c-input input[type=text],
.c-input input[type=tel],
.c-input input[type=email],
.c-input textarea {
display: block;
width: 100%;
padding: 20px 30px;
color: inherit;
border: 0;
border-radius: var(--radius);
font-family: var(--typography-std_sm-font-family);
font-weight: var(--typography-std_sm-font-weight);
font-size: var(--typography-std_sm-font-size);
line-height: var(--typography-std_sm-line-height);
--letter-spacing: var(--typography-std_sm-letter-spacing);
background-color: var(--color-bg-ash-light);
appearance: none;
}
.c-input textarea {
min-height: 200px;
resize: vertical;
}
.c-input._w1 input[type=text],
.c-input._w1 input[type=tel],
.c-input._w1 input[type=email],
.c-input._w1 textarea {
max-width: 300px;
}
.c-input._radio {
display: flex;
flex-wrap: wrap;
gap: 10px 80px;
}
@media (width <= 768px) {
.c-input._radio {
padding-block-start: var(--space-block-xs);
}
}
.c-input .mwform-radio-field label {
display: inline-grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 12px;
cursor: pointer;
}
.c-input .mwform-radio-field input {
appearance: none;
display: grid;
width: 14px;
height: 14px;
margin: 0;
cursor: inherit;
}
.c-input .mwform-radio-field input::before, .c-input .mwform-radio-field input::after {
content: "";
display: block;
grid-area: 1/1/2/2;
border-radius: 9999px;
}
.c-input .mwform-radio-field input::before {
border: 1px solid var(--color-primary);
background-color: var(--color-light);
}
.c-input .mwform-radio-field input::after {
padding: 6px;
background-color: var(--color-primary);
opacity: var(--c-input-checked, 0);
background-clip: content-box;
}
.c-input .mwform-radio-field input:checked {
--c-input-checked: 1;
}
.c-input .mwform-radio-field-text {
display: block;
margin: 0;
padding: 0;
}
.c-input .mwform-checkbox-field label {
display: inline-grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 4px;
cursor: pointer;
}
.c-input .mwform-checkbox-field input {
appearance: none;
display: grid;
width: 14px;
height: 14px;
margin: 0;
translate: 0 2px;
cursor: inherit;
}
.c-input .mwform-checkbox-field input::before, .c-input .mwform-checkbox-field input::after {
content: "";
display: block;
grid-area: 1/1/2/2;
}
.c-input .mwform-checkbox-field input::before {
border: 1px solid var(--color-primary);
background-color: var(--color-bg-ash);
}
.c-input .mwform-checkbox-field input::after {
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g transform="translate(-576 -1727)"><rect width="14" height="14" transform="translate(576 1727)" fill="none"/><path d="M14944.132-19631.627l3.214,3.213,4.79-4.789" transform="translate(-14365 21364.809)" fill="none" stroke="%23263467" stroke-width="1"/></g></svg>');
opacity: var(--c-input-checked, 0);
}
.c-input .mwform-checkbox-field input:checked {
--c-input-checked: 1;
}
.c-input .mwform-checkbox-field-text {
display: block;
margin: 0;
padding: 0;
}
.c-list {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 2px;
counter-reset: c-list;
}
.c-list > li {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
counter-increment: c-list;
}
.c-list._point > li::before {
content: "・";
}
.c-list._disc > li::before {
content: "●";
}
.c-list._square > li::before {
content: "■";
}
.c-list._decimal > li::before {
content: counter(c-list) ".";
}
.c-list._decimal-zero > li::before {
content: counter(c-list, decimal-leading-zero) ".";
}
.c-list._upper-roman > li::before {
content: counter(c-list, upper-roman) ".";
}
.c-list._lower-roman > li::before {
content: counter(c-list, lower-roman) ".";
}
.c-list._upper-alpha > li::before {
content: counter(c-list, upper-alpha) ".";
}
.c-list._lower-alpha > li::before {
content: counter(c-list, lower-alpha) ".";
}
.c-list._hiragana > li::before {
content: counter(c-list, hiragana) ".";
}
.c-list._katakana > li::before {
content: counter(c-list, katakana) ".";
}
.c-list._hiragana-iroha > li::before {
content: counter(c-list, hiragana-iroha) ".";
}
.c-list._katakana-iroha > li::before {
content: counter(c-list, katakana-iroha) ".";
}
.c-list._kanji > li::before {
content: counter(c-list, trad-chinese-informal) ".";
}
.c-list._custom > li::before {
content: attr(data-list);
}
.c-marquee {
display: flex;
white-space: nowrap;
pointer-events: none;
user-select: none;
color: transparent;
text-stroke: 2px var(--color-border);
-webkit-text-stroke: 2px var(--color-border);
font-family: var(--ff-dominant);
font-size: 6.25rem;
font-weight: 400;
--letter-spacing: 0;
}
@media (width <= 800px) {
.c-marquee {
font-size: 4.375rem;
}
}
.c-marquee__text {
flex-shrink: 0;
padding-inline-end: 0.5em;
animation-name: c-marquee;
animation-iteration-count: infinite;
animation-duration: 20s;
animation-timing-function: linear;
animation-fill-mode: both;
}
@keyframes c-marquee {
0% {
translate: 0 0;
}
100% {
translate: -100% 0;
}
}
.c-text {
--c-text-gap-defalut: var(--space-block-xxs);
--c-text-gap: var(--c-text-gap-override, var(--c-text-gap-defalut));
}
.c-text._section {
--c-text-gap-defalut: var(--space-block-section);
}
.c-text._xxl {
--c-text-gap-defalut: var(--space-block-xxl);
}
.c-text._xxl-half {
--c-text-gap-defalut: var(--space-block-xxl-half);
}
.c-text._xl {
--c-text-gap-defalut: var(--space-block-xl);
}
.c-text._lg {
--c-text-gap-defalut: var(--space-block-lg);
}
.c-text._md {
--c-text-gap-defalut: var(--space-block-md);
}
.c-text._sm {
--c-text-gap-defalut: var(--space-block-sm);
}
.c-text._xs {
--c-text-gap-defalut: var(--space-block-xs);
}
.c-text._xxs {
--c-text-gap-defalut: var(--space-block-xxs);
}
.c-text._xxxs {
--c-text-gap-defalut: var(--space-block-xxxs);
}
.c-text._xxxxs {
--c-text-gap-defalut: var(--space-block-xxxxs);
}
.c-text._section-trim {
--c-text-gap-defalut: var(--space-block-section-trim);
}
.c-text._xxl-trim {
--c-text-gap-defalut: var(--space-block-xxl-trim);
}
.c-text._xxl-half-trim {
--c-text-gap-defalut: var(--space-block-xxl-half-trim);
}
.c-text._xl-trim {
--c-text-gap-defalut: var(--space-block-xl-trim);
}
.c-text._lg-trim {
--c-text-gap-defalut: var(--space-block-lg-trim);
}
.c-text._md-trim {
--c-text-gap-defalut: var(--space-block-md-trim);
}
.c-text._sm-trim {
--c-text-gap-defalut: var(--space-block-sm-trim);
}
.c-text._xs-trim {
--c-text-gap-defalut: var(--space-block-xs-trim);
}
.c-text._xxs-trim {
--c-text-gap-defalut: var(--space-block-xxs-trim);
}
.c-text._xxxs-trim {
--c-text-gap-defalut: var(--space-block-xxxs-trim);
}
.c-text._xxxxs-trim {
--c-text-gap-defalut: var(--space-block-xxxxs-trim);
}
.c-text > :where(:not(:last-child)) {
margin-block-end: var(--c-text-gap);
}
.c-text._center {
text-align: center;
}
.c-toggle {
display: grid;
isolation: isolate;
}
.c-toggle picture {
display: contents;
}
.c-toggle__item {
grid-column: 1/2;
grid-row: 1/2;
transition-property: opacity, visibility;
}
.c-toggle__item._before {
transition-duration: 0s;
}
.c-toggle__item._after {
z-index: 1;
visibility: hidden;
opacity: 0;
transition-duration: var(--sec);
}
.c-toggle.is-open .c-toggle__item._before {
opacity: 0;
visibility: hidden;
transition-duration: var(--sec);
}
.c-toggle.is-open .c-toggle__item._after {
opacity: 1;
visibility: visible;
transition-duration: 0s;
}
.c-toggle._hover:focus-visible .c-toggle__item._before {
z-index: 2;
opacity: 0;
visibility: hidden;
transition-duration: var(--sec);
}
.c-toggle._hover:focus-visible .c-toggle__item._after {
opacity: 1;
visibility: visible;
transition-duration: 0s;
}
@media (hover: hover) and (pointer: fine) {
.c-toggle._hover:hover .c-toggle__item._before {
z-index: 2;
opacity: 0;
visibility: hidden;
transition-duration: var(--sec);
}
.c-toggle._hover:hover .c-toggle__item._after {
opacity: 1;
visibility: visible;
transition-duration: 0s;
}
}
.p-pagetitle {
position: relative;
isolation: isolate;
}
.p-pagetitle__inner {
padding-block-start: calc(var(--header-size) + var(--space-block-xxxs));
}
.p-pagetitle__arch {
position: absolute;
z-index: -10;
bottom: 20px;
left: 0;
width: 100%;
margin-block-start: 0;
}
@media (width <= 1000px) {
.p-pagetitle__arch {
bottom: -10px;
}
}
.p-pagetitle__arch::before {
content: "";
position: absolute;
z-index: -10;
inset: -10000px 0 calc(100% - 1px);
background-color: var(--color-bg-ash-light);
}
.p-pagetitle__heading {
row-gap: var(--space-block-sm);
}
.p-pagetitle__title {
font-size: 3.125rem;
}
.p-pagetitle__media {
display: grid;
grid-template-columns: 1fr;
align-items: center;
column-gap: 0;
}
.p-pagetitle__content {
grid-area: 1/1/2/2;
z-index: 10;
padding-block: var(--space-block-md);
}
@media (width <= 1000px) {
.p-pagetitle__content {
min-height: 235px;
padding-block-start: var(--space-block-xxs-trim);
padding-block-end: var(--space-block-xxxxs);
}
}
.p-pagetitle__image {
grid-area: 1/1/2/2;
max-width: 55%;
margin-inline-start: auto;
text-align: right;
}
@media (width <= 600px) {
.p-pagetitle__image {
max-width: 100%;
margin-inline-end: var(--space-inline-negative);
}
}
.p-links {
--l-column-head-width-override: calc(100% - 665px);
--l-column-columnGap-override: 15px;
--l-column-rowGap-override: var(--space-block-sm);
}
@media (width <= 700px) {
.p-links {
--l-column-rowGap-override: var(--space-block-xxxs);
}
}
.p-links__head {
text-align: center;
}
.p-links__body {
position: relative;
isolation: isolate;
display: flex;
justify-content: space-between;
align-items: start;
}
@media (width <= 1000px) {
.p-links__body {
max-width: 650px;
margin-inline: auto;
}
}
@media (width <= 700px) {
.p-links__body {
flex-direction: column;
row-gap: var(--space-block-xxxs);
}
}
.p-links__bg {
position: absolute;
z-index: -10;
left: 50%;
translate: -50% 0;
}
@media (width <= 700px) {
.p-links__bg {
display: none;
}
}
.p-links__bg img {
max-width: none;
}
.p-links__item {
position: relative;
display: grid;
grid-template-columns: 1fr;
align-items: end;
width: 312px;
aspect-ratio: 1/1;
max-width: 100%;
text-decoration: none;
clip-path: circle(50% at center);
}
.p-links__item::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-border2);
}
@media (700px < width) {
.p-links__item._1 {
margin-block-start: 80px;
}
.p-links__item._2 {
margin-block-start: 10px;
}
}
.p-links__item:focus-visible {
--p-links-image-scale: var(--zoom);
}
@media (hover: hover) and (pointer: fine) {
.p-links__item:hover {
--p-links-image-scale: var(--zoom);
}
}
.p-links__desc {
grid-area: 1/1/2/2;
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
column-gap: 10px;
padding: 35px 20px;
color: var(--color-primary);
font-family: var(--typography-std_md_bold-font-family);
font-weight: var(--typography-std_md_bold-font-weight);
font-size: var(--typography-std_md_bold-font-size);
line-height: var(--typography-std_md_bold-line-height);
--letter-spacing: var(--typography-std_md_bold-letter-spacing);
}
.p-links__image {
grid-area: 1/1/2/2;
position: absolute;
z-index: 10;
inset: 6px;
clip-path: circle(50% at center);
}
.p-links__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
scale: var(--p-links-image-scale);
transition-property: scale;
transition-duration: var(--sec);
}
.p-links__image::before {
content: "";
position: absolute;
z-index: 10;
inset: 0;
background: linear-gradient(to bottom, transparent 70%, rgba(var(--color-light-rgb), 0.52) 77%, rgba(var(--color-light-rgb), 0.89) 100%);
}
.p-works {
flex-shrink: 0;
width: 320px;
display: grid;
align-items: end;
text-decoration: none;
}
.p-works_wrapper {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: var(--space-block-xxs);
justify-content: center;
}
.p-works__button {
grid-area: 1/1/2/2;
z-index: 10;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 10px;
min-height: 73px;
margin-block-end: var(--space-block-xxxxs);
padding: 5px 17px 5px 128px;
border: 2px solid;
border-radius: 9999px;
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
background-color: var(--color-light);
}
@media (width <= 768px) {
.p-works__button {
padding-inline-start: 130px;
}
}
.p-works__icon {
position: absolute;
top: 55%;
translate: 0 -50%;
left: -10px;
}
.p-works__image {
grid-area: 1/1/2/2;
position: relative;
aspect-ratio: 1/1;
clip-path: circle(50% at center);
}
.p-works__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-works-about {
--l-media-content-width-override: calc(100% - 340px);
}
.p-works-flow {
--l-media-content-width-override: 50%;
}
.p-works-flow__arch {
--svg-color: var(--color-primary);
}
.p-timeschedule {
position: relative;
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxxs);
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.p-timeschedule__item {
display: grid;
grid-template-columns: 172px 1fr;
column-gap: 20px;
border-radius: var(--radius);
padding: 4px;
background-color: var(--color-light);
}
@media (width <= 500px) {
.p-timeschedule__item {
grid-template-columns: 1fr;
}
}
.p-timeschedule__head {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
align-items: center;
min-height: 52px;
border-radius: var(--radius);
padding: 5px 10px;
color: var(--color-light);
background-color: var(--color-primary);
}
.p-timeschedule__body {
padding-inline-end: 20px;
font-size: 1.875rem;
align-self: center;
}
@media (width <= 500px) {
.p-timeschedule__body {
padding-inline: 10px;
}
}
.p-post {
container: p-post/inline-size;
text-decoration: none;
}
.p-post_wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px 20px;
}
@media (width <= 1000px) {
.p-post_wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 700px) {
.p-post_wrapper {
grid-template-columns: 1fr;
}
}
.p-post__inner {
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid var(--color-primary);
border-radius: var(--radius);
padding: 20px 20px 25px;
background-color: var(--color-bg-ash-light);
box-shadow: 3px 3px 0 var(--color-primary);
}
.p-post__image {
order: -10;
position: relative;
aspect-ratio: 280/200;
margin-block-end: var(--space-block-xxs);
}
.p-post__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-post__detail {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxxs);
}
.p-post__head {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
align-items: center;
}
.p-post__categories {
order: -10;
}
.p-post__title {
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.p-post__arrow {
translate: 0 5px;
}
@container p-post (460px < width) {
.p-post__inner {
display: grid;
grid-template-columns: 160px 1fr;
column-gap: 12px;
padding: 12px;
}
.p-post__image {
margin-block-end: 0;
}
.p-post__detail {
padding-block-start: var(--space-block-xxxs);
}
.p-post__title {
font-size: 1.375rem;
}
}
.p-table {
display: grid;
grid-template-columns: 240px 1fr;
gap: 4px;
}
@media (width <= 1000px) {
.p-table {
grid-template-columns: 180px 1fr;
}
}
@media (width <= 700px) {
.p-table {
grid-template-columns: 1fr;
}
}
.p-table__row {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
@media (width <= 700px) {
.p-table__row {
grid-column: revert;
row-gap: 4px;
}
}
.p-table__cell {
border-radius: var(--radius);
padding-block: var(--space-block-xxs);
padding-inline: 28px;
}
.p-table__head {
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
background-color: var(--color-bg-ash);
}
.p-table__body {
background-color: var(--color-light);
}
.p-form__item {
display: grid;
grid-template-columns: 300px 1fr;
column-gap: 20px;
}
@media (width <= 1000px) {
.p-form__item {
grid-template-columns: 200px 1fr;
}
}
@media (width <= 768px) {
.p-form__item {
grid-template-columns: 1fr;
}
}
.p-form__label {
display: contents;
}
.p-form__label-in {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 10px;
}
@media (width <= 768px) {
.p-form__label-in {
margin-block-end: 10px;
}
}
.p-form__badge {
grid-column: 2/3;
grid-row: 1/2;
}
.p-form__title {
grid-column: 1/2;
grid-row: 1/2;
}
.p-form__input {
container: p-form__input/inline-size;
}
.p-form__submit {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
}
@media (width <= 768px) {
.p-form__submit {
flex-direction: column-reverse;
}
}
.p-form__badge {
display: flex;
align-items: center;
justify-content: center;
min-height: 20px;
width: fit-content;
border-radius: 9999px;
padding-block-end: 2px;
padding-inline: 7px;
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
line-height: 1;
text-align: center;
translate: 0 -3px;
}
.p-form__badge._required {
color: var(--color-light);
background-color: var(--color-primary);
}
.p-form__title {
color: var(--color-primary);
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
.p-form__exp {
margin-block-end: var(--space-block-xxxxs);
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
}
.p-form__foot {
margin-block-start: var(--space-block-xs);
}
.p-form__agree {
display: flex;
justify-content: center;
text-align: center;
}
.p-form__agree a {
color: var(--color-primary);
text-decoration: underline;
}
.p-form__agree a:focus-visible {
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.p-form__agree a:hover {
text-decoration: none;
}
}
.p-form__submit {
margin-block-start: var(--space-block-sm);
}
[data-tel] a {
color: inherit;
text-decoration: underline;
}
@media (width <= 800px) {
html.noscroll {
overflow: hidden;
}
} .g-wrapper {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
background-color: var(--color-bg-base);
overflow: clip;
} .g-header {
position: fixed;
z-index: var(--header-z-index);
top: 0;
left: 0;
width: var(--vw100);
height: var(--header-size);
padding-block: 10px;
}
@media (width <= 1000px) {
.g-header {
--l-section-space-inline-override: calc(var(--space-inline) / 2);
}
}
.g-header .inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 5px 40px;
border-radius: 9999px;
background-color: var(--color-light);
transition-property: box-shadow;
transition-duration: var(--sec-fast);
}
html.is-scrolled .g-header .inner {
box-shadow: 0 0 10px 0 rgba(var(--color-dark-rgb), 0.045);
}
@media (width <= 768px) {
.g-header .inner {
padding-inline: 20px;
}
}
.g-header .logo {
translate: 0 -3px;
}
@media (width <= 1000px) {
.g-header .logo {
translate: 0 1px;
}
}
@media (width <= 768px) {
.g-header .logo {
width: 130px;
translate: 0 2px;
}
}
.g-header .side {
display: flex;
align-items: center;
column-gap: 10px;
}
.g-header .link {
display: grid;
place-items: center;
min-height: 44px;
padding: 5px 30px;
border: 2px solid;
border-radius: 9999px;
font-family: var(--typography-std_sm-font-family);
font-weight: var(--typography-std_sm-font-weight);
font-size: var(--typography-std_sm-font-size);
line-height: var(--typography-std_sm-line-height);
--letter-spacing: var(--typography-std_sm-letter-spacing);
text-decoration: none;
transition-property: background-color;
transition-duration: var(--sec);
}
@media (width <= 1000px) {
.g-header .link {
display: none;
}
}
.g-header .link._primary {
color: var(--color-primary);
border-color: var(--color-primary);
}
.g-header .link._primary:focus-visible {
background-color: var(--color-primary);
color: var(--color-light);
}
@media (hover: hover) and (pointer: fine) {
.g-header .link._primary:hover {
background-color: var(--color-primary);
color: var(--color-light);
}
}
.g-header .link._secondary {
color: var(--color-secondary);
border-color: var(--color-secondary);
}
.g-header .link._secondary:focus-visible {
background-color: var(--color-secondary);
color: var(--color-light);
}
@media (hover: hover) and (pointer: fine) {
.g-header .link._secondary:hover {
background-color: var(--color-secondary);
color: var(--color-light);
}
}
.g-header .menu-button {
position: relative;
margin-inline-start: 10px;
}
.g-header .menu-button::before {
content: "";
position: absolute;
inset: -15px;
}
.g-links .inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-block-xxxs) 10px;
}
@media (width <= 800px) {
.g-links .inner {
grid-template-columns: 1fr;
}
}
.g-links .link {
position: relative;
isolation: isolate;
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
border-radius: var(--radius);
padding: 10px;
font-family: var(--typography-title_md-font-family);
font-weight: var(--typography-title_md-font-weight);
font-size: var(--typography-title_md-font-size);
line-height: var(--typography-title_md-line-height);
--letter-spacing: var(--typography-title_md-letter-spacing);
text-decoration: none;
overflow: hidden;
}
@media (800px < width) {
.g-links .link._large {
grid-column: span 3;
}
}
@media (width <= 800px) {
.g-links .link:not(._large) {
min-height: 200px;
}
}
@media (width <= 768px) {
.g-links .link:not(._large) {
min-height: 160px;
}
}
.g-links .link__title {
grid-area: 1/1/2/2;
color: var(--color-light);
text-align: center;
}
.g-links .link__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -30;
scale: var(--g-links-image-scale, 1);
transition-property: scale;
transition-duration: var(--sec);
}
.g-links .link__arrow {
position: absolute;
bottom: 10px;
right: 10px;
}
.g-links .link::before, .g-links .link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.g-links .link::before {
z-index: -20;
background-color: rgba(var(--color-dark-rgb), 0.4);
}
.g-links .link::after {
z-index: -10;
border: 2px solid;
}
.g-links .link:focus-visible {
--g-links-image-scale: var(--zoom);
}
@media (hover: hover) and (pointer: fine) {
.g-links .link:hover {
--g-links-image-scale: var(--zoom);
}
} .g-footer {
--l-column-rowGap-override: var(--space-block-md);
position: relative;
color: var(--color-light);
background-color: var(--color-primary);
}
@media (width <= 768px) {
.g-footer {
--l-section-space-inline-override: calc(var(--space-inline) * 2);
}
}
.g-footer .pagetop {
position: absolute;
bottom: calc(100% + 20px);
right: var(--space-inline);
display: grid;
place-content: center;
width: 50px;
aspect-ratio: 1/1;
border-radius: 9999px;
color: var(--color-light);
background-color: var(--color-primary);
}
@media (width <= 768px) {
.g-footer .pagetop {
display: none;
}
}
@media (width <= 1000px) {
.g-footer .pagetop {
bottom: calc(100% + 10px);
}
}
.g-footer .pagetop svg {
rotate: -90deg;
}
.g-footer .logo {
margin-block-end: var(--space-block-xxs);
filter: invert(1) brightness(30);
}
.g-footer .button {
width: 223px;
}
.g-footer .button__letterSpacing {
--letter-spacing: -0.02em;
}
@media (1000px < width) {
.g-footer .column {
grid-template-columns: 1fr auto;
}
}
.g-footer .column__foot {
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
}
.g-footer .navi {
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 55px;
row-gap: var(--space-block-xs);
padding-inline-end: 5px;
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
@media (width <= 600px) {
.g-footer .navi {
grid-template-columns: 1fr;
}
}
.g-footer .navi__group {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xs);
}
.g-footer .navi__link {
display: flex;
align-items: center;
column-gap: 20px;
text-decoration: none;
}
.g-footer .child {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxs);
margin-block-start: var(--space-block-xxxs);
}
.g-footer .child__title::before {
content: "_";
}
.g-footer .cityscape {
position: relative;
height: 142px;
background: url(//nagaratrading.co.jp/tY8WaK46uN/assets/img/cmn/footer_cityscape.svg) repeat-x calc(50% + 75px) bottom;
background-size: auto 100%;
}
@media (width <= 1000px) {
.g-footer .cityscape {
height: 87px;
background-position: 45.5% bottom;
}
}
.g-footer .cityscape__illust {
position: absolute;
bottom: 0;
left: 0;
animation-name: footer-cityscape-track;
animation-duration: 40s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: -4s;
}
.g-footer .cityscape__illust img {
max-width: none;
}
@media (width <= 1000px) {
.g-footer .cityscape__illust {
width: 87px;
}
}
@keyframes footer-cityscape-track {
0% {
translate: 100vw 0;
}
100% {
translate: -100% 0;
}
} .g-main {
display: block;
flex-grow: 1;
}
.g-main:after {
content: " ";
display: block;
clear: both;
}
.g-menu {
position: fixed;
z-index: calc(var(--header-z-index) - 100);
isolation: isolate;
left: 0;
top: 0;
height: 100svh;
width: 100vw;
min-width: var(--min-device-width);
color: var(--color-light);
overflow-y: scroll;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: var(--sec-fast);
pointer-events: none;
--g-menu-paddingBlockEnd: 56px;
}
.g-menu::before {
content: "";
position: absolute;
z-index: -10;
min-height: calc(100svh + 1px);
top: 0;
left: 0;
width: 1px;
}
.g-menu.is-open {
opacity: 1;
visibility: visible;
}
.g-menu .inner {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
min-height: 100%;
padding-block-end: var(--g-menu-paddingBlockEnd);
background-color: var(--color-light);
}
.g-menu .inner2 {
position: relative;
flex-grow: 1;
height: 100%;
padding-block-start: calc(var(--header-size) + var(--space-block-lg));
padding-block-end: 120px;
padding-inline: calc(var(--space-inline) * 2);
pointer-events: auto;
}
.g-menu .inner2::before {
content: "";
position: absolute;
z-index: -10;
inset: 0;
background-color: var(--color-primary);
border-bottom-left-radius: var(--radius);
}
.g-menu .button {
width: 223px;
}
.g-menu .button__letterSpacing {
--letter-spacing: -0.02em;
}
.g-menu .navi {
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 55px;
row-gap: var(--space-block-xs);
padding-inline-end: 5px;
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
@media (width <= 600px) {
.g-menu .navi {
grid-template-columns: 1fr;
}
}
.g-menu .navi__group {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xs);
}
.g-menu .navi__link {
display: flex;
align-items: center;
column-gap: 20px;
text-decoration: none;
}
.g-menu .child {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxs);
margin-block-start: var(--space-block-xxxs);
}
.g-menu .child__title::before {
content: "_";
}
.g-menu .pic {
position: absolute;
bottom: calc(var(--g-menu-paddingBlockEnd) * -1);
right: calc(var(--space-inline) * 2);
}
@media (800px < width) {
.g-menu .inner {
background: transparent;
}
.g-menu .inner2 {
min-height: 0;
padding-block-end: 158px;
width: fit-content;
margin-inline-start: auto;
padding-inline: 100px;
}
.g-menu .inner2::before {
bottom: 0;
}
.g-menu .pic {
right: 0;
}
}
.q-about-message {
--l-media-content-width-override: 500px;
}
@media (1000px < width) {
.q-about-message .content {
padding-block-start: var(--space-block-md);
}
}
.q-about-philosophy .philosophy {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxs);
border-radius: var(--radius);
padding-block: var(--space-block-xs);
padding-inline: 40px;
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
background: var(--color-light);
}
@media (width <= 900px) {
.q-about-philosophy .philosophy {
row-gap: var(--space-block-xxxs);
padding-inline: 20px;
}
}
.q-about-philosophy .philosophy__item {
display: grid;
grid-template-columns: 52px 1fr;
align-items: start;
column-gap: 20px;
padding-block-end: var(--space-block-xxxs);
border-bottom: 1px dotted var(--color-primary);
}
.q-about-philosophy .philosophy__count {
display: grid;
place-content: center;
aspect-ratio: 1/1;
border: 1px solid;
border-radius: 9999px;
color: var(--color-primary);
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
}
.q-about-philosophy .philosophy__desc {
padding-block-start: 0.25lh;
}
.q-about-data .data {
border-radius: var(--radius);
padding-block: var(--space-block-xs) var(--space-block-sm);
padding-inline: 10px;
background-color: var(--color-bg-ash-light);
}
.q-about-data .data_container {
container: data/inline-size;
}
.q-about-data .data_wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@container data (width < 1000px) {
.q-about-data .data_wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 600px) {
.q-about-data .data_wrapper {
grid-template-columns: 1fr;
}
}
.q-about-data .data._large {
grid-column: span 4;
padding-inline: 60px;
}
@container data (width < 1000px) {
.q-about-data .data._large {
grid-column: span 2;
padding-inline: 20px;
}
}
@media (width <= 600px) {
.q-about-data .data._large {
grid-column: span 1;
}
}
.q-about-data .data._large2 {
grid-column: span 4;
padding-inline: 60px;
}
@container data (width < 1000px) {
.q-about-data .data._large2 {
grid-column: span 1;
padding-inline: 20px;
}
}
@media (width <= 900px) {
.q-about-data .data._large2 {
grid-column: span 2;
}
}
@media (width <= 600px) {
.q-about-data .data._large2 {
grid-column: span 1;
}
}
.q-about-data .data__title {
margin-block-end: var(--space-block-xxxs);
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
.q-about-data .data__small {
font-family: var(--typography-std_xs-font-family);
font-weight: var(--typography-std_xs-font-weight);
font-size: var(--typography-std_xs-font-size);
line-height: var(--typography-std_xs-line-height);
--letter-spacing: var(--typography-std_xs-letter-spacing);
}
.q-about-data .data__value {
display: inline-block;
color: var(--color-primary);
font-family: var(--typography-dmn_xxl-font-family);
font-weight: var(--typography-dmn_xxl-font-weight);
font-size: var(--typography-dmn_xxl-font-size);
line-height: var(--typography-dmn_xxl-line-height);
--letter-spacing: var(--typography-dmn_xxl-letter-spacing);
}
.q-about-data .data__value::after {
content: "";
display: block;
width: 0;
height: 0.01px;
margin-block-end: var(--half-leading-trim);
}
.q-about-data .data__prefix {
display: inline-block;
color: var(--color-primary);
font-family: var(--typography-std_xxl-font-family);
font-weight: var(--typography-std_xxl-font-weight);
font-size: var(--typography-std_xxl-font-size);
line-height: var(--typography-std_xxl-line-height);
--letter-spacing: var(--typography-std_xxl-letter-spacing);
translate: 0 -8px;
}
.q-about-data .data__suffix {
display: inline-block;
color: var(--color-primary);
font-family: var(--typography-std_xxl-font-family);
font-weight: var(--typography-std_xxl-font-weight);
font-size: var(--typography-std_xxl-font-size);
line-height: var(--typography-std_xxl-line-height);
--letter-spacing: var(--typography-std_xxl-letter-spacing);
translate: 0 -8px;
}
.q-about-data .data__colon {
display: inline-block;
font-family: var(--typography-std_xxl-font-family);
font-weight: var(--typography-std_xxl-font-weight);
font-size: var(--typography-std_xxl-font-size);
line-height: var(--typography-std_xxl-line-height);
--letter-spacing: var(--typography-std_xxl-letter-spacing);
translate: 0 -8px;
}
.q-about-data .area {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 20px;
row-gap: var(--space-block-xs);
}
@media (width <= 768px) {
.q-about-data .area {
grid-template-columns: 1fr;
}
}
@media (width <= 900px) and (768px < width) {
.q-about-data .area__value {
font-size: 3.625rem;
}
}
.q-about-data .area__image {
text-align: right;
}
@media (768px < width) {
.q-about-data .area__image {
margin-block: calc(var(--space-block-xs) * -1) calc(var(--space-block-sm) * -1);
}
}
@media (width <= 768px) {
.q-about-data .area__image {
margin-inline: -20px;
}
}
@media (width <= 900px) {
.q-about-data .area__image img {
width: 100%;
}
}
.q-about-data .column1 {
--column1-columnGap: 80px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--column1-columnGap);
row-gap: var(--space-block-xl);
}
@container data (width < 1000px) {
.q-about-data .column1 {
grid-template-columns: 1fr;
text-align: center;
}
}
.q-about-data .column1__content {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
row-gap: var(--space-block-xxs);
}
.q-about-data .column1__item {
position: relative;
}
.q-about-data .column1__item:nth-child(n+2)::before {
content: "";
position: absolute;
left: calc(var(--column1-columnGap) / -2);
inset-block: -5px;
width: 1px;
background-color: var(--color-dark);
}
@container data (width < 1000px) {
.q-about-data .column1__item:nth-child(n+2)::before {
top: calc(var(--space-block-xl) / -2);
bottom: auto;
inset-inline: 0;
width: auto;
height: 1px;
}
}
.q-about-data .column2 {
display: grid;
grid-template-columns: 1fr auto auto;
column-gap: 20px;
}
@container data (width < 1000px) {
.q-about-data .column2 {
grid-template-columns: 1fr;
text-align: center;
}
}
.q-about-data .column2__item:first-child {
margin-inline-end: 10px;
}
@container data (width < 1000px) {
.q-about-data .column2__item:first-child {
margin-block-end: var(--space-block-md);
margin-inline-end: 0;
text-align: left;
}
}
@container data (width < 1000px) {
.q-about-data .column2__br {
display: none;
}
}
.q-about-outline .pc-nb {
display: inline !important;
}
.q-about-organization {
--l-media-content-width-override: 200px;
--l-media-rowGap-override: 0;
}
.q-about-history .history {
display: grid;
grid-template-columns: auto auto 1fr;
}
@media (width <= 768px) {
.q-about-history .history {
grid-template-columns: auto 1fr;
}
}
.q-about-history .history__item {
display: grid;
grid-template-columns: subgrid;
grid-column: span 3;
align-items: baseline;
column-gap: 10px;
row-gap: var(--space-block-xxxs);
padding-block-end: calc(var(--space-block-xs) + 6px);
clip-path: inset(0 0 -20px);
}
@media (width <= 768px) {
.q-about-history .history__item {
grid-column: span 2;
padding-block-end: calc(var(--space-block-xs) - 4px);
}
}
.q-about-history .history__item:last-child {
padding-block-end: 0 !important;
clip-path: inset(0 0 -10px);
}
.q-about-history .history__year {
position: relative;
margin-inline-end: 20px;
padding-inline-start: 20px;
color: var(--color-primary);
font-family: var(--typography-dmn_md-font-family);
font-weight: var(--typography-dmn_md-font-weight);
font-size: var(--typography-dmn_md-font-size);
line-height: var(--typography-dmn_md-line-height);
--letter-spacing: var(--typography-dmn_md-letter-spacing);
translate: 0 5px;
}
@media (width <= 768px) {
.q-about-history .history__year {
grid-column: span 2;
margin-inline-end: 0;
}
}
.q-about-history .history__year::before {
content: "";
position: absolute;
left: 0;
top: 0.5lh;
width: 10px;
aspect-ratio: 1/1;
border-radius: 9999px;
background-color: var(--color-primary);
translate: 0 -31%;
}
.q-about-history .history__year::after {
content: "";
position: absolute;
left: 4px;
width: 2px;
top: 0.5lh;
height: 1000px;
background-color: var(--color-primary);
}
.q-about-history .history__month {
color: var(--color-primary);
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
}
@media (width <= 768px) {
.q-about-history .history__month {
padding-inline-start: 20px;
}
}
.q-about-sdgs {
--l-media-content-width-override: calc(100% - 340px);
}
.q-about-sdgs .goals {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
@media (width <= 900px) {
.q-about-sdgs .goals {
grid-template-columns: repeat(4, 1fr);
}
}
@media (width <= 500px) {
.q-about-sdgs .goals {
grid-template-columns: repeat(2, 1fr);
}
}
.q-about-sdgs .goals img {
width: 100%;
}
.q-entry-thanks {
--l-media-content-width-override: 500px;
}
.q-entry-thanks .title {
margin-block-end: var(--space-block-sm);
font-family: var(--typography-title_md-font-family);
font-weight: var(--typography-title_md-font-weight);
font-size: var(--typography-title_md-font-size);
line-height: var(--typography-title_md-line-height);
--letter-spacing: var(--typography-title_md-letter-spacing);
}
.q-entry-thanks .desc {
margin-block-end: var(--space-block-xs);
}
.q-entry-thanks .image {
margin-inline-end: -12px;
text-align: center;
}
.q-environment-support .container {
container: inner/inline-size;
}
.q-environment-support .support {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxs);
}
.q-environment-support .support_wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 10px;
}
@container inner (width < 1000px) {
.q-environment-support .support_wrapper {
grid-template-columns: repeat(2, 1fr);
row-gap: var(--space-block-xs);
}
}
@container inner (width < 500px) {
.q-environment-support .support_wrapper {
grid-template-columns: repeat(1, 1fr);
row-gap: var(--space-block-xxxs);
}
}
.q-environment-support .support_container {
container: support/inline-size;
}
@container support (420px < width) {
.q-environment-support .support {
flex-direction: row;
align-items: center;
}
}
.q-environment-support .support__illust {
order: -10;
text-align: center;
}
@container (width <= 420px) {
.q-environment-support .support__illust img {
width: 280px;
}
}
.q-environment-support .support__detail {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
width: fit-content;
margin-inline: auto;
}
@container support (420px < width) {
.q-environment-support .support__detail {
grid-template-columns: 1fr;
row-gap: var(--space-block-xxxs);
margin-inline-start: 20px;
}
}
.q-environment-support .support__count {
color: transparent;
font-family: var(--typography-dmn_lg-font-family);
font-weight: var(--typography-dmn_lg-font-weight);
font-size: var(--typography-dmn_lg-font-size);
line-height: var(--typography-dmn_lg-line-height);
--letter-spacing: var(--typography-dmn_lg-letter-spacing);
-webkit-text-stroke: 2px var(--color-primary);
text-stroke: 2px var(--color-primary);
}
.q-environment-support .support__count::before {
content: "";
display: block;
width: 0;
height: 0.01px;
margin-block-start: var(--half-leading-trim);
}
.q-environment-support .support__count::after {
content: "";
display: block;
width: 0;
height: 0.01px;
margin-block-end: var(--half-leading-trim);
}
.q-environment-support .support__title {
color: var(--color-primary);
font-family: var(--typography-std_lg_black-font-family);
font-weight: var(--typography-std_lg_black-font-weight);
font-size: var(--typography-std_lg_black-font-size);
line-height: var(--typography-std_lg_black-line-height);
--letter-spacing: var(--typography-std_lg_black-letter-spacing);
}
.q-environment-qualification .qualification {
border: 2px solid var(--color-primary);
border-radius: var(--radius);
padding: var(--space-block-xs) 30px;
background-color: var(--color-light);
box-shadow: 3px 3px 0 var(--color-primary);
}
.q-environment-qualification .qualification__head {
margin-inline-start: -30px;
}
.q-environment-welfare {
--l-media-content-width-override: calc(100% - 340px);
}
.q-environment-welfare .image img {
clip-path: circle(50% at center);
}
@media (width <= 768px) {
.q-environment-welfare .image img {
width: 320px;
}
}
.q-environment-dormitory {
--l-media-content-width-override: 500px;
}
.q-environment-dormitory .pic {
flex-shrink: 0;
display: flex;
column-gap: 4px;
animation-name: loop;
animation-duration: calc(var(--q-pic-speed) * var(--q-pic-length));
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.q-environment-dormitory .pic_wrapper {
display: flex;
column-gap: 4px;
--q-pic-length: 6;
--q-pic-speed: 5s;
}
@keyframes loop {
0% {
translate: 0 0;
}
100% {
translate: -100% 0;
}
}
.q-environment-dormitory .pic__item {
flex-shrink: 0;
width: 326px;
border-radius: var(--radius);
overflow: hidden;
}
.q-environment-dormitory .pic__item img {
width: 100%;
}
.q-environment-habit .habit {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxs);
border: 2px solid var(--color-primary);
border-radius: var(--radius);
padding: 20px 20px 25px;
background-color: var(--color-bg-ash-light);
box-shadow: 3px 3px 0 var(--color-primary);
}
.q-environment-habit .habit_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-block-xs) 40px;
}
@media (width <= 1000px) {
.q-environment-habit .habit_wrapper {
column-gap: 20px;
}
}
@media (width <= 768px) {
.q-environment-habit .habit_wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
@media (width <= 768px) and (600px < width) {
.q-environment-habit .habit {
display: grid;
grid-template-columns: 220px 1fr;
align-items: start;
column-gap: 15px;
padding: 15px 15px 20px;
}
}
.q-environment-habit .habit .c-heading3 {
margin-inline-end: -10px;
}
.q-environment-habit .habit__image {
order: -10;
position: relative;
aspect-ratio: 440/230;
margin-block-end: var(--space-block-xxxs);
border-radius: var(--radius);
overflow: hidden;
}
.q-environment-habit .habit__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.q-policy .contact {
border: 1px solid;
border-radius: var(--radius);
padding: 19px;
}
@media (width <= 768px) {
.q-policy .contact {
padding: 15px;
}
}
.p-recruitment-detail-head {
--l-media-content-width-override: calc(100% - 370px);
}
.p-recruitment-detail-head .head {
display: flex;
flex-direction: column;
row-gap: var(--space-block-xxxxs);
margin-block-end: var(--space-block-xs);
}
.p-recruitment-detail-head .title {
font-family: var(--typography-std_xl-font-family);
font-weight: var(--typography-std_xl-font-weight);
font-size: var(--typography-std_xl-font-size);
line-height: var(--typography-std_xl-line-height);
--letter-spacing: var(--typography-std_xl-letter-spacing);
}
.p-recruitment-detail-head .categories {
order: -10;
}
.p-recruitment-detail-head .image {
text-align: center;
}
.p-recruitment-detail-head .image img {
border-radius: var(--radius);
}
.p-recruitment-detail-foot .link {
position: relative;
isolation: isolate;
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
border-radius: var(--radius);
padding: 10px;
font-family: var(--typography-title_md-font-family);
font-weight: var(--typography-title_md-font-weight);
font-size: var(--typography-title_md-font-size);
line-height: var(--typography-title_md-line-height);
--letter-spacing: var(--typography-title_md-letter-spacing);
text-decoration: none;
overflow: hidden;
}
@media (800px < width) {
.p-recruitment-detail-foot .link._large {
grid-column: span 3;
}
}
@media (width <= 800px) {
.p-recruitment-detail-foot .link:not(._large) {
min-height: 200px;
}
}
@media (width <= 768px) {
.p-recruitment-detail-foot .link:not(._large) {
min-height: 160px;
}
}
.p-recruitment-detail-foot .link__title {
grid-area: 1/1/2/2;
color: var(--color-light);
text-align: center;
}
.p-recruitment-detail-foot .link__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -30;
scale: var(--links-image-scale, 1);
transition-property: scale;
transition-duration: var(--sec);
}
.p-recruitment-detail-foot .link__arrow {
position: absolute;
bottom: 10px;
right: 10px;
}
.p-recruitment-detail-foot .link::before, .p-recruitment-detail-foot .link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.p-recruitment-detail-foot .link::before {
z-index: -20;
background-color: rgba(var(--color-dark-rgb), 0.4);
}
.p-recruitment-detail-foot .link::after {
z-index: -10;
border: 2px solid;
}
.p-recruitment-detail-foot .link:focus-visible {
--link-image-scale: var(--zoom);
}
@media (hover: hover) and (pointer: fine) {
.p-recruitment-detail-foot .link:hover {
--link-image-scale: var(--zoom);
}
}
.q-top-mv .mv {
--q-top-mv-zoom: 1;
display: flex;
justify-content: center;
padding-block-start: 67px;
background-color: var(--color-bg-ash-light);
zoom: var(--q-top-mv-zoom);
}
@media (width <= 1000px) {
.q-top-mv .mv {
--q-top-mv-zoom: 0.7;
}
}
@media (width <= 768px) {
.q-top-mv .mv {
padding-block-start: 98px;
padding-block-end: var(--space-block-xxl);
--q-top-mv-zoom: 1.2;
}
}
@media (width <= 600px) {
.q-top-mv .mv {
--q-top-mv-zoom: 1;
}
}
.q-top-mv .mv__copy {
--l-section-inner-width-default: 1218px;
position: absolute;
z-index: 10;
top: 504px;
left: 0;
width: 100%;
color: var(--color-primary);
font-family: var(--ff-dominant);
font-size: 4.375rem;
line-height: 1.1428571429;
--letter-spacing: 0.1em;
}
@media (width <= 768px) {
.q-top-mv .mv__copy {
top: 488px;
font-size: 2.5rem;
line-height: 1.15;
}
}
.q-top-mv .mv__content {
flex-shrink: 0;
position: relative;
display: flex;
justify-content: center;
}
.q-top-mv .mv__bg, .q-top-mv .mv__bg picture {
display: contents;
}
.q-top-mv .mv__bg img {
flex-shrink: 0;
max-width: none;
}
.q-top-mv .pic {
position: absolute;
translate: -50% -50%;
animation: float 6s ease-in-out infinite;
}
.q-top-mv .pic._1 {
animation-delay: 0s;
}
.q-top-mv .pic._2 {
animation-delay: -1s;
}
.q-top-mv .pic._3 {
animation-delay: -2s;
}
.q-top-mv .pic._4 {
animation-delay: -3s;
}
.q-top-mv .pic._5 {
animation-delay: -4s;
}
.q-top-mv .pic._6 {
animation-delay: -5s;
}
.q-top-mv .pic img {
max-width: none;
}
@keyframes float {
0% {
translate: -50% -47.5%;
}
50% {
translate: -50% -52.5%;
}
100% {
translate: -50% -47.5%;
}
}
.q-top-mv .pic._1 {
top: 37.4%;
left: 15.1%;
}
.q-top-mv .pic._2 {
top: 21.4%;
left: 40.6%;
}
.q-top-mv .pic._3 {
top: 60.3%;
left: 53.4%;
}
.q-top-mv .pic._4 {
top: 26.2%;
left: 67.2%;
}
.q-top-mv .pic._5 {
top: 21.5%;
left: 89.2%;
}
.q-top-mv .pic._6 {
top: 78.9%;
left: 89.3%;
}
@media (width <= 768px) {
.q-top-mv .pic._2 {
top: 18%;
left: 16.5%;
}
.q-top-mv .pic._3 {
top: 54.5%;
left: 60.6%;
}
.q-top-mv .pic._4 {
top: 12.7%;
left: 76.8%;
}
.q-top-mv .pic._6 {
top: 100%;
left: 84.5%;
}
}
@media (900px < width) {
.q-top-about .media__content {
padding-block-start: var(--space-block-xxxs);
}
}
.q-top-about .copy {
margin-block-end: var(--space-block-xxs);
font-family: var(--typography-std_lg-font-family);
font-weight: var(--typography-std_lg-font-weight);
font-size: var(--typography-std_lg-font-size);
line-height: var(--typography-std_lg-line-height);
--letter-spacing: var(--typography-std_lg-letter-spacing);
}
.q-top-cityscape {
position: relative;
z-index: 100;
}
.q-top-cityscape .track {
transition-property: translate;
transition-duration: 40s;
transition-timing-function: linear;
}
.q-top-cityscape .track.is-show {
translate: 100vw 0;
}
.q-top-works {
position: relative;
padding-block-start: 70px;
background-color: var(--color-bg-ash-light);
}
.q-top-works .area1 {
position: relative;
isolation: isolate;
margin-block-end: -1px;
padding-block-end: var(--space-block-sm);
}
.q-top-works .area1__bg {
position: absolute;
z-index: -10;
bottom: 0;
inset-inline: -10000px;
margin-inline: auto;
width: 100%;
min-width: 1400px;
}
.q-top-works .area1__bg svg {
width: 100%;
height: 280px;
}
.q-top-works .area2 {
background-color: var(--color-primary);
}
.q-top-works .marquee {
position: absolute;
bottom: 0;
translate: 0 50%;
}
@media (900px < width) {
.q-top-environment .media__content {
padding-block-start: var(--space-block-lg);
}
}