@charset "UTF-8";
:root {
    --bg-b: #3C3C3C;
}

html {
    position: relative;
    min-height: 100vh;
    &:has(body.works) {
        scroll-padding-top: 100px;
    }
}

.bg-b {
    background-color: var(--bg-b);
    color: #fff;
}

.sectionInner {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    padding-block: clamp(2rem, 5.3vw, 10rem);
    padding-right: clamp(2rem, 3.1vw, 6rem);
}

.last {
    margin-block-end: 4rem;
}

.bbb {
    font-family: "Gothic Medium BBB";
}

.mb101b {
    font-family: "Gothic MB101";
}

.mb31 {
    font-family: "Midashi Go MB31";
}

.shingoB {
    font-family: "Shin Go Bold";
}

.fadeIn {
    opacity: 0;
    transition: all 3s 0.5s;
}

.fadeIn.is-show {
    opacity: 1;
}

.fadeIn-first {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

header {
    position: sticky;
    top: 0;
    background: rgb(255 255 255 / 80%);
    padding-block: 2rem;
    z-index: 1000;
    .headerInner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        max-width: 1000px;
        width: 100%;
        margin-inline: auto;
        padding-left: calc(100px + 6rem);
        @media screen and (max-width: 768px) {
            padding-left: calc(81px + 6rem);
            padding-right: 2rem;
        }
        @media screen and (max-width: 767px) {
            padding-inline: 2rem;
        }
    }
    .logo-header {
        width: clamp(80px, 10.41vw, 120px);
    }
    .menu-header {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    nav ul li:after {
        content: "/";
        padding-inline: 1rem;
    }
}

nav ul li {
    display: inline-block;
    cursor: default;
}

section {
    margin-block: 6rem;
    .sectionInner-flex {
        display: flex;
        gap: 6rem;
        margin-block-end: 4rem;
        @media screen and (max-width: 767px) {
            gap: clamp(2rem, 3.1vw, 6rem);
        }
    }
    .sectionTitle {
        writing-mode: vertical-rl;
        font-size: clamp(2rem, 5.3vw, 5rem);
        font-weight: bold;
        position: sticky;
        top: 155px;
        align-self: flex-start;
    }
    .sectionText {
        width: 100%;
    }
}

section#intro {
    .sectionInner {
        padding: 0;
        padding-left: calc(100px + 6rem);
        padding-right: clamp(2rem, 3.1vw, 6rem);
        @media screen and (max-width: 768px) {
            padding-left: calc(81px + 6rem);
            padding-right: 2rem;
        }
        @media screen and (max-width: 767px) {
            padding-inline: 2rem;
        }
    }
    &:not(h1) {
        font-weight: bold;
    }
    h1 {
        font-size: clamp(3rem, 5.2vw, 6rem);
        margin-block-end: 4rem;
        /* text-shadow: 1px 1px 1px; */
        line-height: 1.5;
        height: 180px;
        @media screen and (max-width: 767px) {
            height: 100px;
        }
    }
    .lead {
        font-size: 2.2rem;
    }
}

section#service {
    margin-block-end: 0;
    .serviceMenu {
        margin-block-start: 4rem;
        display: flex;
        gap: 1.5vw;
        flex-wrap: wrap;
        justify-content: flex-start;
        @media screen and (max-width: 767px) {
            justify-content: center;
            gap: 10%;
        }
    }
    .serviceMenu-child {
        max-width: clamp(110px, 14.3vw, 120px);
    }
    .sectionText {
        font-size: 2rem;
    }
    .serveve-sub {
        margin-bottom: 5rem;
    }
}

section.office {
    margin-block: 0;
    .sectionInner {
        max-width: 100%;
        padding: 0;
    }
}

section#company {
    margin-block-start: 0;
    .companyInfo {
        display: flex;
    }
    .companyInfo div {
        width: 20rem;
    }
    .companyInfo div+div {
        width: 100%;
    }
    .companyInfo-child ul li {
        list-style: disc;
        list-style-position: inside;
    }
    .gmap iframe {
        width: 100%;
        aspect-ratio: 10/4;
        filter: grayscale(100%);
    }
    h2.name-company-jp {
        font-size: clamp(2rem, 1.56vw, 3rem);
        line-height: 1;
    }
    h2.name-company-en {
        font-size: clamp(1.4rem, 1.35vw, 2.6rem);
        margin-block-end: 2rem;
    }
    @media screen and (max-width:767px) {
        .companyInfo {
            flex-direction: column;
            margin-block-end: 2rem;
            border-bottom: 1px solid;
            padding-bottom: 2rem;
        }
        .companyInfo:first-of-type {
            border-top: 1px solid;
            padding-block-start: 2rem;
        }
    }
}

section#contact {
    margin-block-end: 10rem;
    .sectionInner-flex {
        gap: 0;
    }
    .sectionTitle {
        margin-right: clamp(2rem, 3.1vw, 6rem);
    }
    #mailform {
        padding: 10px 0px;
        text-align: left;
        width: 100%;
        table {
            width: 100%;
        }
        tr {
            th,
            td {
                display: block;
            }
        }
        input,
        textarea {
            padding: 5px;
            width: 100%;
            margin-bottom: 2rem;
        }
        button {
            background: var(--bg-b);
            color: #fff;
            padding: 1rem 5rem;
            font-size: 2rem;
            margin: 0 auto;
            display: block;
            cursor: pointer;
        }
        input[type="submit"], input[type="reset"], input[type="button"] {
            background: var(--bg-b);
            color: #fff;
            padding: 1rem 5rem;
            font-size: 2rem;
            margin: 0 auto;
            display: block;
            cursor: pointer;
            max-width: 300px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
    }
}

.works {
    .topTitle {
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-b);
        color: #fff;
        padding-block: 2rem;
        margin-block-end: 4rem;
        font-size: clamp(2rem, 5.33vw, 3rem);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .logo-topTitle {
        width: 6rem;
    }
    .h2-bg {
        background-repeat: no-repeat;
        background-size: contain;
        aspect-ratio: 800/140;
        max-width: 800px;
        width: 100%;
        margin-block-end: 1rem;
    }
    h2.worksSectionTitle {
        line-height: 1.5;
        font-size: clamp(1.6rem, 4.26vw, 1.9rem);
        margin-block-end: 2rem;
        display: flex;
        align-items: center;
        background-blend-mode: lighten;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        border-bottom: 2px solid;
        padding-bottom: 10px;
    }
    .worksInfo {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        width: 100%;
        font-family: initial;
        font-size: clamp(1.4rem, 3.7vw, 1.8rem);
        font-weight: bold;
        @media screen and (max-width: 767px) {
            flex-wrap: wrap;
        }
        ul.worksInfo-text {
            flex-shrink: 0;
            li {
                /* list-style: disc;
                list-style-position: inside; */
                padding-left: 40px;
                line-height: 1.8;
            }
        }
        img {
            display: inline;
        }
    }
    .worksInfo-img {
        max-width: 400px;
    }
    .worksTitle {
        writing-mode: vertical-rl;
        font-size: clamp(2rem, 5.3vw, 5rem);
        font-weight: bold;
        position: sticky;
        align-self: flex-start;
        top: 120px;
        z-index: -1;
    }
    .worksMain {
        section {
            background: rgb(60 60 60 / 5%);
            padding: 4%;
        }
    }
    section#sign {
        width: 100%;
        .h2-bg {
            background-image: url(../img/title-sign.svg);
            aspect-ratio: 300/69;
            height: 70px;
            @media screen and (max-width: 767px) {
                height: auto;
                width: 100%;
            }
        }
    }
    section#graphic {
        width: 100%;
        .h2-bg {
            background-image: url(../img/title-graphic.svg);
            aspect-ratio: 300/38;
            height: 70px;
            @media screen and (max-width: 767px) {
                height: auto;
                width: 100%;
            }
        }
    }
    section#design {
        width: 100%;
        .h2-bg {
            background-image: url(../img/title-design.svg);
            aspect-ratio: 300/56;
            height: 70px;
            @media screen and (max-width: 767px) {
                height: auto;
                width: 100%;
            }
        }
    }
    section#display {
        width: 100%;
        .h2-bg {
            background-image: url(../img/title-display.svg);
            aspect-ratio: 300/52;
            height: 70px;
            @media screen and (max-width: 767px) {
                height: auto;
                width: 100%;
            }
        }
    }
    section#event {
        width: 100%;
        margin-block-end: 0;
        .h2-bg {
            background-image: url(../img/title-event.svg);
            aspect-ratio: 300/60;
            height: 70px;
            @media screen and (max-width: 767px) {
                height: auto;
                width: 100%;
            }
        }
    }
}

body.policy {
    h1 {
        font-size: 3rem;
        margin-block-end: 3rem;
    }
    .policySection {
        margin-block-end: 2rem;
    }
}

body.thanks {
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

footer {
    .footerInner {
        max-width: 1000px;
        margin: 0 auto;
        padding: clamp(20px, 3.1vw, 60px);
        padding-bottom: 0;
    }
    nav ul li:after {
        content: "/";
        padding-inline: 1rem;
    }
    .footer-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-block-end: 6rem;
    }
    .logo-footer {
        width: 7rem;
    }
    .logo-sns {
        width: 3rem;
    }
    .copyright {
        font-size: small;
        text-align: center;
    }
    @media screen and (min-width:768px) {
        .footer-flex-start {
            display: flex;
            align-items: center;
            gap: 4rem;
            flex-grow: 1;
        }
    }
    @media screen and (max-width:767px) {
        .footer-flex {
            align-items: flex-end;
        }
    }
}


/*------------------------------------------------------------------------------------------------------
 typing
 ------------------------------------------------------------------------------------------------------*/

.typing {
    font-size: 16px;
    letter-spacing: 0.2em;
    word-break: break-all;
    visibility: hidden;
}


/*jsで生成されるspanタグ*/

.typing span {
    display: none;
}