@charset "utf-8";
/*
Theme Name: ksjk
Author: BASARA
Version: 1.0
*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}
*:before,
*:after {
    pointer-events: none;
}
:root {
    --color-base-font: #343434;
    /* light < main < deep < dark */
    --color-main:#0472B9;
    --color-main:#0472B9;
    --color-main-light:#5CABDE;
    --color-main-deep:#0063A3;
    --color-main-dark:#004A7B;
    --color-attention: #b90404;
    --color-gray: #c9c9c9;
    --contents-width-small: 800px;
    --contents-width-main: 1200px;
    --contents-width-large: 1680px;
    --weight-Light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    --header-height:90px;/* headerの高さ（アンカーリンクなどで使用） */
    --trans:0.3s; /* transition-durationの基礎値 */
    --bg-gridLine-borderColor:#f2f2f2; /* 罫線の色 */
    --bg-gridLine-borderWidth:2px;       /* 罫線の太さ */
    --bg-gridLine-bgColor:#F6F6F6;     /* 背景の色 */
    --bg-gridLine-bgWidth:18px;          /* 背景の幅 */
    --bg-gridLine:
        repeating-linear-gradient(
            90deg,
            var(--bg-gridLine-borderColor),
            var(--bg-gridLine-borderColor) var(--bg-gridLine-borderWidth),
            transparent var(--bg-gridLine-borderWidth),
            transparent var(--bg-gridLine-bgWidth)
        ),
        repeating-linear-gradient(
            0deg, 
            var(--bg-gridLine-borderColor),
            var(--bg-gridLine-borderColor) var(--bg-gridLine-borderWidth),
            transparent var(--bg-gridLine-borderWidth),
            transparent var(--bg-gridLine-bgWidth)
        );
}
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    color: var(--color-base-font);
    font-size:clamp(0.875rem, calc(0.709rem + 0.568vw), 1rem);/* vp:468-820px 14-16px */
    font-weight: var(--weight-medium);
    line-height: 1.8;
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
    min-width: 375px;
    margin: 0;
    padding: 0;

    &:has(header #g-navi-area.panelactive) { height:100dvh; overflow:hidden;}
}
[id] { scroll-margin-top:var(--header-height);}
div,
p,
ul,
ul li,
dl,
dt,
dd {
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img,
video,
object {
    max-width: 100%;
    height: auto;
    border: none;
}
img {
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
}
a {
    color:var(--color-base-font);
    transition: all ease var(--trans);

    &:visited { color:color-mix(in sRGB, #fff 40%, var(--color-base-font) 60%);}
    &:is([href^="tel"], [href^="mailto"]) {
        color:inherit;
        text-decoration: none;
        pointer-events: none;
        text-emphasis: none !important;
    }

    &:is(:focus-visible, :active) {
        color:var(--color-main);
        opacity: 0.8;
        text-decoration: underline;
    }
    @media(hover:hover) {
        &:hover {
            color:var(--color-main);
            opacity: 0.8;
            text-decoration: underline;
        }
    }
}
hgroup.newsTitle {
    font-size:clamp(1rem, calc(0.834rem + 0.568vw), 1.125rem);/* vp:468-820px 16-18px */
    font-weight:var(--weight-bold);
    line-height:1.2;

    & h2 { font-size:1em; color:var(--color-main);}
    & p { font-size:2.73em;}
}

.pc { display: inherit;}
.tb { display: none;}
.mb { display: none;}
.br_other { display:none;}
@media only screen and (max-width:1100px){
    :root {
        --header-height:70px;
    }
}
@media only screen and (max-width: 820px) {
    .pc { display: none;}
    .tb { display: block;}
    .mb { display: none;}
}
@media only screen and (max-width: 468px) {
    a[href^="tel:"] { pointer-events: all;}
    .pc { display: none;}
    .tb { display: none;}
    .mb { display: block;}
}

/* =========================================================================================
Header
=========================================================================================*/
#header {
    width: 100%;
    height:var(--header-height);
    background: #fff;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 1001;
    transition: 0.5s;

    & a { text-decoration:none; color:inherit;}
    & .inner {
        max-width:unset;
        width:100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 20px;
        padding: 0;
        position: relative;
    }
    & h1 {
        font-size: 1em;
        line-height: 1;
    }
    & .logo {
        width:300px;
        margin-left:1em;

        &:is(:focus-visible, :active){ opacity:1;}
        @media(hover:hover){ &:hover { opacity:1;}}
    }
}


/*globalnavi ----------------------------------------------------------*/
#header #g-navi-area {
    width: 100%;
    height: 100%;
}
#header #g-navi-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
}
#header #g-navi {
    width: 100%;
    display:contents;

    & a {
        font-weight:var(--weight-bold);

        &:is(:focus-visible, :active) { text-decoration:none;}
        @media(hover:hover) { &:hover { text-decoration:none;}}

        &[href*="/contact"] { background-color:var(--color-main); color:#fff;}
    }
    & .menu {
        width: 100%;
        height:100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: right;

        & > li { height:100%;}
        & > li > :is(button, a) {
            display:flex;
            align-items:center;
            justify-content:center;
            gap:0.25em;
            height:100%;
            padding-inline:1em;
        }
        & button:after {
            content:"";
            display:block;
            width:0.75em;
            aspect-ratio:1;
            background-color:var(--color-main);
            mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
            rotate:90deg;
            transition:scale var(--trans);
        }
        & button:is(.active, :hover, :focus),
        & button:has( + .sub-menu:is(:hover, :focus-within)){
            & + .sub-menu { opacity:1; visibility:visible;}
            &::after { scale:-1 1;}
        }
    }
    & .menu-item-has-children { position:relative;}
    & .sub-menu {
        position:absolute;
        min-width:100%;
        opacity:0;
        visibility:hidden;
        transition:opacity var(--trans) visibility var(--trans);

        & li + li { border-top:solid 1px var(--color-main-light);}
        & a {
            display:block;
            padding:0.5em 1em;
            background-color:var(--color-main);
            color:#fff;
            white-space:nowrap;
        }
    }
}
#header .openbtn { display:none;}

@media only screen and (max-width:1300px){
#header #g-navi {
    & a { font-size:14px;}
    & .menu > li > :is(button, a) { padding-inline:0.5em;}
}
}

@media only screen and (max-width:1100px){
#header {
    & .inner { justify-content:space-between;}

    /* メニューボタン */
    & .openbtn {
        position:relative;
        display:block;
        width:var(--header-height);
        height:var(--header-height);
        background-color:var(--color-main);

        & span {
            position:absolute;
            inset:0;
            margin:auto;
            display:block;
            width:55%;
            height:3px;
            background-color:#fff;
            transition:translate var(--trans), opacity var(--trans), rotate var(--trans);
        }
        & span:nth-of-type(1) { translate:0 12px;}
        & span:nth-of-type(3) { translate:0 -12px;}

        &.active {
            & span:nth-of-type(1) { rotate:45deg; translate:0 0;}
            & span:nth-of-type(2) { opacity:0;}
            & span:nth-of-type(3) { rotate:-45deg; translate:0 0;}
        }
    }
    
    & #g-navi-area {
        position:absolute;
        width:100%;
        height:0px;
        overflow:clip;
        inset:var(--header-height) auto auto 0;
        transition:height var(--trans);

        & a { color:#fff;}
        & .menu {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
            grid-auto-rows:min-content;
            align-items:start;
            gap:1em 8.5vw;
            padding:50px 8.5vw;
            background-color:var(--color-main);

            & > li { height:auto;}
            & > li > :is(button, a) {
                font-size:1.3125em;
                color:#fff;
                width:100%;
                padding-block:0.25em;
                justify-content:space-between;
                border-bottom:solid 1px #fff;

                &::after {
                    content:"";
                    width:1em;
                    aspect-ratio:1;
                    display:block;
                    background-color:currentColor;
                }
            }
            & li > a[href*="/contact"] {
                justify-content:center;
                margin-top:1.5em;
                padding-block:1lh;
                color:var(--color-main);
                background-color:#fff;
            }
            & button::after {
                --width-half:1.5px;
                rotate:0deg;
                mask:none;
                /* ＋アイコン */
                clip-path:polygon(
                    calc(50% - var(--width-half)) 0%,
                    calc(50% + var(--width-half)) 0%,
                    calc(50% + var(--width-half)) calc(50% - var(--width-half)),
                    100% calc(50% - var(--width-half)),
                    100% calc(50% + var(--width-half)),
                    calc(50% + var(--width-half)) calc(50% + var(--width-half)),
                    calc(50% + var(--width-half)) 100%,
                    calc(50% - var(--width-half)) 100%,
                    calc(50% - var(--width-half)) calc(50% + var(--width-half)),
                    0% calc(50% + var(--width-half)),
                    0% calc(50% - var(--width-half)),
                    calc(50% - var(--width-half)) calc(50% - var(--width-half))
                );
                transition:clip-path var(--trans);
            }
            & > li a::after {
                mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
            }
            /* サブメニュー展開処理 */
            & button.active{
                & + .sub-menu { padding-top:1em; height:auto;}
                &::after {
                    scale:1 1;
                    clip-path:polygon(
                        calc(50% - var(--width-half)) calc(50% - var(--width-half)),
                        calc(50% + var(--width-half)) calc(50% - var(--width-half)),
                        calc(50% + var(--width-half)) calc(50% - var(--width-half)),
                        100% calc(50% - var(--width-half)),
                        100% calc(50% + var(--width-half)),
                        calc(50% + var(--width-half)) calc(50% + var(--width-half)),
                        calc(50% + var(--width-half)) calc(50% + var(--width-half)),
                        calc(50% - var(--width-half)) calc(50% + var(--width-half)),
                        calc(50% - var(--width-half)) calc(50% + var(--width-half)),
                        0% calc(50% + var(--width-half)),
                        0% calc(50% - var(--width-half)),
                        calc(50% - var(--width-half)) calc(50% - var(--width-half))
                    );
                }
            }
        }
        & .sub-menu {
            position:static;
            height:0px;
            overflow:hidden;
        }
        & .sub-menu a {
            display:flex;
            align-items:baseline;
            gap:1em;
            font-size:1.125em;
            padding-inline:1em;
            background-color:var(--color-main-deep);
            white-space:wrap;
        }
        & .sub-menu a::before {
            flex-shrink:0;
            content:"";
            width:1em;
            aspect-ratio:1;
            background-color:var(--color-main);
            mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
        }

    }
    & #g-navi-area.panelactive {
        height:calc(100dvh - var(--header-height));
    }
}
}


/* =========================================================================================
Footer
=========================================================================================*/
#footer {
    position: relative;
    background-color:var(--color-main-dark);
    color:#fff;

    & a { text-decoration:none; color:inherit;}
    & .wp-block-buttons a {
        padding-block:1em;
        padding-inline:2em 4em;

        &:is(:focus-visible, :active) { color:var(--color-main);}
        @media(hover:hover) { &:hover { color:var(--color-main);}}
    }
    & .info {
        display:flex;
        justify-content:space-between;
        gap:1em;
        padding-block:2em;
    }
    & .logo {
        width:300px;
        filter:brightness(0) invert(1);/* 真っ黒にして、色反転 */
    }
    & address {
        font-size:0.875em;
        margin-top:1em;
        font-style:normal;

        & ul {
            margin-top:1em;
            display:flex;
            flex-wrap:wrap;
            gap:0.5em 1em;
        }
    }
    & .info_r {
        display:flex;
        justify-content:end;
        align-items:center;
        flex-wrap:wrap;
        gap:1em 2em;
    }
    & .f_contacts_tel {
        font-size:0.9375em;
        font-weight:var(--weight-bold);

        & a[href^="tel"] {
            font-size:1.7333em;
        }
        & a[href^="tel"]:before {
            content:"";
            display:inline-block;
            margin-right:0.25em;
            width:0.75em;
            aspect-ratio:1;
            background-color:currentColor;
            mask:url(assets/images/common/icon_tel.svg) no-repeat center / contain;
        }
    }

    & .copyright {
        font-size:0.875em;
        display: block;
        text-align: center;
        border-top:solid 1px var(--color-main-deep);
        padding: 1em;
    }
}
@media only screen and (max-width:820px){
#footer {

    & .info { justify-content:center;}
    & address {
        & p { text-align:center;}
        & ul { justify-content:center; column-gap:2em;}
        & .addr_label {
            margin-right:0.5em;
            padding:0.25em 1em;
            background-color:#084269;
            border-radius:3px;
        }
        & .dot { display:none;}
    }
    & .info_r { display:none;}
}
}

/* =========================================================================================
Page Top
=========================================================================================*/
#page-top {
    display: none; /*最初は非表示*/
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
}
#page-top a {
    color: rgba(0, 0, 0, 0);
    line-height: 1;
    text-decoration: none;
    font-weight: var(--weight-bold);
    text-indent: -9999px;
    width: 50px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-main);
    position: relative;
}
#page-top a:before,
#page-top a::after {
    content: "";
    width: 3px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: calc(50% - 2.5px);
    transform-origin: 50% 1.5px;
    translate: 0 -40%;
    transition: 0.3s;
}
#page-top a::before {
    transform: rotate(45deg);
}
#page-top a::after {
    transform: rotate(-45deg);
}
#page-top a:hover {
    background-color: var(--color-gray);
    opacity: 1;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
    #page-top a {
        width: 40px;
    }
    #page-top a:before,
    #page-top a::after {
        height: 13px;
    }
}

/* =========================================================================================
Layout
=========================================================================================*/
#wrapper {
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#contents {
    padding-block:var(--header-height) 0;
    margin: 0 auto;
    position: relative;
}
#main {
    margin: 0;
    padding: 0;
}
section {
    position: relative;
    padding-block:4.375em 5em;
    margin: 0;
}
.inner {
    max-width: var(--contents-width-main);
    width: calc(100% - 40px - 40px); /*左右の余白40pxずつ*/
    margin: 0 auto;
    position: relative;
}
@media only screen and (max-width: 980px) {
    #contents {
        padding-block: 60px 0;
    }
}
@media only screen and (max-width: 820px) {
    section {
        /* padding-block: 75px; */
    }
    .inner {
        width: calc(100% - 30px - 30px);
    }
}
@media only screen and (max-width: 468px) {
    section {
        /* padding-block: 50px; */
    }
    .inner {
        width: calc(100% - 20px - 20px);
    }
}

/* iframe ----------------------------------------------------------------------*/
#contents iframe {
    pointer-events: all !important;
}

/*sidebar ----------------------------------------------------------------------*/
#contents .post-content:has(#sidebar) /*#sidebarがあるとき*/ {
    width: calc(100% - 40px - 40px);
    max-width: var(--contents-width-main);
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 5%;
    padding-block: 50px;
    margin: 0 auto;
}
#contents .post-content:has(#sidebar) .post-content-main {
    width: calc(100% - 5% - 200px);
    order: 2;
}
#contents .post-content:has(#sidebar) .post-content-main section {
    padding-top: 0;
}
#contents .post-content:has(#sidebar) .post-content-main .inner {
    width: 100%;
}
#sidebar {
    width: 200px;
    padding-block: 0 50px;
    margin: 0;
    order: 1;
}
#sidebar h2 {
    font-size: 1.25rem;
    border-bottom: 1px solid;
    padding-block: 0.5em;
    margin-bottom: 0.5em;
}
#sidebar nav {
    margin-bottom: 50px;
}
#sidebar .banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
    gap: 5%;
}
#sidebar .banner a {
    display: block;
}
@media only screen and (max-width: 820px) {
    #contents .post-content:has(#sidebar) /*#sidebarがあるとき*/ {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    #contents .post-content:has(#sidebar) .post-content-main {
        width: 100%;
        order: 1;
    }
    #contents .post-content:has(#sidebar) .post-content-main .inner,
    #sidebar {
        width: calc(100% - 30px - 30px);
    }
    #sidebar {
        order: 2;
        margin-inline: auto;
    }
}
@media only screen and (max-width: 468px) {
    #contents .post-content:has(#sidebar) .post-content-main .inner,
    #sidebar {
        width: calc(100% - 20px - 20px);
    }
}

/* =========================================================================================
Post list
=========================================================================================*/
/*common*/
.post-list {
    width: 100%;
    margin: 0;
    padding: 0;
}
.post-list ul {
    width: 100%;
    margin: 0;
    padding: 0;
}
.post-list ul a {
    color: var(--color-base-font);
    display: inline-block;
}
.post-list ul li {
    width: 100%;
}
.post-list .no-post {
    text-align: center;
    display: block;
    padding: 10vh 1em;
}
.post-list .cat {
    font-size: 0.9em;
    line-height: 1.4;
    height: auto;
}
.post-list .cat a {
    text-align: center;
    display: block;
    min-width: 90px;
    padding: 0.375em 0.5em 0.25em;
    border:solid 2px var(--catColor);
    color:var(--catColor);
    font-weight:var(--weight-bold);
    text-decoration:none;
}


/*column ------------------------------------------------------------*/
.post-list.column ul {
    margin-bottom: 20px;
}
.post-list.column ul li {
    border-bottom: 1px solid var(--color-gray);
    padding: 1.5em 0 1.25em;
}
.post-list.column ul li article {
    display: grid;
    grid-template-columns:6em 9em 1fr;
    align-items: baseline;
    justify-content: left;
    gap: 0 1em;

    &:not(:has(.cat)) { grid-template-columns:6em 1fr;}
}
.post-list.column .date {
    color: var(--color-base-font);
    font-size: 1.0625em;
}
.post-list.column .title {
    font-size: clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem); /* min: 16px, max: 18px */
    font-weight: var(--weight-medium);
    line-height: 1.5;
}
.post-list.column .title a {
    display: block;
    padding-right: 2.25em;
    position: relative;
    z-index: 1;

    &::after {
        content: "";
        background-color:var(--color-main);
        width: 1em;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 50%;
        translate: -100% -50%;
        z-index: 1;
        mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
        transition:translate var(--trans);
    }

    &:is(:focus-visible, :active){
        color: var(--color-main);
        opacity: 1;

        &:after { translate: 0% -50%;}
    }
    @media (hover:hover) {
        &:hover {
            color: var(--color-main);
            opacity: 1;
            
            &:after { translate:0% -50%;}
        }
    }
}
@media only screen and (max-width: 820px) {
    .post-list.column ul li article {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em 1em;
    }
    .post-list.column .date {
        width: auto !important;
    }
    .post-list.column .title {
        width: 100% !important;
    }
}
@media only screen and (max-width: 468px) {
}

/* row ------------------------------------------------------------------------*/
.post-list.row ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.post-list.row li {
    padding: 1em;
    border: 1px solid;
}
.post-list.row li:only-child {
    max-width: 380px;
}
.post-list.row li article {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.post-list.row li article a {
    display: block;
}
.post-list.row .thumbnail {
    border: 1px solid;
    position: relative;
}
.post-list.row .thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}
.post-list.row .thumbnail .new {
    color: #fff;
    font-size: small;
    background: var(--color-main);
    padding: 2px 10px 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}
.post-list.row .date {
    width: 100%;
}
.post-list.row .title {
    font-size: clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* min: 18px, max: 20px */
    font-weight: var(--weight-bold);
    line-height: 1.5;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
FORM
=========================================================================================*/
.grecaptcha-badge {
    /*visibility: hidden;*/
} /*reCAPTCHAバッジ（ロゴマーク）を消す ※設定がうまくいったことを確認してからこのCSSを有効化すること*/
.entry-content form {
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
.entry-content form ::placeholder {
    color: #ccc;
}
.entry-content form input[type="text"],
.entry-content form input[type="tel"],
.entry-content form input[type="email"],
.entry-content form textarea,
.entry-content form select {
    width: 100%;
    background: #fefefe;
    border: 1px solid var(--color-gray);
    padding: 0.75em 1em;
    transition: 0.3s;
}
.entry-content form input:focus,
.entry-content form textarea:focus {
    border: 1px solid var(--color-gray);
}
.entry-content form .wpcf7-radio {
    /*ラジオボタンの位置調整*/
    margin-top: 1em;
    display: block;
}
.entry-content form .wpcf7-radio .wpcf7-list-item.first {
    /*ラジオボタンの一番最初のmargin調整*/
    margin: 0;
}
.entry-content form select {
    position:relative;
    width: fit-content;
    min-width: 300px;
    padding-right:3em;
    /* color:var(--color-main);
    border:solid 2px currentColor; */

    &::after {
        content:"";
        position:absolute;
        display:block;
        width:1em;
        aspect-ratio:1;
        background-color:currentColor;
        mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
    }
}
.entry-content form .post-add input {
    max-width: 150px;
}
.entry-content form .select-pref select {
    min-width: 100px;
}
.entry-content form input[type="submit"],
.entry-content form input[type="button"] {
    color: #fff;
    font-weight: var(--weight-bold);
    background-color: var(--color-base-font);
    padding: 0.75em 1.5em;
    line-height: 1.4;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    border-radius: 100px;
    min-width: 320px;
    border: none;
    transition: 0.3s;
}
.entry-content form input[type="submit"] {
    background-color: var(--color-main);
}
.entry-content form input[type="button"] {
    background-color: #555;
}
.entry-content form input[type="submit"]:hover,
.entry-content form input[type="button"]:hover {
    opacity: 0.8;
}
.entry-content form .btn-area {
    margin-top: 3em;
}
.entry-content form .btn-area p {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    width: 100%;
}
.entry-content form .btn-area p br {
    display: none;
}
.entry-content form .btn-area .wpcf7-spinner {
    position: absolute;
    right: -80px;
    top: 30%;
}
@media only screen and (max-width: 820px) {
    .entry-content form .btn-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 800px;
    }
    .entry-content form .btn-area p {
        position: relative;
    }
    .entry-content form .btn-area .wpcf7-spinner {
        position: absolute;
        right: -80px;
        top: 30%;
    }
}
@media only screen and (max-width: 468px) {
    .entry-content form input[type="submit"],
    .entry-content form input[type="button"] {
        width: 100%;
        min-width: 100%;
    }
}

/*問い合わせ画面 --------------------------------------------------------*/
.entry-content .contact-bg {
    padding-block: 50px;
    margin: 0;
}
.entry-content .contact-bg .privacy {
    text-align: center;
    margin-bottom: 2em;
}
.entry-content .contact-bg .privacy .wpcf7-list-item {
    margin: 0;
}
.entry-content .contact-bg .privacy a {
    text-decoration: underline;
}
.entry-content .contact-bg .center {
    text-align: center;
    margin-top: 3em;
}
.entry-content form dl {
    width: 100%;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap:0px;
    margin: 0 auto 70px;
    border-top:solid 1px var(--color-gray);
    border-left:solid 1px var(--color-gray);
}
.entry-content form :is(dt, dd){
    padding:1em;
    border-right:solid 1px var(--color-gray);
    border-bottom:solid 1px var(--color-gray);
}
.entry-content form dt {
    font-weight: var(--weight-bold);
    text-align: left;
    line-height: 1.6;
    background-color:color-mix(in sRGB, #fff 90%, var(--color-main-light) 10%);
}
.entry-content form dt label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.875em;
}
.entry-content form dt span {
    font-size: small;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    display: inline-block;
    background: var(--color-attention);
    border-radius: 2px;
    padding: 0.6em 0.25em 0.5em;
    margin-left: 0.5em;
}
.entry-content form dd p {
    display: block;
}
.entry-content form small {
    display: block;
    line-height: 1.7;
}

@media only screen and (max-width: 820px) {
    .entry-content .contact-bg {
        padding: 20px 0 50px;
    }
    .entry-content form dl {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .entry-content form dt {
        text-align: left;
        width: 100%;
    }
    .entry-content form dt label {
        justify-content: left;
    }
    .entry-content form dt span {
        font-size: 0.8rem;
        padding: 0.15em 0.2em 0.2em;
        margin-left: 0.75em;
    }
    .entry-content form dd {
        width: 100%;
        margin-bottom: 1em;
    }
}
@media only screen and (max-width: 468px) {
    .entry-content .contact-bg {
        padding-top: 0;
    }
}


/* =========================================================================================
FE Advanced Search
=========================================================================================*/
form[id^="feas-searchform"] {
    display:flex;

    & input.feas-submit-button {
        font-size:1.25em;
        font-weight:var(--weight-bold);
        color:#fff;
        text-indent:0;
        letter-spacing:0;
        padding:0 1em;
        min-width:unset;
        background-color:var(--color-main);
        border:solid 2px var(--color-main);
        border-radius:0;
        transition:color var(--trans), background-color var(--trans);

        &:is(:focus-visible, :active) {
            color:var(--color-main);
            background-color:#fff;
        }
        @media(hover:hover){
            &:hover {
                color:var(--color-main);
                background-color:#fff;
            }
        }
    }
}
.feas_selectWrap {
    position:relative;
    display:inline-block;
    width:fit-content;

    & :is(select.feas_meta_dropdown, button) {
        position:relative;
        font-size:1.25em;
        font-weight:var(--weight-bold);
        color:var(--color-main);
        text-align:start;
        min-width:300px;
        padding-block:0.5em;
        padding-inline:1em 3em;
        border:solid 2px currentColor;
    }
    &::after {
        content:"";
        position:absolute;
        inset:50% 1em auto auto;
        translate:0 -50%;
        width:1em;
        aspect-ratio:1;
        background-color:var(--color-main);
        mask:url(assets/images/common/arrow.svg) no-repeat center / contain;
        rotate:90deg;
        transition:scale var(--trans);
    }

    /* button.active */
    &:has(button.active)::after {
        scale:-1 1;
    }
    & button.active {
        border-bottom:none;

        &::after {
            content:"";
            position:absolute;
            inset:100% auto auto 0;
            display:block;
            width:100%;
            height:4px;
            background-color:#fff;
        }
    }
}
/* ===== 正会員 ===== */
.regular_formWrap {
    margin-bottom:3em;

    & select.feas_meta_dropdown { border-right:none;}
}

/* ===== 賛助会員 ===== */
.supporting_formWrap { margin-bottom:3em;}
.supporting_formWrap_inner {
    border:solid 2px var(--color-main);
    width:min(650px, 100%);
    padding:2em 1em;

    & form {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:2em;
    }
    & .checkboxWrap {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(6em, 1fr));
        gap:0.5em 1em;
        width:100%;
    }
    & label { cursor:pointer;}
    & input[type="checkbox"] { margin-right:0.25em;}

    & .submitWrap {
        position:relative;
        width:min(20em, 75%);
        margin-inline:auto;

        &::after {
            content:"";
            position:absolute;
            inset:50% auto auto calc((100% + 6em) / 2);/* 文字数 + 2文字（調整） */
            translate:0 -50%;
            display:block;
            width:1em;
            aspect-ratio:1;
            background-color:#fff;
            mask:url(assets/images/common/icon_filter.svg) no-repeat center / contain;
            transition:background-color var(--trans);
        }
        &:has(input[type="submit"]:is(:focus-visible, :active, :hover))::after {
            background-color:var(--color-main);
        }
    }
    & input[type="submit"] {
        width:100%;
        border-left:solid 2px var(--color-main);
    }
}