@charset "UTF-8";

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

.ar-breadcrumb {
    padding: 150px max(24px, calc((100vw - 1400px) / 2)) 18px;
}
.ar-breadcrumb ol {
    display:flex; flex-wrap:wrap; gap:8px;
    margin:0; padding:0; list-style:none;
    font-size:14px;
}
.ar-breadcrumb li + li::before { margin-right:8px; content:"›"; }
.ar-breadcrumb a { color:inherit; text-decoration:none; }

.ar-hero__inner {
    display:flex; align-items:center;
    min-height:720px;
    padding:10px max(24px, calc((100vw - 1400px) / 2)) 54px;
}
.ar-hero__copy {
    position:relative; z-index:2;
    flex:0 0 600px;
    margin-right:-120px;
}
.ar-hero__copy p.ar-hero__kicker {
    margin:0 0 24px;
    color:var(--tr-green);
    font-size: clamp(26px, 2vw, 38px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;

    text-shadow:
        0 0 10px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 35px rgba(255, 255, 255, 0.95);
}
.ar-hero__copy h1 {
    margin:0 0 28px;
    color:var(--tr-green);

    font-size: clamp(38px, 2.6vw, 50px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;

    text-shadow:
        0 0 10px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 35px rgba(255, 255, 255, 0.95);
}
.ar-hero__copy h1 span{
    font-size: clamp(28px, 2.2vw, 40px);
}

.ar-hero__copy p {
    max-width:620px;
    margin:0 0 18px;
    font-size:18px;
    line-height:2;
}
.ar-hero__visual {
    flex:1 1 auto;
    min-width:0;
    min-height:640px;
    margin-left:-90px;
    background:
      linear-gradient(90deg,var(--tr-background) 0%,rgba(253,251,248,.78) 12%,rgba(253,251,248,.16) 34%,rgba(253,251,248,0) 50%),
      url("../img/renewal/about-hero.png");
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 100%;
}

.ar-beliefs { padding:24px 0 32px; }
.ar-beliefs__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
/*.ar-belief-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    align-items:center;
    gap:18px;
    padding:28px;
    border:1px solid var(--tr-border);
    border-radius:16px;
    background:rgba(255,255,255,.72);
}*/

.ar-belief-card{
    position: relative;
    overflow: hidden;
    padding:40px;
    border:1px solid var(--tr-border);
    border-radius:16px;
    background:#fff;
    min-height:360px;

    text-shadow:
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 35px rgba(255, 255, 255, 0.95);

}

.ar-belief-card img{
    position:absolute;
    right:20px;
    top:5px;
    width:42%;
    max-width:320px;
    opacity:.95;
    pointer-events:none;
}

.ar-belief-card > div{
    position:relative;
    z-index:2;
    width:100%;
}




.ar-belief-card h2 {
    margin:0 0 20px;
    color:var(--tr-green);
    font-size:30px;
    font-weight:500;
}
.ar-belief-card p {
    margin:0 0 16px;
    font-size:16px;
    line-height:1.95;
}
.ar-belief-card img { width:100%; object-fit:contain; }

.ar-values { padding:16px 0 38px; }
.ar-section-title {
    margin:0 0 28px;
    color:var(--tr-green);
    font-size:clamp(28px,2.2vw,36px);
    font-weight:500;
    text-align:center;
}
.ar-values__grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
}
.ar-value-card {
    padding:0 18px;
    border-right:1px solid var(--tr-border);
    text-align:center;
}
.ar-value-card:first-child { border-left:1px solid var(--tr-border); }
.ar-value-card h3 {
    min-height:48px;
    margin:0 0 12px;
    color:var(--tr-green);
    font-size:24px;
    font-weight:600;
}
.ar-value-card img {
    width:100%;
    aspect-ratio:1/.9;
    margin-bottom:14px;
    object-fit:contain;
}
.ar-value-card p {
    margin:0;
    font-size:15px;
    line-height:1.7;
}

.ar-future { padding:18px 0 84px; }
.ar-future__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.ar-future-card,
.ar-organization {
    min-height:260px;
    padding:26px;
    border:1px solid var(--tr-border);
    border-radius:14px;
    background-color:rgba(255,255,255,.72);
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:auto 100%;
}
.ar-future-card--land { background-image:url("../img/renewal/about-future-land.png"); background-size:auto 85%;}
.ar-future-card--life { background-image:url("../img/renewal/about-future-life.png"); background-size:auto 80%;}
.ar-future-card--children { background-image:url("../img/renewal/about-future-children.png"); background-size:auto 65%;}
.ar-future-card h2 ,
.ar-organization h2 {
    max-width:100%;
    margin:0 0 15px;
    color:var(--tr-green);
    font-size:26px;
    font-weight:500;
}
.ar-future-card p {
    max-width:100%;
    margin:0 0 12px;
    font-size:16px;
    line-height:1.85;
    text-shadow:
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 35px rgba(255, 255, 255, 0.95);
}
.ar-organization {
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    align-items:center;
    gap:18px;
    background-image:url("../img/renewal/about-organization.png"); background-size:auto 50%;
    text-shadow:
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 20px #FFFFFF,
        0 0 35px rgba(255, 255, 255, 0.95);
}
.ar-organization p { margin:0 0 8px; font-size:16px; line-height: 1.85;}
.ar-organization img { width:160%; }

@media (max-width:900px) {
    .ar-hero__copy { flex-basis:500px; }
    .ar-beliefs__grid,
    .ar-future__grid { grid-template-columns:1fr; }
    .ar-values__grid { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px; }
}

@media (max-width:767px) {
    .ar-breadcrumb { padding:18px 20px 14px; }
    .ar-breadcrumb ol { font-size:12px; }

    .ar-hero__inner {
        display:block;
        min-height:auto;
        padding:12px 20px 44px;
    }
    .ar-hero__copy {
        width:100%;
        margin-right:0;
    }
    .ar-hero__copy p.ar-hero__kicker {
        font-size: clamp(20px, 20vw, 26px);
        line-height: 1.5;
    }
    .ar-hero__copy h1 {
        font-size: clamp(30px, 5vw, 38px);
        line-height: 1.5;
   }
    .ar-hero__copy h1 span{
        font-size: clamp(28px, 4vw, 34px);
        line-height: 1.5;
   }
    .ar-hero__copy p { font-size:16px; line-height: 1.8;}
    .ar-hero__visual {
        min-height:63vw;
        margin-top:-20px;
        margin-left:0;
        background-image:url("../img/renewal/about-hero.png");
        background-position:center top;
        background-size:100% auto;
    }

    .ar-belief-card {
        display:block;
        padding:22px 18px;
    }
    .ar-belief-card h2 { font-size:28px;  margin-bottom: 180px;}
    .ar-belief-card img {
        width:min(400px,90%);
        margin:18px auto 0;
    }

    

    .ar-values__grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px 0;
    }
    .ar-value-card {
        padding:0 12px;
        border-right:1px solid var(--tr-border);
    }
    .ar-value-card:nth-child(even) { border-right:0; }
    .ar-value-card:first-child { border-left:0; }
    .ar-value-card:last-child {
        grid-column:1/-1;
        width:min(220px,100%);
        justify-self:center;
        border:0;
    }
    .ar-value-card h3 { min-height:auto; font-size:20px; font-weight: 600; }
    .ar-value-card p { font-size:15px; line-height: 1.7;}

    .ar-future-card,
    .ar-organization {
        min-height:300px;
        padding:22px 18px 110px 18px;
        background-position:center bottom;
        background-size:100% auto;
    }
    .ar-future-card h2,
    .ar-future-card p { max-width:100%; }
    .ar-future-card h2 { font-size:21px; font-weight: 600; }

    .ar-organization {
        display:block;
        min-height:auto;
    }
    .ar-organization img {
        width:min(300px,100%);
        margin:20px auto 0;
    }
}