/* テストページ専用。既存pickup-sec・component05を流用。 */

.camp.camptest-preview .camp-area--cliffside {
    background-image: linear-gradient(rgb(255 255 255 / 60%), rgb(255 255 255 / 30%)), url(img/camptest/pattern02.jpg);
    margin-top: 0;
}

.camp.camptest-preview .camp-area-title::before {
    font-size: clamp(2.6rem, 5vw, 7rem);
}

.camp.camptest-preview .camp-area--cliffside .nap {
    margin-top: 100px;
}

@media screen and (max-width: 767px) {
    .camp.camptest-preview .camp-area--cliffside .nap {
        margin-top: 60px;
    }
}

.camp.camptest-preview .mainvisual {
    background-image: url(img/camptest/main_bg.jpg);
}

/* NEW OPENの左右に、支給されたにぎわい装飾を配置。 */
.camp.camptest-preview .camp-new-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
}

.camp.camptest-preview .camp-new-open::before,
.camp.camptest-preview .camp-new-open::after {
    content: "";
    display: block;
    width: 0.46em;
    height: 0.66em;
    flex: 0 0 0.46em;
    background: url(img/camptest/new.svg) center / contain no-repeat;
}

.camp.camptest-preview .camp-new-open::after {
    transform: rotate(180deg);
}

/* エリア名・対象サイト・時刻を3行にまとめ、エリア間に1行分の余白。 */
.camp.camptest-preview .camp-checkin-area {
    margin: 0 0 1em;
}

/* B11〜B13：意味のまとまりを保ち、画面幅に合わせて折り返す。 */
.camp.camptest-preview .camp-wrap-unit,
#terms-camp + .list .camp-wrap-unit {
    display: inline-block;
    white-space: nowrap;
    font: inherit;
    color: inherit;
}
.camp.camptest-preview .camp-intro-heading .camp-wrap-unit {
    text-decoration: inherit;
}
/* 横並びのカードが狭くなるタブレット幅でも、語句を分割しない。 */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .camp.camptest-preview .component05 .txt-box h3 .camp-site-catch {
        font-size: clamp(2rem, 2.45vw, 2.7rem);
    }
}

/* 利用規約の最小幅でも、長いサイト名を一まとまりで表示。 */
@media screen and (max-width: 360px) {
    #terms-camp + .list .camp-checkin-area {
        font-size: 1.4rem;
    }
}