/****************
*****************
画面幅が768px以下
*****************
****************/
@media screen and (max-width: 768px) {

    /****************
    共通css
    ****************/
    body {
        font-size: 14px;
    }

    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    .container-w {
        width: 95%;
        max-width: 450px;
    }

    .sub-page-wrapper {
        padding: 60px 0;
    }

    .btn {
        border-radius: 9999px;
        z-index: 999;
        padding: 10px 30px;
        width: 100%;
        text-align: center;
    }


    /****************
    ヘッダー
    ****************/
    .header-wrapper {
        padding: 10px 0;
    }

    h1.logo {
        width: 25%;
        max-width: 150px;
    }


    ul.header-nav-list li {
        background: unset;
        border-radius: unset;
    }

    a.header-nav-btn {
        padding: 0;
    }

    a.header-nav-btn img {
        margin: 0;
        height: 6.4vw;
        width: auto;
    }

    .search-popup-box {
        width: 95%;
        left: 50%;
        translate: -50% 0;
        padding: min(5.33vw, 20px);
    }

    .search-popup-box table {
        width: 100%;
    }

    .search-popup-box tbody tr th {
        display: block;
        padding: 0;
        margin-top: 10px;
    }

    .search-popup-box tbody tr:first-child th {
        margin-top: 0px;
    }

    .search-popup-box tbody tr td {
        display: block;
        margin-top: 10px;
    }

    .search-popup-box tbody tr td .form-select select {
        padding: min(2.67vw, 10px) min(5.33vw, 20px);
    }


    /****************
    レスポンシブテーブル
    ****************/
    .restable thead {
        display: none;
    }

    .restable tr {
        background-color: unset;
    }

    .restable th,
    .ex_sample2 td {
        display: block;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    .restable tbody th {
        background: #ccc;
        text-align: center;
    }

    .restable tbody tr td {
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: right;
    }

    .restable tbody tr td::before {
        content: attr(data-label);
        width: fit-content;
        padding: 0.2em 1em;
        border-radius: 100vw;
        font-size: 12px;
        background: #eee;
    }

    .restable tbody td::before {
        content: attr(data-label);
        display: inline-block;
        margin-right: 10px;
    }

    .restable tbody td:last-child {
        display: flex;
        justify-content: space-between;
    }

    /****************
    レスポンシブテーブルB
    ****************/
    .restable_b tr th,
    .restable_b tr td {
        display: block;
        width: 100%;
        color: #000;
        background: #fff;
    }

    .restable_b th {
        border: none;
        padding-bottom: 5px;
    }

    .restable_b td {
        border-bottom: 1px solid #ccc;
        padding-top: 5px;
    }

    .restable_b th {
        color: #000;
        background: #fff;
        /* thの背景色 */
    }

    /****************
    トップページ
    ****************/
    /** FV **/
    section.fv-section {
        height: calc(50svh - var(--header_vh));
        max-height: 300px;
    }

    .fv-slider-wrapper {
        width: 34%;
        top: 50%;
        left: 80%;
        translate: -50% -50%;
    }

    .fv-wrapper {
        width: 90%;
        max-width: 450px;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    h2.fv-title {
        font-size: min(5.33vw, 26px);
        margin-bottom: 30px;
    }

    .fv-search-item p,
    .fv-search-keyword p {
        display: none;
    }

    select.fv-search-select {
        padding: 12px 8px;
        font-size: 12px;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    input#search {
        padding: 12px 8px;
        font-size: 12px;
    }

    .swiper-slide img {
        object-fit: contain;
        padding: 0;
    }

    /** お知らせ **/
    .fv-news {
        margin-top: 20px;
    }

    h3.fv-news-title {
        font-size: 16px;
    }

    .fv-news-list {
        margin-top: 10px;
    }

    li.fv-news-item {
        padding: 14px 0;
    }

    span.fv-news-date {
        font-size: 12px;
    }

    li.fv-news-item a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /** スペース一覧 **/
    section.rent-list-section.container-w {
        padding: 40px 0 60px 0;
    }

    li.space-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0;
        overflow: hidden;
        -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    }

    li.space-item .space-item-img {
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }

    .space-item-details {
        padding: 10px;
        width: 100%;
    }

    ul.space-item-list li.space-item-price {
        font-size: 18px;
        margin: 4px 0;
    }

    ul.space-item-list li {
        margin-bottom: 4px;
    }

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

    .space-favorite-btn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    table.table {
        width: 100%;
    }

    table.table,
    .table td,
    .table th {
        border-collapse: collapse;
        border: 0px solid #eee;
    }

    .table th {
        background: #eee;
    }

    .table td,
    .table th {
        width: 100%;
        display: block;
    }

    .table th:first-child {
        width: 100%;
        display: block;
    }

    .carttable {
        border: none !important;
    }

    .carttable th:first-child {
        width: 100%;
    }

    .carttable td,
    .carttable th {
        width: 100%;
        display: block;
    }

    .comfirmbtn {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        /* 菴咏區 */
        width: 100%;
        margin: 10px auto;
    }

    /****************
    フッター
    ****************/
    footer {
        margin-bottom: var(--coupon_vh);
    }

    .footer-nav-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    .footer-nav-logo {
        width: 40%;
        margin: auto;
    }

    ul.footer-nav-list {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /****************
    クーポンバナー
    ****************/
    .coupon-banner {
        bottom: 0;
        right: 0;
        width: 100vw;
        max-width: unset;
    }

    .coupon-banner a {
        background: rgb(0, 218, 233);
        background: linear-gradient(180deg, rgba(0, 218, 233, 1) 0%, rgba(0, 232, 208, 1) 100%);
        text-align: center;
        padding: 10px 0;
        color: #fefefe;
        font-weight: bold;
        line-height: 1.2;
    }

    span.coupon-catch {
        position: relative;
        display: block;
        font-size: 12px;
        width: fit-content;
        margin: auto;
        margin-bottom: 8px;
    }

    span.coupon-catch:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -2em;
        translate: -50% -50%;
        transform: rotate(45deg);
        width: 1em;
        height: 2px;
        background: #fefefe;
    }

    span.coupon-catch:after {
        content: "";
        position: absolute;
        top: 50%;
        right: -2em;
        translate: 50% -50%;
        transform: rotate(-45deg);
        width: 1em;
        height: 2px;
        background: #fefefe;
    }

    /****************
    スペース詳細
    ****************/
    .option-item {
        display: block;
        padding: 20px 10px;
    }

    .option-item .option-img {
        max-width: 100%;
        max-height: 200px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    li.space-item-datail h3.title {
        margin: 20px 0 10px 0;
    }

    li.space-item-datail {
        padding: 20px 10px;
    }

    /****************
    スペース予約
    ****************/

    /** モーダルウインドウ／予約カレンダー **/
    .modal-main-container.slide {
        height: 90%;
    }

    .modal-close-btn__wrapper {
        height: 40px;
    }

    .currency-wrapper {
        margin: 20px;
        height: 85%;
    }

    .currency__h2 {
        margin-bottom: 20px;
    }

    ul.currency-item__wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .currency-item__wrapper li {
        height: 50%;
    }

    .time_pick_select div {
        flex: auto;
    }

    .time_pick_select1,
    .time_pick_select2,
    .time_pick_select3,
    .time_pick_select4 {
        width: 4em;
        margin-right: 8px;
    }

    form#orderform {
        width: 100%;
    }

    li#order {
        width: 100%;
    }

}