@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

#content{  }
.sub-title{ font: 700 var(--fs40) var(--font-pre); }

.about1{ display: grid; gap: 50rem; color: #464646;
    .txt-group{ display: grid; grid-template: 'i h' 'd d' 1fr / auto 1fr; gap: clamp(20rem, calc(53 / var(--inr) * 100vw), 53rem) clamp(20rem, calc(50 / var(--inr) * 100vw), 50rem); }
    .vertical-logo{ grid-area: i; display: block; max-width: 100%; width: 25rem; height: auto; }
    .head{ grid-area: h; margin-top: -.19230769em; font: 300 26rem/1.22 var(--font-suit); }
    .description{ grid-area: d; font: 500 14rem/1.5 var(--font-suit); }
    .about1-img{ display: block; width: 100%; height: auto; }
    @media(min-width:768px){
        .txt-group{ grid-template: 'i h' 'i d' 1fr / auto 1fr; }
        .vertical-logo{ width: clamp(30rem, calc(95 / var(--inr) * 100vw), 95rem); }
    }
    @media(min-width:1280px){
        &{ grid-template-columns: 50% 1fr; }
    }
}

.about2{ margin-top: clamp(70rem, calc(150 / var(--inr) * 100vw), 150rem); display: grid; gap: 60rem 0; padding: 59rem clamp(20rem, calc(41 / var(--inr) * 100vw), 41rem) 69rem; background: #f3f3f3 url('/images/content/about2-bg.webp') no-repeat 50% / cover;
    .img-group{ --gap: 9rem; display: grid; grid-template: 'c1 c2 c3' 'a a a' / 1fr 1fr 1fr; gap: var(--gap); aspect-ratio: 650/520; }
    .certificate{ display: block; width: 100%; height: auto; border: 1px solid #000; }
    .c1{ grid-area: c1; }
    .c2{ grid-area: c2; }
    .c3{ grid-area: c3; }
    .appearance{ grid-area: a; display: block; width: 100%; height: auto; object-fit: cover; }
    .txt-group{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48rem; text-align: center; }
    .list{ font: 500 16rem/23rem var(--font-suit); text-transform: uppercase; }
    .enterprise{ display: flex; align-items: center; justify-content: center; gap: 2ch; }
    .logo{ display: block; width: 100rem; height: 35rem; }
    @media(min-width:768px){
        &{ grid-template-columns: 650fr 576fr; }
        .img-group{ max-width: 650rem; }
        .txt-group{ padding-bottom: 4.4%; }
    }
    @media(min-width:1280px){
        &{ padding-left: clamp(20rem, calc(133 / var(--inr) * 100vw), 133rem); }
    }
}

.portfolio-list{ columns: 2; column-gap: var(--gap);
    .link{ margin-bottom: var(--gap); display: block; }
    .img{ display: block; width: 100%; height: auto; object-fit: cover; }
    @media(min-width:1280px){
        &{ columns: 4; }
    }
    @media(max-width:1279px) and (min-width:768px){
        &{ columns: 3; }
    }
}

.portfolio-view{ margin-inline: auto; display: grid; gap: 40rem; max-width: 1020rem; width: 100%;
    .txt-group{ position: relative; }
    .sticky{ position: sticky; top: 40rem; }
    .img-group{ columns: 2; column-gap: var(--gap); }
    .img-group:not(:has(img:nth-child(2))){ columns: 1; }
    .img{ margin-bottom: var(--gap); display: block; width: 100%; height: auto; object-fit: cover; cursor: pointer; }
    .link{ grid-column: 1/-1; justify-self: center; margin-top: 20rem; display: inline-flex; align-items: center; justify-content: center; gap: 1ch; padding: 1em 1.5em; border: 1px solid currentColor; }
    @media(min-width:768px){
        &{ grid-template-columns: 1fr auto; }
        .img-group{ width: 800rem; }
        .img-group:not(:has(img:nth-child(2))){ width: 320rem; }
    }
}

#PortfolioDialog{ border: 0; outline: 0; padding: 0; align-content: center; max-width: 100%; width: 100%; max-height: 100%; height: 100svh; background: 0;
    body:has(&[open]){ overflow: hidden; }
    &::backdrop{ background: rgba(0, 0, 0, 0.8); }
    .close-btn{ float: right; position: sticky; top: 0; right: 0; z-index: 2; margin-bottom: -45rem; width: 45rem; height: 45rem; background: #000; }
    .close-btn::before, .close-btn::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 60%; height: 3rem; background: #fff; }
    .close-btn::before{ rotate: 45deg; }
    .close-btn::after{ rotate: -45deg; }
    .img-slide{ width: 100%; height: 100%; }
    .swiper{ height: 100%; margin: auto; }
    .swiper-slide{ display: flex; align-items: center; }
    .swiper-button-prev, .swiper-button-next{ width: 45rem; aspect-ratio: 1; background: #000; color: #fff; }
    .swiper-button-prev{ left: 0; }
    .swiper-button-next{ right: 0; }
    .swiper-button-next:after, .swiper-button-prev:after{ font-weight: 700; font-size: 30rem; }
    .img{ display: block; max-width: 100%; max-height: 100%; object-fit: inherit; user-select: none; margin: auto; }
    @media(min-width:768px){
        .img-slide{ width: 90vmax; height: 90vmin; }
        .ratio-portrait{ max-height: 100%; margin: auto; display: block; }
    }
}