@charset "UTF-8";

/* ================================================================
   検索ボックス：複数選択チェックボックス
   既存はラジオ（単一選択）用スタイルのため、チェックボックス用を追加。
   ラベルのピル装飾（.c-searchTag label）は既存スタイルを再利用する。
   ================================================================ */
.c-searchTag input[type=checkbox] {
    display: none;
}

/* 選択時のハイライト（既定＝ピンク。投稿タイプ別に色を上書き） */
.c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-pink);
}
.post-type-archive-navi .c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-red);
}
.post-type-archive-event .c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-yellow);
}
.post-type-archive-arbeit .c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-purple);
}
.post-type-archive-class .c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-green);
}
.post-type-archive-circle .c-searchTag input[type=checkbox]:checked + label {
    background-color: var(--color-light-blue);
}

/* ラベルはクリック可能であることを示す */
.c-searchTag label {
    cursor: pointer;
}

/* ================================================================
   検索ボックス：絞り込み送信エリア
   ================================================================ */
.p-searchBox__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: clamp(1.25rem, 1.04vw, 1.5rem);
    border-top: 0.1rem solid var(--color-right-gray);
}
.c-searchSubmit {
    display: inline-block;
    cursor: pointer;
    background-color: var(--color-key);
    border: var(--border);
    border-radius: 5rem;
    font-weight: var(--font-jp-bd);
    line-height: 1;
    padding: clamp(0.75rem, 0.62vw, 0.9rem) clamp(2rem, 1.66vw, 2.4rem);
    transition: opacity 0.2s;
}
.c-searchSubmit:hover {
    opacity: 0.8;
}
.c-searchClear {
    display: inline-block;
    font-size: clamp(0.9rem, 0.76vw, 1.1rem);
    text-decoration: underline;
}

/* ================================================================
   記事下の執筆者アイコン：リンク化でリンク内に入ったアバターを丸く保つ
   （既存 .p-authorBlock__thumb img は border-radius:inherit のため、
    間に入った <a> が角丸0だと四角く切り抜かれてしまうのを補正）
   ================================================================ */
.p-authorBlock__thumb a {
    display: block;
    line-height: 0;
    border-radius: inherit;
    overflow: hidden;
}
.p-authorBlock__thumb a img {
    border-radius: 50% !important;
}

/* ================================================================
   reCAPTCHA v3 バッジを非表示
   ※ Googleの規約上、バッジを隠す場合はフッターに帰属表示が必要
     （footer.php の .l-footer__recaptcha で対応済み）
   ================================================================ */
.grecaptcha-badge {
    visibility: hidden !important;
}
.l-footer__recaptcha {
    background-color: #2e2e2e;
    padding: 0.8rem var(--mg-pc) 1.6rem;
    text-align: center;
}
.l-footer__recaptcha small {
    display: block;
    font-size: clamp(0.7rem, 0.58vw, 0.8rem);
    line-height: 1.7;
    color: var(--color-text-baseWhite);
    opacity: 0.65;
}
.l-footer__recaptcha a {
    color: var(--color-text-baseWhite);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .l-footer__recaptcha {
        padding: 0.8rem var(--mg-sp) 1.6rem;
    }
}