:root {
    --color-bg: #FEFEFE;
    --color-footer: #BFA878;
    --color-font: #333333;
    --color-btn: rgba(191, 168, 120, 0.6);
    --color-span: #B13F36;
    --color-border: #C4C4C4;

    --font-Ja: "Yu Gothic","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
    --font-En: "Inter", sans-serif;

    --font-h1: clamp(1.5rem,3vw,3.5rem)/1.6 "Cormorant Garamond";

    --font-base: clamp(0.9rem, 0.85rem + 0.4vw, 1rem);
    --font-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
    --font-lg: clamp(1.2rem, 1rem + 0.7vw, 1.3rem);
    --font-xl: clamp(1.4rem, 1.2rem + 1vw, 1.7rem);

    --line-height-base: 2;
    --space-Ja: 0.1em;
    --space-En: 0.05em;

    --container-size: 1200px;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}


body {
    background-color: var(--color-bg);
    font-family: var(--font-Ja);
    /* font-size: var(--font-base); */
}

h3 {
    text-align: center;
    letter-spacing: var(--space-Ja);
    font-size: var(--font-lg);
    span {
        display: block;
    }
}

.service-area {
    min-height: 80px;
    @media (max-width: 768px) {
        min-height: 0px;
    }
}

p {
    line-height: var(--line-height-base);
    padding-top: 1.8rem;
}

ul {
    list-style: none; 
}


#header {
    @media (max-width: 560px) {
        bottom: 120px;
    }
}

/* hero section*/
.hero {
    display: flex;
    height: 100vh;
    align-items: center;
    gap: 3vw;
    position: sticky;
    top: 0;
    @media (max-width: 1024px) {
        flex-direction: column-reverse;
    }
    .bg-img {
        position: absolute;
        right: 0;
        bottom: 10%;
        width: clamp(200px, 20vw, 500px);
        height: auto;
        @media (max-width: 1024px) {
            top: -50px;
            left: -50px;
        }
        @media(max-width: 1400px) and (orientation: landscape){
            bottom: 30%;
        }
    }
    .hero-img { 
        height: 100%;
        width: 100%;
        object-fit: cover;
        position: relative;
        overflow: hidden;
        > div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0;
            animation: fade 24s infinite;
        }
        > div:first-of-type {
            background-image: url(../image/IMG_7387.JPG);
            @media (max-width: 1024px) and (orientation: landscape) {
                background-position: 50% 24%;
            }
            @media(orientation: portrait) {
                background-position: 50% 10%;
            }
            
        }
        > div:nth-of-type(2) {
            background-image: url(../image/DSC_0047.JPG);
            animation-delay: 8s;
            @media (max-width: 1024px) and  (orientation: landscape) {
                background-position: 50% 25%;
            }
            @media(orientation: portrait) {
                background-position: 50% 10%;
            }
        }
        > div:nth-of-type(3) {
            background-image: url(../image/DSC_0100.JPG);
            animation-delay: 16s;
            @media (max-width: 1024px) and (orientation: landscape) {
                background-position: 50% 34%;
            }
            @media(orientation: portrait) {
                background-position: 50% 10%;
            }
        }
    }
    .description {
        width:60%;
        letter-spacing: 0.17em;
        position: relative;
        font-size: clamp(1rem + 0.7vw, 1.3rem);
        .hero-comment {
            letter-spacing: 0.09em;
        }
        @media (max-width: 1024px) {
            width: 95%;
        }
        h1 {
            font: var(--font-h1);
            font-weight: 600;
            span {
                display: block;
            }
        }
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    20% {
            opacity: 1;
    }
    80% {
            opacity: 0;
            transform: scale(1.2);
    }
    100% {
            opacity: 0;
            z-index: 0;
    }
}

/* main */
main {
    position: relative;
    background-color: var(--color-bg);
        &::before {
            position: absolute;
            content: "";
            width: clamp(170px, 20vw, 470px);
            height: 22%;
            background: url(../image/flower.png) no-repeat left;
            background-size: 100%;
            left: -8%;
            top: 70%;
            transform: rotate(180deg);
            opacity: 0.7;
            @media(max-width: 768px) {
                top: 80%;
            }
            @media(max-width: 650px) {
                top: 78%;
                height: 20%;
            }
        }
    .container {
        max-width: var(--container-size);
        margin: 0 auto;
        width: 90%;
    }

    /* profile section */
    .profile {
        display: flex;
        flex-direction: row-reverse;
        align-items: end;
        padding: 10rem 0 15rem 0;
        background: url(../image/Plofile.svg) no-repeat;
        background-size: clamp(190px, 30vw, 450px);
        margin-left: calc(51% - 50vw);
        padding-left: 15vw;
        background-position: 0% 20%;
        position: relative;
        gap: 1.5rem;
        @media (max-width: 960px) {
            background-position: 0% 10%;
        }
        @media (max-width: 850px) {
            align-items: start;
        }
        @media (max-width: 768px) {
            background-position: 0% 5rem;
        }
        @media (max-width: 768px) {
            flex-direction: column;
            margin: 0 auto;
            padding-left: 0;
            margin-left: 0;
        }
        .thumb {
            aspect-ratio: 16 / 19;
            img {
                width: 80%;
                height: 100%;
                object-fit: cover;
                object-position: 0% 15%;
                @media (max-width: 768px) {
                    object-fit: contain;
                    margin: 0 auto;
                }
            }
        }
        .description {
            display: block;
            h2 {
                text-align: center;
                font-family: var(--font-En);
                font-size: var(--font-lg);
                letter-spacing: var(--space-Ja);
            }
        }
    }

    /* service section */
    .service {
        background: url(../image/Service.png) no-repeat right;
        margin-right: calc(51% - 50vw);
        padding-right: 15vw;
        background-size: clamp(55px,9vw, 120px);
        position: relative;
        @media (max-width: 768px) {
            background-position: right top;
            background: url(../image/Service_sp.png) no-repeat top;
            margin-right: 0;
            padding-right: 0;
            background-size: clamp(230px, 45vw, 450px);
        }
        &::before {
            position: absolute;
            content: "";
            width: clamp(150px, 17vw, 540px);
            height: clamp(200px, 43vh, 345px);
            background: url(../image/flower.png) no-repeat;
            background-size: cover;
            right: 0;
            transform: translateY(-55%);
            opacity: 0.7;
            @media (max-width: 768px) {
                transform: translateY(-95%);
            }
            @media (max-width: 853px) {
                width: clamp(180px, 17vw, 540px);
                height: clamp(200px, 43vh, 225px);
                background-size: 100%;
            }
        }
        &::after {
            position: absolute;
            content: "";
            background: url(../image/AdobeStock_566498961\ 1.svg) no-repeat;
            background-size: 100%;
            right: 0;
            bottom: 80%;
            width: clamp(160px, 8vw, 470px);
            height: 23%;
            opacity: 0.7;
            transform: translateY(-90%);
            @media (max-width: 768px) {
                transform: translateY(-50%);
                }
            }
        .wrapper {
            display: flex;
            align-items: end;
            gap: 1.5rem;
            padding: 5rem 0 5rem 0;
            @media (max-width: 768px) {
                flex-direction: column;     
            }
            @media (max-width: 960px) {
                align-items: normal;
            }
            .thumb {
                aspect-ratio: 4 / 3;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                    @media (max-width: 768px) {
                        width: calc(100% - 12px);
                    }
                }
                @media (max-width: 768px) {
                    aspect-ratio: auto;
                    padding-top: 3%;
                }
            }
        }
        ul {
            display: flex;
            justify-content: space-around;
            align-items: stretch;
            li {
                width: 30%;
                .thumb {
                    width: 25%;
                    margin: 0 auto;
                    padding-top: 8%;
                }
                p {
                    padding-bottom: 2rem;
                }
                @media (max-width: 768px) {
                    width: 100%;
                }
                .btn {
                    text-align: center;
                    a {
                        background-color: var(--color-footer);
                        color: var(--color-bg);
                        text-decoration: none;
                        padding: 1rem;
                        border: 1px solid var(--color-footer);
                        &:hover {
                            background: var(--color-bg);
                            color: var(--color-footer);
                        }
                    }    
                }
                
            } 
            @media (max-width: 768px) {
                flex-direction: column;
                gap: 2.5rem;
                padding: 0px;
            }
        }
        
    }

    /* contact section */
    .contact {
        text-align: center;
        padding: 20rem 0 5rem 0; 
        background-position: 0% 30%;
        background: url(../image/Contact.webp) no-repeat left;
        background-size: clamp(400px, 65vw, 910px);
        @media(max-width: 768px) {
            padding: 15rem 0 5rem 0;
        }
        @media(max-width: 425px) {
            background-position: center;
        }
        &::before {
            position: absolute;
            content: "";
            background: url(../image/AdobeStock_566498961\ 1.svg) no-repeat;
            background-size: 100%;
            height: 12%;
            bottom: 0%;
            width: clamp(110px, 20vw, 470px);
            right: 5%;
            opacity: 0.7;
            transform: translateY(100px);
            @media(max-width: 768px) {
                height: 5%;
                bottom: auto;
            }
            @media (max-width: 430px) {
                bottom: 0.5%;
            }
        }
        &::after {
            position: absolute;
            content: "";
            background: url(../image/flower.png) no-repeat;
            background-size: cover;
            height: 5%;
            bottom: 0%;
            right: 0%;
            width: clamp(95px, 20vw, 470px);
            opacity: 0.7;
            @media (max-width: 1440px) {
                bottom: auto;
                height: 4%;
            }
        }
        p {
            padding: 5rem 0 3rem 0;
        }
        a {
            background: var(--color-btn);
            color: var(--color-font);
            text-decoration: none;
            padding: 1.2rem 1.7rem;
            position: relative;
            text-align: center;
            &::before {
                border: 0.7px solid var(--color-font);
                content: "";
                position: absolute;
                inset: -5px 5px 5px -5px;
                transition: inset 0.5s ease;
            }
            &:active::before {
                inset: 0;
            }
            @media (hover: hover) and (pointer: fine) {
                    &:hover::before {
                    inset: 0;
                    transition: 0.3s;
                }
            }
        } 
    }
}

/* footer */
footer {
    background-color: var(--color-footer);
    text-align: center;
    padding: 1.2rem;
    position: relative;
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 1.2rem;
        gap:  0.5rem;
        a {
            width: 1.8rem;
            height: 1.8em;
            &:nth-child(2) {
                width: 5rem;
            }
            &:nth-child(3) {
                width: 1.5rem;
            }
            &:hover {
                opacity: 0.5;
            }
        }
        img {
                width: 100%;
                height: 100%;
        }
    }
    .page-top {
        position: absolute;
        bottom: 240px;
        right: 3%;
        width: clamp(60px,7vw,130px);
        &:hover {
            opacity: 0.5;
        }
        @media (max-width: 560px) {
            bottom: 360px;
        }
    }
}

/* 
ここからcontactページ
 */

header {
    font: var(--font-h1);
    font-size: var(--font-lg);
    padding: 0.5em 0 0 1em;
    span {
        display: block;
    }
    a {
        text-decoration: none;
        color: var(--color-font);
    }
}

.essential {
    color: var(--color-span);
}

#contact-area {
    &::before {
        display: none;
    }
    .description {
        @media (max-width: 375px){
            text-align: left;
        }
    }
    h2 {
        letter-spacing: var(--space-Ja);
    }
    img {
        margin: 0 auto;
        width:  clamp(300px, 30vw, 650px);
        transform: translateX(7%);
    }
    .wrapper {
        text-align: center;
    }
    .contact-table {
        width: 100%;
        padding-top: 6rem;
        @media(max-width: 960px) {
            padding-top: 1.5rem;
        }
    }
    tr {
        display: flex;
        justify-content: space-between;
        width: 60%;
        padding-bottom: 3rem;
        margin: 0 auto;
        @media (max-width: 960px) {
            flex-direction: column;
            width: 100%;
        }
        th {
            letter-spacing: var(--space-En);
            @media (max-width: 960px) {
                text-align: left;
            }
        }
        .input-area {
            letter-spacing: var(--space-En);
            padding: 0 0.5rem;
            height: 3rem;
            border: 1px solid var(--color-border);
            width: 100%;
            font-size: 16px;
        }
        td {
            width: calc(100% - 250px);
            @media (max-width: 960px) {
                width: 100%;
            }
        }
        .list-area {
            display: flex;
            flex-direction: column;
            text-align: left;
            gap: 1rem;
        }
        .form-area {
            width: 100%;
            min-height: 200px;
            letter-spacing: var(--space-En);
            padding: 0 0.5rem;
            border: 1px solid var(--color-border);
            font-size: 16px;
        }
    }
    .contact-submit {
        width: 160px;
        background-color: var(--color-footer);
        color: var(--color-bg);
        border: none;
        padding: 1rem;
        cursor: pointer;
        letter-spacing: 0.5em;
        margin-bottom: 10rem;
        &:hover {
            background-color: var(--color-btn);
        }
    }
}