/*  */

/******************************
    目次
******************************/
.p-toc .__list {
    --gap: 16px;
    gap: var(--gap);
}

.p-toc .__item {
    --rad: 3px 3px 0 0;
    border-radius: var(--rad);
    background: var(--color-bg-base);
}

.p-toc .__link {
    border-radius: var(--rad);
    border-bottom: 2px solid var(--color-imahan-light);
    display: grid;
    align-items: center;
    height: 100%;
    background: var(--color-bg-base);
    box-shadow: var(--box-shadow-normal);
}

.p-toc .__link::after {
    content: "";
    aspect-ratio: 16/9;
    width: 100%;
    background: var(--color-imahan);
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 16 9' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4785 1.39222C14.814 1.10475 15.319 1.1437 15.6065 1.47913C15.8938 1.81459 15.855 2.31958 15.5196 2.60706L8.51956 8.60706C8.22003 8.86359 7.77805 8.86364 7.47855 8.60706L0.478549 2.60706C0.143178 2.3196 0.104348 1.81459 0.391635 1.47913C0.67915 1.1437 1.1841 1.10475 1.51956 1.39222L7.99906 6.94593L14.4785 1.39222Z'/%3E%3C/svg%3E%0A");
}

.p-toc .__text {
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-weight: 500;
}

@media (width <= 768px) {
    .p-toc .__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .p-toc .__item {
        flex: none;
        width: calc((100% - var(--gap)) / 2);
    }

    .p-toc .__link {
        padding: 8px 16px;
        grid-template-columns: 1fr 16px;
        column-gap: 16px;
        min-height: 3.5rem;
    }

    .p-toc .__text {
        font-size: 0.75rem;
    }
}

@media (width > 768px) {
    .p-toc .__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .p-toc .__link {
        padding: 23px 20px;
        grid-template-columns: 16px 1fr 16px;
        column-gap: 4px;
    }

    .p-toc .__link::after {
        grid-column: 3/4;
    }

    .p-toc .__text {
        grid-column: 2/3;
        font-size: 1rem;
    }
}

/******************************
    セクション
******************************/
.lp-section,
.lp-sub-section {
    margin-top: var(--section-spacing);
}

@media (width <= 768px) {
    :root {
        --section-spacing: 4rem;
    }
}

@media (width > 768px) {
    :root {
        --section-spacing: 6rem;
    }
}

/******************************
    ご注文方法
******************************/
.p-order .__item {
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-base);
    box-shadow: var(--box-shadow-normal);
}

.p-order .__text {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    text-align: center;
}

.p-order .__title {
    font-family: var(--font-mincho);
    font-weight: 600;
}

@media (width <= 768px) {
    .p-order {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .p-order .__item {
        padding: 20px;
        row-gap: 0.75rem;
    }

    .p-order .__title {
        font-size: 1rem;
    }
}

@media (width > 768px) {
    .p-order {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
    }

    .p-order .__item {
        padding: 32px;
        row-gap: 1rem;
    }

    .p-order .__title {
        font-size: 1.5rem;
    }
}

/******************************
    ご注文から配送まで
******************************/
.p-flow {
    display: flex;
    flex-direction: column;
    --row-gap: 48px;
    row-gap: var(--row-gap);
}

.p-flow .__item {
    position: relative;
    border-radius: 3px;
    background: var(--color-bg-base);
    box-shadow: var(--box-shadow-normal);
}

.p-flow .__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    translate: 0 calc(var(--row-gap) / -2 - 50%);
    inset-inline: 0;
    margin: auto;
    width: 48px;
    height: 16px;
    background: var(--color-shirotsurubami);
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 48 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.1094 15.2604C24.4376 15.7083 23.5624 15.7083 22.8906 15.2604L2.74808 1.83205C1.92484 1.28323 2.31337 7.78426e-08 3.30278 1.11135e-07L44.6972 1.50402e-06C45.6866 1.53731e-06 46.0752 1.28323 45.2519 1.83205L25.1094 15.2604Z'/%3E%3C/svg%3E%0A");
}

.p-flow .__icon {
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: center / contain no-repeat
        url(https://gigaplus.makeshop.jp/bentoimahan/img/common/bg_circle.svg);
    color: var(--color-shirotsurubami-dark);
}

.p-flow .__text {
    display: flex;
    flex-direction: column;
}

.p-flow .__title {
    font-family: var(--font-mincho);
    font-weight: 600;
}

@media (width <= 768px) {
    .p-flow .__item {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 16px;
    }

    .p-flow .__icon {
        width: 80px;
    }

    .p-flow .__icon svg {
        width: 40px;
    }

    .p-flow .__text {
        row-gap: 0.75rem;
    }

    .p-flow .__title {
        text-align: center;
        font-size: 1rem;
    }

}

@media (width > 768px) {
    .p-flow .__item {
        padding: 32px;
        display: grid;
        grid-template-columns: 128px 1fr;
        column-gap: 32px;
    }

    .p-flow .__text {
        border-left: 1px solid var(--color-gray-3);
        padding-left: 32px;
        row-gap: 1rem;
        justify-content: center;
    }

    .p-flow .__title {
        font-size: 1.5rem;
    }
}

/******************************
    汎用
******************************/
.lp-section img:not([class]) {
    border-radius: 3px;
    border: 1px solid var(--color-gray-4);
    background: var(--color-bg-base);
}

.lp-section a:not([class]) {
    text-decoration: underline;
}

.lp-section strong:not([class]) {
    color: var(--color-imahan);
    font-weight: 400;
}

.lp-box.--border {
    border-radius: 3px;
    background: var(--color-bg-base);
    box-shadow: var(--box-shadow-normal);
}

.lp-box > * + * {
    margin-top: 1rem;
}

.p-capture-wrap {
    padding: 8px;
    border-radius: 3px;
    background: var(--color-gray-3);
}

@media (width <= 768px) {
    .lp-sub-section > * + * {
        margin-top: 1.5rem;
    }

    .lp-box.--spacing {
        padding-top: 1.5rem;
    }

    .lp-box.--border {
        padding: 20px;
    }
}

@media (width > 768px) {
    .lp-sub-section > * + * {
        margin-top: 2rem;
    }

    .lp-box.--spacing {
        padding-top: 2rem;
    }

    .lp-box.--border {
        padding: 32px;
    }
}

/* 小見出し */
.p-sub-heading {
    position: relative;
    padding-left: calc(5px + 0.9375rem);
    padding-bottom: 0.125rem;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: 1.5rem;
    font-family: var(--font-mincho);
    font-weight: 600;
}

.p-sub-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 0 solid var(--color-imahan);
    border-left-width: 2px;
    border-right-width: 1px;
    width: 5px;
    height: 100%;
}

.p-title {
    font-family: var(--font-mincho);
    font-size: inherit;
    font-weight: 600;
}

@media (width <= 768px) {
    .p-sub-heading {
        font-size: 1.125rem;
    }
}

@media (width > 768px) {
    .p-sub-heading {
        font-size: 1.5rem;
    }
}

/* 表組み */
.p-table {
    border-bottom: 1px solid var(--color-gray-4);
}

.p-table tr {
    border-top: 1px solid var(--color-gray-4);
}

.p-table th {
    background: rgb(from var(--color-kinari) r g b / 0.5);
    text-align: left;
    font-weight: 500;
}

.p-table td {
    background: rgb(from var(--color-bg-base) r g b / 0.5);
}

@media (width <= 768px) {
    .p-table,
    .p-table :is(tr, th, td) {
        display: block;
    }

    .p-table :is(th, td) {
        padding: 16px;
    }
}

@media (width > 768px) {
    .p-table {
        border-collapse: collapse;
        border-bottom: 1px solid var(--color-gray-4);
        width: 100%;
    }

    .p-table :is(th, td) {
        padding: 32px;
    }

    .p-table th {
        min-width: 208px;
    }

    .p-table td {
        width: 100%;
    }
}

/* リスト */
.lp-box :is(ul, ol) {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.lp-box ul {
    --mark-width: 1em;
}

.lp-box ul li {
    position: relative;
    padding-left: calc(var(--mark-width) + 0.5rem);
}

.lp-box ul li::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--mark-width);
    height: 1lh;
    background: var(--color-imahan);
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 14 23' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.46484' y='11.5' width='5' height='5' transform='rotate(-45 3.46484 11.5)'/%3E%3C/svg%3E%0A");
}

.lp-box ul ul {
    margin-top: 1rem;
}

.lp-box ul ul li::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 26' fill='black' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 13H14'/%3E%3C/svg%3E");
}

.lp-box ol {
    padding-left: calc(1em + var(--spacing));
    text-indent: calc(-1em - var(--spacing));
    --spacing: 0.25rem
}

.lp-box ol li::first-letter {
    margin-right: var(--spacing);
}

/* 注記 */
.x-note {
    position: relative;
    padding-left: 1.25em;
}

.x-note + .x-note {
    margin-top: 0.5rem;
}

.x-note .__note-mark {
    position: absolute;
    left: 0;
}

/******************************
    配達エリア・時間枠（共通）
******************************/
.p-area-time-list {
    border-radius: 3px;
    border: 1px solid var(--color-aisumi-light);
    background: rgb(from var(--color-bg-base) r g b / 0.95);
}

.p-area-time-list .__title {
    padding: 8px;
    background: var(--color-aisumi-light);
    color: var(--color-text-inverse);
    text-align: center;
    font-weight: 700;
}

.p-area-time-list .__list {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
}

.p-area-time-list .__item {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.p-area-time-list .__item::before {
    aspect-ratio: 1;
    padding-bottom: 0.1em;
}

.p-area-time-list ol.__list .__item {
    counter-increment: list-item;
}

.p-area-time-list ol.__list .__item::before {
    content: counter(list-item);
    border: 1px solid var(--color-aisumi-light);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (width <= 768px) {
    .p-area-time-list .__title {
        font-size: 0.75rem;
    }

    .p-area-time-list .__list {
        padding: 20px;
    }

    .p-area-time-list .__item::before {
        width: 1.25rem;
        font-size: 0.6875rem;
    }
}

@media (width > 768px) {
    .p-area-time-list .__title {
        font-size: 0.875rem;
    }

    .p-area-time-list .__list {
        padding: 16px;
    }

    .p-area-time-list .__item::before {
        width: 1.5rem;
        font-size: 0.75rem;
    }
}

/******************************
    配達エリア・時間枠（首都圏）
******************************/
/* 地図とリスト */
:root {
    --color-guide-area-1:       #FFEBF1;
    --color-guide-area-1-light: #FFF4F7;
    --color-guide-area-2:       #DFFFD1;
    --color-guide-area-2-light: #EFFFE8;
}

.p-area-img {
    border: 1px solid var(--color-gray-4);
    border-radius: 3px;
    background: var(--color-bg-base);
}

.p-area-time-list .__list[aria-labelledby="p-min-order-list"] .__item::before {
    content: "";
    border: 1px solid var(--color-gray-3);
}

.p-area-time-list .__list[aria-labelledby="p-min-order-list"] .__item.--area-1::before {
    background: var(--color-guide-area-1);
}

.p-area-time-list .__list[aria-labelledby="p-min-order-list"] .__item.--area-2::before {
    background: var(--color-guide-area-2);
}

@media (width <= 768px) {
    .lp-area-and-time {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .p-area-img {
        padding: 12px;
    }
}

@media (width > 768px) {
    .lp-area-and-time {
        display: grid;
        grid-template-columns: 892px auto;
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 16px 32px;
    }

    .p-area-img {
        grid-row: 1/-1;
        padding: 32px;
        width: 100%;
    }
}

/* 地域詳細表 */
.p-area-table-central {
    background: rgb(from var(--color-bg-base) r g b / 0.5);
}

.p-area-table-central .__detail-table {
    border-collapse: collapse;
}

.p-area-table-central .__detail-table tr:not(:first-child) {
    border-top: 3px solid var(--color-bg-base);
}

.p-area-table-central .__detail-table :is(th, td) {
    padding: 16px;
}

.p-area-table-central .__detail-table th {
    border-right: 3px solid var(--color-bg-base);
    width: 3.625rem;
    font-weight: 400;
}

.p-area-table-central .__detail-table .__area-1 th {
    background: var(--color-guide-area-1);
}

.p-area-table-central .__detail-table .__area-1 td {
    background: var(--color-guide-area-1-light);
}

.p-area-table-central .__detail-table .__area-2 th {
    background: var(--color-guide-area-2);
}

.p-area-table-central .__detail-table .__area-2 td {
    background: var(--color-guide-area-2-light);
}

@media (width <= 768px) {
    .p-area-table-central {
        margin-top: 2rem;
    }

    .p-area-table-central {
        border-bottom: 1px solid var(--color-gray-3);
    }

    .p-area-table-central .__caption {
        border-top: 1px solid var(--color-gray-3);
        padding: 16px;
        font-weight: 500;
    }

    .p-area-table-central .__detail-table {
        margin-block: 3px;
    }
}

@media (width > 768px) {
    .p-area-table-central {
        margin-top: 3rem;
    }

    .p-area-table-central :is(.__header, .__pref) {
        border-bottom: 1px solid var(--color-gray-3);
        display: grid;
        grid-template-columns: 8rem 1fr;
    }

    .p-area-table-central .__header > * {
        padding: 16px;
        color: var(--color-gray-1);
        text-align: center;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .p-area-table-central .__pref {
        padding-block: 3px;
    }

    .p-area-table-central .__caption {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: 500;
    }
}

/******************************
    配達エリア・時間枠（愛知）
******************************/
/* リスト */
@media (width <= 768px) {
    .lp-time-list {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }
}

@media (width > 768px) {
    .lp-time-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        column-gap: 32px;
    }
}

/* 地域詳細表 */
.p-area-table-aichi .__detail-table {
    border-collapse: collapse;
    border-bottom: 1px solid var(--color-gray-3);
}

.p-area-table-aichi .__detail-table tr {
    border-top: 1px solid var(--color-gray-3);
}

.p-area-table-aichi .__detail-table th {
    background: rgb(from var(--color-kinari) r g b / 0.5);
    font-weight: 500;
}

.p-area-table-aichi .__detail-table td {
    background: rgb(from var(--color-bg-base) r g b / 0.5);
}

.p-area-table-aichi .__detail-table td * + p {
    margin-top: 1lh;
}

@media (width <= 768px) {
    .p-area-table-aichi {
        margin-top: 2rem;
    }

    .p-area-table-aichi .__detail-table,
    .p-area-table-aichi .__detail-table :is(tbody, tr, th, td) {
        display: block;
    }

    .p-area-table-aichi .__detail-table :is(th, td) {
        padding: 16px;
    }

    .p-area-table-aichi .__detail-table th {
        text-align: left;
    }
}

@media (width > 768px) {
    .p-area-table-aichi {
        margin-top: 3rem;
    }

    .p-area-table-aichi .__detail-table :is(th, td) {
        padding: 32px;
    }

    .p-area-table-aichi .__detail-table th {
        text-align: center;
    }
}