@charset "utf-8";


#brandnew .contents_mv{
    background-image: url(../img/brandnew/mv_pc.webp);
}

.brandnew_wrap{
    padding: 0 0 5%;
    position: relative;
    margin-top: -20%;
}
.content_box{
    padding-top: 5%;
}
.content_box .note{
    text-align: right;
    color: var(--light);
    font-size: 1.2rem;
    transform: rotate(0.05deg);
    padding-top: 8px;
}

.shop_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 1%;
    flex-wrap: wrap;
    position: relative;
}
.shop_list li{
    flex-basis: 49%;
    margin-bottom: 4%;
    position: relative;
}
.shop_list .access_txt_wrap{
    padding-top: 16px;
    line-height: 1;
}
.shop_list .access_line{
    transform: rotate(0.05deg);
    font-size: 1.6rem;
    font-weight: 600;
}
.shop_list .access_station{
    transform: rotate(0.05deg);
    font-size: 4.2rem;
    font-weight: 600;
}
.shop_list .access_station span{
    color: var(--orange);
    font-size: 130%;
    font-weight: 800;
    letter-spacing: 0px;
}
.shop_list .access_cap{
    transform: rotate(0.05deg);
    font-size: 1.3rem;
    padding-top: 8px;
    font-weight: 500;
}

.brandnew_wrap.blue{
    background: url(../img/common/bg_dot.svg), var(--gra_lblue);
    padding-bottom: 10%;
    padding-top: 5%;
    color: var(--light);
}
.brandnew_wrap.orange{
    background: url(../img/common/bg_dot.svg), var(--gra_lorange);
    padding-bottom: 30%;
    padding-top: 20%;
    color: var(--dark);
}

.brandnew_wrap h4{
    margin-top: 6%;
    font-size: 8.8rem;
    line-height: .9;
    font-weight: 900;
    transform: rotate(0.05deg);
    display: flex;
    gap: 0 4px;
}
.brandnew_wrap h4 span.big{
    font-size: 222%;
    line-height: .8;
}
.brandnew_wrap.orange h4 span.big{
    color: var(--blue);
}
.brandnew_wrap.blue h4 span.big{
    color: var(--d_red);
}
.brandnew_wrap h4 span.small{}

/* .content_txt_wrap small{
    font-size: 1.3rem;
    padding-top: 8px;
    transform: rotate(0.05deg);
    font-weight: 500;
    display: block;
} */
 .content_txt_wrap small{
    font-size: 1.2rem;
    vertical-align: 28px;
 }
.content_txt_wrap dt .color{
    font-size: 200%;
    font-weight: 700;
}
.content_txt_wrap dt .color span{
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .2em; /* 縦方向の位置調整 */
}
.blue .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--d_red) 20%, transparent 20%); /* 点の色とサイズ調整 */
}
.orange .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--blue) 20%, transparent 20%); /* 点の色とサイズ調整 */
}
.blue .content_txt_wrap dt .color{color: var(--d_red);}
.orange .content_txt_wrap dt .color{color: var(--blue);}



.main_img{
    max-width: calc(1120px + 6.94vw);
    padding: 0 var(--gap);
    margin: auto;
    position: relative;
    z-index: 1;
}
.content_txt_wrap dt span{
    font-size: 130%;
}
.main_img small{
    font-size: 1.2rem;
    padding-top: 8px;
    transform: rotate(0.05deg);
    font-weight: 500;
    display: block;
    letter-spacing: .5px;
}


.brandnew_box_wrap{
    display: flex;
    justify-content: space-between;
    gap: 0 3%;
}
.brandnew_box{
    margin-top: 0%;
    flex: 1;
}
.kukaku_ttl{
    text-align: left;
    transform: rotate(0.05deg);
    font-size: 3.2rem;
    font-weight: 500;
    margin-top: 8%;
}
.en_ttl{
    margin-top: 3%;
    font-size: 5.6rem;
    line-height: .75;
    font-weight: 900;
    transform: rotate(0.05deg);
}
.en_ttl span{
    font-size: 180%;
}
.orange .en_ttl span{color: var(--blue);}
.blue .en_ttl span{color: var(--d_red);}

.brandnew_box dl{
    margin-top: 40px;
}
.brandnew_box dt{
    text-align: center;
    font-size: 3.2rem;
    line-height: 1;
    transform: rotate(0.05deg);
    font-weight: 500;
}
.brandnew_box dd{
    font-size: 1.6rem;
    transform: rotate(0.05deg);
    font-weight: 500;
    margin-top: 24px;
}

#station{
    margin-top: -180px;
    padding-top: 180px;
}

.comingsoon{
    max-width: 800px;
    margin: 5% auto 0;
    background: var(--light);
    border: 6px solid var(--d_red);
    padding: 3% 16px;
}
.comingsoon p{
    text-align: center;
    transform: rotate(0.05deg);
    font-size: 3.2rem;
    line-height: 1.4;
    color: var(--d_red);
    font-weight: 800;
}

@media screen and (max-width: 768px) {
    #station{
    margin-top: -20px;
    padding-top: 20px;
}
.comingsoon{
    max-width: 100%;
    margin: 10% auto 0;
    border: 3px solid var(--d_red);
    padding: 6% 8px;
}
.comingsoon p{
    font-size: 1.4rem;
    line-height: 1.4;
}

    #brandnew .contents_mv{
    background-image: url(../img/brandnew/mv_sp.webp);
}

.brandnew_wrap{
    padding: 0 0 20%;
    position: relative;
}
.content_box{
    padding-top: 10%;
}

.content_box .note{
    font-size: 0.9rem;
}
.shop_list{
    margin-top: 3%;
}

.content_box .note{
    text-align: right;
    color: var(--light);
    font-size: 1.2rem;
    transform: rotate(0.05deg);
    padding-top: 8px;
}
.shop_list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 1%;
    flex-wrap: wrap;
    position: relative;
}
.shop_list li{
    flex-basis: 100%;
    margin-bottom: 4%;
    position: relative;
}
.shop_list.other li{
    flex-basis: 49%;
}

.brandnew_wrap.blue{
    background: url(../img/common/bg_dot.svg), var(--gra_lblue);
    padding-bottom: 10%;
    padding-top: 10%;
    color: var(--light);
}
.brandnew_wrap.orange{
    background: url(../img/common/bg_dot.svg), var(--gra_lorange);
    padding-bottom: 30%;
    padding-top: 20%;
    color: var(--dark);
}
.brandnew_wrap h4{
    margin-top: 12%;
    font-size: 5.6rem;
}
 .content_txt_wrap small{
    font-size: 1.0rem;
    vertical-align: 10px;
 }
.content_txt_wrap dt .color{
    font-size: 200%;
    font-weight: 700;
}

.main_img{
    max-width: calc(1120px + 6.94vw);
    padding: 0 var(--gap);
    margin: auto;
    position: relative;
    z-index: 1;
}
.content_txt_wrap dt span{
    font-size: 120%;
}
.main_img small{
    font-size: 1.0rem;
    letter-spacing: .5px;
}

.kukaku_ttl{
    margin-top: 16%;
    font-size: 2.4rem;
}
.brandnew_box_wrap{
    display: block;
}
.brandnew_box{
    margin-top: 0%;
}
.en_ttl{
    font-size: 4.8rem;
}

.brandnew_box dl{
    margin-top: 40px;
}
.brandnew_box dt{
    font-size: 3.2rem;
}
.brandnew_box dd{
    font-size: 1.3rem;
}


}