/* ============================================
   CSS変数定義
============================================ */
:root {
    --content-color-base: #2C2A29;
    --content-color-red: #CC0404;
    --content-color-red-2: #B00707;
    --content-color-yellow: #fcc85b;
    --content-color-beige: #f6f1eb;
    --content-color-cream: #fffcf7;
    --content-color-lightgray: #E9ECF2;
    --content-color-gray: #D9D9D9;
    --bg-img-setting: no-repeat center center / contain;
    --bg-cover-setting: no-repeat center top / cover;
    --bg-width-pc: max(100%, 1920px);
    --font-size-pc: 16px;
    --font-size-sp: 16px;
    --font-base: "Zen Old Mincho", serif;
    --font-sans: "Noto Sans JP", sans-serif;
    --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
    --content-hover-speed: 0.3s;
}

/* ============================================
   表示切り替え
============================================ */
.pc-only {
    display: block !important;
}

span.pc-only {
    display: inline !important;
}

.tb-only {
    display: none !important;
}

.sp-only {
    display: none !important;
}

@media (max-width: 1103px) {
    .tb-only {
        display: block !important;
    }

    span.tb-only {
        display: inline !important;
    }
}

@media (max-width: 768px) {
    .pc-only {
        display: none !important;
    }

    span.pc-only {

        display: none !important;
    }

    .sp-only {
        display: block !important;
    }

    span.sp-only {
        display: inline !important;
    }
}

/* ============================================
   基本設定
============================================ */
body {
    overflow-x: hidden;
    position: relative;
    container-type: normal;
}

.main {
    font-family: var(--font-sans);
    font-size: var(--content-font-size);
    font-weight: 500;
    color: var(--content-color-base);
    position: relative;
}

#hisApp {
    position: relative;
}

main {
    display: block;
}

.main * {
    box-sizing: border-box;
}

a {
    transition: var(--content-hover-speed);
    color: var(--content-color-base);
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}


/* *****
 inner
 - 幅 */
.section-wrapper {
    max-width: calc(992px + 96px);
    width: 100%;
    padding-left: 48px;
    padding-right: 48px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {

    .section-wrapper {
        max-width: calc(992px + 40px);
        padding-left: 20px;
        padding-right: 20px;
    }
}

.inner_760 {
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* **********
 MV
********** */
.mv {
    background: url(../images/bg_mv@2x.png) no-repeat center;
    background-size: cover;
    padding: 32px 0;
    text-align: center;
    position: relative;
}

.webp .mv {
    background-image: url("../images/bg_mv@2x.webp");
}

.mv::after {
    content: "";
    background-image: url(../images/mv_car.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: -20px;
    z-index: 10;
    width: 30%;
    max-width: 278px;
    aspect-ratio: 139 / 87;
}

.webp .mv::after {
    background-image: url(../images/mv_car.webp);
}


.mv__copy-text span {
    color: #fff;
    padding: 4px 6px;
    font-size: 18px;
    font-weight: 900;
    display: inline;
    background: linear-gradient(#10069F 50%, #10069F 0%);
}

.mv__copy-text:not(:last-child) {
    margin-bottom: 24px;
}

@media screen and (max-width: 768px) {

    .mv {
        padding: 40px 0 48px;
    }

    .mv::after {
        display: none;
    }

    .mv__copy-text span {
        font-size: 16px;
    }
}

/* **********
 ローカルナビ
********** */
.local-nav {
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

@media (min-width: 769px) {
    .local-nav__container {
        padding-left: 0;
        padding-right: 0;
    }
}

.local-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    padding: 24px 0;
}

.local-nav__item {
    position: relative;
}

.local-nav__link {
    text-decoration: none;
    padding: 0 16px;
    color: #2C2A29;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
}

.local-nav__link:hover {
    font-weight: 700;
}

/* カレント（現在地）のカラー */
/* .local-nav__link.is-current {
    color: #939DAD;
    font-weight: 700;
} */

@media screen and (min-width: 769px) {
    .local-nav__item::after {
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: #DBDBDB;
    }

    .local-nav__item:last-child:after {
        display: none;
    }
}

@media screen and (max-width: 768px) {

    .local-nav__list {
        display: block;
        padding: 4px 0;
    }

    .local-nav__item:not(:last-child) {
        border-bottom: 1px solid #DBDBDB;
    }

    .local-nav__link {
        display: block;
        padding: 16px 0;
        width: 100%;
    }
}

/* 
共通パーツ
*/
.section {}

.section__title {
    text-align: center;
    margin-bottom: 56px;
}

@media screen and (max-width: 768px) {

    .section__title {
        margin-bottom: 26px;
    }
}

/* **********
広大なアメリカを キャンピングカーで旅する魅力
********** */
.rv-appeal {
    padding-top: 88px;
    padding-bottom: 88px;
}

.rv-appeal__header {
    text-align: center;
    margin-bottom: 72px;
}

.rv-appeal__lead-title {
    color: #2C2A29;
    font-size: 28px;
    font-size: clamp(24px, calc(14.829850746268656px + 1.1940298507462688vw), 28px);
    font-weight: 700;
    margin-bottom: 16px;
}

.rv-appeal__content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.rv-appeal__point {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.rv-appeal__point-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.rv-appeal__point-icon-wrapper {
    width: 124px;
    width: clamp(74px, calc(-40.62686567164178px + 14.925373134328357vw), 124px);
}

.rv-appeal__point-title-group {
    width: calc(100% - 124px - 16px);
    width: calc(100% - clamp(74px, calc(-40.62686567164178px + 14.925373134328357vw), 124px) - 16px);
}

.rv-appeal__point-sub-title {
    font-size: 20px;
    font-size: clamp(18px, calc(13.414925373134327px + 0.5970149253731344vw), 20px);
    font-weight: 700;
    margin-bottom: 8px;
}

.rv-appeal__point-main-title {
    color: #00366F;
    font-size: 32px;
    font-size: clamp(26px, calc(12.244776119402985px + 1.791044776119403vw), 32px);
    font-weight: 700;
}

.rv-appeal__point-description {
    margin-bottom: 20px;
}

.rv-appeal__gallery {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rv-appeal__gallery-item {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.rv-appeal__gallery-picture {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    margin-bottom: 8px;
}

.rv-appeal__gallery-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.rv-appeal__gallery-caption {
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .rv-appeal {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .rv-appeal__header {
        margin-bottom: 16px;
    }

    .rv-appeal__lead-title {
        /* font-size: 24px; */
    }

    .rv-appeal__lead-text {
        text-align: left;
    }

    .rv-appeal__content {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 32px;
    }

    .rv-appeal__point-description {
        font-size: 14px;
    }

    .rv-appeal__gallery-caption {}

    .rv-appeal__point-icon-wrapper {
        width: 74px;
    }

    .rv-appeal__point-title-group {
        width: calc(100% - 74px - 16px);
    }

    .rv-appeal__gallery-picture {
        height: 150px;
    }

    .rv-appeal__point-sub-title {
        /* font-size: 18px; */
        line-height: 1.4;
        margin-bottom: 4px;
    }

    .rv-appeal__point-main-title {
        /* font-size: 26px; */
    }

}

/* **********
モデルルート
********** */

.model-route {
    padding-bottom: 96px;
}

.model-route__bnr {
    background: #FAEDFF;
    margin-bottom: 64px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
}

.model-route__bnr::before {
    content: "";
    background-image: url(../images/illust_dss.png);
    background-size: contain;
    width: 79px;
    height: 99px;
    position: absolute;
    left: 5px;
    top: -99px;
}

.model-route__bnr-wrapper {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
    padding: 32px;
}

.model-route__bnr-title {
    margin-bottom: 4px;
}

.model-route__bnr-picture {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
    display: inline-block;
    width: 100%;
}

.model-route__bnr-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


@media screen and (max-width: 768px) {
    .model-route {
        padding-bottom: 64px;
    }

    .model-route__bnr {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 40px;
    }


    .model-route__bnr::before {
        display: none;
    }

    .model-route__bnr-wrapper {
        padding: 16px;
    }

    .model-route__bnr-title {
        text-align: center;
    }

    .model-route__bnr-picture {
        height: 150px;
    }


}

.model-route__spot {
    margin-bottom: 56px;
}

.model-route__spot-title {
    margin-bottom: 16px;
    font-size: 28px;
    font-size: clamp(24px, calc(14.829850746268656px + 1.1940298507462688vw), 28px);
    font-weight: 700;
    text-align: center;
}

.model-route__spot-text {
    text-align: center;
    margin-bottom: 40px;
}

.model-route__spot-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.model-route__spot-item {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.model-route__spot-item-picture {
    display: block;
    width: 100%;
    aspect-ratio: 217 / 115;
    margin-bottom: 16px;
}

.model-route__spot-item-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.model-route__spot-item-name {
    margin-bottom: 8px;
    font-size: 18px;
    font-size: clamp(16px, calc(11.414925373134327px + 0.5970149253731344vw), 18px);
    font-weight: 700;
}

.model-route__course-title {
    color: #00366F;
    text-align: center;
    margin-bottom: 48px;
}

.model-route__course-title>span {
    display: inline-block;
    padding: 10px 26px;
    background: #EED4F8;
    text-align: center;
    font-size: 32px;
    font-size: clamp(26px, calc(12.244776119402985px + 1.791044776119403vw), 32px);
    font-weight: 700;
}

.model-route__course-title span span {
    font-size: 26px;
    font-size: clamp(20px, calc(6.244776119402985px + 1.791044776119403vw), 26px);
}

.model-route__course-map-picture {
    margin-bottom: 40px;
    display: block;
    text-align: center;
}

.model-route__course-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid #B9B9B9;
    padding: 24px 0;
}

.model-route__course-item:has(.model-route__course-text-group) {
    align-items: flex-start;
}

.model-route__course-day-picture {
    width: 38px;
    display: block;
}

.model-route__course-day-image {
    width: 100%;
}

.model-route__course-detail {
    width: calc(100% - 38px - 32px);

    display: flex;
    gap: 24px;
}

.model-route__course-text-group {
    width: calc(100% - 180px - 24px);
}

.model-route__course-heading {
    font-size: 20px;
    font-size: clamp(18px, calc(13.414925373134327px + 0.5970149253731344vw), 20px);
    font-weight: 700;
    color: #00366F;
}

.model-route__course-heading span+span::before {
    content: url(../images/icon_arrow.svg);
    display: inline-block;
    padding: 0 8px;
}

.model-route__course-text {
    margin-top: 8px;
}

.model-route__course-img-picture {
    width: 180px;
    display: block;
    background: #FFF;
    box-shadow: 2px 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.model-route__course-img-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .model-route__spot-title {
        /* font-size: 24px; */
    }

    .model-route__spot-text {
        text-align: left;
        margin-bottom: 24px;
    }

    .model-route__spot-list {
        gap: 8px;
    }

    .model-route__spot-item-picture {
        height: 148px;
        margin-bottom: 8px;
    }

    .model-route__spot-item-name {
        /* font-size: 16px; */
    }

    .model-route__course-title {
        margin-bottom: 40px;
    }

    .model-route__course-title>span {
        padding: 8px 20px;
        /* font-size: 26px; */
    }

    .model-route__course-title span span {
        /* font-size: 20px; */
        display: block;
    }

    .model-route__course-map-picture {
        margin-bottom: 32px;
        width: 100%;
        height: 150px;
    }

    .model-route__course-map-image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .model-route__course-item {
        gap: 18px;
    }

    .model-route__course-detail {
        width: calc(100% - 38px - 18px);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .model-route__course-text-group {
        width: 100%;
        margin-bottom: 8px;
    }

    .model-route__course-heading {
        width: 100%;
        /* font-size: 18px; */
    }
}

/* **********
車種紹介
********** */
.bg_img-gray {
    background: url(../images/bg_gray.png);
    background-size: cover;
}

.lineup {
    padding-top: 72px;
    padding-bottom: 96px;
}


/*  */
.tab-panel {
    display: none;
}


.tab-panel.is-active {
    display: block;
}

.lineup__tab {
    margin-bottom: 56px;
}

.lineup__tab-list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}

.lineup__tab-item {
    min-width: 230px;
    text-align: center;
    padding: 16px;
    font-size: 20px;
    font-size: clamp(16px, calc(6.829850746268656px + 1.1940298507462688vw), 20px);
    font-weight: 700;
    background: #EAEAEA;
    color: #797979;
    cursor: pointer;
}

.lineup__tab-item.is-active {
    background: #0054A2;
    color: #fff;
}

.lineup__tab-content {
    border: 2px solid #00366F;
    padding: 48px;
    margin-bottom: 24px;
}


.lineup__vehicle-title {
    text-align: center;
    font-size: 24px;
    font-size: clamp(20px, calc(10.829850746268656px + 1.1940298507462688vw), 24px);
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 24px;
}

.lineup__vehicle-detail {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.lineup__vehicle-visual {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.lineup__vehicle-main-picture {
    display: block;
    box-shadow: 0 3px 10px 0 rgba(0, 54, 111, 0.16);
    margin-bottom: 16px;
}

.lineup__vehicle-main-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lineup__vehicle-thumb-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.lineup__vehicle-thumb-picture {
    box-shadow: 0 3px 10px 0 rgba(0, 54, 111, 0.16);

    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.lineup__vehicle-thumb-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lineup__vehicle-info {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.lineup__vehicle-name {
    font-size: 32px;
    font-size: clamp(30px, calc(25.414925373134327px + 0.5970149253731344vw), 32px);
    font-weight: 700;
    margin-bottom: 8px;
}

.lineup__vehicle-price {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 24px;
}

.lineup__vehicle-price-accent {
    color: #00366F;
    font-size: 24px;
    font-size: clamp(22px, calc(17.414925373134327px + 0.5970149253731344vw), 24px);
    font-weight: 700;
    line-height: 150%;
    padding-left: 4px;
}

.lineup__vehicle-spec {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-collapse: collapse;
}

.lineup__vehicle-spec-header {
    width: 120px;
    padding: 8px;
    font-weight: 500;
    background: #EFF3FA;
    border: 1px solid #00366F;
    border-left: none;
}

.lineup__vehicle-spec-data {
    padding: 8px;
    border: 1px solid #00366F;
    border-right: none;
}

.lineup__vehicle-spec-data._equipment {
    text-align: left;
}

.lineup__note+.lineup__note {
    margin-top: 1em;
}

.lineup__note {
    font-size: 14px;
}

.lineup__attention {
    font-weight: 400;
    font-size: 12px;
}

@media screen and (max-width: 768px) {

    .lineup {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .lineup__tab-list {
        gap: 8px;
    }

    .lineup__tab-item {
        min-width: auto;
        /* font-size: 16px; */
        width: 50%;
        padding: 16px 8px;
    }

    .lineup__tab-content {
        padding: 32px 16px 40px;
    }

    .lineup__vehicle-title {
        /* font-size: 20px; */
        margin-bottom: 16px;
    }

    .lineup__vehicle-detail {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 4px;
    }

    .lineup__vehicle-name {
        /* font-size: 30px; */
    }

    .lineup__attention {
        text-align: right;
    }

    .lineup__vehicle-price {
        margin-bottom: 16px;
    }

    .lineup__vehicle-price-accent {
        /* font-size: 22px; */
    }

    .lineup__vehicle-spec-header {
        width: 100px;
    }
}

/*  */
.rental-package {
    background: #FFEE69;
    padding: 24px;
    margin-bottom: 48px;
}

.rental-package__heading {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 24px;
}

.rental-package__heading-sub {
    font-size: 16px;
}

.rental-package__list {
    font-size: 16px;
    font-weight: 700;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.rental-package__item {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
    position: relative;
    padding-left: calc(1em + 8px);
}

.rental-package__item::before {
    content: "●";
    position: absolute;
    width: 1em;
    height: 1em;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 1;
}

.rental-package__item-badge {
    color: #FFF;
    padding: 1px 6px;
    background: #0054A2;
    margin-right: 4px;
}

@media screen and (max-width: 768px) {
    .rental-package {
        margin-bottom: 40px;
    }

    .rental-package__list {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 16px;
    }

    .rental-package__item {
        display: grid;
        justify-items: flex-start;
    }

    .rental-package__item-badge {
        font-size: 14px;
    }
}

/*  */

.interior-guide__heading {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
}

.interior-guide__content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px 24px;
}

.interior-guide__item {
    -ms-grid-column-span: 3;
    grid-column: span 3/span 3;
}

.interior-guide__item-sub {
    -ms-grid-column-span: 2;
    grid-column: span 2/span 2;
}

.interior-guide__item-picture {
    display: block;
    margin-bottom: 16px;
}

.interior-guide__item-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.interior-guide__item-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
    .interior-guide__heading {
        margin-bottom: 24px;
    }

    .interior-guide__content {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 32px;
    }

    .interior-guide__item-title {
        margin-bottom: 4px;
    }

    .interior-guide__item,
    .interior-guide__item-sub {
        -ms-grid-column-span: 1fr;
        grid-column: span 1 / span 1;
    }

    .interior-guide__item-picture {
        margin-bottom: 8px;
    }
}

/* **********
キャンピングカー体験記
********** */
.experiences {
    padding-bottom: 72px;
}

.experiences__container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.experiences__article {
    background: #EFF3FA;
    padding: 24px;
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.experiences__article-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.experiences__article-icon-picture {
    display: block;
    width: 55px;
}

.experiences__article-title {
    width: calc(100% - 55px);
    color: #00366F;
    font-size: 24px;
    font-size: clamp(20px, calc(10.829850746268656px + 1.1940298507462688vw), 24px);
    font-weight: 700;
}

.experiences__article-main-picture {
    display: block;
    text-align: center;
    margin-bottom: 24px;
}

.experiences__article-main-image {
    box-shadow: 2px 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.experiences__article-sub-title {
    color: #00366F;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.experiences__article-text {
    font-size: 14px;
    margin-bottom: 16px;
}

.experiences__comment {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: center;

    margin-top: auto;
    padding-top: 8px;
}

.experiences__comment-avatar-picture {
    display: block;
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.experiences__comment-avatar-image {
    width: 100%;
}

.experiences__comment-body {
    -ms-grid-column-span: 2;
    grid-column: span 2/span 2;
    padding: 12px;
    border-radius: 6px;
    background: #FFF;
}

.experiences__comment-label {
    color: #00366F;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 4px;
}

.experiences__comment-text {
    font-size: 14px;
}

.experiences__gallery-list {
    margin-bottom: 56px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.experiences__gallery-item {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
}

.experiences__gallery-picture {
    width: 100%;
    display: inline-block;
    margin-bottom: 8px;
}

.experiences__gallery-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.experiences__gallery-caption {}

.experiences__link-wrapper {
    display: block;
    text-align: center;
    margin-bottom: 56px;
}

.experiences__link {
    padding: 16px;
    border-radius: 10em;
    background: #10069F;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    min-width: 280px;
    line-height: 1;
}

@media screen and (max-width: 768px) {

    .experiences {
        padding-bottom: 56px;
    }

    .experiences__container {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 40px;
    }

    .experiences__article {
        padding: 16px;
    }

    .experiences__article-header {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .experiences__article-title {
        width: 100%;
        /* font-size: 20px; */
    }

    .experiences__article-main-image {
        width: 100%;
    }

    .experiences__comment {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0;
        padding-top: 0;
    }

    .experiences__comment-avatar-picture {
        text-align: center;
    }

    .experiences__comment-avatar-image {
        width: auto;
    }

    .experiences__gallery-list {
        margin-bottom: 48px;
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 32px;
    }

    .experiences__gallery-picture {
        height: 170px;
    }
}

/* **********
ご予約はキャンピングカー専門デスクへ！
********** */
.contact-desk {
    background: #EFF3FA;
    padding-top: 72px;
    padding-bottom: 72px;
}

.contact-desk__heading {
    margin-bottom: 24px;
    font-size: 32px;
    font-size: clamp(22px, calc(-0.9253731343283569px + 2.9850746268656714vw), 32px);
    font-weight: 900;
    text-align: center;
}

.contact-desk__heading span {
    display: inline-block;
    position: relative;
    padding: 0 16px;
}

.contact-desk__heading span::before,
.contact-desk__heading span::after {
    content: "";
    background: #2C2A29;
    width: 2px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.contact-desk__heading span::before {
    left: 0;
    transform: rotate(-15deg);
}

.contact-desk__heading span::after {
    right: 0;
    transform: rotate(15deg);
}

.contact-desk__lead {
    text-align: center;
    margin-bottom: 40px;
}

.contact-desk__list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px 40px;
}

.contact-desk__item {
    -ms-grid-column-span: 1fr;
    grid-column: span 1/span 1;
    text-align: center;

    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contact-desk__item-picture {
    width: 100%;
    display: inline-block;
    aspect-ratio: 1/1;
    margin-bottom: 8px;
}

.contact-desk__item-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.contact-desk__item-copy {
    color: #00366F;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 4px;
}

.contact-desk__item-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-desk__item-office {
    border: 1px solid #000;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 700;
}

.contact-desk__item-btn-wrapper {
    padding-top: 32px;
    margin-top: auto;
}

.contact-desk__item-btn {
    text-decoration: none;
    width: 100%;
    padding: 16px;
    border-radius: 10em;
    background: #10069F;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

@media screen and (max-width: 1103px) {
    .contact-desk__list {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 56px 40px;
    }
}

@media screen and (max-width: 768px) {
    .contact-desk {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .contact-desk__heading {
        /* font-size: 22px; */
        margin-bottom: 32px;
    }

    .contact-desk__list {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 16px;
    }

    .contact-desk__item-copy {
        text-align: left;
    }

    .contact-desk__item-btn-wrapper {
        padding-top: 16px;
    }

}

/* **********
 モーダル
********** */
.modal {
    display: none;
    position: -webkit-fixed;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ズームアニメーション */
@keyframes zoomIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* **********
 fix
********** */

.btn-fix {
    z-index: 999;
    position: -webkit-fixed;
    position: fixed;
    right: 20px;
    bottom: 50px;
    /*ipad*/
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*  */
    transition: opacity 0.3s ease;
    will-change: transform;
    transition: transform 0s linear, opacity 0.3s ease;
}

.btn-fix__link {
    display: block;
}

@media screen and (max-width: 768px) {

    .btn-fix {
        position: -webkit-fixed;
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
    }

    .btn-fix__link {
        display: block;
        width: 100%;
        border: 2px solid #0054A2;
        text-align: center;
        padding: 8px 24px 8px;
        background: url(../images/icon_arrow-b.svg) no-repeat right 10px center;
        background-color: #EED4F8;
    }

}

/* pagetop */
.page-top-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    outline: none;
    border: none;
    width: auto;
    height: auto;
}

.page-top__img--pc {
    display: block;
}

.page-top__img--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .page-top__img--pc {
        display: none;
    }

    .page-top__img--sp {
        display: block;
        width: 54px;
        height: 49px;
        zoom: 0;
    }

    .page-top {
        bottom: 65px;
    }
}

@media screen and (min-width: 769px) {
    .page-top-button {
        width: auto;
        height: auto;
    }
}