/* =========================================================
  STRACTION Arkhe 子テーマ  ── child.css
========================================================= */

/* =========================================================
  CSS 変数定義（フレームワーク共通）
========================================================= */
:root,
.editor-styles-wrapper {
    --ark-color--border--table: transparent;

    /* --- Font Family --- */
    --wp--preset--font-family--sans: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;

    /* --- フォントサイズスケール --- */
    --fz-xs:         clamp(10px, 1vw,   12px);
    --fz-sm:         clamp(12px, 1.2vw, 13px);
    --fz-md:         clamp(13px, 1.5vw, 14px);
    --fz-body:       clamp(15px, 1.2vw, 16px);
    --fz-lead:       clamp(16px, 1.5vw, 20px);
    --fz-h3:         clamp(18px, 1.8vw, 20px);
    --fz-h2:         clamp(24px, 3vw, 32px);
    --fz-st-lg:      clamp(20px, 2vw,   26px);
    --fz-mv-sub:     clamp(20px, 3vw, 40px);
    --fz-mv-main:    clamp(36px, 6vw, 52px);
    --fz-hero:       clamp(20px, 2.5vw, 28px);
    --fz-ttl-lg:     clamp(32px, 5vw,   56px);
    --fz-display-sm: clamp(40px, 8vw,   80px);
    --fz-display-md: clamp(60px, 12vw, 120px);
    --fz-display-lg: clamp(80px, 18vw, 200px);
    /* 互換エイリアス */
    --fz-14-16: var(--fz-body);
    --fz-16-18: clamp(16px, 1.8vw,  18px);
    --fz-16-20: clamp(16px, 2vw,  20px);
    --fz-18-24: clamp(18px, 1.8vw, 24px);
    --fz-20-24: clamp(18px, 2vw, 24px);
    --fz-20-30: clamp(20px, 1.5vw, 30px);
    --fz-22-32: clamp(22px, 5vw,   32px);
    --fz-24-36: clamp(24px, 5vw,   36px);
    --fz-26-40: clamp(26px, 6vw,   40px);
    --fz-24-48: clamp(24px, 8vw,   48px);
    --fz-30-48: clamp(30px, 8vw,   48px);
    --fz-30-96: clamp(30px, 20vw,   96px);

    /* ブランドカラー */
    --c-primary:      #FABE00;
    --c-primary-dark: #F5AA07;
    --c-accent:       #8BBB26;
    --c-l-green:      #F9FEEA;
    --c-l-yellow:     #FEF7E0;

    /* --- テキスト・ボーダー --- */
    --c-text:       #333333;
    --c-text-muted: #666666;
    --c-border:     #D9D9D9;

    /* --- 背景色 --- */
    --c-bg:        #FFFFFF;
    --c-bg-soft:   #F7F7F7;
    --c-bg-warm:   #FFFCF4;
    --c-bg-l-green:#F7F8F7;
    --c-bg-footer: #F4F4F4;

    /* --- ヘッダー --- */
    --c-header-bg: rgba(255, 255, 255, 0.9);

    /* --- シャドウ --- */
    --shadow1:    2px 2px 4px rgba(222, 222, 222, 1);
    --shadow2:    0 2px 0 rgb(255 255 255);
    --shadow3:    0 2px 3px rgba(0, 0, 0, 0.14);
    --shadow4:    2px 4px 8px rgba(0, 0, 0, 0.25);
    --shadow5:    15px 15px 0px rgba(0, 0, 0, 0.5);
    --txt-shadow1: 2px 4px 4px rgb(255 255 255);
    --txt-shadow2: 2px 2px 5px rgb(0 0 0);
    
    /* --- 共通padding --- */
    --st-pad--container: min(20px, 4vw);
}




/* =========================================================
  Gutenberg エディター調整（共通テンプレート）
========================================================= */
p:not(.has-text-color):not([style*="color"]) {
    color: var(--c-text);
}

h1.editor-post-title__input {
    font-size: var(--fz-h2) !important;
    margin-bottom: 0 !important;
}

@media only screen and (min-width: 768px) {
    .editor-styles-wrapper h1.editor-post-title__input span {
        font-size: inherit;
    }
}

/* エディタ内でアニメーション要素を強制表示（フロントエンドには適用しない） */
.block-editor-page [class*="u-anim-"],
.wp-admin [class*="u-anim-"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}


/* =========================================================
  ベーススタイル
========================================================= */
body {
    font-family: var(--wp--preset--font-family--sans);
    color: var(--c-text);
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3 {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

h2 { font-size: var(--fz-h2); }
h3 { font-size: var(--fz-h3); }

/* ユーティリティ */
.w1200 { max-width: 1200px; margin-right: auto; margin-left: auto; }
.w1000 { max-width: 1000px; margin-right: auto; margin-left: auto; }
.w920  { max-width:  920px; margin-right: auto; margin-left: auto; }
.w800  { max-width:  800px; margin-right: auto; margin-left: auto; }
.w640  { max-width:  640px; margin-right: auto; margin-left: auto; }
.line-height24 { line-height: 2.4; }

/* 明朝体ユーティリティ */
.font-mincho {
    font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho,
                 "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
                 "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.font-maru {
    font-family: "Zen Maru Gothic", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
    "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* 中央揃えの下線タイトル */
.line-title-center {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px !important;
    text-align: center;
}
.line-title-center::after {
    content: "";
    position: absolute;
    left: calc(50% - 30px);
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--c-primary);
}

/* 左揃えの下線タイトル */
.line-title-left {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px !important;
}
.line-title-left::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--c-primary);
}

/* flexのスマホ、カラム上下反転 */
@media (max-width: 781px) {
    .col_rev {
        flex-direction: column-reverse;
    }
}

/* スマホ時のテキスト左よせ */
@media (max-width:360px) {
    body p.has-text-align-center {
        text-align: left !important;
    }

    body h1.has-text-align-center,
    body h2.has-text-align-center,
    body h3.has-text-align-center {
        text-align: left !important;
    }
}


/* =========================================================
  ヘッダー / グローバルナビ
========================================================= */
.l-header {
    box-shadow: var(--shadow3);
}

.c-gnav {
    width: 100%;
}

h1.l-header__logo {
    margin-bottom: 0;
}

.c-gnav__li > .c-gnav__a {
    font-weight: normal;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
}

.c-gnav .sub-menu {
    background-color: var(--c-primary);
}

.c-gnav__li.-current,
.c-gnav__li.focus,
.c-gnav__li:hover {
    color: var(--c-primary);
}

.c-gnav__depth1::before {
    background-color: var(--c-primary);
}

/* logo 左寄せ */
[data-btns=rr-rl] .l-header__body {
    grid-template-columns: 0% 80% auto var(--ark-searchW) var(--ark-drawerW);
}

.l-header__logo {
    justify-content: flex-start;
}

/* ヘッダー右列（TEL＋ナビの縦積みレイアウト） */
@media (min-width: 1000px) {
    .l-header__right {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        justify-content: center;
        gap: 5px;
    }

    .header-top-info {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 0;
    }

    .header-contact-btn {
        background: var(--c-primary);
        color: var(--c-bg);
        padding: 10px 12px;
        border-radius: 4px;
        text-decoration: none;
        margin-left: 10px;
    }

    .p-gnav {
        margin: 0 !important;
    }

    .c-gnav__li,
    .c-gnav__li > .c-gnav__a {
        align-content: center;
    }

    .l-header__center {
        padding: 6px 0;
    }
}

/* スマホドロワー */
.p-drawer {
    background-color: var(--c-accent);
    z-index: 10;
    height: auto;
}


/* =========================================================
  下層ページ ヘッダー（ページタイトルエリア）
========================================================= */
.p-topArea {
    min-height: 20vh;
}

.p-topArea.-noimg {
    background: center center / cover no-repeat;
    background-image: linear-gradient(rgba(44, 120, 66, 0.8), rgba(44, 120, 66, 0.8)), url(/wp-content/uploads/2026/05/cta_bg.webp);
}

.p-topArea.c-filterLayer::before,
.c-filterLayer.-filter-dot::after {
    background-color: unset;
    background-image: none;
}

.p-topArea__title.c-pageTitle {
    color: var(--c-text);
}

h1.c-pageTitle__main {
    font-weight: 700;
    font-size: var(--fz-hero);
    margin-bottom: 0;
    color: var(--c-bg);
}

.single-post h1.c-pageTitle__main {
    color: var(--c-text);
}

/* パンくず */
.p-breadcrumb__list.l-container {
    max-width: var(--ark-width--container);
    padding: 0;
}

.p-breadcrumb__list {
    justify-content: flex-end;
}


/* =========================================================
  スマホ用フッターCTAバー
========================================================= */
.p-mobile-nav {
    display: none;
}

@media screen and (max-width: 767px) {
    .p-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .p-mobile-nav__item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
    }

    .p-mobile-nav__item.-tel {
        background-color: var(--c-bg);
        color: var(--c-text);
        font-size: 1.2rem;
    }

    .p-mobile-nav__item.-mail {
        background-color: var(--c-primary);
        color: #fff;
    }

    .l-footer {
        margin-bottom: 80px;
    }
}


/* =========================================================
  スクロールアニメーション
  使い方: class="u-anim-fade-up" を要素に付けるだけ
========================================================= */
body:not(.block-editor-page):not(.wp-admin) [class*="u-anim-"] {
    opacity: 0;
    transition:
        opacity  0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
    pointer-events: none;
}

body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up {
    transform: translateY(30px);
}

body:not(.block-editor-page):not(.wp-admin) .u-anim-slide-left {
    transform: translateX(-40px);
}

body [class*="u-anim-"].is-show {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* スタッガー（順番違いアニメーション） */
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up:nth-child(2) { transition-delay: 0.2s; }
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up:nth-child(3) { transition-delay: 0.4s; }
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up:nth-child(4) { transition-delay: 0.6s; }

/* =========================================================
  ボタンコンポーネント
  使い方: Gutenbergボタンブロックに追加CSSクラス「c-btn-outline」
========================================================= */

/* アウトラインボタン（通常） */
.wp-block-button.c-btn-outline .wp-block-button__link {
    background-color: unset !important;
    color: var(--c-primary) !important;
    border: 1px solid var(--c-primary);
    border-radius: 0;
    padding: 15px 30px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
    margin-top: 30px;
}

.wp-block-button.c-btn-outline .wp-block-button__link:hover {
    background-color: var(--c-primary) !important;
    color: var(--c-bg) !important;
    opacity: 1;
}

.wp-block-button.c-btn-outline .wp-block-button__link::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: min(50px, 7vw);
    color: var(--c-primary);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.wp-block-button.c-btn-outline .wp-block-button__link:hover::after {
    transform: translateX(5px);
    color: var(--c-bg);
}

@media (max-width: 380px) {
    .wp-block-button.c-btn-outline .wp-block-button__link::after {
        display: none;
    }
}

/* 反転バリアント（暗背景用）: 追加CSSクラス「c-btn-outline bt_rev」 */
.wp-block-button.c-btn-outline.bt_rev .wp-block-button__link {
    background-color: unset !important;
    color: var(--c-bg) !important;
    border: 1px solid var(--c-bg);
}

.wp-block-button.c-btn-outline.bt_rev .wp-block-button__link:hover {
    background-color: #fff !important;
    color: var(--c-text) !important;
    opacity: 0.8;
}

.wp-block-button.c-btn-outline.bt_rev .wp-block-button__link::after {
    color: var(--c-bg);
}

.wp-block-button.c-btn-outline.bt_rev .wp-block-button__link:hover::after {
    color: var(--c-text);
}

/* 通常ボタン カラー上書き */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--c-primary);
}

/* =========================================================
   アイコン付きバリアント（メール・書類）
   使い方: 「c-btn-outline btn_mail」 または 「c-btn-outline btn_rec」
========================================================= */

/* 共通：右側の矢印（::after）を非表示にし、左側にアイコン（::before）のベースを設定 */
.wp-block-button.c-btn-outline.btn_mail .wp-block-button__link::after,
.wp-block-button.c-btn-outline.btn_rec .wp-block-button__link::after {
    display: none;
}

.wp-block-button.c-btn-outline.btn_mail a,
.wp-block-button.c-btn-outline.btn_rec a {
    margin-top: 0;
}

.wp-block-button.c-btn-outline.btn_mail .wp-block-button__link::before,
.wp-block-button.c-btn-outline.btn_rec .wp-block-button__link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 15px; /* テキストとの間隔 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-16-20);
    transition: transform 0.3s ease;
}

/* メールアイコン（btn_mail）の設定 */
.wp-block-button.c-btn-outline.btn_mail .wp-block-button__link::before {
    content: "\f0e0";
}

/* 書類アイコン（btn_rec）の設定 */
.wp-block-button.c-btn-outline.btn_rec .wp-block-button__link::before {
    content: "\f15c";
}

/* ホバー時のアイコンの動き（少し左に動かす等。不要であれば削除してください） */
.wp-block-button.c-btn-outline.btn_mail .wp-block-button__link:hover::before,
.wp-block-button.c-btn-outline.btn_rec .wp-block-button__link:hover::before {
    transform: translateX(-5px);
}


/* =========================================================
  テーブルコンポーネント
  使い方: tableブロックを囲むグループに追加CSSクラス「str-table」
========================================================= */
.str-table table {
    width: 100%;
    border-collapse: collapse;
}

.str-table th,
.str-table td {
    padding: 14px 16px !important;
    vertical-align: top;
    font-size: 0.95rem;
}

.str-table table,
.str-table th,
.str-table td {
    border: none;
}

.str-table th {
    width: 25%;
    background: #F4F4F4;
    font-weight: 600;
    border-bottom: 3px solid var(--c-bg);
}

.str-table td {
    border-bottom: 1px solid var(--c-bg-soft);
}

@media (max-width: 640px) {
    .str-table tr  { display: block; margin-bottom: 12px; }
    .str-table th,
    .str-table td  { display: block; width: 100%; }
    .str-table th  { border-bottom: none; padding-bottom: 6px; }
}

/* テーブル: 追加CSSクラス「str-history-table」 */
.str-history-table {
    border: none !important;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
}

.str-history-table th,
.str-history-table td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 15px 10px !important;
    vertical-align: top;
    text-align: left;
}

.str-history-table td:first-child {
    width: 12em;
    font-weight: bold;
    white-space: nowrap;
}

.str-history-table td:last-child {
    line-height: 1.6;
}

@media screen and (max-width: 600px) {
    .str-history-table tr       { display: block; margin-bottom: 10px; }
    .str-history-table td       { display: block; width: 100% !important; padding: 5px 0 !important; border-bottom: none !important; }
    .str-history-table td:first-child  { padding-top: 15px !important; }
    .str-history-table td:last-child   { padding-bottom: 15px !important; border-bottom: 1px solid #eee !important; }
}


/* =========================================================
  CF7 フォームスタイル
========================================================= */
.wpcf7 {
    border: 1px solid var(--c-border);
    padding: 2em 1.5em;
}

/* ステップバー */
.form-progress {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto 40px;
}

.progress-step {
    flex: 1;
    font-size: clamp(13px, 2vw, 16px);
    font-weight: bold;
    color: var(--c-text-muted);
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 4px solid var(--c-border);
    transition: all 0.3s;
}

.progress-step.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

/* 必須・任意ラベル */
.required,
.optional {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    color: #fff;
    vertical-align: text-top;
}

.required { background-color: #e53935; }
.optional  { background-color: var(--c-text-muted); }

/* 入力行 */
.form-row,
.confirm-row {
    margin-bottom: 30px;
}

.form-row dt,
.confirm-row dt {
    font-weight: bold;
    margin-bottom: 8px;
}

.form-row dd input,
.form-row dd textarea {
    width: 100%;
}

/* 確認表示枠 */
.confirm-value {
    background-color: var(--c-bg-soft);
    padding: 15px 20px;
    border-radius: 8px;
    min-height: 1.5em;
    white-space: pre-wrap;
    border: 1px solid var(--c-border);
    line-height: 1.8;
}

.confirm-notice {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--c-primary-dark);
    font-size: 1.1em;
}

/* ボタン配置 */
.form-btn-wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding-top: 40px;
    flex-wrap: wrap;
}

.form-btn-wrap p {
    display: flex;
    gap: 10px;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip.custom-error-tip,
.wpcf7-not-valid-tip {
    display: block;
    color: #e53935;
    font-size: 0.85em;
    font-weight: bold;
    margin-top: 8px;
}

.wpcf7-not-valid {
    border-color: #e53935 !important;
    background-color: #fff8f8 !important;
}

.wpcf7-spinner {
    display: none !important;
}


/* =========================================================
  PDFリンク全面クリック対応
  使い方: カバーブロックに追加CSSクラス「pdf-wrap」
========================================================= */
.pdf-wrap {
    position: relative !important;
}

.pdf-wrap a {
    position: absolute !important;
    inset: 0;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.pdf-wrap .wp-block-cover__inner-container {
    position: static !important;
}

.pdf-wrap:hover {
    opacity: 0.8;
}


/* =========================================================
  フッター
========================================================= */
.l-footer {
    background-color: var(--c-accent);
    color: var(--c-bg);
}

.l-footer p.c-copyright {
    color: var(--c-bg);
}

@media (min-width: 640px) {
    .l-footer .footer_nav_menu ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-end;
        border: 0;
        max-width: 640px;
    }

    .l-footer .footer_nav_menu ul li {
        margin-right: 2em !important;
        border: 0;
    }
}

ul.l-footer__nav {
    margin: 2em auto;
}

ul.l-footer__nav li {
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid var(--c-border);
    margin-bottom: 1em;
}

ul.l-footer__nav li:last-child {
    border-right: none;
    margin-right: 0;
}


/* =========================================================
  メインコンテンツ
========================================================= */
.l-content {
    z-index: 5;
}

#main_content {
    min-height: 800px;
}

@media (min-width: 1000px) {
    [data-sidebar=on] .l-content__body {
        flex-direction: row;
    }
}