/*
Theme Name: gnext-2026
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gnext-2026
Tags: 
*/

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    レイアウト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* ===================================================
    ページ全体をフェードインさせるCSS
=================================================== */
body {
    animation: fadeIn 1.2s ease-in-out  0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* ===================================================
    レスポンシブ対応：ブレイクポイント設定
=================================================== */
:root {
	--is-sm: false;
	--is-md: false;
	--is-lg: false;
	--is-xl: false;

	--is-under-sm: false;
	--is-under-md: false;
	--is-under-lg: false;
	--is-under-xl: false;

	/* 最小幅（モバイルファースト） */
	@media print, screen and (min-width: 640px) {
		--is-sm: true;
	}
	@media print, screen and (min-width: 960px) {
		--is-md: true;
	}
	@media print, screen and (min-width: 1280px) {
		--is-lg: true;
	}
	@media print, screen and (min-width: 1600px) {
		--is-xl: true;
	}
	/* 最大幅（PCファースト） */
	@media print, screen and (max-width: 639px) {
		--is-under-sm: true;
	}
	@media print, screen and (max-width: 959px) {
		--is-under-md: true;
	}
	@media print, screen and (max-width: 1279px) {
		--is-under-lg: true;
	}
	@media print, screen and (max-width: 1599px) {
		--is-under-xl: true;
	}
}
/* ===================================================
    ページ全体のレイアウト
=================================================== */
/*コンテンツが少ない時もFooterを一番下に固定
-=========-=========-====*/
/* WordPressのサイト全体を包むコンテナを対象にする */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面いっぱいの高さを確保 */
}
/* メインコンテンツエリアを伸ばしてフッターを押し下げる */
/* 通常、サイトエディタで配置した直後の「グループ」や「main」を対象にする */
main, 
.wp-site-blocks > .wp-block-group:not(header, footer) {
    flex: 1;
}
/* ===================================================
    FlexBox：レスポンシブレイアウト設定
=================================================== */
/* 3カラムレスポンシブ */
.wp-block-group{
    &.is-style-col3 {
        flex-wrap: wrap !important;
        gap: var(--wp--preset--spacing--space-20) var(--wp--preset--spacing--space-20) !important; /* カラム間の隙間 */
        align-items: flex-start !important;
    }
    &.is-style-col3{
        .wp-block-group {
            flex-basis: 100% !important;
            margin-left: 0 !important;
        }   
        /* 2. タブレット (640px～959px): 2カラム */
        @container style(--is-sm: true) {
            .wp-block-group {
                /* 2カラムなので 50% から余白(gap)の半分を引く */
                flex: 1 1 calc((100% - var(--wp--preset--spacing--space-20) * 2) / 2) !important;
            }
        } 
        /* 3. PC (960px～): 3カラム */
        @container style(--is-md: true){
            .wp-block-group {
                /* 3カラムなので 33.3% から余白分を引く */
                flex: 1 1 calc((100% - var(--wp--preset--spacing--space-20) * 2) / 3) !important;
                
            }
        }
    }
}
/* 2カラムレスポンシブ */
.wp-block-group{
    &.is-style-col2 {
        flex-wrap: wrap !important;
        gap: var(--wp--preset--spacing--space-20) var(--wp--preset--spacing--space-20) !important; /* カラム間の隙間 */
        align-items: flex-start !important;
        .wp-block-group {
            flex-basis: 100% !important;
            margin-left: 0 !important;
        }   
        /* 2. タブレット (640px～959px): 2カラム */
        @container style(--is-sm: true) {
            .wp-block-group {
                /* 2カラムなので 50% から余白(gap)の半分を引く */
                flex: 1 1 calc((100% - var(--wp--preset--spacing--space-20) * 2) / 2) !important;
            }
        }
    }
}
/* PC時：左右反転 */
.wp-block-columns{
    @container style(--is-sm: true) {
        &.is-style-reverse {
            flex-direction: row-reverse !important;
        }
    }
}
/* ===================================================
    iFrameサイズ調整
=================================================== */
.speakerdeck-iframe{
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px;
    width: 100%; 
    height: clamp(12.625rem, -0.917rem + 57.778vw, 33.75rem);
}

/* ===================================================
    状況によって出し分け 
=================================================== */
/*spだけ表示
-=========-=========-====*/
@container style(--is-md: true) {
    .show-smOnly {
        display: none !important;
    }
}
/*pcだけ表示
-=========-=========-====*/
@container style(--is-under-md: true) {
    .show-lgOnly {
        display: none !important;
    }
}
/*spだけ非表示
-=========-=========-====*/
@container style(--is-under-md: true) {
    .none-smOnly {
        display: none !important;
    }
}
/*pcだけ非表示
-=========-=========-====*/
@container style(--is-md: true) {
    .none-lgOnly {
        display: none !important;
    }
}
/*非表示
-=========-=========-====*/
.hide {
    display: none;
}
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    パーツ、パターン、ブロック、コンポーネント
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    ヘッダー
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
header {
    background-color: rgba(255,255,255, 0.7);
    width: 100%;
    position: sticky;
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
        left: 0;
        top: 0;
        z-index: -1;
        box-shadow: 0 4px 6px rgba(0,0,0,0.18);
    }
    top: 0;
    z-index: 10;
}

/* ハンバーガーメニューのパディング */
.wp-block-navigation__responsive-container.is-menu-open{
    padding: 16px;
}
body:not(.home){
    &.page, &.archive{
        h1 {
            opacity: 0;
            transform: translateX(2.5%);
            animation: loaded var(--duration-slow) var(--ease-out-quart) 0.6s both;
        }
    }
}
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    見出しスタイル
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* Topページメインイメージコピー：80px~42px */
.is-style-display{
    font-size: clamp(3rem, 1rem + 5vw, 5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--wp--preset--color--primary-d);
    margin-bottom: 20px;
    letter-spacing: 0.025em;
    font-feature-settings: "palt";
    padding-bottom: 0 !important;
    &:after {
        content: inherit;
    }
}
/* タイトル：64px~48px */
.is-style-title {
    display: flex;
    flex-direction: column;
    font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
    line-height: 1.25;
    color: var(--wp--preset--color--primary-d);
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.025em;
    font-feature-settings: "palt";
    margin-inline: auto !important;
    display: inline-block;
    position: relative;
    /* padding-bottomでタイトルと下線の余白を調整 */
    padding-bottom: var(--wp--preset--spacing--space-10) !important;
    &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* 下線の太さ */
    background-color: var(--wp--preset--color--primary-l) !important; /* 下線の色 */          
    }
    span{
        display: block;
        font-size: var(--wp--preset--font-size--medium);
        font-weight: 400;
        color: var(--wp--preset--color--gray-3);
        line-height: 1;
    }
}
/* 見出し特大：40px~24px */
.is-style-headingXL{
    font-size: clamp(1.5rem, 0.5rem + 2.5vw, 2.5rem);
    line-height: 1.4;
    font-weight: 700;
    color: var(--wp--preset--color--primary-d);
    letter-spacing: 0.025em;
    font-feature-settings: "palt";
}
/* 見出し大：32px~20px */
.is-style-headingL{
    font-size: clamp(1.25rem, -1rem + 3.75vw, 2rem);
    line-height: 1.4;
    font-weight: 700;
    color: var(--wp--preset--color--primary-d);
    letter-spacing: 0.025em;
    font-feature-settings: "palt";
}
.is-style-borderHeading{
    border-left: 6px solid var(--wp--preset--color--primary-l);
    padding-left: 8px;
    line-height: 1.5;
}

/* ===================================================
    下層ページH1表示アニメーション
=================================================== */
/* JS無効環境などで遅らせたい場合（必要なら data-script-disabled をJS側で付与） */
[data-script-disabled] {
    .page h1, .archive h1 {
        animation-delay: 1.6s;
    }
}

/* ページ表示アニメーション */
@keyframes loaded {
    from {
        opacity: 0;
        transform: translateX(2.5%) scale(1);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    リスト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*順序なし
-=========-=========-====*/
ul {
    &.is-style-circle{
        li{
            position: relative;
            padding-left: 1em;
            line-height: 1.75em;
            &:before {
                content: "";
                position: absolute;
                top: .625em;
                left: .25em;
                display: block;
                width: .375em;
                height: .375em;
                background-color: var(--wp--preset--color--primary-d);
                border-radius: 100vh;
            }
        }
    }
}
/*順序あり
-=========-=========-====*/
/* 順序ありリストのカスタマイズ */
ol {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--space-10);
    &.is-style-number {
        /* 1. リスト全体（ol）でカウンターをリセット */
        counter-reset: listOrder;
        li {
            position: relative;
            padding-left: 1.75em; /* 数字の幅に合わせて調整 */

            &::before {
                counter-increment: listOrder;
                content: counter(listOrder) ". ";
                position: absolute;
                top: 0;
                left: 0.25em;
                color: var(--wp--preset--color--primary-d);
                font-weight: 700;
            }
            /* 入れ子のリスト（2階層目以降） */
            ol,ul {
                /* 子リストの中で新しく1から始める場合 */
                counter-reset: listOrder; 
                
                > li {
                    position: relative;
                    padding-left: 1.75em; /* 数字の幅に合わせて調整 */
                    &::before {
                        counter-increment: listOrder;
                        content: counter(listOrder) ". ";
                        position: absolute;
                        top: 0;
                        left: 0.25em;
                        color: var(--wp--preset--color--primary-d);
                    }
                    ul, ol{
                        padding-left: 1em;
                    }
                }
            }
            ul{
                li{
                    padding-left: initial; /* 数字の幅に合わせて調整 */
                    &::before {
                        counter-increment: initial;
                        content: "";
                        top: 0;
                        left: 0;
                    }
                }
            } 
        }
    }
    
}
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    リンク、ボタン
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*テキスト内リンクはカラー変更
-=========-=========-====*/
p,ul,ol{
    a{
        width: 100%;
        position: relative;
        color: var(--wp--preset--color--primary);
        transition: opacity 0.3s, color 0.3s;
        &:hover{
            text-decoration: underline !important;
            opacity: 0.5;
            &:after {
                text-decoration: none;
            }
        }
    }
}

/*新規タブで開く
-=========-=========-====*/
.wp-block-button{
    &.is-style-new-tab{
        a[target="_blank"]{
            display: flex;
            align-items: center;
            justify-content: center;
            &:after {
                font-family: "Material Icons";
                content: "open_in_new";
                display: inline-block;
                font-size: 1em;
                margin-left: 0.3em;
            }
        }
    }
}
p{
    &.is-style-new-tab{
        a[target="_blank"]{
            &:after {
                font-family: "Material Icons";
                content: "open_in_new";
                display: inline-block;
                font-size: 1em;
                margin-left: 0.3em;
                vertical-align: bottom;
            }
        }
    }
}
ul,ol{
    &.is-style-new-tab{
        li{
            a[target="_blank"]{
                &:after {
                    font-family: "Material Icons";
                    content: "open_in_new";
                    display: inline-block;
                    font-size: 1em;
                    margin-left: 0.3em;
                    vertical-align: bottom;
                }
            }
        }
    }
}
.wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
    width: calc(25% - var(--wp--style--block-gap, .5em) * .75);
    min-width: 15em;
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    テーブル
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* WordPress標準のテーブルブロックに対するベース設定 */
.wp-block-table {
    table {
        min-width: max-content !important;
        overflow-x: scroll !important;
        /* ヘッダーの共通スタイル */
        thead {
            background-color: var(--wp--preset--color--bgc-1);
            border-bottom: 2px solid var(--wp--preset--color--gray-2) !important;
            padding: 1rem;
            text-align: left;
            white-space: nowrap;
        }
        /* セルの基本設定 */
        th,td {
            padding: 1rem;
            border: 1px solid var(--wp--preset--color--border, #e0e0e0);
            vertical-align: middle;
            border-left: none;
            border-right: none;
        }
        /* 1列目だけ強調したい場合（よくある比較表用） */
        &.is-style-stripes tbody tr th:first-child {
            background-color: rgba(0,0,0,0.02);
            font-weight: bold;
        }
        th:first-child, td:first-child {
            position: sticky;
            left: 0;
            background-color: var(--wp--preset--color--bgc-b);
            z-index: 1;
            max-width: 30%;
        }
    }
}
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    Topページ：サービスカード
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.wp-block-group-is-layout-grid{
    &.top-service{
        .wp-block-cover{
            overflow: hidden !important;
            min-height: clamp(20rem, 10rem + 25vw, 30rem);
            /* 1. 画像にアニメーションの準備をさせる */
            .wp-block-cover__image-background {
                transition: transform 0.6s ease; /* 0.6秒かけて変化 */
            }
            /* 2. ボタンがホバーされた時、カバー内の画像を拡大する */
            &:has(.wp-block-button__link:hover) .wp-block-cover__image-background {
                transform: scale(1.06); /* 1.1倍に拡大 */
            }
        }
        /* スマホ時：1列（デフォルト） */
        grid-template-columns: repeat(1, 1fr);
        /* タブレット時：2列 */
        /* @container style(--is-sm: true) {
            grid-template-columns: repeat(2, 1fr);
        } */
        /* PC時：2列 */
        @container style(--is-md: true) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}
/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    Topページ：ニュースカード
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* 1. 画像を囲む親要素（figure）からはみ出さないように設定 */
.wp-block-post-featured-image {
    overflow: hidden;
    /* 2. 画像にアニメーション（transition）を設定 */
    img {
        transition: transform 0.3s ease;
    }
    /* 3. aタグがhoverされた時、その中にあるimgを拡大する */
    a{
        transition: opacity 0.3s ease;
        &:hover{
            img {
                transform: scale(1.04); /* 1.1倍に拡大 */
            }
        }
    }
}
/* オマケ：タイトルのリンクをhoverした時も画像を拡大させたい場合 */
.wp-block-post{
    &:has(a:hover) {
        .wp-block-post-featured-image {
            img {
                transform: scale(1.04);
                opacity: 0.8; /* 少し透けさせる */
            }
        }
    }
}
.wp-block-post-title{
    a{
        opacity: 1;
        transition: opacity 0.3s ease;
        &:hover{
            opacity: 0.6 !important;
        }
    }
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    投稿
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* 投稿日：　時計アイコン */
.wp-block-post-date{
    &.is-style-clock-icon{
        &:before{
            content: url(assets/images/clock-regular-full.svg);
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.2em;
            margin-right: 0.2em;
            font-size: 1.25em;
            opacity: 0.3;
        }
    }
}

/* カテゴリーアーカイブ： タブメニュー */
.nav-categories{
    gap: 4px !important;
    position: relative;
    li{
        padding-inline: var(--wp--preset--spacing--space-10) !important;
        &:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%); /* 中央に垂直配置 */
            width: 1px;
            height: 1.2em; /* 線の高さ */
            background-color: var(--wp--preset--color--gray-5); 
        }
        &:first-child{
            padding-left: 0!important;
        }
        &:last-child{
            padding-right: 0!important;
        }
    } 
}

/* 角丸ボタン */
.wp-block-button.is-style-br-100 .wp-block-button__link{
    border-radius: 100vh;
    background-color: #fff;
    color: var(--wp--preset--color--primary);
    &:hover{
        background-color: var(--wp--preset--color--primary);
        color: #fff;
    }
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    パンくずリスト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.aioseo-breadcrumbs{
    max-width: 100% !important;
    padding-block: var(--wp--preset--spacing--space-10);
    color: #767676;
    font-size: var(--wp--preset--font-size--small);
    a{
        color: var(--wp--preset--color--gray-5);
        font-weight: 700;
    }
}
.aioseo-breadcrumb-separator{
    color: #767676;
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    メインイメージ
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.swiper {
    height: clamp(25rem, 12.5rem + 31.25vw, 37.5rem) !important;
    .swiper-slide  {
        height: clamp(25rem, 12.5rem + 31.25vw, 37.5rem) !important;
    }
}
.wp-block-cover__inner-container{
    z-index: 5 !important;
    display: block;
}
.p-home-keyvisual {
    position: relative;
    display: flex;
    overflow: hidden;
    height: clamp(25rem, -25rem + 125vw, 50rem);
    min-height: initial !important;
    margin-inline: var(--wp--preset--spacing--space-10);
    border-radius: 0 0 24px 24px;
    /* min-height: 420px;
    height: calc(100vh - 76px - 20px); */
    background: url(./assets/images/mainimage/home_bg_01@2x.jpg) center/cover no-repeat;
    animation: fadeInBase 0.8s ease-in-out 0s forwards;
    justify-content: center;
    align-items: center;
}

.p-home-keyvisual::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: url(./assets/images/mainimage/home_bg_02@2x.jpg) center/cover no-repeat;
content: "";
opacity: 0;
animation: fadeInLayer 1.8s ease-in-out 1s forwards;
}

.p-home-keyvisual::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background: url(./assets/images/mainimage/home_bg_03@2x.jpg) center/cover no-repeat;
content: "";
opacity: 0;
animation: fadeInLayer 1.8s ease-in-out 1.8s forwards;
}

@keyframes fadeInBase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInLayer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    フォーム
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/

/* ===================================================
基本のフォーム
=================================================== */

/*フォームのラベル
-=========-=========-=========-=========-=========*/
.wp-block-contact-form-7-contact-form-selector{
    form{
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--space-20);
        hr{
            border: none;         /* デフォルトのボーダーを消す */
            background-color: #ccc; /* 線の色 */
            height: 1px;          /* 線の太さ */
            width: 50%;           /* 線の長さ */
            margin-block: var(--wp--preset--spacing--space-10);
            margin-inline: auto;
        }
    }
    
    /*ラベル周り
    -=========-=========-=========-=========-=========*/
    .ly-formLabel{
        font-size: var(--wp--preset--font-size--regular);
        display: flex;
        /* flex-direction: column; */
        /* align-items: start; */
        gap: 8px;
        line-height: normal;
        margin-bottom: var(--wp--preset--spacing--space-10);
        font-weight: 700;
        .required {
            font-size: var(--wp--preset--font-size--x-small);
            display: inline-block;
            padding: 1px 6px;
            border-radius: 2px;
            color: var(--wp--preset--color--gray-1);
            background-color: #ed024a;
        }
        .text-input{
            width: 100%;
        }
    }
    /*テキスト入力フォーム（改行なし）
    -=========-=========-=========-=========-=========*/
    input{
        &.text-input{
            font-size: 16px; /* iOSでフォーカス時にズームさせない */
            padding: 8px;
            border: 1px solid var(--wp--preset--color--gray-3);
            border-radius: 4px;
            background-color: var(--wp--preset--color--gray-1);
            width: 100%;
            &::placeholder {
                color: #ccc;
            }
            &:focus {
                outline: 2px solid var(--wp--preset--color--accent);
            }
        }
    }
    textarea{
        &.text-input{
            font-size: 16px; /* iOSでフォーカス時にズームさせない */
            padding: 8px;
            border: 1px solid var(--wp--preset--color--gray-3);
            border-radius: 4px;
            background-color: var(--wp--preset--color--gray-1);
            width: 100%;
            resize: vertical; /* テキスト入力フォーム（テキストエリア 改行あり） */
            &::placeholder {
                color: #ccc;
            }
            &:focus {
                outline: 2px solid var(--wp--preset--color--accent);
            }
        }
    }
    
    /*パスワード入力
    -=========-=========-=====*/
    .form-password {
        .inputArea {
            display: flex;
            gap: var(--wp--preset--spacing--space-10);
        }
    }
    /*バリデータ表示
    -=========-=========-=====*/
    .varidatorMessage {
        font-size: var(--text-base);
        color: #ed024a;
        padding: var(--wp--preset--spacing--space-10);
        background-color: rgba(237, 2, 74, 0.12);
    }
    
    /*ラジオボタン
    -=========-=========-=========-=========-=========*/
    .ly-radio,
    .checkbox {
        display: grid !important; /* CF7のデフォルトを上書き */
        gap: var(--wp--preset--spacing--space-10); /* 項目間の余白 */
        span{
            margin: 0;
            gap: var(--wp--preset--spacing--space-10);
            line-height: normal;
            label {
                cursor: pointer;
            }
        }
        /* スマホ時：1列（デフォルト） */
        grid-template-columns: repeat(1, 1fr);
        /* タブレット時：2列 */
        @container style(--is-sm: true) {
            grid-template-columns: repeat(2, 1fr);
        }
        /* PC時：4列 */
        @container style(--is-md: true) {
            grid-template-columns: repeat(4, 1fr);
        }
        
    }
    
    input[type="radio"] {
        position: relative;
        background-color: var(--wp--preset--color--gray-1);
        border: 1px solid var(--wp--preset--color--gray-3);
        border-radius: 100vh;
        width: 20px;
        height: 20px;
    
        &:after {
            content: "";
            position: absolute;
            display: block;
            transform: translateY(-50%);
            top: 50%;
            }
            &:after {
                background-color: var(--wp--preset--color--primary);
                border-radius: 100vh;
                opacity: 0;
                width: 12px;
                height: 12px;
                left: 3px;
                transition: opacity 0.3s ease;
            }
            &:checked {
            &:after {
                opacity: 1;
            }
        }
    }
    /*チェックボックス
    -=========-=========-=========-=========-=========*/
    input[type="checkbox"] {
        position: relative;
        background-color: var(--wp--preset--color--gray-1);
        border: 1px solid var(--wp--preset--color--gray-3);
        border-radius: 2px;
        width: 20px;
        height: 20px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
        &:after {
            position: absolute;
            content: "";
            z-index: 1;
            margin: 1px 5px;
            width: 8px;
            height: 12px;
            border: 2px solid var(--wp--preset--color--gray-1);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        &:checked {
            background-color: var(--wp--preset--color--primary);
            border-color: var(--wp--preset--color--primary);
        &:after {
            opacity: 1;
        }
        }
    }
    /*個人情報取り扱い文言
    -=========-=========-=========-=========-=========*/
    .attention {
        /* position: relative; */
        border: 1px solid #ccc;
        margin-top: 5px;
        padding: var(--wp--preset--spacing--space-30);
        overflow-y: scroll;
        height: 240px;
        > * + * {
            margin-top: var(--wp--preset--spacing--space-20);
        }
        ul{
            display: flex;
            flex-direction: column;
            gap: var(--wp--preset--spacing--space-10);
        }
    }
    /* 同意しますチェックボックス
    -=========-=========-=========-=========-=========*/
    input[type="checkbox"] {
        &.agree {
            &:after {
                margin: 1px -4px;
                width: 8px;
                height: 12px;
            }
        }
    }
    
    /*送信ボタン
    -=========-=========-=========-=========-=========*/
    /* 1. 通常時（有効化された時）のスタイル */
    .wpcf7-form .submit-button {
        font-size: var(--wp--preset--font-size--medium);
        text-align: center;
        border: 1px solid var(--wp--preset--color--primary);
        padding: 4px 16px;
        width: 100%;
        border-radius: 100vh;
        background-color: #fff;
        color: var(--wp--preset--color--primary);
        transition: color 0.3s, background-color 0.3s, border  0.3s;
    
        opacity: 1 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: all 0.3s ease;
    }
    
    /* 2. チェックが入っていない時（disabled属性がある時） */
    /* [disabled] 属性を直接指定することで、CF7の制御と同期させます */
    .wpcf7-form .submit-button[disabled],
    .wpcf7-form .submit-button:disabled {
        background-color: #aaa !important; /* 無効時はグレーに */
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    
    /* 3. ホバー時の演出（有効な時のみ） */
    .wpcf7-form .submit-button:hover:not(:disabled) {
        background-color: var(--wp--preset--color--primary);
        color: #fff;
    }
    
    
    /*セレクトボックス
    -=========-=========-=========-=========-=========*/
    /*選択項目ひとつ
    -=========-=========-=====*/
    .form-select_single {
        .selectBox {
            position: relative;
            &:before,
            &:after {
            position: absolute;
            content: "";
            pointer-events: none;
            }
    
            &:before {
            right: 0;
            display: inline-block;
            width: 3.625em;
            height: 3.625em;
            border-radius: 0 3px 3px 0;
            background-color: var(--wp--preset--color--accent);
            content: "";
            }
            &:after {
            position: absolute;
            top: 45%;
            right: 1.8em;
            transform: translate(50%, -50%) rotate(45deg);
            width: 12px;
            height: 12px;
            border-bottom: 2px solid var(--wp--preset--color--gray-1);
            border-right: 2px solid var(--wp--preset--color--gray-1);
            content: "";
            }
        }
        select {
            cursor: pointer;
            width: 100%;
            min-width: 200px;
            padding: var(--wp--preset--spacing--space-20);
            border: 1px solid var(--wp--preset--color--gray-3);
            border-radius: 3px;
            font-size: 1em;
            &:focus {
            outline: 2px solid mc_a;
            }
        }
    }
    
    /*選択項目複数
    -=========-=========-=====*/
    .form-select_multi {
        .ly_selectBox {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-30);
            .ly_selectBox {
            display: flex;
            flex-direction: row;
            gap: var(--wp--preset--spacing--space-10);
            align-items: flex-end;
            }
        }
    
        @container style(--is-md: true) {
            .ly_selectBox {
            flex-direction: row;
            }
        }
    
        .selectBox {
            font-size: 16px; /* iOSでフォーカス時にズームさせない */
            padding: var(--wp--preset--spacing--space-20);
            border: 1px solid var(--wp--preset--color--gray-3);
            border-radius: 4px;
            background-color: var(--wp--preset--color--gray-1);
            width: 100%;
            cursor: pointer;
            min-width: 120px;
            &:focus {
            outline: 2px solid var(--wp--preset--color--accent);
            }
        }
    }
}
/*確認ページ
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.horizButton-confirm {
    flex-direction: column-reverse;
    gap: var(--spacing-lg);
}
.confirm-text {
    font-size: var(--wp--preset--font-size--reguler);
    padding-bottom: var(--wp--preset--spacing--space-10);
    border-bottom: 1px solid var(--wp--preset--color--gray-3);
    display: inline-block;
    width: 100%;
}
.confirm-back {
    text-decoration: underline;
    color: var(--wp--preset--color--gray-3);
    transition: opacity 0.3s;
    @media (hover: hover) {
        &:hover {
        opacity: 0.5;
        }
    }
}
.wp-block-query-pagination-numbers{
    .page-numbers{
        &.current{
            color: var(--wp--preset--color--primary);
        }
    }
}

/* -=========-=========-=========-=========-=========-=========-=========-=========-=========-=========
    追加CSS
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
.history-year{
    flex: 0 0 100px;
}