/* モダンリセットCSS */

/* 全要素にbox-sizing: border-boxを適用（パディングを含めた幅計算にする） */
*, *::before, *::after {
    box-sizing: border-box;
}

/* リストのスタイルをリセット（role="list"を持つものを除く） */
ul[role='list'], ol[role='list'] {
    list-style: none;
}

/* スムーズスクロール（ユーザー設定を尊重） */
html:focus-within {
    scroll-behavior: smooth;
}

/* bodyのデフォルト設定 */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

/* 画像をレスポンシブ対応にする */
img, picture {
    max-width: 100%;
    display: block;
    height: auto;
}

/* 入力フォームのフォントを親に合わせる */
input, button, textarea, select {
    font: inherit;
}

/* アニメーションを減らす設定をしている人への配慮 */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    font-size: 62.5%;
}

/* デフォルトの余白を削除 */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    line-height: 1.4;
    color: #252525;
}

@media screen and (min-width:769px) {
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
        font-size: 1.5rem;
    }
}


.sp_area {
    display: block;
}

.pc_area {
    display: none;
}

@media screen and (min-width:769px) {
    .sp_area {
        display: none;
    }

    .pc_area {
        display: block;
    }
}

.fs_large {
    font-size: 3.0rem !important;
    color: #FFF;
    font-weight: 900;
}

.fs_middle {
    font-size: 1.5rem !important;
}

.fs_small {
    font-size: 1.0rem !important;
}

@media screen and (min-width:769px) {
    .fs_large {
        font-size: 4.0rem !important;
        color: #FFF;
        font-weight: 900;
    }

    .fs_middle {
        font-size: 2.0rem !important;
    }

    .fs_small {
        font-size: 1.5rem !important;
    }
}


.responsive {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media screen and (min-width:769px) {
    .responsive {
        width: 750px;
        padding: 0;
    }
}

@media screen and (min-width:1020px) {
    .responsive {
        width: 1000px;
    }

    /*
*メインビジュアル
*/
}

.mainbg {
    background-image: url(../img/head_bg_top.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.mainbg img {
    width: 95%;
    margin: 0 auto;
}

@media screen and (min-width:769px) {
    .mainbg img {
        width: 750px;
    }
}

@media screen and (min-width:1020px) {
    .mainbg img {
        width: 1000px;
    }
}

.main_read {
    text-align: left;
    padding: 15px 0;
}

@media screen and (min-width:769px) {
    .main_read {
        text-align: center;
        padding: 30px 0;
    }
}

.main_place_wrap {
    margin-bottom: 5px;
}

.main_prace_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

@media screen and (min-width:769px) {
    .main_prace_flex {
        width: 500px;
        margin: 0 auto;
    }
}

.main_prace_title {
    border-radius: 5px;
    border: 1px solid #666;
    padding: 10px 5px;
    width: 110px;
    text-align: center;
    background: rgb(248, 248, 143)
}

.main_prace_adress {
    width: calc(100% - 140px - 10px);
    font-size: 1.7rem;
    margin-bottom: 10px;
    font-weight:600;
}

@media screen and (min-width:769px) {
    .main_prace_title {
        border-radius: 5px;
        border: 1px solid #666;
        padding: 5px 5px;
        width: 150px;
        text-align: center;
    }

    .main_prace_adress {
        width: calc(100% - 150px - 20px)
    }
}
.main_prace_adress span {
    font-size:1.5rem;
    font-weight:initial;
}

.period {
    padding: 25px 0;
    text-align: center;
    background: darkslategrey;
    color: #FFF;
    font-size: 2.4rem;
    ;
    font-weight: 900;
    position: relative;
    margin-top: 40px;
}

.period span {
    font-size: 1.4rem;
    font-weight: 600;
}

@media screen and (min-width:769px) {
    .period {
        font-size: 3.5rem;
        margin-top: 50px;
    }

    .period span {
        font-size: 2.0rem;
    }
}


.fes_day {
    border: 1px solid #FFF;
    display: inline-block;
    text-align: center;
    color: #FFF;
    line-height: 1.0;
    padding: 5px 10px;
    font-size: 1.5rem;
    position: absolute;
    background: rgb(243, 131, 4);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -9%;
    border-radius: 5px;
}

@media screen and (min-width:769px) {
    .fes_day {
        font-size: 2.0rem;
    }
}


/*
*プレゼント
*/
.fex_present_text_middle {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 900;
    color: #14314A;
}

@media screen and (min-width:769px) {
    .fex_present_text_middle {
        font-size: 3.0rem;
    }
}

.fex_present_bg {
    background: #f0f0f0;
    padding: 25px 0;
    text-align: center;
    color: #FFF;
}

.fex_present_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

@media screen and (min-width:769px) {
    .fex_present_flex {

        flex-wrap: wrap;
    }
}

@media screen and (min-width:1020px) {
    .fex_present_flex {
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
    }
}

.fex_present_text_box {
    background-image: linear-gradient(90deg, rgba(181, 59, 134, 1), rgba(229, 37, 121, 1) 31%, rgba(255, 144, 84, 1) 74%, rgba(255, 121, 6, 1));
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 15px -5px #777777;
    text-align: center;
    width: 100%;
}

@media screen and (min-width:769px) {
    .fex_present_text_box {
        width: 100%;
    }
}

@media screen and (min-width:1020px) {
    .fex_present_text_box {
        width: calc((100% - 30px)/2)
    }
}

.fex_present_text_box p {
    line-height: 1.1;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.fex_present01 {
    margin-bottom: 5px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #FFF;
    display: inline-block;
    color: #FFF;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.gift_img {
    padding: 15px 0;
    margin: 0 auto;

}

.fex_present_bottom_text {
    text-align: left;
    color: initial;

}

.fex_present_text {
    color: #FFF;
}


.fc_yellow {
    color: rgb(248, 224, 9);
}





/*
*みんなの暮らし体験フェスとは?
*/
.about_fex {
    padding-top: 30px;
    padding-bottom: 30px;
    background: rgb(252, 249, 214);
}

.about_fex_h1 {
    font-size: 2.0rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 20px;
}

@media screen and (min-width:769px) {
    .about_fex_h1 {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }
}

.about_fex_text {
    text-align: left;
    margin-bottom: 25px;
}

@media screen and (min-width:769px) {
    .about_fex_text {
        text-align: center;
    }
}

.highlights_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media screen and (min-width:769px) {
    .highlights_flex {
        display: flex;


    }
}


.hl {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid darkslategrey;
    box-shadow: 0px 0px 15px -5px #777777;
    background: #FFF;
}

@media screen and (min-width:769px) {
    .hl {
        width: calc((100% - 40px)/3);
    }
}

.hl img {
    border-radius: 10px;
    margin-bottom: 10px;
}

.t {
    color: darkslategrey;
    font-weight: 900;
}

/*
*スケジュール
*/
.fex_booth_title {
    background: #F57F00;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #FFF;
}

.fex_booth {
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed gray;
}

.fex_booth_wrap>.fex_booth:last-child {
    border-bottom: none;
}

.fex_booth_flex {
    display: block;
}

@media screen and (min-width:769px) {
    .fex_booth_flex {
        display: flex;
        gap: 10px;
        align-items: start;
    }
}


.fex_booth_img {
    width: 100%;
    margin: 0 auto 5px auto;
}

@media screen and (min-width:769px) {
    .fex_booth_img {
        width: 300px;
    }
}

.fex_booth_img img {
    border-radius: 10px;
}

.fex_booth_child {
    width: 100%;
}

@media screen and (min-width:769px) {
    .fex_booth_child {
        width: calc(100% - 10px - 300px);
    }
}

.fex_booth_label {
    display: inline-block;
    border-radius: 7px;
    background: rgb(148, 107, 18);
    color: #FFF;
    text-align: center;
    padding: 2px 10px;
    font-weight: initial;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.money {
    background: rgb(195, 22, 195);
}

.woodworking {
    background: rgb(148, 107, 18);
}

.fex_booth_company,
.fex_event_name {
    font-size: 1.7rem;
    font-weight: 900;
}

.fex_event_present {
    font-size: 1.7rem;
    color: #F57F00;
    font-weight: 900;
    text-align: center;
    margin-top: 30px;
}

.fex_event_name {
    color: #0ba360;
}

.fex_booth_company,
.fex_event_name,
.fex_event_title,
.fex_booth_place,
.fex_event_days {
    display: flex;
    align-items: start;
    margin-bottom: 5px;
}



.icon_size {
    font-size: 2.0rem !important;
    margin-right: 0.5rem;
    font-weight: initial;
    color: initial;
}




.event_present_title {
    position: relative;
    display: inline-block;
    background: #F57F00;
    color: #FFF;
    padding: 2px 10px 4px 10px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border-radius: 8px;
}

@media screen and (min-width:769px) {
    .event_present_title {
        width: 350px;
    }
}

.event_present_title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 10px 7.5px 0 7.5px;
    border-color: #f57f00 transparent transparent;
    translate: -50% 100%;
}

.event_present_img {
    width: 300px;
    margin: 0 auto;
}

.event_present_img p {
    font-size: initial;
    color: initial;
    text-align: left;
    margin-bottom: 5px;
    font-weight: 200;
    font-size: 1.4rem;
}

.fex_map_title {
    background: rgb(238, 112, 173);
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #FFF;
}

.map_wrap {
    padding-top: 25px;
    padding-bottom: 25px;
}

.map_iframe {
    width: 100%;

}

.map_iframe iframe {
    width: 100%;
    height: 400px;
}

.map_place_wrap {
    margin-top: 10px;
}

.fs_color_br {
    color: brown;
}


.floting_button_wrap a:active,
.floting_button_wrap a:visited,
.floting_button_wrap a:link {
    color: #FFF;
    text-decoration: none;

}


/* --------------------------------------
  フローティングボタン
-------------------------------------- */

/* 【スマホ用】真ん中（-50%）を維持しながら上下する */
@keyframes floating-center {
    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -10px);
    }

    /* 動きの幅 */
    100% {
        transform: translate(-50%, 0);
    }
}

/* 【PC用】その場で上下するだけ */
@keyframes floating-simple {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    /* 動きの幅 */
    100% {
        transform: translateY(0);
    }
}


.floting_button {
    /* ▼共通設定 */
    position: fixed;
    display: block;
    margin: 0 auto;
    border: 2px solid #FFF;
    border-radius: 50px;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0px 0px 15px -5px #777777;
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    box-shadow: 0px 0px 12px 0px #a4a4a4;
    z-index: 9999;
    /* 他の要素より手前に表示 */

    /* ▼スマホ表示（デフォルト）の設定 */
    bottom: 10px;
    left: 50%;
    /* 左端から50%の位置 */
    width: 90%;
    /* 幅は画面の90% */

    /* スマホ用アニメーション適用 */
    animation: floating-center 3s ease-in-out infinite;
}

.floting_button:hover {
    background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
}

@media (min-width: 769px) {
    .floting_button {
        left: auto;
        /* スマホの「左から50%」を打ち消し */
        right: 20px;
        /* 右から20px */
        bottom: 20px;
        /* 下から20px */
        width: 300px;
        /* PCだと90%は長すぎるので固定幅にする（好みで調整可） */

        /* PC用アニメーションに切り替え */
        animation-name: floating-simple;
    }
}

.floting_button p {
    font-size: 2.0rem;
}

.floating_flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_small {
    font-weight: initial;
    font-size: 2.0rem;
    margin-right: 5px;
}

/* --------------------------------------
  フッター・プレゼント
-------------------------------------- */

.gift_h1 {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    font-weight: 900;
    color: #FFF;
    font-size: 1.8rem;
    background: #14314A;
}

@media (min-width: 769px) {
    .gift_h1 {
        font-size: 2.5rem;
    }
}

.gift_inner {
    padding-top: 25px;
    padding-bottom: 25px;
    background: #f0f0f0;
}

.present_get {
    margin-bottom: 25px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #14314A;
}

.present_get_felx {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.present_get_child {
    width: 100%;
    border: 1px solid #14314A;
    border-radius: 5px;
    box-shadow: 0px 0px 15px -5px #777777;
    padding: 20px;
    background: #FFF;
    position: relative;
}

@media (min-width: 769px) {
    .present_get_child {
        width: calc((100% - 15px)/2);
    }
}

.resbutton {
    display: block;
    width: 100%;
    padding: 15px 0;
    border-radius: 50px;
    border: 1px solid #FFF;
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    box-shadow: 0px 0px 12px 0px #a4a4a4;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

@media (min-width: 769px) {
    .resbutton {
        width: 600px;
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.resbutton:hover {
    background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
}

.resbutton_deco {
    font-size: 2.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .resbutton_deco {
        font-size: 2.5rem;
    }
}

.resbutton_wrap a:link,
.resbutton_wrap a:active,
.resbutton_wrap a:visited {
    color: #FFF;
    text-decoration: none;
}


.present_get_child_title {
    font-weight: 900;
    color: #14314A;
    font-size: 2.0rem;
}

.get01:before {
    content: "01";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    color: 0;
    background: #14314A;
    z-index: 100;
    color: #FFF;
    padding: 2px;
    border-bottom-left-radius: 5px;
    text-align: center;
}

.get02:before {
    content: "02";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    color: 0;
    background: #14314A;
    z-index: 100;
    color: #FFF;
    padding: 2px;
    border-bottom-left-radius: 5px;
    text-align: center;
}

.get03:before {
    content: "03";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    color: 0;
    background: #14314A;
    z-index: 100;
    color: #FFF;
    padding: 2px;
    border-bottom-left-radius: 5px;
    text-align: center;
}

.get04:before {
    content: "04";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    color: 0;
    background: #14314A;
    z-index: 100;
    color: #FFF;
    padding: 2px;
    border-bottom-left-radius: 5px;
    text-align: center;
}


.footer_inner {
    background: #14314A;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-bottom: 100px;
}

@media (min-width: 769px) {
    .footer_inner {
        padding-bottom: 25px;
    }
}

.resbutton_wrap a:link,
.resbutton_wrap a:active,
.resbutton_wrap a:visited {
    color: #FFF;
    text-decoration: none;
}


.main_sponsor {
    color: #FFF;
    text-align: center;
    font-size: 1.6rem;
}

@media (min-width: 769px) {
    .main_sponsor {
        font-size: 2.0rem;
    }
}

.main_sponsor_adress {
    text-align: center;
    color: #FFF;
    font-weight: normal;
    margin-top: 5px;
}

/*追加*/

.js-modal-open {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.js-modal-open:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.fex_present_text_box:not(.js-modal-open):hover {
    transform: none !important;
    box-shadow: 0px 0px 15px -5px #777777 !important;
    opacity: 1 !important;
    cursor: default;
}

.fex_present_text_box p,
.fex_present_text_box p span,
.fex_present_text_box .fs_small {
    color: #ffffff !important;
}

.fex_present_text_box .fc_yellow {
    color: rgb(248, 224, 9) !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-y: auto;
}

.modal_content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 30px 25px;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    position: relative;
    color: #252525;
    text-align: left;
}

.modal_close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.modal_close:hover {
    color: #000;
}

.modal_h2 {
    font-size: 1.8rem;
    color: #14314A;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 900;
}

.modal_step p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.modal_hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 20px 0;
}

.modal_list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin-bottom: 20px;
}

.modal_list li {
    font-size: 1.4rem;
    font-weight: bold;
}

.modal_list li::before {
    content: "・";
}

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

.modal_mark_img img {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
}

.modal_trigger_text {
    display: block;
    margin-top: 12px;
    font-size: 1.6rem !important;
    /* 周囲の1.3remより大きく設定 */
    font-weight: 900 !important;
    /* 最も太くして視認性をアップ */
    color: #ffffff !important;
    /* 確実に白で表示 */
    text-decoration: underline;
    /* リンクであることを示す下線 */
    line-height: 1.2;
}

/* 特典ボックス全体（js-modal-open）にマウスを乗せた時の反応 */
.js-modal-open:hover .modal_trigger_text {
    color: rgb(248, 224, 9) !important;
    /* ホバー時に黄色へ変化 */
    text-decoration: none;
    /* ホバー時は下線を消してスッキリさせる */
}

.text-center {
    text-align: center;
}

.rem4 {
    font-size: 4rem !important;
}



/*
*W特典キャンペーン
*/
.wcamp_wrap h1 {
    font-size: 3.0rem;
    font-weight: 900;
    text-align: center;
    color: rgb(201, 38, 38);
    padding: 15px 0;
}


@media (min-width: 769px) {
    .wcamp_wrap h1 {
        font-size: 5.0rem;
        font-weight: 900;
        text-align: center;
    }
}

.wcamp_wrap h1 span {
    font-size: 2.5rem;
    color: rgb(49, 42, 42);

}

.wcamp_wrap h1 img {
    width: 200px;
    margin: 0 auto;
}

.wcamp_h2 {
    background: rgb(49, 42, 42);
    text-align: center;
    color: #FFF;
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 1.7rem;
}

.wcamp_list div {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.wcamp_list div {
    margin-bottom: 15px;
}

.wcamp_list div p {
    display: block;
    width: 100%;
}


.wcamp_title {
    font-weight: 900;
    color: rgb(201, 38, 38);
    font-size: 1.6rem;
    display: inline-block;
}



.wcamp_cir {
    border-radius: 50%;
    background: rgb(201, 38, 38);
    text-align: center;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFF !important;
    margin-right: 5px;
    font-weight: 600 !important;
    padding: 5px;
    font-size: 1.0rem;
    display: block;
}

.wcamp_shoplist {
    list-style-type: disc !important;
    list-style-position: inside !important;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
}

.wcamp_mark {
    text-align: center;
    color: rgb(201, 38, 38);
    margin-top: 10px;
}

.wcamp_mark_img {
    width: 250px;
    margin: 0 auto 30px auto;
}

.wcamp_footer_inner {
    background: rgb(49, 42, 42);
    padding: 25px 0;
}

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

.fex_booth_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0ba360;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.fex_booth_btn:hover {
    background-color: #0da362;
    background-image: linear-gradient(to bottom, #0dbd6f, #0ba360);
    box-shadow: 0 4px 15px rgba(11, 163, 96, 0.4);
}

.fex_present_text_box a p,
.fex_present_text_box a p span {
    text-decoration: none !important;
    border-bottom: none !important;
    display: inline-block;
}

.fex_present_text_box a .modal_trigger_text {
    text-decoration: none !important;
}

/* =================================================== */
/* CF7 確認画面付きフォーム テンプレート
/* =================================================== */

/* --- フォーム全体 --- */
.cf7-contact {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- 入力欄とラベル (PC表示) --- */
.wpcf7-form .form-row {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.form-label {
    width: 240px;
    margin-right: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.form-label.required::after {
    content: "必須";
    font-size: 0.8em;
    color: #fff;
    background-color: #d9534f;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.form-row .wpcf7-form-control-wrap,
.form-row .input-wrapper {
    flex: 1;
    min-width: 0;
}

.input-text,
.input-textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.5rem;
    box-sizing: border-box;
}

/* hCaptchaは中央寄せ（入力欄のレイアウトとは別） */
.wpcf7-form-control-wrap {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

/* --- バリデーション・エラー表示 --- */
.error-message {
    display: block;
    color: #d9534f;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 0.5rem;
}

.input-text.is-error {
    border-color: #d9534f !important;
    background-color: #fff8f8;
}

/* --- 確認画面表示 --- */
.form-input-area[aria-hidden="true"] {
    display: none;
}

.confirmation-view {
    display: none;
}

.confirmation-view[aria-hidden="false"] {
    display: block;
    margin-bottom: 30px;
}

.confirmation-view ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.confirmation-view li {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.confirmation-view .conf-label {
    width: 240px;
    margin-right: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.confirmation-view .conf-value {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* --- ボタン --- */
.js-btn-wrap button,
.js-btn-wrap input[type="submit"] {
    display: block;
    margin: 2rem auto 0;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.js-confirm-btn {
    background-color: #007bff;
}

.js-confirm-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.js-secondstep {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.js-secondstep button, .js-secondstep input[type="submit"] {
    margin-top: 0;
    flex: 1;
    max-width: 240px;
}

.js-return-btn {
    background-color: #6c757d;
}

.wpcf7-form [type="submit"] {
    background-color: #28a745;
}

.js-btn-wrap {
    display: grid;
    place-items: center;
}

.js-btn-wrap>* {
    grid-area: 1/1;
}

.js-btn-wrap>[aria-hidden="true"] {
    visibility: hidden;
}

/* --- レスポンシブ (スマホ表示) --- */
@media (max-width: 768px) {
    .wpcf7-form .form-row, .confirmation-view li {
        flex-direction: column;
        align-items: stretch;
    }

    .form-label, .confirmation-view .conf-label {
        width: 100%;
        margin: 0 0 0.5rem 0;
    }

    .js-secondstep {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .flex-count {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .flex-count .wpcf7-form-control-wrap {
        display: inline-block;
        margin: 0 !important;
        width: auto;
    }

    .flex-count input[type="number"] {
        width: 80px;
        text-align: center;
        margin: 0 5px;
        padding: 5px;
    }
}

/* --- 修正ボタン・送信ボタンを横並び--- */

.button_flex {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap
}

.button_flex div {
    width: calc((100% - 15px)/2)
}

.button_flex input {
    width: calc((100% - 15px)/2)
}

/* --- スピナーをカラム落ちさせる--- */
.wpcf7-spinner {
    display: none;
}

/* =================================================== */
/* サンクスページ用スタイル
/* =================================================== */

.thanks-section {
    padding: 40px 20px;
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
}

.thanks-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* --- 見出しエリア --- */
.thanks-heading h2 {
    font-size: 1.8rem;
    color: #28a745;
    /* 成功イメージの緑（サイトカラーに合わせて変更可） */
    margin-bottom: 20px;
}

.thanks-lead {
    font-size: 1.5rem;
    margin-bottom: 40px;
}

/* --- 今後の流れボックス --- */
.thanks-flow-box {
    background-color: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
    text-align: left;
    /* ボックス内は左寄せ */
}

.thanks-flow-box h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    display: block;
}

.flow-content {
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.flow-content p {
    margin-bottom: 10px;
}

/* 注意書き（赤字） */
.flow-attention {
    font-size: 0.95rem;
    color: #d9534f;
    /* エラー/注意色の赤 */
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
}

.flow-attention p {
    margin-bottom: 5px;
    text-indent: -1em;
    padding-left: 1em;
}

/* --- 連絡先エリア --- */
.thanks-contact {
    margin-bottom: 40px;
}

.contact-tel {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 10px;
}

.contact-tel a {
    text-decoration: none;
    color: #333;
}

/* --- 結び --- */
.thanks-closing {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 40px;
}

/* --- ボタン --- */
.thanks-btn-wrap {
    margin-top: 20px;
}

.btn-top {
    display: inline-block;
    background-color: #6c757d;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.3s;
}

.btn-top:hover {
    opacity: 0.8;
}

/* スマホ用改行制御 */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .thanks-heading h2 {
        font-size: 1.5rem;
    }

    .thanks-flow-box {
        padding: 20px;
    }

    .sp-only {
        display: inline;
    }

    .contact-tel {
        font-size: 1.2rem;
    }
}