@charset "UTF-8";

/*******************************
*　
********************************/


/**/
.pg_simu{
  
}

/* ABOUT */
.simu_about{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 40px;
}
.simu_about p{
  letter-spacing: 0;
}
.simu_head{
  background: #080056;
  color: #FFF;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  padding: 7px 10px 10px;
  margin-bottom: 20px;
}


/* タブ */
.simu_tabs{
  display: flex;
  gap: 0 1px;
  background: #000000;
}
.simu_tabs_item{
  width: 100%;
  background: #d9d9d9;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  padding: 10px 10px 11px;
  cursor: pointer;
  transition: 0.2s all;
}
.simu_tabs_item.on{
  background: #000000;
  color: #FFF;
}
.simu_tabs_item:hover{
  opacity: 0.9;
}

/* 通貨選択 */
.simu_currency_head{
  width: 100%;
  background: #000;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  padding: 15px 10px 16px;
  
}
.simu_currency_head2{
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  
  padding: 10px 10px 11px;
  margin-bottom: 15px;
  border: 2px solid #080056;
  background: #FFF;
}
* + .simu_currency_head2{
  margin-top: 30px;
}
.simu_currency_head2 p{
  letter-spacing: 0;
}

.simu_currency_select{
  display: flex;
  gap: 0 5px;
  padding-bottom: 20px;
  border-bottom: 1px solid #a6a6a6;
}
.simu_currency_select_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  background: #FFF;
  border-radius: 24px;
  border: 1px solid #a6a6a6;
  padding: 5px 10px;
  cursor: pointer;
}
.simu_currency_select_btn.on{
  background: #dbd9ef;
}
.simu_currency_select_btn:hover{
  opacity: 0.9;
}
.simu_currency_select_btn:before{
  content: "";
  width: 25px;
  aspect-ratio: 43 / 29;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 2px;
}
.simu_currency_select_btn.USD:before{
  background-image: url('/system_panel/uploads/images/flag_USD.png');
}
.simu_currency_select_btn.EUR:before{
  background-image: url('/system_panel/uploads/images/flag_EUR.png');
}
.simu_currency_select_btn.GBP:before{
  background-image: url('/system_panel/uploads/images/flag_GBP.png');
}

/* 為替表示エリア */
.simu_currency_view{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.simu_currency_view_p1{
  font-size: 16px;
  font-weight: 500;
}
.simu_currency_view_p2{
  font-size: 14px;
  font-weight: 500;
}
.simu_currency_view_rate{
  border: 1px solid #192a4d;
  width: 130px;
  height: 36px;
  text-align: center;
  background: #FFF;
  margin: 0 10px;
}

.simu_body_price_msg{
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: 15px;
}
.simu_body_price_msg .p{
  letter-spacing: 0;
}

/* タブコンテンツ内容 */
.simu_contents{
  background: #f8f8f8;
  padding: 15px 15px;
}
.simu_contents_row{
  display: none
}
.simu_contents_row.on{
  display: block;
}

/* シミュレーションSTART */
.simu_start{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid #a6a6a6;
}
.simu_start_btn{
  width: 410px;
  background: #080056;
  color: #FFF;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 10px 10px 11px;
  cursor: pointer;
  transition: 0.2s all;
}
.simu_start_btn:hover{
  transform: scale(1.03);
}

/* 詳細内訳 */
.simu_calculate{
  background: #FFF;
  border: 1px solid #a6a6a6;
  padding: 5px;
}
.simu_calculate + .simu_calculate{
  margin-top: 30px;
}
.simu_calculate_head{
  width: 100%;
  background: #000;
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  padding: 9px 10px 10px;
  margin-bottom: 10px;
}
.simu_calculate_details{
  
}
.simu_calculate_details_item{
  border: 1px solid #e5e5e5;
  text-align: center;
  background: #FFF;
}
.simu_calculate_details_item + .simu_calculate_details_item{
  margin-top: 15px;
}

.simu_calculate_details_item_ttl{
  background: #e5e5e5;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 10px 10px;
}
.simu_calculate_details_item_price{
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-en);
  padding: 8px 10px 10px;
}
.simu_calculate_details_item_price_p1{
  font-size: 1em;
  letter-spacing: 0.05em;
}
.simu_calculate_details_item_price_p1:after{
  content: "円";
  font-size: 0.666em;
  font-family: var(--font-ja);
  font-weight: 700;
}
.simu_calculate_details_item.ref .simu_calculate_details_item_price_p1:after{
  content: "円（参考）";
}

.simu_calculate_details_item.notice{
  margin-top: 15px;
}
.simu_calculate_details_item.notice .simu_calculate_details_item_ttl{
  background: #4c4c4c;
  color: #FFF;
}
.simu_calculate_details_item_notice1{
  padding: 20px 22px;
}
.simu_calculate_details_item_notice1 p{
  text-indent: -1em;
  padding-left: 1em;
  text-align: justify;
}
.simu_calculate_details_item_notice1 p+p{
  margin-top: 12px;
}
.simu_calculate_details_item_notice2{
  margin-top: 30px;
  padding: 20px 22px;
}
.simu_calculate_details_item_notice2 p{
  font-weight: 500;
  text-align: justify;
}

/* 合計金額 */
.simu_calculate.total{
  
}
.simu_calculate.total .simu_calculate_head{
  background: #a40000; 
  color: #FFF;
  margin-bottom: 0;
}
.simu_calculate_details_item_price_p2{
  font-size: 1.5833em;
  letter-spacing: 0.075em;
  color: #a40000;
  text-align: center;
}
.simu_calculate_details_item_price_p2:after{
  content: "円";
  font-size: 0.552em;
  font-family: var(--font-ja);
  font-weight: 700;
}

.simu_calculate_display{
  display: none;
}
.gjs-dashed .simu_calculate_display{
  display: block;
}

/* 価格計算用（管理画面でのみ表示） */
.simu_base_price{
  display: none;
}
.gjs-dashed .simu_base_price{
  display: block;
  padding: 15px 15px;
  background: beige;
}
.simu_base_price_row{
  
}
.simu_base_price_row + .simu_base_price_row{
  margin-top: 30px;
}
.simu_base_price_items{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.simu_base_price_item{
  width: calc(33.333% - 6.666px);
  border: 1px solid #e5e5e5;
  text-align: center;
  background: #FFF;
}
.simu_base_price_item + .simu_base_price_item{
  /*margin-top: 10px;*/
}
.simu_base_price_item_ttl{
  background: #e5e5e5;
  padding: 5px;
  margin-bottom: 10px;
}
.simu_base_price_item_value{
  padding: 5px;
}
.simu_base_price_item_value_p1{
  font-size: 24px;
  font-weight: 500;
  padding: 0 5px;
}
.simu_base_price_item_value_p1:after{
  content: "";
  font-size: 0.666em;
}

.simu_base_price_row.USD .simu_base_price_item_value_p1:after{
  content: "USD";
} 
.simu_base_price_row.EUR .simu_base_price_item_value_p1:after{
  content: "EUR";
} 
.simu_base_price_row.GBP .simu_base_price_item_value_p1:after{
  content: "GBP";
} 
.simu_base_price_item.static .simu_base_price_item_value_p1:after{
  content: "円" !important;
}
.simu_base_price_item.static2 .simu_base_price_item_value_p1:after{
  content: "円" !important;
}
.simu_base_price_item.static2:after{
  /*content: "※車両価格に対して";*/
  /*display: block;*/
}
.simu_base_price_item.percent .simu_base_price_item_value_p1:after{
  content: "%" !important;
}


@media (max-width:767px){
  
}
@media (min-width:768px){

  
  /* ABOUT */
  .simu_about{
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 50px;
  }
  .simu_head{
    font-size: 24px;
    padding: 12px 10px 16px;
    margin-bottom: 80px;
  }

  /* タブ */
  .simu_tabs{
    gap: 0 1px;
  }
  .simu_tabs_item{
    width: 100%;
    font-size: 21px;
    padding: 15px 10px 16px;
  }

  /* 通貨選択 */
  .simu_currency_head{
    font-size: 18px;
    padding: 15px 10px 16px;

  }
  .simu_currency_head2{
    font-size: 16px;
    padding: 11px 10px 13px;
    margin-bottom: 30px;
  }
  * + .simu_currency_head2{
    margin-top: 60px;
  }

  .simu_currency_select{
    gap: 0 25px;
  }
  .simu_currency_select_btn{
    font-size: 16px;
    border-radius: 24px;
    padding: 10px 10px;
  }
  .simu_currency_select_btn:before{
    width: 43px;
    margin-right: 15px;
  }
  

  /* 為替表示エリア */
  .simu_currency_view{
    margin-top: 28px;
  }
  .simu_currency_view_p1{
    font-size: 20px;
  }
  .simu_currency_view_p2{
    font-size: 18px;
  }
  .simu_currency_view_rate{
    width: 190px;
    height: 42px;
    margin: 0 15px;
  }

  .simu_body_price_msg{
    font-size: 15px;
    margin-top: 15px;
  }

  /* タブコンテンツ内容 */
  .simu_contents{
    padding: 30px 30px;
  }

  /* シミュレーションSTART */
  .simu_start{
    margin-top: 45px;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .simu_start_btn{
    width: 410px;
    border-radius: 24px;
    font-size: 18px;
    padding: 10px 10px 11px;
  }

  /* 詳細内訳 */
  .simu_calculate{
    padding: 5px;
  }
  .simu_calculate + .simu_calculate{
    margin-top: 80px;
  }
  .simu_calculate_head{
    font-size: 18px;
    padding: 9px 10px 10px;
    margin-bottom: 10px;
  }
  .simu_calculate_details{

  }
  .simu_calculate_details_price_area{
    margin-top: 35px;
  }
  .simu_calculate_details_item{
  }
  .simu_calculate_details_item + .simu_calculate_details_item{
    margin-top: 15px;
  }
  .simu_calculate_details_item_ttl{
    font-size: 18px;
    padding: 9px 10px 10px;
  }
  .simu_calculate_details_item_price{
    font-size: 24px;
    padding: 8px 10px 9px;
  }
  .simu_calculate_details_item_price_p1{
    font-size: 1em;
    letter-spacing: 0.05em;
  }
  .simu_calculate_details_item_price_p1:after{
    font-size: 0.666em;
  }
  
  /* 合計金額 */
  .simu_calculate.total{

  }
  .simu_calculate.total .simu_calculate_head{
  }
  .simu_calculate_details_item_price_p2{
    font-size: 1.5833em;
  }
  .simu_calculate_details_item_price_p2:after{
    font-size: 0.552em;
  }

  
}
@media (min-width:1024px){
  
}
@media (min-width:1200px){
  
}
@media (min-width:1366px){
  
  /* ABOUT */
  .simu_about{
    font-size: 20px;
    margin-bottom: 65px;
  }
  .simu_head{
    font-size: 24px;
    /*padding: 12px 10px 16px;*/
    margin-bottom: 80px;
  }

  /* タブ */
  .simu_tabs{
  }
  .simu_tabs_item{
    font-size: 21px;
    /*padding: 15px 10px 16px;*/
  }

  /* 通貨選択 */
  .simu_currency_head{
    font-size: 18px;
    /*padding: 15px 10px 16px;*/
  }
  .simu_currency_head2{
    font-size: 16px;
    /*padding: 10px 10px 11px;*/
    margin-bottom: 30px;
  }
  * + .simu_currency_head2{
    margin-top: 60px;
  }

  .simu_currency_select{
    gap: 0 25px;
  }
  .simu_currency_select_btn{
    font-size: 16px;
    border-radius: 24px;
    /*padding: 10px 10px;*/
  }
  .simu_currency_select_btn:before{
    width: 43px;
    margin-right: 15px;
  }
  

  /* 為替表示エリア */
  .simu_currency_view{
    margin-top: 28px;
  }
  .simu_currency_view_p1{
    font-size: 20px;
  }
  .simu_currency_view_p2{
    font-size: 18px;
  }
  .simu_currency_view_rate{
    width: 190px;
    height: 42px;
    margin: 0 15px;
  }
  .simu_currency_view_rate[name="body_price"]{
    width: 260px;
    height: 42px;
  }
  .simu_currency_view.body_price{
    margin-top: 50px;
  }

  .simu_body_price_msg{
    font-size: 15px;
    margin-top: 15px;
  }

  /* タブコンテンツ内容 */
  .simu_contents{
    padding: 30px 65px;
  }

  /* シミュレーションSTART */
  .simu_start{
    /*margin-top: 65px;*/
    /*padding-top: 50px;*/
    /*padding-bottom: 65px;*/
  }
  .simu_start_btn{
    width: 410px;
    border-radius: 24px;
    font-size: 18px;
    /*padding: 10px 10px 11px;*/
  }

  /* 詳細内訳 */
  .simu_calculate{
    padding: 5px;
  }
  .simu_calculate + .simu_calculate{
    margin-top: 80px;
  }
  .simu_calculate_head{
    font-size: 18px;
    /*padding: 9px 10px 10px;*/
    margin-bottom: 10px;
  }
  .simu_calculate_details{

  }
  .simu_calculate_details_item{
  }
  .simu_calculate_details_item + .simu_calculate_details_item{
    margin-top: 15px;
  }
  .simu_calculate_details_item_ttl{
    font-size: 18px;
    /*padding: 9px 10px 10px;*/
  }
  .simu_calculate_details_item_price{
    font-size: 24px;
    /*padding: 8px 10px 10px;*/
  }

  
}
@media (min-width:1470px){
  
}
@media (min-width:1536px){
  
}
@media (min-width:1720px){
  
}