:root {
    font-size: 18px;
}

button {
    cursor: pointer;
}

.from-pc {
    display: block;
}

.non-from-pc {
    display: none;
}

.row-pc {
    display: flex;
}

.flex-tb {
    padding-right: 90px;

    &:not(:has(#blog-content)) {
        >div {
            &:nth-of-type(1) {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 100px 88px;
            }

            &:nth-of-type(2) {
                height: 1450px;
            }
        }
    }

    &:has(#blog-content) {
        >div {
            &:nth-of-type(1) {
                flex: 1;
                margin-right: 50px;
            }
        }
    }
}

.mandarin-btn {
    transition-property: color, background-image, corner-shape, --threshold;
    transition-duration: .5s;

    &::after {
        transition-property: background-color;
        transition-duration: .5s;
    }

    &:hover {
        color: white;
        background-image: linear-gradient(var(--iroha-orange));
        corner-shape: squircle;

        &::after {
            background-color: white;
        }
    }

    &[download] {
        &:active {
            color: var(--iroha-orange);
            background-color: white;
            transition-duration: 0s;

            &::after {
                background-color: var(--iroha-orange);
            }
        }
    }
}

h1 {
    a {
        display: flex;
        gap: 15px;

        &::after {
            content: "";
            display: block;
            aspect-ratio: 1;
            height: 100%;
            background-image: url("../assets/imgs/葉っぱ.svg");
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            scale: -1 1;
            opacity: .5;
            transition-property: opacity;
            transition-duration: .5s;
        }

        &:hover {
            &::after {
                opacity: 1;
            }
        }
    }
}

#topize-btn {
    transition-property: background-color;
    transition-duration: .5s;

    &:hover {
        background-color: var(--iroha-deep-green);
    }

    &:active {
        background-color: var(--iroha-orange);
        transition-duration: 0s;
    }
}

#header-trail {
    padding-top: 100px;
}

header {
    position: fixed;
    width: 100%;
}

#ham-btn {
    overflow-y: clip;
    
    &:not(.open) {
        &:hover {
            &::before {
                animation-name: rotateAnim2;
                animation-duration: 12s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                border-color: white;
            }

            &::after {
                opacity: 1;
            }

            span {
                &:not(.leaf) {
                    &:nth-of-type(1),
                    &:nth-of-type(2),
                    &:nth-of-type(3) {
                        transition-property: opacity;
                        transition-duration: .5s;
                        transition-delay: 0s;
                        opacity: 0;
                    }
                }

                &.leaf {
                    animation-name: rotateAnim;
                    animation-duration: 12s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;

                    &:nth-last-of-type(4) {
                        border-radius: 50% 50% 0;
                        transform-origin: calc(100% - 1px) calc(100% - 1px);
                    }

                    &:nth-last-of-type(3) {
                        border-radius: 50% 50% 50% 0;
                        transform-origin: 1px calc(100% - 1px);
                    }

                    &:nth-last-of-type(2) {
                        border-radius: 50% 0 50% 50%;
                        transform-origin: calc(100% - 1px) 1px;
                    }

                    &:nth-last-of-type(1) {
                        border-radius: 0 50% 50% 50%;
                        transform-origin: 1px 1px;
                    }
                }
            }
        }
    }

    &.open {
        &::after {
            background-color: var(--iroha-red);
        }
    }

    &::before {
        content: "";
        position: absolute;
        inset: 10%;
        display: block;
        rotate: -45deg;
        border: 2px solid transparent;
        border-radius: 50%;
        corner-shape: superellipse(-1.2);
        transition-property: border-color;
        transition-duration: .5s;
    }

    &::after {
        content: "";
        position: absolute;
        left: 25%;
        bottom: 0;
        z-index: -1;
        width: 75%;
        height: 50%;
        background-color: var(--iroha-pale-green);
        transition-property: opacity, background-color;
        transition-duration: .5s;
        opacity: 0;
        clip-path: shape(
            from 0 0,
            arc to 100% 100% of 100% 100% cw,
            hline to 90%,
            arc to 0 0 of 100% 100%,
            close
        );
    }

    span {
        &.leaf {
            transition-property: background-color, border-radius;

            &:nth-last-of-type(4),
            &:nth-last-of-type(1) {
                corner-top-right-shape: superellipse(.6);
                corner-bottom-left-shape: superellipse(.6);
            }

            &:nth-last-of-type(3),
            &:nth-last-of-type(2) {
                corner-top-left-shape: superellipse(.6);
                corner-bottom-right-shape: superellipse(.6);
            }
        }
    }
}

#ham-menu {
    nav {
        ul {
            width: 773px;

            a {
                border-bottom: 2px transparent dotted;
                transition-property: border-bottom-color;
                transition-duration: .5s;

                &:hover {
                    border-bottom-color: var(--iroha-orange);
                }

                &:has(span) {
                    transition-property: color;
                    transition-duration: .5s;

                    &:hover {
                        color: var(--iroha-orange);
                    }
                }

                &:active {
                    color: var(--iroha-orange);
                    transition-duration: 0s;
                }
            }
        }
    }
}

footer {
    >div {
        display: flex;
        align-items: flex-end;
        width: 918px;
        gap: 40px;
        margin-bottom: 66px;
    }

    iframe {
        order: -1;
        width: 329px;
        height: 238px;
        margin: 0;
    }

    .logo {
        top: 20px;
    }

    nav {
        ul {
            width: 1040px;
            padding-right: 0;

            li {
                width: 130px;

                &:first-of-type {
                    &::before {
                        content: none;
                    }
                }
            }

            a,
            span {
                width: fit-content;
                padding: 0;
                margin: 0 auto;
            }

            a {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    bottom: -5px;
                    display: block;
                    width: 0;
                    height: 2px;
                    background-color: var(--iroha-orange);
                    translate: -50%;
                    transition-property: width;
                    transition-duration: .5s;
                }

                &:hover {
                    &::after {
                        width: 100%;
                    }
                }

                &:active {
                    color: var(--iroha-orange);
                    transition-duration: 0s;
                }
            }
        }
    }
}

#about-eye-catch,
#flow-eye-catch,
#qanda-eye-catch,
#staff-eye-catch,
#blog-eye-catch,
#recruit-eye-catch,
#contact-eye-catch,
#anxiety-eye-catch,
#developmental-eye-catch,
#bipolar-eye-catch {
    width: 1100px;
    height: 400px;

    h2 {
        font-size: 64px;
        width: 368px;
        height: 143px;
    }
}

#blog-eye-catch {
    margin-bottom: 181px;
}

#recruit-eye-catch {
    +strong {
        gap: 30px;
        font-size: 32px;
        width: 552px;
        height: 147px;
        margin-top: 142px;
        margin-bottom: 85px;

        &::before,
        &::after {
            width: 68px;
            height: 81px;
        }
    }
}

#hero-img {
    .line {
        width: 856px;
        height: 366px;

        &:first-of-type {
            translate: calc(-50% - 50px);
        }
    }

    p {
        left: 200px;
    }

    .leaf {
        &:nth-last-of-type(5) {
            width: 85px;
        }

        &:nth-last-of-type(4) {
            width: 55px;
        }

        &:nth-last-of-type(3) {
            width: 80px;
        }

        &:nth-last-of-type(2) {
            width: 70px;
        }

        &:nth-last-of-type(1) {
            width: 60px;
        }
    }
}

#about {
    >p {
        width: 879px;
        margin: 0 auto;
    }

    .img-container {

        &:first-of-type,
        &:last-of-type {
            width: 400px;
            height: 300px;
        }
    }

    article {
        width: 1000px;

        p {
            font-size: 20px;
        }
    }
}

#worries {
    .smoke-container {
        width: 850px;

        p {
            &:nth-of-type(4) {
                left: 100px;
            }

            &:nth-of-type(5) {
                left: unset;
            }
        }
    }
}

#feature {
    article {
        width: 730px;

        h3 {
            font-size: 28px;
        }

        p {
            font-size: 18px;
        }
    }
}

#blog {
    width: 1100px;
    border-radius: 200px;

    >div {
        display: flex;
        justify-content: center;
        gap: 53px;

        a {
            &:hover {
                .thumb {
                    &::after {
                        border-color: var(--iroha-orange);
                    }
                }
            }

            .thumb {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    display: block;
                    box-sizing: content-box;
                    border: 7px solid transparent;
                    border-radius: 4px;
                    transition-property: border-color;
                    transition-duration: .5s;
                }
            }
        }
    }

    article {
        display: block;
        width: 237px;
        margin: 0;

        &:not(:last-of-type) {
            border-bottom: none;
        }
    }
}

#greeting {
    font-size: 20px;
    max-width: 1259px;
    padding-top: 130px;
    margin: 0 auto;

    strong {
        font-size: 24px;
        width: 707px;
        height: 138px;
        padding: 0 65px;
    }

    >div {
        gap: 81px;
        padding: 0 90px;

        p {
            margin-left: 0;
        }

        .img-container {
            width: 540px;
            height: 360px;
        }
    }

    >p {
        margin-right: 90px;
    }
}

#info-corpo,
#info-office {
    font-size: 18px;
    width: 968px;
    position: relative;

    dl {
        width: 742px;

        dt {
            width: 262px;
            padding-left: 23px;

            span {
                display: inline;
                letter-spacing: 0;
            }
        }
    }

    address {
        span {
            display: inline-block;
            padding-right: 1em;
        }
    }

    small {
        position: absolute;
        right: 112px;
    }

    >div {
        justify-content: flex-start;
        gap: 119px;
        width: 742px;
        padding-left: 23px;
        margin: 0 auto;

        a {
            font-size: 18px;

            &::before {
                margin-right: 15px;
            }

            &:hover {
                text-decoration: none;
            }
        }
    }
}

#info-corpo {
    dl {
        &:last-of-type {
            border-bottom: none;
        }
    }

    small {
        bottom: 155px;
    }
}

#info-office {
    small {
        top: 450px;
    }
}

#coop {
    >div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 55px 47px;
        width: 919px;
        margin: 0 auto;
    }

    a:hover {
        article {
            box-shadow: 0 0 3px 0.75px var(--iroha-orange);

            .thumb {
                border-radius: 50%;

                img {
                    scale: 1.2;
                }
            }

            .icon {
                scale: 1.5;
            }
        }
    }

    article {
        width: 433px;
        height: 436px;
        transition-property: box-shadow;
        transition-duration: .5s;

        .thumb {
            width: 298px;
            height: 243px;
            corner-shape: squircle;
            overflow: clip;
            transition-property: border-radius, clip-path;
            transition-duration: .5s;

            img {
                transition-property: scale;
                transition-duration: .5s;
            }
        }

        h4 {
            font-size: 24px;
        }

        h4,
        address {
            width: 264px;
        }

        address {
            font-size: 18px;
        }

        .icon {
            width: 40px;
            transition-property: scale;
            transition-duration: .5s;
        }
    }
}

.to-contact {
    p {
        font-size: 24px;
    }

    .img-container {
        position: relative;
        bottom: 60px;
        width: 574px;
        height: 144px;
        pointer-events: none;
    }
}

#flow {
    width: 1100px;
    margin-top: 122px;
    border-radius: 200px;

    article {
        width: 741px;
        animation-name: scalexAnim;
    }

    p {
        span {
            font-size: 28px;
        }
    }
}

#location {
    .img-conatiner {
        width: 800px;
        height: 327px;
    }
}

#target {
    padding-bottom: 350px;

    div {
        width: 825px;
        margin-top: 133px;

        a {
            font-size: 20px;
            width: 188px;
            height: 168px;
            transition-property: box-shadow, opacity;
            transition-duration: .5s;

            &::after {
                position: relative;
                transition-property: translate;
                transition-duration: .5s;
            }

            &:last-of-type {
                width: 551px;
                height: 121px;
            }

            &:hover {
                box-shadow: -4px 4px 2px 2px #00000040;

                &::after {
                    translate: 5px;
                }
            }
        }
    }

    img {
        bottom: -251px;
        width: 1100px;
        height: 483px;
    }
}

#price {
    padding-top: 401px;

    div {
        gap: 19px;
    }

    article {
        font-size: 36px;
        width: 354px;

        &:last-of-type {
            strong {
                display: flex;
            }
        }

        h4 {
            font-size: 24px;
        }

        strong {
            font-size: 26px;

            span {
                font-size: 30px;
            }
        }

        dl {
            width: 239px;
        }
    }

    p {
        width: 656px;
    }
}

#qanda {
    padding-top: 130px;

    dl {
        width: 800px;
        animation-name: scalexAnim;
    }
}

#more-btn {
    width: 552px;
    height: 59px;
    border: 3px solid var(--iroha-pale-green);
    transition-property: background-color;
    transition-duration: .5s;

    &:hover {
        color: var(--iroha-black);
        background-color: white;
    }
}

.staff-article {
    display: flex;
    width: 1124px;

    padding-left: 44px;
    margin-right: auto;
    margin-left: auto;

    &:nth-of-type(even) {
        flex-direction: row-reverse;
        padding-right: 44px;
        padding-left: 0;

        .introduce {
            padding-left: 0;
            padding-right: 54px;
        }
    }

    .flex-box {
        display: block;
        margin: 0;
    }

    .img-container {

        &::before,
        &::after {
            width: 337px;
            height: 468px;
        }
    }

    .introduce {
        padding-right: 0;
    }
}

.blog-article {
    margin: 0;

    a {
        border-radius: 17px;
        transition-property: border-color;
        transition-duration: .5s;

        &:hover {
            border-color: var(--iroha-orange);
        }
    }

    form {
        button {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                inset: -4px;
                display: block;
                box-sizing: content-box;
                border: 4px solid transparent;
                border-radius: inherit;
                transition-property: border-color;
                transition-duration: .5s;
            }

            &:hover {
                &::after {
                    border-color: var(--iroha-orange);
                }
            }

            &[value="helpful"] {
                &:hover {
                    &::after {
                        border-color: var(--iroha-black);
                    }
                }
            }
        }
    }
}

.paginavi {
    align-self: flex-end;
    width: 70%;

    a {
        border: 3px solid var(--iroha-pale-green);
        transition-property: background-color;
        transition-duration: .5s;

        &:hover {
            background-color: white;
        }
    }
}

#blog-search {
    ul {
        input {
            &[type="submit"] {
                cursor: pointer;
                display: block;
                border: 4px solid transparent;
                transition-property: border-color;
                transition-duration: .5s;

                &:hover {
                    border-color: var(--iroha-orange);
                }
            }
        }
    }
}

#blog-category {
    form {
        button {
            position: relative;
            padding-right: 10px;
            padding-left: 25px;
            border-radius: 7px;
            contain: paint;

            &::before {
                position: absolute;
                z-index: -1;
                top: 50%;
                left: 0;
                translate: 0 -50%;
                transition-property: width, height;
                transition-duration: .5s;
            }

            &:hover {
                &::before {
                    width: 200px;
                    height: 200px;
                }
            }

            &[value="note"] {
                &:hover {
                    color: white;
                }
            }
        }
    }
}

#blog-tag {
    form {
        button {
            &:hover {
                text-decoration: underline;
            }
        }
    }

    #more-tag {
        &:hover {
            border-color: transparent;
        }
    }
}

#blog-archive {
    >button {
        transition-property: background-color;
        transition-duration: .5s;

        &:hover {
            background-color: var(--iroha-deep-green);

            &::before,
            &::after {
                scale: 2 1;
            }

            &::before {
                rotate: 60deg;
            }

            &::after {
                rotate: -60deg;
            }
        }
    }

    div {
        li {
            padding-right: 10px;
            padding-left: 25px;
            border-radius: 7px;
            contain: paint;

            &::before {
                position: absolute;
                z-index: -1;
                top: 50%;
                left: 0;
                translate: 0 -50%;
                transition-property: width, height;
                transition-duration: .5s;
            }

            &:hover {
                &::before {
                    width: 200px;
                    height: 200px;
                }
            }

            &[value="note"] {
                &:hover {
                    color: white;
                }
            }
        }
    }
}

#blog-content {
    width: stretch;

    form {
        button {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                inset: -4px;
                display: block;
                box-sizing: content-box;
                border: 4px solid transparent;
                border-radius: inherit;
                transition-property: border-color;
                transition-duration: .5s;
            }

            &:hover {
                &::after {
                    border-color: var(--iroha-orange);
                }
            }

            &[value="helpful"] {
                &:hover {
                    &::after {
                        border-color: var(--iroha-black);
                    }
                }
            }
        }
    }
}

#this-tag {
    form {
        button {
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.navi {
    a {
        border: 3px solid var(--iroha-deep-green);
        transition-property: background-color;
        transition-duration: .5s;

        &:hover {
            color: var(--iroha-black);
            background-color: white;
        }
    }
}

#requirements {
    width: 968px;
    padding-top: 55px;

    article {
        gap: 137px;
        font-size: 18px;
        padding-right: 137px;
        padding-left: 137px;

        h4 {
            font-size: inherit;
            width: 108px;
        }
    }
}

#apply {
    width: 968px;
    padding-top: 55px;
    padding-bottom: 100px;

    p {
        font-size: 18px;
        margin-top: 50px;
        margin-bottom: 100px;

        a {
            &:hover {
                text-decoration: none;
            }
        }
    }
}

#contact {
    .flex-pc {
        display: flex;
        justify-content: center;
        gap: 8%;
        margin-top: 96px;

        >div {
            width: 375px;

            >p {
                margin-right: 0;
                margin-left: 0;
            }
        }
    }

    form {
        margin: 0;

        label {
            cursor: pointer;
        }
    }
}

#confirm {
    .mandarin-btn.prev {
        &:hover {
            color: var(--iroha-orange);
            background-color: white;

            &::after {
                background-color: var(--iroha-orange);
            }
        }
    }
}

#confirm,
#thanks {
    >div {
        width: 800px;
        padding-right: 74px;
        padding-left: 74px;
    }
}

@media (min-width: 1500px) {

    #about-eye-catch,
    #flow-eye-catch,
    #qanda-eye-catch,
    #staff-eye-catch,
    #blog-eye-catch,
    #recruit-eye-catch,
    #contact-eye-catch,
    #anxiety-eye-catch,
    #developmental-eye-catch,
    #bipolar-eye-catch {
        width: 1290px;
        height: 469px;

        h2 {
            width: 431px;
        }
    }

    #recruit-eye-catch {
        +strong {
            gap: 41px;
            font-size: 36px;
            width: 641px;
            height: 171px;
            margin-top: 181px;

            &::before,
            &::after {
                width: 79px;
                height: 94px;
            }
        }
    }

    #hero-img {
        strong {
            font-size: 60px;
        }
    }

    #about {
        .img-container {
            &:first-of-type,
            &:last-of-type {
                width: 500px;
                height: 370px;
            }
        }
    }

    #greeting {
        font-size: 23px;

        strong {
            font-size: 28px;
            width: 830px;
            height: 162px;
        }
    }

    #info-corpo,
    #info-office {
        font-size: 21px;
    }

    #info-corpo {
        small {
            bottom: 163px;
        }
    }

    #info-office {
        small {
            top: 471px;
        }
    }

    #coop {
        >div {
            width: 1073px;
        }

        article {
            width: 508px;
            height: 511px;

            .thumb {
                width: 350px;
                height: 238px;
            }

            h4 {
                font-size: 28px;
            }

            h4,
            address {
                width: 308px;
            }

            address {
                font-size: 21px;
            }

            .icon {
                right: 51px;
                bottom: 53px;
                width: 47px;
            }
        }
    }

    .to-contact {
        p {
            font-size: 28px;
        }

        .img-container {
            width: 675px;
            height: 169px;
        }
    }

    #more-btn {
        width: 640px;
        height: 68px;
    }

    #blog-search,
    #blog-category,
    #blog-tag,
    #blog-archive {
        width: 435px;
    }

    #blog-search {
        ul {
            gap: 18px;

            input {
                &[type="search"] {
                    width: 190px;
                }

                &[type="submit"] {
                    width: 92px;
                }
            }
        }
    }

    #blog-category {
        form {
            width: 300px;
        }
    }

    #blog-tag {

        form,
        #close-box {
            width: 300px;
        }
    }

    #blog-archive {

        >button,
        div {
            width: 300px;
        }
    }

    #requirements {
        width: 1124px;

        article {
            gap: 159px;
            font-size: 20px;
            padding-right: 159px;
            padding-left: 159px;

            h4 {
                width: 126px;
            }
        }
    }

    #apply {
        width: 1124px;

        p {
            font-size: 20px;
        }
    }
}

@keyframes rotateAnim {
    from {
        rotate: 0;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes rotateAnim2 {
    from {
        rotate: -45deg;
    }

    to {
        rotate: 315deg;
    }
}