@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root{
    --bg-green: #E0F0EB;
    --bg-yellow: #FFF9C4;
    --orange: #F8B62D;
    --green: #38A892;
    --black: #000;

    --font40: clamp(23px, 2.77vw, 40px);
    --font20: clamp(17px, 1.38vw, 20px);
    --font16: clamp(15px, 1.11vw, 16px);
    --font14: clamp(14px, 1.04vw, 15px);

    --radius30: 3vh;
    --radius10: 1vh;

    --lr-50px: 5%;
    --lr-100px: 10%;
    --tb-100px: 100px;
    --tb-50px: 50px;
    --p50: 50px;
    --gap30: 30px;
    --gap50: 50px;
    --gap100: 100px;
}
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
main{
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
    line-height: 150%;
    color: var(--black);
    font-size: var(--font20);
}

img{
    display: block;
    width: 100%;
    height: auto;
}
img.cover{
    height: 100%;
    object-fit: cover;
}

a{
    display: block;
    text-decoration: none;
}

.flex{
    display: flex;
}
.column{
    display: flex;
    flex-direction: column;
}

.radius10{
    border-radius: var(--radius10);
}
.radius30{
    border-radius: var(--radius30);
}

/* フォント */
.font40{
    font-size: var(--font40);
}
.font20{
    font-size: var(--font20);
}
.font16{
    font-size: var(--font16);
}
.font14{
    font-size: var(--font14);
}
/* 背景色 */
.bg-green{
    background-color: var(--bg-green);
}
.bg-yellow{
    background-color: var(--bg-yellow);
}
.bg-white{
    background-color: #fff;
}
.bg-orange{
    background: var(--orange);
}
.bg-rgreen{
    background: var(--green);
}
/* 余白 */
.lr50{
    padding-left: var(--lr-50px);
    padding-right: var(--lr-50px);
}
.lr100{
    padding-left: var(--lr-100px);
    padding-right: var(--lr-100px);
}
.t100{
    padding-top: var(--tb-100px);
}
.b100{
    padding-bottom: var(--tb-100px);
}
.p50{
    padding: var(--p50);
}

/* 見出し画像 */
.h50{
    height: clamp(30px, 4.513vw, 65px);
    width: fit-content;
}
.h100{
    height: clamp(50px, 6.944vw, 100px);
}
.h50 img,
.h100 img{
    height: 100%;
    width: auto;
}
@media screen and (max-width: 600px){
    :root{
        --p50: 35px;
        --tb-100px: 50px;
        --tb-50px: 35px;
        --gap100: 50px;
        --gap30: 25px;
        --gap50: 35px;
    }
    /* 見出し画像 */
    .h50{
        height: clamp(40px, 4.513vw, 65px);
        max-width: 100%;
    }
    .h50 img{
        width: 100%;
    }
}

/* =============================
* アニメーション設定
============================= */
.element {
    animation: fadeIn 1s ease forwards;
    animation-play-state: paused;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.pop-in {
    opacity: 0;
    transform: scale(0.7);
}
.pop-in.in-view {
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    80% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.slide-in{
    opacity: 0;
    transform: translateY(-180px);
}
.slide-in.in-view{
    animation: slideIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 1;
    transform: translateY(0);
}
@keyframes slideIn {
    0% {
        transform: translateY(180px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}


/* =============================
* 追従ボタン
============================= */
.CtaButton--w{
    position: fixed;
    bottom: 3%;
    right: 0px;
    transition: .2s;
    z-index: 999;
}
.CtaButton--w:hover{
    transform: scale(1.1);
    transform-origin: right;
}
@media screen and (max-width: 600px){
    .CtaButton--w{
        width: 25%;
    }
}
@media screen and (max-width: 400px){
    .CtaButton--w{
        width: 45%;
    }
}

/* =============================
* MV
============================= */
.mv{
    position: relative;
}
.mv img{
    width: 100%;
    height: auto;
}
.mv .mv-txt-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* =============================
* ここに注目シエンタ
============================= */
.point .bg-yellow{
    position: relative;
}
.point .bg-yellow::after{
    content: "";
    display: block;
    aspect-ratio: 127 / 332;
    width: 8%;
    height: auto;
    position: absolute;
    background: url(image/point-illust.svg) no-repeat;
    bottom: -3%;
    right: 3%;
    background-size: 100% 100%;
}
.point-flex--w{
    justify-content: space-between;
    align-items: center;
}
.point-flex--w .point-txt--w{
    width: 40%;
}
.point-flex--w .point-ing--w{
    width: 55%;
}
@media screen and (max-width: 500px){
    .point-midashi--w{
        margin: 0 auto var(--gap30);
    }
    .point-flex--w{
        flex-direction: column;
        gap: var(--gap30);
    }
    .point-flex--w .point-txt--w{
        width: 100%;
    }
    .point-flex--w .point-ing--w{
        width: 100%;
    }
    .point .bg-yellow::after{
        width: 15%;
    }
}

/* =============================
* カラバリいろいろ
============================= */
.color--w .color-midashi--w{
    margin: 0 auto var(--gap30);
}
.CarLineup--w{
    gap: 1.5rem;
    justify-content: space-between;
}
.CarLineup--w img{
    width: calc((100% / 6) - 1.5rem);
}
@media screen and (max-width: 600px){
    .color-midashi--w{
        height: clamp(50px, 6.944vw, 100px);
    }
    .CarLineup--w{
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .CarLineup--w img{
        width: calc((100% / 3) - 1rem);
    }
}

/* =============================
* 乗り降りらくらく
============================= */
.child::before,
.child::after{
    content: "";
    display: block;
    aspect-ratio: 1440 / 79;
    width: 100%;
    height: auto;
}
.child::before{
    background: url(image/nami01.svg) no-repeat;
    background-size: 100%;
}
.child::after{
    background: url(image/nami02.svg) no-repeat;
    background-size: 100%;
}
.child .bg-white{
    position: relative;
}
.child .child-point--w{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* =============================
* ゆとりある室内空間
============================= */
.yutori--w{
    gap: var(--gap30);
}
.yutori-midashi-w{
    margin: 0 auto;
}
.yutori--w p{
    text-align: center;
}
.yutori--w .flex{
    justify-content: space-between;
    align-items: center;
}
.yutori--w .yutori-left{
    width: 40%;
}
.yutori--w .yutori-right{
    width: 55%;
    overflow: hidden;
}
@media screen and (max-width: 600px){
    .yutori--w .flex{
        flex-direction: column;
        gap: var(--gap30);
    }
    .yutori--w .yutori-left,
    .yutori--w .yutori-right{
        width: 100%;
    }
}

/* =============================
* 多彩なシートアレンジ
============================= */
.sheet-flex--w{
    gap: var(--gap30);
}
.sheet-flex--w .cont p{
    color: #fff;
    background: var(--green);
    border-radius: 1.5vh;
    padding: 5px;
    text-align: center;
    font-size: var(--font16);
}
.sheet-midashi--w{
    margin: 0 auto;
}
.sheet-arange .note{
    text-align: right;
}
@media screen and (max-width: 600px){
    .sheet-flex--w{
        flex-direction: column;
    }
    .sheet-flex--w .cont{
        width: 70%;
        margin: 0 auto;
    }
    .sheet-flex--w .cont p{
        margin: 0 auto;
    }
}

/* =============================
* 心配なしの走行性能 〜
* 程よい大きさで運転初心者でも安心
============================= */
.other--w,
.other--w .cont02{
    gap: var(--gap100);
}
.other--w .cont01,
.other--w .cont02 .cont02-cont,
.other--w .cont03{
    justify-content: space-between;
    align-items: center;
}
.other--w .cont01 .left{
    overflow: hidden;
    width: 55%;
}
.other--w .cont02 .right{
    width: 50%;
}
.other--w .cont03 .right{
    width: 55%;
}
.other--w .cont01 .right,
.other--w .cont03 .left{
    width: 40%;
}
.other--w .cont02 .left{
    width: 45%;
}
.other--w .cont01 h3,
.other--w .cont02 h3,
.other--w .cont03 h3{
    margin: 0 auto var(--gap30);
    width: fit-content;
}
.other--w .sapocar--w{
    gap: var(--gap30);
}
.other--w .sapocar--w img{
    width: 30%;
}
.other--w .cont02::before,
.other--w .cont02::after{
    content: "";
    width: 100%;
    height: auto;
    aspect-ratio: 1221 / 16;
    display: block;
    background: url(image/border.svg) no-repeat;
    background-size: 100% 100%;
}

@media screen and (max-width: 600px){
    .other--w .cont01,
    .other--w .cont02
    .cont02-cont,
    .other--w .cont03{
        flex-direction: column;
        gap: var(--gap30);
    }
    .other--w .cont01 .left,
    .other--w .cont01 .right,
    .other--w .cont03 .left,
    .other--w .cont02 .left,
    .other--w .cont02 .right,
    .other--w .cont03 .right{
        width: 100%;
    }
}

/* =============================
* シエンタについて詳しく
============================= */
.cta{
    position: relative;
}
.cteAll--w{
    padding-bottom: calc(clamp(120px, 22.7vw, 328px) + var(--tb-50px));
}
.cta::before{
    content: "";
    display: block;
    background: url(image/nami03.svg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 79;
}
.cta::after{
    content: "";
    display: block;
    background: url(image/cta-illust.webp) no-repeat;
    aspect-ratio: 2142 / 656;
    width: auto;
    height: clamp(120px, 22.7vw, 328px);
    background-size: 100% 100%;
    /* margin: var(--lr-50px); */
    position: absolute;
    left: var(--lr-50px);
    bottom: -2rem;
    animation: jump 3s infinite;
}
@keyframes jump {
    /* じっとしてる */
    0%,
    10%{
        transform: translateY(0);
    }

    /* ぴょん！ */
    15% {
        transform: translateY(-10px);
    }
    20%{
        transform: translateY(0);
    }
    25%{
        transform: translateY(-10px);
    }

    /* 着地 */
    30% {
        transform: translateY(0);
    }
}

.cta h2{
    margin: 0 auto;
    width: fit-content;
}
.cta .cta-hukidashi--w{
    margin: var(--gap50) auto;
}
.cta .cta-link--w{
    justify-content: space-between;
    align-items: center;
    gap: var(--gap30);
}
.cta .cta-link--w a{
    background: var(--bg-yellow);
    border-radius: var(--radius10);
    width: 100%;
    padding: 2rem 2.5rem;
    transition: .2s;
}
.cta .cta-link--w a img{
    margin: 0 auto;
}
.cta .cta-link--w a:hover{
    background: #FFF574;
    transform: scale(1.05);
}

@media screen and (max-width: 600px){
    .cta .cta-link--w{
        flex-direction: column;
    }
    .cta .cta-link--w a{
        padding: 2rem 0;
        max-width: 100%;
    }
}
@media screen and (max-width: 400px){
    .cta-link--w .h50{
        height: auto;
    }
    .cta .cta-link--w a{
        padding: 2rem;
        width: 100%;
    }
    .cta::after{
        background-size: contain;
        max-width: 100%;
        margin: 0 var(--lr-50px);
        width: stretch;
        height: auto;
        left: 0;
    }
}

/* =============================
* 車両本体価格・支払い例
============================= */
.price .table--w,
.plan-panel,
.plan-orange{
    padding: var(--p50);
    border-radius: var(--radius10);
}
.price h2,
.price button{
    color: #fff;
    padding: 1rem 1.5rem;
    border-top-right-radius: var(--radius10);
    border-top-left-radius: var(--radius10);
    margin: 0;
    width: fit-content;
}
.price button{
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 車両本体価格 */
.price--w table{
    width: 100%;
    border-collapse: collapse;
}
.price--w table tr{
    border-bottom: 1px solid var(--black);
}
.price--w table th,
.price--w table td{
    padding: .5rem;
}
.price--w table th{
    text-align: left;
}
.price--w table td{
    text-align: right;
}
.price--w table .grade{
    color: var(--orange);
}
.price--w .table-flex{
    gap: var(--gap30);
}
.price-table tbody + tbody .grade th{
    padding-top: var(--tb-50px);
}

/* お支払いプラン */
.plan--w h2{
    margin: var(--tb-50px) auto;
    text-align: center;
    line-height: 150%;
}
.plan--w button{
    background: var(--black);
}
.plan--w table{
    border-collapse: collapse;
    width: 100%;
}
.plan--w .plan-table tbody + tbody .head th{
    padding-top: var(--tb-50px);
}
.plan--w table th,
.plan--w table td{
    padding: .5rem;
}
.plan--w table th{
    text-align: left;
}
.plan--w table td{
    text-align: right;
}
.plan--w button:nth-of-type(1).is-active{
    background: var(--green);
}
.plan--w button:nth-of-type(2).is-active{
    background: var(--orange);
}
.plan-panel hgroup{
    color: var(--green);
    align-items: center;
    justify-content: space-between;
}
.plan-panel hgroup .flex{
    align-items: center;
    gap: 1.5rem;
}
#plan-orange hgroup{
    color: var(--orange);
}
.plan-table tr{
    border-bottom: 1px solid var(--black);
}
small{
    font-size: 14px;
    line-height: 110%;
}
/* タブ切り替え */
.plan-panel {
    display: none;
}
.plan-panel.is-active {
    display: block;
}
/* PCとSPで切り替え表示 */
.sp-table{
    display: none;
}

@media screen and (max-width: 600px){
    .plan--w button,
    .price--w h2.bg-orange{
        font-size: 1rem;
    }
}
@media screen and (max-width: 500px){
    .tab--w{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .price button{
        border-radius: var(--radius10);
        width: 100%;
    }
    #plan-orange hgroup h3{
        margin: 0;
    }
    #plan-orange hgroup .flex{
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
    #plan-orange hgroup{
        margin: 1rem 0;
    }
    .sp-table{
        display: inline-table;
        width: 100%;
    }
    .price--w table th.capa{
        background: var(--bg-yellow);
    }
    .sp-table th.capa,
    .sp-table th.type{
        text-align: center !important;
    }
    .sp-table th.left{
        text-align: left !important;
    }
    .pc-table{
        display: none;
    }
}
@media screen and (max-width: 400px){
    .price--w table th.capa{
        text-align: center;
    }
    .plan-panel hgroup{
        flex-direction: column;
        gap: 1rem;
    }
    .plan-panel hgroup h3{
        font-size: 1.2rem;
        margin: 0;
    }
    #plan-orange hgroup .flex{
        align-items: center;
    }
    .plan-panel hgroup{
        margin: 1rem 0;
    }
}