@charset "utf-8";

@media(prefers-reduced-motion:no-preference){
    html{ scroll-behavior: auto; }
}
body:not(.introEnded){ overflow: hidden!important; height: 100vh!important; }
.introEnded .intro{ display: none; }
.intro{ contain: content; position: fixed; inset: 0; display: grid; place-items: center; background: #fff; user-select: none; z-index: 100;
    --timing1: cubic-bezier(0.34, 0.84, 0.18, 1.26);
    --timing2: cubic-bezier(0.82, 0.01, 0.97, 0.01);
    --timing3: cubic-bezier(0.46, 0.81, 0.53, 0.2);
    animation: intro-out .6s 3.2s ease-in-out both;
    /* .txt-group{ animation: intro-txt .5s var(--timing2) 2s both; } */
    .color-box{ animation: intro-color-box 1.2s linear .4s both; }
    .p1, .p3{ animation: intro-left 2s linear .4s both; }
    .p2{ animation: intro-right 2s linear .4s both; }
    .p-txt{ animation: intro-scale 2s .4s both; display: inline-block; }
    .logo{ animation: intro-logo .7s var(--timing1) 2s both; }
    .txt-group{ position: relative; perspective: 400px; font: 700 clamp(30rem, calc( 80 / var(--inr) * 100vw ), 80rem) / 1.2 var(--font-work); letter-spacing: .03em; z-index: 1; }
    .color-box{ position: absolute; top: 0; left: 0; translate: -52.1% -8.5%; width: 0.83333333em; height: 1.96666667em; background: linear-gradient(#0ab195 20%, #52d0c0); z-index: -1; }
    .logo{ position: absolute; inset: 4vw; margin: auto; aspect-ratio: 1; width: 40vmin; background: #fff url('/images/main/intro-logo.png') no-repeat 50% / contain; }
}
@keyframes intro-out {
    0%{ opacity: 1; visibility: visible; }
    100%{ opacity: 0; visibility: hidden; }
}
@keyframes intro-txt {
    0%{ opacity: 1; scale: 1; }
    100%{ opacity: 0; scale: 2; }
}
@keyframes intro-color-box {
    0%{ clip-path: inset(0 0 100%); opacity: 1; }
    50%{ clip-path: inset(0); }
    100%{ clip-path: inset(100% 0 0); opacity: 0; }
}
@keyframes intro-left {
    0%{ translate: -50vw; scale: 0; }
    50%{ filter: blur(0); }
    100%{ translate: 50vw; scale: 2; filter: blur(40px); }
}
@keyframes intro-right {
    0%{ translate: 50vw; scale: 0; }
    50%{ filter: blur(0); }
    100%{ translate: -50vw; scale: 2; filter: blur(40px); }
}
@keyframes intro-scale {
    0%{ opacity: 0; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}
@keyframes intro-logo {
    0%{ opacity: 0; scale: 0; filter: blur(20px); }
    100%{ opacity: 1; scale: 1; filter: blur(0); }
}

header{ position: fixed; }

#wrap [data-se]{ transition-timing-function: cubic-bezier(0.37, 0.91, 0.42, 0.99); }

.fullpage{
    .lead{ font: italic 600 16rem / 1.5 var(--font-work); letter-spacing: -.01em; color: var(--primary); }
    .head{ margin-top: 0.26315789em; font: 800 var(--fs38) / 1.5 var(--font-pre); letter-spacing: -.015em; }
    .subHead{ margin-top: 4rem; color: #5a5a5a; }
    .text-primary{ color: var(--primary); }
    .fp-scroller, .iScrollIndicator{ transition: .3s ease!important; }
    [data-anchor="greeting"] .iScrollIndicator{ display: none!important; }
    @media(min-width:1280px) and (min-height:900px) and (prefers-reduced-motion:no-preference){
        [data-se]{ transform: none; }
        .section:not(.fp-completely) .inr > *{ opacity: 0; translate: 0 40rem; }
        .section.fp-completely .inr > *{ opacity: 1; translate: 0; transition: .6s cubic-bezier(0.37, 0.91, 0.42, 0.99); }
        .section.fp-completely .inr > *:nth-child(2){ transition-delay: .25s; }
    }
    @media(max-width:1279px) or (max-height:899px){
        .fp-section, .fp-tableCell, .fp-scrollable, .fp-scroller{ height: auto!important; }
        .fp-scroller{ transform: none!important; }
        .iScrollLoneScrollbar{ display: none; }
    }
}
body header::after{ content: ''; position: absolute; inset: 0 10px 0 0; z-index: -1; background: #fff; opacity: 0; transition: .3s; }
body:has(.active[data-anchor="project"]) header::after{ opacity: 1; }

.index{ background: no-repeat 50% 100% / cover;
    .headings{ text-align: center; }
    .list{ margin-top: 45rem; display: grid; gap: 18rem; }
    .link{ --gradient: linear-gradient(#0000, #000); contain: content; display: grid; grid-template-rows: 1fr auto auto; aspect-ratio: 455/535; padding: 14.73628646% 9.23767211% 14.73628646% 8.35789381%; background: var(--gradient), var(--img) no-repeat 50% / cover; background-blend-mode: multiply; color: #fff; }
    .title{ align-self: end; margin-bottom: 0.21428571em; text-transform: uppercase; font: 600 var(--fs28) / 1.5 var(--font-work); }
    .subTitle{ text-transform: uppercase; font: 300 18rem / 1.5 var(--font-pre); }
    .more-group{ margin-top: 20rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, #0000); padding-top: 16rem; display: flex; align-items: center; justify-content: space-between; }
    .more{ font-family: var(--font-work); }
    .arrow{ width: 16rem; height: auto; }
    @media(prefers-reduced-motion:no-preference){
        .title, .subTitle{ transition: translate .4s; }
        .more-group{ transition: translate .4s, clip-path .4s cubic-bezier(0.40, 1, 0.40, 1); }
    }
    @media(hover){
        .more-group{ clip-path: inset(0); }
        .link:not(:hover) > *{ translate: 0 58rem; }
        .link:not(:hover) .more-group{ clip-path: inset(0 100% 0 0); }
    }
    @media(min-width:1280px) and (min-height:900px){
        .inr{ height: 100vh; padding: calc( var(--header-height) + 20rem) 0 20rem; }
    }
    @media(max-width:1279px) or (max-height:899px){
        &{ padding: calc( var(--header-height) + 70rem ) 0 70rem; }
    }
    @media(min-width:768px){
        &{ background-image: url('/images/main/index-bg-pc.webp'); }
        .list{ grid-template-columns: repeat(3, 1fr); }
        .l1{ --img: url('/images/main/index-1-pc.webp'); }
        .l2{ --img: url('/images/main/index-2-pc.webp'); }
        .l3{ --img: url('/images/main/index-3-pc.webp'); }
    }
    @media(max-width:767px){
        &{ background-image: url('/images/main/index-bg-mob.webp'); }
        .l1{ --img: url('/images/main/index-1-pc.webp'); }
        .l2{ --img: url('/images/main/index-2-pc.webp'); }
        .l3{ --img: url('/images/main/index-3-pc.webp'); }
    }
}

.about{ --org-border: #e2e2e2; background: no-repeat 50% 100% / cover;
    .headings{ text-align: center; }
    [class*="circle"]{ position: relative; }
    [class*="circle"]::before{ content: ''; position: absolute; translate: -50% -50%; aspect-ratio: 1; width: 12rem; background: inherit; border: 2rem solid #fff; border-radius: 50%; }
    .head1{ margin: 0 auto; display: grid; place-items: center; max-width: 260rem; width: 100%; height: 60rem; background: #222; border-radius: 5em; font: 500 19rem var(--font-pre); color: #fff; }
    .head1-garden{ background: #11b06f; }
    .lv1{ position: relative; display: grid; }
    .lv2{ position: relative; margin-top: 100rem; display: grid; }
    .lv2 > li{ position: relative; background: #fff; border: 1px solid var(--org-border); border-radius: 8rem; }
    .head2{ display: grid; place-items: center; height: 55rem; background: #37bdc9; border-radius: 8rem 8rem 0 0; font: 500 18rem var(--font-pre); color: #fff; }
    .lv3{ position: relative; display: grid; gap: 4rem; padding: 10rem 12rem 14rem; color: #5a5a5a; }
    .lv3 > li{ display: grid; grid-template-columns: auto 1fr; gap: 8rem; }
    .lv3 > li::before{ content: ''; translate: 0 -50%; margin-top: 1.3ch; width: 3px; height: 3px; background: #b7b7b7; }
    @media(min-width:1280px) and (min-height:900px){
        &{ padding: calc( var(--header-height) + 20rem) 0 20rem; }
    }
    @media(max-width:1279px) or (max-height:899px){
        &{ padding: 70rem 0 0; }
    }
    @media(min-width:768px){
        .org{ margin-top: 33rem; padding: 64rem 4vw 73rem; border: 1px solid var(--org-border); }
        .circle-top::before{ top: 0; left: 50%; }
        .circle-right::before{ top: 50%; left: 100%; }
        .circle-left::before{ top: 50%; left: 0; }
        .circle-bottom::before{ top: 100%; left: 50%; }
        .lv1{ margin-top: 60rem; grid-template-columns: 1fr 1fr; }
        .lv1 li:nth-child(1) .head1{ margin-left: 0; }
        .lv1 li:nth-child(2) .head1{ margin-right: 0; }
        li:has(>.lv2){ grid-column: 1/3; }
        .lv2{ --gap: clamp(10rem, calc( 54 / var(--inr) * 100vw ), 54rem); grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
        .lv3{ padding-inline: 13.2038835%; }
        /* border */
        .lv1::before, .lv1::after, .lv2::before, .lv3::before{ content: ''; position: absolute; background: var(--org-border); z-index: -1; }
        .lv1::before{ inset: 30rem 0 auto; height: 1px; }
        .lv1::after{ inset: -60rem 50% auto; width: 1px; height: 170rem; }
        .lv2::before{ inset: -50rem calc( 13% - ( var(--gap) * .5 ) ) auto calc( 13.1% - ( var(--gap) * .5 ) ); height: 1px; }
        .lv3::before{ inset: -105rem 50% 100%; width: 1px; }
    }
    @media(min-width:1280px){
        .org{ padding-inline: clamp(4vw, calc( 99 / var(--inr) * 100vw ), 99rem); }
    }
    @media(max-width:767px){
        .org{ margin-top: 48rem; }
        [class*="circle"]::before{ top: 0; left: 50%; }
        .circle-bottom::before{ top: 100%; left: 50%; }
        .lv1{ margin-top: 40rem; grid-template-columns: 1fr 1fr; gap: 54rem 90rem; }
        li:has(>.lv2){ grid-column: 1/3; }
        .lv2{ margin-top: 0; grid-template-columns: 1fr 1fr; gap: 54rem 90rem; font-size: 12rem; }
        .head1{ max-width: 200rem; height: 48rem; font-size: 14rem; }
        .head2{ height: 42rem; font-size: 14rem; }
        /* border */
        .lv1::before, .lv1::after, .head1-garden::after, .lv2 > li::before, .lv2 > li::after{ content: ''; position: absolute; background: var(--org-border); z-index: -1; }
        .lv1::before{ inset: -20rem calc( (100% - 90rem) / 4) auto; height: 1px; }
        .lv1::after{ inset: -40rem 50% auto; width: 1px; height: 117rem; }
        .head1-garden::after{ inset: -20rem 50% auto; width: 1px; height: 20rem; }
        .lv2 > li::before{ inset: -27rem 50% 100%; width: 1px; }
        .lv2 > li:nth-child(n+3)::before{ top: -57rem; }
        .lv2 > li:nth-child(odd)::after{ inset: -27rem -50% auto 50%; height: 1px; }
        .lv2 > li:nth-child(even)::after{ inset: -27rem 50% auto -50%; height: 1px; }
    }
}

.greeting{
    .headings{ text-align: center; }
    .box{ margin-top: 38rem; display: grid; gap: 50rem 0; border-bottom: 2px solid currentColor; }
    /* .box{ margin-top: 38rem; display: grid; gap: 50rem 0; background: url('/images/main/greeting-symbol.webp') no-repeat var(--bg-position) / var(--bg-size); border-bottom: 2px solid currentColor; } */
    .lead2{ font: 600 15rem / 1.5 var(--font-work); color: var(--primary); }
    .head2{ margin-top: .333em; text-wrap: balance; font: 700 var(--fs30) / 1.5 var(--font-pre); letter-spacing: -.02em; }
    .head2 + .body{ margin-top: 28rem; }
    .body{ line-height: 1.6; color: #444; }
    .body + .body{ margin-top: 20rem; }
    .ceo{ margin: 20rem 0 40rem; display: flex; align-items: flex-end; gap: 1.5em; font-weight: 600; }
    /* .signature{ translate: 0 -.1875em; font: 2em var(--font-kbj); } */
    .signature{ width: 120rem; height: auto; }
    .photo{ place-self: end; max-width: 100%; height: auto; }
    @media(min-width:1280px) and (min-height:900px){
        &{ padding: calc( var(--header-height) + 20rem) 0 20rem; }
    }
    @media(max-width:1279px) or (max-height:899px){
        &{ padding: 70rem 0 0; }
    }
    @media(min-width:768px){
        .box{ padding: 0 50rem; }
        .body{ font-size: 17rem; }
    }
    @media(min-width:1280px){
        .box{ --bg-position: 73.6% 109%; --bg-size: 423rem; grid-template-columns: 1fr auto; }
        .txt{ align-self: center; }
        .photo{ width: 440rem; }
    }
    @media(max-width:1279px) and (min-width:768px){
        .photo{ margin-top: -35%; width: 250rem; }
        .box{ --bg-position: 75% 102%; --bg-size: 255rem; }
    }
    @media(max-width:767px){
        .box{ --bg-position: -31.4% 101.5%; --bg-size: 73%; }
        .photo{ width: 70%; }
        .body{ font-size: 16rem; }
        .ceo{ margin: 0 }
        .signature{ width: 120rem; }
    }
}
@media(min-width:1280px) and (min-height:900px) and (prefers-reduced-motion:no-preference){
    #wrap .greeting .box [data-se]{ transform: none; opacity: 1; }
}

.project{ padding: calc(var(--header-height) + 70rem) 0; text-align: center;
    .list{ margin-top: 44rem; display: grid; column-gap: 12rem; }
    a:not(.more){ contain: content; position: relative; display: block; }
    img{ display: block; aspect-ratio: 1; width: 100%; background: #fff; object-fit: cover; text-indent: -100vw; }
    /* img{ display: block; aspect-ratio: 1; width: 100%; background: #fff url('/images/common/no_image.svg') no-repeat 50% / 90rem; object-fit: cover; text-indent: -100vw; } */
    .title{ font-size: clamp(18rem, calc( 25 / var(--inr) * 100vw ), 25rem); }
    .view{ margin-top: 34rem; display: inline-block; padding: 0 1px 1px; border-bottom: 2px solid currentColor; font: 500 15rem / 1.5 var(--font-pre); }
    .more{ margin: 79rem auto 0; display: flex; align-items: center; gap: 50rem; width: fit-content; padding: 21rem 28rem 19rem; border: 1px solid #ddd; font: 500 15rem var(--font-pre); color: #5a5a5a; }
    .more::after{ content: ''; display: inline-block; aspect-ratio: 1; width: 7rem; border: solid #888988; border-width: 1px 1px 0 0; rotate: 45deg; }
    @media(hover){
        @media(prefers-reduced-motion:no-preference){
            .txt{ transition: .2s; }
        }
        .list{ row-gap: 13rem; }
        .txt:not(:hover){ opacity: 0; scale: 1.1; }
        .txt{ position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 0 0 1.4%; background: color-mix(in srgb, #000 85%, #0000); color: #fff; z-index: 1; }
    }
    @media(hover:none){
        .list{ row-gap: 30rem; }
        .title{ margin-top: .5em; }
        .view{ display: none; }
    }
    @media(min-width:768px){
        .list{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(max-width:767px){
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
    .list:has(.no_data){ grid-template-columns: 1fr; }
}

#wrap .contact{ padding: calc(var(--header-height) + 70rem) 0 60rem;
    .inner{ display: grid; }
    .headings{ padding-bottom: 41rem; }
    .img{ background: #92a6a9 url('/images/main/contact-img.webp') no-repeat 50% / cover; z-index: 1; }
    .address{ display: grid; gap: 24.2rem; padding: 64rem 0 97rem; color: #fff; z-index: 1; }
    .address > span{ display: grid; justify-items: start; gap: 8rem; }
    .address b{ font: 600 18rem / 1.5 var(--font-work); }
    .bg{ background: var(--bgUrl) no-repeat 115% 110% / min(473rem, 43%), linear-gradient(#52d0c0, #0ab195); }
    @media(min-width:1280px) and (min-height:900px){
        [data-se]{ opacity: 1; clip-path: none; }
    }
    @media(min-width:1280px){
        .inner{ grid-template: auto auto 80rem / [left] minmax(4vw, auto) [h_start] clamp(0px, 29.16666667%, 560rem) [bg_start] clamp(0px, 5.72916667%, 110rem) [img_end] clamp(0px, 6.25%, 120rem) [add_start] clamp(0px, 31.77083333%, 610rem) [add_end] minmax(4vw, auto) [right]; }
        .headings{ grid-area: 1 / h_start / 2 / bg_start; margin-top: -8rem; }
        .img{ grid-area: 2 / left / 3 / img_end; }
        .address{ grid-area: 2 / add_start / 3 / add_end; }
        .bg{ --bgUrl: url('/images/main/contact-symbol-pc.png'); grid-area: 1 / bg_start / 4 / right; }
    }
    @media(max-width:1279px){
        .inner{ grid-template: auto 1fr / [left] minmax(4vw, auto) [inr_start] minmax(4vw, auto) [add_start] 1fr [add_end] minmax(4vw, auto) [right]; }
        .headings{ grid-area: 1 / inr_start / 2 / add_end; }
        .img{ display: none; }
        .address{ grid-area: 2 / add_start / 3 / add_end; }
        .bg{ --bgUrl: url('/images/main/contact-symbol-mob.webp'); grid-area: 2 / inr_start / 3 / right; }
    }
}