/* 返品・交換について（このページ専用）
   ・特商法ページ（tokushoho.css）と同じ見た目にしています
   ・クラス名を分けているので、ここを直しても他のページには影響しません */

.pp-returns {
    background: var(--pp-white, #fff);
    padding: var(--pp-sec-pad-t, 48px) 0 var(--pp-sec-pad-b, 64px);
}

.pp-returns__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--pp-page-pad-x, 16px);
}

.pp-returns__lead {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--pp-text-body, #5D4E42);
}

.pp-returns__table-wrap {
    overflow-x: auto;
    border: 2px solid var(--pp-border-pink, #F5C6D0);
    border-radius: 16px;
    background: #fff;
}

.pp-returns__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.7;
}

.pp-returns__table th,
.pp-returns__table td {
    padding: 16px 18px;
    vertical-align: top;
    border-bottom: 1px dashed var(--pp-border, #F0DDD0);
    text-align: left;
}

.pp-returns__table tr:last-child th,
.pp-returns__table tr:last-child td {
    border-bottom: none;
}

.pp-returns__table th {
    width: 32%;
    min-width: 8.5em;
    background: rgba(255, 199, 205, 0.28);
    color: var(--pp-text-dark, #4A3728);
    font-weight: 700;
}

.pp-returns__table td {
    color: var(--pp-text-body, #5D4E42);
    font-weight: 500;
}

.pp-returns__table td strong {
    color: var(--pp-brand-poppy, #f58690);
}

.pp-returns__table td a {
    color: var(--pp-brand-poppy, #f58690);
    font-weight: 700;
}

.pp-returns__table td a:hover {
    text-decoration: underline;
}

.pp-returns__note {
    margin: 28px 0 0;
    font-size: 13px;
    color: var(--pp-text-light, #8B7B6B);
}

.pp-returns__note a {
    color: var(--pp-brand-poppy, #f58690);
    font-weight: 700;
}

/* スマホ：項目名と内容を縦に積む */
@media (max-width: 767px) {
    .pp-returns__table,
    .pp-returns__table tbody,
    .pp-returns__table tr,
    .pp-returns__table th,
    .pp-returns__table td {
        display: block;
        width: 100%;
    }

    .pp-returns__table th {
        border-bottom: none;
        padding-bottom: 6px;
    }

    .pp-returns__table td {
        padding-top: 0;
        padding-bottom: 18px;
        border-bottom: 1px dashed var(--pp-border, #F0DDD0);
    }

    .pp-returns__table tr:last-child td {
        border-bottom: none;
        padding-bottom: 16px;
    }
}