/* =====================
   RESET
===================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Noto Sans JP",sans-serif;
    background:#f8f8f8;
    color:#222;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* =====================
HEADER
===================== */

header{
    position: static;
    width:100%;

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

    padding:18px 8%;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(20px);

    border-bottom:1px solid #ececec;
}


.logo img{

    width:170px;

}

nav ul{

    display:flex;

    gap:40px;

}

nav a{

    color:#333;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:#c9a227;

}

/* =====================
TOP
===================== */

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:220px 20px 80px;
    background:#fff;
}


.hero-inner{

    max-width:900px;

}
.hero-logo{
    width:230px;
    margin-top:80px;
    margin-bottom:40px;
}

.sub-title{

    color:#c9a227;

    letter-spacing:4px;

    font-size:18px;

    margin-bottom:20px;

    text-transform:uppercase;

}

.hero h1{

    font-size:60px;

    line-height:1.3;

    margin-bottom:30px;

    font-family:"Montserrat",sans-serif;

}

.hero-text{

    font-size:22px;

    color:#666;

    margin-bottom:45px;

}

.hero-text strong{

    color:#c9a227;

}

.btn{

    display:inline-block;

    background:#c9a227;

    color:#fff;

    padding:18px 45px;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

}

.btn:hover{

    background:#b38d1d;

    transform:translateY(-5px);

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

}

/* =====================
スマホ
===================== */

@media(max-width:768px){

header{

    flex-direction:column;

    gap:20px;

}

nav ul{

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

}

.hero{

    padding-top:180px;

}

.hero-logo{

    width:170px;

}

.hero h1{

    font-size:38px;

}

.hero-text{

    font-size:18px;

}

.btn{

    width:100%;

    max-width:280px;

}

}
/*=====================
ABOUT
======================*/

.container{

    max-width:1200px;
    margin:auto;

}

#about{

    background:#f8f8f8;

    padding:120px 8%;

}

#about .container{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:80px;

    align-items:center;

}

.section-sub{

    color:#c9a227;

    letter-spacing:4px;

    font-size:14px;

    font-weight:bold;

    margin-bottom:15px;

}

.about-left h2{

    font-size:48px;

    line-height:1.3;

    color:#222;

}

.about-right p{

    font-size:18px;

    color:#666;

    line-height:2.1;

    margin-bottom:25px;

}

@media(max-width:768px){

#about .container{

    grid-template-columns:1fr;

    gap:40px;

}

.about-left{

    text-align:center;

}

.about-left h2{

    font-size:34px;

}

.about-right p{

    font-size:16px;

}

}
/*=====================
SERVICE
======================*/

#service{

    background:#fff;

    padding:120px 8%;

}

.title{

    text-align:center;

    margin-bottom:70px;

}

.title h2{

    font-size:48px;

    color:#222;

    margin:15px 0;

}

.service-text{

    color:#777;

    font-size:18px;

}

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    padding:45px 30px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-12px);

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

}

.icon{

    font-size:55px;

    margin-bottom:25px;

}

.service-card h3{

    color:#222;

    margin-bottom:20px;

    font-size:24px;

}

.service-card p{

    color:#777;

    line-height:1.9;

}

@media(max-width:900px){

.service-grid{

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

}

}

@media(max-width:768px){

.service-grid{

    grid-template-columns:1fr;

}

.title h2{

    font-size:36px;

}

}
/*=====================
WORKS
======================*/

#works{

    background:#f8f8f8;

    padding:120px 8%;

}

.works-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.works-image img{

    border-radius:25px;

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

}

.works-content span{

    color:#c9a227;

    font-weight:bold;

    letter-spacing:2px;

}

.works-content h3{

    font-size:42px;

    margin:20px 0;

    color:#222;

}

.works-content p{

    color:#666;

    line-height:2;

    margin-bottom:35px;

}

@media(max-width:900px){

.works-card{

    grid-template-columns:1fr;

}

.works-content{

    text-align:center;

}

}
/*=====================
PRICE
======================*/

#price{

    background:#fff;

    padding:120px 8%;

}

.price-card{

    max-width:700px;

    margin:auto;

    background:#fff;

    border-radius:30px;

    padding:60px;

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

    text-align:center;

}

.price-top p{

    color:#777;

}

.price-top h3{

    font-size:60px;

    color:#c9a227;

    margin-bottom:30px;

}

.price-main p{

    color:#777;

}

.price-main h1{

    font-size:75px;

    color:#222;

    margin:20px 0;

}

.price-main span{

    font-size:20px;

    color:#888;

}

.price-card ul{

    margin:45px 0;

}

.price-card li{

    padding:15px 0;

    border-bottom:1px solid #eee;

    color:#555;

}

.price-card .btn{

    margin-top:20px;

}

@media(max-width:768px){

.price-card{

    padding:40px 25px;

}

.price-main h1{

    font-size:50px;

}

.price-top h3{

    font-size:45px;

}

}
/*=====================
FLOW
======================*/

#flow{

    padding:120px 8%;

    background:#f8f8f8;

}

.flow-grid{

    display:grid;

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

    gap:30px;

}

.flow-card{

    background:#fff;

    padding:40px 30px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

}

.flow-card:hover{

    transform:translateY(-8px);

}

.flow-card span{

    display:inline-block;

    width:60px;

    height:60px;

    line-height:60px;

    border-radius:50%;

    background:#c9a227;

    color:#fff;

    font-size:22px;

    font-weight:bold;

    margin-bottom:20px;

}

.flow-card h3{

    margin-bottom:15px;

    color:#222;

}

.flow-card p{

    color:#666;

    line-height:1.8;

}

@media(max-width:768px){

.hero-logo{
    display:block;
    width:170px;
    margin:80px auto 40px;
}
.flow-grid{

    grid-template-columns:1fr;

}

}
/*=====================
FAQ
======================*/

#faq{

    padding:120px 8%;

    background:#fff;

}

.faq-box{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#fff;

    padding:35px;

    border-radius:20px;

    margin-bottom:25px;

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

}

.faq-item h3{

    color:#c9a227;

    margin-bottom:15px;

}

.faq-item p{

    color:#666;

    line-height:1.9;

}

/*=====================
CONTACT
======================*/

#contact{

    background:#f8f8f8;

    padding:120px 8%;

}

.contact-text{

    color:#666;

    margin-bottom:40px;

}

.contact-card{

    max-width:700px;

    margin:auto;

    display:grid;

    gap:25px;

}


.contact-btn{

    display:block;

    text-align:center;

    background:#c9a227;

    color:#fff;

    padding:20px;

    border-radius:60px;

    font-size:20px;

    font-weight:bold;

    transition:.3s;

}

.contact-btn:hover{

    background:#b58e1e;

    transform:translateY(-5px);

}

/*=====================
FOOTER
======================*/

footer{

    background:#111;

    color:#fff;

    text-align:center;

    padding:70px 20px;

}

.footer-logo{

    width:180px;

    margin:0 auto 25px;

}
.hero-logo{
    display:block;
    width:230px;
    margin:80px auto 40px;
}