body {
    color: #484543;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    font-family: "Klee One", 'Noto Sans JP', sans-serif;
    font-optical-sizing: auto;
    line-height: 1.70;
}

img {
    width: 100%;
    height: auto;
}

p,
span {
    text-transform: capitalize;
}

a {
    transition: .6s;
}

a:hover {
    opacity: .6;
}

/* コンテンツ幅 */
.inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1040px;
    width: 72.2%;
}

.inner__big {
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
    width: 88.8%;
}


/* ヘッダー */
.header__box {
    height: 129px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background-color: #fff;
}

.header__logo {
    z-index: 1000;
}

.header__container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 24px 0 40px;
    position: relative;
}

.header__nav-container {
    display: flex;
    align-items: center;
}

.header__nav {
    display: flex;
    column-gap: 40px;
    align-items: center;
}

/* works */
.section__title {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 29px;
}

.sub {
    text-transform: capitalize;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
}

.title {
    font-size: 30px;
    font-weight: 400;
}

.title01,
.title02 {
    width: 2%;
    height: 8.35%;
}

.section__title-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}

.button {
    display: flex;
    justify-content: center;
}

.button__text {
    border: 1px solid #6B5E52;
    display: inline-block;
    width: 213px;
    height: 61px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 30px;
}

.button:hover .button__text {
    background-color: #FFF4C2;
    opacity: 1;
}


/* footer */
.footer__container {
    background-image: url(../image/post_footer.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 64%;
    min-width: 800px;
    height: auto;
    aspect-ratio: 821 / 887;
    margin: 0 auto;
    text-align: center;

    padding-top: 82px;
    padding-left: 39px;
    position: relative;
}

.footer {
    background-image: url(../image/flower_footer.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.footer__bottom {
    height: 320px;
}

.sns01,
.sns02 {
    width: 27px;
}

.footer__title {
    font-size: 30px;
}

.footer__sub {
    font-size: 90px;
    color: #6B5E52;
    opacity: 0.15;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

.footer__mail {
    font-size: 23px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

.ty {
    font-family: "Pinyon Script", serif;
    font-weight: 400;
    font-size: 45px;
    color: #A61C2F;
    opacity: 0.8;
}

.footer__contact {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    perspective: 900px;
    position: relative;
}

.sns {
    margin-top: 4.5%;
    display: flex;
    justify-content: center;
    column-gap: 15px;
}

.copy {
    margin-top: 15.5%;
    display: flex;
    justify-content: flex-end;
    margin-right: 8%;
    column-gap: 110px;
    align-items: flex-end;
}

.small {
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

.footer__mail {
    width: 548px;
    background-color: #EFE8D8;
    display: inline-block;
    padding: 3.8% 16.4%;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50px;
    box-shadow: -3px 4px 5px 0 rgb(94, 81, 30, 0.31);
    transform-origin: top center;
    transition:
        transform 0.6s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.6s;
}

.footer__contact:hover .footer__mail {
    transform: rotateX(35deg);
    box-shadow: 0 20px 30px rgba(94, 81, 30, 0.31);
    opacity: 1;
}

.footer__contact::after {
    content: "";
    position: absolute;
    width: 548px;
    height: 86px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(72, 69, 67, 0.4);
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.footer__contact:hover::after {
    opacity: 1;
}

.sns__box {
    background-color: #EFE8D8;
    display: inline-block;
    padding: 16px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50px;
    box-shadow: -3px 4px 5px 0 rgb(94, 81, 30, 0.31);
}

.footer {
    position: relative;
}

.footer::after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../image/footer_fly.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-17deg);
    opacity: .5;
    width: 15%;
    height: 4%;
    right: 10%;
    top: 3%;
    aspect-ratio: 198 / 38;
}

.pc__none {
    display: none;
}

/* タブレット */
@media (max-width: 1020px) {
    .pc__none {
        display: block;
    }

    .tb__none {
        display: none;
    }

    .header__box {
        height: 99px;
    }

    .header__logo {
        width: 130px;
    }

    .header__container {
        padding: 16px 0 28px;
    }

    .header__nav-text {
        font-size: 16px;
    }

    .title {
        font-size: 23px;
    }

    .sub {
        font-size: 15px;
    }

    .title01,
    .title02 {
        width: 1.7%;
    }

    .footer__container {
        width: 600px;
        min-width: 0;
    }

    .footer__contact {
        margin-top: 0;
    }

    .footer__title {
        font-size: 20px;
    }

    .footer__sub {
        font-size: 62px;
    }

    .sns {
        margin-top: 3.7%;
    }

    .copy {
        margin-top: 8.5%;
        margin-right: 5%;
        column-gap: 50px;
    }

    .button__text {
        font-size: 16px;
        width: 188px;
        height: 47px;
    }

    .footer__mail {
        width: 316px;
    }

    .footer__contact::after {
        width: 316px;
        height: 55px;
    }

    .footer__mail {
        font-size: 18px;
        width: 316px;
        padding: 2.2% 7%;
    }

    .footer__contact:hover .footer__mail {
        transform: none;
        box-shadow: -3px 4px 5px 0 rgb(94, 81, 30, 0.31);
    }

    .footer__contact::after {
        display: none;
    }
}

/* スマホ */
@media (max-width: 768px) {
    .pc__none {
        display: block;
    }

    .tb__none {
        display: block;
    }

    .sp__none {
        display: none;
    }

    .inner {
        margin-right: auto;
        margin-left: auto;
        width: 72%;
    }

    .header__box {
        height: 82px;
    }

    .header__container {
        padding: 15px 0 25px;
    }

    .header__logo {
        width: 100px;
    }

    /* ハンバーガーメニュー */
    .hamburger-overlay {
        position: absolute;
        top: 23px;
        right: 0;
        z-index: 1000;
        width: 36px;
        height: 39px;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .hamburger-overlay::after {
        content: "menu";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        font-family: "Pinyon Script", serif;
        font-weight: 400;
        line-height: 1;
    }

    .hamburger-overlay.active::after {
        content: "close";
        left: 3px;
    }


    .hamburger-overlay__line {
        position: absolute;
        left: 0;
        width: 35px;
        height: 1px;
        background-color: #6B5E52;
        transition: all .6s;
    }

    .hamburger-overlay__line:nth-of-type(1) {
        top: 0;
    }

    .hamburger-overlay__line:nth-of-type(2) {
        top: 8px;
    }

    .hamburger-overlay__line:nth-of-type(3) {
        top: 16px;
        width: 22px;
    }

    .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
        transform: translateY(12px) rotate(-20deg);
    }

    .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
        opacity: 0;
    }

    .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
        transform: translateY(-4px) rotate(20deg);
        width: 35px;
    }

    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(../image/nav_sp.png);
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        visibility: hidden;
        opacity: 0;
        transition: all .6s;
        z-index: 900;
    }

    .nav-overlay.active {
        visibility: visible;
        opacity: 1;
    }

    .nav-overlay__content {
        position: absolute;
        top: 58%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }

    .nav-overlay__list {
        margin: 0;
        padding: 33px 0 38px;
        list-style: none;
        flex-direction: column;
        row-gap: 40px;
    }

    .nav-overlay__list::before {
        display: block;
        content: "";
        position: absolute;
        background-image: url(../image/menu01.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22%;
        height: 8%;
    }

    .nav-overlay__list::after {
        display: block;
        content: "";
        position: absolute;
        background-image: url(../image/menu02.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: -28px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22%;
        height: 8%;
    }

    .nav-overlay__item {
        opacity: 0;
        transform: translateY(20px);
        transition: all .6s;
    }

    .nav-overlay.active .nav-overlay__item {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-overlay.active .nav-overlay__item:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-overlay.active .nav-overlay__item:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-overlay.active .nav-overlay__item:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav-overlay.active .nav-overlay__item:nth-child(4) {
        transition-delay: 0.4s;
    }

    .nav-overlay__link {
        display: inline-block;
        padding-bottom: 5px;
        font-weight: 500;
        font-size: 20px;
        text-decoration: none;
        transition: color .3s;
        border-bottom: 0.6px solid #6B5E52;
    }

    .nav-overlay__link:hover {
        color: #A61C2F;
    }

    .footer__container {
        width: 98.2%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        max-width: 460px;
        padding-top: 37px;
        padding-left: 20px;
    }

    .title01,
    .title02 {
        width: 3.1%;
    }

    .sub {
        font-size: 14px;
    }

    .title {
        font-size: 20px;
    }

    .section__title-box {
        row-gap: 0;
    }

    .button__text {
        font-size: 14px;
        width: 158px;
        height: 44px;
    }

    .footer__title {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .footer__sub {
        font-size: 40px;
        line-height: 1;
    }

    .footer__mail {
        font-size: 16px;
    }

    .footer__contact {
        width: 86%;
    }

    .sns01,
    .sns02 {
        width: 24px;
    }

    .ty {
        font-size: 20px;
    }

    .small {
        font-size: 9px;
    }

    .footer__bottom {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .copy {
        margin-top: 2.7%;
        column-gap: 30px;
        padding-left: 83px;
    }

    .footer::after {
        right: 4%;
    }

    .sns {
        column-gap: 40px;
    }

    .footer__title-box {
        margin-bottom: 10px;
    }
}