@charset "utf-8";
.mv {
    display: flex;
    align-items: center;
    height: 45vw;
    min-height: 550px;
    max-height: 980px;
    position: relative;
}
.mv:after{
    content: "";
    display: block;
    width: 60%;
    height: 100%;
    background: url("../img/purpose.webp") center / cover no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.mv-wrap{
    position: relative;
    z-index: 1;
}
.mv-name{
    display: flex;
    flex-direction: column;
    width: 80%;
    font-size: clamp(21px, 9vw, 90px);
    margin-bottom: 0.5em;
}
.mv-name span{
    display: block;
    font-size: clamp(30px, 5.5vw, 120px);
    line-height: 1;
    color: var(--blue80);
    margin-bottom: 0.4em;
    order: 0;
}
.mv-catch,
.mv-h3{
    font-size: clamp(21px, 2vw, 48px);
}
.mv-catch{
    width: 16.5em;
}
.mv-h3{
    text-indent: -0.1em;
}
.mv-p{
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.6;
}
@media screen and (max-width: 1280px) {
    .mv-catch{
        width: 15.5em;
    }
    .mv-p br{
        display: none;
    }
}
@media screen and (max-width: 980px) {
     .mv {
        display: block;
        align-items: inherit;
        height: auto;
        min-height: auto;
    }
    .mv-wrap {
        width: 100%;
    }
    .mv:after{
        display: none;
    }
    .mv-name{
        width: 100%;
        height: 90vw;
        position: relative;
        padding: 1em 0.5em 0;
    }
    .mv-name:after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url("../img/purpose.webp") center right / cover no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
    }
    .mv-name_inner{
        position: relative;
        z-index: 1;
    }
    .mv-catch{
        width: 90%;
        margin: 1em auto;
    }
}

/*HOME ABOUT*/
.home-about_wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.home-about_h4{
    font-size: clamp(21px, 2vw, 28px);
}
.home-about_item{
    width: 48%;
}
.home-about_img{
    overflow: hidden;
}
.home-about_img img{
    object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
.home-about_p{
    padding: 1em 0;
    margin-bottom: 0;
}
@media screen and (max-width: 880px) {
    .home-about_item{
        width: 100%;
        margin-bottom: 3em;
    }
}
@media screen and (max-width: 480px) {
    .home-about{
        margin-bottom: 3em !important;
    }
}

/*HOME INFORMATION*/
@media screen and (max-width: 980px) {
    .home-information_archives{
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }
}

/*PAGE*/
.page-lead{
    display: grid;
    grid-template-columns: 48% 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
}
.page-lead_inner{
    grid-column: 1 / -1; 
    grid-row: 1; 
    background: var(--back);
    padding: 3em;
}
.page-lead_p{
    max-width: 45%;
}
.page-lead_img{
    grid-column: 2;
    grid-row: 1 / 3; 
    z-index: 2;  
    padding: 3em 3em 0 0;
    min-width: 0;
    min-height: 0; 
}
.page-lead_img .page-lead_swiper{
    width:100%;
    padding-bottom: 2.5em;
}
.page-lead_swiper .swiper-slide{
    width:auto;
    position: relative;
}
.page-lead_swiper .swiper-slide img{
    object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
.page-lead_swiper.is-fade .swiper-slide{
    width:100% !important;
}
@media screen and (max-width: 1280px) {
    .page-lead_img{
        grid-row: 1 / 2; 
    }
    .page-information_archives{
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        margin-top: 0 !important;
    }
}
@media screen and (max-width: 980px) {
    .page-lead_inner,
    .page-lead_img{
        padding: 1em;
    }
    .page-lead_img img{
        object-fit: cover;
        aspect-ratio: 1.3 / 1;
    }
}
@media screen and (max-width: 780px) {
    .page-lead{
        display: block;
    }
    .page-lead_inner{
        padding: 2em;
    }
    .page-lead_p{
        width: 100%;
        max-width: 100%;
    }
    .page-lead_img{
        width: 100%;
        padding: 0;
    }
    .page-lead_img img{
        object-fit: cover;
        aspect-ratio: 1.618 / 1;
    }
    .page-information_archives{
        margin-top: 2em !important;
    }
}

/*ABOUT*/
.about-nav .btn{
    width: 10em;
    padding: 0.4em;
}
.about-nav .btn.active{
    background: var(--back);
    color: var(--dgray);
    border: 1px solid var(--dgray);
    pointer-events: none;
}
.about-nav .btn.active:after {
    right: 5px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
}

/*FOUNDATION*/
.foundation{
    display: flex;
    justify-content: space-between;
    gap:5em;
}
.chairman-nav{
    width: 12em;
}
.chairman-nav a{
    display: block;
    padding: 1em 0;
    color: var(--black);
    border-bottom: 1px solid var(--blue);
}
.chairman-nav a.current{
    color: var(--blue);
}
.foundation-main{
    flex: 1;
}
.foundation-profile{
    display: grid;
    grid-template-columns: 250px 1fr;
    gap:3em;
}
.foundation-img{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}
.foundation-h3{
    font-size: clamp(21px, 2.3vw, 28px);
    line-height: 1;
    display: none;
}
.foundation-name{
    font-size: clamp(18px, 2.1vw, 24px);
    letter-spacing: 0.2em;
    padding: 1em;

    background: var(--back);
    line-height: 1;
}
.foundation-name small{
    padding-right: 0.2em;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 0.2em;
}
.foundation-h4{
    font-size: clamp(21px, 3vw, 24px);
    display: flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.5em;
    margin-bottom: 1em;
}
.foundation-h4:after {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: var(--dgray);
}
.foundation-message,
.foundation-ul{
    padding-left: 5em;
}
.foundation-message p{
    line-height: 2;
    margin-bottom: 2em;
}
.foundation-li{
    display: grid;
    grid-template-columns: 14em 1fr;
    align-items: center;
    padding: 0.8em 0;
}
.foundation-year small{
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--dgray);
}
.foundation-year small:before{
    content: "（";
}
.foundation-year small:after{
    content: "）";
}
.foundation-detail{
    line-height: 1.6;
}
@media screen and (max-width: 1280px) {

    .foundation-img{
        grid-row: 1 / 2;
    }
    .foundation-message,
    .foundation-history{
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .foundation-honors{
        grid-column: 1 / 3;
        grid-row: 3;
    }
}
@media screen and (max-width: 980px) {
    .foundation{
        gap:2em;
    }
    .chairman-nav {
        width: 10em;
    }
    .foundation-profile{
        gap:3em 2em;
    }
    .foundation-message,
    .foundation-ul{
        padding-left: 0;
    }
}
@media screen and (max-width: 780px) {
    .foundation-meta{
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .foundation-img{
        grid-column: 1 / 3;
        grid-row: 2;
        display: flex;
        justify-content: center;
    }
    .foundation-message,
    .foundation-history{
        grid-row: 3;
    }
    .foundation-honors{
        grid-row: 4;
    }
    .foundation-name {
        margin-top: 0.5em;
    }
}
@media screen and (max-width: 680px) {
    .foundation {
        display: block;
    }
    .chairman-nav{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
        gap: 0.5em;
        margin-bottom: 1em;
    }
    .chairman-nav a {
        padding: 0.7em 0.2em;
        border: 1px solid var(--blue);
        background: var(--back);
        text-align: center;
    }
    .chairman-nav a.current{
        background: var(--blue);
        color: #fff;
    }
    .foundation-li {
        grid-template-columns: 8em 1fr;
    }
    .foundation-year small{
        display: block;
    }
    .foundation-year small:before,
    .foundation-year small:after{
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .foundation-profile{
        gap:2em;
    }
    .foundation-li {
        grid-template-columns: 1fr;
    }
    .foundation-year{
        background: var(--back);
        padding: 0.2em 0.5em;
    }
    .foundation-year small{
        display: inline-block;
    }
    .foundation-year small:before,
    .foundation-year small:after{
        display: inline-block;
    }
    .foundation-detail{
        padding: 0.5em 0 0 0.5em;
    }
}


/*OFFICER*/
.officers-ul{
    padding-left: 5em;
}
.officers-ul li{
    display: grid;
    grid-template-columns: 10em 8em 1fr;
    align-items: center;
    padding: 1em 0;
}
.officers-pos{
    grid-column: 1 / 2;
    text-align: right;
    padding-right: 1em;
}
.officers-name{
    grid-column: 2 / 3;
}
.officers-belongs{
    grid-column: 3 / 4;
    background: var(--back);
    padding: 1em;
}
.officers-belong{
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--dgray);
}
.about-chart_item{
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}
.about-chart_item span{
    width: 32%;
    padding: 1em 0.5em;
    margin: 1em 0;
    background: var(--back);
    text-align: center;
    line-height: 1.3;
    font-size: clamp(12px, 1.2vw, 16px);
    position: relative;
    border: 1px solid var(--dgray);
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-chart_item:first-child{
    justify-content: center;
    margin-bottom: 2em;
}
.about-org .about-chart_03:before,
.about-org .about-chart_item:nth-child(2):after,
.about-chart_item:nth-child(2):before,
.about-chart_01:after,
.about-chart_02:after,
.about-chart_02:before{
    content: "";
    display: block;
    width: 1px;
    height: 3em;
    background: var(--dgray);
    position: absolute;
    bottom: -2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    font-size: clamp(12px, 1.2vw, 16px);
}
.about-chart_01:after{
    bottom: -2.2em;
}
.about-chart_02:before{
    bottom: inherit;
    top: -2.1em;
    height: 2em;
}
.about-chart_item:nth-child(2):before{
    width: 68.3%;
    height: 1px;
    top: -1em;
    font-size: clamp(12px, 1.2vw, 16px);
}
.about-chart_03 br,
.about-chart_02 br:nth-of-type(2){
    display: none;
}
.about-org .about-chart_02:first-child:after,
.about-org .about-chart_02:last-child:after{
    display: none;
}
.about-org .about-chart_item:nth-child(2){
    margin-bottom: 2em;
}
.about-org .about-chart_item:nth-child(2):after{
    width: 51%;
    height: 1px;
    bottom: -1em;
}
.about-org .about-chart_03{
    width: 49%;
}
.about-org .about-chart_03:before{
    bottom: inherit;
    top: -2.1em;
}
.about-officer_details{
    padding-left: 10em;
}
.about-officer_h5{
    font-size: clamp(16px, 1.4vw, 21px);
    border-bottom: 1px solid var(--dgray);
    margin-bottom: 1em;
}
.about-officer_h5:before{
    content: "◆";
    color: var(--blue);
    padding-right: 0.2em;
}
.about-officer_detail{
    margin-bottom: 3em;
    padding-left: 2em;
}
.about-cosme_ol {
  padding-left: 2.2em;
}
.about-cosme_ol li{
    line-height: 1.6;
    padding: 0.5em 0;
}
.about-cosme_ol li::marker {
  content: "(" counter(list-item) ") ";
}
.about-cosme_table--wrap{
    overflow-x: auto;
}
.about-cosme_table{
    width: 100%;
    min-width: 940px;
    border-collapse: separate;
    table-layout: fixed;
    border-spacing: 0;
    border-bottom: 1px solid var(--dgray);
}
.about-cosme_table th,
.about-cosme_table td{
    border-right: 1px solid var(--dgray);
    border-top: 1px solid var(--dgray);
    font-size: clamp(11px, 1vw, 13px);
    word-break: break-word;
    line-height: 1.2;
    padding: 0.5em 0.2em;
    text-align: center;
}
.about-cosme_table th{
    background: var(--sky);
}
.about-cosme_table th small{
    display: block;
    font-size: clamp(10px, 1vw, 11px);
}
.about-cosme_table tr:nth-child(even){
    background: var(--back);
}
.about-cosme_th30{
    width: 30px;
}
.about-cosme_th45{
    width: 45px;
}
.about-cosme_th5,
.about-cosme_th3{
    width: auto;
}
.about-cosme_sticky01,
.about-cosme_table td:first-child{
    position: sticky;
    z-index: 4;
    left: 0;
    background: #fff;
    border-left: 1px solid var(--dgray);
}
.about-cosme_sticky02,
.about-cosme_table td:nth-child(2){
    position: sticky;
    z-index: 5;
    left: 30px;
    background: #fff;
    border-right: 1px solid var(--dgray);
}
.about-cosme_table tr:nth-child(even) td:first-child,
.about-cosme_table tr:nth-child(even) td:nth-child(2){
    background: var(--back);
}
.about-cosme_table tr:last-child td{
    border-top: 3px double var(--black);
    font-weight: 500;
}
@media screen and (max-width: 1380px) {
    .about-cosme_th5{
        width: 5.5em;
    }
}
@media screen and (max-width: 880px) {
    .officers-ul{
        padding-left: 1em;
    }
    .about-chart_01:after {
        bottom: -2.3em;
    }
    .about-org .about-chart_03:before{
        top: -2.4em;
    }
    .about-officer_details{
        padding-left: 0;
    }
}
@media screen and (max-width: 680px) {
    .officers-ul li{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px dotted #666;
    }
    .officers-pos{
        width: auto;
        text-align: left;
    }
    .officers-name{
        flex: 1;
    }
    .officers-belongs{
        width: 100%;
    }
    .officers-belong{
        padding: 0.4em 0 0.4em 1.2em;
        text-indent: -1.4em;
        line-height: 1.3;
    }
    .officers-belong:before{
        content: "・";
    }
    .about-chart_03 br,
    .about-chart_02 br:nth-of-type(2){
        display: block;
    }
    .about-chart_01{
        width: 50% !important;
    }
    .about-officer_detail{
        padding-left: 0;
    }
}


/*DOCUMENT*/
.about-document_h4 small,
.about-document_h4 b{
    font-size: clamp(16px, 1.4vw, 21px);
}
.about-wrap{
    padding-left: 10em;
    margin-bottom: 5em;
}
.about-wrap p{
    line-height: 1.4;
}
.about-wrap p b{
    display: block;
    font-weight: 700;
}
.about-wrap p br{
    display: none;
}
.about-ul li{
    margin: 0.5em 0;
    padding-left: 1em;
    text-indent: -1em;
}
.about-ul li:before{
    content: "●";
    color: var(--blue);
    font-size: 80%;
    vertical-align: 0.2em;
    padding-right: 0.2em;
}
.about-document_wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    padding-left: 10em;
}
.about-document_h5{
    background: var(--back);
    padding: 0.5em 1em;
    margin-bottom: 1em;
}
.about-document_h5:before{
    content: "●";
    color: var(--blue);
    padding-right: 0.2em;
    vertical-align: 0.2em;
    font-size: 80%;
}
.about-document_ul{
    padding-left: 2em;
}
.about-document_pdf{
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0;
    line-height: 1.4;
}
.about-document_pdf:hover{
    color: var(--blue);
    text-decoration: underline;
}
.about-document_pdf[href$=".pdf"]:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.5em;
    background: url(../img/pdf.svg) center / contain no-repeat;
}
@media screen and (max-width: 880px) {
    .about-wrap{
        padding-left: 5em !important;
    }
}
@media screen and (max-width: 780px) {
    .about-document_wrap{
        padding-left: 1.2em;
    }
    .about-document_ul {
        padding-left: 1em;
    }
}
@media screen and (max-width: 680px) {
    .about-wrap{
        padding-left: 0 !important;
    }
}
@media screen and (max-width: 580px) {
    .about-document_wrap {
        grid-template-columns: 1fr;
    }
    .about-document_h4 b{
        display: block;
    }
    .about-document_h4:after{
        display: none;
    }
    .about-wrap p br{
        display: block;
    }
}





/*GRANTS*/
.grants-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
.grants-list_item{
    text-align: center;
    border: 1px solid var(--black);
    border-top: 5px solid var(--blue);
}
.grants-list_h5{
    font-size: clamp(16px, 1.4vw, 18px);
    margin-top: 2em;
    line-height: 1.3;
}
.grants-list_h5 br{
    display: none;
}
.grants-begin{
    color: var(--red);
    font-weight: 500;
    font-size: clamp(11px, 1.2vw, 16px);
    display: inline-block;
    line-height: 1.2;
}
.grants-before{
    color: var(--dgray);
    font-size: clamp(12px, 1.2vw, 16px);
}
.grants-list_item .btn-wrap{
    margin: 1em auto;
}
.grants-list_item .btn.begin{
    background: var(--red);
    border: 1px solid var(--red);
}
.grants-list_item .btn.begin:hover{
    background: #fff;
    color: var(--red);
}
.grants-list_img img{
    object-fit: cover;
    aspect-ratio: 2 / 1;
}
.grants-sports{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.grants-sports_h5{
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.3;
}
.grants-sports_img{
    width: 45%;
    margin-right: 2em;
}
.grants-sports_img img{
    object-fit: cover;
    aspect-ratio: 2 / 1;
}
.grants-sports_text{
    flex: 1;
}
@media screen and (max-width: 1380px) {
    .grants-list_h5 br{
        display: block;
    }
}
@media screen and (max-width: 1180px) {
    .grants-list{
        grid-template-columns: repeat(2, 1fr);
    }
    .grants-list_h5 br{
        display: none;
    }
}
@media screen and (max-width: 980px) {
    .grants-sports{
        align-items: flex-start;
    }
    .grants-sports_img img{
        aspect-ratio: 1.618 / 1;
    }
}
@media screen and (max-width: 680px) {
    .grants-list_h5 br{
        display: block;
    }
    .grants-sports_img{
        width: 100%;
        margin: 1em 0 0;
        order: 1;
    }
    .grants-sports_img img{
        aspect-ratio: 2 / 1;
    }
}
@media screen and (max-width: 580px) {
    .grants-list{
        grid-template-columns: repeat(1, 1fr);
    }
    .grants-list_h5 br{
        display: none;
    }
}


/*GRANTS ARCHIVE*/
.cosme-archive_list{
    max-width: 1380px;
    margin: 0 0 0 auto;
}
.cosme-archive_item{
    display: grid;
    grid-template-columns: 55% 1fr;
    align-items: flex-start;
    gap: 0 3em;
    margin-bottom: 3em;
}
.cosme-archive_h5{
    grid-column: 1;
    grid-row: 1 / 2;
    margin-bottom: 0.5em;
    font-size: clamp(16px, 1.4vw, 21px);
    background: var(--back);
    line-height: 1;
    padding: 0.5em 1em;
    border-left: 5px solid var(--blue);
}
.cosme-archive_p{
    grid-column: 1;
    grid-row: 2 / 3;
    padding-left: 1.5em;
}
.cosme-archive_date{
    grid-column: 1;
    grid-row: 3 / 4;
    text-align: right;
}
.cosme-archive_btn{
    grid-column: 1;
    grid-row: 4 / 5;
}
.cosme-archive_h5 br{
    display: none;
}
.cosme-archive_img{
    grid-column: 2;
    grid-row: 1 / 6;
}
.cosme-archive_img img{
    object-fit: cover;
    aspect-ratio: 2 / 1;
}
.archive-cosmereport_p small{
    background: var(--dgray);
    padding: 0.2em 0.5em;
    color: #fff;
    display: block;
    text-align: center;
    margin-bottom: 0.3em;
}
.archive-cosmereport_att{
    font-size: 80%;
    color: var(--red);
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.3;
    font-weight: 500;
}
@media screen and (max-width: 1280px) {
    .cosme-archive_img img{
        aspect-ratio: 1.618 / 1;
    }
}
@media screen and (max-width: 980px) {
    .cosme-archive_item{
        grid-template-columns: 45% 1fr;
        gap: 0 2em;
    }
}
@media screen and (max-width: 780px) {
    .cosme-archive_img img{
        aspect-ratio: 1.3 / 1;
    }
    .archive-cosmereport_lead br{
        display: none;
    }
}
@media screen and (max-width: 680px) {
    .cosme-archive_item{
        grid-template-columns: 50% 1fr;
        gap: 0 1em;
    }
    .cosme-archive_p{
        padding-left: 0;
    }
    .cosme-archive_img img{
        aspect-ratio: 1 / 1;
    }
}
@media screen and (max-width: 580px) {
    .cosme-archive_item{
        display: block;
    }
    .cosme-archive_img{
        margin-top: 1em;
    }
    .cosme-archive_img img{
        aspect-ratio: 2 / 1;
    }
}

/*COSME REPORT*/
.archive-cosmereport_ol{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2em;
}
.archive-cosmereport_a{
    display: block;
    padding: 1em;
    border: 1px solid var(--dgray);
    background: var(--back);
    overflow: hidden;
}
.archive-cosmereport_p{
    line-height: 1.3;
    margin: 0.5em 0;
    font-size: clamp(12px, 1.1vw, 16px);
}
.archive-cosmereport_a:hover .archive-cosmereport_img{
    transform: scale(1.05, 1.05);
}
@media screen and (max-width: 1380px) {
    .archive-cosmereport_ol{
        grid-template-columns: repeat(5, 1fr);
    }
}
@media screen and (max-width: 980px) {
    .archive-cosmereport_ol{
        grid-template-columns: repeat(4, 1fr);
        gap: 2em 1em;
    }
}
@media screen and (max-width: 680px) {
    .archive-cosmereport_ol{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 580px) {
    .archive-cosmereport_ol{
        grid-template-columns: repeat(2, 1fr);
    }
}


/*INFORMATION*/
.information-archives_h5{
    font-size: clamp(16px, 1.4vw, 21px);
}
.information-archive_ol{
    border-left: 1px solid var(--blue);
    font-size: clamp(21px, 2vw, 28px);
    padding-left: 1em;
    width: calc(100% - 0.5em);
    margin: 0 0 0 auto;
}
.information-archive_li{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.5em 0 !important;
}
.information-archive_date{
    font-size: clamp(13px, 1.2vw, 15px);
    width: 8em;
    color: var(--dgray);
}
.information-archive_title{
    flex: 1;
    line-height: 1.4;
}
.information-archive_a{
    color: var(--blue);
    line-height: 1.4;
}
.information-archive_a:hover{
    color: var(--blue);
    text-decoration: underline;
}
.information-archives{
    max-width: 1280px;
    margin: 0 0 0 auto;
}
.information-archives .information-archive_li{
    padding: 1em 0 !important;
    border-bottom: 1px dotted var(--dgray);
}
.information-pagination{
    text-align: center;
}
.information-pagination .page-numbers{
    display: inline-block;
    padding: 0.4em 0.5em;
    line-height: 1;
}
.information-pagination a.page-numbers{
    color: var(--blue);
}
.information-pagination a.page-numbers:hover{
    background: var(--lblue);
    color: #fff;
}
.information-pagination .page-numbers.current{
    background: var(--dgray);
    color: #fff;
}
.information-post{
    max-width: 1000px;
    margin: 0 auto;
}
.information-post_header{
    margin-bottom: 0.5em;
}
.information-post_h5{
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.4;
    margin-bottom: 0.2em;
    border-left: 5px solid var(--blue);
    padding-left: 1em;
}
.information-post_date{
    display: block;
    text-align: right;
    line-height: 1;
}
.information-editor{
    border: 1px solid var(--dgray);
    padding: 5em;
}
.information-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
.information-gallery img{
    object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
.glightbox-mobile .goverlay{
    background: rgba(0,0,0,0.7) !important;
}
.glightbox-container .gdesc-inner {
  white-space: pre-line;
}
.glightbox-clean .gdesc-inner{
    padding: 1em !important;
}
.gslide-title{
    font-size: clamp(11px, 1.1vw, 13px) !important;
    margin-bottom: 0 !important;
}
@media screen and (max-width: 980px) {
    .information-post{
        padding-left: 5em;
    }
    .information-editor{
        padding: 2em;
    }
}
@media screen and (max-width: 780px) {
    .information-post{
        padding-left: 0;
    }
    .information-editor{
        padding: 2em 1em;
    }
    .information-gallery{
        gap: 0.5em;
    }
}
@media screen and (max-width: 480px) {
    .information-archive_title{
        flex: initial;
        width: 100%;
    }
    .information-gallery{
        grid-template-columns: repeat(2, 1fr);
    }
}


/*COSME GRANTS PAGE*/
.grant-img{
    width: 100%;
}
.grant-img img{
    object-fit: cover;
    aspect-ratio: 3.2 / 1;
}
.grant-wrap{
    padding-left: 20em;
    margin-bottom: 5em;
}
.grant-purpose_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.grant-purpose_text{
    flex: 1;
}
.grant-purpose_img{
    width: 40%;
    margin-left: 5%;
}
.grant-purpose_img img{
    object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
.grant-purpose_img small{
    font-size: clamp(11px, 1.1vw, 12px);
}
.grant-qualification_ul li{
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-height: 1.4;
    margin: 0.7em 0;
}
.grant-qualification_ul li:before{
    content: "●";
    color: var(--blue);
    font-size: 80%;
    vertical-align: 0;
    padding-right: 0.2em;
}
.grant-text a{
    color: var(--blue);
    font-weight: 700;
}
.grant-text a:hover{
    color: var(--red);
    text-decoration: underline;
}
.grant-text b{
    font-weight: 700;
}
.grant-file_a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0.3em 0;
    width: 25em;
}
.grant-file_a:before{
    content: "";
    display: block;
    width: 2em;
    height: 2em;
    padding: 0.5em;
    margin-right: 1em;
}
.grant-file_a[href$=".pdf"]:before {
    background: url("../img/pdf.svg") center / 45% no-repeat #fff;
}
.grant-file_a[href$=".doc"]:before, 
.grant-file_a[href$=".docx"]:before {
    background: url("../img/word.svg") center / 35% no-repeat #fff;
}
.grant-file_a[href$=".xls"]:before, 
.grant-file_a[href$=".xlsx"]:before{
    background: url("../img/excel.svg") center / 35% no-repeat #fff;
}
.cosmegrant-link{
    text-align: center;
}
.cosmegrant-link_a{
    background: var(--red);
    padding: 1em 2em;
    font-size: clamp(16px, 1.4vw, 18px);
    border: 1px solid var(--red);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
}
.cosmegrant-link_a:hover{
    color: var(--red);
}
.sports-document_item{
    margin-bottom: 2em;
}
.sports-document_list{
    padding-left: 1.3em;
}

.sports-document_h4{
    font-weight: 400;
}
.sports-document_h4:before{
    content: "●";
    color: var(--dgray);
}
.sports-doc p{
    font-weight: 400;
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-height: 1.4;
    margin-bottom: 2em;
}
.sports-doc p:before{
    content: "●";
    color: var(--dgray);
    padding-right: 0.1em;
}
.sports-doc p b{
    background: linear-gradient(180deg, transparent 0%, transparent 70%, var(--lblue50) 70%, var(--lblue50) 100%);
}
@media screen and (max-width: 1280px) {
    .grant-wrap{
        padding-left: 10em;
    }
    .grant-text br{
        display: none;
    }
}
@media screen and (max-width: 980px) {
    .grant-wrap{
        padding-left: 5em;
    }
    .grant-img img{
        aspect-ratio: 2 / 1;
    }
    .grant-purpose_img{
        margin-left: 1em;
        box-shadow: 15px 15px 0 var(--lblue50);
    }
    .grant-purpose_img img{
        aspect-ratio: 1.3 / 1;
    }
}
@media screen and (max-width: 780px) {
    .grant-wrap{
        padding-left: 0;
    }
    .grant-purpose_img img{
        aspect-ratio: 1 / 1;
    }
}
@media screen and (max-width: 580px) {
    .grant-wrap{
        margin-bottom: 4em;
    }
    .grant-img img{
        aspect-ratio: 1.618 / 1;
    }
    .grant-purpose_img{
        width: 100%;
        margin: 1em 0 0;
        box-shadow: 10px 10px 0 var(--lblue50);
    }
    .grant-purpose_img img{
        aspect-ratio: 2 / 1;
    }
    .sports-document_list {
        padding-left: 0;
    }
}
@media screen and (max-width: 480px) {
    .grant-file_a{
        width: 100%;
    }
    .grant-file_a:before{
        padding: 0;
        width: 2.5em;
        height: 2.5em;
        margin-right: 0.5em;
    }
}

/*COSME GRANTS PAGE PAST*/
.cosmegrant-past{
    background: var(--lblue30);
}
.cosmegrant-past_h4{
    text-align: center;
    font-size: clamp(21px, 1.5vw, 28px);
    line-height: 1.3;
}
.cosmegrant-past_wrap{
    padding: 3em 2em;
    background: #fff;
}
.cosmegrant-past_head{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cosmegrant-past_h5{
    width: 22em;
    font-size: clamp(18px, 2vw, 21px);
}
.cosmegrant-past_h5 span{
    display: block;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.3;
}
.cosmegrant-past_h5 b{
    display: block;
    font-weight: 500;
    color: var(--blue);
    font-size: clamp(16px, 1.4vw, 21px);
}
.cosmegrant-past_subject{
    flex: 1;
}
.cosmegrant-past_table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}
.cosmegrant-past_table th,
.cosmegrant-past_table td{
    padding: 1em;
    background: #fff;
    line-height: 1.3;
}
.cosmegrant-past_table th{
    background: var(--dgray);
    color: #fff;
}
.cosmegrant-past_table td{
    background: var(--back);
}
.cosmegrant-past_table td b{
    display: block;
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.2;
}
.cosmegrant-past_table td p{
    line-height: 1.2;
}
.cosmegrant-past_table td:first-child{
    border-left: 5px solid var(--dgray);
    width: 15em;
}
.cosmegrant-past_att{
    display: none;
}
@media screen and (max-width: 980px) {
    .cosmegrant-past_head,
    .cosmegrant-past_h5{
        width: 100%;
    }
}
@media screen and (max-width: 680px) {
    .cosmegrant-past_overflow{
        overflow: scroll;
    }
    .cosmegrant-past_table{
        min-width: 580px;
    }
    .cosmegrant-past_att{
        display: block;
        font-size: clamp(12px, 1.1vw, 14px);
        margin: 0 0 0 5px !important;
        line-height: 1;
    }
    .cosmegrant-past_att b{
        padding-left: 5px;
        font-size: 180%;
        vertical-align: -0.1em;
        line-height: 1;
    }
    .cosmegrant-past_wrap{
        padding: 2em 1em;
    }
}

/*COSME GRANTS ARCHIVE*/
.cosmegrant-top{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
.cosmegrant-top .cosme-archive_item {
    display: block;
    text-align: center;
    border: 1px solid var(--black);
    border-top: 5px solid var(--blue);
    background: #fff;
}
.cosmegrant-top .cosme-archive_h5 {
    font-size: clamp(16px, 1.1vw, 18px);
    margin: 1em 0 0;
    padding: 0;
    line-height: 1.3;
    border-left: none;
    background: #fff;
}
.cosmegrant-top .cosme-archive_p{
    display: none;
}
.cosmegrant-top .cosme-archive_date {
    text-align: center;
}
.cosmegrant-top .cosme-archive_img img{
    object-fit: cover;
    aspect-ratio: 2.4 / 1;
}
.cosmegrant-top .cosme-archive_btn{
    text-align: center !important;
    margin-bottom: 1em;
}
@media screen and (max-width: 1280px) {
    .cosmegrant-top{
        gap: 0.5em;
    }
    .cosmegrant-top{
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .cosmegrant-top .cosme-archive_item{
        display: grid;
        grid-template-columns: 35% 1fr;
        gap: 0;
        margin-bottom: 0.2em;
    }
    .cosmegrant-top .cosme-archive_img{
        grid-column: 1 / 2;
        grid-row: 1 / 6;
        margin-top: 0;
    }
    .cosmegrant-top .cosme-archive_img img{
        aspect-ratio: 1.3 / 1;
    }
    .cosmegrant-top .cosme-archive_h5 {
        grid-column: 2 / 4;
        grid-row: 2;
        margin-top: 0;
    }
    .cosmegrant-top .cosme-archive_h5 br{
        display: block;
    }
    .cosmegrant-top .cosme-archive_date {
        grid-column: 2 / 4;
        grid-row: 3;
    }
    .cosmegrant-top .cosme-archive_btn{
        grid-column: 2 / 4;
        grid-row: 4 / 5;
        margin-bottom: 0;
    }
}
@media screen and (max-width: 980px) {
    .cosmegrant-top .cosme-archive_img img{
        aspect-ratio: 1 / 1;
    }
}
@media screen and (max-width: 780px) {
    .cosmegrant-top{
        display: block;
    }
    .cosmegrant-top .cosme-archive_item{
        margin-bottom: 0.5em;
    }
    .cosmegrant-top .cosme-archive_h5 br{
        display: none;
    }
    .cosmegrant-top .cosme-archive_img img{
        aspect-ratio: 2 / 1;
    }
}
@media screen and (max-width: 680px) {
    .cosmegrant-top .cosme-archive_img img{
        aspect-ratio: 1.618 / 1;
    }
}
@media screen and (max-width: 480px) {
    .cosmegrant-top .cosme-archive_img img{
        aspect-ratio: 1 / 1;
    }
    .cosmegrant-top .cosme-archive_h5 br{
        display: block;
    }
}

/*COSME GRANTS ARCHIVE OTHERS*/
.cosmegrant-others_content{
    background: var(--back);
}
.cosmegrant-others_h6{
    text-align: center;
    font-size: clamp(21px, 1.5vw, 28px);
}
.cosmegrant-others{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
.cosmegrant-others .cosme-archive_item {
    display: block;
    text-align: center;
    border: 1px solid var(--black);
    border-top: 5px solid var(--blue);
    background: #fff;
    margin-bottom: 0 !important;
}
.cosmegrant-others .cosme-archive_h5 {
    font-size: clamp(16px, 1.1vw, 18px);
    margin: 1em 0 0;
    padding: 0;
    line-height: 1.3;
    border-left: none;
    background: #fff;
}
.cosmegrant-others .cosme-archive_p{
    display: none;
}
.cosmegrant-others .cosme-archive_date {
    text-align: center;
}
.cosmegrant-others .cosme-archive_img img{
    object-fit: cover;
    aspect-ratio: 2.4 / 1;
}
.cosmegrant-others .cosme-archive_btn{
    text-align: center !important;
    margin-bottom: 1em;
}
/*.cosmegrant-others .current-grant{
    display: none !important;
}*/

@media screen and (max-width: 1280px) {
    .cosmegrant-others{
        gap: 0.5em;
    }
    .cosmegrant-others .cosme-archive_h5 br{
        display: block;
    }
}
@media screen and (max-width: 880px) {
    .cosmegrant-others{
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .cosmegrant-others .cosme-archive_item{
        display: grid;
        grid-template-columns: 30% 1fr;
        gap: 0;
        margin-bottom: 0.2em;
    }
    .cosmegrant-others .cosme-archive_img{
        grid-column: 1 / 2;
        grid-row: 1 / 6;
        margin-top: 0;
    }
    .cosmegrant-others .cosme-archive_img img{
        aspect-ratio: 1 / 1.3;
    }
    .cosmegrant-others .cosme-archive_h5 {
        grid-column: 2 / 4;
        grid-row: 2;
        margin-top: 0;
    }
    .cosmegrant-others .cosme-archive_h5 br{
        display: block;
    }
    .cosmegrant-others .cosme-archive_date {
        grid-column: 2 / 4;
        grid-row: 3;
    }
    .cosmegrant-others .cosme-archive_btn{
        grid-column: 2 / 4;
        grid-row: 4 / 5;
        margin-bottom: 0;
    }
}
@media screen and (max-width: 780px) {
    .cosmegrant-others{
        display: block;
    }
    .cosmegrant-others .cosme-archive_item{
        margin-bottom: 0.5em !important;
    }
    .cosmegrant-others .cosme-archive_h5 br{
        display: none;
    }
    .cosmegrant-others .cosme-archive_img img{
        aspect-ratio: 2 / 1;
    }
}
@media screen and (max-width: 680px) {
    .cosmegrant-others .cosme-archive_img img{
        aspect-ratio: 1.3 / 1;
    }
}
@media screen and (max-width: 480px) {
    .cosmegrant-others .cosme-archive_item{
        grid-template-columns: 25% 1fr;
    }
    .cosmegrant-others .cosme-archive_img img{
        aspect-ratio: 1 / 1.3;
    }
}

/*COSMETOLOGY GRANT*/
.cosmetology-grant_nav .btn{
    width: 17em;
    padding: 0.4em;
    line-height: 1.3;
}
.cosmetology-grant_nav .btn br{
    display: none;
}
.cosmetology-grant_nav .btn.active{
    background: var(--back);
    color: var(--dgray);
    border: 1px solid var(--dgray);
    pointer-events: none;
}
.cosmetology-grant_nav .btn.active:after {
    right: 5px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
}
.cosmetology-grant_ol{
    max-width: 1180px;
    margin: 0 0 0 auto;
}
.cosmetology-grant_li{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}
.cosmetology-grant_a{
    flex: 1;
    border: 1px solid var(--dgray);
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0.5em 1em;
    color: var(--black);
}
.cosmetology-grant_round{
    width: 10em;
    margin-right: 1em;
}
.cosmetology-grant_a small{
    color: var(--dgray);
}
.cosmetology-grant_related{
    background: var(--lblue30);
    display: flex;
    align-items: center;
    padding: 0.5em 1em;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1;
    margin-left: 0.5em;
    color: var(--black);
}
@media screen and (max-width: 580px) {
    .cosmetology-grant_nav{
        display: flex;
        justify-content: space-between;
    }
    .cosmetology-grant_nav .btn br{
        display: block;
    }
    .cosmetology-grant_nav .btn{
        width: 49%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/*COSME AWARD*/
.cosmeaward-past {
    background: var(--lblue30);
}
.cosmeaward-past_table table{
    width: calc(100% + 10px);
    border-collapse: separate;
    border-spacing: 5px;
}
.cosmeaward-past_table th,
.cosmeaward-past_table td{
    padding: 1em;
    background: #fff;
    line-height: 1.3;
}
.cosmeaward-past_table th{
    background: var(--dgray);
    color: #fff;
    width: 10em;
}
.cosmeaward-past_table th small{
    display: block;
}
.cosmeaward-past_table td{
    background: #fff;
    line-height: 1.3;
}
.cosmeaward-past_table td:nth-child(2){
    width: 15em;
}
.cosmeaward-past_table:has(.cosmeaward-h4) th{
    display: none;
}
.cosmeaward-past_table:has(.cosmeaward-h4) td:nth-child(2){
    border-left: 5px solid var(--dgray);
}
.cosmeaward-h4{
    margin: 2em 0 0.1em 0.1em;
    display: block;
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 21px);
}
.cosmeaward-merit{
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 5px;
}
.cosmeaward-merit_year{
    width: 10em;
    padding: 1em 0.2em;
    background: var(--dgray);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cosmeaward-merit_table{
    flex: 1;
}
.cosmeaward-merit_table th,
.cosmeaward-merit_table td{
    padding: 1em;
    background: #fff;
    line-height: 1.4;
}
.cosmeaward-merit_table th{
    width: 7em;
    padding: 1em 0.2em;
}
.cosmeaward-merit_table td:nth-child(2){
    width: 17em;
    background: var(--back);
}
.cosmeaward-merit_table td:nth-child(2) br{
    display: none;
}
@media screen and (max-width: 780px) {
    .cosmeaward-past_overflow{
        width: 100%;
        overflow-x: auto;
    }
    .cosmeaward-past_item{
        min-width: 480px;
    }
    .cosmeaward-past_table th {
        width: 6em;
        padding: 1em 0.2em;
    }
    .cosmeaward-past_table td:nth-child(2) {
        width: 9em;
    }
    .cosmeaward-merit{
        flex-direction: column;
    }
    .cosmeaward-merit_year{
        width: 100%;
        padding: 0.3em;
    }
    .cosmeaward-merit_year{
        flex-direction: row;
    }
    .cosmeaward-merit:nth-child(n + 2) .cosmeaward-merit_year{
        margin-top: 1em;
    }
    .cosmeaward-merit_table td:nth-child(2){
        width: 11em;
        text-align: center;
    }
    .cosmeaward-merit_table td:nth-child(2) br{
        display: block;
    }
}
@media screen and (max-width: 680px) {
    .cosmeaward-past_merit{
        min-width: 480px;
    }
    .cosmeaward-merit_table th{
        width: 6em;
    }
    .cosmeaward-merit_table td:nth-child(2){
        width: 10em;
        padding: 1em 0.5em;
    }
}

/*FAQ*/
.faq-list{
    padding-left: 5em;
}
.faq-q,
.faq-a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.faq-q{
    cursor: pointer;
    background: var(--back);
    padding: 0.5em 3em 0.5em 1em;
    position: relative;
    line-height: 1.4;
}
.faq-a{
    width: calc(100% - 3em);
    margin: 0 0 1em auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .25s ease, opacity .25s ease;
}
.faq-a p{
    line-height: 1.6;
    margin: 0 0 1.5em;
    padding: 1.5em 0 0;
}
.faq-q.open + .faq-a{
    max-height: 1000px;
    opacity: 1;
}
.faq-q span,
.faq-a span{
    font-size: 200%;
    font-family: "Cormorant", serif;
    font-weight: 400;
    font-style: normal;
    margin-right: 0.2em;
}
.faq-q span{
    color: var(--blue);
}
.faq-a span{
    color: var(--dgray);
    margin-left: 0.2em;
}
.faq-q:after,
.faq-q:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 25px;
  height: 1px;
  background: var(--blue);
}
.faq-q:after {
  transition: all 0.1s ease-in-out;
}
.faq-q:before {
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.faq-q.open:before {
  transform: rotate(180deg);
}
.faq-q.open:after {
  opacity: 0;
}
@media screen and (max-width: 680px) {
    .faq-list{
        padding-left: 0;
    }
    .faq-a{
        width: 100%;
        padding-left: 1em;
    }
}

/*GRANTEES*/
.grantees{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.grantees-archive{
    width: 15em;
}
.grantees-body{
    flex: 1;
}
.grantees-h3{

    width: 100%;
}
.grantees-h3 span{
    font-size: clamp(24px, 2vw, 34px);
    display: block;
    line-height: 1;
}
.grantees-h3 span small{
    font-size: clamp(16px, 1.4vw, 21px);
    display: inline-block;
    margin-left: 0.2em;
}
.grantees-h3 span b{
    background: var(--red);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1;
    color: #fff;
    padding: 0.2em 1em 0.4em;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.05em;
}
.grantees-head{
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 0 3em;
}
.grantees-img{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.grantees-img img{
    object-fit: cover;
    aspect-ratio: 1 / 1.2;
}
.grantees-h3{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.grantees-profile{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.grantees-profile dl{
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 0.7em 0;
}
.grantees-profile dt{
    background: var(--dgray);
    color: #fff;
    text-align: center;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grantees-profile dd{
    display: flex;
    align-items: center;
    background: var(--back);
    padding: 0.5em 1em;
}
.grantees-profile dd a{
    color: var(--blue);
}
.grantees-profile dd a:hover{
    column-rule-color: var(--dgray);
    text-decoration: underline;
}
.grantees-grate_item{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px dotted var(--dgray);
    padding: 2em 0 2em 5em;
}
.grantees-grate_h5{
    width: 8em;
}
.grantees-grates_rates{
    flex: 1;
}
.grantees-grates_tournament{
    font-weight: 700;
    line-height: 1.3;
}
.grantees-grates_ul{
    padding-left: 2em;
}
.grantees-grates_ul:last-of-type{
    margin-bottom: 0 !important;
}
.grantees-grates_ul li:before{
    content: "●";
    display: inline-block;
    color: var(--blue);
    font-size: 50%;
    margin-right: 5px;
    vertical-align: 0.2em;
}
.grantees-past {
    background: var(--lblue30);
}
.grantees-past_h4 {
    text-align: center;
    font-size: clamp(21px, 1.5vw, 28px);
}
.grantees-past_h4 small{
    display: block;
    display: flex;
    justify-content: center;
}
.grantees-past_h4 small:before,
.grantees-past_h4 small:after{
    content: "ー";
    display: inline-block;
    margin: 0 0.2em;
}
.grantees-player{
    display: grid;
    grid-template-columns: 40em 1fr;
    gap: 1em 3em;
}
.grantees-past_img{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.grantees-impressions{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background: #fff;
    padding: 5em 3em;
}
.grantees-impressions p{
    text-indent: 1em;
    line-height: 1.8em;
    margin-bottom: 2em;
}
.grantees-impressions p:last-child{
    margin-bottom: 0 !important;
}
.grantees-past_grates{
    grid-column: 2 / 3;
    grid-row: 1 / 4;
}
.grantees-grates_table{
    width: 100%;
}
.grantees-grates_table th{
    background: var(--dgray);
    padding: 0.5em;
    color: #fff;
    width: 8em;
}
.grantees-grates_table td{
    background: #fff;
    padding: 1em;
    line-height: 1.4;
}
@media screen and (max-width: 1280px) {
    .grantees-player {
        grid-template-columns: 35em 1fr;
        gap: 1em;
    }
    .grantees-impressions {
        padding: 3em 2em;
    }
    .grantees-grates_table th {
        width: 6em;
    }
}
@media screen and (max-width: 980px) {
    .grantees-head{
        grid-template-columns: 30% 1fr;
        gap: 0 1em;
    }
    .grantees-grate_item {
        padding: 2em 0;
    }
    .grantees-profile dl {
        grid-template-columns: 6em 1fr;
    }
    .grantees-player {
        grid-template-columns: 1fr;
    }
    .grantees-past_img {
        grid-column: 1 / 3;
    }
    .grantees-impressions {
        grid-column: 1 / 3;
    }
    .grantees-past_grates {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
}
@media screen and (max-width: 580px) {
    .grantees-h3 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        text-align: center;
    }
    .grantees-h3 span b {
        display: block;
        text-align: center;
        padding: 0.2em 0;
    }
    .grantees-img {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .grantees-img img{
        width: 80%;
        max-width: 250px;
        margin: 0 auto;
    }
    .grantees-profile {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        margin-top: 1em;
    }
    .grantees-grate_item{
        display: block;
    }
    .grantees-grate_h5 {
        color: var(--blue);
    }
    .grantees-grates_tournament {
        padding-left: 2em;
    }
}


/*GRANTEES CAT*/
.grantees-archive {
    margin-right: 3em;
}
.grantees-cat_ol li a{
    display: block;
    padding: 0.7em 1em;
    background: var(--back);
    margin-bottom: 5px;
    color: var(--black);
    position: relative;
}
.grantees-cat_ol li a:before{
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: var(--blue);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
@media screen and (max-width: 1280px) {
    .grantees-archive {
        margin-right: 1em;
    }
}
@media screen and (max-width: 980px) {
    .grantees {
        flex-direction: column;
    }
    .grantees-archive{
        width: 100%;
        margin-right: 0;
    }
    .grantees-cat_ol{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
        gap:5px;
    }
}

/*ARCHIVE*/
.grantees-cat_ol li.current-cat a,
.grantees-cat_ol li a:hover{
    background: var(--lblue50);
}
.grantees-archives_h3 {
    display: flex;
    align-items: center;
}
.grantees-archives_h3 span {
    font-size: clamp(24px, 2vw, 28px);
    border-left: 5px solid var(--blue);
    display: block;
    padding: 0 0.2em 0 0.5em;
    line-height: 1;
}
.grantees-archives_h3:after {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: var(--black);
}
.grantees-archives_ul{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3em;
}
.grantees-archives_results{
    display: none;
}
.grantees-archives_ul li{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1em;
    position: relative;
    overflow: hidden;
}
.grantees-archives_thmb {
    width: 30%;
    display: block;
    padding: 0.5em;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;
    margin-left: 1em;
}
.grantees-archives_thmb:before{
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: var(--blue);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.grantees-archives_thmb img{
    object-fit: cover;
    aspect-ratio: 1 / 1.3;
}
.grantees-archives_thmb:hover img{
    transform: scale(1.03, 1.03);
}
.grantees-archives_profs{
    flex: 1;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 2;
}
.grantees-archives_name{
    padding-left: 0.9em;
    line-height: 1.2;
}
.grantees-archives_name b{
    display: inline-block;
    color: var(--black);
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 21px);
    line-height: 1.3;
}
.grantees-archives_name small{
    display: inline-block;
    color: var(--black);
    font-weight: 700;
    margin-left: 0.2em;
}
.grantees-archives_belong{
    padding-left: 4em;
    line-height: 1.3;
    text-indent: -3em;
    font-size: clamp(12px, 1.2vw, 14px);
}
.grantees-archives_genre{
    font-size: 80%;
    background: var(--dgray);
    text-align: center;
    color: #fff;
    font-weight: 500;
}
.grantees-archives_a{
    z-index: 3;
    padding: 1em;
    position: relative;
}
.grantees-archives_a:after{
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--lblue30);
    z-index: -1;
}
.grantees-archives_a .btn{
    font-size: clamp(13px, 1.2vw, 15px);
    padding: 0.4em 1em;
    background: #fff;
    position: relative;
    z-index: 2;
}
.grantees-archives_a .btn:hover{
    background: var(--blue);
    color: #fff;
}
.grantees-tax .grantees-archives_ul{
    grid-template-columns: repeat(2, 1fr);
    gap: 3em 2em;
}
.grantees-tax .grantees-archives_results{
    display: flex;
    padding-left: 1em;
    margin-bottom: 1em;
}
.grantees-archives_h5{
    width: 6em;
    color: var(--blue);
    line-height: 1;
}
.grantees-archives_result{
    flex: 1;
}
.grantees-tax .grantees-archives_tournament{
    display: block;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.4;
}
.grantees-archives_rank{
    display: block;
    font-weight: 700;
    line-height: 1.4;
    font-size: clamp(12px, 1.1vw, 14px);
}
@media screen and (max-width: 1380px) {
    .grantees-archives_ul{
        gap:2em 1em;
    }
    .grantees-archives_thmb {
        width: 100px;
        padding: 0.3em;
        margin-left: 0.5em;
    }
    .grantees-tax .grantees-archives_ul{
        grid-template-columns: repeat(1, 1fr);
        gap: 2em;
    }
    .grantees-tax .grantees-archives_thmb {
        width: 150px;
        padding: 0.3em;
        margin-left: 0.5em;
    }
}
@media screen and (max-width: 1080px) {
    .grantees-archives_ul{
        grid-template-columns: repeat(2, 1fr);
    }
    .grantees-archives_thmb {
        padding: 0.3em;
        margin-left: 0.5em;
    }
}
@media screen and (max-width: 680px) {
    .grantees-archives_ul{
        grid-template-columns: repeat(1, 1fr);
        gap: 1em;
    }
}

/*COSMETOLOGY*/
.cosmetology-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cosmetology-nav{
    width: 15em;
    margin-right: 2em;
}
.cosmetology-nav .page-h4{
    display: none;
}
.cosmetology-search{
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 0 2px;
}
.cosmetology-search_input{
    grid-column: 1 / 2;
    padding: 0.5em;
}
.cosmetology-search_btn{
    grid-column: 2 / 3;
    border: none;
    background: var(--dgray);
    color: #fff;
    font-size: clamp(12px, 1.1vw, 14px);
    cursor: pointer;
}
.cosmetology-search_btn img{
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
}
.cosmetology-nav_li a{
    color: var(--black);
    display: block;
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1;
    padding: 0.5em 0;
}
.cosmetology-nav_li a:hover,
.cosmetology-nav_a.is-current{
    color: var(--blue);
}
.cosmetology-nav_a.is-current:after{
    content: "●";
    color: var(--blue);
    font-size: 11px;
    vertical-align: middle;
}
.cosmetology-body{
    flex: 1;
}
.cosmetology-head{
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: flex-start;
    gap: 0 2em;
}
.cosmetology-img{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}
.cosmetology-h3{
    grid-column: 2 / 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.cosmetology-h3 small{
    background: var(--dgray);
    padding: 0.2em 1em;
    color: #fff;
    display: block;
    text-align: center;
    margin-left: 0.5em;
    font-size: clamp(13px, 1.2vw, 16px);
}
.cosmetology-h3 span{
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 700;
}
.cosmetology-lead{
    grid-column: 2 / 3;
}
.cosmetology-file_a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0.3em 0;
    width: 25em;
}
.cosmetology-file_a:before{
    content: "";
    display: block;
    width: 2em;
    height: 2em;
    padding: 0.5em;
    margin-right: 1em;
}
.cosmetology-file_a[href$=".pdf"]:before {
    background: url("../img/pdf.svg") center / 45% no-repeat #fff;
}
.cosmetology-topic_h3{
    background: var(--back);
    padding: 0.5em 1em;
    position: relative;
}
.cosmetology-topic_h3 span{
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 700;
}
.cosmetology-topic_h3:after{
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: var(--blue);
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    position: absolute;
    top: 0;
    left: 0;
}
.cosmetology-ul{
    padding-left: 3em;
}
.cosmetology-li{
    padding: 1em 0;
    border-bottom: 1px dotted #aaa;
}
.cosmetology-title h5,
.cosmetology-title h5 a{
    display: block;
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.3;
    margin-bottom: 0.3em;
    color: var(--black);
    transition: 0.1s all;
}
.cosmetology-title h5.eng a{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
}
.cosmetology-title h5 a{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.cosmetology-title h5 a img{
    display: inline-block;
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 5px;
}
.cosmetology-title h5 a:hover{
    color: var(--blue);
    text-decoration: underline;
}
.cosmetology-org,
.cosmetology-name{
    padding-left: 25px;
    line-height: 1.3;
    font-size: clamp(12px, 1.2vw, 14px);
}
.cosmetology-org{
    margin-bottom: 0.2em;
    color: #666;
}
.cosmetology-list_att{
    text-align: right;
    font-size: clamp(11px, 1.1vw, 14px);
    margin-bottom: 0.2em;
}
@media screen and (max-width: 980px) {
    .cosmetology-nav{
        width: 100%;
        order: 1;
        margin: 0 0 3em 0;
    }
    .cosmetology-nav .page-h4{
        display: flex;
    }
    .cosmetology-nav_ol{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5em;
    }
    .cosmetology-nav_li a{
        background: var(--back);
        padding: 0.5em;
        text-align: center;
    }
    .cosmetology-nav_li a.is-current{
        background: var(--dgray);
        color: #fff;
    }
    .cosmetology-nav_li a.is-current:after{
        display: none;
    }
}
@media screen and (max-width: 780px) {
    .cosmetology-head {
        grid-template-columns: 150px 1fr;
        gap: 0 1em;
    }
    .archive-cosmereport_a {
        padding: 5px;
    }
    .cosmetology-nav_li a small{
        display: block;
    }
    .cosmetology-ul {
        padding-left: 0;
    }
}
@media screen and (max-width: 580px) {
    .cosmetology-nav_ol{
        grid-template-columns: repeat(3, 1fr);
    }
    .cosmetology-head {
        grid-template-columns: 1fr;
    }
    .cosmetology-h3 {
        display: flex;
        flex-direction: column;
        grid-column: 1 / 3;
        text-align: center;
    }
    .cosmetology-img {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .cosmetology-file_a{
        margin: 0.3em auto;
        width: 100%;
    }
    .archive-cosmereport_a{
        width: 70%;
        max-width: 250px;
        margin: 1em auto;
    }
    .cosmetology-lead{
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
    .cosmetology-org dt,
    .cosmetology-org dd{
        flex: initial;
        width: 100%;
    }
    .cosmetology-name dt{
        width: 4em;
    }
}

/*SEARCH*/
.cosmetology-result_h3 a{
    color: var(--black);
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 700;
}
.cosmetology-result_h3 a:hover{
    color: var(--blue);
    text-decoration: underline;
}
.cosmetology-result_li{
    margin-bottom: 1.5em;
}
.cosmetology-result_pdf--ul{
    margin-bottom: 2em;
    padding-left: 2em;
}
.cosmetology-result_pdf--li{
    list-style: disc outside;
    margin-bottom: 1em;
}
.cosmetology-result_nopdf,
.cosmetology-result_pdf--li a{
    color: var(--black);
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.3;
    display: block;
}
.cosmetology-result_pdf--li a:hover{
    color: var(--blue);
    text-decoration: underline;
}
.cosmetology-result_nopdf small,
.cosmetology-result_p,
.cosmetology-result_pdf--meta{
    font-size: clamp(11px, 1.1vw, 12px);
    color: var(--dgray);
}
/*PAGENATION*/
.nav-links{
    display: flex;
    align-items: center;
}
.nav-links span:first-of-type{
    margin-right: 0.5em;
}
.nav-links span.current,
.nav-links a,
.nav-links span{
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    color: var(--blue);
}
.nav-links span.current,
.nav-links a{
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--blue);
    margin: 0 2px;
}
.nav-links a:hover,
.nav-links span.current{
    background: var(--blue);
    color: #fff;
}
.screen-reader-text,
.nav-links a.next,
.nav-links a.prev{
    display: none;
}



/*SEMINAR*/
.cosme-seminar_wrap{
    padding-left: 10em;
}
.cosme-semina_a{
    display: inline-block;
    border: 1px solid var(--blue);
    border-left: 10px solid var(--blue);
    padding: 1em 3em;
    margin-bottom: 1em;
    color: var(--black);
    font-size: clamp(16px, 1.4vw, 21px);
    line-height: 1.4;
}
.cosme-semina_a small{
    display: block;
    color: var(--dgray);
}
.cosme-semina_a:hover{
    background: var(--blue);
    color: #fff;
    border-left: 10px solid var(--dgray);
}
.cosme-semina_a:hover small{
    color: #fff;
}
@media screen and (max-width: 980px) {
    .cosme-seminar_wrap{
        padding-left: 5em;
    }
}
@media screen and (max-width: 580px) {
    .cosme-seminar_wrap{
        padding-left: 0;
    }
}

/*CONTACT*/
.contact-wrap{
    max-width: 980px;
    margin-inline: auto;
}
.contact-address{
    background: var(--back);
    padding: 2em 3em;
    position: relative;
}
.contact-address:before{
    content: "";
    display: block;
    width: 60%;
    height: 100%;
    background: var(--lblue30);
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%);
    position: absolute;
    top: 0;
    right: 0;
}
.contact-h5{
    font-weight: 500;
    color: var(--black) !important;
}
.contact-address a{
    color: var(--black);
}
.contact-wrap b{
    color: var(--red);
}
.contact-table{
    width: 100%;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0 5px;
}
.contact-table th{
    width: 10em;
    padding: 1em 0;
}
.contact-table td{
    background: var(--back);
    padding: 1em;
}
.contact-table td.contact-btn{
    background: #fff;
}
.contact-table input,
.contact-table textarea{
    width: 100%;
    border: none;
    padding: 1em;
}
.contact-table textarea{
    height: 10em;
}
.contact-table input[type="checkbox"],
.contact-table input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 1em;
}
.contact-privacy a{
    color: var(--blue);
}
.contact-privacy a:hover{
    text-decoration: underline;
}
.contact-att{
    margin-bottom: 0.2em;
    font-size: clamp(11px, 1.1vw, 13px);
    color: #666;
    line-height: 1.4;
    padding-left: 1em;
    text-indent: -1em;
}
.contact-att:last-child{
    margin-bottom: 0.7em;
}
.contact-att:before{
    content: "※";
}
@media screen and (max-width: 680px) {
    .contact-table,
    .contact-table tbody,
    .contact-table tr,
    .contact-table th,
    .contact-table td{
        display: block;
        width: 100%;
    }
    .contact-table th{
        padding-bottom: 0;
    }
    .contact-table input,
    .contact-table textarea {
        padding: 0.5em;
    }
}
@media screen and (max-width: 580px) {
    .contact-address{
        padding: 2em 1em;
    }
}

/*CF7*/
.wpcf7-radio .wpcf7-list-item{
    margin-right: 1em;
}
@media screen and (max-width: 880px) {
    .wpcf7-radio .wpcf7-list-item{
        display: block;
        margin-right: 0;
    }
}

/*VALIDATION*/
.contact-table .wpcf7-list-item{
    margin-left: 0;
}
.contact-table .just-validate-error-label{
    color: var(--red) !important;
    font-size: clamp(12px, 1.1vw, 14px)
}

/*CF7 BUTTON*/
.cf7-confirm-btn{
	display: inline-block;
	cursor: pointer;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    line-height: 1;
    padding: 0.7em 0.5em;
    text-align: center;
    position: relative;
    transition: 0.2s all ease-in;
}
.cf7-confirm-btn:hover{
    background: #fff;
    color: var(--blue);
}

/*CONFIRM*/
.cf7-confirm-area{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.cf7-confirm-area.is-open{
    opacity: 1;
    visibility: visible;
}
.cf7-confirm-box{
    background: #fff;
    padding: 3em;
    max-width: 980px;
    width: 90%;
    height: 80vh;
    overflow-y: auto;
}
.confirm-item{
    background: var(--back);
    padding: 1em;
    margin-bottom: 1em;
}
.confirm-message {
    display: block;
}
.confirm-btn p{
    display: flex;
    justify-content: center;
    gap:5px;
}
.confirm-btn p .btn{
    font-size: 16px;
    background: var(--blue);
    color: #fff;
    padding: 0.4em 0.5em;
    width: 8em;
}
.confirm-btn p .btn:after{
    display: none;
}
.confirm-btn p .btn:hover{
    background: #fff;
    color: var(--blue);
}
.rate-limit-anchor input{
  display:none;
}
@media screen and (max-width: 680px) {
    .cf7-confirm-box{
        padding: 3em 1em;
    }
}

/*THANKS*/
.wpcf7-response-output{
    display: none;
}
@media screen and (max-width: 680px) {
    .contact-wrap p br{
        display: none;
    }
    .contact-address p br{
        display: block;
    }
}

/*TERMS*/
.terms-wrap{
    max-width: 980px;
    width: 90%;
    margin: 0 0 5em auto;
}
.terms-lead{
    background: var(--back);
    padding: 3em 5em;
}
.terms-wrap ul{
    padding-left: 1.5em;
}
.terms-wrap li{
    list-style: disc outside;
    line-height: 1.4;
    padding: 0.5em 0;
}
.terms-wrap a{
    color: var(--blue);
}
.terms-wrap a:hover{
    text-decoration: underline;
}
@media screen and (max-width: 1380px) {
    .terms-lead br{
        display: none;
    }
}
@media screen and (max-width: 980px) {
    .terms-lead{
        padding: 3em 2em;
    }
}
@media screen and (max-width: 680px) {
    .terms-wrap{
        width: 100%;
        margin: 0 0 3em;
    }
    .terms-lead{
        padding: 2em 1em;
    }
}


.cosmeadopt{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cosmeadopt-nav{
    width: 12em;
    margin-right: 3em;
}
.cosmeadopt-nav_a{
    display: block;
    padding: 0.7em 1em 0.5em;
    line-height: 1;
    border: 1px solid var(--dgray);
    border-left: 7px solid var(--dgray);
    margin-bottom: 5px;
    color: var(--black);
    font-size: clamp(13px, 2vw, 15px);
}
.cosmeadopt-nav_a:hover{
    border-left: 7px solid var(--blue);
    background: var(--back);
}
.cosmeadopt-nav_a.is-current{
    border-left: 7px solid var(--blue);
    background: var(--lblue30);
    pointer-events: none;
}
.cosmeadopt-nav_a small{
    font-size: clamp(11px, 1.2vw, 13px);
}
.cosmeadopt-main{
    flex: 1;
}
.cosmeadopt-h3 {
    font-size: clamp(21px, 3vw, 24px);
    line-height: 1;
    margin-bottom: 0.5em;
}
.cosmeadopt-h3 small {
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 700;
}
.cosmeadopt-related p{
    line-height: 1.4;
}
.cosmeadopt-related_a{
    border: 1px solid var(--blue);
    line-height: 1;
    padding: 0.5em 2em 0.5em 1.5em;
    color: var(--blue);
    font-size: clamp(12px, 1.2vw, 14px);
    margin: 0 2px;
}
.cosmeadopt-h4{
    font-size: clamp(16px, 3vw, 21px);
}
.cosmeadopt-h4:before{
    content: "●";
    color: var(--blue);
}
.cosmeadopt-group{
    padding-left: 5em;
}
.cosmeadopt-ol{
    margin-bottom: 3em;
}
.cosmeadopt-li{
    padding: 1em 0;
    border-bottom: 1px dotted var(--dgray);
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 0 1em;
}
.cosmeadopt-num{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    text-align: center;
    background: var(--dgray50); 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cosmeadopt-h5{
    grid-column: 2 / 3;
    grid-row: 1;
    line-height: 1.3;
    margin-bottom: 0.3em;
}
.cosmeadopt-p{
    grid-column: 2 / 3;
    grid-row: 2;
    line-height: 1.2;
    color: var(--dgray);
}
.cosmeadopt-pager{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    padding-left: 5em;
}
.cosmeadopt-pager_a{
    background: var(--blue);
    padding: 0.7em 1em;
    line-height: 1;
    color: #fff;
    position: relative;
    transition: .2s all;
}
.cosmeadopt-pager_prev:before,
.cosmeadopt-pager_next:after{
    content: "";
    display: block;
    width: 0.5em;
    height: 100%;
    background: var(--blue);
    position: absolute;
    top:0;
    transition: .2s all;
}
.cosmeadopt-pager_prev:before{
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    left: -0.5em;
}
.cosmeadopt-pager_next:after{
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    right: -0.5em;
}
.cosmeadopt-pager_a:hover,
.cosmeadopt-pager_a:hover:before,
.cosmeadopt-pager_a:hover:after{
    background: var(--dgray);
}
@media screen and (max-width: 980px) {
    .cosmeadopt-pager,
    .cosmeadopt-group{
        padding-left: 2em;
    }
}
@media screen and (max-width: 780px) {
    .cosmeadopt-nav{
        width: 100%;
        margin-right: 0;
        margin-top: 2em;
        order: 1;
    }
    .cosmeadopt-nav_ol {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
        gap: 5px;
    }
    .cosmeadopt-nav_a{
        text-align: center;
        padding: 0.5em 0;
    }
    .cosmeadopt-nav_a small{
        display: block;
    }
}
@media screen and (max-width: 480px) {
    .cosmeadopt-h3 {
        text-align: center;
    }
    .cosmeadopt-h3 small{
        display: block;
        margin: 0.5em auto;
        text-align: center;
    }
    .cosmeadopt-pager,
    .cosmeadopt-group{
        padding-left: 0;
    }
    .cosmeadopt-related span{
        display: block;
        margin-top: 0.5em;
    }
}