@charset "UTF-8";

.program-page,
.program-page .tr-page {
    background: var(--tr-background);
}

.pg-breadcrumb {
    padding: 150px max(24px, calc((100vw - 1400px) / 2)) 18px;
}

.pg-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.pg-breadcrumb li + li::before {
    margin-right: 8px;
    content: "›";
}

.pg-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.pg-hero {
    padding: 20px 0 48px;
}

.pg-heading {
    margin-bottom: 34px;
    text-align: center;
    
    background: url("../img/renewal/program-title-bg.png") center bottom/80% auto no-repeat;
}


.pg-heading h1 {
    margin: 0 0 8px;
    color: var(--tr-green);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 600;
    letter-spacing: .09em;
}

.pg-heading p {
    margin: 0;
    font-size: 18px;
    text-align: center;
}

.pg-hero-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 34px;
    max-width: 900px;
    margin: 0 auto;
}

.pg-definition {
    padding: 30px;
    border: 1px solid var(--tr-border);
    border-radius: 16px;
    background: rgba(255,255,255,.74);
    text-align: center;
}

.pg-definition h2,
.pg-definition h3 {
    margin: 0 0 15px;
    color: var(--tr-green);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
}

.pg-definition h3 small{
    color: var(--tr-green);
    font-weight: 600;
    font-size: 15px;
}

.pg-definition p {
    font-size: 16px;
    line-height: 1.9;
}

.pg-cycle {
    display: block;
    width: min(360px,100%);
    margin: 0 auto;
}

.pg-domains {
    padding: 16px 0 54px;
}

.pg-domain-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.pg-domain {
    padding: 24px;
    border: 1px solid var(--tr-border);
    border-radius: 15px;
    background: rgba(255,255,255,.72);
}

.pg-domain header {
    margin-bottom: 22px;
    text-align: center;
}

.pg-domain h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
}

.pg-domain-sub {
    margin: 3px 0 9px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.pg-domain-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

.pg-domain--green .pg-year h3,
.pg-domain--green h2,
.pg-domain--green .pg-domain-sub,
.pg-domain--green .pg-goal strong { color:#4E8767; }

.pg-domain--orange .pg-year h3,
.pg-domain--orange h2,
.pg-domain--orange .pg-domain-sub,
.pg-domain--orange .pg-goal strong { color:#D86E45; }

.pg-domain--purple .pg-year h3,
.pg-domain--purple h2,
.pg-domain--purple .pg-domain-sub,
.pg-domain--purple .pg-goal strong { color:#685DA8; }

.pg-domain--blue .pg-year h3,
.pg-domain--blue h2,
.pg-domain--blue .pg-domain-sub,
.pg-domain--blue .pg-goal strong { color:#547FAD; }

.pg-years {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.pg-year {
    display: flex;
    flex-direction: column;
}

.pg-year > span {
    align-self: center;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #EEF1E8;
    font-size: 11px;
}

.pg-year h3 {
    min-height: 56px;
    margin: 0 0 8px;
/*    color: var(--tr-green);*/
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
}

.pg-year ul {
    flex: 1;
    margin: 0;
    padding-left: 0px;
}


.pg-year li {
    font-size: 13px;
    position: relative;
    margin-bottom: 5px;
    padding-left: 1.2em;
    line-height: 1.6;
    text-align: left;
}

.pg-year li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}




.pg-year img {
    width: 100%;
    aspect-ratio: 1.25/1;
    margin-top: 12px;
    object-fit: contain;
}

.pg-goal {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

.pg-goal strong {
    margin-right: 10px;
    font-weight: 600;
}

.pg-appi {
    padding-bottom: 46px;
}

.pg-appi-card {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 30px;
    border: 1px solid var(--tr-border);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
}

.pg-appi-card h2 {
    margin: 0 0 12px;
    color: var(--tr-green);
    font-size: 24px;
    font-weight: 600;
}

.pg-appi-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
}

.pg-appi-card img {
    width: 100%;
}

.pg-process {
    padding: 38px 0 58px;
}

.pg-process h2 {
    margin: 0 0 30px;
    color: var(--tr-green);
    font-size: clamp(24px,2.3vw,36px);
    font-weight: 600;
    text-align: center;
}

.pg-process h2 small {
    font-size: 16px;
    font-weight: 600;
}

.pg-process-grid {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 30px;
}

.pg-process-grid article {
    text-align: center;
}

.pg-process-grid h3 {
    margin: 0 0 8px;
    color: var(--tr-green);
    font-size: 15px;
    font-weight: 600;
}

.pg-process-grid p {
    min-height: 70px;
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.4;
}

.pg-process-grid img {
    width: 100%;
/*    aspect-ratio: 1/1;*/
    object-fit: contain;
}

.pg-closing {
    padding: 54px 0 110px;
    background: url("../img/renewal/program-closing-bg.png") center bottom/100% auto no-repeat;
}

.pg-closing h2,
.pg-closing p {
    text-align: center;
}

.pg-closing h2 {
    margin: 0 0 16px;
    color: var(--tr-green);
    font-size: clamp(24px,2.3vw,36px);
    font-weight: 600;
    line-height: 1.6;
}

.pg-closing h2 small{
    font-size: 16px;
    font-weight: 600;
}

.pg-closing p {
    margin: 0;
    font-size: 16px;
    line-height: 2;
}

@media (max-width:1100px) {
    .pg-domain-grid {
        grid-template-columns: 1fr;
    }

    .pg-process-grid {
/*        grid-template-columns: repeat(4,minmax(0,1fr));*/
    }

    .pg-process-grid p {
        font-size: 12px;
    }

}

@media (max-width:767px) {
    .pg-breadcrumb {
        padding: 18px 20px 14px;
    }

    .pg-breadcrumb ol {
        font-size: 12px;
    }

    .pg-heading {
    background: url("../img/renewal/program-title-bg.png") center bottom/100% auto no-repeat;
    }

    .pg-heading h1 {
        font-size: 34px;
    }

    .pg-heading p {
        font-size: 13px;
    }

    .pg-hero-grid,
    .pg-appi-card {
        grid-template-columns: 1fr;
    }

    .pg-appi-card h2 small{font-size: 18px; font-weight: 600;}

    .pg-definition,
    .pg-domain,
    .pg-appi-card {
        padding: 22px 18px;
    }

    .pg-years {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .pg-year {
        display: grid;
/*        grid-template-columns: 1fr 110px;*/
        grid-template-areas:
            "label image"
            "title image"
            "list image";
        gap: 6px 12px;
    }

    .pg-year > span {
        grid-area: label;
        justify-self: start;
        margin: 0;
    }

    .pg-year h3 {
        grid-area: title;
        min-height: auto;
        text-align: left;
    }

    .pg-year ul {
        grid-area: list;
    }

    .pg-year img {
        grid-area: image;
        align-self: end;
        margin: 0;
    }

    .pg-appi-card img {
        width: min(180px,100%);
        margin: 0 auto;
    }

    .pg-process-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 22px 50px;
    }

    .pg-process-grid p {
        min-height: 0;
    }

    .pg-closing {
        padding-bottom: 80px;
        background-size: auto 30%;
    }

    .pg-process-grid .pg-closing h3 {
        line-height: 1.4;
    }
    .pg-process-grid .pg-closing p {
        font-size: 12px;
        line-height: 1.4;
        padding-bottom: 0;
    }
    .pg-closing {
    padding: 54px 0 60px;
    background: url("../img/renewal/program-closing-bg-sp.png") center bottom/100% auto no-repeat;
}


}