@charset "UTF-8";
@property --translate-range {
    syntax:"<length>";
    inherits:true;
    initial-value:20px;
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
*   特筆が無ければ、clamp関数のviewport幅は375-896pxです。
*   またfont-sizeは、PC画面からx0.875した値をSP画面時の値としています。
*       minSize, maxSize, 375px, 896px, 10px
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ */
#move30th {
    --red:#ED2300;
    --yellow:#FFFABA;
    --trans:0.5s ease;

    font-size:16px;

    & :where(ul, ol) { list-style:none;}
    & img { width:100%; height:auto; vertical-align:bottom;}
    & button { appearance:none; padding:0; background:none; border:none; cursor:pointer;}
}

/* ========== タブ部分 ========== */
#move30th .tab_wrap {
    display:flex;
    justify-content:space-evenly;

    & button {
        translate:0 var(--translate-range);
        clip-path:polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--translate-range)),
            0 calc(100% - var(--translate-range))
        );
        transition:translate var(--trans), clip-path var(--trans);

        /* 稼働処理 */
        &:is(.active, :focus) { --translate-range:0px;}
        @media (any-hover:hover) { &:hover { --translate-range:0px;}}
        @media (any-hover:none) { &:active { --translate-range:0px;}}
    }
    & img { width:100%;}
}
@media (width <= 896px){
    #move30th .tab_wrap {
        --translate-range:2.2321vw;/* viewport:896px:20px */

        justify-content:space-between;

        & button { flex-basis:47.5%;}
    }
}

/* ==================================================
*   コンテンツ部分（基礎）
================================================== */
#move30th .move30th_content_wrap {
    display:grid;
}
#move30th .move30th_content {
    grid-column:1/-1;
    grid-row:1/-1;
    pointer-events:none;

    & .move30th_content_title { width:100%;}
    & > *:not(.move30th_content_title) { margin-inline:clamp(1.5rem, calc(-0.299rem + 4.798vw), 4rem);/* 15-40px */}

    /* 稼働処理 */
    &.active { /*opacity:1; translate:0 0px;*/ pointer-events:auto;}

    /* 切り替えアニメーション */
    &.slidein { transition:opacity var(--trans), translate var(--trans);}
    &.slidein_start { opacity:0; translate:0 30px;}
    &.slidein_end { opacity:1; translate:0 0px;}
    &.slideout { transition:opacity var(--trans), translate var(--trans);}
    &.slideout_start { opacity:1; translate:0 0px;}
    &.slideout_end { opacity:0; translate:0 30px;}
}
#move30th .move30th_casual {
    --color-bg:#F0E2D5;
    --color-border:#A08874;
    --color-special:#7B3C35;
    --color-main:#C2A58C;
    --color-sub:#EFDDCE;
}
#move30th .move30th_sporty {
    --color-bg:#BFBFBF;
    --color-border:#272523;
    --color-special:#000000;
    --color-main:#272523;
    --color-sub:#E5E5E5;

    position:relative;
    
    &:after {
        content:"";
        display:block;
        width:100%;
        height:30px;
        background:image-set(
            url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/basara/move30th/s_bg@2x.webp) 2x,
            url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/basara/move30th/s_bg.webp) 1x
        ) no-repeat center / cover;
    }
}
@media (width <= 896px){
    
}

/* ==================================================
*   コンテンツ部分（詳細）
================================================== */
#move30th .move30th_content { background-color:var(--color-bg);}


/* ========== 対象車種・期間 ========== */
#move30th .move30th_content .info {
    display:flex;
    justify-content:center;
    gap:0 2em;
    font-size:clamp(1.5rem, calc(1.14rem + 0.96vw), 2rem);/* 15-20px */
    font-weight:900;
    
    & dl { display:flex; font-size:inherit;}
    & :is(dt, dd) { width:fit-content; padding:0.25em 0.5em;}
    & dt { display:flex; align-items:center; flex-shrink:0; color:#fff; background-color:var(--color-main);}
    & dd { word-break:keep-all; background-color:#fff;}
}
@media (width <= 896px) {
    #move30th .move30th_content .info {
        flex-direction:column;

        & dl { margin-bottom:0.75em;}
    }
}


/* ========== 車体画像部分 ========== */
#move30th .move30th_content .visual {
    display:grid;
    grid-template-columns:1fr auto;

    & .visual_l {
        position:relative;
        font-size:clamp(1rem, calc(0.568rem + 1.152vw), 1.6rem);/* 10-16px */
    
        & * { position:absolute;}
        & img { width:auto;}
        & .logo { inset:0 auto auto 0;}
        & .car { inset:calc(50% - 1rem) 0 auto auto; translate:0 -50%;}
        & p { inset:auto 0 0 auto; width:fit-content; line-height:1.5625;}
    }
    & .visual_r {
        align-self:center;

        & img { width:clamp(4rem, calc(-0.607rem + 12.284vw), 10.4rem);/* 40-104px */}
    }
}
@media (width <= 896px){
    #move30th .move30th_content .visual {
        & .visual_l {
            & * { position:static; display:block;}
            & .logo { width:32%;}
            & .car { translate:unset; width:80%; margin-inline:auto 0;}
            & p { margin-top:1em; margin-inline:auto 0;}
        }
    }
}


/* ========== 特別装備 ========== */
#move30th .move30th_content .special_title {
    width:fit-content;
    padding-inline:1.25em;
    background-color:#fff;
    border:solid 3px var(--color-border);
    border-bottom:none;
    color:var(--color-special);
    font-size:clamp(2.1rem, calc(1.596rem + 1.344vw), 2.8rem);/* 21-28px */
    font-weight:900;
}
#move30th .move30th_content .special_wrap {
    display:grid;
    grid-template:1fr auto / 1fr 1fr;

    & + .special_wrap { margin-top:clamp(1.5rem, calc(1.14rem + 0.96vw), 2rem);/* 15-20px */}
    & dl { border:solid 3px var(--color-border); background-color:#ECEBED;}
    & dl + dl { border-left:none;}
    & dt {
        border-bottom:inherit;
        background-color:var(--color-main);
        color:#fff;
        font-size:clamp(1.8rem, calc(1.368rem + 1.152vw), 2.4rem);/* 18-24px */
        font-weight:900;
        text-align:center;
    }
    & dd { padding:clamp(1.5rem, calc(1.14rem + 0.96vw), 2rem);/* 15-20px */}
    & dd > img { display:block; margin-inline:auto;}
    & .swiper_container {
        position:relative;
        max-width:500px;
        margin-inline:auto;
        padding-inline:clamp(2.25rem, calc(1.71rem + 1.44vw), 3rem);/* 22.5-30px */
    }
    & .swiper-slide { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:1rem; max-width:100%;}
    & .swiper-slide p {
        text-align:center;
        white-space:pre-line;
        font-size:clamp(1.4rem, calc(1.256rem + 0.384vw), 1.6rem);/* 14-16px */
    }
    & .swiper-pagination {
        position:static;
        width:fit-content;
        margin-inline:auto;
        padding:0.125em 0.5em;
        background-color:#fff;
        border-radius:100vmax;
        font-size:clamp(1.4rem, calc(1.256rem + 0.384vw), 1.6rem);/* 14-16px */
    }
    & :is(.swiper-btn-prev, .swiper-btn-next) {
        position:absolute;
        inset-block:50% auto;
        translate:0 -50%;
        width:clamp(1.2rem, calc(0.984rem + 0.576vw), 1.5rem);/* 12-15px */
        aspect-ratio:14/24;
        background-color:var(--color-main);
        mask:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/basara/move30th/swiper_arrow.svg) no-repeat center / contain;
        cursor:pointer;
        z-index:10;
    }
    & :is(.swiper-btn-prev, .swiper-btn-next).swiper-button-disabled {
        opacity:0.3;
        cursor:auto;
    }
    & .swiper-btn-prev { inset-inline:0% auto; rotate:180deg;}
    & .swiper-btn-next { inset-inline:auto 0%;}
}
#move30th .move30th_casual .special_wrap dt { text-shadow:2px 2px 0 var(--color-border);}

@media (width <= 896px){
    #move30th .move30th_content .special { margin-top:20px;}
    #move30th .move30th_content .special_wrap {
        grid-template-columns:1fr;

        & dl + dl { border-top:none; border-left:solid 3px var(--color-border);}
        & .swiper { width:55vw;}
        & .swiper-slide { grid-template-columns:1fr;}
        & .swiper-slide p { width:90%; margin-inline:auto;}
    }
}


/* ========== 金額欄 ========== */
#move30th .move30th_content .prices {
    margin-top:clamp(3rem, calc(2.28rem + 1.919vw), 4rem);/* 30-40px */
    border:solid 5px var(--color-border);
    background-color:#fff;
    font-weight:900;

    & img {
        display:block;
        margin:clamp(2.1rem, calc(1.596rem + 1.344vw), 2.8rem) auto;/* 21-28px */
        width:87.5%;
    }
    & .prc_title {
        padding:0.5em;
        background-color:var(--color-sub);
        text-align:center;
        font-size:clamp(2.8rem, calc(2.512rem + 0.768vw), 3.2rem);/* 28-32px */
        line-height:1;
    }
    & .prc_title small { font-size:0.65625em;}
    & .prc_subtotle {
        display:flex;
        justify-content:space-between;
        padding-inline:0.25em;
        padding-bottom:0.5em;
        background:repeating-linear-gradient(
            90deg,
            var(--color-border),
            var(--color-border) 6px,
            transparent 6px,
            transparent 12px
        ) repeat-x left bottom / 100% 3px;
        font-size:clamp(1.8rem, calc(1.584rem + 0.576vw), 2.1rem);/* 18-21px */
        font-weight:bold;
    }
    & .prc_subtotle + .prc_subtotle { margin-top:0.5em;}
    & .prc_subtotal dt small { font-size:0.0476em;}
    & .prc_total {
        margin-block:0.5769em;
        font-size:clamp(1.95rem, calc(1.482rem + 1.248vw), 2.6rem);/* 19.5-26px */
        text-align:center;
        word-break:keep-all;
    }
    & .prc_discount { padding:12px; background-color:var(--yellow); color:var(--red); text-align:center; line-height:1;}
    & .prc_discount > * { line-height:inherit;}
    & .prc_discount .d1 { font-size:clamp(2.4rem, calc(1.824rem + 1.536vw), 3.2rem);/* 24-32px */}
    & .prc_discount .d2 { font-size:clamp(3.15rem, calc(2.394rem + 2.015vw), 4.2rem);/* 31.5-42px */}
    & .prc_discount .d3 { font-size:clamp(1.95rem, calc(1.482rem + 1.248vw), 2.6rem);/* 19.5-26px */}
    & .prc_special { width:fit-content; margin-top:15px; margin-inline:auto;}
    & .prc_special ul {
        display:grid;
        grid-template-columns:repeat(4, 1.4285em);
        gap:3px;
        color:#fff;
        font-size:clamp(1.8rem, calc(1.08rem + 1.919vw), 2.8rem);/* 18-28px */
        font-weight:900;
    }
    & .prc_special li {
        display:grid;
        place-items:center;
        width:100%;
        aspect-ratio:1;
        align-self:center;
        background-color:var(--red);
        line-height:1;
        font-size:inherit;
    }
    & .prc_special p {
        font-size:clamp(3.7rem, calc(1.181rem + 6.718vw), 7.2rem);/* 37-72px */
        color:#fff;
        text-shadow:
            3px 3px 3px var(--red),
            3px 0px 3px var(--red),
            3px -3px 3px var(--red),
            0px -3px 3px var(--red),
            -3px -3px 3px var(--red),
            -3px 0px 3px var(--red),
            -3px 3px 3px var(--red),
            0px 3px 3px var(--red);
        line-height:1;
    }
    & .prc_special p small { font-size:0.4444em; margin-left:0.25em;}
    & .prc_special p sub { font-size:0.3333em; vertical-align:bottom; bottom:0; line-height:1;}
}
@media (width <= 500px){
    #move30th .move30th_content .prices {

        & .prc_subtotle { flex-direction:column;}
        & .prc_subtotle dd { align-self:end;}
        & .prc_discount .d1 { display:block;}
    }
}

#move30th .move30th_casual .prices {
    display:grid;
    grid-template-columns:5fr 6fr;

    & :nth-child(2 of .prc_wrap) { padding:clamp(1.6rem, calc(1.024rem + 1.536vw), 2.4rem);/* 16-24px */}
}
@media (width <= 896px){
    #move30th .move30th_casual .prices {
        grid-template-columns:1fr;

        & img { width:55%;}
        & .prc_title { text-align:center; line-height:1.25;}
        & .prc_title small { display:block;}
    }
}

#move30th .move30th_sporty {

    & .prices_wrap {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 50px
    }
    & .prices {
        & .prc_wrap {
            padding-top:clamp(3rem, calc(2.28rem + 1.919vw), 4rem);/* 30-40px */
            padding-inline:clamp(1.1rem, calc(0.812rem + 0.768vw), 1.5rem);/* 11-15px */
            padding-bottom:clamp(1.5rem, calc(1.14rem + 0.96vw), 2rem);/* 15-20px */
        }
        & .prc_special p {
            font-size:clamp(4rem, calc(2.057rem + 5.182vw), 6.7rem);/* 40-67px */
        }
        & .prc_special p small { font-size:0.4776em;}
        & .prc_special p sub { font-size:0.3134em;}
    }
}
@media (width <= 896px){
    #move30th .move30th_sporty {
        & .prices_wrap { grid-template-columns:1fr;}
    }
}


/* ========== アピール ========== */
#move30th .move30th_content .appeals {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2.25rem, calc(1.71rem + 1.44vw), 3rem);/* 22.5-30px */
    margin-top:clamp(3rem, calc(2.28rem + 1.919vw), 4rem);/* 30-40px */

    & dl { display:grid; grid-template-rows:auto 1fr;}
    & dt {
        padding:0.5em;
        text-align:center;
        color:#fff;
        font-size:clamp(1.8rem, calc(1.368rem + 1.152vw), 2.4rem);/* 18-24px */
        font-weight:900;
        text-shadow:2px 2px 0px var(--color-border);
        background-color:var(--color-main);
    }
    & dt p {
        font-size:0.6666em;
        font-weight:bold;
        text-shadow:none;
        color:color-mix(in sRGB, var(--color-border), #000);
    }
    & img { width:100%; height:100%; object-fit:cover;}
}
@media (width <= 896px){
    #move30th .move30th_content .appeals { grid-template-columns:1fr;}
}


/* ========== 注釈 ========== */
#move30th .move30th_content .caution {
    margin-block:1.45em 30px;
    font-size:clamp(1.2rem, calc(1.056rem + 0.384vw), 1.4rem);/* 12-14px */
}