/*
 * 弊社の受託サイト（X-T9の子テーマ）に共通の型（DADS＋WCAG 2.2 AA）。base.phpと対
 *
 * 正本はdesign-systemのx-t9/。子テーマのdads/はinstall.sh --x-t9が運ぶ配布コピーなので、手で直さない。
 * サイトの事情を書かない。色はサイトが:rootで決める--cpl-*だけを読み、素の値はフォーカスの黒と黄だけ。
 *   --cpl-text 文字／--cpl-text-2 文字（弱）／--cpl-bg 地／--cpl-surface 面／--cpl-line けい線／
 *   --cpl-line-strong けい線（強。部品の輪郭3:1以上）／--cpl-accent 押す場所・現在地／--cpl-on-accent その上の文字／
 *   --cpl-accent-hover・--cpl-accent-active 塗りボタンのhover・押下の地（DADSのkey-1000・key-1200。accentより一段ずつ沈める）／
 *   --cpl-header-h ヘッダーの行の高さ（開くボタンと閉じるボタンを同じ位置に置く）
 * ブランドの色はDADSのキーカラー（key）の役割に当て、使い道もDADSの部品と同じにする（--cpl-accent＝key）。
 * keyで示すのは、主アクションの塗り・現在地と選択中・オンの3つの状態だけで、hoverは文字色の線と一段明るい面、
 * 押下は塗りを一段沈めて示す（応答にkeyを使わない）。飾りに使うのは、ロゴと見出しの印の1種類までにとどめる（2026-10-17、本人が決定）。
 * 余白は8pxの段（4・8・16・24・32・40・48・64）。文字は16px以上、14pxは付随情報（コピーライト・必須の印）だけ。
 */

/* ===== フォーカス：DADSの2重リング（黒の輪郭4pxを2px離し、きわに黄2px） =====
   WordPressの部品やBootstrapが輪を消すので、!importantで必ず出す（フォーカスは消してはいけない） */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 4px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffd43d !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== リンク（DADSのリンクテキスト：下線1px・3px離す。hoverで3px、押下で1pxに戻す） =====
   X-T9はa:hoverでtext-decoration: noneを当てるので、太さだけを書くと下線そのものが消える。線の種類から戻す。
   詳細度はX-T9と同じにとどめ、下線を持たない部品（ボタン・メニュー・カード）の指定には勝たない。色はサイトが決める */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    a:hover {
        text-decoration-line: underline;
        text-decoration-thickness: 3px;
    }
}
a:active {
    text-decoration-thickness: 1px;
}

/* ===== 塗りボタン（DADSのボタン solid-fill・lg） =====
   hoverは地を一段沈めて下線1px、押下はもう一段沈めて下線（明るくはしない）。
   枠の透明の二重線はハイコントラスト表示でボタンの形を残すためのもの（DADSと同じ）。フォーカスは共通のリング */
.wp-block-button__link,
.wp-element-button,
.wpcf7-form input.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 136px;
    min-height: 56px;
    padding: 12px 16px;
    border: 4px double transparent;
    border-radius: 8px;
    background: var(--cpl-accent);
    color: var(--cpl-on-accent);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-underline-offset: 3px;
    cursor: pointer;
}
@media (hover: hover) {
    .wp-block-button__link:hover,
    .wp-element-button:hover,
    .wpcf7-form input.wpcf7-submit:hover {
        background: var(--cpl-accent-hover, var(--cpl-accent));
        color: var(--cpl-on-accent);
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }
}
.wp-block-button__link:active,
.wp-element-button:active,
.wpcf7-form input.wpcf7-submit:active {
    background: var(
        --cpl-accent-active,
        var(--cpl-accent-hover, var(--cpl-accent))
    );
    color: var(--cpl-on-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* ===== リンクの行き先の印（base.phpのcpl_link_mark） ===== */
.cpl-link-mark {
    white-space: nowrap;
}
svg.cpl-link-mark--external {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.25em;
    vertical-align: -0.125em;
}

/* ===== ハンバーガーと閉じるボタン（DADSのハンバーガーメニューボタン：アイコン＋文字） =====
   開くボタンと閉じるボタンは、同じ大きさ・同じ行の高さで、画面上の同じ位置に出す。
   文字の長さ（メニュー／閉じる）で幅が変わらないよう、2つとも同じ幅に固定する */
.wp-block-navigation button.wp-block-navigation__responsive-container-open,
.wp-block-navigation-overlay-close,
.cpl-navoverlay__close button {
    /* displayは書かない。開くボタンを出す幅・隠す幅はコアとサイトが決める */
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 120px;
    min-height: 44px;
    margin: 0;
    padding: 4px 12px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
}
/* コアは開くボタンにクラスを3つ重ねた指定でfont-size: inheritを当てるので、同じ強さで16pxに戻す（閉じるボタンと同じ大きさにするため） */
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
    font-size: 16px;
}
.wp-block-navigation__responsive-container-open > svg,
.cpl-navoverlay__close button > svg {
    flex: none;
    width: 24px;
    height: 24px;
}
/* ホバーは一段明るい面＋下線、フォーカスは黄の面（DADS）。黄の上の文字は黒 */
@media (hover: hover) {
    .wp-block-navigation
        button.wp-block-navigation__responsive-container-open:hover,
    .cpl-navoverlay__close button:hover {
        background: var(--cpl-surface);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}
.wp-block-navigation
    button.wp-block-navigation__responsive-container-open:focus-visible,
.cpl-navoverlay__close button:focus-visible {
    background: #ffd43d;
    color: #000;
}
.cpl-navoverlay__close button {
    display: inline-flex;
}
.cpl-navoverlay__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: content-box;
    min-height: var(--cpl-header-h, 72px);
}
/* 管理バーが出ているとき、ヘッダーの行は管理バーの下から始まる。閉じるボタンの行も同じだけ下げ、
   中身の高さはヘッダーの行と同じに保つ（content-box）。X-T9はボタンのほうを下げるので、それは0に戻す
   （行の中央寄せと重なって、開くボタンより上にずれる） */
.admin-bar .cpl-navoverlay__close {
    padding-top: var(--wp-admin--admin-bar--height, 0px);
}
.admin-bar .wp-block-navigation-overlay-close {
    margin-block-start: 0;
}
/* 開いた面の項目：1行ずつけい線で区切り、押せる高さは44px以上 */
.cpl-navoverlay__nav .wp-block-navigation__container {
    display: block;
}
.cpl-navoverlay__nav .wp-block-navigation-item {
    display: block;
    border-top: 1px solid var(--cpl-line);
}
.cpl-navoverlay__nav .wp-block-navigation-item:last-child {
    border-bottom: 1px solid var(--cpl-line);
}
/* 親テーマの「項目 > a」の内側の指定より強く書く（子セレクタを重ねる） */
.cpl-navoverlay__nav
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 8px;
    line-height: 1.2;
    text-decoration: none;
}
@media (hover: hover) {
    .cpl-navoverlay__nav .wp-block-navigation-item__content:hover {
        background: var(--cpl-surface);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}
.cpl-navoverlay__nav .wp-block-navigation-item__content:focus-visible {
    border-radius: 4px;
    background: #ffd43d;
    color: #000;
}
.cpl-navoverlay__nav .wp-block-navigation-item__content[aria-current='page'] {
    box-shadow: inset 4px 0 0 var(--cpl-accent);
    font-weight: 700;
}

/* ===== タブ（コアのcore/tabsにDADSのタブの型を当てる） =====
   どのタブも1pxの枠（隣と1px重ねる）。選んだタブは面を塗り、上辺に現在地の色の帯6px＋太字。
   選んでいないタブのホバーは一段明るい面＋下線＋上辺にけい線の帯（DADSのtab.css） */
.wp-block-tabs {
    gap: 0;
}
.wp-block-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 1px 0 0 1px; /* 重ねたぶんの枠が外にはみ出ないように */
    border-bottom: 1px solid var(--cpl-line-strong);
}
.wp-block-tab-list button[role='tab'] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: -1px 0 0 -1px;
    padding: 16px;
    border: 1px solid var(--cpl-line-strong);
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cpl-text-2);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    cursor: pointer;
}
.wp-block-tab-list button[role='tab']::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto;
    height: 6px;
    background: transparent;
}
@media (hover: hover) {
    .wp-block-tab-list button[role='tab']:not([aria-selected='true']):hover {
        background: var(--cpl-surface);
        color: var(--cpl-text);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
    .wp-block-tab-list
        button[role='tab']:not([aria-selected='true']):hover::before {
        background: var(--cpl-line-strong);
    }
}
.wp-block-tab-list button[role='tab'][aria-selected='true'] {
    z-index: 1;
    background: var(--cpl-surface);
    color: var(--cpl-text);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}
.wp-block-tab-list button[role='tab'][aria-selected='true']::before {
    background: var(--cpl-accent);
}
.wp-block-tab-list button[role='tab']:focus-visible {
    z-index: 2;
    border-radius: 4px;
}
.wp-block-tab-panel {
    padding: 24px 0 0;
}
@media (forced-colors: active) {
    .wp-block-tab-list button[role='tab'][aria-selected='true']::before {
        background: CanvasText;
    }
}

/* ===== フォーム（Contact Form 7） ===== */
.cpl-required,
.cpl-optional {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 400;
}
/* 必須の印はDADSのフォームコントロールラベルと同じく誤りの色（金は押す場所と現在地にだけ使う） */
.cpl-required {
    color: var(--cpl-error, var(--cpl-text));
}
.cpl-optional {
    color: var(--cpl-text-2);
}
/* 入力欄のhoverは枠を文字色に（DADSのインプットテキスト）。欄の型を名指しする。
   input全体に当てると送信ボタンの透明の二重線まで色が付き、hoverで枠が出る */
@media (hover: hover) {
    .wpcf7-form
        :is(
            input[type='text'],
            input[type='email'],
            input[type='tel'],
            input[type='url'],
            input[type='number'],
            input[type='date'],
            textarea,
            select
        ):hover {
        border-color: var(--cpl-text);
    }
}
/* 誤りの欄はDADSのインプットテキストと同じく枠を誤りの色に（太さは変えない） */
.wpcf7-form .wpcf7-not-valid {
    border-color: var(--cpl-error, var(--cpl-text)) !important;
}
/* 誤りの文は欄の下に、記号＋文字で（色だけに頼らない）。DADSのエラーテキスト：16px・標準の太さ・字間0 */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 8px;
    color: var(--cpl-error, var(--cpl-text));
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}
.wpcf7-not-valid-tip::before {
    content: '！ ';
    font-weight: 700;
}
/* 送信のあとの知らせ：DADSのノティフィケーションバナー（standard）の形＝枠3px・角丸12・内側24。成功と失敗で枠の色と印を変える */
.wpcf7 form .wpcf7-response-output {
    margin: 24px 0 0;
    padding: 16px;
    border: 3px solid var(--cpl-line-strong);
    border-radius: 12px;
    background: var(--cpl-surface);
    color: var(--cpl-text);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.02em;
}
@media (min-width: 48em) {
    .wpcf7 form .wpcf7-response-output {
        padding: 24px;
    }
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--cpl-success, var(--cpl-text));
}
.wpcf7 form.sent .wpcf7-response-output::before {
    content: '送信しました：　';
    font-weight: 700;
}
.wpcf7
    form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam)
    .wpcf7-response-output {
    border-color: var(--cpl-error, var(--cpl-text));
}
.wpcf7
    form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam)
    .wpcf7-response-output::before {
    content: '！ 送信できませんでした：　';
    font-weight: 700;
}

/* ===== 404の行き先：行き先の名前そのものを、DADSのリンクテキストで並べる ===== */
.cpl-404-links {
    padding-left: 24px;
}
.cpl-404-links li + li {
    margin-top: 8px;
}
.cpl-404-links a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .cpl-404-links a:hover {
        text-decoration-thickness: 3px;
    }
}

/* ===== コピーライト（© 法人の正式名・年なし・中央・14px。弊社の決まり） ===== */
.cpl-copyright {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
}
.cpl-copyright small {
    font-size: 14px;
    line-height: 1.5;
}