/* 主として問い合わせ関連ページのカスタムスタイルを追加 */
@charset "UTF-8";
/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge {
    visibility: hidden !important;
}

/******************************/
/** コンタクトフォームの装飾 **/
/******************************/

/*** 全体レイアウト（３列にして、両端の列幅をメディアクエリーで調整して伸縮させたい） ***/

/* PC・タブレット向けスタイル */
@media (min-width: 768px) {

    /* page-id-8 のページにのみ適用 */

    /* ページ全体のコンテナに適用されているマージンを調整 */
    .page-id-8 .entry-content,
    .page-id-14 .entry-content,
    .page-id-16 .entry-content {
        /* コンテンツの最大幅を設定し、左右をautoで中央寄せにする */
        max-width: 1200px; /* コンテンツの最大幅 */
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px; /* 左右に少しパディングを追加してコンテンツが端に寄りすぎないようにする */
        padding-right: 40px;
    }

    /* 既存のwp-block-columnsの幅指定が邪魔をする？ため、調整または削除 */
    .page-id-8 .wp-block-columns {
        max-width: 100%; /* 親要素に合わせる */
        margin-left: auto;
        margin-right: auto;
    }
    .page-id-8 .wp-block-columns > .wp-block-column:first-child,
    .page-id-8 .wp-block-columns > .wp-block-column:last-child {
        /* これらのカラムが不要であれば非表示にするか、幅を0にする */
        flex-basis: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
    }
    .page-id-8 .wp-block-columns > .wp-block-column:nth-child(2) {
        flex-basis: 100%; /* 中央カラムを100%にする */
        max-width: 100%;
    }

    .page-id-8 .wp-block-columns {
        display: flex;
        flex-wrap: nowrap;
    }

    /* .page-id-8 .wp-block-columns > .wp-block-column:first-child,
    .page-id-8 .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 10%;
        max-width: 10%;
    } */

    /* .page-id-8 .wp-block-columns > .wp-block-column:nth-child(2) {
        flex-basis: 80%;
        max-width: 80%;
    } */
}

/* スマートフォン向けスタイル */
@media (max-width: 767px) {
    /* page-id-8 のページにのみ適用 */
    .page-id-8 .wp-block-columns {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .page-id-8 .wp-block-columns > .wp-block-column:first-child,
    .page-id-8 .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 0 !important;  /* 効きません */
        max-width: 0 !important;  /* 効きません */
        min-width: 0 !important;  /* 効きません */
    }

    .page-id-8 .wp-block-columns > .wp-block-column:nth-child(2) {
        flex-grow: 1;
        min-width: 0;
    }
}
/*** フォーム本体部分 ***/
/* cf7-area1（CF7プラグインの「フォーム」をショートコードで呼び出した部分）全体に背景スタイルを適用 */
#cf7-area1,
#cf7-area2 {
    font-family: "Noto Sans JP", sans-serif;
    background-color: #FFFFFF; /* 背景色を白に */
    border-radius: 10px; /* 角を丸くする */
    padding: 13px !important; /* 内側の余白 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
    
    /* PC・タブレット表示時の幅と中央寄せ */
    width: 100%; /* 親要素の幅にフィットさせる */
    max-width: 1639px; /* 以前の最大幅(1366px)から20%増の1639.2pxを丸めて1639px */
    margin: 20px auto; /* 上下に20px、左右はautoで中央寄せ */
}
/* ヘッダー */
.page-id-8 header,       /* 問い合わせフォームページ */
.page-id-14 header,      /* 問い合わせ内容確認ページ */
.page-id-16 header {    /* 送信完了ページ */
    background : #ffffff8b !important;
}
/* ページタイトル非表示 */
.page-id-8 h1,
.page-id-14 h1 {
    display: none !important;
}
/* マージン調整 */
.page-id-8 main,
.page-id-14 main {
    margin-top: 0 !important;
}
.page-id-8 main > div:first-child,
.page-id-14 main > div:first-child {
      margin-top: 0 !important;
    padding-top: 0 !important;
}

/* cf7-entryform-box から背景スタイルを削除 */
.cf7-entryform-box {
    display: flex;
    flex-direction: column;   /* 要素を縦方向に並べる */
}
/* プライバシーポリシーチェック直前までのメイン入力エリア */
.cf7-entry-area {
    margin: 0;
}
/* アイテムエリア（フレックスボックスにしてレスポンシブ対応） */
.cf7-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 0.875em;
    padding-left: 10px;
    box-sizing: border-box;
}
/* ラベルエリア（Q:質問） */
.cf7-q {
    width: 100%;
    margin: 0;
}
.cf7-q p {
    margin: 0;
}
/* 入力エリア（A:回答） */
.cf7-a {
    width: 100%;
    margin: 0;
    padding: 0;
}
/*　「必須」ラベル　*/
.cf7-req {
    font-size:.8em;
    font-weight: normal;
    padding: 4px 6px;
    background: #2082DF;
    color: #ffffff;
    margin-left: 10px;
    display:inline-block;
    border-radius: 5px;
    transform: translateY(-2px);
}
/* 共通の入力ボックススタイル */
.cf7-a-box,
.cf7-a-txtbox,
#cf7-area1 input[type="text"],
#cf7-area1 input[type="email"],
#cf7-area1 input[type="tel"],
#cf7-area1 textarea {
    border: 1px solid #CCC;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    background: #F0F8FF;
    color: #000;
}
/* ボックスサイズなど再調整 */
.cf7-a-box {
    height: 3.5rem;
    margin: 0;
}

/* お問い合わせ種別セレクトボックスの初期色と選択肢の色を制御 */
#cf7-area1 .cf7-item .cf7-a .wpcf7-select {
    border: 1px solid #CCC;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    background: #F0F8FF;
    color: #808080 !important;
}

/* ユーザーがオプションを選択した際の文字色を黒にする */
#cf7-area1 .cf7-item .cf7-a .wpcf7-select option {
    color: #000 !important;
}

/* 選択されたoptionの文字色を強制的に黒にする */
#cf7-area1 .cf7-item .cf7-a .wpcf7-select:not([value=""]) {
    color: #000 !important;
}


/* 個別の上書きや調整 */
#cf7-area1 textarea {
    height: 200px;
}

/* 各入力エリアにフォーカスがあたると、背景色がうすいオレンジに変わり、枠線が太い赤色に変わる */
#cf7-area1 input[type="text"]:focus,
#cf7-area1 input[type="email"]:focus,
#cf7-area1 input[type="tel"]:focus,
#cf7-area1 .cf7-item .cf7-a .wpcf7-select:focus,
#cf7-area1 textarea:focus {
    background: #FFE4E1;
    border: 2px solid #FF1493;
    outline: 0;
}

.cf7-submit-area p:first-child{
    margin: 0;
}
.cf7-submit-area p:first-child a{
    color: #2082DF;
}
/* プライバシーポリシーに同意するチェックボックス */
.wpcf7-acceptance span input {
    margin-top: 5px;
    margin-bottom: 0;
}
.cf7-accept-check {
    font-size: 0.7rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
}
/* プライバシーと利用規約についてのお知らせ（reCPTCHAバッジを非表示にしたので、表記必須） */
.recaptcha-attention {
    font-size: 0.7rem;
    margin-left: 10px;
    margin-bottom: 20px;
    text-align: center;
}
/* 見た目の ”送信ボタン” の基本スタイル（角丸・影・背景グラデーションを含めた、ボタン全体を囲む部分。親要素とする） */
.cf7-submit-button,
.cf7-check-button,
.cf7-return-button,
.cf7-send-button {
    display: block;
    width: 100%;
    max-width: none; /* 画面幅いっぱいまでボタン幅を広げる */
    margin: 30px auto;
    border-radius: 30px;
    background: linear-gradient(180deg, #2188de 0%, #2bcbc6 100%);
    background-size: 200%;
    box-shadow: 0 5px 15px rgba(32, 130, 223, 0.3),  /* 既存の影 */
                0 8px 25px rgba(32, 130, 223, 0.4);  /* マウスホバー時の影 */
    transition: all 0.3s ease;  /* ホバーエフェクト */
    text-align: center;
    letter-spacing: 0.48px;
    cursor: pointer;
    padding: 0; /* 親要素自体に直接上下の余白は持たせない */
    overflow: hidden; /* 角丸を適用するため */
}
/* 実際のボタンをラップするp要素に適用するスタイル（ ”送信ボタン” の子要素）*/
.cf7-check-button p,
.cf7-return-button p,
.cf7-send-button p {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    padding: 25px 0 0; /* pタグ内で上下の余白を設定 */
    line-height: 1; /* pタグ内の行の高さをテキストに合わせる */
    font-size: 0; /* pタグ内のフォントサイズをリセットし、inputに任せる */
}
.cf7-return-button p {
    padding-bottom: 25px;
}
/* 実際の送信ボタン（ ”送信ボタン” の孫要素） */
.cf7-check-button p .cf7-check-actual-button,
.cf7-return-button p .cf7-return-actual-button,
.cf7-send-button p .cf7-send-actual-button {
    display: block; /* 親要素の幅いっぱいに広げる */
    width: 100%;
    height: auto; /* コンテンツ（「確認画面へ」などの文字）の高さに合わせる */
    border: none; /* デフォルトのボーダーを削除 */
    outline: none; /* フォーカス時のアウトラインをなくす（送信エラー時に白く表示されるのを防ぐ） */
    background: none; /* デフォルトの背景を削除 */
    color: #fff; /* 文字色を白に */
    font-size: 18px; /* 文字サイズ */
    font-weight: 700; /* 文字の太さ */
    padding:0; /* pタグで余白を設定するため、ここでは0にする */
    cursor: pointer; /* カーソルをポインターに */
    box-sizing: border-box; /* paddingを含めて要素の幅と高さを計算 */
    -webkit-appearance: none; /* Safariなどのデフォルトスタイルを無効化 */
    -moz-appearance: none; /* Firefoxのデフォルトスタイルを無効化 */
    appearance: none; /* 標準的なデフォルトスタイルを無効化 */
    line-height: 1; /* テキスト高と行高の差なし（文字の上下余白なし） */
}
/* ボタンにカーソルが乗った時のスタイル */
.cf7-submit-button:hover,
.cf7-check-button:hover,
.cf7-return-button:hover,
.cf7-send-button:hover {
    transform: translateY(-5px); /* 上に5px移動させて浮き上がるように見せる */
    box-shadow: 0 12px 30px rgba(32, 130, 223, 0.5), /* ホバー時の影をより大きく、濃くする */
                0 0 0 rgba(32, 130, 223, 0); /* 不要な影を消すためにダミーを設定 */
}
/* フォームにエラークラスが付与された場合にボタンを非アクティブに見せる */
/* （ユーザーが送信ボタンを押してバリデーションエラーが発生した後に適用される）*/
form.wpcf7-form.wpcf7-invalid .cf7-submit-button,
form.wpcf7-form.wpcf7-invalid .cf7-check-button {
    cursor: not-allowed !important; /* ボタン全体に禁止マークを表示 */
}
/* エラー時に「見た目のボタン部分」にホバーしてもカーソルがnot-allowedになるようにする */
form.wpcf7-form.wpcf7-invalid .cf7-submit-button:hover,
form.wpcf7-form.wpcf7-invalid .cf7-check-button:hover {
    cursor: not-allowed !important; /* ホバー時も禁止マークを維持 */
    transform: none; /* ホバー時の浮き上がりアニメーションを無効化 */
    box-shadow: 0 5px 15px rgba(32, 130, 223, 0.3); /* 初期状態の影に戻すか、非アクティブ用の影を設定 */
}
form.wpcf7-form.wpcf7-invalid .cf7-submit-button p:hover,
form.wpcf7-form.wpcf7-invalid .cf7-check-button p:hover {
    cursor: not-allowed !important; /* pタグ内の余白部分もnot-allowedにする */
}
/* エラー時に「実際のボタン部分」にホバーしてもカーソルがnot-allowedになるようにする */
form.wpcf7-form.wpcf7-invalid .cf7-submit-button .cf7-check-actual-button,
form.wpcf7-form.wpcf7-invalid .cf7-check-button .cf7-check-actual-button {
    cursor: not-allowed !important; /* 実際のinput要素にも禁止マークを表示 */
}

/* プライバシーポリシーチェックボックス未同意時に、
   そのフィールドのラッパーにエラークラスが付与された場合を想定 */
/* Contact Form 7のバージョンや設定によりクラス名が異なる場合があります */
.wpcf7-form-control-wrap.your-accept.wpcf7-not-valid .cf7-submit-button,
.wpcf7-form-control-wrap.your-accept.wpcf7-not-valid .cf7-check-button {
    /* opacity: 0.5 !important; */
    cursor: not-allowed !important; /* ボタンの親要素全体に禁止カーソル */
}
.wpcf7-form-control-wrap.your-accept.wpcf7-not-valid .cf7-submit-button .cf7-check-actual-button,
.wpcf7-form-control-wrap.your-accept.wpcf7-not-valid .cf7-check-button .cf7-check-actual-button {
    cursor: not-allowed !important;
}

/****************** レスポンシブ対応 *******************/
@media screen and (max-width:768px) {
    /* 固定ページの左右余白を狭くする */
    body {
        --wp--style--root--padding-left: 5px !important;
        --wp--style--root--padding-right: 5px !important;
    }
    body .page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page .entry-content {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #cf7-area1,
    #cf7-area2 { /* レスポンシブ時の#cf7-areaの調整 */
        width: auto; /* 小さい画面では幅を自動調整 */
        margin-left: 0; /* 左マージンを10pxに固定 */
        margin-right: 0; /* 右マージンを10pxに固定 */
        padding: 0; /* スマホではパディングを少し減らして15pxに */
    }
    .cf7-item {
        display: block;
        margin: 0 0 0.875em;
        padding-left: 0;
    }
    #cf7-area1 label {
        display: block;
        margin-bottom: 2px;
    }
    .cf7-q{
        width: 100%;
        margin: 0;
    }
    .cf7-q p {
        margin: 0;
    }
    .cf7-a {
        width: 100%;
        margin-top: 1rem; /* 入力エリアの上部にマージンを追加 */
    }
    /* レスポンシブ時はすべての入力要素を100%幅に統一 */
    #cf7-area1 input[type="text"],
    #cf7-area1 input[type="email"],
    #cf7-area1 input[type="tel"],
    #cf7-area1 .cf7-item .cf7-a .wpcf7-select,
    #cf7-area1 textarea {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .cf7-submit {
        width: 90%;
        max-width: none;
    }
    .recaptcha-attention {
        margin-left: 0;
    }
}

/******　問い合わせ内容確認フォーム　******/
/* コンテンツ部分背景 */
#cf7-area2 {
    background: lavender;
    padding: 10px;
}
/* ページタイトル非表示 */
.page-id-17 h1 {
    display: none !important;
}
/* ラベル */
#cf7-area2 .cf7-label {
    font-weight: bold;
    font-size: 16px !important;
}

/* 見出しのスタイル調整 */
.cf7-form-heading {
    color: #2082DF;
    font-weight: bold;
    padding: 0 0 .5em 0;
    text-align: center;
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.5rem;
}

/* 「お名前必須」から「お問い合わせ内容必須」までのラベルに適用 */
#cf7-area1 .cf7-label {
    font-weight: bold;
    font-size: 16px !important;
}

/*** 送信完了ページ ***/
.page-id-16 {
    background: #f8fbfc;
}
.page-id-16 h1 {
    color: #2082DF;
    font-size: 36px !important;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 3rem;
}
.page-id-16 p {
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
    margin-top: 3rem;
}
/* コンテンツが少なくて、フッターパーツが上にずれて表示されることへの対応 */
.page-id-16 html,
.page-id-16 body {
    height: 100%; /* HTMLとbodyの高さを画面全体に設定 */
    margin: 0;
    padding: 0;
}
.page-id-16 body {
    display: flex; /* flexboxを使って子要素を配置 */
    flex-direction: column; /* 垂直方向に並べる */
}
/* メインコンテンツ領域をフッターが下がるように拡張（利用可能なスペースをすべて占有）*/
.page-id-16 main {
    flex-grow: 1;
}
/* フッターを可能な限り下に押し下げる */
.page-id-16 .wp-block-template-part {
    margin-top: auto;
}

/* ヘッダーパーツ内の「トップページへ」ボタン（影の設定・マウスホバー時の動作設定） */
.custom-hover-button {
    box-shadow: 0 5px 15px rgba(32, 130, 223, 0.3),  /* 既存の影 */
                0 8px 25px rgba(32, 130, 223, 0.4);  /* マウスホバー時の影 */
    transition: all 0.3s ease;  /* ホバーエフェクト */
    overflow: hidden;
    border-radius: 40px;
}
.custom-hover-button:hover {
    transform: translateY(-5px); /* 上に5px移動させて浮き上がるように見せる */
    box-shadow: 0 12px 30px rgba(32, 130, 223, 0.5), /* ホバー時の影をより大きく、濃くする */
                0 0 0 rgba(32, 130, 223, 0); /* 不要な影を消すためにダミーを設定 */
}
.custom-hover-button a {
    font-size: 0.8rem;
    white-space: nowrap;
}