*,
::before,
::after {
box-sizing: border-box; background-repeat: no-repeat; } ::before,
::after {
text-decoration: inherit; vertical-align: inherit; } :root {
overflow-wrap: break-word; -moz-tab-size: 4; -o-tab-size: 4;
tab-size: 4; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; }  body {
min-height: 100vh;
margin: 0;
position: relative;
}    hr {
color: inherit; height: 0; }   pre {
font-family: monospace, monospace; font-size: 1em; overflow: auto; }  abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} b, strong {
font-weight: bolder;
} code, kbd, samp {
font-family: monospace, monospace; font-size: 1em; } small {
font-size: 80%;
}  audio, canvas, iframe, img, svg, video {
vertical-align: middle;
} iframe {
border-style: none;
} svg:not([fill]) {
fill: currentColor;
}  table {
border-collapse: collapse; border-color: currentColor; text-indent: 0; }  button, input, select {
margin: 0;
} button, [type=button i], [type=reset i], [type=submit i] {
-webkit-appearance: button;
} fieldset {
border: 1px solid #a0a0a0;
} progress {
vertical-align: baseline;
} textarea {
margin: 0; resize: vertical; } [type=search i] {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  dialog {
background-color: var(--color-white);
border: solid;
color: var(--color-black);
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
} details > summary:first-of-type {
display: list-item;
}  [aria-busy=true i] {
cursor: progress;
} [aria-disabled=true i], [disabled] {
cursor: not-allowed;
} [aria-hidden=false i][hidden] {
display: initial;
}
[aria-hidden=false i][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
} 
:root {
line-height: 1;
overflow-wrap: break-word;
}
html {
scroll-padding-top: 0;
}  *:focus:not(:focus-visible) {
outline: none;
}
*:focus {
outline: none;
}
body {
font-family: var(--font-pop);
background: var(--color-black);
font-weight: 400;
font-feature-settings: revert;
letter-spacing: 0;
line-height: 1.6;
color: var(--color-white);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font: inherit;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
dl, dd {
margin: 0;
}
p {
margin: 0;
}
blockquote {
margin: 0;
}
hr {
margin: 0;
border: none;
border-top: 1px solid currentColor;
}
pre {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
text-underline-offset: 0.1375em;
transition: var(--transition-duration) var(--transition-timing-function);
}
a.-tel{
pointer-events: none; 
}
@media (max-width:767px) {
a.-tel{
pointer-events: auto; 
}
}
figure {
max-width: 100%;
margin: 0;
}
img, picture, svg, iframe, video {
max-width: 100%; }
img, picture, svg, video {
height: auto;
}
table {
width: 100%;
table-layout: fixed;
}
tbody, thead {
vertical-align: inherit;
}
th {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent;
}
td {
padding: 0;
}
label {
display: inline-block;
}
button, input, optgroup, select, textarea {
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
button, [role=button], [type=button], [type=reset], [type=submit]:not(:disabled) {
cursor: pointer;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease;
}
:root {
--icon-plus: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M2%208h12M8%202v12%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-b-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='m321-80-71-71 329-329-329-329 71-71 400 400z'/%3E%3C/svg%3E");
--icon-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2249%22%20height%3D%2213%22%20viewBox%3D%220%200%2049%2013%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M0%2010.676C5.6%2010.676%2031.6667%2010.676%2044%2010.676L32%201.17603%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-bottom: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2230%22%20viewBox%3D%220%200%2044%2030%22%20fill%3D%22none%22%3E%20%3Cg%20filter%3D%22url(%23filter0_d_123_1555)%22%3E%20%3Cpath%20d%3D%22M6.68652%206.72705L22.5689%2021.7271L36.6865%206.72705%22%20stroke%3D%22%232CA5CA%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%22filter0_d_123_1555%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2243.4148%22%20height%3D%2229.1418%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%20%3CfeOffset%2F%3E%20%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.172549%200%200%200%200%200.647059%200%200%200%200%200.792157%200%200%200%201%200%22%2F%3E%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_123_1555%22%2F%3E%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_123_1555%22%20result%3D%22shape%22%2F%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%3C%2Fsvg%3E");
--color-white: #fff;
--color-white-b: #E0E6ED;
--color-black: #0D0D0D;
--color-black-0: #000;
--color-black-3: #333;
--color-gray: #636E72;
--color-blue: #2CA5CA;
--color-neon-blue: #44E3ED;
--font-sans: 'YuGothic', 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif;
--font-pop: "Poppins", sans-serif;
--font-sansJP: 'Noto Sans JP', sans-serif;
--transition-duration: 0.3s;
--transition-opacity: 0.65;
--transition-timing-function: ease;
--z-index-c-loader: 1000;
--z-index-site-wrap-drawerBtn: 600;
--z-index-c-drawer: 550;
--z-index-site-wrap-header: 600;
--z-index-site-wrap-sideNav: 150;
--z-index-site-pagetop: 750;
--z-index-site-sideNav: 700;
--z-index-page-fixedToc: 80;
--px-8: calc(8px * .65);
--px-10: calc(10px * .65);
--px-13: calc(13px * .65);
--px-15: calc(15px * .65);
--px-16: calc(16px * .65);
--px-20: calc(20px * .65);
--px-24: calc(24px * .65);
--px-25: calc(25px * .65);
--px-28: calc(28px * .65);
--px-30: calc(30px * .65);
--px-32: calc(32px * .65);
--px-34: calc(34px * .65);
--px-35: calc(35px * .65);
--px-40: calc(40px * .65);
--px-45: calc(45px * .65);
--px-48: calc(48px * .65);
--px-50: calc(50px * .65);
--px-55: calc(55px * .65);
--px-60: calc(60px * .65);
--px-65: calc(65px * .65);
--px-70: calc(70px * .65);
--px-75: calc(75px * .65);
--px-80: calc(80px * .65);
--px-85: calc(85px * .65);
--px-90: calc(90px * .65);
--px-95: calc(95px * .65);
--px-100: calc(100px * .65);
--px-110: calc(110px * .65);
--px-120: calc(120px * .65);
--px-120: calc(120px * .65);
--px-130: calc(130px * .65);
--px-132: calc(132px * .65);
--px-135: calc(135px * .65);
--px-140: calc(140px * .65);
--px-150: calc(150px * .65);
--px-160: calc(160px * .65);
--px-180: calc(180px * .65);
--px-200: calc(200px * .65);
--px-250: calc(250px * .65);
--px-240: calc(240px * .65);
--px-300: calc(300px * .65);
--px-321: calc(321px * .65);
--px-350: calc(350px * .65);
--px-400: calc(400px * .65);
--px-450: calc(450px * .65);
--px-500: calc(500px * .65);
--px-550: calc(550px * .65);
--px-600: calc(600px * .65);
--px-650: calc(650px * .65);
--px-700: calc(700px * .65);
--px-750: calc(750px * .65);
--px-800: calc(800px * .65);
--leading-trim: calc((1em - 1lh) / 2);
--content-gutter-medium: 3vw;
--content-gutter: 6vw;
--content-gutter-large: 20vw;
--content-width-980: 90vw;
--content-width-1300: 90vw;
--content-width-1400: 90vw;
--shadow-opacity: 0 4px 12px rgba(0, 0, 0, 0.15);
--site-header-scrolled-height: 90px;
--site-wrap-border-width: 0px;
--c-iconBtn-site-wrap-drawerBtn-width: 61px;
--font-10: 10px;
--font-11: 11px;
--font-12: 11px;
--font-13: 12px;
--font-14: 13px;
--font-15: 13px;
--font-16: 15px;
--font-17: 15px;
--font-18: 16px;
--font-19: 16px;
--font-20: 16px;
--font-21: 17px;
--font-22: 18px;
--font-23: 18px;
--font-24: 19px;
--font-25: 19px;
--font-26: 20px;
--font-27: 21px;
--font-28: 21px;
--font-29: 22px;
--font-30: 23px;
--font-31: 23px;
--font-32: 24px;
--font-33: 24px;
--font-34: 25px;
--font-35: 26px;
--font-36: 26px;
--font-37: 27px;
--font-38: 28px;
--font-39: 28px;
--font-40: 29px;
--font-41: 29px;
--font-42: 30px;
--font-43: 31px;
--font-44: 31px;
--font-45: 32px;
--font-46: 33px;
--font-47: 33px;
--font-48: 34px;
--font-49: 34px;
--font-50: 35px;
--font-56: 38px;
--font-60: 41px;
--font-70: 48px;
--font-80: 54px;
--font-90: 60px;
--font-120: 90px;
--font-160: calc(160px * .65);
}
@media (min-width:767px) {
:root{
--content-width-980: min(90vw, 980px);
--content-width-1300: min(90vw, 1300px);
--content-width-1400: min(90vw, 1400px);
}
}
@media (min-width: 960px) {
:root {
--px-8: 8px;
--px-10: 10px;
--px-13: 13px;
--px-15: 15px;
--px-16: 16px;
--px-20: 20px;
--px-24: 24px;
--px-25: 25px;
--px-28: 28px;
--px-30: 30px;
--px-32: 32px;
--px-34: 34px;
--px-35: 35px;
--px-40: 40px;
--px-45: 45px;
--px-48: 48px;
--px-50: 50px;
--px-55: 55px;
--px-60: 60px;
--px-65: 65px;
--px-70: 70px;
--px-75: 75px;
--px-80: 80px;
--px-85: 85px;
--px-90: 90px;
--px-95: 95px;
--px-100: 100px;
--px-110: 110px;
--px-120: 120px;
--px-130: 130px;
--px-132: 132px;
--px-135: 135px;
--px-140: 140px;
--px-150: 150px;
--px-160: 160px;
--px-180: 180px;
--px-200: 200px;
--px-250: 250px;
--px-240: 240px;
--px-300: 300px;
--px-321: 321px;
--px-350: 350px;
--px-400: 400px;
--px-450: 450px;
--px-500: 500px;
--px-550: 550px;
--px-600: 600px;
--px-650: 650px;
--px-700: 700px;
--px-750: 750px;
--px-800: 800px;
}
}
@media (min-width: 960px) {
:root {
--site-wrap-border-width: clamp(10px, 1.1428571429vw, 16px);
}
}
@media (min-width: 960px) {
:root {
--font-10: 10px;
--font-11: 11px;
--font-12: 12px;
--font-13: 13px;
--font-14: 14px;
--font-15: 15px;
--font-16: 16px;
--font-17: 17px;
--font-18: 18px;
--font-19: 19px;
--font-20: 20px;
--font-21: 21px;
--font-22: 22px;
--font-23: 23px;
--font-24: 24px;
--font-25: 25px;
--font-26: 26px;
--font-27: 27px;
--font-28: 28px;
--font-29: 29px;
--font-30: 30px;
--font-31: 31px;
--font-32: 32px;
--font-33: 33px;
--font-34: 34px;
--font-35: 35px;
--font-36: 36px;
--font-37: 37px;
--font-38: 38px;
--font-39: 39px;
--font-40: 40px;
--font-41: 41px;
--font-43: 43px;
--font-44: 44px;
--font-45: 45px;
--font-46: 46px;
--font-47: 47px;
--font-48: 48px;
--font-49: 49px;
--font-50: 50px;
--font-56: 56px;
--font-60: 60px;
--font-70: 70px;
--font-80: 80px;
--font-90: 90px;
--font-120: 120px;
--font-160: 160px;
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
._d-flx-none {
display: none !important;
}
._d-flx-block {
display: flex !important;
}
@media (min-width: 461px) {
._d-ssm-none {
display: none !important;
}
._d-ssm-block {
display: block !important;
}
._d-ssm-flx-none {
display: none !important;
}
._d-ssm-flx-block {
display: flex !important;
}
}
@media (min-width: 561px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
._d-sm-flx-none {
display: none !important;
}
._d-sm-flx-block {
display: flex !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
._d-md-flx-none {
display: none !important;
}
._d-md-flx-block {
display: flex !important;
}
}
@media (min-width: 961px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
._d-lg-flx-none {
display: none !important;
}
._d-lg-flx-block {
display: flex !important;
}
}
@media (min-width: 1001px) {
._d-llg-none {
display: none !important;
}
._d-llg-block {
display: block !important;
}
._d-llg-flx-none {
display: none !important;
}
._d-llg-flx-block {
display: flex !important;
}
}
@media (min-width: 1201px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
._d-xl-flx-none {
display: none !important;
}
._d-xl-flx-block {
display: flex !important;
}
}
@media (min-width: 1501px) {
._d-xxl-none {
display: none !important;
}
._d-xxl-block {
display: block !important;
}
._d-xxl-flx-none {
display: none !important;
}
._d-xxl-flx-block {
display: flex !important;
}
} .main {
z-index: 1;
position: relative;
} .geometric-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 0;
}
.geometric-wrapper.is-unpinned {
position: absolute;
top: auto;
bottom: 0;
}
#geometric1,
#geometric2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#geometric2 {
pointer-events: none;
}
.absolute-content{
position: relative;
z-index: 1;
} .c-loader {
--c-loader-z-index: var(--z-index-c-loader);
--c-loader-background: var(--color-black);
}
.c-loader {
z-index: var(--c-loader-z-index);
opacity: 1;
visibility: visible;
position: fixed;
inset: 0;
display: grid;
place-items: center;
margin: 0;
padding: 0;
background: var(--c-loader-background);
line-height: 1.4;
}
.c-loader {
background: rgba(44, 165, 202, 0.1);
}
.c-loader::after {
z-index: -1;
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--c-loader-background);
}
.c-loader.-is-loaded {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 both;
}
.c-loader.-is-loaded::after {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}
@keyframes c-loader-curtain {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
} .-width-small{
width: var(--content-width-980);
margin-inline: auto;
}
.-width-middle{
width: var(--content-width-1300);
margin-inline: auto;
}
.-width-large{
width: var(--content-width-1400);
margin-inline: auto;
} .-black{
color: var(--color-black);
}  .fade-in {
opacity: 0;
}
.fade-in.active {
animation: fadeIn .7s ease-in-out forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
} .slide-in-up {
transform: translateY(50px);
opacity: 0;
}
.slide-in-up.active {
animation: slideInUp .7s ease-out forwards;
}
@keyframes slideInUp {
to {
transform: translateY(0);
opacity: 1;
}
} .-anime-kaiten {
transform: perspective(900px) rotateY(-90deg);
opacity: 0;
transition:
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s ease;
}
.-anime-kaiten.active {
transform: perspective(900px) rotateY(0deg);
opacity: 1;
} .-anime-bg {
overflow: hidden;
}
.-anime-bg::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-neon-blue);
transform: translateX(0%);
z-index: 1;
pointer-events: none;
}
.-anime-bg.active::before {
animation: anime-bg-sweep 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes anime-bg-sweep {
from { transform: translateX(0%); }
to   { transform: translateX(100%); }
} .animation-delay-1 { transition-delay: 0.3s !important; animation-delay: 0.3s !important; }
.animation-delay-2 { transition-delay: 0.6s !important; animation-delay: 0.6s !important; }
.animation-delay-3 { transition-delay: 0.9s !important; animation-delay: 0.9s !important; }
.animation-delay-4 { transition-delay: 1.2s !important; animation-delay: 1.2s !important; }
.animation-delay-5 { transition-delay: 1.5s !important; animation-delay: 1.5s !important; } .animation-duration-slow { transition-duration: 3.5s !important; animation-duration: 3.5s !important; }
.animation-duration-fast { transition-duration: 0.5s !important; animation-duration: 0.5s !important; } .c-icon {
display: inline-grid;
place-items: center;
padding: 0;
vertical-align: bottom;
font-style: normal;
position: relative;
}
.c-icon::before {
content: "";
display: block;
width: 1em;
aspect-ratio: 1/1;
background-color: inherit;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon.-scroll::before{
-webkit-mask-image: var(--icon-arrow-bottom);
mask-image: var(--icon-arrow-bottom);
width: 50px;
height: 25px;
aspect-ratio: 2/1;
background-color: var(--color-blue);
}
.c-icon.-arrow::before{
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
background-color: var(--color-white);
}
.c-icon.-black::before{
background-color: var(--color-black);
}
.c-icon.-arrow-b::before{
-webkit-mask-image: var(--icon-arrow-b-right);
mask-image: var(--icon-arrow-b-right);
}
.c-icon.-arrow-b.-prev::before{
transform: rotate(180deg);
} .c-anchor {
display: block;
height: 0;
scroll-margin-top: 0;
width: 0
}
.c-anchor:focus {
outline: none
} .c-action{
display: flex;
justify-content: center;
align-items: center;
}
.c-action.-left{
justify-content: flex-start;
}
.c-action>.c-btn{
display: inline-flex;
align-items: center;
gap: 1em;
justify-content: space-between;
}
.c-action>.c-btn.-typeA{
font-size: var(--font-28);
border-bottom: 3px solid var(--color-neon-blue);
padding: var(--px-10) var(--px-30);
position: relative;
overflow: hidden;
}
.c-action>.c-btn.-typeA{
position: relative;
z-index: 1;
}
.c-action>.c-btn.-typeA::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(68 227 237 / 0%) 0%, rgb(68 227 237 / 57%) 55%, rgb(68 227 237 / 85%) 100%);
transform: translateY(100%);
transition: transform 0.4s ease-out;
z-index: -1;
}
.c-action>.c-btn.-width350{
width: 350px;
max-width: 100%;
}
@media (hover : hover) {
.c-action>.c-btn.-typeA:hover::after{
transform: translateY(0);
}
.c-action>.c-btn.-typeA:hover>.c-icon.-arrow::before{
transform: translateX(8px);
}
}
.c-action>.c-btn.-typeB{
border: 3px solid var(--color-neon-blue);
box-shadow: 0 0 4px 0 rgba(178, 247, 251, 0.80) inset, 0 0 12px 0 rgba(68, 227, 237, 0.50);
font-size: var(--font-28);
font-weight: 500;
padding-block: .4em;
padding-inline: 0.8em;
}
@media (hover : hover) {
.c-action>.c-btn.-typeB:hover>.c-icon.-arrow::before{
transform: translateX(8px);
}
}
@media (max-width:560px) {
.c-action.-width350{
width: 100%;
}
} .c-heading{
display: inline-block;
}
.c-heading.-center{
display: flex;
flex-direction: column;
align-items: center;
}
.c-heading.-typeA>.en-ttl{
font-size: var(--font-60);
font-weight: 700;
line-height: 1.5;
}
.c-heading.-typeA.-color-black>.en-ttl{
color: var(--color-black);
}
.c-heading.-typeA>.en-ttl::after{
content: "";
display: block;
width: 100%;
height: 3px;
background: var(--color-neon-blue);
}
.c-heading.-typeA>.ttl{
font-size: var(--font-24);
font-weight: 700;
margin-top: var(--px-20);
}
.c-heading.-typeA.-color-black>.ttl{
color: var(--color-black);
}
.c-heading.-typeA>.ttl.-black{
color: var(--color-black);
} .c-archive.-home-news>.item{
border-bottom: 1px solid var(--color-black-0);
}
.c-archive.-home-news>.item+.item{
border-top: none;
}
.c-archive.-home-news>.item:first-of-type{
border-top: 1px solid var(--color-black-0);
}
.c-archive.-home-news > .item > .article{
display: flex;
flex-direction: row;
align-items: center;
gap: 0.4em 1.6em;
transition-property: background-color, color;
transition: var(--transition-duration) var(--transition-timing-function);
padding-block: var(--px-16);
padding-inline: clamp(15px, 7.03125vw, 135px);
}
@media ( hover : hover) {
.c-archive.-home-news > .item > .article:hover{
opacity: var(--transition-opacity);
}
}
.c-archive.-home-news{
margin-bottom: 30px;
}
.c-archive.-home-news > .item > .article > .data{
display: flex;
align-items: center;
gap: var(--px-40);
}
.c-archive.-home-news > .item > .article > .data > .date{
flex: 0 0 auto;
font-size: 14px;
color: var(--color-black-0);
display: flex;
flex-direction: column;
align-items: center;
}
.c-archive.-home-news > .item > .article > .data > .date >span{
font-size: var(--font-40);
line-height: 1.2;
}
.c-archive.-home-news > .item > .article > .data > .category{
padding-block: 2px 1px;
color: var(--color-black);
flex: 0 0 auto;
font-weight: 500;
padding-inline: 0.7em;
font-size: var(--font-16);
border: 1.5px solid var(--color-neon-blue);
}
.c-archive.-home-news > .item > .article > .ttl{
flex: 1 1 0%;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
font-size: var(--font-20);
color: var(--color-black-0);
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
@media (max-width:960px) {
.c-archive.-home-news > .item > .article{
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-inline: 1em;
}
}
@media (max-width:560px) {
.c-archive.-home-news > .item > .article > .ttl{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: unset;
white-space: unset;
line-height: 1.8;
}
} #header{
z-index: var(--z-index-site-wrap-header);
position: fixed;
inset: 0 0 auto 0;
}
#header::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
transition: .25s ease-in-out;
pointer-events: none;
}
#header.-is-scrolled::after{
opacity: 1;
}
@media (max-width:1000px) {
#header.-is-scrolled::after{
opacity: 0;
}
}
.site-header{
--gap-x: 2vw;
z-index: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap-x);
height: auto;
padding: var(--px-40) 2% 0;
}
#header .brand{
opacity: 1;
transition: opacity 0.45s ease-in-out;
z-index: 1000;
} .brand > .flx{
display: flex;
flex-direction: column;
align-items: center;
}
.brand > a > .logo{
flex: 0 1 auto;
}
@media (max-width:767px) {
.brand > a > .logo{
width: 165px;
}
}
.site-header > .nav{
display: flex;
flex-direction: row;
align-items: center;
gap: var(--px-20) 4vw;
margin-left: auto;
}
@media (max-width:1400px) {
.site-header > .nav{
flex-direction: column-reverse;
align-items: flex-end;
gap: 10px;
}
}
@media (max-width:1000px) {
.site-header > .nav{
display: none;
}
}
.c-menu{
display: flex;
margin: 0;
padding: 0;
list-style: none;
font: inherit;
line-height: 1;
white-space: nowrap;
color: inherit;
justify-content: flex-end;
}
.c-menu.-site-header-gnav{
gap: 2.5vw;
}
.c-menu > .item{
padding-block: .5em;
}
.c-menu > .item > .link{
font-size: var(--font-20);
font-weight: 700;
line-height: 2;
position: relative;
overflow: hidden;
display: inline-block;
padding-inline: 5px;
text-shadow: 0px 0px 3px var(--color-black);
}
.c-menu > .item > .link > span::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(68 227 237 / 0%) 0%, rgb(68 227 237 / 57%) 55%, rgb(68 227 237 / 85%) 100%);
transform: translateY(110%);
transition: transform 0.4s ease-out;
z-index: -1;
}
@media (hover : hover) {
.c-menu > .item > .link:hover > span::after{
transform: translateY(15%);
}
}
@media (max-width:1120px) {
.site-header > .nav > .g-nav > .flx{
flex-direction: column-reverse;
align-items: flex-end;
gap: 5px;
margin-bottom: 0.6em;
}
.site-header > .nav > .g-nav > .flx > .time > p{
padding-right: 0;
}
.site-header > .nav > .g-nav > .flx > .time > p::after{
content: none;
}
} .drawerBtn {
display: none;
}
.c-iconBtn {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
line-height: 1.4;
text-decoration: none;
text-align: center;
vertical-align: middle;
overflow-wrap: break-word;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
touch-action: manipulation;
}
.c-iconBtn > .icon{
display: grid;
place-items: center;
}
.c-hamburger {
--c-hamburger-width: clamp(30px, 4.2857142857vw, 60px);
--c-hamburger-weight: clamp(3px, 0.4285714286vw, 6px);
--c-hamburger-space: clamp(6px, 0.8571428571vw, 12px);
--c-hamburger-color: transparent;
--c-hamburger-duration: .5s;
--c-hamburger-easing: ease;
--c-hamburger-rotate: 30deg;
}
.c-hamburger{
display: flex;
flex-direction: column;
gap: var(--c-hamburger-space);
transition: 0.45s ease-in-out;
}
.c-hamburger.-is-scrolled{
color: var(--color-black);
}
.c-hamburger > .bar {
width: var(--c-hamburger-width);
height: var(--c-hamburger-weight);
background: var(--c-hamburger-color);
}
.c-hamburger > .bar:nth-child(1) {
animation: hamburger-bar1 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
.c-hamburger > .bar:nth-child(2) {
animation: hamburger-bar2 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
.c-hamburger > .bar:nth-child(3) {
animation: hamburger-bar3 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
[aria-expanded=true] .c-hamburger > .bar:nth-child(1), .c-hamburger[aria-expanded=true] > .bar:nth-child(1) {
animation: hamburger-bar1-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
[aria-expanded=true] .c-hamburger > .bar:nth-child(2), .c-hamburger[aria-expanded=true] > .bar:nth-child(2) {
animation: hamburger-bar2-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
[aria-expanded=true] .c-hamburger > .bar:nth-child(3), .c-hamburger[aria-expanded=true] > .bar:nth-child(3) {
animation: hamburger-bar3-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards;
}
@keyframes hamburger-bar1 {
0% {
transform: translateY(calc(var(--c-hamburger-weight) + var(--c-hamburger-space))) rotate(calc(var(--c-hamburger-rotate) * -1));
}
50% {
transform: translateY(calc(var(--c-hamburger-weight) + var(--c-hamburger-space))) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes hamburger-bar1-active {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(calc(var(--c-hamburger-weight, 2px) + var(--c-hamburger-space, 5px))) rotate(0);
}
100% {
transform: translateY(calc(var(--c-hamburger-weight, 2px) + var(--c-hamburger-space, 5px))) rotate(calc(var(--c-hamburger-rotate, 45deg) * -1));
}
}
@keyframes hamburger-bar2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hamburger-bar2-active {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes hamburger-bar3 {
0% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space, 5px)) * -1)) rotate(var(--c-hamburger-rotate));
}
50% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space, 5px)) * -1)) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes hamburger-bar3-active {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space)) * -1)) rotate(0);
}
100% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space)) * -1)) rotate(var(--c-hamburger-rotate));
}
}
.c-iconBtn.-site-wrap-drawerBtn {
padding-top: 6%;
width: var(--c-iconBtn-site-wrap-drawerBtn-width);
font-weight: 700;
font-size: 16px;
color: var(--color-neon-blue);
}
@media (hover : hover) {
.c-iconBtn.-site-wrap-drawerBtn{
opacity: 1;
}
}
.c-hamburger.-site-wrap-drawerBtn > .bar {
position: relative;
}
.c-hamburger.-site-wrap-drawerBtn > .bar::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-neon-blue);
transition: transform var(--transition-duration) var(--transition-timing-function);
}
.c-hamburger.-site-wrap-drawerBtn > .bar:nth-child(1)::before {
border-radius: 999px 0 0 999px;
transform: translateX(10%);
}
.c-hamburger.-site-wrap-drawerBtn > .bar:nth-child(2)::before {
background: var(--color-neon-blue);
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%226%22%3E%3Cg%3E%3Cpath%20d%3D%22M12%200h48v6H12z%22%2F%3E%3Cpath%20d%3D%22M0%200h6v6H0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%226%22%3E%3Cg%3E%3Cpath%20d%3D%22M12%200h48v6H12z%22%2F%3E%3Cpath%20d%3D%22M0%200h6v6H0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.c-hamburger.-site-wrap-drawerBtn > .bar:nth-child(3)::before {
border-radius: 0 999px 999px 0;
transform: translateX(-10%);
background: var(--color-neon-blue);
}
[aria-expanded=true] .c-hamburger.-site-wrap-drawerBtn > .bar::before {
transform: translate(0);
}
.c-iconBtn.-site-wrap-drawerBtn > .text {
margin-top: 0.6em;
}
.drawerBtn .text{
transition: 0.45s ease-in-out;
}
@media (max-width:1000px) {
.site-header{
padding-top: 20px;
}
.site-header > .drawerBtn{
display: block;
z-index: var(--z-index-site-wrap-drawerBtn);
position: fixed;
inset: var(--px-20) var(--site-wrap-border-width) auto auto;
margin: clamp(10px, 1.1428571429vw, 16px);
}
} .c-drawer {
--c-drawer-z-index: var(--z-index-c-drawer);
--c-drawer-duration: .6s;
--c-drawer-easing: cubic-bezier(.43, .01, .08, 1);
--c-drawer-content-background: var(--color-black);
--c-drawer-scrollbar-color: var(--color-neon-blue);
--c-drawer-scrollbar-weight: 4px;
--c-drawer-back-background: rgba(0, 0, 0, .8);
}
.c-drawer {
z-index: var(--c-drawer-z-index);
opacity: 0;
visibility: hidden;
position: relative;
display: block;
margin: 0;
padding: 0;
transition-property: opacity, visibility;
transition-duration: calc(var(--c-drawer-duration) * 0.6);
transition-timing-function: var(--c-drawer-easing);
pointer-events: none;
}
.c-drawer > .close {
z-index: 2;
position: fixed;
}
.c-drawer > .content{
z-index: 1;
overflow-x: clip;
overflow-y: auto;
position: fixed;
inset: 0;
display: block;
background: var(--c-drawer-content-background);
transition: transform calc(var(--c-drawer-duration) * 0.6) var(--c-drawer-easing);
overscroll-behavior-y: contain;
scrollbar-color: var(--c-drawer-scrollbar-color) transparent;
pointer-events: auto;
}
.c-drawer > .content::-webkit-scrollbar {
width: var(--c-drawer-scrollbar-weight);
}
.c-drawer > .content::-webkit-scrollbar-track {
background: transparent;
}
.c-drawer > .content::-webkit-scrollbar-thumb {
background: var(--c-drawer-scrollbar-color);
border-radius: var(--c-drawer-scrollbar-weight);
}
.c-drawer > .back {
position: fixed;
inset: 0;
display: block;
background: var(--c-drawer-back-background);
cursor: default;
pointer-events: auto;
}
.c-drawer > .content.-top {
overflow: visible;
inset: 0 0 auto 0;
transform: translate(0, -100%);
}
.c-drawer > .content.-right {
inset: 0 0 0 auto;
width: auto;
min-height: 100%;
transform: translate(100%, 0);
}
.c-drawer > .content.-bottom {
overflow: visible;
inset: auto 0 0 0;
transform: translate(0, 100%);
}
.c-drawer > .content.-left {
inset: 0 auto 0 0;
width: auto;
min-height: 100%;
transform: translate(-100%, 0);
}
.c-drawer[aria-hidden=false] {
opacity: 1;
visibility: visible;
transition-duration: var(--c-drawer-duration);
pointer-events: auto;
}
.c-drawer[aria-hidden=false] > .content {
transform: translate(0, 0);
transition-duration: var(--c-drawer-duration);
}
.site-drawer {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding-right: var(--site-wrap-border-width);
}
.site-drawer::before {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: var(--site-wrap-border-width);
background: linear-gradient(0deg, var(--color-gray-light) 0%, var(--color-orange) 100%);
pointer-events: none;
}
.site-drawer > .header {
flex: 0 0 auto;
padding: 10px 4em;
}
.site-drawer > .content {
flex: 1 1 0%;
margin-top: var(--px-200);
margin-bottom: 50px;
padding-inline: 2em;
width: 50vw;
}
.site-drawer > .content > .secondary {
margin-top: clamp(29px, 3.4285714286vw, 48px);
border-top: 3px dotted var(--color-black);
}
.site-drawer > .content > .pickup {
margin-top: clamp(24px, 2.8571428571vw, 40px);
}
.site-drawer > .footer {
flex: 0 0 auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: clamp(48px, 5.7142857143vw, 80px);
padding: clamp(14px, 1.7142857143vw, 24px) clamp(24px, 2.8571428571vw, 40px);
background: linear-gradient(90deg, var(--color-turquoise) 0%, var(--color-blue) 100%);
}
.site-drawer > .footer::before {
z-index: -1;
content: "";
position: absolute;
height: clamp(24px, 2.8571428571vw, 40px);
inset: auto 0 calc(100% - 1px) 0;
background: linear-gradient(90deg, var(--color-turquoise) 0%, var(--color-blue) 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.site-drawer-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 50px;
}
.site-drawer-header > .content{
text-align: center;
}
.site-drawer-header > .content > .tel{
font-family: var(--font-swald);
font-size: 30px;
}
.site-drawer-header > .content > .tel > span{
font-weight: 400;
font-size: 20px;
}
.site-drawer-header > .content > .sns > .list{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 1em;
}
.site-drawer-header > .content > .sns > .list > .item >  a > .icon > .c-icon::before{
width: 30px;
height: 30px;
}
.site-drawer-header > .logo > .image {
width: auto;
height: calc(var(--c-iconBtn-site-wrap-drawerBtn-width) * 0.9);
}
@media (max-width:767px) {
.c-drawer > .content.-right{
width: 100%;
}.site-drawer > .content{
padding-inline: 1.5em;
margin-bottom: 100px;
width: 100vw;
}
.site-drawer > .header{
padding: 10px 1.5em;
}
} .c-accordion>.item>.header>.btn {
cursor: pointer;
}
.c-accordion>.item>.panel[aria-hidden=true] {
display: none;
}
.c-accordion.-site-drawer-gnav {
font-size: 17px;
line-height: 1.6;
}
.c-accordion.-site-drawer-gnav>.item {
border-bottom: 1px solid var(--color-neon-blue);
}
.c-accordion.-site-drawer-gnav>.item>.gnav-header>.btn,.c-accordion.-site-drawer-gnav>.item>.panel>.list>.item>.link {
position: relative;
display: block;
padding-block: 1.1764705882em;
padding-inline: 1em;
font-size: 17px;
}
.c-accordion.-site-drawer-gnav>.item>.gnav-header>.btn::after,.c-accordion.-site-drawer-gnav>.item>.panel>.list>.item>.link::after {
content: "";
position: absolute;
inset: 50% .6em auto auto;
width: 1.2em;
aspect-ratio: 1/1;
background: var(--color-neon-blue);
-webkit-mask: var(--icon-arrow-b-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-b-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
}
.c-accordion.-site-drawer-gnav>.item>.gnav-header>.btn.js-accordion-btn::after,.c-accordion.-site-drawer-gnav>.item>.panel>.list>.item>.link.js-accordion-btn::after {
-webkit-mask: var(--icon-plus) no-repeat 50% 50%/contain;
mask: var(--icon-plus) no-repeat 50% 50%/contain;
transition: transform 0.5s cubic-bezier(.2,.6,.3,1.1);
}
.c-accordion.-site-drawer-gnav>.item>.panel>.list {
background-color: var(--color-black-3);
}
.c-accordion.-site-drawer-gnav>.item>.panel>.list>.item {
border-top: 1px solid var(--color-neon-blue);
}
.c-accordion.-site-drawer-gnav>.item>.gnav-header>.btn.js-accordion-btn[aria-expanded=true]::after {
transform: translateY(-50%) rotate(315deg);
} footer>.inner{
width: var(--content-width-1300);
margin-inline: auto;
padding-block: var(--px-120) var(--px-40);
}
footer>.inner>.wrap{
display: flex;
justify-content: space-between;
}
footer>.inner>.wrap>.content>.copy{
font-size: var(--font-20);
font-weight: 700;
margin-bottom: .5em;
}
footer>.inner>.wrap>.content>.link>.logo{
margin-bottom: .8em;
}
footer>.inner>.wrap>.content>.txt{
font-size: 18px;
font-weight: 500;
line-height: 2;
}
footer>.inner>.wrap>.content>.btn{
display: inline-block;
border: 0.5px solid #FFF;
width: min(190px,100%);
margin-top: 1em;
}
footer>.inner>.wrap>.content>.btn>.link{
font-family: var(--font-sansJP);
font-size: var(--font-16);
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 10px;
padding-inline: 15px;
}
@media (hover : hover) { 
footer>.inner>.wrap>.content>.btn>.link:hover>.c-icon.-arrow:before{
transform: translateX(3px);
}
}
footer>.inner>.wrap>.nav>.menu{
display: grid;
grid-template-columns: repeat(4, max-content);
gap: var(--px-65);
}
footer>.inner>.wrap>.nav>.menu>.item>.link{
font-size: var(--font-18);
font-weight: 700;
line-height: 2;
overflow: hidden;
position: relative;
display: inline-block;
}
footer>.inner>.wrap>.nav>.menu>.item>.link > span::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(68 227 237 / 0%) 0%, rgb(68 227 237 / 57%) 55%, rgb(68 227 237 / 85%) 100%);
transform: translateY(100%);
transition: transform 0.4s ease-out;
z-index: -1;
}
@media (hover : hover) {
footer>.inner>.wrap>.nav>.menu>.item>.link:hover > span::after{
transform: translateY(0);
}
}
footer>.inner>.wrap>.nav>.menu>.item>.sub-list{
padding-left: 0.8em;
border-left: 1px solid var(--color-neon-blue);
}
footer>.inner>.wrap>.nav>.menu>.item>.sub-list>.sub-item>.link{
font-size: var(--font-18);
line-height: 2;
position: relative;
overflow: hidden;
display: inline-block;
}
footer>.inner>.wrap>.nav>.menu>.item>.sub-list>.sub-item>.link > span::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(68 227 237 / 0%) 0%, rgb(68 227 237 / 57%) 55%, rgb(68 227 237 / 85%) 100%);
transform: translateY(100%);
transition: transform 0.4s ease-out;
z-index: -1;
}
@media (hover : hover) {
footer>.inner>.wrap>.nav>.menu>.item>.sub-list>.sub-item>.link:hover > span::after{
transform: translateY(0);
}
}
footer>.bottom-link{
border-top: 1px solid #EAF6FD;
padding-block: 1.2em 2em;
padding-inline: 1em;
}
footer>.bottom-link>.list{
width: var(--content-width-1300);
margin-inline: auto;
}
footer>.bottom-link>.list>.item{
text-align: end;
overflow: hidden;
}
footer>.bottom-link>.list>.item>.link{
font-size: var(--font-16);
line-height: 2;
position: relative;
overflow: hidden;
display: inline-block;
}
footer>.bottom-link>.list>.item>.link>span::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(68 227 237 / 0%) 0%, rgb(68 227 237 / 57%) 55%, rgb(68 227 237 / 85%) 100%);
transform: translateY(100%);
transition: transform 0.4s ease-out;
z-index: -1;
}
@media (hover : hover) {
footer>.bottom-link>.list>.item>.link:hover>span:after{
transform: translateY(0);
}
}
@media (max-width:1200px) {
footer>.inner>.wrap>.nav>.menu{
grid-template-columns: repeat(2, max-content);
}
} .c-pagination {
font: inherit;
line-height: 1;
letter-spacing: 0;
}
.c-pagination>.list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.c-pagination>.list>.item {
display: block;
}
.c-pagination>.list>.item>.link {
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
font-style: normal;
}
.c-pagination {
font-size: var(--font-16);
}
.c-pagination>.list {
gap: .8em;
}
.c-pagination>.list>.item>.link {
z-index: 0;
overflow: hidden;
position: relative;
width: 2.8em;
aspect-ratio: 1/1;
background: var(--color-blue);
color: var(--color-white);
border-radius: 100%;
transition-property: background-color,color;
transition-duration: var(--transition-duration);
}
.c-pagination>.list>.item>.link::before {
z-index: -1;
opacity: 1;
content: "";
position: absolute;
inset: 0;
background: var(--color-blue);
transition: all var(--transition-duration) ease;
}
.c-pagination>.list>.item>.link:is(.-prev,.-next) {
background: transparent;
color: var(--color-blue);
}
.c-pagination>.list>.item>.link:is(.-prev,.-next)::before {
opacity: 0;
}
.c-pagination>.list>.item>.link:is(.-prev,.-next)::after {
content: "";
width: 1.6em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-b-right) no-repeat 50%/contain;
mask: var(--icon-arrow-b-right) no-repeat 50%/contain;
transform: rotate(180deg);
transition: all var(--transition-duration) ease;
}
.c-pagination>.list>.item>.link.-next::after {
-webkit-mask-image: var(--icon-arrow-b-right);
mask-image: var(--icon-arrow-b-right);
transform: rotate(0deg);
}
.c-pagination.-gradient>.list>.item>.link::before {
background: var(--color-black);
}
.c-pagination>.list>.item>.link:is(:hover,.-current)::before {
background: var(--color-black);
}
.c-pagination>.list>.item>.link:is(.-prev,.-next):hover::after {
background: var(--color-black);
} .c-noContent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
line-height: 1.4;
text-align: center;
overflow-wrap: break-word;
}
.c-noContent {
height: 12.5em;
font-size: var(--font-16);
line-height: 1.8;
} .body.-notfound{
background: var(--color-white);
}
.body.-notfound::after{
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.25;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
.notfound-container{
width: var(--content-width-1300);
margin-inline: auto;
padding-block: var(--px-150);
}
.notfound-container>.txt{
font-size: 16px;
line-height: 2;
margin-bottom: 2em;
color: var(--color-black);
text-align: center;
}
@media (max-width:560px) {
.notfound-container>.txt{
text-align: left;
}
} .c-pager {
display: flex;
}
.c-pager>.item {
align-items: center;
display: flex;
}
.c-pager>.item.-next{
flex: 1 1 0%;
justify-content: flex-end;
}
.c-pager>.item.-prev {
flex: 1 1 0%;
justify-content: flex-start;
}
.c-pager>.item.-back {
flex: 0 0 auto;
}
.c-pager>.item>.link{
display: flex;
align-items: center;
gap: .5em;
font-weight: 500;
}
@media (hover : hover) { 
.c-pager>.item>.link:hover{
color: var(--color-blue);
}
.c-pager>.item>.link:hover>.c-icon.-arrow-b:before{
background-color: var(--color-blue);
}
}.home-container {
position: relative;
} #header {
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease;
}
#header.-is-kv-visible {
opacity: 1;
pointer-events: auto;
} .hero {
position: relative;
z-index: 2;
overflow-x: clip;
overflow-y: visible;
} .hero-skip {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 100;
background: transparent;
border: 1px solid var(--color-neon-blue);
color: var(--color-white);
padding: 0 1.5em;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5em;
opacity: 1;
transition: opacity 0.4s ease, background 0.3s ease;
}
.hero-skip-arrow {
font-size: 20px;
}
.hero-skip.is-hidden {
opacity: 0;
pointer-events: none;
}
@media (hover: hover) {
.hero-skip:hover {
background: rgba(68, 227, 237, 0.15);
}
}
@media (max-width:560px) {
.hero-skip {
bottom: 5rem;
right: 1rem;
}
} .hero>.hero-media {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero>.hero-media.is-unpinned {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.hero>.hero-media.is-hidden {
opacity: 0;
visibility: hidden;
}
.hero>.hero-media>.logo-img{
position: relative;
z-index: 10;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.hero>.hero-media>.deco {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
.hero>.hero-media>.deco>.img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
transform: translate(-50%, -50%) scale(.5);
animation: scaleUp 3s infinite ease-in-out;
}
.hero>.hero-media>.deco>.img-1 {
animation-delay: 0s;
}
.hero>.hero-media>.deco>.img-2 {
animation-delay: 1s;
}
.hero>.hero-media>.deco>.img-3 {
animation-delay: 2s;
}
@keyframes scaleUp {
0% {
transform: translate(-50%, -50%) scale(.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(7);
opacity: 0;
}
}
.hero>.hero-inner {
position: relative;
z-index: 5;
} .hero>.hero-inner>.hero-section {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 5;
pointer-events: none;
} .hero>.hero-inner>.hero-section.is-unpinned {
position: absolute;
}
.hero>.hero-inner>.hero-section>.hero-content {
text-align: center;
margin-top: 350px;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: auto;
}
.hero>.hero-inner>.hero-section>.hero-content.is-visible {
opacity: 1;
}
.hero>.hero-inner>.hero-section>.hero-content.is-hidden {
opacity: 0;
}
.hero>.hero-inner>.hero-section>.hero-content>.txt {
color: var(--color-white);
font-size: var(--font-20);
margin-bottom: 16px;
font-weight: 100;
}
.hero>.hero-inner>.hero-section>.hero-content>.ttl {
color: var(--color-white);
font-size: var(--font-60);
font-weight: bold;
opacity: 0;
transition: opacity 0.8s ease;
min-height: 1.7em;
padding-inline: .5em;
}
.hero>.hero-inner>.hero-section>.hero-content.is-visible>.ttl {
opacity: 1;
transition-delay: 0.5s;
}
@media (max-width:767px) {
.hero>.hero-inner>.hero-section>.hero-content{
margin-top: 250px;
}
}
@media (max-width:560px) {
.hero>.hero-inner>.hero-section>.hero-content>.ttl{
font-size: var(--font-45);
}
} .typing-cursor {
display: inline-block;
margin-left: 2px;
font-weight: 200;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
} .scroll-indicator {
position: fixed;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
flex-direction: column;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease;
}
.scroll-indicator.is-show {
opacity: 1;
pointer-events: auto;
}
.scroll-indicator.is-unpinned {
position: absolute;
bottom: auto;
}
.scroll-indicator > .txt {
color: var(--color-white-b);
text-align: center;
font-size: 18px;
}
.scroll-indicator > .c-icon.-scroll {
animation: scrollDown 2s ease-out infinite;
}
@keyframes scrollDown {
0% {
transform: translateY(0px);
opacity: 0;
}
30% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translateY(25px);
opacity: 0;
}
} .home-company::before {
content: "";
position: absolute;
inset: 0;
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-company-bg.jpg) center / cover no-repeat;
opacity: 0.6;
z-index: 0;
}
.home-company>.inner {
position: relative;
padding-block: var(--px-200);
z-index: 1;
}
.home-company>.inner>.ttl {
font-size: var(--font-60);
margin-bottom: 24px;
font-weight: 700;
line-height: 1.6;
}
.home-company>.inner>.txt {
font-family: var(--font-sansJP);
font-size: var(--font-20);
font-weight: 700;
line-height: 2;
margin-bottom: var(--px-34);
}
@media (max-width:560px) {
.home-company::before{
background-position: right;
opacity: 0.3;
}
.home-company>.inner>.ttl {
font-size: var(--font-45);
}
} .home-service>.inner{
padding-block: var(--px-100) var(--px-80);
}
.home-service>.inner >.body>.grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-auto-rows: minmax(500px,auto);
gap: var(--px-50);
margin-top: var(--px-85);
margin-bottom: var(--px-95);
}
.home-service>.inner >.body>.grid>.list{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: 1.5em;
padding-inline: 1em;
border: 2px solid var(--color-neon-blue);
background: rgba(0, 175, 204, 0.20);
box-shadow: 0 0 12px 0 rgba(178, 247, 251, 0.80) inset, 0 0 12px 0 #44E3ED;
}
.home-service>.inner >.body>.grid>.list>.ttl{
font-size: var(--font-30);
font-weight: 700;
text-align: center;
line-height: 1.2;
margin-top: var(--px-30);
}
.home-service>.inner >.body>.grid>.list>.txt{
text-align: center;
font-size: var(--font-20);
font-weight: 500;
line-height: 2;
margin-top: var(--px-10);
}
@media (max-width:960px) {
.home-service>.inner >.body>.grid{
grid-auto-rows: minmax(0, auto);
}
}
@media (max-width:560px) {
.home-service>.inner >.body>.grid{
grid-template-columns: repeat(1, 1fr);
}
} .home-project{
background: linear-gradient(360deg,rgba(13, 13, 13, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.home-project>.inner{
padding-block: var(--px-100) var(--px-80);
}
.home-project>.inner >.body>.grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-auto-rows: minmax(550px,auto);
gap: var(--px-50);
margin-top: var(--px-85);
margin-bottom: var(--px-95);
position: relative;
}
.home-project>.inner >.body>.grid>.list-wrap{
display: flex;
flex-direction: column;
}
.home-project>.inner >.body>.grid>.list-wrap>.deco{
display: inline-block;
align-self: flex-start;
background-color: var(--color-neon-blue);
color: var(--color-black);
font-size: var(--font-24);
padding: 0 1em 0 0.5em;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
letter-spacing: 0.05em;
}
.home-project>.inner >.body>.grid>.list-wrap>.list{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
flex: 1;
min-height: 500px;
padding-block: 1.5em;
padding-inline: 1em;
border: 2px solid var(--color-neon-blue);
box-shadow: 0 0 12px 0 rgba(178, 247, 251, 0.80) inset, 0 0 12px 0 #44E3ED;
}
.home-project>.inner >.body>.grid>.list-wrap>.list::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
.home-project>.inner >.body>.grid>.list-wrap>.list.-case01::before{
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-project-img01.jpg) center / cover no-repeat;
}
.home-project>.inner >.body>.grid>.list-wrap>.list.-case02::before{
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-project-img02.jpg) center / cover no-repeat;
}
.home-project>.inner >.body>.grid>.list-wrap>.list.-case03::before{
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-project-img03.jpg) center / cover no-repeat;
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content{
display: flex;
flex-direction: column;
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.item{
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-top: 1em;
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.ttl-marg{
margin-bottom: var(--px-20);
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.copy-marg{
margin-bottom: var(--px-20);
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.ttl-marg>.ttl{
font-size: var(--font-28);
font-weight: 700;
line-height: 1.4;
display: inline;
padding: var(--px-8) var(--px-16);
background: var(--color-black);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.copy-marg>.copy{
color: var(--color-black);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.01875em;
display: inline;
padding: var(--px-8) var(--px-16);
background: var(--color-white);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.home-project>.inner >.body>.grid>.list-wrap>.list>.content>.item>.list{
border: 1px solid var(--color-neon-blue);
color: var(--color-neon-blue);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.01875em;
background: var(--color-black);
padding:  .2em var(--px-8);
}
@media (max-width:960px) {
.home-project>.inner >.body>.grid{
grid-auto-rows: minmax(0, auto);
}
}
@media (max-width:560px) {
.home-project>.inner >.body>.grid{
grid-template-columns: repeat(1, 1fr);
margin-bottom: 0;
}
} .home-recruit{
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-recruit-bg.jpg) center / cover no-repeat;
}
.home-recruit::before{
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(13, 13, 13, 0.75);
z-index: -1;
}
.home-recruit>.inner>.message{
padding-block: var(--px-100) var(--px-130);
padding-inline: 1em;
}
.home-recruit>.inner>.message>.ttl{
text-align: center;
font-size: var(--font-60);
font-weight: 700;
line-height: 1.6;
margin-bottom: var(--px-40);
}
.home-recruit>.inner>.message>.txt{
text-align: center;
font-size: var(--font-30);
font-weight: 700;
line-height: 1.5;
}
.home-recruit>.inner>.flx{
display: flex;
}
.home-recruit>.inner>.flx>.action{
flex: 1 0 auto;
}
.home-recruit>.inner>.flx>.action>.link{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(68, 227, 237, 0.65) 0%, rgba(55, 183, 191, 0.65) 67.79%, rgba(35, 130, 188, 0.65) 100%);
font-size: var(--font-30);
font-family: var(--font-sansJP);
font-weight: 500;
border: 1px solid var(--color-neon-blue);
min-height: 300px;
position: relative;
overflow: hidden;
text-align: center;
line-height: 1.3;
}
.home-recruit>.inner>.flx>.action>.link::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(68, 227, 237, 0.65) 0%, rgba(55, 183, 191, 0.65) 67.79%, rgba(35, 130, 188, 0.65) 100%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.home-recruit>.inner>.flx>.action>.link>span>.en{
color: var(--color-white-b);
font-size: var(--font-20);
font-family: var(--font-pop);
font-weight: 400;
}
@media (hover : hover) {
.home-recruit>.inner>.flx>.action>.link:hover::after{
opacity: 1;
}
}
@media (max-width:767px) {
.home-recruit>.inner>.flx{
flex-direction: column;
}
.home-recruit>.inner>.flx>.action>.link{
min-height: 150px;
}
}
@media (max-width:560px) {
.home-recruit>.inner>.message>.ttl{
text-align: left;
font-size: var(--font-45);
}
.home-recruit>.inner>.message>.txt{
text-align-last: left;
font-size: var(--font-25);
font-weight: 500;
}
} .home-recruit-bnr{
background: var(--color-black);
}
.home-recruit-bnr>.inner{
padding-block: var(--px-200);
}
.home-recruit-bnr>.inner>.content{
padding-block: var(--px-65) var(--px-75);
padding-inline: 3em;
border: 1px solid var(--color-white-b);
box-shadow: 0 0 15px 0 var(--color-white-b);
}
.home-recruit-bnr>.inner>.content::before{
content: "";
position: absolute;
inset: 0;
background: url(//fa-struct.com/wp-content/themes/struct/assets/img/home-recruit-bnr-bg.jpg) right / cover no-repeat;
width: 100%;
height: 100%;
z-index: -1;
}
.home-recruit-bnr>.inner>.content::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,rgba(13, 13, 13, 0.96) 55%, rgba(13, 13, 13, 0) 100%);
width: 100%;
height: 100%;
z-index: -1;
}
.home-recruit-bnr>.inner>.content>.ttl{
font-size: var(--font-60);
font-weight: 700;
line-height: 1.5;
margin-bottom: var(--px-25);
}
.home-recruit-bnr>.inner>.content>.txt{
font-size: var(--font-30);
font-weight: 500;
line-height: 1.5;
margin-bottom: var(--px-15);
}
.home-recruit-bnr>.inner>.content>.txt+.txt{
margin-bottom: 0;
}
.home-recruit-bnr>.inner>.content>.c-action{
margin-top: var(--px-25);
}
@media (max-width:767px) {
.home-recruit-bnr>.inner>.content{
padding-inline: 1em;
}
.home-recruit-bnr>.inner{
padding-block: 80px;
}
}
@media (max-width:560px) {
.home-recruit-bnr>.inner>.content>.ttl{
font-size: var(--font-45);
}
.home-recruit-bnr>.inner>.content>.txt{
font-size: var(--font-25);
}
} .news{
background: var(--color-white);
}
.news::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.25;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
.news>.inner{
padding-block: var(--px-200);
}
.home-news > .body{
margin-top: var(--px-50);
}
@media (max-width:560px) {
.news>.inner{
padding-block: 80px;
}
}