@charset "utf-8";
/**
* 動的ページ用
*/


/**
* ボタン
*/
/* 共通 */
.btn {
    display: block;
    width: 50%;
    height: 32px;
    text-align: center;
    color: #ffffff;
    border-radius: 100px;
    border: none;
    margin: 16px 0 10px auto;
    padding: 3px 10px;
    box-shadow: 0 5px #D9D9DA;
}

    .btn span {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
    }

.btn_sec {
    display: flex;
    gap: 10px;
    width: 98%;
    max-width: 540px;
    margin: 0 auto;
}

.btn_center {
    margin: 10px auto 12px auto;
    /*margin: 10px auto 10px 78px;*/
}

.btn_width {
    width: 98%;
    max-width: 540px;
    margin: 0 auto;
}

/* 緑ボタン */
.btn_green {
    background-color: #92C41D;
}
/* 青ボタン */
.btn_blue {
    background-color: #174B94;
}
/* キャンセルボタン */
.btn_can {
    background-color: #C93426;
}
/* 閉じるボタン */
.btn_close {
    background-color: #D9D9DA;
    box-shadow: none;
    color: #333333;
    margin: 12px auto 4px auto;
}




/* ピンモーダル */
.modal_bar {
    width: 80px;
    height: 4px;
    background-color: #C7C7C7;
    border-radius: 100px;
    margin: 20px auto;
}

.modal_bar_favAndDetail {
    display: flex;
}

.pin_modal_main {
    height: 100vh;
}

.pin_modal {
    /* position: relative;*/
    position: absolute;
    z-index: 1;
    width: 100vw;
    max-width: 540px;
    /*height: 300px;*/
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    margin: 0 auto;
    padding: 4px 20px;
}

.pin_modal_place {
    font-size: 16px;
    font-weight: 600;
    line-height: 10%;
    margin: 24px 10px 14px 10px;
}

.pin_modal_fav {
    font-size: 50px;
    height: 50px;
    line-height: 40px;
    color: #D9D9DA;
}

.pin_modal_fav_on {
    font-size: 50px;
    height: 50px;
    line-height: 40px;
    color: #174B94;
}

.pin_modal_star {
    position: absolute;
    right: 30px;
    top: 52px;
    color: #D9D9DA;
}

.pin_modal_field_sec {
    position: relative;
}

    .pin_modal_field_sec::before {
        content: '';
        width: 16px;
        height: 16px;
        background: url(../img/app_search.png) no-repeat center center / auto 100%;
        display: inline-block;
        position: absolute;
        top: 12px;
        right: 12px;
    }

.pin_modal_field {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background-color: #F7F8F8;
    padding: 3px 10px;
    width: 100%;
    height: 40px;
    border-radius: 7px;
    border: solid 1px #C7C7C7;
}

.pin_modal_bottom {
    justify-content: space-between;
    align-items: center;
    display: flex;
    background-color: #D9D9DA;
    height: 40px;
    width: 80%;
    max-width: 500px;
    padding: 0 16px;
    margin: 16px auto;
}

    .pin_modal_bottom img {
        width: 30px;
        height: 30px;
    }

.pin_modal_spotImg {
    width: 100%;
}
/* 選択済み */
.pin_modal_selected {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-color: #D8ECFA;
    height: 42px;
    width: 100%;
    max-width: 540px;
    margin-bottom: 10px;
    padding: 0 8px;
    border-radius: 10px;
}

    .pin_modal_selected .pin_img img {
        height: 54px;
        width: 36px;
        /* margin-top: -10px; */
        margin-right: 10px;
    }

    .pin_modal_selected p {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        color: #174B94;
        margin-bottom: 0;
    }

    .pin_modal_selected .pin_modal_address {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        color: #174B94;
        margin-bottom: 0;
    }

    .pin_modal_selected .pin_close {
        position: absolute;
        right: 8px;
        top: 6px;
    }

        .pin_modal_selected .pin_close img {
            height: 30px;
        }

@media screen and (max-width: 767px) {

    .pin_modal_place {
        font-size: 16px;
        line-height: 100%;
        font-weight: 600;
        width: 200px;
        margin: 0px 10px 14px 10px;
    }
}


/** 
* フォーム
*/
.form_main {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 30px 20px;
}
/* フォームタイトル */
.form_title {
    margin-bottom: 18px;
}

.form_title_content_hokubu {
    font-size: 23px;
    padding-left: 18%;
}

.form_title_content_kozoji {
    font-size: 23px;
    padding-left: 7%;
}

.form_title img {
    width: 100%;
}
/* フォーム項目名 */
.form p {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.75px;
    color: #3E3A39;
    padding: 12px 8px 2px 22px;
    margin-bottom: 0;
}

.form span {
    font-size: 9px;
    font-weight: 300;
    color: #ffffff;
    background-color: #c93426;
    letter-spacing: 0;
    padding: 1px 5px;
    margin: 0 10px 12px 10px;
    border-radius: 5px;
}
/* フォーム入力欄 */
.form .input_txt {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background-color: #eeeeee;
    padding: 3px 10px;
    width: 100%;
    height: 40px;
    border-radius: 7px;
    border: none;
}
/* セレクトボックス */
.form select {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background-color: #F7F8F8;
    padding: 3px 10px;
    width: 100%;
    height: 40px;
    border-radius: 7px;
    border: solid 1px #C7C7C7;
}
/* さらに追加 */
.form_more {
    font-size: 14px;
    font-weight: 700;
    color: #174B94;
    text-align: center;
    padding-top: 20px;
    letter-spacing: 2px;
}

.form_wrap {
    margin-top: 2px;
    display: flex;
    justify-content: flex-end;
}

    .form_wrap label {
        display: block;
        text-align: center;
        cursor: pointer;
        height: 28px;
        width: 28px;
        margin: 5px 5px;
        background-color: #174B94;
        border-radius: 100px;
    }

.icon-plus, .icon-minus {
    width: 24px;
    height: 24px;
    position: relative;
}

    .icon-plus:before,
    .icon-plus:after {
        content: "";
        position: absolute;
        top: 12px;
        right: -8px;
        width: 16px;
        height: 2px;
        background-color: #ffffff;
    }

    .icon-plus:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .icon-minus:before {
        content: "";
        position: absolute;
        top: 12px;
        right: -8px;
        width: 16px;
        height: 2px;
        background-color: #ffffff;
    }

.form_wrap input[type="checkbox"] {
    display: none;
}

.form_wrap .form_content {
    height: 0;
    padding: 0;
    overflow: hidden;
    margin-bottom: 30px;
}

.switch:checked + .form_content {
    height: auto;
}

.switch:checked + .form_wrap {
    color: red;
}
/*ログインフォーム*/
.login_form {
    display: block;
    margin: 0 auto;
    width: 310px;
}

/* ラジオボタン */
.input_radio {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    padding: 3px 10px;
}

.input_radioBtn {
    display: flex;
}

    .input_radioBtn div {
        margin-right: 10px;
    }

.input_radio input {
    margin: 7px auto;
}

.form_half {
    padding: 10px 0;
    display: flex;
}

    .form_half input {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        background-color: #F7F8F8;
        margin: 0 2px;
        padding: 3px 10px;
        width: 100%;
        height: 40px;
        border-radius: 7px;
        border: solid 1px #C7C7C7;
    }

/* 確定ボタン */
.form_sub {
    display: block;
    width: 300px;
    height: 50px;
    text-align: center;
    color: #ffffff;
    background-color: #174b94;
    border: none;
    margin: 50px auto 0 auto;
}

    .form_sub span {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1.5px;
    }

@media screen and (min-width: 440px) {
    .form_main {
        /* max-width: 440px; */
    }
}




/**
* 一覧
*/
.bookinglist {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background-color: #F7F8F8;
    padding: 10px 16px;
    margin: 20px auto;
    width: 100%;
    line-height: 24px;
    border-radius: 14px;
    border: solid 1px #C7C7C7;
}

.booking_title {
    font-weight: 600;
}

    .booking_title::after {
        content: '：';
    }

/* テキスト */
.app_txt {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    overflow-wrap: break-word;
}

.app_txt_bg {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 10px auto;
}
/* 予約確認 詳細を見るボタン */
.btn_shosai {
    display: block;
    width: 100px;
    height: 24px;
    text-align: center;
    color: #333333;
    background-color: #D9D9DA;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 70px;
    margin-bottom: 3px;
    text-decoration: none;
}

/* キャンセル */
.form_title_can {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    background-color: #C93426;
    padding: 5px 16px;
    margin-bottom: 18px;
}

.bookinglist_can {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background-color: #FCE8E5;
    padding: 10px 16px;
    margin: 20px auto;
    width: 100%;
    line-height: 24px;
    border-radius: 14px;
    border: solid 1px #C93426;
}
/* キャンセル理由 */
.can_reason {
    margin-top: 50px;
}

.can_txt {
    font-size: 12px;
    font-weight: 600;
    ;
    text-align: center;
}

.can_reason textarea {
    resize: none;
    width: 100%;
    height: 100px;
    font-size: 12px;
    margin-top: 10px;
    padding: 7px;
    background-color: #F7F8F8;
    border-radius: 7px;
    border: solid 1px #C7C7C7;
}



/**
* ピン場所
*/
/* ヘッダー */
.pin_header_sec {
    width: 100vw;
    background-color: #174B94;
    padding: 18px 8px;
}

.pin_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
}

.pin_close img {
    width: 30px;
}

.pin_list {
    width: 70px;
    height: 30px;
    color: #174B94;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: #D8ECFA;
    border-radius: 20px;
    padding: 3px;
}
/* 現在地を選択する */
.pin_current {
    width: 100vw;
    background-color: #F7F8F8;
    padding: 14px;
    text-align: center;
}

    .pin_current img {
        height: 30px;
    }
/* googleマップ */
.pin_map iframe {
    display: block;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.pin_map_modal {
    height: 60vh;
}
/* ピン情報 */
.pin_grayback {
    width: 100vw;
    background-color: #F7F8F8;
    padding: 24px 8px;
    text-align: center;
}

.pin_whiteback {
    width: 100vw;
    background-color: #ffffff;
    padding: 24px 8px;
    text-align: center;
}

.pin_tag {
    font-size: 13px;
    color: #727171;
}

.pin_place {
    font-size: 18px;
}

.pin_address {
    font-size: 14px;
    margin-top: 5px;
}

.pin_btn {
    width: 160px;
    height: 30px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 20px;
    padding: 3px;
    margin: 20px auto;
}

.pin_set {
    background-color: #92C41D;
}

.pin_coupon {
    background-color: #E1A33D;
}

.pin_img img {
    width: 100%;
    max-width: 540px;
    text-align: center;
}

.pin_txt {
    font-size: 12px;
    text-align: center;
    overflow-wrap: break-word;
    width: 96%;
    max-width: 540px;
    margin: 10px auto;
}

.pin_store {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: #174B94;
    text-align: center;
    margin-top: 20px;
}

.pin_whiteback table {
    font-size: 13px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.pin_whiteback th {
    background-color: #D8ECFA;
    text-align: center;
    font-weight: 300;
    width: 25%;
    vertical-align: middle;
}

.pin_whiteback td {
    text-align: left;
    padding: 8px 4px;
}







/**
* footer 1006
*/
/* centX ロゴ */
.logo_centx {
    margin: 100px auto;
}

    .logo_centx img {
        display: block;
        margin: 0 auto;
        width: 200px;
    }

/* 青色部分 */
.footer_blue {
    background-color: #004B8A;
    height: auto;
}

.sns_section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    /*    padding-bottom: 30px;*/
}

.sns {
    padding: 14px;
}

    .sns img {
        width: 40px;
    }

/* 名鉄 ロゴ */
.logo_meitetsu img {
    display: block;
    margin: 0 auto;
    width: 200px;
}

/* copyright */
.copyright {
    text-align: center;
    color: #ffffff;
    margin-top: 60px;
    margin-bottom: 0;
    padding-bottom: 10px;
    font-size: 10px;
    line-height: 1.75;
}

@media screen and (max-width: 599px) {
    /* centX ロゴ */
    .logo_centx {
        margin: 70px auto;
    }

        .logo_centx img {
            width: 50%;
            min-width: 200px;
        }

    /* 青色部分 */
    .sns_section {
        padding-top: 40px;
    }

    .sns img {
        width: 36px;
    }

    /* 名鉄 ロゴ */
    .logo_meitetsu img {
        width: 50%;
        min-width: 180px;
    }
}

/*リンクボタン内矢印アイコン（BtoBお問い合わせ、もっと見る）*/
.linkBtnMoreTyp01 a:before, .linkBtnMoreTyp01 a:after, .p-BtoB .linkBtnContact a:before, .p-BtoB .linkBtnContact a:after, .p-bnrT1 .linkBtnMaaS a:before, .p-bnrT1 .linkBtnMaaS a:after {
    content: "";
    display: block;
    position: absolute;
    right: 26px;
    top: 50%;
    width: 9px;
    height: 3px;
    border-radius: 50px;
    transition: background 0.2s ease-out;
}

.linkBtnMoreTyp01 a:before, .linkBtnMoreTyp01 a:after {
    background: #1b94d2;
}

.p-BtoB .linkBtnContact a:before, .p-BtoB .linkBtnContact a:after {
    background: #ffffff;
}

.p-bnrT1 .linkBtnMaaS a:before, .p-bnrT1 .linkBtnMaaS a:after {
    background: #333333;
}

.linkBtnMoreTyp01 a:before, .p-BtoB .linkBtnContact a:before, .p-bnrT1 .linkBtnMaaS a:before {
    margin-top: -5px;
    transform: rotate(40deg);
}

.linkBtnMoreTyp01 a:after, .p-BtoB .linkBtnContact a:after, .p-bnrT1 .linkBtnMaaS a:after {
    margin-top: 0;
    transform: rotate(-40deg);
}

.linkBtnMoreTyp01 a:hover:before, .linkBtnMoreTyp01 a:hover:after, .p-BtoB .linkBtnContact a:hover:before, .p-BtoB .linkBtnContact a:hover:after, .p-bnrT1 .linkBtnMaaS a:hover:before, .p-bnrT1 .linkBtnMaaS a:hover:after {
    transition: background 0.2s ease-out;
}

.linkBtnMoreTyp01 a:hover:before, .linkBtnMoreTyp01 a:hover:after {
    background: #ffffff;
}

.p-BtoB .linkBtnContact a:hover:before, .p-BtoB .linkBtnContact a:hover:after {
    background: #d171a7;
}

.linkBtnContact, .linkBtnMaaS {
    text-align: center;
}

/*バナー：地域に特化したCentXはこちら マイクロMaaS*/

    .p-bnrT1 picture {
        width: 100%;
    }

    .p-bnrT1 img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .p-bnrT1 .p-centX__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

        .p-bnrT1 .p-centX__inner .linkBtnMaaS {
            position: absolute;
            left: 0;
            bottom: 80px;
            width: 100%;
        }

    .p-bnrT1 .linkBtnMaaS {
        display: flex;
        justify-content: center;
    }

        .p-bnrT1 .linkBtnMaaS a {
            position: relative;
            display: block;
            width: 550px;
            padding: 18px 20px;
            color: #333333;
            font-size: 1.5rem;
            font-weight: 600;
            text-decoration: none;
            background: #ffee00;
            border-radius: 50px;
            transition: background 0.2s ease-out;
        }

            .p-bnrT1 .linkBtnMaaS a:hover {
                color: #333333;
                background: #ff9000;
                transition: background 0.2s ease-out;
            }

@media screen and (max-width: 991px) {

        .p-bnrT1 .p-centX__inner .linkBtnMaaS {
            bottom: 6.5%;
            padding: 0 40px;
        }

        .p-bnrT1 .linkBtnMaaS a {
            width: 100%;
            max-width: 550px;
            padding: clamp(10px, 4%, 18px) 40px;
            font-size: clamp(13px, 4.5vw, 1.5rem);
        }
}
/*-------------------------------*/