@charset "UTF-8";

/* ダウンタイムガイド（archive-downtime.php）
   サイズ・余白は Figma の値に合わせている（SP＝「ダウンタイムガイド_sp」幅 390px・コンテンツ幅 350px、
   PC＝「ダウンタイムガイド_pc」幅 1366px・コンテンツ幅 1100px）。
   フォントはサイト共通（Figma の Koburina Gothic W3/W6 は 400/600 で代替）。
--------------------------------------------------- */

.dt-main {
    --dt-accent: var(--color-theme-01);   /* #677475 */
    --dt-beige: var(--color-theme-07);    /* #f4efea */
    --dt-text: #393939;                   /* 施術名・本文 */
    --dt-common-line: #b5a99d;            /* 共通の注意事項の見出し・罫線・＋／− */
    --dt-item-line: #aeaeae;              /* 施術の罫線・カテゴリ名 */
    --dt-toggle: #b5a89c;                 /* 施術の＋／− */
    --dt-symptom: #9e6262;
    --dt-symptom-bg: #f4eaea;
    --dt-period: #9e8a62;
    --dt-period-bg: #f4f2ea;
    --dt-makeup: #649e62;
    --dt-makeup-bg: #eaf4eb;
    --dt-wash: #62879e;
    --dt-wash-bg: #eaf0f4;
    --dt-point-bg: #ebf3f4;
}
.dt-main--cn {
    font-family: var(--font-cn);
}

/* 固定ヘッダーに隠れないように */
.dt-common,
.dt-item {
    scroll-margin-top: 80px;
}
@media screen and (min-width: 1280px) {
    .dt-common,
    .dt-item {
        scroll-margin-top: 110px;
    }
}

/* <details> 共通 */
.dt-main summary {
    list-style: none;
    cursor: pointer;
}
.dt-main summary::-webkit-details-marker {
    display: none;
}
.dt-main summary:focus {
    outline: none;
}
.dt-main summary:focus-visible {
    outline: 2px solid var(--color-theme-02);
    outline-offset: 2px;
}
.dt-toggle {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.dt-toggle::before,
.dt-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .2s;
}
.dt-toggle::after {
    transform: translateY(-50%) rotate(90deg);
}
details[open]:not(.is-closing) > summary .dt-toggle::after {
    transform: translateY(-50%) rotate(0deg);
}

/* リード・共通の注意事項・検索（ベージュ帯） */
.dt-intro {
    padding: 32px 20px 41px;
    background: var(--dt-beige);
}
.dt-intro__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.dt-intro__lead {
    font-size: 1rem;            /* 16px */
    font-weight: 400;
    line-height: 27px;
    color: var(--color-base);
}
/* SP はリード文を改行せず流し込む（Figma SP は 3 行） */
.dt-intro__lead br {
    display: none;
}
.dt-common {
    margin-top: 32px;
    padding: 20px 20px 31px;
    background: var(--color-wh);
    border-radius: 4px;
}
.dt-common__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 1.125rem;        /* 18px */
    font-weight: 600;
    line-height: 27px;
    letter-spacing: .22em;
    color: var(--dt-accent);
}
.dt-common__icon {
    width: 17px;
    height: 17px;
}
.dt-common__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0 1px;
    font-size: 0.875rem;        /* 14px */
    font-weight: 600;
    line-height: 30px;
    color: var(--dt-common-line);
    border-bottom: 1px solid var(--dt-common-line);
}
.dt-common__head .dt-toggle {
    width: 12px;
    height: 12px;
}
.dt-common__head .dt-toggle::before,
.dt-common__head .dt-toggle::after {
    height: 1px;
}
.dt-common__body {
    padding: 6px 0 0;
}
.dt-common__body li {
    position: relative;
    padding-left: 1em;
    font-size: 0.875rem;        /* 14px */
    font-weight: 400;
    line-height: 19px;
    color: var(--dt-accent);
}
.dt-common__body li + li {
    margin-top: 4px;
}
.dt-common__body li::before {
    content: "・";
    position: absolute;
    left: 0;
}
.dt-search {
    margin-top: 17px;
}
.dt-search__select {
    display: block;
    width: 100%;
    height: 45px;
    padding: 0 44px;
    font-size: 1.125rem;        /* 18px */
    font-weight: 600;
    letter-spacing: .06em;
    text-align: center;
    text-align-last: center;
    color: var(--color-wh);
    background: var(--dt-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 1h15L8.5 11z' fill='%23fff' stroke='%23fff' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 17px 12px;
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.dt-search__select:focus {
    outline: none;
}
.dt-search__select:focus-visible {
    outline: 2px solid var(--color-theme-02);
    outline-offset: 2px;
}
.dt-search__select option,
.dt-search__select optgroup {
    color: var(--color-base);
    background: var(--color-wh);
    letter-spacing: 0;
    text-align: left;
}

@media screen and (min-width: 768px) {
    .dt-intro {
        padding: 72px 40px;
    }
    .dt-intro__lead {
        font-size: 1.25rem; /* 20px */
        line-height: 36px;
        text-align: center;
    }
    .dt-intro__lead br {
        display: inline;
    }
    .dt-common {
        margin-top: 40px;
        padding: 49px 44.5px 48px;
    }
    .dt-common__title {
        gap: 12px;
        letter-spacing: .22em;
        margin-bottom: 11px;
        font-size: 1.5625rem;   /* 25px */
        line-height: 38px;
    }
    .dt-common__icon {
        width: 22px;
        height: 22px;
    }
    .dt-common__head {
        padding: 17px 0 8px;
        font-size: 1rem;        /* 16px */
        line-height: 30px;
    }
    .dt-common__head .dt-toggle {
        width: 16px;
        height: 16px;
    }
    .dt-common__head .dt-toggle::before,
    .dt-common__head .dt-toggle::after {
        height: 2px;
    }
    .dt-common__body {
        padding: 4px 0 0;
    }
    .dt-common__body li {
        font-size: 1rem;        /* 16px */
        line-height: 1.4;
    }
    .dt-search {
        margin-top: 25px;
    }
    .dt-search__select {
        height: 60px;
        padding: 0 60px;
        font-size: 1.25rem; /* 20px */
        letter-spacing: .22em;
        background-position: right 24px center;
    }
}

/* 施術一覧 */
.dt-list {
    padding: 41px 20px 40px;
}
.dt-list__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.dt-list__empty {
    text-align: center;
    color: var(--dt-text);
}
.dt-group + .dt-group {
    margin-top: 35px;
}
.dt-group__title {
    font-size: 0.75rem;         /* 12px */
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .06em;
    color: var(--dt-item-line);
}
.dt-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0 12px;
    color: var(--dt-toggle);
    border-bottom: 1px solid var(--dt-item-line);
}
/* カテゴリ名の直後の施術は上の余白を詰める */
.dt-group__title + .dt-item > .dt-item__head {
    padding-top: 7px;
}
.dt-item__head .dt-toggle {
    width: 14px;
    height: 14px;
}
.dt-item__name {
    font-size: 1.125rem;        /* 18px */
    font-weight: 600;
    line-height: 27px;
    letter-spacing: .06em;
    color: var(--dt-text);
}
.dt-item__body {
    padding: 19px 0 0;
}

/* 症状・期間・メイク・洗顔（SP: 行ごとにラベル＋本文。本文はラベルの直後から） */
.dt-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dt-fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.dt-fact__label {
    flex-shrink: 0;
    min-width: 47px;
    padding: 0 5px;
    font-size: 0.9375rem;       /* 15px */
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
    border-radius: 2px;
}
.dt-fact__text {
    padding-top: 1px;
    font-size: 0.9375rem;       /* 15px */
    font-weight: 400;
    line-height: 20px;
    color: var(--dt-text);
}
.dt-fact--symptom .dt-fact__label { color: var(--dt-symptom); background: var(--dt-symptom-bg); }
.dt-fact--period .dt-fact__label { color: var(--dt-period); background: var(--dt-period-bg); }
.dt-fact--makeup .dt-fact__label { color: var(--dt-makeup); background: var(--dt-makeup-bg); }
.dt-fact--wash .dt-fact__label { color: var(--dt-wash); background: var(--dt-wash-bg); }
.dt-fact__common {
    display: inline-block;
    position: relative;
    padding-right: 14px;
    color: var(--dt-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.dt-fact__common::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.dt-item__point {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 18px;
    padding: 9px 12px;
    font-size: 0.9375rem;       /* 15px */
    font-weight: 400;
    line-height: 22px;
    color: var(--dt-accent);
    background: var(--dt-point-bg);
    border: 1px solid var(--dt-accent);
    border-radius: 2px;
}
.dt-item__point-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 4px;
}
.dt-item__detail {
    margin-top: 19px;
}
.dt-item__detail a {
    display: block;
    position: relative;
    max-width: 540px;
    margin: 0 auto;
    padding: 0 30px;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: var(--dt-text);
    text-align: center;
    background: var(--dt-beige);
    border-radius: 100px;
    transition: opacity .2s;
}
.dt-item__detail a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.dt-item__detail a:hover {
    opacity: .75;
}

/* PC: 4列（ラベル帯の下に本文） */
@media screen and (min-width: 768px) {
    .dt-list {
        padding: 83px 40px 90px;
    }
    .dt-group + .dt-group {
        margin-top: 35px;
    }
    .dt-group__title {
        font-size: 0.75rem; /* 12px */
        line-height: 26px;
    }
    .dt-item__head,
    .dt-group__title + .dt-item > .dt-item__head {
        padding: 23px 0 13px;
    }
    .dt-item__head .dt-toggle {
        width: 15px;
        height: 15px;
    }
    .dt-item__name {
        font-size: 1.125rem; /* 18px */
        line-height: 18px;
    }
    .dt-item__body {
        padding: 16px 0 0;
    }
    .dt-facts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: column;
        grid-template-rows: auto auto;
        gap: 10px 13px;
    }
    .dt-fact {
        display: contents;
    }
    .dt-fact__label {
        min-width: 0;
        padding: 0 6px;
        font-size: 1.125rem; /* 18px */
        line-height: 31px;
        white-space: normal;
    }
    .dt-fact__text {
        padding-top: 0;
        font-size: 1rem; /* 16px */
        line-height: 25px;
    }
    .dt-item__point {
        gap: 8px;
        margin-top: 28px;
        padding: 10px 14px;
        font-size: 1.125rem;    /* 18px */
        line-height: 27px;
    }
    .dt-item__point-icon {
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }
    .dt-item__detail {
        margin-top: 25px;
    }
}

@media screen and (max-width: 767px) {
    .dt-fact__label {
        width: 100px;
        padding: 5px;
        line-height: 20px;
        letter-spacing: 0;
        text-align: center;
        white-space: wrap;
        border-radius: 2px;
    }
}

/* ページ下部の注記（ベージュ帯） */
.dt-notes {
    padding: 26px 20px;
    background: var(--dt-beige);
}
.dt-notes__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.dt-notes__inner p {
    font-size: 0.75rem;         /* 12px */
    font-weight: 400;
    line-height: 18px;
    color: var(--dt-accent);
}
.dt-notes__inner p + p {
    margin-top: 5px;
}
@media screen and (min-width: 768px) {
    .dt-notes {
        padding: 42px 40px 43px;
    }
    .dt-notes__inner p {
        font-size: 1rem; /* 16px */
        line-height: 1.4;
    }
    .dt-notes__inner p + p {
        margin-top: 8px;
    }
}