/*
$width-pc_max: 770px;
$width-pc: 769px;
$width-sm1: 768px;
$width-sm2: 480px;
*/
/*mixin*/
.fl_img_z {
  line-height: 0px;
  font-size: 0px;
}

/*body{
	@include wi-pc_max2{
	overflow: hidden;
	min-width: 900px;
	}
	@include wi-pc_max1{
	overflow: auto;
	min-width: 90%;
	}
}*/
.col_white {
  color: #FFFFFF !important;
}
.col_white a {
  color: #FFFFFF !important;
  text-decoration: underline;
}

.col_blue {
  color: #0E234B !important;
}
.col_blue a {
  color: #0E234B !important;
  text-decoration: underline;
}

.Arrange {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

@media print, screen and (min-width: 769px) {
  .tp_sml {
    margin-top: 5px !important;
  }
}
@media only screen and (max-width: 768px) {
  .tp_sml {
    margin-top: 5px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .tp_mid {
    margin-top: 20px !important;
  }
}
@media only screen and (max-width: 768px) {
  .tp_mid {
    margin-top: 20px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .tp_und {
    margin-top: 45px !important;
  }
}
@media only screen and (max-width: 768px) {
  .tp_und {
    margin-top: 45px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pdbt_sm30 {
    padding-top: 0px !important;
  }
}
@media only screen and (max-width: 768px) {
  .pdbt_sm30 {
    padding-top: 30px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .sml {
    margin-bottom: 5px !important;
  }
}
@media only screen and (max-width: 768px) {
  .sml {
    margin-bottom: 5px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .mid {
    margin-bottom: 20px !important;
  }
}
@media only screen and (max-width: 768px) {
  .mid {
    margin-bottom: 20px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .und {
    margin-bottom: 45px !important;
  }
}
@media only screen and (max-width: 768px) {
  .und {
    margin-bottom: 45px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .sml_pc {
    margin-bottom: 5px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .sml_pc {
    margin-bottom: 0px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .mid_pc {
    margin-bottom: 20px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .mid_pc {
    margin-bottom: 0px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .und_pc {
    margin-bottom: 45px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .und_pc {
    margin-bottom: 0px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .sml_sm {
    margin-bottom: 0px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .sml_sm {
    margin-bottom: 5px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .mid_sm {
    margin-bottom: 0px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .mid_sm {
    margin-bottom: 20px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .und_sm {
    margin-bottom: 0px !important;
  }
}
@media only screen and (max-width: 1280px) {
  .und_sm {
    margin-bottom: 45px !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .pc_sl {
    display: block !important;
  }
}
@media only screen and (max-width: 1280px) {
  .pc_sl {
    display: none !important;
  }
}

@media print, screen and (min-width: 1281px) {
  .phone_sl {
    display: none !important;
  }
}
@media only screen and (max-width: 1280px) {
  .phone_sl {
    display: block !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pc {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

@media print, screen and (min-width: 769px) {
  .phone {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .phone {
    display: block;
  }
}

@media print, screen and (min-width: 1281px) {
  .pc01 {
    display: block;
  }
}
@media only screen and (max-width: 1280px) {
  .pc01 {
    display: none;
  }
}

@media print, screen and (min-width: 1281px) {
  .phone01 {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .phone01 {
    display: block;
  }
}

.text_50 {
  display: block;
  height: auto;
}
@media print, screen and (min-width: 769px) {
  .text_50 {
    float: left;
    width: 48% !important;
    padding: 0% 2% 0% 0%;
  }
}
@media only screen and (max-width: 768px) {
  .text_50 {
    float: none;
    width: 100%;
    padding: 0%;
  }
}

@media print, screen and (min-width: 769px) {
  .pos_rea_pt01 {
    display: block;
    position: relative;
    padding-bottom: 92px;
  }
}

.disnon {
  display: none;
}

.bg01 {
  background-color: #000000;
}

.bg02 {
  background-color: #FFFFFF;
}

.bg03 {
  background-color: #c90028;
}

@media print, screen and (min-width: 769px) {
  .pdtpbt_pc_30_sm_20 {
    padding: 30px 0px !important;
  }
}
@media only screen and (max-width: 768px) {
  .pdtpbt_pc_30_sm_20 {
    padding: 20px 0px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pdtpbt_pc_80_sm_48 {
    padding: 80px 0px !important;
  }
}
@media only screen and (max-width: 768px) {
  .pdtpbt_pc_80_sm_48 {
    padding: 48px 0px !important;
  }
}

@media print, screen and (min-width: 769px) {
  .pdtpbt_pc_80_160_sm_48_64 {
    padding: 80px 0px 160px !important;
  }
}
@media only screen and (max-width: 768px) {
  .pdtpbt_pc_80_160_sm_48_64 {
    padding: 48px 0px 64px !important;
  }
}

.tab1 .tab-dt01 .off {
  display: block;
}

.tab1 .tab-dt01 .on {
  display: none;
}

.tab1 .tab-dt01.select01 .off {
  display: none;
}

.tab1 .tab-dt01.select01 .on {
  display: block;
}

.tab1 .tab-dt02 .off {
  display: block;
}

.tab1 .tab-dt02 .on {
  display: none;
}

.tab1 .tab-dt02.select01 .off {
  display: none;
}

.tab1 .tab-dt02.select01 .on {
  display: block;
}

.tab1 .tab-dt03 .off {
  display: block;
}

.tab1 .tab-dt03 .on {
  display: none;
}

.tab1 .tab-dt03.select01 .off {
  display: none;
}

.tab1 .tab-dt03.select01 .on {
  display: block;
}

.left-24 {
  float: left;
  width: 24%;
}

.right-76 {
  float: right;
  width: 76%;
}

.win_site_link {
  position: relative;
  z-index: 1;
  margin: 0px auto;
}
@media print, screen and (min-width: 769px) {
  .win_site_link {
    width: 98%;
  }
}
@media only screen and (max-width: 768px) {
  .win_site_link {
    width: 80%;
  }
}
.win_site_link img {
  width: 100%;
  height: auto;
}

.img-data01 {
  position: relative;
  z-index: 1;
}

.ad_bt_img {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  font-size: 0px;
  z-index: 0;
}
.ad_bt_img img {
  width: 100%;
  height: auto;
}

.ad_tp_img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  font-size: 0px;
  z-index: 0;
}
.ad_tp_img img {
  width: 100%;
  height: auto;
}

.img-data01 {
  width: 100%;
  line-height: 0px;
  font-size: 0px;
  margin: 0px auto;
}
.img-data01 img {
  width: 100%;
  height: auto;
}

.cp01_area01 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #EC5C4E;
}

.cp01_area02 {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url("../images/cp_img/cp01_img_bg.png");
  background-repeat: repeat;
  background-size: contain;
}

.cp01_area03 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #103059;
}

.cp01_disc_area {
  margin: 0 auto;
  background-color: #FFFFFF;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 769px) {
  .cp01_disc_area {
    width: 98%;
    border-radius: 25px;
    border: solid 4px #0E234B;
    padding: 25px 2%;
  }
}
@media only screen and (max-width: 768px) {
  .cp01_disc_area {
    width: 100%;
    border-radius: 22px;
    border: solid 3px #0E234B;
    padding: 22px 1%;
  }
}

.cp01_disc_ti {
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
@media print, screen and (min-width: 769px) {
  .cp01_disc_ti {
    width: 410px;
    margin: -56px auto 0;
  }
}
@media only screen and (max-width: 768px) {
  .cp01_disc_ti {
    width: 73%;
    margin: -46px auto 0;
  }
}
.cp01_disc_ti img {
  width: 100%;
  height: auto;
}

.cp02_area01 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #29ABE2;
}

.cp02_area02 {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url("../images/cp_img/cp02_img_bg01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.cp02_area03 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #000000;
}

.cp02_disc_area {
  margin: 0 auto;
  background-color: #FFFFFF;
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 769px) {
  .cp02_disc_area {
    width: 98%;
    border-radius: 25px;
    padding: 25px 2%;
  }
}
@media only screen and (max-width: 768px) {
  .cp02_disc_area {
    width: 100%;
    border-radius: 22px;
    padding: 22px 1%;
  }
}

.cp03_area01 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #7AC943;
}

.cp03_area02 {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url("../images/cp_img/cp03_img_bg01.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.cp03_area03 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #F5EF72;
}

.cp03_ad01 {
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: 42%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.cp03_ad01 img {
  width: 100%;
  height: auto;
}

.cp03_ad02 {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 42%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.cp03_ad02 img {
  width: 100%;
  height: auto;
}

.cp03_ad03 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 4%;
  width: 84%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.cp03_ad03 img {
  width: 100%;
  height: auto;
}

.cp03_ad04 {
  position: absolute;
  left: 6%;
  bottom: 2%;
  width: 42%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.cp03_ad04 img {
  width: 100%;
  height: auto;
}

.cp03_ad05 {
  position: absolute;
  right: 6%;
  bottom: 2%;
  width: 42%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.cp03_ad05 img {
  width: 100%;
  height: auto;
}

.link_2btn_area {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  margin: 0px auto;
}
@media print, screen and (min-width: 769px) {
  .link_2btn_area {
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  .link_2btn_area {
    width: 98%;
  }
}
.link_2btn_area .link_2btn {
  display: block;
  width: 48%;
  height: auto;
  line-height: 0px;
  font-size: 0px;
}
.link_2btn_area .link_2btn img {
  width: 100%;
  height: auto;
}

.ct_com01 {
  text-align: center;
  font-weight: 600;
}
@media print, screen and (min-width: 769px) {
  .ct_com01 p {
    font-size: 34px;
  }
}
@media only screen and (max-width: 768px) {
  .ct_com01 p {
    font-size: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .ct_com01 a {
    font-size: 34px;
  }
}
@media only screen and (max-width: 768px) {
  .ct_com01 a {
    font-size: 20px;
  }
}

.ct_com02 {
  text-align: center;
  font-weight: 600;
}
@media print, screen and (min-width: 769px) {
  .ct_com02 p {
    font-size: 31px;
  }
}
@media only screen and (max-width: 768px) {
  .ct_com02 p {
    font-size: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .ct_com02 a {
    font-size: 28px;
  }
}
@media only screen and (max-width: 768px) {
  .ct_com02 a {
    font-size: 20px;
  }
}

.crlp_ti_area {
  background-color: #D80C18;
}
.crlp_ti_area .crlp_ti_in {
  margin: 0 auto;
  line-height: 0px;
  font-size: 0px;
}
@media print, screen and (min-width: 769px) {
  .crlp_ti_area .crlp_ti_in {
    width: 420px;
  }
}
@media only screen and (max-width: 768px) {
  .crlp_ti_area .crlp_ti_in {
    width: 72%;
  }
}
.crlp_ti_area .crlp_ti_in img {
  width: 100%;
  height: auto;
}

.car_info_bg {
  position: relative;
  width: 100%;
  height: auto;
}
.car_info_bg img {
  width: 100%;
  height: auto;
}
.car_info_bg .car_info_in {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media print, screen and (min-width: 1281px) {
  .car_info_bg .car_info_in {
    width: 1000px;
  }
}
@media only screen and (max-width: 1280px) {
  .car_info_bg .car_info_in {
    width: 98%;
  }
}
.car_info_bg .car_info_in .car_info_in_area {
  position: relative;
  width: 100%;
  height: 100%;
}
.car_info_bg .car_info_in .car_info_in_area .car_info_img01 {
  position: absolute;
  z-index: 2;
  font-size: 0px;
  line-height: 0px;
  height: auto;
  top: 0;
}
@media print, screen and (min-width: 1281px) {
  .car_info_bg .car_info_in .car_info_in_area .car_info_img01 {
    width: 100%;
    left: 0;
  }
}
@media only screen and (max-width: 1280px) {
  .car_info_bg .car_info_in .car_info_in_area .car_info_img01 {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
.car_info_bg .car_info_in .car_info_in_area .car_info_img01 img {
  width: 100%;
  height: auto;
}
.car_info_bg .car_info_in .car_info_in_area .car_info_img02 {
  position: absolute;
  z-index: 2;
  font-size: 0px;
  line-height: 0px;
  width: 100%;
  height: auto;
  left: 0;
}
@media print, screen and (min-width: 1281px) {
  .car_info_bg .car_info_in .car_info_in_area .car_info_img02 {
    bottom: 34px;
  }
}
@media only screen and (max-width: 1280px) {
  .car_info_bg .car_info_in .car_info_in_area .car_info_img02 {
    bottom: 8px;
  }
}
.car_info_bg .car_info_in .car_info_in_area .car_info_img02 img {
  width: 100%;
  height: auto;
}

.car_lp_bg00 {
  background-color: #8c6239;
}

.car_lp_bg01 {
  background-color: #FFFFFF;
}

.car_lp_bg02 {
  background-color: #c90028;
  background: #c90028 !important;
}

.car_lp_area {
  width: 100%;
  background-image: url("../images/xtrail_img/sec_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
}
@media print, screen and (min-width: 769px) {
  .car_lp_area {
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 768px) {
  .car_lp_area {
    margin-bottom: 0px;
  }
}
.car_lp_area .car_lp_main {
  width: 100%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
}
.car_lp_area .car_lp_in {
  margin: 0px auto;
}
@media print, screen and (min-width: 1281px) {
  .car_lp_area .car_lp_in {
    max-width: 1200px;
    min-width: 1000px;
    /*width: 1000px;*/
  }
}
@media only screen and (max-width: 1280px) {
  .car_lp_area .car_lp_in {
    width: 98%;
  }
}
.car_lp_area .car_lp_in .car_lp_data {
  width: 100%;
  height: auto;
}
@media print, screen and (min-width: 1281px) {
  .car_lp_area .car_lp_in .car_lp_data {
    margin-top: 0px;
  }
}
@media only screen and (max-width: 1280px) {
  .car_lp_area .car_lp_in .car_lp_data {
    margin-top: 0px;
  }
}
.car_lp_area .car_lp_btn {
  height: auto;
}
@media print, screen and (min-width: 1281px) {
  .car_lp_area .car_lp_btn {
    width: 960px;
    margin: 20px auto 32px;
  }
}
@media only screen and (max-width: 1280px) {
  .car_lp_area .car_lp_btn {
    width: 92%;
    margin: 14px auto 25px;
  }
}
.car_lp_area img {
  width: 100%;
  height: auto;
}

.crlp_info_area {
  width: 100%;
  background-image: url("../images/crlp_img/crlp_img_bg01.png");
  background-size: cover;
  background-repeat: no-repeat;
}
@media print, screen and (min-width: 1281px) {
  .crlp_info_area {
    padding-bottom: 45px;
  }
}
@media only screen and (max-width: 1280px) {
  .crlp_info_area {
    padding-bottom: 32px;
  }
}
.crlp_info_area .crlp_info01 {
  height: auto;
  line-height: 0px;
  font-size: 0px;
}
@media print, screen and (min-width: 1281px) {
  .crlp_info_area .crlp_info01 {
    width: 980px;
    margin: 0 auto 28px;
  }
}
@media only screen and (max-width: 1280px) {
  .crlp_info_area .crlp_info01 {
    width: 98%;
    margin: 0px auto 16px;
  }
}
.crlp_info_area .crlp_info01 img {
  width: 100%;
  height: auto;
}
.crlp_info_area .crlp_info02 {
  height: auto;
}
@media print, screen and (min-width: 1281px) {
  .crlp_info_area .crlp_info02 {
    width: 980px;
    margin: 0 auto 28px;
  }
}
@media only screen and (max-width: 1280px) {
  .crlp_info_area .crlp_info02 {
    width: 92%;
    margin: 0px auto 16px;
  }
}
.crlp_info_area .crlp_info02 p {
  text-align: justify;
}
@media print, screen and (min-width: 769px) {
  .crlp_info_area .crlp_info02 p {
    font-size: 14px;
    line-height: 1.6;
  }
}
@media only screen and (max-width: 768px) {
  .crlp_info_area .crlp_info02 p {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media print, screen and (min-width: 1281px) {
  .nav_toggle_btn {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .nav_toggle_btn {
    display: block;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 500;
    background-color: #c30a2f;
  }
}
@media print, screen and (min-width: 1281px) {
  .nav_toggle_btn .nav_toggle {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .nav_toggle_btn .nav_toggle {
    display: block;
    position: relative;
    /*float: right;
    width: 1.75rem;
    height: 1.5rem;
    margin: 8px 4px 0 0;*/
    width: 60px;
    height: 60px;
  }
  .nav_toggle_btn .nav_toggle i {
    display: block;
    width: 45px;
    height: 3px;
    background-color: #FFFFFF;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transition: transform .5s, opacity .5s;
  }
  .nav_toggle_btn .nav_toggle i:nth-child(1) {
    /*top: 0;*/
    top: 20%;
  }
  .nav_toggle_btn .nav_toggle i:nth-child(2) {
    /*top: 0;
    bottom: 0;*/
    top: 48%;
    /*transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    margin: auto;*/
  }
  .nav_toggle_btn .nav_toggle i:nth-child(3) {
    /*bottom: 0;*/
    bottom: 20%;
  }
  .nav_toggle_btn .nav_toggle.show i:nth-child(1) {
    transform: translateX(-50%) translateY(17px) rotate(-40deg);
  }
  .nav_toggle_btn .nav_toggle.show i:nth-child(2) {
    opacity: 0;
  }
  .nav_toggle_btn .nav_toggle.show i:nth-child(3) {
    transform: translateX(-50%) translateY(-16px) rotate(40deg);
  }
}

@media print, screen and (min-width: 769px) {
  .pagetop {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 501;
  }
}
@media only screen and (max-width: 768px) {
  .pagetop {
    opacity: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .pagetop a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #D80C18;
    text-align: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    line-height: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .pagetop a {
    opacity: 0;
  }
}

#hd_ri_r {
  padding-top: 0;
  position: fixed;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.4s;
  box-sizing: border-box;
  opacity: 1;
  width: 100%;
  height: auto;
  bottom: 0;
  z-index: 500;
  /*@include wi-pc_max2{
  opacity: 1;
  width: 100%;
  height: auto;
  padding: 20px;
  bottom: 0;
  z-index: 500;
  }
  @include wi-pc_max1{
  width: calc(100% - 60px);
  height: auto;
  padding: 10px;
  opacity: 0;	
  position: fixed;
  left: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
  &.show {
  	opacity: 1;
  	visibility: visible;
  	float: none;
  	width: calc(100% - 60px);
  	z-index: 100;
  }
  &:target {
  	top: 0px;
  	left: 0px;
  }
  }*/
}
@media print, screen and (min-width: 1281px) {
  #hd_ri_r {
    padding: 20px;
  }
}
@media only screen and (max-width: 1280px) {
  #hd_ri_r {
    padding: 5px;
  }
}
#hd_ri_r .ni_link_bgm {
  margin: 0px auto;
  /*@include wi-pc2{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  }
  @include wi-sm2{
  }
  @include wi-pc_max2{
  width: 800px;
  }
  @include wi-pc_max1{
  
  overflow: auto!important;	
  
  width: 98%;
  }*/
}
@media print, screen and (min-width: 769px) {
  #hd_ri_r .ni_link_bgm {
    width: 800px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 768px) {
  #hd_ri_r .ni_link_bgm {
    width: 98%;
  }
}
#hd_ri_r .ni_link_bgm .link_2area {
  display: block;
  height: auto;
  line-height: 0px;
  font-size: 0px;
}
@media print, screen and (min-width: 769px) {
  #hd_ri_r .ni_link_bgm .link_2area {
    width: 48%;
  }
}
@media only screen and (max-width: 768px) {
  #hd_ri_r .ni_link_bgm .link_2area {
    width: 100%;
    margin-bottom: 8px;
  }
}
#hd_ri_r .ni_link_bgm .link_2area img {
  width: 100%;
  height: auto;
}
#hd_ri_r .ni_link_bgm .link_2area .li_btn01 {
  float: none;
  width: 100%;
  font-size: 0px;
  line-height: 0px;
}
@media print, screen and (min-width: 1281px) {
  #hd_ri_r .ni_link_bgm .link_2area .li_btn01 {
    margin-bottom: 6px;
  }
}
@media only screen and (max-width: 1280px) {
  #hd_ri_r .ni_link_bgm .link_2area .li_btn01 {
    margin-bottom: 4px;
  }
}
#hd_ri_r .ni_link_bgm .link_2area .li_btn02 {
  float: left;
  width: 48%;
  font-size: 0px;
  line-height: 0px;
}
#hd_ri_r .ni_link_bgm .link_2area .li_btn03 {
  float: right;
  width: 48%;
  font-size: 0px;
  line-height: 0px;
}

#main_img {
  width: 100%;
  height: auto;
  font-size: 0px;
  line-height: 0px;
  margin: 0px auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media print, screen and (min-width: 1281px) {
  #main_img {
    background-image: url("../images/xtrail_img/mv-bg.jpg");
  }
}
@media only screen and (max-width: 1280px) {
  #main_img {
    background-image: url("../images/xtrail_img/mv-bg_sp.jpg");
  }
}
#main_img #main_img_in {
  height: auto;
  font-size: 0px;
  line-height: 0px;
  margin: 0px auto;
  position: relative;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in {
    max-width: 1200px;
    min-width: 1000px;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in {
    width: 100%;
  }
}
#main_img #main_img_in .mv_sec01_sub {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 0;
  opacity: 0;
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec01_sub {
    width: 12%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec01_sub {
    width: 28.4444%;
  }
}
#main_img #main_img_in .mv_sec02_sub {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 0;
  opacity: 0;
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec02_sub {
    width: 12.4444%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec02_sub {
    width: 28.4444%;
  }
}
#main_img #main_img_in .mv_sec01 {
  position: absolute;
  z-index: 30;
  opacity: 0;
  -webkit-animation: example 0.5s ease 1.8s 1 forwards;
  animation: example 0.5s ease 1.8s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec01 {
    width: 92%;
    top: 0%;
    right: 4%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec01 {
    width: 98%;
    top: 0%;
    right: 1%;
  }
}
#main_img #main_img_in .mv_sec02 {
  position: absolute;
  z-index: 20;
  opacity: 0;
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec02 {
    width: 22%;
    bottom: 8%;
    left: 18%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec02 {
    width: 32%;
    bottom: 18%;
    left: 1.8%;
  }
}
#main_img #main_img_in .mv_sec03 {
  position: absolute;
  z-index: 20;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  opacity: 0;
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec03 {
    width: 22%;
    bottom: 8%;
    left: 50%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec03 {
    width: 32%;
    bottom: 18%;
    left: 50%;
  }
}
#main_img #main_img_in .mv_sec04 {
  position: absolute;
  z-index: 20;
  opacity: 0;
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec04 {
    width: 22%;
    bottom: 8%;
    right: 18%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec04 {
    width: 32%;
    bottom: 18%;
    right: 1.8%;
  }
}
#main_img #main_img_in .mv_sec05 {
  position: absolute;
  z-index: 30;
  /*left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);*/
  opacity: 0;
  -webkit-animation: fadein01 0.5s ease 1.8s 1 forwards;
  animation: fadein01 0.5s ease 1.8s 1 forwards;
}
@media print, screen and (min-width: 1281px) {
  #main_img #main_img_in .mv_sec05 {
    width: 22%;
    bottom: 8%;
    left: 10%;
  }
}
@media only screen and (max-width: 1280px) {
  #main_img #main_img_in .mv_sec05 {
    width: 52%;
    bottom: 8%;
    left: 24%;
  }
}
#main_img img {
  width: 100%;
  height: auto;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes fadein01 {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    /*transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);*/
    transform: translateY(20px);
  }
}
.fadeIn {
  animation-name: fadeInAnime;
  animation-fill-mode: backwards;
  animation-duration: 0.2s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
  animation-direction: normal;
}

@keyframes fadeInAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.change-time01 {
  animation-duration: 0.2s;
}

.change-time02 {
  animation-duration: 2.2s;
}

.change-time03 {
  animation-duration: 8.8s;
}

.change-time04 {
  animation-duration: 3.8s;
}

.change-time05 {
  animation-duration: 1.0s;
}

/**/
/*@media only screen and (min-width: 769px) {
	#main_img{
		width: 100%;
		height: auto;
		font-size: 0px;
		line-height: 0px;
		margin: 0px auto;
	}
	#main_img_in{
		width: 100%;
		height: auto;
		font-size: 0px;
		line-height: 0px;
		margin: 0px auto;
	}
	#main_img img{
		width: 100%;
		height: auto;
	}
	#main_img_in img{
		width: 100%;
		height: auto;
	}
	
}
@media only screen and (max-width: 768px) {
	#main_img{
		width: 100%;
		height: auto;
		font-size: 0px;
		line-height: 0px;
		margin: 0px auto;
	}
	#main_img_in{
		width: 100%;
		height: auto;
		font-size: 0px;
		line-height: 0px;
		margin: 0px auto;
	}
	#main_img img{
		width: 100%;
		height: auto;
	}
	#main_img_in img{
		width: 100%;
		height: auto;
	}
}*/
/*#switch{
	display: none;
}
#switch ~ label {
	padding: 12px 12px;
	width: 60px;
	height: 60px;
	position: fixed;
	box-sizing: border-box;
	z-index: 500;
	background-color: #c30a2f;
	@include wi-pc{
	bottom: 0;
	right: 0;
	}
	@include wi-sm1{
	bottom: 0;
	right: 0;
	}
	@include wi-pc{
	display: none;
	}
	@include wi-sm1{
	display: block;
	}
}
#switch ~ label span{
	display: block;
	width:22px;
	height:2px;
	top: 50%;
	left: 0;
	right: 0;
	margin:auto;
	background: #fff;
	position: absolute;
	-webkit-transition: 0.2s transform;
	transition: 0.2s transform;
}
#switch ~ label span:before,
#switch ~ label span:after{
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  width:22px;
  height:2px;
  left: 0;
  right: 0;
  margin: auto;
}
#switch ~ label span:before{
  top: -9px;
}
#switch ~ label span:after{
  top: 9px;
}
#switch:checked ~ label span{
  -webkit-transform:rotate(-45deg) ;
  transform:rotate(-45deg) ;
}
#switch:checked ~ label span:before{
  top:0;
}
#switch:checked ~ label span:after{
  -webkit-transform:rotate(270deg);
  transform:rotate(270deg);
  top:0;
  margin-top:0;
}
#switch:checked ~ #NavWrap { 
	display: block; 
	bottom: 0;
	z-index: 500;
}
#NavWrap{
	padding-top: 0;
	position: fixed;
	left: 0;
	background: rgba(256,256,256,0.8);
	transition: all 0.4s;
	box-sizing: border-box;
	@include wi-pc{
	display: block!important;
	width: 100%;
	height: auto;
	padding: 20px;
	bottom: 0;
	z-index: 500;
	}
	@include wi-sm1{
	width: calc(100% - 60px);
	height: auto;
	padding: 10px;
	bottom: -100%;
	}
	.ni_link_bgm{
		margin: 0px auto;
		@include wi-pc{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		}
		@include wi-sm1{
		}
		@include wi-pc_max2{
		width: 800px;
		}
		@include wi-pc_max1{
		width: 98%;
		}
		.link_2area{
			display: block;
			height: auto;
			line-height: 0px;
			font-size: 0px;
			@include wi-pc{
			width: 48%;
			}
			@include wi-sm1{
			width: 100%;
			margin-bottom: 18px;
			}
			img{
				width: 100%;
				height: auto;
			}
			.li_btn01{
				float: none;
				width: 100%;
				font-size: 0px;
				line-height: 0px;
				margin-bottom: 6px;
			}
			.li_btn02{
				float: left;
				width: 48%;
				font-size: 0px;
				line-height: 0px;
			}
			.li_btn03{
				float: right;
				width: 48%;
				font-size: 0px;
				line-height: 0px;
			}
		}
	}
}*/
/*.scroll-prevent {
	@include wi-pc{
	}
	@include wi-sm1{
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	}
}
body {
  overflow-y: scroll!important;
}*/
/*li{
  text-align: center;
}
li a{
  display: block;
  color: #fff;
  padding: 30px 0;
  text-decoration: none;
}*/
.ti-area {
  width: 100%;
  height: auto;
  background-image: url("../images/xtrail_img/ti_bg.jpg");
  background-repeat: repeat-x;
  background-size: cover;
}
.ti-area .ti-in {
  line-height: 0px;
  line-height: 0px;
  margin: 0px auto;
}
@media print, screen and (min-width: 1281px) {
  .ti-area .ti-in {
    width: 850px;
  }
}
@media only screen and (max-width: 1280px) {
  .ti-area .ti-in {
    width: 96%;
  }
}
.ti-area .ti-in img {
  width: 100%;
  height: auto;
}

.sec03-btn {
  font-size: 0px;
  line-height: 0px;
}
@media print, screen and (min-width: 1281px) {
  .sec03-btn {
    width: 850px;
    margin: 35px auto;
  }
}
@media only screen and (max-width: 1280px) {
  .sec03-btn {
    width: 86%;
    margin: 22px auto;
  }
}
.sec03-btn img {
  width: 100%;
  height: auto;
}