@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ContactFormカスタマイズ */
table.CF7_table {
    width: 80%; /* デスクトップのデフォルト幅 */
    margin: 0 auto;
    border: 3px solid #e5e5e5;
    /* overflow-x: auto; を追加すると、テーブルがはみ出した際にスクロール可能になります。 */
    /* ただし、以下でレイアウトを最適化するため、通常は不要です。 */
}

table.CF7_table tr {
    border-top: 1px solid #e5e5e5;
}

/* 入力欄 */
.CF7_table input,
.CF7_table textarea {
    border: 1px solid #d8d8d8;
    box-sizing: border-box; /* paddingやborderを含めてwidthを計算 */
    width: 100%; /* 親要素の幅に合わせて入力欄を広げる */
}

.CF7_table ::placeholder {
    color: #797979;
}

/* 「必須」「任意」文字 */
.CF7_req,
.CF7_unreq {
    font-size: .9em;
    padding: 5px;
    color: #fff;
    border-radius: 3px;
    /* margin-right: 1em; は、スマホ表示時に横スクロールの原因になることがあります。 */
    /* flexboxやdisplay: inline-block; と併用して調整するのが良いでしょう。 */
    /* 今回は display: inline-block; を使用し、必要に応じてmarginを調整します。 */
    display: inline-block;
    vertical-align: middle; /* 上下中央揃え */
    margin-bottom: 5px; /* スマホ表示時に要素が重なるのを防ぐ */
}

.CF7_req {
    background: #b1202c; /* アーチレッド */
}

.CF7_unreq {
    background: #2a2652; /* アーチブルー */
}


/* タイトル列 (PC版) */
@media screen and (min-width: 768px) {
    .CF7_table th {
        width: 40%; /* 横幅 */
        background-color: #ebedf5; /* ブルーグレー */
        text-align: left;
    }
}

/* レスポンシブ (スマホ版) */
@media screen and (max-width: 767px) { /* 768px未満に修正 (min-widthと合わせる) */
    table.CF7_table {
        width: 95%; /* スマホでは少し余白を持たせる */
        box-sizing: border-box; /* paddingやborderを含めてwidthを計算 */
    }

    .CF7_table tr {
        border-top: none; /* スマホで縦に並ぶので線の重複を避ける */
        margin-bottom: 15px; /* 各行の下に余白 */
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5; /* 区切り線 */
    }

    .CF7_table tr:last-child {
        border-bottom: none; /* 最後の行は下線なし */
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .CF7_table td,
    .CF7_table th {
        display: block; /* ブロック要素にして縦に積む */
        width: 100%; /* 親要素の幅に合わせて広げる */
        line-height: 1.8em; /* 行の高さを調整 */
        padding: 5px 0; /* 上下左右のパディングを調整 */
        box-sizing: border-box; /* paddingを含めてwidthを計算 */
    }

    .CF7_table th {
        background-color: #ebedf5;
        text-align: left; /* 左揃え */
        padding-left: 10px; /* 左側に少しパディング */
        margin-bottom: 5px; /* 項目名と入力欄の間に余白 */
    }

    /* 「必須」「任意」と項目名の配置を調整 */
    .CF7_table th .CF7_req,
    .CF7_table th .CF7_unreq {
        margin-right: 0.5em; /* 項目名との間隔 */
        margin-bottom: 0; /* 上下方向のマージンをリセット */
    }

    .CF7_table td {
        padding-left: 10px; /* 入力欄の左側にパディング */
    }
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
    border: 0;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 auto;
    display: block; /* 中央寄せのためにブロック要素にする */
    padding: 10px 20px; /* ボタンのパディング */
    width: auto; /* 幅を自動調整 */
    max-width: 100%; /* はみ出し防止 */
    box-sizing: border-box; /* paddingを含めてwidthを計算 */
}

/* 「送信する」ボタン活性時のカラー */
.wpcf7-submit:enabled {
background-color: #f79034; /*オレンジ*/
}

/* 「送信する」ボタン非活性時のカラー */
.wpcf7-submit:disabled {
background-color: #999; /*グレー*/
}

.CF7_btn {
    text-align: center;
    margin-top: 20px;
}

.wpcf7-spinner {
    width: 0;
    margin: 0;
}


/* チェックボックスとテキストの改行修正 */
/*
 * Contact Form 7 のデフォルト構造を考慮し、
 * label 要素に対して display: flex を適用するのが最も効果的です。
 */
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label {
    display: flex; /* チェックボックスとテキストを横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 5px; /* チェックボックスとテキストの間に少しスペースを空ける */
    flex-wrap: wrap; /* テキストが長い場合に折り返す */
}

/* ラジオボタンとテキストの改行修正 */
/*
 * Contact Form 7 のデフォルト構造を考慮し、
 * label 要素に対して display: flex を適用するのが最も効果的です。
 */
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item label {
    display: flex; /* ラジオボタンとテキストを横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 5px; /* ラジオボタンとテキストの間に少しスペースを空ける */
    flex-wrap: wrap; /* テキストが長い場合に折り返す */
}

/* 承認確認(acceptance)のチェックボックスとテキストの改行修正 */
/*
 * Contact Form 7 のデフォルト構造を考慮し、
 * label 要素に対して display: flex を適用するのが最も効果的です。
 */
.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
    display: flex; /* チェックボックスとテキストを横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 5px; /* チェックボックスとテキストの間に少しスペースを空ける */
    flex-wrap: wrap; /* テキストが長い場合に折り返す */
}

/* 各コントロール本体のスタイル調整（任意） */
/* チェックボックス、ラジオボタン、承認確認のinput要素に適用 */
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item input[type="checkbox"],
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item input[type="radio"],
.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
    flex-shrink: 0; /* コントロールの縮小を抑制 */
    margin-right: 0; /* gap でスペースを確保するのでマージンをリセット */
    width: auto; /* 他の入力欄の width: 100% が適用されないようにリセット */
    height: auto; /* 必要に応じてサイズ調整 */
}

/* 各コントロールのテキスト部分のスタイル調整（任意） */
/* チェックボックス、ラジオボタン、承認確認のテキスト部分に適用 */
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item-label {
    word-break: break-all; /* 長いテキストでも改行されるように */
}

/* スマートフォン表示時の調整（既存のメディアクエリに追記） */
@media screen and (max-width: 767px) {
    /* 必要に応じて、スマホでのチェックボックス、ラジオボタン、承認確認の配置を微調整 */
    .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label,
    .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label,
    .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
        flex-direction: row; /* スマホでも横並びを維持 */
        justify-content: flex-start; /* 左寄せ */
    }
}

.swell-block-column .wp-block-table table.has-fixed-layout {
  width: 100%; /* テーブル全体の幅をコンテナに合わせる */
  /* has-fixed-layout クラスが table-layout: fixed; を適用している前提ですが、
     念のため明示的に指定することも可能です。
     table-layout: fixed;
  */
}

/* 特定のテーブル内の1列目のセル (td) の幅を指定 */
.swell-block-column .wp-block-table table.has-fixed-layout tbody tr td:nth-child(1) {
  width: 30%;
}

/* 特定のテーブル内の2列目のセル (td) の幅を指定 */
.swell-block-column .wp-block-table table.has-fixed-layout tbody tr td:nth-child(2) {
  width: 70%;
}