/* ==========================================================
   メメント相続行政書士事務所
   price.css
========================================================== */

:root{
    --price-green:#6f8f58;
    --price-green-dark:#587540;
    --price-title:#3f3429;
    --price-text:#5f5448;
    --price-bg:#f8f3ea;
    --price-light:#fffdf8;
    --price-line:#e5dacb;
    --price-white:#fff;
    --price-width:1100px;
}

.price-container{
    width:min(var(--price-width),90%);
    margin:auto;
}

/* HERO */

.price-hero{
    min-height:300px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(90deg,rgba(255,253,248,.96),rgba(255,253,248,.82),rgba(255,253,248,.35)),
    url("../images/office.png") center/cover no-repeat;
}

.price-hero-inner{
    width:min(var(--price-width),90%);
    margin:auto;
}

.price-hero-label,
.price-section-label,
.price-heading p{
    color:var(--price-green);
    font-size:14px;
    letter-spacing:.16em;
    margin:0 0 8px;
}

.price-hero h2,
.price-heading h2{
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:400;
    color:var(--price-title);
}

.price-hero h2{
    font-size:46px;
    margin:0 0 10px;
}

.price-hero p:last-child{
    color:var(--price-text);
}

/* Intro */

.price-intro-section,
.price-note-section{
    background:var(--price-white);
    padding:56px 0;
}

.price-intro{
    max-width:820px;
    margin:auto;
    text-align:center;
}

.price-intro h2{
    font-family:"Yu Mincho",serif;
    font-size:34px;
    font-weight:400;
    margin-bottom:16px;
}

.price-intro p:last-child{
    line-height:1.9;
    color:var(--price-text);
}

/* heading */

.price-heading{
    text-align:center;
    margin-bottom:34px;
}

.price-heading h2{
    font-size:34px;
}

/* services */

.price-services-section,
.price-extra-section,
.price-flow-section{
    padding:60px 0;
}

.price-services-section,
.price-flow-section{
    background:var(--price-bg);
}

.price-extra-section{
    background:var(--price-white);
}

.price-service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.price-service-card{
    background:var(--price-white);
    border:1px solid var(--price-line);
    border-radius:18px;
    padding:28px;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.price-card-number{
    color:#9aae8c;
    font-family:Georgia,serif;
}

.price-service-card h3{
    font-family:"Yu Mincho",serif;
    font-size:26px;
    font-weight:400;
    margin:10px 0;
}

.price-service-card p{
    color:var(--price-text);
    line-height:1.8;
}

.price-amount{
    margin:22px 0 18px;
    padding:12px;
    text-align:center;
    background:#edf4e6;
    border-radius:10px;
    color:var(--price-green-dark);
    font-weight:700;
}

.price-service-card a{
    color:var(--price-green-dark);
}

/* extra */

.price-extra-box{
    display:grid;
    gap:18px;
}

.price-extra-item{
    border:1px solid var(--price-line);
    border-radius:14px;
    padding:24px;
}

.price-extra-item h3{
    font-family:"Yu Mincho",serif;
    font-size:24px;
    font-weight:400;
    margin-bottom:10px;
}

.price-extra-item p{
    color:var(--price-text);
}

/* flow */

.price-flow-list{
    list-style:none;
    display:grid;
    gap:18px;
}

.price-flow-list li{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:18px;
    background:var(--price-white);
    border:1px solid var(--price-line);
    border-radius:16px;
    padding:22px;
}

.price-flow-list span{
    color:var(--price-green);
    font:700 24px Georgia,serif;
}

.price-flow-list h3{
    font-family:"Yu Mincho",serif;
    font-size:24px;
    font-weight:400;
    margin-bottom:8px;
}

.price-flow-list p{
    color:var(--price-text);
}

/* note */

.price-note-box{
    max-width:760px;
    margin:auto;
    text-align:center;
    padding:34px;
    border:1px solid var(--price-line);
    border-radius:18px;
    background:var(--price-light);
}

.price-note-box h2{
    font-family:"Yu Mincho",serif;
    font-size:30px;
    font-weight:400;
    margin-bottom:12px;
}

.price-note-box p{
    margin-bottom:20px;
    color:var(--price-text);
}

.price-note-box a{
    display:inline-block;
    padding:11px 24px;
    border-radius:999px;
    background:var(--price-green);
    color:#fff;
}

@media (max-width:800px){
    .price-service-grid{
        grid-template-columns:1fr;
    }
    .price-flow-list li{
        grid-template-columns:1fr;
    }
    .price-hero h2,
    .price-heading h2,
    .price-intro h2,
    .price-note-box h2{
        font-size:30px;
    }
}