/* aic */
.fi-main {
    max-width: none !important;
    padding: 0 !important;
    background: white !important;

    section {
        padding: 0 !important;
    }
}

.fi-topbar {
    height: 87px;
    z-index: 50 !important;

    >nav {
        height: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .me-6.hidden {
        width: max-content;
        margin: 0;

        >a {
            width: 158px;
        }
    }

    .fi-logo {
        width: 100%;
        max-width: 59px;
        height: auto !important;
    }

    .fi-user-menu {
        display: none;
    }

    [x-persist="topbar.end.panel-app"] {
        gap: 20px;
        width: 100%;
        margin-left: auto;
    }
}

.menu-active {
    #span1 {
        transform: rotate(45deg);
        top: 50%;
    }

    #span2 {
        opacity: 0;
    }

    #span3 {
        transform: rotate(-45deg);
        top: 50%;
    }
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 海外旅行向けeSIM */
.page-overseas-esim {
    .splide__arrow {
        width: 50px;
        height: 50px;
        background-color: #333333;
        opacity: 1;

        >svg {
            fill: white;
            width: 12px;
            height: 12px;
        }

    }

    .splide__arrow--next {
        right: -12%;
    }

    .splide__arrow--prev {
        left: -12%;
    }

    .splide__pagination {
        bottom: -72px;
        display: flex;
        gap: 14px;

        >li .is-active {
            background-color: #333333;
            transform: scale(1);
        }

        >li button {
            background-color: #cccccc;
            width: 6px;
            height: 6px;
        }
    }
}

/* 商品詳細ページ */
.page-product-detail {
    .splide__pagination {
        bottom: -32px;
        display: flex;
        gap: 16px;

        >li .is-active {
            background-color: #006ABF;
            transform: scale(1);
        }

        >li button {
            background-color: white;
            border: 1px solid #006ABF;
            border-radius: 50%;
            width: 8px;
            height: 8px;
        }
    }

    .splide__arrow {
        width: 24px;
        height: 24px;
        background: transparent;
        border: 1px solid #333333;

        >svg {
            display: none;
        }
    }

    .splide__arrow:hover {
        background-color: #333333;
    }

    .splide__arrow:hover::before {
        background-color: white;
    }

    .splide__arrow::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        -webkit-mask: url("/images/frontend/icon-arrow.svg") center/cover no-repeat;
        mask: url("/images/frontend/icon-arrow.svg") center/cover no-repeat;
        background-color: #333333;
    }

    .splide__arrow--prev::before {
        transform: rotate(-180deg);
    }

    /* Chrome, Edge, Safari */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    .fi-input-wrp {
        width: 100%;
        padding: 0 32px;

        button {
            color: #333333;
        }
    }

    .fi-input-wrp-prefix {
        border: none;
        padding: 0;
    }

    .fi-input-wrp-suffix {
        border: none;
        padding: 0;
    }

    .fi-input-wrp-input {
        min-width: 24px !important;

        .fi-input {
            padding: 10px 0 !important;
        }
    }

}

/* カート */
.page-cart {
    .fi-ta-ctn {
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        box-shadow: 0 0 10px 0 rgba(0, 106, 191, 0.20);
    }

    .fi-ta-table {
        border: none;
        width: 960px;
    }

    .fi-ta-header-cell,
    .fi-ta-actions-header-cell {
        background-color: #D1D1D1;
        font-size: 14px;
        font-weight: 500;
        border-right: 1px solid white;
        padding: 32px 24px !important;
    }

    .fi-ta-header-cell:last-child {
        border: none;
    }

    .fi-ta-header-cell-label {
        margin: 0 auto;
    }

    .fi-ta-cell {
        border-right: 1px solid #D1D1D1;
        padding: 10px 24px !important;
    }

    .fi-ta-cell:last-child {
        border: none;
    }

    td.fi-ta-actions-cell {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }

    .fi-fo-field-wrp-label {
        sup {
            display: none;
        }

        >span::after {
            content: '※';
            color: #B01D1D;
            font-size: 12px;
            font-weight: 500;
        }
    }
}

/* 記事詳細 */
.page-announcement-detail {
    .announcement-content {
        h2 {
            margin-top: 64px;
            margin-bottom: 16px;
            font-size: 24px;
            font-weight: 700;
            background-color: #F7F5F4;
            display: flex;
            align-items: stretch;
            gap: 20px;
        }

        h2::before {
            content: '';
            display: block;
            width: 5px;
            background-color: #006ABF;
        }

        h3 {
            margin-top: 8px;
            font-size: 20px;
            font-weight: 700;
            color: #006ABF;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        h3::before {
            content: '';
            display: block;
            width: 8px;
            min-width: 8px;
            height: 8px;
            border-radius: 100%;
            background-color: #006ABF;
            margin-top: 12px;
        }

        a {
            color: #006ABF;
            text-decoration: underline;
        }

        ul {
            list-style: disc;
            list-style-position: inside;
        }

        ol {
            list-style: decimal;
            list-style-position: inside;
        }
    }
}

/* /pages/* - 特定商取引法に基づく表記、会社概要、プライバシーポリシー、利用規約 */
.page-pages {

    table {
        tr {
            height: auto !important;
        }

        tr td {
            padding-top: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #D1D1D1;
        }

        tr:first-child td {
            padding-top: 0;
        }

        tr td:first-child {
            font-weight: 700;
            color: #006ABF;
        }

    }

    ol {
        list-style: decimal;

        li {
            margin-left: 20px;
        }
    }

    ul {
        list-style: disc;

        li {
            margin-left: 20px;
        }
    }

    ol>li:has(strong)::marker,
    ul>li:has(strong)::marker {
        font-size: 22px;
        font-weight: 700;
    }

    ol>li strong,
    ol>li strong>span,
    ul>li strong,
    ul>li strong>span {
        font-size: 22px !important;
    }

    p {
        margin: 16px 0;
    }


}

/* お問い合わせ */
.page-contact {
    form {
        .fi-fo-component-ctn {
            gap: 32px;
        }

        /* label */
        .fi-fo-field-wrp-label>span {
            font-weight: 500;
            font-size: 16px;
        }

        .fi-fo-field-wrp-label sup {
            font-weight: 500;
            font-size: 16px;
            color: #006ABF;
            top: 0;
        }

        /* fields */
        .fi-input-wrp {
            box-shadow: none;
            border-radius: 0;
        }

        fi-input-wrp-input {
            border-radius: 8px;
        }

        .fi-select-input,
        .fi-input {
            height: 100%;
            height: 45px;
        }

        .fi-select-input {
            border-radius: 5px;
            border: 2px solid #D1D1D1;
        }

        .fi-input,
        textarea {
            border-radius: 8px;
            background-color: #f3f3f3;
        }

        .fi-input-wrp:focus-within {
            outline: none !important;
            box-shadow: none !important;

            --tw-ring-shadow: 0 0 #0000 !important;
            --tw-ring-offset-shadow: 0 0 #0000 !important;
            --tw-ring-color: transparent !important;
        }

        .fi-checkbox-input+span {
            font-weight: 400;
        }

        .fi-checkbox-input:focus,
        .fi-checkbox-input:checked:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        .fi-checkbox-input {
            border: 1px solid #D1D1D1 !important;
        }

        .fi-checkbox-input:checked {
            background-color: #ffffff !important;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23006ABF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 0.9rem 0.9rem !important;
        }
    }
}

@media (max-width: 1024px) {
    .fi-topbar {
        height: 51px;

        >nav {
            padding-left: 16px;
            padding-right: 16px;
        }

        .me-6.hidden>a {
            width: 92px;
        }

        .fi-logo {
            max-width: 35px;
        }
    }

    /* /pages/* - 特定商取引法に基づく表記、会社概要、プライバシーポリシー、利用規約 */
    .page-pages {
        table {

            colgroup,
            col {
                width: auto !important;
            }

            tr {
                display: block;
                margin-bottom: 16px;
            }

            tr td {
                display: block;
                width: 100%;
                padding: 16px 0;
            }

            tr td:first-child {
                border: none;
            }
        }
    }
}

@media (min-width: 0px) {
    .fi-topbar .me-6.hidden {
        display: flex !important;
    }
}