@charset "utf-8";

:root:has( .product-lp) {

    --rem: calc(1 / 16 * 1em);

    --white: #fff;
    --black: #222;
    --note-text-color: #637285;

    --header-height: 100px;

    --s-1: 4;
    --s-2: 8;
    --s-3: 12;
    --s-4: 16;
    --s-5: 20;
}

:root:has( .product-lp) {
    --main-color: #003e8c;
    --highlight-bg-color: #003e8c;
    --accent-color: #e60050;
    --bg-color: #e1f0ff;
    --bg-light: #f2f6f8;
}

/* :root:has( .product-lp) {
    --main-color: #003e8c;
    --highlight-bg-color: #4b9aff;
    --highlight-bg-color: #5f99e3;
    --highlight-bg-color: #539eff;
    --highlight-bg-color: #488ce6;
    --accent-color: #eb1660;
    --bg-color: #e3ecf6;
}

:root:has( .product-lp) {
    --main-color: #003e8c;
    --highlight-bg-color: #4492ec;
    --highlight-bg-color: #3f8ce6;
    --accent-color: #ea0a5d;
    --bg-color: #e3ecf6;
} */

:root:has( .product-lp) {
    --btn-text-color: var(--white);
    /*--btn-bg-color: radial-gradient(at 73% 100%, rgba(235, 22, 96, 1) 23%, rgba(252, 107, 46, 1));*/
    --btn-bg-color: var(--accent-color);
}

/* :root:has( .product-lp) {
    --main-color: #003e8c;
    --highlight-bg-color: #4daeff;
    --highlight-bg-color: #2d97e0;
    --accent-color: #ffe624;
    --bg-color: #e1f0ff;
    --bg-light: #f2f6f8;
} */

/* :root:has( .product-lp) {
    --btn-text-color: var(--main-color);
    --btn-bg-color: var(--accent-color);
} */

html {
    scroll-behavior: smooth;
}

html {
    scroll-padding-top: 100px;
}

/* .page-namenavi .page-title:empty {
    display: none;
} */

body {
    background: var(--bg-color);
}

@media (width < 768px) {

    :root {
        --header-height: 60px;
    }

    html {
        scroll-padding-top: 60px;
    }

}

.product-lp {
    width: 100%;
    overflow-x: hidden;
}

:where(.product-lp) {

    img {
        max-width: 100%;
        height: auto;
    }

    .body {
        padding: min(5vw, 80px);
    }

    .header {
        padding: 16px;
        text-align: center;
        background: var(--main-color);
        color: #fff;
    }

    .actions {
        width: 100%;
        overflow: hidden;
        background: var(--highlight-bg-color);
    }

    .actions--mv {
        background: var(--highlight-bg-color);
    }

    .actions--body {
        background: var(--highlight-bg-color);
    }

    .actions__inner {
        padding: 40px 0;
    }

    /* .actions__inner {
        min-width: 1100px;
        position: relative;
        left: 50%;
        translate: -50% 0;
        background-image: url(/assets_rn/images/lp/products/bg-l@2x.webp), url(/assets_rn/images/lp/products/bg-r@2x.webp), url(/assets_rn/images/lp/products/bg-c@2x.webp);
        background-position: left top, right top, center top;
        background-repeat: no-repeat, no-repeat, repeat-x;
        background-size: auto 100%, auto 100%, auto 100%;
    } */

    .actions--body.sticky-enabled { 
        position: sticky;
        left: 0;
        bottom: 0;
        translate: 0 100%;
        transition: translate .6s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .actions--body.sticky-enabled.show { 
        translate: 0 0;
    }

    .btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: fit-content;
        margin: 0 auto;
        gap: 16px;
    }

    .btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        white-space: nowrap;
        border-radius: 10em;
        padding: .5em 1.75em;
        background: var(--btn-bg-color);
        color: var(--btn-text-color);
        font-size: calc(18 * var(--rem));
        min-height: calc(60 / 18 * 1em);
        min-width: 15em;
        filter: drop-shadow(0 4px 0 rgba(0,0,0,.25));
    }

    .shop-sec {
        padding: 0 40px 64px;
    }

    .shop-sec::before,
    .shop-sec::after {
        content: '';
        display: table;
    }

    .shop-sub-sec {
        background: var(--white);
        color: var(--black);
        border-radius: 16px;
        padding: 56px;
    }

    :where(.shop-sub-sec) + .shop-sub-sec {
        margin-top: 64px;
    }

    .shop-sub-sec:has( > .shop-sub-sec-title:first-child) {
        padding-top: 0px;
    }

    .shop-sub-sec::before,
    .shop-sub-sec::after {
        content: '';
        display: table;
    }

    .title {
        font-size: calc(21 * var(--rem));
        text-align: center;
        color: var(--white);
        margin: 0 auto;
    }

    .shop-sec-header {
        margin: 56px auto;
        text-align: center;
    }

    .shop-sec-title {
        font-size: calc(32 * var(--rem));
        color: var(--main-color);
    }

    .shop-sec-note {
        margin: 1em auto 0;
        width: fit-content;
        text-align: left;
        text-indent: -1em;
        padding-left: 1em;
        font-size: .9em;
        color: var(--note-text-color);
    }

    .shop-sub-sec-title {
        font-size: calc(28 * var(--rem));
        text-align: center;
        color: var(--main-color);
        margin: 1.75em auto 1.5em;
    }

    /*
    *****************************************************************************************

    DataTable

    *****************************************************************************************
    */

    .dataTables_wrapper {
        --table-border: 3px solid #d1d6da;
    }

    table.dataTable {
        border-radius: 10px;
        overflow: hidden;
    }

    table.dataTable tbody th, 
    table.dataTable tbody td {
        padding: 16px 20px;
    }

    table.dataTable>thead>tr>th,
    table.dataTable>thead>tr>td {
        padding: 16px 20px;
        background: var(--main-color);
        color: #fff;
        border-bottom: none;
    }

    table.dataTable.no-footer {
        border-bottom: none;
    }

    table.dataTable tbody .child {
        background-color: var(--bg-light);
        /*background-color: #f4f4fa;*/
    }

    table.dataTable tbody th a, 
    table.dataTable tbody td a {
        text-decoration: underline;
        text-decoration-color: var(--main-color);
        text-underline-offset: .15em;
        color: var(--main-color);
        @media (any-hover: hover) {
            &:any-link:hover {
                text-decoration: none;
            }
        }
        &:focus-visible {
            text-decoration: none;
        }
    }

    /* sort */

    table.dataTable thead>tr>th.sorting:after, 
    table.dataTable thead>tr>th.sorting_asc:after, 
    table.dataTable thead>tr>th.sorting_desc:after, 
    table.dataTable thead>tr>th.sorting_asc_disabled:after, 
    table.dataTable thead>tr>th.sorting_desc_disabled:after, 
    table.dataTable thead>tr>td.sorting:after, 
    table.dataTable thead>tr>td.sorting_asc:after, 
    table.dataTable thead>tr>td.sorting_desc:after, 
    table.dataTable thead>tr>td.sorting_asc_disabled:after, 
    table.dataTable thead>tr>td.sorting_desc_disabled:after {
        right: 20px;
        top: 50%;
        font-size: .45em;
    }

    table.dataTable thead>tr>th.sorting:before, 
    table.dataTable thead>tr>th.sorting_asc:before, 
    table.dataTable thead>tr>th.sorting_desc:before, 
    table.dataTable thead>tr>th.sorting_asc_disabled:before, 
    table.dataTable thead>tr>th.sorting_desc_disabled:before, 
    table.dataTable thead>tr>td.sorting:before, table.dataTable 
    thead>tr>td.sorting_asc:before, 
    table.dataTable thead>tr>td.sorting_desc:before, 
    table.dataTable thead>tr>td.sorting_asc_disabled:before, 
    table.dataTable thead>tr>td.sorting_desc_disabled:before {
        right: 20px;
        bottom: 50%;
        font-size: .45em;
    }

    .dt-top {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 24px;
        margin: 0 16px 24px;
    }

    .dt-top .dt-right {
        display: flex;        
        justify-content: flex-end;
    }

    .dataTables_wrapper .dataTables_filter {
        float: none;
    }

    .dataTables_wrapper .dataTables_filter input {
        transition: width .6s ease-in-out;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        width: 20em;
    }

    .dt-footer:has( > .dt-footer-left):has( > .dt-footer-right) {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 24px;
    }

    .dt-footer {
        margin: 24px 16px 0;
    }

    .dt-footer-left {
        display: flex;
        align-items: center;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        text-box-trim: trim-both;
    }

    .dataTables_wrapper .prefFilter .select-wrapper,
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 8px;
    }

    .dataTables_wrapper .dataTables_length .select-wrapper {
        margin-right: 8px;
    }

    /* selectbox */

    .dataTables_wrapper select#prefFilter,
    .dataTables_wrapper .dataTables_length select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid #aaa;
        border-radius: 4px;
        padding: 8px;
        background-color: transparent;
        color: inherit;
        padding-right: 32px;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #aaa;
        border-radius: 4px;
        padding: 8px;
        background-color: transparent;
        color: inherit;
    }

    .select-wrapper{
    position: relative;
    display: inline-block;
    }

    .select-arrow{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:18px;
    color:#666;
    }

    /* info */

    .dataTables_wrapper .dataTables_info {
        padding: 0;
    }

    .dataTables_wrapper .dataTables_info::before {
        content: '／';
        display: inline-block;
        margin-inline: .5em;
    }

    /* pagination */

    .dataTables_wrapper .dataTables_paginate {
    width: fit-content;
    display: flex;
    gap: 6px;
    margin: 0 auto 0;
    padding: 0;
    float: none;
    }

    .dt-footer .dataTables_paginate:only-child {
    margin: 32px auto 0;
    }

    .dataTables_wrapper .dataTables_paginate > span {
    display: inherit;
    gap: inherit;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e4e7f5;
    cursor: pointer;
    padding: 0;
    font-family: robot sans-serif;
    font-size: .9em;
    }

    .dataTables_wrapper .dataTables_paginate .material-symbols-outlined,
    .dataTables_wrapper .dataTables_paginate .material-symbols-outlined {
    font-size: 1.25em;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #fff;
    border-color: var(--main-color);
    color: var(--main-color) !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--main-color);
    color: #fff !important;
    border-color: transparent;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
    }

    #onlineShopsTable {
        width: 100%;
        white-space: nowrap;
    }

    .banner-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 0 40px 64px;
    }

    .shopsTable td a[href^="tel"] {
        white-space: nowrap;
    }

    table th, table td, table.dataTable th, table.dataTable td {
        
        &.shop-pref-cell {
            white-space: nowrap;
        }
        
    }

    .shop-open-info-btn {
        display: inline-flex;
        background: #003e8c;
        color: #fff;
        font-size: .8em;
        font-weight: bold;
        border-radius: 10em;
        padding: .5em 1.25em;
        white-space: nowrap;
        cursor: pointer;
    }

    @media (width >= 1200px) {

        table.dataTable tbody tr:nth-child(even) th, 
        table.dataTable tbody tr:nth-child(even) td {
            background-color: var(--bg-light);
            /*background-color: #f4f4fa;*/
        }

        table.dataTable tbody tr:only-child th, 
        table.dataTable tbody tr:only-child td {
            background-color: var(--bg-light);
        }

        .shop-btn-cell {
            display: none !important;
        }

        table th, table td, table.dataTable th, table.dataTable td {

            &.control {
                width: 1.05em !important;/*三角記号が回転すると幅が変わって回転するたびにレイアウトが動くので、幅を固定する*/
            }
        
            &.shop-pref-cell {
                width: 5em;
            }
            
            &.shop-name-cell {
                width: auto !important;
            }

            &.shop-address-cell {
                width: auto !important;
            }

            &.shop-tel-cell {
                width: 8em;
            }

            &.shop-schedule-cell {
                width: 8em;
            }

            &.shop-holiday-cell {
                width: 8em;
            }
            
        }

    }

    @media (width < 1200px) {

        table th, table td, table.dataTable th, table.dataTable td {

            &.control {
                width: 1.1em !important;
                padding-right: 0;
            }

            &.shop-pref-cell {
                display: none !important;
            }
        
            &.shop-btn-cell {
                width: 5em;
                text-align: right;
                padding-right: .75em;
            }
            
        }

        table.dataTable {
            border-radius: 6px;
        }

        .dt-top {
            display: block;
        }

        .dt-top .dt-left {
            display: none;
        }

        .dt-top .dt-right {
            display: block;
        }

        .dataTables_wrapper .dataTables_filter {
            margin: 0;
            padding: 0;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_filter:has( input:focus) {
            width: 100%;
        }

        .dataTables_wrapper .dataTables_filter:has( input:focus) label {
            width: 100%;
        }

        .dataTables_wrapper .dataTables_filter input:blank {
            width: 10em;
        }

        .dataTables_wrapper .dataTables_filter input {
            width: calc(100% - 4em) !important;
        }

        #onlineShopsTable tbody td:first-child {
            width: 100%;
        }

        table.dataTable>tbody>tr.child ul.dtr-details {
            margin-block: 1em;
            margin-left: 1.5em;
        }

        table.dataTable>tbody>tr.child ul.dtr-details>li{
            display: flex;
        }

        table.dataTable>tbody>tr.child span.dtr-title {
            min-width: 5.5em;
            position: relative;
            padding-right: 1.25em;
        }

        table.dataTable>tbody>tr.child span.dtr-title::after {
            content: '：';
            position: absolute;
            top: 0;
            right: .25em;
        }

        /* 内容が空だったら要素自体を非表示にする */
        table.dataTable>tbody>tr.child ul.dtr-details>li:has( .dtr-data:empty) {
            display: none;
        }
        /* 最後の要素が空でdisplay:noneになっているときは、そのひとつ前の要素のpadding-bottomを0にする */
        table.dataTable>tbody>tr.child ul.dtr-details>li:has( + li:last-child > .dtr-data:empty) {
            padding-bottom: 0;
        }

    }

    @media (width < 768px) {

        table.dataTable>thead>tr>th, 
        table.dataTable>thead>tr>td {
            --px: 6px;
            padding: 12px var(--px);

            &:first-child {
                padding-left: calc(var(--px) * 2);
            }
            &:last-child {
                padding-right: calc(var(--px) * 2);
            }
        }

        table.dataTable tbody th, 
        table.dataTable tbody td {
            --px: 6px;
            padding: 8px var(--px);
            height: 1.75em;

            &:first-child {
                padding-left: calc(var(--px) * 2);
            }
            &:last-child {
                padding-right: calc(var(--px) * 2);
            }
        }

        .header {
            padding: 12px;
        }

        .body {
            padding: 24px 12px;
        }

        .title {
            font-size: calc(15 * var(--rem));
            text-wrap: pretty;
        }

        .shop-sec {
            padding: 0 12px 40px;
        }

        .shop-sub-sec {
            border-radius: 12px;
            padding: 16px 12px;
        }

        :where(.shop-sub-sec) + .shop-sub-sec {
            margin-top: 24px;
        }

        .shop-sec-header {
            margin: 28px auto;
        }

        .shop-sec-title {
            font-size: calc(24 * var(--rem));
        }

        .shop-sub-sec-title {
            font-size: calc(22 * var(--rem));
            margin: 1.5em auto;
        }

        .actions__inner {
            padding: 24px 0;
            /* min-width: 130vw; */
        }

        .btn {
            font-size: calc(14 * var(--rem));
            min-width: 10em;
        }

        .dt-top {
            margin: 0 8px 16px;
        }

        .dt-footer {
            margin: 24px 0 16px;
        }

        .banner-list {
            gap: 8px;
            padding: 0 12px 8px;
        }

    }

}