@charset "utf-8";

/* =========================================================================================
LAYOUT
=========================================================================================*/
.entry-content {
    position: relative;

    /* PDF,Word,Excelファイルのリンクボタン */
    & a:is(
        [href$=".pdf"],
        [href$=".docx"],
        [href$=".doc"],
        [href$=".xlsx"],
        [href$=".xls"],
        [href$=".zip"]
    ) {
        color:#fff;
        font-size:0.9375em;
        font-weight:var(--weight-bold);
        display:inline-flex;
        justify-content:center;
        align-items:center;
        gap:0.25em;
        margin-inline:0.5em;
        padding:0.25em 0.5em;
        width:fit-content;
        border-radius:4px;
        text-decoration:none;

        &::after {
            content:"";
            display:block;
            width:1.6em;
            aspect-ratio:1;
            background-color:#fff;
            mask:no-repeat center / contain;
        }
        & + a:is([href$=".pdf"], [href$=".docx"], [href$=".doc"], [href$=".xlsx"], [href$=".xls"]) {
            margin-top:0.5em;
        }
    }
    & a[href$=".pdf"] {
        background-color:#C95151;
        &::after { mask-image:url(../images/common/icon_pdf.svg);}
    }
    & a:is([href$=".docx"], [href$=".doc"]) {
        background-color:#3192AF;
        &::after { mask-image:url(../images/common/icon_word.svg);}
    }
    & a:is([href$=".xlsx"], [href$=".xls"]) {
        background-color:#499352;
        &::after { mask-image:url(../images/common/icon_excel.svg);}
    }
    & a[href$=".zip"] {
        background-color:#8c4fc9;
        &::after { mask-image:url(../images/common/icon_download.svg);}
    }

    /* pタグ */
    & p { margin-block:1em; line-height:2;}
}

/* キャッチ文 */
.page-catch {
    background-color:#F9F9F9;
    text-align:center;

    & .catch_title { font-size:2em; font-weight:var(--weight-bold); color:var(--color-main);}
    & .catch_text { margin-top:1em;}
}

.entry-content section:nth-of-type(1) /*ページの一番最初のsection*/ {
    padding-top: 50px;
}
.entry-content section:nth-last-of-type(1) /*ページの一番最最後のsection*/ {
    padding-bottom: 150px;
}

@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
PAGE HEADER
=========================================================================================*/
.page-header {
    min-height: 300px;
    background: url(../images/page/fv_page.webp) no-repeat center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 20px;
    margin: 0;
    position: relative;
    z-index: 1;

    & .page-title {
        text-align: center;
        font-weight: var(--weight-bold);
        letter-spacing: 0.025em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin: 0;
    }
    & .page-title-main {
        font-size:2.625em;
        font-weight:var(--weight-black);
    }
    & .page-title-sub {
        font-size:1.125em;
        font-weight:var(--weight-bold);
    }
}

@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}


/* =========================================================================================
CONTACT
=========================================================================================*/
body.contact #main .inner {
    max-width: var(--contents-width-small);
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Search
=========================================================================================*/
body.search .wp-block-buttons { margin-top:5em;}
/* -----------
search-area
------------*/
/* body.search .search-area {
    padding-bottom: 0;
    margin-block: 0;
}
body.search .search-area .inner {
    padding-block: 2em;
    background: var(--color-gray);
}
body.search .search-area form {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 30px;
    align-items: center;
    width: 90%;
    margin: auto;
}
body.search .search-area input[type="text"] {
    background-color: #fff;
    transition: 0.5s;
}
body.search .search-area input[type="submit"] {
    color: #fff;
    text-indent: -9999px;
    width: 60px;
    min-width: auto;
    aspect-ratio: 1 / 1;
    background: var(--color-main) url(../images/common/icon_search.svg) no-repeat center;
    background-size: 40%;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}
body.search .search-area input[type="submit"]:hover {
    opacity: 0.8;
    transition: 0.3s;
} */
body.search .search-count { display:block; margin-bottom:2em;}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* -----------
result-area
------------*/
body.search .result-area .search-count {
    color: var(--color-base-font);
    font-size: 1.5rem;
    text-align: center;
    display: block;
    margin-bottom: 1em;
}
body.search .result-area .post-list {
    margin-bottom: 50px;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
404
=========================================================================================*/
body.error404 .entry-header {
    text-align: center;
    padding: 40px 20px;
    margin: 0;
}
body.error404 .error-message {
    text-align: center;
    padding: 20px;
    margin-bottom: 30px;
}
body.error404 .error-message p img {
    max-width: 300px;
    margin: 0 auto 50px;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
正会員・賛助会員
=========================================================================================*/
.members {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.75em clamp(1rem, calc(-3.457rem + 8.696vw), 3.5rem);/* vp:820-1280px 16-56px */

    & .member_card { display:contents;}
    & article {
        grid-row:span 2;
        container-type:inline-size;
        /* display:grid;
        grid-template-rows:subgrid;
        gap:0; */
        border:solid 2px var(--color-main);
    }
    & .titleWrap {
        display:grid;
        grid-template-columns:1fr auto;
        gap:1em;
        padding:1em;
        background-color:var(--color-main);
        
        & h3 {
            font-size:clamp(1rem, calc(0.834rem + 0.568vw), 1.125rem);/* vp:468-820px 16-18px */
            color:#fff;
        }
        & :is(.areaLabel, .industryLabel) {
            align-self:start;
            font-size:0.9375em;
            font-weight:var(--weight-bold);
            color:var(--color-main);
            background-color:#fff;
            padding-inline:0.75em;
            border-radius:0.33em;
        }
    }
    & .m_grid {
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:0.625em 1.25em;
        height:fit-content;
        padding:1.25em;

        & dl {
            grid-column:span 4;
            display:grid;
            grid-template-columns:auto 1fr;
            align-items:baseline;
            gap:0.5em 1em;
            padding-bottom:0.625em;
            border-bottom:dashed 1px var(--color-main-light);

            &.half {
                grid-column:span 2;
                display:flex;
                flex-wrap:wrap;
            }
            /* 意向の兄弟要素がいない（aタグが無い） */
            &:not(:has(+ *)) { padding-bottom:0px; border-bottom:none;}
        }
        & dt {
            font-size:0.9375em;
            font-weight:var(--weight-bold);
            color:var(--color-main);
            padding-inline:0.5em;
            background-color:color-mix(in sRGB, #fff 90%, var(--color-main-light) 10%);
            border:solid 1px color-mix(in sRGB, #fff 75%, var(--color-main-light) 25%);
            border-radius:0.33em;

            &.half { min-width:8em; text-align:center;}
        }
        & a {
            grid-column:span 2 / -1;
            font-size:0.875em;
            font-weight:var(--weight-bold);
            color:var(--color-main);
            display:flex;
            justify-content:center;;
            align-items:center;
            gap:0.5em;
            margin-top:0.5em;
            padding:0.25em;
            border:solid 1px var(--color-main);
            transition:background-color var(--trans), color var(--trans);

            &::before {
                content:"";
                width:1.25em;
                aspect-ratio:1;
                background-color:currentColor;
                mask:url(../images/common/icon_site.svg) no-repeat center / contain;
                transition:background-color var(--trans);
            }
            &[href^="mailto"] { grid-column:span 2;}
            &[href^="mailto"]::before { mask-image:url(../images/common/icon_mail.svg);}

            /* hover */
            &:is(:focus-visible, :active){
                color:#fff;
                background-color:var(--color-main);
                text-decoration:none;
            }
            @media(hover:hover){
                &:hover {
                    color:#fff;
                    background-color:var(--color-main);
                    text-decoration:none;
                }
            }
        }
    }
}

@container (max-width:350px){
.members {
    & .titleWrap {
        display:flex;
        flex-direction:column;

        & :is(.areaLabel, .industryLabel) { align-self:end;}
    }
    & .m_grid {

        & dl { display:flex; flex-direction:column;}
        & dt { width:100%; text-align:center;}
        & :is(a, a[href^="mailto"]) { grid-column:1/-1;}
    }
}
}

@media only screen and (max-width: 820px) {
}

@media only screen and (max-width: 700px) {
.members {
    grid-template-columns:1fr;
}
}
@media only screen and (max-width: 468px) {
}




/* =========================================================================================
建築士事務所登録
=========================================================================================*/
/* 共通部分 */
body.registration {
    --tab-bgColor:#EEF8FF;
}
/* お知らせ部分 */
body.registration .registrationNews {
    padding-block:3.125em;
    background-color:#F9F9F9;

    & p { margin-block:0px;}
    & .registrationNews_wrap {
        display:grid;
        grid-template:
            "hgroup news" auto
            "button news" 1fr / auto 1fr;
        /* grid-template:
            "hgroup news" auto
            "button news" 1fr / auto min(850px, 100%); */
        align-items:start;
        gap:2em clamp(2rem, calc(-10.033rem + 23.478vw), 8.75rem);/* vp:820-1280px 32-140px */
    }
    & hgroup { grid-area:hgroup;}
    & .post-list { grid-area:news;}
    & .wp-block-buttons { grid-area:button;}

    & .post-list.column ul li article { grid-template-columns:100px 1fr;}
}
/* タブボタン部分 */
body.registration .tabButtons {
    display:flex;
    justify-content:center;
    gap:2em;

    & button {
        font-size:clamp(0.875rem, calc(0.543rem + 1.136vw), 1.125rem);/* vp:468-820px 14-18px */
        font-weight:var(--weight-bold);
        color:#fff;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        flex:0 1 300px;
        height:4em;
        background-color:var(--color-gray);
    }
    & button.active {
        position:relative;
        color:var(--color-main);
        border:solid 1px currentColor;
        border-bottom:none;
        background-color:color-mix(in sRGB, var(--color-main-light) 10%, #fff 90%);
    }
    & button.active::after {
        content:"";
        position:absolute;
        width:100%;
        height:3px;
        background-color:color-mix(in sRGB, var(--color-main-light) 10%, #fff 90%);
        inset:calc(100% - 1px) auto auto 0;
    }
}
/* アンカーリンク部分 */
body.registration .anchorLinks {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.25em;
    margin-bottom:3.5em;
    padding:1.25em;
    border-top:solid 1px var(--color-main);
    background-color:color-mix(in sRGB, var(--color-main-light) 10%, #fff 90%);

    & a {
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:1em;
        padding:0.5em 1em;
        border:solid 1px var(--color-main-light);
        background-color:#fff;
        color:var(--color-main);
        font-weight:var(--weight-bold);
        text-decoration:none;
    }
    & a::after {
        content:"";
        display:block;
        width:1em;
        aspect-ratio:1;
        background-color:currentColor;
        mask:url(../images/common/arrow.svg) no-repeat center / contain;
        rotate:90deg;
    }
}


@media only screen and (max-width: 820px) {
body.registration {
    
}
/* お知らせ部分 */
body.registration .registrationNews {
    & .registrationNews_wrap { 
        grid-template:
            "hgroup" auto
            "news" auto
            "button" 1fr / 1fr;
        gap:0px;
    }
    & .wp-block-buttons { justify-content:center; margin-top:1em;}
}
/* タブボタン部分 */
body.registration .tabButtons {
    justify-content: space-evenly;
    gap:0;

    & button { flex-basis:calc((100% - 1.5em) / 2);}
}
}
@media only screen and (max-width: 468px) {
}