@charset "utf-8";
/* =========================================================================================
Layout
=========================================================================================*/
h2.wp-block-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    gap: 0.5em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
MAIN VISUAL
=========================================================================================*/
.main-visual {
    position: relative;

    & img {
        width:min(1387px, 115vw);
        max-width:unset;
        margin-inline:50% auto;
        translate:-50% 0;
    }
    & .catch {
        position:absolute;
        z-index:1;

        /* 基本的にはコンテンツ幅 - 2.5em だが、画面幅 < コンテンツ幅 となるあたりで + 1em へ変更 */
        inset:56.5714% auto auto max(1em, calc((100vw - var(--contents-width-main)) / 2 - 2.5em));

        & p {
            display:flex;
            align-items:center;
            padding-inline:1.25rem;
            width:fit-content;
            height:3.625rem;
            background-color:#fff;
        }
        & p:nth-of-type(1) {
            font-size:clamp(1.25rem, calc(0.48rem + 2.632vw), 2.125rem);/* vp:468-1000px 20-34px */
            font-weight:var(--weight-black);
            line-height:1.5;
            word-break:keep-all;
        }
        & p:nth-of-type(2) {
            font-size:clamp(0.813rem, calc(0.593rem + 0.752vw), 1.063rem);/* vp:468-1000px 13-17px */
            font-weight:var(--weight-bold);
            word-break:auto-phrase;
        }
    }
}
@media only screen and (max-width: 820px) {
.main-visual {
    & .catch {
        inset-inline:0 auto;
        width:71.5%;

        & p { width:100%; height:auto;}
        & p:nth-of-type(1) { padding-top:1rem;}
        & p:nth-of-type(2) { padding-bottom:1rem;}
    }
}
}
@media only screen and (max-width: 468px) {
}


/* =========================================================================================
news（お知らせ）
=========================================================================================*/
.news {
    & .post-list-head {
        display:flex;
        justify-content:space-between;
        align-items:end;
        gap:1em;
    }
    & .catButtons {
        --column-count:6;/* カラム数 */
        display:grid;
        grid-template-columns:repeat(var(--column-count), auto);
        gap:0.5em 1.25em;

        & button {
            --triangle-max-height:5px;
            --catColor:var(--color-main);/* 初期設定 */
    
            position:relative;
            display:grid;
            place-items:center;
            font-size:1.125em;
            font-weight:var(--weight-bold);
            min-width:7.5em;
            min-height:42px;
            margin-bottom:var(--triangle-max-height);
            padding:0.5em 1em;
            transition:color var(--trans);
    
            &::before {
                content:"";
                position:absolute;
                width:100%;
                height:3px;
                inset:auto auto 0 0;
                background-color:var(--catColor);
                transition:height var(--trans);
                z-index:-1;
            }
            &::after {
                content:"";
                position:absolute;
                inset:100% auto auto 50%;
                width:auto;
                height:0px;
                aspect-ratio:8/5;
                background-color:var(--catColor);
                clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
                translate:-50% 0;
                transition:height var(--trans);
            }
    
            &:is(:focus-visible, :active, .active) {
                color:#fff;
                &::before { height:100%;}
                &::after { height:var(--triangle-max-height);}
            }
            @media(hover:hover) {
                &:hover { color:#fff;}
                &:hover::before { height:100%;}
                &:hover::after { height:var(--triangle-max-height);}
            }
        }
    }

    /* 表示する投稿記事の切り替え処理（.newsに付与されたクラスに応じて切り替え） */
    & .post-list { display:none;}
    &.all .post-list.posts_all { display:block;}
    &.info .post-list.posts_info { display:block;}
    &.seminar .post-list.posts_seminar { display:block;}
    &.member .post-list.posts_member { display:block;}
    &.event .post-list.posts_event { display:block;}
    &.reg .post-list.posts_reg { display:block;}

    & .wp-block-buttons {
        justify-content:center;
        margin-top:3.125em;

        & a {
            font-size:1.125em;
            padding:1.125em;
            width:300px;
        }
    }
}
@media only screen and (max-width:1200px){
.news {
    & .catButtons { --column-count:3;}
}
}
@media only screen and (max-width:700px){
.news {
    .post-list-head {
        align-items:start;
        flex-direction:column;
    }
    & .catButtons {
        grid-template-columns:repeat(var(--column-count), 1fr);
        column-gap:1em;
        width:100%;

        & button {
            font-size:1em;
            line-height:1.2;
            padding-inline:0.5em;
            max-width:unset;
        }
    }
    & .br_other { display:block;}
}
}



/* =========================================================================================
memberSupport（会員向けサポート・各種手続き）
=========================================================================================*/
.memberSupport {
    background-color:var(--bg-gridLine-bgColor);
    background-image:var(--bg-gridLine);

    & h2 {
        font-size:clamp(1.25rem, calc(0.585rem + 2.273vw), 1.75rem);/* vp:486-820px 20-28px */
        font-weight:var(--weight-black);
        display:flex;
        align-items:center;
        gap:0.5em;
        margin-block:0.5em;

        &:before {
            content:"";
            display:block;
            width:2.3em;
            height:4px;
            background-color:var(--color-main);
        }
    }
    & ul {
        display:grid;
        grid-template-columns:repeat(6, 1fr);
        gap:clamp(1.25rem, calc(0.835rem + 1.42vw), 1.563rem);/* vp:468-820px 20-25px */
        margin-top:2.5em;

        & .column2 { grid-column:span 3;}
        & .column3 { grid-column:span 2;}
        
        & a {
            display:grid;
            grid-template:
                "icon h3 arrow" auto
                "icon p arrow" 1fr / auto 1fr auto;
            gap:0 0.875em;
            padding:1.25em 1em;
            height:100%;
            background-color:#fff;
            border:solid 1px var(--color-gray);

            &:is(:focus-visible, :active) .arrow { translate:0.5em 0%;}
            @media(hover:hover){
                &:hover .arrow { translate:0.5em 0%;}
            }
        }
        & .icon { grid-area:icon; width:3.75em;}
        & h3 { grid-area:h3; color:var(--color-main); font-size:1.0625em; font-weight:var(--weight-black);}
        & p { grid-area:p; font-size:0.9375em;}
        & a { color:inherit; text-decoration:none;}
        & .arrow {
            grid-area:arrow;
            align-self:center;
            height:fit-content;
            background-color:color-mix(in sRGB, #fff 75%, var(--color-main-light) 25%);
            border-radius:3px;
            transition:translate var(--trans);

            &::before {
                content:"";
                display:block;
                width:1.25em;
                aspect-ratio:1;
                background-color:var(--color-main);
                mask:url(../images/common/arrow.svg) no-repeat center / 0.5em auto;
            }
        }
        & .column2 {

            & .icon { width:5em;}
            & h3 { font-size:1.3125em;}
            & p { font-size:1.0625em;}
            & .arrow::before { width:2em;}
        }
    }
}
@media only screen and (max-width:1200px){
.memberSupport {
    & ul {
        & .column2 { grid-column:1/-1;}
        & .column3 { grid-column:span 3;}
    }
}
}
@media only screen and (max-width:820px){
.memberSupport {
    & ul {
        & .column3 { grid-column:1/-1;}
    }
}
}



/* =========================================================================================
relatedLinks（関連機関・関連サイト）
=========================================================================================*/
.relatedLinks {
    background:var(--color-main) url(../images/top/relatedLinks_bg.svg) repeat-x top center / 30px auto;

    & h2 {
        font-size:clamp(1.25rem, calc(0.918rem + 1.136vw), 1.5rem);/* vp:468-820px 20-24px */
        color:#fff;
        display:flex;
        align-items:center;
        gap:0.5em;

        &::before {
            content:"";
            display:block;
            width:1em;
            height:1em;
            border:solid 0.25em #5EA6D5;
            border-radius:100vmax;
        }
    }
    & ul {
        margin-top:2.5em;
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
        gap:clamp(1.25rem, calc(0.419rem + 2.841vw), 1.875rem);/* vp:468-820px 20-30px */
    }
    & a {
        display:grid;
        grid-template:
            "h3 icon" auto
            "p icon" 1fr / 1fr auto;
        gap:0.25em 1em;
        padding:1em 1.25em;
        background-color:#fff;
        border:solid 5px rgb(0 0 0 / 0.05);
        color:inherit;
        text-decoration:none;

        &::after {
            grid-area:icon;
            content:"";
            width:1.25em;
            aspect-ratio:1;
            background-color:var(--color-main);
            mask:url(../images/common/icon_link.svg) no-repeat center / contain;
            align-self:center;
        }
        &:not([target="_blank"])::after {
            opacity:0;
            visibility:hidden;
        }
        & h3 {
            grid-area:h3;
            font-size:1.1875em;
            color:var(--color-main);
        }
        & p { grid-area:p;}
    }
}


/* =========================================================================================
banners（企業ロゴ）
=========================================================================================*/
.banners {

    & ul {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
        gap:2em 3em;
    }
    & .wp-block-buttons {
        margin-top:3em;
        justify-content:center;

        & a {
            font-size:1.125em;
            gap:0 1em;
            padding-block:1.25em;
            padding-inline:2em 4em;
        }
    }
}
@media only screen and (max-width:820px) {
.banners {
    & ul {
        grid-template-columns:repeat(2, 1fr);
        gap:1.25em;
    }
    & .wp-block-buttons a {
        flex-direction:column;
        align-items:start;
    }
}
}