@charset "UTF-8";



/* =========================================

   1. VARIABLES & RESET

   ========================================= */

:root {

    /* Colors */

    --color-primary: #1f328c;

    --color-secondary: #004ea2;

    --color-text: #383131;

    --color-text-dark: #231815;

    --color-text-nav: #120d69;

    --color-highlight: #e71a19;

    --color-badge: #fa0202;

    --color-bg-page: #ffffff;

    --color-bg-card: #eae6ca;

    --color-bg-btn: #f4f3f3;

}



*,

*:after,

*:before {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}







ul {

    list-style: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* =========================================

   2. UTILITIES & LAYOUT

   ========================================= */

.site-wrapper {

    background: url(../images/5.png) no-repeat center top;

    background-size: cover;

    padding: 31px 0 0;

}



.container {

    width: var(--container-width);

    margin: 0 auto;

    position: relative;

}



.text-highlight {

    color: var(--color-highlight);

    font-size: 30px;

}



.link-underline {

    text-decoration: underline;

}







/* =========================================

   4. MAIN CONTENT - ABOUT

   ========================================= */

.about {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.about_btn_bnr_long_txt a{width: fit-content;}



.about__heading {

    margin-bottom: 50px;

    text-align: center;



}



.about__title-en {

    margin-bottom: 0px;

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 150px;

    font-weight: 900;

    line-height: 1;

}



.about__title-ja {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 30px;

    font-weight: 900;

}



.about__visuals {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin-top: 77px;

}



.about__collage {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

}



.about__collage-top {

    display: flex;

    align-items: flex-end;

    gap: 10px;

}



.about__collage-group {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.about__img-overlap {

    margin-top: -29px;

    z-index: 2;

}



.about__description {

    margin-top: 36px;

    text-align: center;

    font-weight: 900;

    line-height: 60px;

}

.about__description--mb{margin-bottom: 80px}



/* Cards (JSACA / Members) */

.about__cards {

    display: flex;

    justify-content: space-between;

    width: 981px;

    margin-top: 79px;

}



.feature-card {

    width: 461px;

}



.feature-card__header {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-bottom: 7px;

}



.feature-card__title {

    font-family: var(--font-traditional);

    font-size: 24px;

}



.feature-card__body {

    position: relative;

    height: 268px;

    border-radius: 15px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding-bottom: 10px;

}



.feature-card__body--members {

    background: var(--color-bg-card);

    height: 230px;

}



.feature-card__bg {

    position: absolute;

    top: 0px;

    left: 0;

    width: 100%;

    border-radius: 15px;

    z-index: 1;

}



.feature-card__images {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    z-index: 2;

}



.feature-card__images img:nth-child(2) {

    margin-top: 25px;



}



.member-logos {

    position: absolute;

    top: 60px;

    display: flex;

    justify-content: center;

    width: 100%;

}



.member-logos img {

    margin: 0 -30px;

}





.btn-action {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--color-bg-btn);

    border-radius: 30px;

    padding: 10px 14px 10px 23px;

    width: 289px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}



.feature-card__body--members .btn-action {

    width: 260px;

    margin-bottom: -38px;

}



.btn-action--align-left {

    margin-top: 36px;

}



.btn-action__text {

    color: var(--color-text-dark);

    font-family: var(--font-gothic);

    font-size: 18px;

    font-weight: bold;

}



.btn-action__icon {

    width: 40px;

    height: 40px;

    background: var(--color-secondary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: var(--font-mincho);

    font-size: 24px;

}



/* =========================================

   5. MAIN CONTENT 

   ========================================= */

.overview .container {

    margin-top: 34px;

    background: var(--color-bg-card);

    border: 1px solid #d9d9d9;

    border-radius: 15.5px;

    padding: 49px 58px;

}

.about_overview{padding-top: 0}
.about_overview .container{margin-top: 0}



.overview__title {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 150px;

    font-weight: 900;

    line-height: 1;

}





.overview__table {

    margin-top: 69px;

    border-top: 3px solid #000;

    border-bottom: 3px solid #000;

}



.overview__row {

    display: grid;

    grid-template-columns: 200px 1fr;

    border-bottom: 3px solid #000;

    padding: 15px 0;

}



.overview__row:last-child {

    border-bottom: none;

}



.overview__th {

    font-weight: bold;

    text-align: center;

}



.overview__td {

    font-weight: 500;

}



.overview__image {

    margin-top: 60px;

}



.overview__map {

    margin-top: 60px;

}

/* =========================================

   6. MAIN CONTENT - ACTIVITIES

   ========================================= */

.activities {

    display: flex;

    flex-direction: column;

    gap: 60px;

}

.activities_pdb0{padding-bottom: 0}



.badge {

    display: inline-block;

    background: var(--color-badge);

    color: #fff;

    border-radius: 15px;

    padding: 0 22px;

    font-size: 16px;

    font-weight: 500;

    line-height: 33px;

    height: 33px;

}



.activity-item__title {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 80px;

    font-weight: 900;

    margin-top: -11px;

}



.activity-item__content {

    display: flex;

    align-items: flex-start;

    gap: 40px;

    margin-top: 28px;

}

.activity-item__content-gap{gap: 100px}



.activity-item__desc {

    flex: 1;

    font-weight: 500;

    line-height: 48px;

}



.width-content {

    width: 75%;

}



.activity-item__images {

    display: flex;

    gap: 20px;

}





/* =========================================

   7. MAIN CONTENT - DISCLOSURE BANNER

   ========================================= */

.disclosure-banner {

    margin-bottom: 130px;

    position: relative;

}

.about-disclosure-banner{margin-bottom: 34px}

.disclosure-banner .s02_frame_ttl{font-size: 80px;margin-bottom: 50px}
.disclosure-banner .s02_frame_btn a{width: 295px}
.disclosure-banner .s02_frame{padding: 45px 48px 36px}
.disclosure-banner .s02_frame .s02_frame_img{bottom: -46px}

.disclosure-banner__content {

    background: var(--color-bg-card);

    border: 1px solid #d9d9d9;

    border-radius: 15.5px;

    padding: 52px 61px;

    height: 364px;

    margin-top: 62px;

    width: 100%;

}



.disclosure-banner__title {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 80px;

    font-weight: 900;

}



.disclosure-banner__text {

    margin-top: 30px;

    font-size: 18px;

    font-weight: 500;

}



.disclosure-banner__character {

    position: absolute;

    top: 0;

    right: 150px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.disclosure-banner__speech {

    background: url(../images/441_2.png) no-repeat center;

    background-size: contain;

    width: 201px;

    padding: 40px 10px 50px 20px;

    color: var(--color-primary);

    font-family: var(--font-traditional);

    line-height: 30px;

}







/* =========================================

   10. PAGE: DISCLOSURE (disc.html)

   ========================================= */

section.page-disclosure {

    padding-bottom: 75px;

}

.document_sec{padding-top: 0;padding-bottom: 100px}
.document_sec .document-grid{margin-top: 0}
.document_sec .document-grid .btn a{justify-content: flex-start;}
.document_sec .document-grid .btn{margin-bottom: 0}



.page-header {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.page-header__en {

    margin-bottom: 0px;

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 150px;

    font-weight: 900;

    line-height: 1;

}



.page-header__ja {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 30px;

    font-weight: 900;

    margin-top: 2px;

}





.disclosure-content {

    margin: 72px auto 0;

    width: 916px;

}

.disclosure-content.disclosure-content_mt0{margin-top: 0}


.disclosure-content__intro {

    font-size: 20px;
    font-weight: 400;

}





.document-grid {

    display: grid;

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

    column-gap: 104px;

    row-gap: 30px;

    margin-top: 75px;

}





.btn-document {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--color-bg-btn);

    border-radius: 30px;

    padding: 10px 16px 10px 23px;

    min-height: 60px;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.btn-document:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.btn-document__text {

    color: var(--color-text-dark);

    font-family: var(--font-gothic);

    font-weight: bold;

    font-size: 18px;

    line-height: 1.4;

}



.btn-document__icon {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    background: var(--color-secondary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: var(--font-mincho);

    font-size: 24px;

    margin-left: 10px;

}





/* =========================================

   11. PAGE: PRIVACY POLICY (privacy.html)

   ========================================= */







.privacy-content {

    margin-top: 21px;

}



.font__ja {

    font-size: 95px;

}



.privacy-content__intro {

    font-size: 20px;

    font-weight: 500;

    line-height: 2.4;

}





.privacy-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 38px;

}



.privacy-item__title {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 38px;

    font-weight: 900;

}



.privacy-item__text {

    font-size: 20px;

    font-weight: 500;

    line-height: 2.4;

    margin-top: 13px;

}



.privacy-content__date {

    font-size: 20px;

    font-weight: 500;

    line-height: 2.4;

    margin-top: 67px;

}



/* =========================================

   12. PAGE: MEMBER LIST (member.html)

   ========================================= */

.page-member {



    padding-bottom: 52px;

}





.member-filter {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 67px;

}



.member-filter__index {

    display: flex;

    gap: 5px;

}



.filter-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    min-width: 60px;

    height: 60px;

    border-radius: 30px;

    background: var(--color-bg-btn);

    color: var(--color-text-dark);

    font-family: var(--font-gothic);

    font-size: 18px;

    font-weight: bold;

    padding: 0 15px;

    transition: background 0.3s, color 0.3s;

}



.filter-btn--active,

.filter-btn:hover {

    background: var(--color-primary);

    color: #fff;

}



.member-filter__dropdown {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 355px;

    height: 60px;

    background: var(--color-bg-btn);

    border-radius: 15px;

    padding: 0 18px;

    font-family: var(--font-gothic);

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;

}

.member-filter__dropdown--container {
    position: relative;
}

.member-filter__dropdown:hover {
    background: var(--mcolor);
    color: #fff
}

.dropdown-list {
    background: #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%
}

.dropdown-item {
    padding: 5px 18px;
    font-size: 18px;
    transition: .3s
}

.dropdown-item a {
    display: block;
}

.dropdown-item:hover {
    background: var(--mcolor);
}

.dropdown-item:hover a {
    color: #fff
}

/* 12.2 Member Cards */

.member-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 49px;

    margin-bottom: 45px;

}



.member-card {

    background: var(--color-bg-card);

    border: 1px solid #d9d9d9;

    border-radius: 15.5px;

    padding: 48px 58px;

}



.member-card__header {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 35px;

}



.member-card__title {

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 30px;

    font-weight: 900;

}



.btn-homepage {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 127px;

    height: 36px;

    background: var(--color-bg-btn);

    border-radius: 15px;

    font-family: var(--font-heading);

    font-size: 16px;

    font-weight: 500;

    transition: background 0.2s;
    padding-bottom: 1px;

}



.btn-homepage:hover {

    background: #e0dede;

}



.info-grid {

    border-top: 3px solid #000;

    border-bottom: 3px solid #000;

}



.info-grid__row {

    display: grid;

    grid-template-columns: 135px 1fr;

    border-bottom: 3px solid #000;

    padding: 10px 0;

}

.info-grid__row dt,
.info-grid__row dd{font-size: 19px}



.info-grid__row:last-child {

    border-bottom: none;

}



.info-grid__row dt {

    font-weight: bold;

    line-height: 1.6;

}



.info-grid__row dd {

    font-weight: 500;

    line-height: 1.6;

}



/* 12.4 Pagination */

.pagination {

    display: flex;

    justify-content: center;

    gap: 5px;

    margin-top: 45px;

}



.pagination__btn {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--color-bg-btn);

    color: var(--color-text-dark);

    font-family: var(--font-gothic);

    font-size: 18px;

    font-weight: bold;

    transition: background 0.3s, color 0.3s;

}



.pagination__btn--active,

.pagination__btn:hover {

    background: var(--color-primary);

    color: #fff;

}

@media screen and (min-width: 1101px) {
    .overview__td_line-height{line-height: 2.2em}
    .activity-item__images01{margin-right: 80px}
}
@media screen and (max-width: 1100px) {
    .container {
        width: 100%;
    }

    .about__title-en,
    .page-header__en {
        font-size: 50px
    }

    .about__title-ja,
    .page-header__ja {
        font-size: 15px
    }

    .about__description {
        line-height: 2.2em;
    }

    .text-highlight {
        font-size: 120%
    }

    .overview {
        padding: 0 10px
    }

    .overview__title {
        font-size: 50px
    }

    .overview .container {
        padding: 20px
    }

    .overview__table {
        margin-top: 30px
    }

    .overview__row {
        grid-template-columns: 70px 1fr
    }

    .overview__map {
        margin-top: 20px;
    }

    .overview__map {
        width: 100%;
        height: 200px
    }

    .overview__map iframe {
        height: 100%;
        width: 100%
    }

    .activity-item__title {
        font-size: 24px;
        margin-top: 5px;
    }

    .badge {
        font-size: 12px;
        height: 30px;
        line-height: 30px
    }

    .activity-item__content {
        flex-direction: column;
        gap: 20px;
    }

    .activity-item__desc {
        margin-bottom: 0
    }

    .activity-item__images {
        justify-content: center;
        align-self: center;
    }

    .activity-item__images img {
        width: calc(50% - 10px)
    }

    .activity-item__content.width-content {
        width: 100%
    }

    .disclosure-banner .s02_frame_ttl {
        font-size: 24px;
        margin-bottom: 30px
    }

    .disclosure-banner .s02_frame{padding: 20px}
    .disclosure-banner .s02_frame .s02_frame_img{bottom: -16px}

    .disclosure-banner .s02_frame_btn a {
        width: 192px
    }

    .disclosure-banner {
        margin-bottom: 45px;
        padding-top: 0;
    }

    .disclosure-content__intro {
        font-size: 14px
    }

    .document-grid {        
        grid-gap: 13px;
        width: 100%;
        margin: 35px auto 0
    }

    .disclosure-content {
        width: 100%;
        max-width: 916px;
        margin-top: 35px
    }

    .document-grid .btn a {
        height: 60px;
        border-radius: 50px;
        justify-content: flex-start;
        padding-right: 40px;
        font-weight: 700;
    }

    section.page-disclosure {
        padding-bottom: 50px
    }

    .page-privacy .font__ja {
        font-size: 45px
    }

    .privacy-content__intro {
        font-size: 14px
    }

    .privacy-content {
        margin-top: 30px
    }

    .privacy-list {
        margin-top: 18px;
        gap: 15px
    }

    .privacy-item__title {
        font-size: 24px
    }

    .privacy-item__text {
        font-size: 14px;
        margin-top: 10px
    }

    .privacy-content__date {
        font-size: 14px;
        margin-top: 30px;
        margin-top: 15px
    }

    .member-filter__index {
        flex-wrap: wrap;
    }

    .member-filter {
        flex-direction: column;
        margin-top: 30px;
        gap: 20px
    }

    .filter-btn {
        height: 30px;
        min-width: 30px;
        font-size: 14px
    }

    .member-filter__dropdown {
        width: 280px;
        max-width: 100%;
        height: 46px;
        font-size: 14px;
        border-radius: 7px
    }

    .member-filter__dropdown--container {
        align-self: flex-end;
    }

    .member-list {
        margin-top: 30px;
        margin-bottom: 30px
    }

    .member-card {
        padding: 20px
    }

    .member-card__title {
        font-size: 20px
    }

    .member-card__header {
        flex-wrap: wrap;
    }

    .btn-homepage {
        width: 120px;
        height: 30px;
        font-size: 14px
    }

    .dropdown-item {
        font-size: 14px
    }

    .document_sec{padding-bottom: 60px}

    .about_btn_bnr_long_txt a{width: 185px}
    .activity-item__desc{line-height: 2em}
    .info-grid__row dt, .info-grid__row dd{font-size: 14px}
    .info-grid__row{grid-template-columns: 75px 1fr}
    .about__description--mb{margin-bottom: 40px}
    .activity-item{margin-bottom: 40px}

}

@media screen and (max-width: 640px) {
    .document-grid{grid-template-columns: repeat(1, 1fr);max-width: 268px;}
}
@media screen and (max-width: 479px) {
    .member-filter__dropdown {
        width: 235px
    }
    .page-privacy .font__ja {
        font-size: 27px
    }
}
@media screen and (max-width: 320px) {
    .disclosure-banner .s02_frame{padding: 15px 10px;}
    .disclosure-banner .s02_frame_txt {margin-bottom: 10px}
    .disclosure-banner .s02_frame .s02_frame_img{bottom: -7px}
    .text-highlight{font-size: 112%}
    .member-card__header{gap: 10px}
    .btn-homepage{width: 110px;height: 26px;font-size: 13px}
    .member-card__title{font-size: 17px}
    .info-grid__row dd .num{display: block;}
    .none320{display: none;}
    .block320{display: block;}
}