*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

:root {
    --bg-color: #fff9f7;
    --bg-pink: #fceff2;
    --main-pink: #e8a7b6;
    --dark-pink: #d98fa1;
    --title-color: #5f514c;
    --text-color: #6f625d;
    --light-text: #8b7b75;
    --white: #ffffff;
}
body {
    background: var(--bg-color);
    color: var(--text-color);
}
.section-title{

    position:relative;

    display:inline-block;

}

.section-title::after{

    content:"✦";

    position:absolute;

    top:-8px;

    right:-20px;

    color:#f4bfd0;

    font-size:18px;

    animation:twinkle 2s infinite;

}

@keyframes twinkle{

0%,100%{

opacity:.4;
transform:scale(.8);

}

50%{

opacity:1;
transform:scale(1.3);

}

}

@keyframes sparkleMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-180px);

    }

}
a{
    text-decoration: none;
    color: inherit;
}

/* ===================================
Header
=================================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:22px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(255,255,255,.6);
    backdrop-filter:blur(15px);

    z-index:1000;
}

.logo{

    font-family:"Cormorant Garamond",serif;
    font-size:34px;
    color:var(--title-color);
    letter-spacing:3px;
}

.nav ul{

    display:flex;
    gap:38px;
    list-style:none;

}

.nav a{

    position:relative;

    font-size:13px;
    letter-spacing:2px;

    color:var(--light-text);

    transition:.3s;

}

.nav a:hover{

    color:var(--main-pink);

}

.nav a::after{

    content:"";
    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:1px;

    background:var(--main-pink);

    transform:scaleX(0);
    transform-origin:right;

    transition:.3s;

}

.nav a:hover::after{

    transform:scaleX(1);
    transform-origin:left;

}

/* ===================================
Hero
=================================== */

.hero{

    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:90px;

    width:100%;

    min-height:100vh;

    padding:130px 8% 80px;

    position:relative;

    overflow:hidden;

}

.hero-text{

    flex:1;

}

.hero-subtitle{

    color:var(--main-pink);

    letter-spacing:4px;

    margin-bottom:20px;

    font-size:14px;

}

.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:78px;

    line-height:1.2;

    color:var(--title-color);

    margin-bottom:35px;

}

.hero h1 span{

    color:var(--main-pink);

}

.hero-description{

    max-width:500px;

    line-height:2.2;

    color:var(--text-color);

    margin-bottom:45px;

}

.hero-image{

    flex:1.2;

    animation:float 5s ease-in-out infinite;

}

.hero-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    border-radius:35px;

    box-shadow:0 30px 60px rgba(0,0,0,.08);

}

/* ボタン */

.hero-btn{

    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:16px 38px;
    
    border-radius:999px;
    
    background:linear-gradient(
    135deg,
    var(--main-pink),
    var(--dark-pink)
    );
    
    color:white;
    
    font-size:13px;
    
    letter-spacing:2px;
    
    transition:.35s;
    
    }
    
    .hero-btn:hover{
    
    transform:translateY(-5px);
    
    box-shadow:0 15px 30px rgba(217,143,161,.35);
    
    }
/* ===================================
About
=================================== */

.about {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 90px;

    width: 100%;
    padding: 120px 8%;
}


/* 写真側 */

.about-image {
    position: relative;

    width: 46%;
    max-width: 540px;
}

.about-image img {
    width: 100%;
    height: 610px;

    object-fit: cover;
    object-position: center;

    border: 8px solid rgba(255, 255, 255, 0.8);
    border-radius: 280px 280px 30px 30px;

    box-shadow: 0 25px 60px rgba(95, 81, 76, 0.1);
}


/* 写真の横にある英字 */

.about-handwriting {
    position: absolute;
    top: 45px;
    right: -45px;

    color: var(--main-pink);

    font-family: "Cormorant Garamond", serif;
    font-size: 27px;
    font-style: italic;
    letter-spacing: 0.04em;

    transform: rotate(-8deg);
}


/* 文章側 */

.about-text {
    width: 46%;
    max-width: 560px;
}

.section-title {
    margin-bottom: 35px;

    color: var(--title-color);

    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.section-title span {
    color: var(--main-pink);
}

.about-lead {
    margin-bottom: 25px;

    color: var(--title-color);

    font-size: 18px;
    font-weight: 500;
}

.about-description {
    color: var(--text-color);

    font-size: 15px;
    line-height: 2.2;
}


/* Aboutボタン */

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 40px;
    padding: 15px 30px;

    border-radius: 999px;

    background: var(--white);
    color: var(--dark-pink);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;

    box-shadow: 0 12px 30px rgba(232, 167, 182, 0.2);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.about-link:hover {
    transform: translateY(-5px);

    box-shadow: 0 18px 35px rgba(232, 167, 182, 0.3);
}

.about-link span {
    transition: transform 0.35s ease;
}

.about-link:hover span {
    transform: translateX(5px);
}
/* ===================================
Works
=================================== */

/* ===================================
Works
=================================== */

.works {
    padding: 120px 8%;
    text-align: center;
}

.works-subtitle {
    margin-top: 10px;
    margin-bottom: 20px;

    color: var(--light-text);
    font-size: 15px;
}

.works-ai {
    max-width: 700px;
    margin: 0 auto 60px;

    color: var(--light-text);
    font-size: 13px;
    line-height: 2;
}


/* Works Cards */

.works-container {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
}

.works-card {
    width: 380px;
    overflow: hidden;

    border-radius: 28px;
    background: white;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .06);

    transition: .4s;
}

.works-card:hover {
    transform: translateY(-12px);

    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
}

.works-image {
    overflow: hidden;
}

.works-image img {
    width: 100%;
    height: 250px;

    object-fit: cover;

    transition: .6s;
}

.works-card:hover img {
    transform: scale(1.08);
}

.works-content {
    padding: 30px;
    text-align: left;
}

.works-category {
    margin-bottom: 12px;

    color: var(--main-pink);

    font-size: 12px;
    letter-spacing: 2px;
}

.works-content h3 {
    margin-bottom: 18px;

    color: var(--title-color);

    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
}

.works-text {
    margin-bottom: 28px;

    color: var(--text-color);

    font-size: 14px;
    line-height: 2;
}

.works-link {
    display: inline-block;

    color: var(--dark-pink);

    font-size: 13px;
    letter-spacing: 2px;

    transition: .3s;
}

.works-link:hover {
    letter-spacing: 4px;
}
    /* ===================================
Skills
=================================== */

.skills {
    padding: 120px 8%;
    text-align: center;
    background: #fff5f7;
}

.skills-subtitle {
    margin-top: 10px;
    margin-bottom: 60px;

    color: var(--light-text);

    font-size: 15px;
}

.skills-list {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    max-width: 1100px;

    margin: 0 auto;
}

.skill-card {
    padding: 45px 30px;

    border: 1px solid rgba(232, 167, 182, 0.18);
    border-radius: 26px;

    background: rgba(255, 255, 255, 0.85);

    box-shadow: 0 18px 45px rgba(95, 81, 76, 0.06);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.skill-card:hover {
    transform: translateY(-10px);

    border-color: rgba(232, 167, 182, 0.5);

    box-shadow: 0 28px 55px rgba(95, 81, 76, 0.1);
}

.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 85px;
    height: 85px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #fff8fa,
        #f8dce3
    );

    color: var(--dark-pink);

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;

    box-shadow: 0 12px 30px rgba(232, 167, 182, 0.2);

    transition: transform 0.4s ease;
}

.skill-card:hover .skill-icon {
    transform: rotate(-5deg) scale(1.08);
}

.skill-card h3 {
    margin-bottom: 18px;

    color: var(--title-color);

    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 500;
}

.skill-card p {
    color: var(--text-color);

    font-size: 14px;
    line-height: 2;
}
/* ===================================
Flow
=================================== */

.flow{

    padding:120px 8%;

    text-align:center;

}

.flow-subtitle{

    margin-top:10px;
    margin-bottom:60px;

    color:var(--light-text);

}

.flow-list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.flow-card{

    background:white;

    padding:40px 25px;

    border-radius:28px;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    transition:.4s;
    position:relative;

}

.flow-card:hover{

    transform:translateY(-10px);

}

.flow-card:not(:last-child)::after{

    content:"➜";

    position:absolute;

    top:50%;

    right:-28px;

    transform:translateY(-50%);

    font-size:28px;

    color:var(--main-pink);

}
.flow-number{

    width:75px;
    height:75px;

    display:flex;

    justify-content:center;
    align-items:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #fff7fa,
        #f9dbe5
    );

    color:var(--dark-pink);

    font-size:28px;

    box-shadow:0 10px 30px rgba(232,167,182,.2);

    transition:.3s;

}
.flow-number{

    background:#fff5f7;

    border:1px solid #f6d7e0;

    box-shadow:
        0 15px 35px rgba(232,167,182,.18);

}

.flow-card:hover .flow-number{

    transform:translateY(-6px) rotate(-8deg);

}
.flow-card h3{

    margin-bottom:18px;

    font-family:"Cormorant Garamond",serif;

    color:var(--title-color);

}

.flow-card p{

    line-height:2;

    color:var(--text-color);

}

/* ===================================
Contact
=================================== */


.contact {
    padding: 120px 20px;
    background: #fff8fa;
}
.contact-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 70px 80px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(180, 130, 145, 0.08);
    text-align: center;
}
.contact-subtitle {
    margin-top: 18px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #8f6f77;
    letter-spacing: 0.08em;
}
.contact-text {
    margin: 18px 0 40px;
    color: #777;
    font-size: 14px;
    line-height: 2;
}
.contact-form {
    text-align: left;
}
.form-group {
    margin-bottom: 24px;
}
.form-group label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    color: #66555a;
    font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 17px;
    border: 1px solid #eadde0;
    border-radius: 10px;
    background: #fffafb;
    color: #555;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #d9aebc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(217, 174, 188, 0.12);

}
.form-group textarea {
    resize: vertical;
    min-height: 150px;
}
.contact-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 17px 20px;
    border: none;
    border-radius: 999px;
    background: #d9aebc;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: .3s;

}
.contact-submit:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}
.contact-submit span {
    font-size: 15px;
}
/* ===================================
Thank You
=================================== */

.contact-thanks {
    display: none;

    max-width: 760px;
    margin: 0 auto;
    padding: 80px 40px;

    background: #ffffff;
    border-radius: 24px;

    text-align: center;

    box-shadow: 0 10px 40px rgba(180, 130, 145, 0.08);
}

.thanks-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #fff0f4;

    color: #d9aebc;

    font-size: 28px;
}

.thanks-title {
    margin-bottom: 15px;

    font-family: "Poppins", sans-serif;
    font-size: 28px;
    letter-spacing: 0.12em;

    color: #8f6f77;
}

.thanks-subtitle {
    margin-bottom: 20px;

    color: #66555a;
    font-size: 15px;
}

.thanks-text {
    color: #888;
    font-size: 14px;
    line-height: 2;
}

.thanks-message {
    margin-top: 30px;

    color: #d9aebc;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
}


/* BACK BUTTON */

.back-contact {
    margin-top: 35px;

    padding: 13px 25px;

    border: 1px solid #d9aebc;
    border-radius: 999px;

    background: transparent;
    color: #c48fa0;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition: 0.3s;
}

.back-contact:hover {
    background: #fff0f4;
}


/* ===================================
Contact Responsive
=================================== */

@media (max-width: 768px) {

    .contact {
        padding: 80px 20px;
    }

    .contact-box {
        padding: 45px 25px;
        border-radius: 20px;
    }

    .contact-thanks {
        padding: 60px 25px;
    }

    .contact-text br {
        display: none;
    }

}
/* ===================================
Footer
=================================== */

.footer{

    padding:80px 8%;

    background:#fff7f8;

    text-align:center;

}

.footer-logo{

    display:inline-block;

    margin-bottom:35px;

    font-family:"Cormorant Garamond",serif;

    font-size:38px;

    color:var(--title-color);

    letter-spacing:3px;

}

.footer-nav{

    display:flex;

    justify-content:center;

    gap:35px;

    list-style:none;

    margin-bottom:40px;

}

.footer-nav a{

    color:var(--light-text);

    font-size:13px;

    letter-spacing:2px;

    transition:.3s;

}

.footer-nav a:hover{

    color:var(--main-pink);

}

.footer-sns{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:35px;

}
.footer-sns a{

    width:50px;
    height:50px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:white;

    color:var(--dark-pink);

    font-size:18px;

    box-shadow:0 10px 25px rgba(232,167,182,.18);

    transition:.35s;

}

.footer-sns a:hover{

    transform:translateY(-6px);

    background:var(--main-pink);

    color:white;

}

.copyright{

    color:#b8a6a2;

    font-size:12px;

    letter-spacing:1px;

}
.footer-message{

    margin-bottom:30px;

    color:var(--light-text);

    font-size:14px;

    letter-spacing:2px;

}
    /* アニメージョン */

    .fade-up{

        
        
        opacity: 1;
        transform: translateY(0);

        
        transform:translateY(0);
        
        }
        
        .delay-1{
        
        transition-delay:.25s;
        
        }
        
        @keyframes float{
        
        0%,100%{
        
        transform:translateY(0);
        
        }
        
        50%{
        
        transform:translateY(-12px);
        
        }
        
        }
/* ハンバーガーメニュー */
.hamburger{

    display:none;

    width:42px;
    height:42px;

    position:relative;

    border:none;
    background:none;

    cursor:pointer;

}

.hamburger span{

    position:absolute;

    left:8px;

    width:26px;
    height:2px;

    background:#555;

    transition:.35s;

}

.hamburger span:nth-child(1){

    top:12px;

}

.hamburger span:nth-child(2){

    top:20px;

}

.hamburger span:nth-child(3){

    top:28px;

}

.hamburger.active span:nth-child(1){

    top:20px;
    transform:rotate(45deg);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    top:20px;
    transform:rotate(-45deg);

}

/* レスポンシブ */
@media(max-width:768px){

    .hero {
        min-height: auto;
        padding: 250px 25px 75px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    .hero-text {
        width: 100%;
    }

    /* SPでは写真を表示しない */
    .hero-image {
        display: none;
    }

    .hero-subtitle {
        margin-bottom: 22px;

        font-size: 12px;
        letter-spacing: 2px;
    }

    .hero h1 {
        margin-bottom: 28px;

        font-size: 48px;
        line-height: 1.08;
    }

    .hero-description {
        max-width: 320px;
        margin: 0 auto 38px;

        font-size: 13px;
        line-height: 2;
    }

    .hero-btn {
        display: inline-block;
    }


    .nav{
    
    position:fixed;
    
    top:0;
    right:-100%;
    
    width:100%;
    height:100vh;
    
    background:#fff9f7;
    
    display:flex;
    
    justify-content:center;
    align-items:center;
    
    transition:.4s;
    
    }
    
    .nav.active{
    
    right:0;
    
    }
    
    .nav ul{
    
    flex-direction:column;
    
    gap:45px;
    
    }
    
    .hamburger{
    
    display:block;
    
    }

    .about {
        flex-direction: column;

        gap: 55px;

        padding: 85px 7%;
    }

    .about-image,
    .about-text {
        width: 100%;
    }

    .about-image {
        max-width: 430px;
    }

    .about-image img {
        height: 470px;

        border-radius: 220px 220px 25px 25px;
    }

    .about-handwriting {
        top: 25px;
        right: 0;

        font-size: 23px;
    }

    .section-title {
        margin-bottom: 28px;

        font-size: 31px;
    }

    .about-lead {
        font-size: 17px;
    }

    .about-description {
        font-size: 14px;
        line-height: 2.1;
    }
    /* ==========================
Works Mobile
========================== */

    .works{

        padding:90px 7%;
        
        }
        
        .works-card{
        
        width:100%;
        
        max-width:420px;
        
        }
        
        .works-content{
        
        padding:25px;
        
        }
        
        .works-content h3{
        
        font-size:28px;
        
        }
        
        .works-image img{
        
        height:220px;
        
        }
        /* ===================================
Skills - Mobile
=================================== */

    .skills {
        padding: 85px 7%;
    }

    .skills-subtitle {
        margin-bottom: 45px;

        font-size: 14px;
        line-height: 1.8;
    }

    .skills-list {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .skill-card {
        padding: 38px 25px;
    }

    .skill-icon {
        width: 78px;
        height: 78px;

        margin-bottom: 22px;
    }

    .skill-card h3 {
        font-size: 26px;
    }
    .flow-list{

        grid-template-columns:1fr;
        
        }
        .flow-card:not(:last-child)::after{

            content:"↓";
        
            right:50%;
        
            top:100%;
        
            transform:translateX(50%);
        
            margin-top:10px;
        
        }
        
        /* ===================================
Contact - Mobile
=================================== */
.contact {
    padding: 80px 20px;
}
.contact-box {
    padding: 45px 25px;
    border-radius: 20px;
}
.contact-text br {
    display: none;
}
        /* ===================================
Footer Mobile
=================================== */

.footer{

    padding:60px 7%;

}

.footer-logo{

    font-size:30px;

}

.footer-nav{

    flex-direction:column;

    gap:18px;

}

.footer-sns{

    gap:14px;

}
    }