/*--------------------  

component

--------------------*/
.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    position: relative;
    background-size: cover;
    width: 280px;
    height: 70px;
    transition: 0.3s;
    margin: auto;
}

:is(.cta-btn.Type-A,.cta-btn.Type-C) {
    background: url(../images/button.svg) no-repeat;
}

:is(.cta-btn.Type-B,.cta-btn.Type-D) {
    color: var(--white);
    background: url(../images/button_b.svg) no-repeat;
}

:is(.cta-btn.Type-A,.cta-btn.Type-C):hover {
    background: url(../images/button_b.svg) no-repeat;
    color: var(--white);
}

:is(.cta-btn.Type-B,.cta-btn.Type-D):hover {
    background: url(../images/button.svg) no-repeat;
    color: var(--black);
}

:is(.cta-btn.Type-A,.cta-btn.Type-B)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

:is(.cta-btn.Type-C,.cta-btn.Type-D)::after {
    content: "←";
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}

#frame_outer {
    padding-top: 115px;
    padding-bottom: 120px;
}

.section-title {
    font-size: var(--large-font-size);
    text-align: center;
    margin: 0 0 1em;
}

@media screen and (min-width: 769px) {
    .cta-btn {
        width: 300px;
        height: 75px;
    }
}

@media screen and (min-width: 1360px) {
    #frame_outer {
        padding-top: 174px;
        padding-bottom: 210px;
    }

}


/*--------------------  

header

--------------------*/
#l-header {
    position: fixed;
    z-index: 10;
    width: 100%;
    transition: all 0.3s ease-out;
    top: 0;
}

#l-header #header-nav {
    padding: 12px 13px 12px 21px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#l-header .site-logo {
    width: 160px;
    transition: 0.3s;
}

#l-header .site-logo:hover {
    opacity: var(--link-opacity);
}

#l-header .menu-btn {
    width: 37px;
    position: relative;
    cursor: pointer;
}

#l-header .menu-btn .menu-name {
    display: none;
}

#l-header .menu-btn .menu-star {
    display: none;
}

#lnr_global_navi {
    background: url(../images/menu_bg.svg) no-repeat;
    background-size: contain;
    width: 257px;
    height: 265px;
    color: var(--white);
    position: fixed;
    z-index: 11;
    top: -20px;
    right: -27px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

#lnr_global_navi.active {
    transform: translateX(0);
}

#lnr_global_navi .global_nav {
    height: 100%;
}

#lnr_global_navi .gnavi-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#lnr_global_navi .list-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

#lnr_global_navi .list-item {
    display: inline-block;
    padding: 0.2em 0;
    font-size: 2rem;
    width: fit-content;
    transition: 0.3s;
}

#lnr_global_navi :is(.list-item,.navi-close):hover {
    opacity: var(--link-opacity);
}

#lnr_global_navi .navi-close {
    position: absolute;
    top: 29px;
    right: 60px;
    font-size: 3.2rem;
    cursor: pointer;
    transition: 0.3s;
}

@media screen and (min-width: 769px) {
    #l-header #header-nav {
        padding: 16px 30px 16px 62px;
    }

    #l-header .site-logo {
        width: 200px;
        padding: 18px 0 0;
    }

    #l-header .menu-btn {
        width: 56px;
    }

    #l-header .menu-btn .menu-name {
        padding-top: 0.4em;
        display: block;
        font-size: 2.4rem;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    #l-header .menu-btn .menu-star {
        display: block;
        position: absolute;
        top: -10px;
        left: -33px;
        width: 32px;
        opacity: 0;
        visibility: hidden;
        transition: 0.12s;
    }

    #l-header .menu-btn:hover .menu-star {
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (min-width: 1025px) {
    #l-header #header-nav {
        padding: 16px 30px 16px 76px;
    }

    #lnr_global_navi {
        width: 366px;
        height: 378px;
        top: -15px;
        right: -32px;
    }

    #lnr_global_navi .list-item {
        font-size: 2.8rem;
    }

    #lnr_global_navi .list-menu {
        gap: 15px;
        margin-top: 25px;
    }

    #lnr_global_navi .navi-close {
        position: absolute;
        top: 37px;
        right: 85px;
        font-size: 4rem;
    }
}

/*--------------------  

footer

--------------------*/
#footer-section {
    overflow: hidden;
}

#footer-section .footer-inner {
    position: relative;
}

#footer-section .footer-link-wrap {
    background: url(../images/footer_menu_bg_sp.png) no-repeat;
    background-size: cover;
    width: 284px;
    height: 242px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#footer-section .footer-image img {
    width: 100%;
}

#footer-section .footer-logo {
    width: 130px;
    margin: 0 0 1.5em;
    transition: 0.3s;
}

#footer-section .footer-link {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 20px;
}

#footer-section .list-item {
    font-size: 2rem;
    padding: 0 0.2em;
    display: flex;
    transition: 0.3s;
    align-items: center;
    flex-direction: column;
    line-height: 1;
}

#footer-section .list-item .en {
    transform: rotate(90deg);
}

#footer-section :is(.footer-logo,.list-item):hover {
    opacity: var(--link-opacity);
}

#footer-section .page-top {
    font-size: 2rem;
    position: absolute;
    left: 20px;
    bottom: 0;
}

#footer-section .page-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    transform: translateY(64px);
}

#footer-section .page-link:hover {
    transform: translateY(50px);
}

#footer-section .page-link .board {
    width: 88px;
}

@media screen and (min-width: 769px) {
    #footer-section .footer-link-wrap {
        left: 3%;
        transform: none;
    }

    #footer-section .page-top {
        font-size: 2rem;
        left: auto;
        right: 20px;
    }
}

@media screen and (min-width: 1360px) {
    #footer-section .footer-link-wrap {
        background: url(../images/footer_menu_bg.png) no-repeat;
        background-size: cover;
        width: 362px;
        height: 407px;
    }

    #footer-section .footer-logo {
        width: 193px;
        margin: 0 0 2em;
    }

    #footer-section .footer-link {
        gap: 26px;
    }

    #footer-section .list-item {
        font-size: 2.8rem;
    }

    #footer-section .page-top {
        font-size: 2.8rem;
        right: 40px;
    }

    #footer-section .page-link {
        transform: translateY(102px);
    }

    #footer-section .page-link:hover {
        transform: translateY(72px);
    }

    #footer-section .page-link .board {
        width: 117px;
    }
}

@media screen and (min-width: 1680px) {
    #footer-section .footer-link-wrap {
        top: 5%;
        left: 7%;
    }
}


/*--------------------  

index

--------------------*/
#index #l-header .head-logo {
    opacity: 0;
}

#index .Main-Viewport-wrapper {
    width: calc(100% - 20px);
    height: 100vh;
    height: 100svh;
    position: relative;
    margin: 15px auto;
}

#index .Main-Viewport-wrapper #logo {
    background-color: rgba(235, 229, 212, 0.8);
    width: fit-content;
    padding: 2.7em 3.5em;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

#index .Main-Viewport-wrapper .top-logo {
    width: 173px;
    transform: translateX(-2px);
}

#index .Main-Viewport-wrapper .Main-image-inner {
    background-color: var(--beige);
    position: relative;
    border: solid 1px var(--black);
}

#index .Main-Viewport-wrapper :is(.Main-image,.Main-image figure) {
    height: calc(100vh - 30px);
    height: calc(100svh - 30px);
}

#index .Main-Viewport-wrapper .Main-image {
    opacity: 0;
    width: 100%;
    background-image: url('../images/top_main_image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 1.5s ease;
}

/* #index .Main-Viewport-wrapper .Main-image img {
    width: 100%;
    height: calc(100vh - 30px);
    height: calc(100svh - 30px);
    object-fit: cover;
    object-position: left center;
    opacity: 0.98;
    transform: translateX(0);
} */

#index .Intro {
    padding: 6em 0 0;
}

#index .Intro .--main {
    margin: 0 0 2em;
}

#index .Intro .content-image .--illusts {
    text-align: center;
    padding: 0 6%;
}

#index .Intro .content-image .--illusts.-tsuzura {
    width: 80%;
    margin: auto;
}

#index .Intro .slide-text {
    overflow: hidden;
    display: inline-block;
    transform: translateX(-100%);
}

#index .Intro .slide-inner {
    display: inline-block;
    transform: translateX(100%);
}

#index .Intro .--profile .--copy {
    max-width: 280px;
    margin: 0 auto 1em;
    position: relative;
}

#index .Intro .--profile .--copy .copy-box {
    font-size: 2.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    display: flex;
}

#index .Intro .content-box {
    position: relative;
    padding: 8em 12.5%;
}

#index .Intro .content-box .content-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

#index .Intro .content-box .content-bg :is(figure,img) {
    height: 100%;
}

#index .Intro .content-box .content-bg img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

#index .Intro .main-copy {
    font-size: var(--main-font-size);
    line-height: 1.3;
    margin: 0 auto 0.7em;
}

#index .Intro .name {
    font-size: var(--medium-font-size);
    margin: 0 auto 0.7em;
}

#index .Intro .content-txt {
    line-height: 1.8;
}

#index .Intro .--profile .content-txt {
    font-size: 95%;
}

#index .Works {
    position: relative;
    padding: 17em 0 0;
    margin: 0 0 9em;
}

#index .Works .open-motion-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}

#index .Works .open-inner {
    position: relative;
    display: flex;
    align-items: center;
}

#index .Works .open-illusts {
    top: 0;
    transition: transform 0.3s ease;
    flex-grow: 1;
}

#index .Works .open-illusts img {
    width: 100%;
    height: 85vh;
    object-fit: cover;
}

#index .Works .screen-l {
    left: 0;
}

#index .Works .screen-l img {
    object-position: right center;
}

#index .Works .screen-r {
    right: 0;
}

#index .Works .screen-r img {
    object-position: left center;
}

#index .Works .content-inner {
    padding: 0 6%;
    max-width: calc(1680px + 12%);
    margin: auto;
}

#index .Works .works-content-inner {
    opacity: 0;
    position: relative;
    z-index: 0;
}

#index .Works .works-list {
    display: flex;
    flex-direction: column;
    gap: 3.5em;
    margin: 0 0 4.5em;
}

#index .Works .works-list .content-image {
    margin: 0 0 1em;
}

#index .Works .content-image img {
    transition: transform .5s ease .1s;
    filter: contrast(0.75);
}

#index .Works .works-list a:hover .content-image img {
    transform: scale(1.05);
    filter: contrast(1);
}

#index .Works .works-list .content-txt {
    font-weight: 500;
    padding: 0 1.7em;
}

#index .Service {
    position: relative;
    margin: 0 0 6em;
}

#index .Service .content-row {
    margin: 0 0 4em;
}

#index .Service .content-image {
    padding: 0 6%;
}

#index .Service .content-box {
    padding: 8em 12.5%;
    background: url(../images/intro_bg.png) no-repeat center center;
    background-size: cover;
}

#index .Service .-ttl {
    font-size: var(--medium-font-size);
    margin: 0 0 0.7em;
}

#index .Service .content-txt {
    line-height: 1.8;
}

#index .Summary {
    margin: 0 0 5em;
}

#index .Summary .summary-list-wrap {
    padding: 0 6%;
    margin: 0 0 -1em;
}

#index .Summary .summary-list {
    display: flex;
    flex-direction: column;
}

#index .Summary .summary-list li {
    position: relative;
    width: 52%;
}

#index .Summary .summary-list li:is(:nth-child(1),:nth-child(3)) {
    margin-left: auto;
}

#index .Summary .summary-list li:nth-child(1) {
    transform: translate(-5%, 6%);
}

#index .Summary .summary-list li:nth-child(3) {
    transform: translate(0, -14%);
}

#index .Summary .--txts-points {
    font-size: var(--small-font-size);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    white-space: nowrap;
    line-height: 1.3;
}

#index .Summary .content-inner {
    position: relative;
}

#index .Summary .--illusts-mountain img {
    width: 100%;
    height: 612px;
    object-fit: cover;
    object-position: center;
}

#index .Summary .--txts-summary {
    font-size: var(--small-font-size);
    position: absolute;
    bottom: 14.5%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%,0);
}

#index .Interview {
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 4em 0 0;
}

#index .Interview .section-title {
    margin: 0 0 2em;
}

#index .Interview .interview-content-inner {
    width: 100%;
    height: 100vh;
    position: relative;
}

#index .Interview .interview-unit-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 105px;
}

#index .Interview .scroll-bg {
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 1;
    width: 1600px;
}

#index .Interview .scroll-bg img {
    object-fit: contain;
    transform: scaleY(1.15);
}

#index .Interview .interview-scroll-wrap {
    position: relative;
    z-index: 2;
    top: 90px;
    left: 115px;
}

#index .Interview .interview-list {
    display: flex;
    gap: 100px;
}

#index .Interview .interview-item {
    width: 240px;
    padding: 1em 0;
    position: relative;
    flex: 0 0 auto;
}

#index .Interview .interview-item .content-image {
    margin: 0 0 1em;
    padding: 0 1em;
}

#index .Interview .interview-item .content-txt {
    font-size: 95%;
    width: fit-content;
    margin: auto;
}

#index .Interview .interview-item .name-box {
    position: absolute;
    background: url(../images/voice_name.svg) no-repeat;
    background-size: cover;
    width: 45px;
    height: 76.92px;
    top: 0;
    right: -24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#index .Interview .interview-item .name {
    font-size: 2.4rem;
    line-height: 1.2;
}

#index .Run-to {
    padding: 6em 0 0;
    margin: 0 0 12em;
}

#index .Run-to .Run-illusts {
    position: relative;
    margin: 0 auto 1em;
}

#index .Run-to .Run-illusts .--illusts-house {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
} 

#index .Run-to .Run-illusts .--illusts-man {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: 26.66%;
} 

#index .Run-to .Run-illusts .--illusts-road img {
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    height: 100%;
}

#index .Run-skills {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

#index .marquee {
    display: flex;
    width: max-content;
}

#index .Run-to .skill-list {
    font-size: 2.8rem;
    opacity: 0.6;
    white-space: nowrap;
}

#index .Goal .content-inner {
    position: relative;
}

#index .Goal .goal-base-image {
    position: relative;
}

#index .Goal .goal-base-image .-base-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    z-index: -1;
}

#index .Goal .goal-base-image .-base-bg figure {
    height: 100%;
}

#index .Goal .goal-base-image .-base-bg img {
    transform: scale(0.85);
    filter: blur(0);
    transition: transform 0.3s ease-out;
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
}

#index .Goal .goal-base-image .-base-frame {
    padding: 2%;
}

#index .Goal .goal-illusts {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 110%;
    transform: translateX(-50%);
}

#index .End-contact {
    background: url(../images/end-contact.jpg) no-repeat center bottom;
    background-size: cover;
    padding: 8em 0 0;
    position: relative;
}

#index .End-contact::after {
    content: "";
    background-color: #163146;
    width: 100%;
    height: 20px;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -10px;
    z-index: -1;
}

#index .End-contact .content-inner {
    padding: 0 2%;
}

#index .contact-box {
    color: var(--white);
    font-size: var(--large-font-size);
    margin: 0 auto 3.5em;
    max-width: 1070px;
}

#index .contact-box a {
    position: relative;
    display: block;
    transition: 0.3s;
}

#index .contact-box a:hover {
    transform: scale(1.07);
}

#index .contact-box a img {
    transform: scaleY(1.19);
    display: block;
    margin: auto;
}

#index .contact-box span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

#index .contact-box span.txt::after {
    content: "→";
}

#index .cloud-box {
    position: relative;
    height: 60vh;
}

#index .cloud-box .cloud-image {
    position: absolute;
}

#index .cloud-box .cloud-r {
    top: 0;
    right: 0;
}

#index .cloud-box .cloud-r img {
    min-width: 388px;
    transform: translateX(42px);
}

#index .cloud-box .cloud-l {
    top: 35%;
    left: 0;
}

#index .cloud-box .cloud-l img {
    min-width: 444px;
    transform: translateX(-155px);
}

@media screen and (min-width: 600px) {

    #index .Intro .content-box {
        padding: 12em 16.5%;
    }

    #index .Works .works-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 3.5em;
        column-gap: 1.5em;
    }

    #index .Works .works-list .work-item {
        width: calc(100% / 2.2);
    }

    #index .Service .content-box {
        padding: 16em 14.5%;
        background-size: contain;
    }

    #index .Service .content-image .--illusts {
        width: 80%;
        margin: auto;
    }

    #index .Summary .summary-list-wrap {
        padding: 0 3%;
        margin: 0;
    }

    #index .Summary .summary-list {
        flex-direction: row;
        justify-content: center;
        gap: 1.5em;
    }

    #index .Summary .summary-list li {
        width: 32%;
        max-width: 400px;
    }

    #index .Summary .summary-list li:is(:nth-child(1),:nth-child(3)) {
        margin-left: 0;
        transform: none;
    }

    #index .contact-box a img {
        transform: none;
    }

    #index .cloud-box {
        height: 90vh;
    }
}

@media screen and (min-width: 769px) {
    #index .Main-Viewport-wrapper .top-logo {
        width: 240px;
    }

    #index .Main-Viewport-wrapper #logo {
        padding: 3em 4em;
    }

    #index .Intro .content-image .--illusts {
        padding: 0;
    }
    
    #index .Summary .--illusts-mountain img {
        height: 100%;
    }

    #index .Summary .--txts-summary {
        bottom: 18.5%;
    }

    #index .Summary .--txts-summary br {
        display: none;
    }

    #index .Interview .scroll-bg {
        width: 1800px;
    }

    #index .Interview .scroll-bg img {
        transform: scaleY(1.35);
    }

    #index .Interview .interview-scroll-wrap {
        top: 95px;
        left: 135px;
    }

    #index .Interview .interview-item {
        width: 280px;
    }

    #index .Interview .interview-item .name {
        font-size: 2.8rem;
    }

    #index .Run-to {
        padding: 1em 0 0;
    }

    #index .Run-to .Run-illusts .--illusts-man {
        right: 17%;
        bottom: -1.5%;
        width: 11.71%;
    }

    #index .Goal .goal-illusts {
        width: 70%;
        bottom: 3%;
    }
}

@media screen and (min-width: 980px) {
    #index .Intro .main-copy {
        margin: 0 1em 0.7em;
    }

    #index .Intro .content-box .content-bg {
        width: 105%;
    }

    #index .Intro .content-box .content-bg img {
        object-fit: fill;
    }

    #index .Intro .content-row.--profile .content-image {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        padding: 0 2%;
    }

    #index .Intro .content-image .--illusts.-tsuzura {
        width: auto;
        margin: 0;
    }

    #index .Intro .--profile .--copy {
        max-width: 248px;
        flex-grow: 1;
        margin: 0;
    }

    #index .Intro .--profile .--copy .slide-text {
        transform: translateY(-100%);
        height: 100%;
        width: 100%;
    }

    #index .Intro .--profile .--copy .slide-inner {
        transform: translateY(100%);
        height: 100%;
        width: 100%;
    }

    #index .Intro .--profile .--copy .copy-box {
        writing-mode: vertical-rl;
        font-size: clamp(2.8rem, 1.966rem + 1.36vw, 3.6rem);
        align-items: flex-start;
        line-height: 1.4;
    }

    #index .Intro .--profile .--copy .en {
        transform: rotate(-90deg);
        margin-bottom: 0.2em;
    }

    #index .Intro .--profile .--copy .en:nth-child(4) {
        transform: rotate(-90deg) translateX(8px);
    }
}

@media screen and (min-width: 1025px) {
    #index .Main-Viewport-wrapper {
        margin: 30px auto;
        width: calc(100% - 60px);
    }

    #index .Main-Viewport-wrapper :is(.Main-image,.Main-image figure) {
        height: calc(100vh - 60px);
        height: calc(100svh - 60px);
    }

    #index .Main-Viewport-wrapper .Main-image img {
        height: calc(100vh - 60px);
        height: calc(100svh - 60px);
    }

    #index .Works {
        padding: 22em 0 0;
        margin: 0 0 12em;
    }

    #index .Works .open-illusts img {
        height: auto;
    }
    
    #index .Works .works-content-inner {
        padding: 1em 0 0;
    }

    #index .Works .works-list {
        row-gap: 5em;
    }

    #index .Works .works-list .work-item {
        width: calc(100% / 3.2);
    }

    #index .Works .works-list .content-txt {
        font-size: 1.8rem;
        padding: 0 1.9em;
    }

    #index .Summary .summary-list {
        gap: 5em;
    }

    #index .Run-to {
        padding: 20em 0 0;
        margin: 0 0 18em;
    }


    #index .Run-to .skill-list {
        font-size: 4.8rem;
    }

    #index .cloud-box {
        height: 120vh;
    }

    #index .cloud-box .cloud-l {
        top: 15%;
    }
}

@media screen and (min-width: 1359px) {
    #index .Intro {
        margin: 0 0 2em;
    }

    #index .Intro .--main {
        margin: 0;
    }

    #index .Intro .content-row {
        display: flex;
        align-items: center;
    }

    #index .Intro .content-row.--profile {
        flex-direction: row-reverse;
    }

    #index .Intro .content-row.--main .content-image {
        width: 37.58%;
        padding: 0 2em;
    }

    #index .Intro .content-row.--main .content-box {
        width: 62.42%;
        padding: 12.5% 8.5% 12.5% 13.5%;
    }

    #index .Intro .content-row.--main .content-bg {
        width: 120%;
        height: 120%;
        left: 56%;
    }

    #index .Intro .content-row.--profile .content-image {
        width: 43.58%;
        padding: 0 1.4%;
        gap: 0.8em;
    }

    #index .Intro .content-row.--profile .content-box {
        width: 56.42%;
        padding: 12.5% 13.5% 12.5% 8.5%;
    }

    #index .Intro .content-row.--profile .content-bg {
        width: 120%;
        height: 125%;
        left: 40%;
    }

    #index .Intro .content-box .content-bg img {
        object-fit: contain;
    }

    #index .Intro .--profile .-tsuzura {
        width: 70%;
    }

    #index .Intro .--profile .--copy {
        min-width: 230px;
        width: 30%;
        margin-top: 0.5em;
    }

    #index .Intro .content-txt {
        line-height: 2;
    }

    #index .Summary {
        margin: 0 0 8em;
    }

    #index .Service .content-container {
        position: relative;
        margin: 0 0 calc(100vh + 10em);
    }

    #index .Service .content-row {
        position: relative;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    #index .Service .content-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100vh;
        gap: 3em;
    }

    #index .Service .content-image {
        padding: 0 2%;
        width: 38%;
        max-width: 820px;
        margin: auto;
    }

    #index .Service .content-image .--illusts {
        width: 100%;
    }

    #index .Service .content-box {
        width: 62%;
        padding: 20em 14.5%;
    }
   

    #index .Interview {
        padding: 1em 0 0;
    }

    #index .Interview .section-title {
        margin: 0 0 1em;
    }

    #index .Interview .scroll-bg {
        left: 340px;
        width: 2200px;
    }

    #index .Interview .scroll-bg img {
        transform: scaleY(1.2);
    }

    #index .Interview .interview-scroll-wrap {
        left: 530px;
        top: 135px;
    }

    #index .Interview .interview-list {
        gap: 150px;
    }

    #index .Interview .interview-item {
        width: 300px;
    }

    #index .Interview .interview-item .name-box {
        width: 72px;
        height: 123px;
        right: -54px;
    }

    #index .Interview .interview-item .name {
        font-size: 3.6rem;
    }

    #index .Goal .goal-base-image .-base-frame {
        padding: 3%;
    }
}

@media screen and (min-width: 1920px) {
    #index .Works .open-illusts img {
        height: 140vh;
        object-fit: fill;
    }
}

/*--------------------  

contact

--------------------*/
#contact .column-inner {
    padding: 0 6%;
    max-width: calc(640px + 12%);
    margin: auto;
}

#contact .form-container .required {
    color: var(--red);
}

#contact .form-container .note {
    margin: 0 0 5em;
}

#contact .form-container .errors {
    color: var(--red);
    margin: 0 0 2em;
}

#contact .form-container dt {
    font-weight: 500;
}

#contact .form-unit-row input {
    width: 100%;
    height: 100%;
    padding: 0.2em 0;
}

#contact .form-unit-row {
    margin: 0 0 2.5em;
    padding: 0 0 0.5em;
    position: relative;
}

#contact .form-unit-row::after {
    content: "";
    background: url(../images/line.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 5px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
}

#contact .form-unit-row.Content::after {
    content: none;
}

#contact .form-unit-row.Content dt {
    margin: 0 0 1.2em;
}

#contact .form-unit-row.Content dd {
    position: relative;
}

#contact .form-unit-row.Content .form-image img {
    width: 100%;
}

#contact .form-unit-row textarea {
    width: 100%;
    height: 100%;
    padding: 0.7em;
    position: absolute;
    top: 0;
    left: 0;
}

#contact .form-container .agreement {
    margin: 0 auto 4em;
    width: fit-content;
}

#contact .form-container .agreement span {
    border-bottom: solid 1px;
    transition: 0.3s;
    cursor: pointer;
}

#contact .form-container .agreement span:hover {
    opacity: var(--link-opacity);
}

#contact .form-container .agreement br {
    display: none;
}

#contact .form-container .submit-btn {
    margin: 0 auto 2em;
}

#contact .form-container .submit-btn input {
    width: 100%;
    height: 100%;
    text-align: center;
}

#contact .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(62, 60, 57, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: 0.1s ease;
    z-index: 999;
}

#contact .privacy-policy-wrap {
    background: url(../images/policy_bg.svg) no-repeat center center;
    background-size: cover;
    line-height: 1.7;
    padding: 5em 7.5% 4em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 1000;
    max-height: 480px;
    max-width: 980px;
}

#contact .modal-overlay.active,
#contact .privacy-policy-wrap.active {
    opacity: 1;
    visibility: visible;
}

#contact .privacy-policy-wrap.active {
    transform: translate(-50%, -50%);
}

#contact .privacy-policy-wrap .policy-inner {
    overflow-y: auto;
    max-height: calc(480px - 9em);
}

#contact .privacy-policy-wrap .policy-title {
    font-size: 2.8rem;
    text-align: center;
    margin: 0 0 1em;
}

#contact .privacy-policy-wrap p {
    margin: 0 0 2em;
}

#contact .privacy-policy-wrap .policy-purpose {
    margin: 0 0 2em;
}

#contact .privacy-policy-wrap .policy-purpose h3 {
    font-weight: bold;
    margin: 0 0 0.4em;
}

#contact .close-modal {
    position: absolute;
    top: -14px;
    right: 10px;
    color: var(--white);
    font-size: 3.2rem;
    cursor: pointer;
    transition: 0.3s;
}

#contact.confirm .note {
    margin: 0 0 5em;
}

@media screen and (min-width: 600px) {
    #contact .privacy-policy-wrap {
        max-height: 900px;
    }

    #contact .privacy-policy-wrap .policy-inner {
        max-height: calc(900px - 9em);
        padding: 0 16.5%;
    }

    #contact .close-modal {
        font-size: 6.4rem;
        top: 0;
        right: 10px;
    }
}


@media screen and (min-width: 769px) {
    #contact .privacy-policy-wrap {
        padding: 7em 5.5% 6em;
        background-size: contain;
    }

    #contact .form-container .agreement br {
        display: block;
    }

    #contact .privacy-policy-wrap .policy-title {
        font-size: 4rem;
    }

    #contact .privacy-policy-wrap .policy-content-box {
        font-size: 1.8rem;
    }

    #contact .form-unit-row::after {
        height: 6px;
    }
    
}

/*--------------------  

works

--------------------*/
#works .column-inner {
    padding: 0 6%;
    max-width: calc(1280px + 12%);
    margin: auto;
}

#works .works-content-inner {
    padding: 2em 0 0;
}

#works .works-list {
    display: flex;
    flex-direction: column;
    gap: 3.5em;
    margin: 0 0 6.5em;
}

#works .works-list .content-image {
    margin: 0 0 1em;
}

#works .works-list .content-image img {
    transition: transform .5s ease .1s;
    filter: contrast(0.75);
}

#works .works-list .content-txt {
    font-weight: 500;
    padding: 0 1.7em;
}

#works .works-list a:hover .content-image img {
    transform: scale(1.05);
    filter: contrast(1);
}

@media screen and (min-width: 600px) {
    #works .works-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 3.5em;
        column-gap: 1.5em;
    }

    #works .works-list::after {
        content: "";
        display: block;
        width: calc(100% / 2.2);
    }

    #works .works-list .work-item {
        width: calc(100% / 2.2);
    }
}

@media screen and (min-width: 1025px) {
     #works .works-list {
        row-gap: 5em;
    }

    #works .works-list .work-item {
        width: calc(100% / 3.2);
    }

    #works .works-list .content-txt {
        font-size: 1.8rem;
        padding: 0 1.9em;
    }

    #works .works-list::after {
        content: "";
        display: block;
        width: calc(100% / 3.2);
    }
}

/*--------------------  

detail

--------------------*/
#detail :is(.main-content-box,.detail-content-inner) {
    padding: 0 6%;
    max-width: calc(980px + 12%);
    margin: auto;
}

#detail .main-content-image {
    text-align: center;
    margin: 0 auto 3em;
    padding: 0 2%;
}

#detail .main-content-image img {
    transform: translateX(-1%);
}

#detail .main-content-box {
    margin: 0 auto 4em;
}

#detail :is(.main-content-box,.sub-content-txt) p {
    line-height: 2.1;
}

#detail .--more-content-txt dt {
    margin: 0 0 0.6em;
}

#detail .--more-content-txt .--content-summary {
    font-weight: 500;
}

#detail #more-b {
	display: none;
}

#detail .more-btn {
	display: block;
	position: relative;
	margin: 1.5em auto 0;
	padding: 0.6em;
	border: 1px solid var(--black);
	text-align: center;
	cursor: pointer;
    transition: 0.3s;
    width: 85%;
}

#detail .more-btn:hover {
    background-color: var(--beige);
}

#more-b ~ .more-btn::before {
    content: "続きを読む";
}

#more-b:checked ~ .more-btn::before {
    content: "閉じる";
}

#more-b:checked ~ .more-btn::after {
    display: none;
}

#detail .more-content-wrap {
	display: none;
}

#more-b:checked ~ .more-content-wrap {
	display: block;
}

#detail .--more-content-txt .--more-content-list {
    margin: 0 0 1.5em;
    position: relative;
    padding-left: 1.5em;
}

#detail .--more-content-txt .--more-content-list::before {
    content: "・";
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}

#detail .main-content-title {
    font-weight: 500;
    font-size: 2.4rem;
    margin: 0 0 1.5em;
}

#detail .sub-image {
    margin: 0 0 3em;
}

#detail .sub-content-image img {
    width: 100%;
}

#detail .sub-content-image .--secondary {
    padding: 0 6%;
}

#detail .sub-content-image .--secondary .image-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 2.5em;
    column-gap: 1.5em;
}

#detail .sub-content-image .--secondary .image-list li {
    width: 46%;
}

#detail .sub-content-txt {
    margin: 0 0 4em;
}


#detail .detail-form-content {
    margin: 0 0 6.5em;
}

#detail .detail-form-content table {
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}

#detail .detail-form-content tr {
    border-bottom: solid 1px;
}

#detail .detail-form-content th {
    display: block;
    width: 100%;
    padding: 1.2em 0 0.4em;
}

#detail .detail-form-content td {
    padding: 0 0 1.2em;
    display: block;
    width: 100%;
    font-weight: 500;
}

#detail .detail-form-content .works-url {
    transition: 0.3s;
}

#detail .detail-form-content .works-url:hover {
    opacity: var(--link-opacity);
}

#detail .detail-form-content .icon {
    width: 22px;
    margin-left: 0.5em;
}

#detail .other-works-content {
    margin: 0 0 5.5em;
}

#detail .other-works-ttl {
    font-size: var(--small-font-size);
    text-align: center;
    margin: 0 0 1.5em;
}

#detail .other-works-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3.5em;
}

#detail .other-works-list .content-image {
    margin: 0 0 1em;
}

#detail .other-works-list .content-txt {
    font-weight: 500;
    padding: 0 1.7em;
    display: flex;
    align-items: center;
    gap: 1em;
}

@media screen and (min-width: 600px) {
    #detail .other-works-list {
        flex-direction: row-reverse;
    }

    #detail .other-works-list .work-item {
        width: calc(100% / 2);
        max-width: 450px;
    }

    #detail .other-works-list .content-image img {
        transition: transform .5s ease .1s;
        filter: contrast(0.75);
    }

    #detail .other-works-list  a:hover .content-image img {
        transform: scale(1.05);
        filter: contrast(1);
    }

    #detail .other-works-list .work-item:nth-child(1) .content-txt {
        justify-content: flex-end;
    }

    #detail .other-works-list .content-txt {
        padding: 0 ;
    }
}

@media screen and (min-width: 769px) {
    #detail .main-content-title {
        font-size: 3.2rem;
        margin: 0 0 1em;
    }

    #detail .sub-image {
        margin: 0 0 5em;
    }

    #detail .sub-content-image .--primary .image-list {
        display: flex;
    }

    #detail .sub-content-image .--primary .image-list li {
        width: calc(100% / 2);
    }

    #detail .sub-content-image .--secondary .image-list {
        flex-wrap: nowrap;
        column-gap: 40px;
    }
    
    #detail .detail-form-content {
        font-size: 1.8rem;
    }

    #detail .detail-form-content th {
        display: table-cell;
        vertical-align: middle;
        width: 250px;
        padding: 1.5em 0;
    }

    #detail .detail-form-content td {
        padding: 1.5em 0;
        display: table-cell;
        vertical-align: middle;
        width: auto;
    }
}

@media screen and (min-width: 1025px) {
    #detail .main-content-image {
        margin: 0 auto 4em;
    }

    #detail .main-content-box {
        margin: 0 auto 6em;
    }

    #detail .sub-image {
        margin: 0 0 6em;
    }

    #detail .sub-content-image .--secondary .image-list {
        column-gap: 65px;
        justify-content: center;
        max-width: 1800px;
        margin: auto;
    }
}