@charset "utf-8";
/* CSS Document */

/* .top{
    background-image: url(images/sp_bg.png);
    background-position: center;
    background-size: 400px;
    background-repeat: no-repeat;
} */
img {
    width: 100%;
}
#bg-loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 99;
    transition: opacity .3s ease-out .1s;  
  }
  
  #bg-loading.hide {
    opacity: 0;
    pointer-events: none;
  }
  @media(max-width:700px){
  .spNone {
    display: none;
  }
  }
body::before{
content: "";
display: block;
width: 100%;
height: 100vh;
background-image: url(images/sp_bg.png);
background-position: center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
top: 0;
left: 0;
}

@media(min-width:700px){
    body::before{
        background-image: url(images/pc_bg.png);
    }
}
main{
    position: relative;
}

.top {
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;    
    height: 100dvh;
    white-space: nowrap;         
  }
  @media(min-width:700px){
    .pc_none{
        display: none;
    }
  }
 
  
  .top_info_wrap {
    text-align: center; 
    margin-top: 5%;
  }

.pal_logo{
    width: 154px;
    display: block;
    margin: 0 auto 32px auto;
}
@media(min-width:700px){
    .pal_logo{
        width: 218px;
    }
}

.top_name{
    display: block;
    /* width: 252px; */
    padding-bottom: 1.5%;
    border-bottom: solid 1px #000;
    margin: 0 auto;
    width: 100%;
}
.top_name img{
    width: 74vw;
}
.top_name span{
    font-family: "shippori-mincho-b1", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
    margin-right: 2%;
    font-size: 18px;
}
.schedule {
    font-size: 24px;
    margin: 5%;
}
.schedule span {
    font-size: 16px;
    margin-left:  1.5%;
}
@media(min-width:700px){
    .top_name img {
       /* width: 398px;  */
       width: 29vw;
    }
    .top_name span {
       /* width: 398px;  */
       font-size:28px ;
    }
    .schedule {
        font-size: 41px;
        letter-spacing: 2px !important;
    }
    .schedule span {
        font-size: 27px;
    }
    
}
.garamond_font{
    font-family: "garamond-premier-pro", serif;
    font-weight: 400;
    font-style: normal;
    margin: 16px 0 0;
}

.ga_dis {
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 400;
    font-style: normal;
}
.top_info p{
    text-align: center;
    letter-spacing: 1px;
}

.top_coment{
    font-size: 9px;
    margin:8px auto 0;
    width: 240px;
    padding-bottom: 80px;
    letter-spacing: 0.13em;
    line-height: 1.88;
    white-space: nowrap;
}
@media(min-width:700px){
    .top_coment{
        font-size: 12px;
    }

}


/* スクロールダウンの位置 */
.scroll {
    position: absolute;
    bottom: calc(57 / 701* 100%);
  }
  .scroll span{
    font-size: 14px;
  }
  @media(min-width:700px){
    .scroll span{
        font-size: 18px;
      }
}

  /* 線のアニメーション部分 */
  .scroll::before {
    animation: scroll 2s infinite;
    background-color: #000;
    bottom: -80px;
    content: "";
    height: 50px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 0.5px;
    padding-bottom: 23px;
  }
  /* 線のアニメーション */
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }
    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }
    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }
    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }

  /* スクロール関係終了 */


.main_lead{
    margin-top: 100px;
    padding: 57px 0 97px;
    /* position: relative; */
}
.main_lead h2{
    font-size: 14px;
    margin: 0 auto 28px;
    /* width: 305px; */
    line-height: 1.8em;
    text-align: center;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.main_lead p{
    font-size: 13px;
    margin: 0 auto;
    text-align: center;
    width: 305px;
    line-height: 1.9em;
}
@media(min-width:700px){
    .main_lead{
        padding-bottom: 133px;
    }
    .main_lead h2{
        font-size: 19px;
        margin-bottom: 47px;
        line-height: 2.1;
    }
    .main_lead p{
        font-size: 17px;
        width: 701px;
        line-height: 2.9;
    }
}

.dnp_font{
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 500 !important;
    font-style: normal;
}
.dnp_font_m{
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 500 !important;
    font-style: normal;
}
.therteenfont{
    font-size: 13px;
}

.event_information{
    width: 100%;
    box-sizing: border-box;
    padding: 26px 21px 49px 21px ;
    background-color:#f2f5f2;
    /* margin-bottom: 25px; */
}

.period_place{
    position: relative;
}
.pd {
    margin-top: 5%;
}

.nimbus_period{
    font-size:26px ;
}
.nimbus_period span{
    font-size:17px ;
    margin-left: 1%;
}
.map {
    margin-top: 3%;
}
@media(min-width:700px){
    .therteenfont{
        font-size: 21px;
    }
    .pd{
        font-size: 24px;
    }
    .nimbus_period{
        font-size:35px ;
    }
    .nimbus_period span{
        font-size:24px ;
    }
    .pd {
        margin-top: 3%;
    }
}

/* info_image */
.information_circle {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    transform: translate(70%, -50%);
    
}

@media(min-width:700px){
    .information_circle{
        top: 0px;
        right: 0px;
        transform: translate(50%, -50%);
    } 
    .nimbus_period span {
        margin-left: 0.5%;
    }
}

.information_circle img {
    width: 54%;
    animation: rotate-anime 10s linear infinite;
  }
  @keyframes rotate-anime {
    0%  {transform: rotate(0);}
    100%  {transform: rotate(360deg);}
  }
  @media(min-width:700px){
    .information_circle img {
        width: 80%;
      }
}
/* info_image 終了 */

.period_place{
    padding-top: 8%;
    background-color:#fff;
    padding-bottom: 66px;
    /* margin-bottom: 67px; */
}

@media(min-width:700px){
    .period_place{
        width: 810px;
        margin: 40px auto;
        padding-top: 3%;
        padding-bottom: 10%;
    }

}

.period_place p,h2{
    text-align: center;
}
.period_place h2{
    font-weight: 400;
    margin-top: 5%;
}

/* フォント */
@font-face {
    font-family: 'Norman';
    src: url('fonts/fonnts.com-Norman-.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
.norman_font{
    font-family:'Norman', sans-serif;
    font-variation-settings: 'wght' 400;
}
.norman_font_m{
    font-family:'Norman', sans-serif;
    font-variation-settings: 'wght' 500;
}
.font_thirty-two{
    font-size: 32px;
    line-height: 0.2em;
    color: #ffc197;
    margin-top: 14%;
}
.norman_font span{
    font-size: 14px;
    color: #000;
}
.kaisai{
    letter-spacing: 0.5em;
}
.nimbus_font{
    font-family: "nimbus-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.map {
    width: 95%;
    margin: 5% auto 0;
}
.map img{
    width:100%;
}
.map p{
    width: 82%;
    font-size: 9px;
    margin: -4% auto 0;
    line-height: 1.51;
    text-align: left;
}
@media(min-width:700px){
    .font_thirty-two{
        font-size: 52px;
    }
    .map {
        margin: 3% auto 0;
    }
    .map img{
        display: block;
        margin: 0 auto;
        width: 75%;
    }
    .map p{
        width: 59%;
        margin: -1% auto 0;
        font-size: 11px;
        }
    .kaisai {
       font-size: 18px !important;
    }
    .font_thirty-two {
        margin-top: 12%;
    }
}

/* ブランドラインナップループ */

.p-box{
    /* width:400px; */
    /* height:100px; */
    /* padding:0 40px; */
    display:flex;
    place-items:center;
    overflow:hidden;
    text-wrap:nowrap;
  }
   
  .p-text {
    display: inline-block;
    padding-right: 20px;
    letter-spacing: 4px;
  }
  @media(min-width:700px){
    .p-text {
        font-size: 71px;
        letter-spacing: 5px;
    }
  }

/* .loop-wrap{
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 50px;
}
.loop-area{
    display: flex;
    list-style: none;   
    margin: 0;
    padding: 0;
    width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    margin-inline: calc(50% - 50vw);
}
.loop-area li{
    letter-spacing: 5px;
    margin-bottom: 19px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 39px;

} */
/* .loop-area li:nth-child(odd){
    animation: loop 48s -24s infinite linear;
}
.loop-area li:nth-child(even){
    animation: loop2 48s infinite linear;
} */


@font-face {
    font-family: 'Norman';
    src: url('fonts/fonnts.com-Norman-.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
.content{
    font-family:'Norman', sans-serif;
    font-variation-settings: 'wght' 400;
    font-size: 39px;
    color: #a5a5a5;
}



/* @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
              transform: translateX(-200%);
    }
  } */
/* ブランドラインナップループ　終了 */

@media(min-width:700px){
    .loop-area li{
        font-size: 72px;
        margin-bottom: 12px;
}
}


.brand_lineup_text {
    background-color:#F2F5F2;
}
.brand_lineup_text p{
    text-align: center;
}

.brand_menu_icon{
    display: flex; /* flexboxを使用 */
    flex-wrap: wrap;
    justify-content: center; /* 横方向に中央配置 */
    align-items: center; /* 縦方向に中央配置 */
    width: 92%;
    margin: 13% auto;
    padding-bottom: 10%;
}


.brand_menu_list{
    width:calc(300 / 333* 100%);
    display: flex; /* 横並びにするためにflexboxを使用 */
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none; /* リストのデフォルトのスタイルを削除 */
    padding: 0; /* パディングを削除 */
}
.brand_menu_list li{
    position: relative;
    margin-bottom:30px;
    width: calc(81 / 300* 100%);
}
.brand_menu_list li::before{
    content: "";
    display: block;
    padding-top: calc(51 / 81 * 100%);
}
.arrow1{
    width: 9px;
    height: 9px;
    border: 1px solid;
    border-color: transparent transparent #A29C99 #A29C99;
    transform: rotate(-45deg) translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
}

.brand_menu_list li a{
    display: block;
    position: absolute;

}
.brand_menu_list li a img{
    width: 100%;
}

.brand_1 a{
    width: calc(48 / 81 * 100%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.brand_2 a{
    width: 100%;
    top: calc(3 / 56 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.brand_3 a{
    width: calc(77 / 81 * 100%);
    top: calc(13 / 56 * 100%);
    left: 50%;
    transform: translateX(-50%);
}

.brand_4 a{
    width: calc(80 / 81 * 100%);
    top: calc(21 / 56 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.brand_5 a{
    width:calc(65 / 81 * 100%) ;
    top: calc(20 / 56 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.brand_6 a{
    width:calc(69 / 81 * 100%);
    top: calc(17 / 56 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.brand_main_page{
    margin: 0 auto;
}
.ichiran{
    font-size: 14px;
    letter-spacing: 4px;
    margin-top: 2%;
}

@media(min-width:700px){
    .brand_menu_icon{
        width: 612px;
        margin: 5% auto;
        padding-bottom: 7%;
    }
    .ichiran{
        margin-top: 25px;
        font-size: 17px;
    }
    .arrow1 {
        width: 11px;
        height: 11px;
        /* border: 2px solid; */
    }
    .brand_main_page {
        margin: 8% auto;
    }
}


.brand_main_wrap{
    display: block;
    width: calc(336 / 375 * 100%);
    margin: 50px 20px ;
    padding-top:49px;
    padding-bottom: 62px;
    background-color: #fff;
}
.brand_main_no{
    display: block;
    margin: 0 auto 21px auto;
    width:calc(41 / 375 * 100%) ;  
}
.brand_main_ex p{
    font-size: 12px;
    /* letter-spacing: 0.2em; */
    line-height: 1.9;
}
.pual_logo{
    display: block;
    margin: 10% auto 3%;
    width: calc(122 / 375 * 100%);
}
.fourteenpix{
    font-size: 14px;
}
.tenpix{
    font-size: 10px;
    font-weight: lighter;
    text-align: center;
}
.divider::before {
    content: '';
    display: block;
    width: 1px;          
    background-color: black; 
    height: 32px;  
    margin:19px auto 23px ;     
  }
.brand_main_ex{
    width: 70%;
        margin: 0 auto;
}
.brand_main_ex p{
    display: block;
    text-align: center;
}

.mp{
    color: #ffc197;
    font-size: 15px;
}

.main_brand_period,.main_brand_place{
    width: 70%;
    margin: 2% auto;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.main_brand_place{
    margin:0 auto 8% auto;

}

.subheading p{
    display: block;
    margin: 0 auto;
    text-align: center;
}
.sh{
   color:#ffc197 ;
   font-size: 31px;
}
.sh_s{
    font-size: 11px;
}
.fourteenpx {
    font-size: 17px;
    white-space: nowrap;
    width: 50%;
}
.fourteenpx span {
    font-size: 14px;
    margin-left: 3%;
}
.fs_20 {
    font-size: 20px;
}
.bmw_lema .pual_logo{
    width: calc(200 / 375 * 100%);
}
.bmw_dou .pual_logo{
    width: calc(183.29 / 375 * 100%);
}
.bmw_pr .pual_logo{
    width: calc(187 / 375 * 100%);
}
.bmw_cp .pual_logo{
    width: calc(129 / 375 * 100%);
}
.bmw_th .pual_logo{
    width: calc(112 / 375 * 100%);
}

.space_size{
    font-size: 14px;
    width: 50%;
}
@media(min-width:700px){

    .main_brand_period,.main_brand_place{
        width: 100%;
    }
    .main_brand_period {
        margin: 2% auto 1%;
    }
    .space_size{
        font-size: 22px;
        width: 37%;
    }
    .brand_main_wrap{
        width: 810px;
        margin: 130px auto;
        padding: 8% 10%;
    }
    .brand_main_no{
        width: 52px;
    }
    .pual_logo{
        width: 164px;
        margin: 7% auto 3%;
    }
    .tenpix{
        font-size: 15px;
    }
    .brand_main_ex{
        width: 100%;
    }
    .divider {
        margin: 7% auto;
    }
    .brand_main_ex p{
        font-size: 16px;
    }
    .mp{
        font-size: 28px;
    }
    .fourteenpx{
        font-size: 29px;
        width: 37%;
    }
    .fourteenpx span{
        font-size: 23px;
    }
    .sh{
        font-size:52px;
    }
    .sh_s{
        font-size:15px ;
    }

}

.infulencer_gallery_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.infulencer_gallery{
    list-style: none;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
    padding: 0;
    margin: 16px 0 0;
    gap: 4%;
}
     

.two_rows{
    width: 74%;
    justify-content:space-evenly;
    align-items: center;
}
.two_rows li{
    width: 39% !important;
}
.infulencer_gallery li{
    width: 28%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 22px;
}
.infulencer_gallery img{
    width: 100%;
}
.infulencer_gallery p{
    font-size: 3vw;
    margin: 11% 3% 10% 0;
    line-height: 1.4;
}
.infulencer_gallery .code {
    color: #000;
    font-size: 9px;
    text-decoration: none;
    width: 93%;
    display: inline-block;
    padding: 1px 0px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 14px;
}
@media(max-width:700px){
.fs_2 {
    font-size: 2.2vw !important;
}
.fs_26 {
    font-size: 2.6vw !important;
}
}
.insta {
    display: contents;
}
.insta svg {
    width: 15px;
}
/* .insta p {
font-size: 10px;
} */


@media(min-width:700px){
.infulencer_gallery{
  width:100%;
  margin: 8% auto;
}

.two_rows{
    width:450px;
}
/* .infulencer_gallery li{
    width: 146px;
} */

.infulencer_gallery img{
    width: 146px;
}
.infulencer_gallery p{
    font-size: 16px;  
}
.infulencer_gallery .code{
    width: 124px;
    font-size: 13px;
    border-radius: 28px;
    padding: 0px;
    margin-bottom: 10%;
}
.insta svg {
    width: 18px;
}
}


.main_brand_alllineup {
       margin-top: 17px;
        display: grid;
        place-items: center; /* 横・縦ともに中央揃え */
        text-align: center; /* テキストの中央揃え */
    }  

.main_brand_alllineup a{
    width: calc(193 / 336* 100%);
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 193px;
    background-color: #000;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    padding:7px 0px;
    font-weight: 200;

}

@media(min-width:700px){
  .main_brand_alllineup a{
    width: 360px;
    font-size: 19px;
    padding:14px 0px;
    border-radius: 100px;
  }
}
.brand_main_ex p{
    font-weight: lighter;
    text-align: left;
    margin-bottom: 17%;
}

/* 初期状態では透明で非表示 */
.bmw_lema, .bmw_pual, .bmw_dou, .bmw_pr, .bmw_cp, .bmw_th {
    opacity: 0;
    transform: translateY(50px);  /* 少し下に位置させる */
    transition: opacity 0.6s ease, transform 1s ease;
  }
  
  /* 表示状態 */
  .bmw_lema.show, .bmw_pual.show, .bmw_dou.show, .bmw_pr.show, .bmw_cp.show, .bmw_th.show {
    opacity: 1;
    transform: translateY(0);  /* 元の位置に戻す */
  }

  .next_content{
    display: block;
    margin-top: 118px;
    width: 100%;
    background-color:#f2f5f2;
    padding-top:75px;
    padding-bottom: 75px;
  }
  .seventeenpx{
    font-size: 17px;
    text-align: center;
  }
  @media(min-width:700px){
    .seventeenpx{
        font-size: 26px;
    }
    .brand_main_ex p{
        margin-bottom: 11%;
    }
    .next_content{
    padding-top: 120px;
    padding-bottom: 120px;
    }
  }
  footer{
    position: relative;
  }
  .slick-slide img {
    width: 100%;
}

div.foot_brand_area {
    margin-top: 0px !important;
}
.img {
    margin: 5% auto 2%;
    width: 75%;
}
.des {
    font-size: 11px;
    line-height: 1.7;
    width: 75%;
}
.t_l {
    text-align: left !important;
    margin-top: 2% !important;
    margin-bottom: 10% !important;
}
.present  {
    margin-bottom: 10%;
}

.pre {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: center;
    margin: 5% auto;
}
.pre li {
    width: 38%;
}
.pre p {
    font-size: 10px;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 15%;
}

@media(min-width:700px){
    .des {
        font-size: 14px;
    }
    .pre p {
        font-size: 12px;
    }
}