@charset "utf-8";
/* font Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/**/
header {
  position: relative;
}
.header.fixed {
  position: relative;
}
@media screen and (max-width: 750.99px) {
  #mainContents {
    margin-top: 50px;
  }
}
#mainWrap h1, #mainWrap h2, #mainWrap h2 span, #mainWrap h3, #mainWrap h3 span, #mainWrap h4, #mainWrap h4 span, #mainWrap p, #mainWrap dt, #mainWrap dd {
  color: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0;
  margin: 0;
  border: 0;
}
#mainWrap h2 {
  color: #000;
  font-size: 60px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-align: center;
}
#mainWrap h2 span.colorY {
  color: #d3cd48;
}
#mainWrap h2 span.colorW {
  color: #fff;
}
#mainWrap h2 span.jp {
  font-size: 12px;
  font-weight: 400;
  display: block;
  padding-top: 20px;
}
#mainWrap h3 {
  font-size: 18px;
  font-weight: 800;
  padding-top: 30px;
}
#mainWrap h4 {
  font-size: 14px;
  font-weight: 600;
  padding-top: 20px;
}
@media screen and (min-width: 751px) {
  #mainWrap h2 {
    font-size: min(80 / 1600 * 100vw, 80px);
  }
  #mainWrap h2 span.jp {
    font-size: min(20 / 1600 * 100vw, 20px);
    padding-top: min(20 / 1600 * 100vw, 20px);
  }
  #mainWrap h3 {
    font-size: min(28 / 1600 * 100vw, 28px);
    padding-top: min(40 / 1600 * 100vw, 40px);
  }
  #mainWrap h4 {
    font-size: min(20 / 1600 * 100vw, 20px);
    padding-top: min(30 / 1600 * 100vw, 30px);
  }
}
#mainWrap p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  padding-top: 15px;
}
#mainWrap li {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
}
#mainWrap p.caption {
  font-size: 11px;
}
@media screen and (max-width: 750.99px) {
  #mainWrap p.notes,
  #mainWrap ul.notes li {
    font-size: 11px !important;
  }
}
@media screen and (min-width: 751px) {
  #mainWrap p {
    font-size: min(16 / 1600 * 100vw, 16px);
    padding-top: min(20 / 1600 * 100vw, 20px);
  }
  #mainWrap p.caption {
    font-size: min(14 / 1600 * 100vw, 14px);
    line-height: 1;
  }
  #mainWrap li {
    font-size: min(14 / 1600 * 100vw, 14px);
    padding-top: 0;
  }
  #mainWrap p.notes,
  #mainWrap ul.notes li {
    font-size: min(12 / 1600 * 100vw, 12px) !important;
  }
  #mainWrap input {
    font-size: min(16 / 1600 * 100vw, 16px);
  }
}
.contentsWrap img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}
#mainWrap .contents {
  margin: 0 auto;
}
#mainWrap a {
  color: #000;
}
#mainWrap .alignCenter {
  text-align: center;
}
#mainWrap .alignRight {
  text-align: right;
}
@media screen and (max-width: 750.99px) {
  #mainWrap .contents {
    width: calc(345 / 375 * 100vw);
  }
  #mainWrap .flexWrap_sp {
    display: flex;
  }
  #mainWrap .sp {
    display: block;
  }
  #mainWrap .pc {
    display: none;
  }
  #mainWrap .paddingT0_sp {
    padding-top: 0 !important;
  }
}
@media screen and (min-width: 751px) {
  #mainWrap .contents {
    width: min(1258 / 1600 * 100vw, 1258px);
  }
  #mainWrap .flexWrap {
    display: flex;
  }
  #mainWrap .sp {
    display: none;
  }
  #mainWrap .pc {
    display: block;
  }
  #mainWrap .paddingT0 {
    padding-top: 0 !important;
  }
}
/*




*/
.parentWrapBlack, .parentWrapWhite, .parentWrapYellow {
  position: relative;
  z-index: 1;
}
.mountain_b, .mountain_w, .mountain_y {
  line-height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0 auto;
}
@media screen and (max-width: 750.99px) {
  .mountain_b, .mountain_w, .mountain_y {
    width: 80%;
  }
}
@media screen and (min-width: 751px) {
  .mountain_b, .mountain_w, .mountain_y {
    width: 50vw;
  }
}
#mainWrap .parentWrapBlack {
  background-color: #000;
}
#mainWrap .parentWrapBlack h2 {
  color: #fff;
}
#mainWrap .parentWrapYellow {
  background-color: #d6cf36;
}
/*

areaMovie

*/
#areaMovie {
  padding-bottom: 45px;
}
#areaMovie p {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  padding-top: 60px;
}
/*#areaMovie .mp4Wrap {
  position: relative;
  width: 100%;
  margin-top: 30px;
}
#areaMovie .mp4Wrap video {
  z-index: 1;
  width: 100%;
  height: 100%;
}*/
#areaMovie .boxYoutube {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin-top: 30px;
  padding-bottom: 56.25%;
}
  #areaMovie .boxYoutube iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#areaMovie .poster {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  cursor: pointer;
}
@media screen and (max-width: 750.99px) {}
@media screen and (min-width: 751px) {
  #areaMovie {
    padding-bottom: min(80 / 1600 * 100vw, 80px);
  }
  #areaMovie p {
    font-size: min(18 / 1600 * 100vw, 18px);
    text-align: center;
    padding-top: min(100 / 1600 * 100vw, 100px);
  }
/*  #areaMovie .mp4Wrap {
    width: min(896 / 1600 * 100vw, 896px);
    margin-top: min(60 / 1600 * 100vw, 60px);
    margin-left: auto;
    margin-right: auto;
  }*/
  #areaMovie .youtubeWrap {
    width: min(896 / 1600 * 100vw, 896px);
    margin-top: min(60 / 1600 * 100vw, 60px);
    margin-left: auto;
    margin-right: auto;
  }
}
/*

areaTalkshow

*/
#areaTalkshow {
  padding: 45px 0;
}
#areaTalkshow p.areaLead {
  padding-top: 45px;
}
#areaTalkshow .flexWrap {
  margin-top: 30px;
}
@media screen and (max-width: 750.99px) {
  #areaTalkshow p.areaLead {
    font-size: 14px;
  }
  #areaTalkshow .flexWrap > div {
    margin-top: 30px;
  }
}
@media screen and (min-width: 751px) {
  #areaTalkshow {
    padding: min(80 / 1600 * 100vw, 80px) 0;
  }
  #areaTalkshow p.areaLead {
    text-align: center;
    padding-top: min(60 / 1600 * 100vw, 60px);
  }
  #areaTalkshow .flexWrap {
    margin-top: min(45 / 1600 * 100vw, 45px);
    column-gap: min(24 / 1600 * 100vw, 24px);
  }
  #areaTalkshow .swiper {
    width: min(616 / 1600 * 100vw, 616px);
  }
}
/*

areaVenue

*/
#areaVenue {
  padding: 45px 0;
}
#areaVenue p.areaLead {
  padding-top: 45px;
}
#areaVenue .flexWrap {
  flex-wrap: wrap;
  column-gap: calc(15 / 375 * 100vw);
  row-gap: 21px;
  margin-top: 30px;
}
#areaVenue .flexWrap > div {
  width: calc(165 / 375 * 100vw);
}
@media screen and (max-width: 750.99px) {
  #areaVenue p.areaLead {
    font-size: 14px;
  }
}
@media screen and (min-width: 751px) {
  #areaVenue {
    padding: min(80 / 1600 * 100vw, 80px) 0;
  }
  #areaVenue p.areaLead {
    text-align: center;
    padding-top: min(60 / 1600 * 100vw, 60px);
  }
  #areaVenue .flexWrap {
    column-gap: min(25 / 1600 * 100vw, 25px);
    row-gap: min(40 / 1600 * 100vw, 40px);
    margin-top: min(45 / 1600 * 100vw, 45px);
  }
  #areaVenue .flexWrap > div {
    width: min(402 / 1600 * 100vw, 402px);
  }
}
/*

areaGallery

*/
#areaGallery {
  padding: 45px 0;
}
#areaGallery h3 {
  color: #fff;
  padding-top: 0;
}
#areaGallery .flexWrap {
  flex-wrap: wrap;
  column-gap: calc(14 / 375 * 100vw);
  row-gap: 21px;
  margin-top: 30px;
}
#areaGallery .flexWrap > div {
  width: calc(105 / 375 * 100vw);
}
@media screen and (min-width: 751px) {
  #areaGallery {
    padding: min(80 / 1600 * 100vw, 80px) 0;
  }
  #areaGallery .flexWrap {
    column-gap: min(26 / 1600 * 100vw, 26px);
    row-gap: min(30 / 1600 * 100vw, 30px);
    margin-top: min(45 / 1600 * 100vw, 45px);
  }
  #areaGallery .flexWrap > div {
    width: min(295 / 1600 * 100vw, 295px);
  }
}
@media (hover: hover) {
  #areaGallery .modal-link-item {
    opacity: 1;
    transition: 0.3s;
  }
  #areaGallery .modal-link-item:hover {
    opacity: 0.5;
  }
}
/*

areaInsta

*/
#areaInsta {
  background-image: url("/car/jimny/special/jimny_day/img/insta_bg.jpg");
  background-repeat: repeat-y;
  background-position: center top;
}
#areaInsta a {
  display: block;
  background-color: #fff;
  margin: 0 auto;
}
@media screen and (max-width: 750.99px) {
  #areaInsta {
    background-size: 100%;
    padding: 45px 0;
  }
  #areaInsta a {
    width: calc(300 / 375 * 100vw);
    padding: 30px 27px;
  }
  #instaqr {
    width: 180px;
    margin: 30px auto 0;
  }
}
@media screen and (min-width: 751px) {
  #areaInsta {
    background-size: 100%;
    padding: min(40 / 1600 * 100vw, 40px) 0;
  }
  #areaInsta a {
    width: min(800 / 1600 * 100vw, 800px);
    justify-content: space-between;
    padding: min(40 / 1600 * 100vw, 40px) min(108 / 1600 * 100vw, 108px);
  }
  #followme {
    width: min(347 / 1600 * 100vw, 347px);
  }
  #instaqr {
    width: min(178 / 1600 * 100vw, 178px);
    margin-top: min(26 / 1600 * 100vw, 26px);
  }
}
@media (hover: hover) {
  #areaInsta a {
    transition: 0.2s;
  }
  #areaInsta a:hover {
    opacity: 0.7;
  }
}
/*







*/
/* ------------------------------
loading
------------------------------ */
#loading {
  width: 100%;
  height: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: center;
  opacity: 1;
  transition: opacity 1s ease;
}
#loading .loader {
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  margin: auto
}
#loading.fade-out {
  opacity: 0;
}
/*








*/
#banner .flexWrap {
  width: calc(255 / 375 * 100vw);
  margin: 0 auto;
  padding: min(20 / 375 * 100vw) 0;
}
#banner .box4_1_pc {
  margin-top: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 751px) {
  #banner {
    padding-bottom: min(25 / 1600 * 100vw, 25px);
  }
  #banner .flexWrap {
    width: min(1229 / 1600 * 100vw, 1229px);
    justify-content: space-between;
    margin-top: min(80 / 1600 * 100vw, 80px);
    padding: 0;
  }
  #banner .box4_1_pc {
    width: min(297 / 1600 * 100vw, 297px);
    margin-top: 0;
  }
}
/*







*/
/*  モーダル  */
.modal-box {
  display: block;
  transform: scale(0);
  max-width: 960px;
}
.modal-box.modal-open {
  transform: scale(1) translate(-50%, -50%);
}
.modal-box #modal-close {
  top: -67px;
  right: -10px;
  font-size: 60px;
}
.modal-box .swiper {
  overflow: hidden;
}
.swiper-slide img {
  height: 100%;
}
.swiper-pagination-area {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 100%;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev, .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background-image: url("/car/jimny/special/common/image/swiper_arrow.svg");
  background-size: contain;
  height: 38px;
  background-position: right top;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  left: auto !important;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  right: auto !important;
  transform: rotate(180deg);
}
@media only screen and (min-width: 1287px) {
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: -50px !important;
    width: 50px;
  }
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: -50px !important;
    width: 50px;
  }
}
@media print, screen and (max-width: 1286px) and (min-width: 751px) {
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: -3.25vw !important;
    width: 3.25vw;
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: -3.25vw !important;
    width: 3.25vw;
  }
}
@media only screen and (max-width: 750px) {
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev, .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    display: none;
  }
}
/*








*/
@media screen {
  .scIn.fadeIn {
    opacity: 0;
    -webkit-opacity: 0;
    transition-duration: 0.5s;
    transition-property: opacity;
    transition-timing-function: ease;
  }
  .scIn.fadeIn.move {
    opacity: 1;
    -webkit-opacity: 1;
  }
  .scIn.fadeZoomIn {
    opacity: 0;
    -webkit-opacity: 0;
    transform: scale(0.95, 0.95);
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    transition-timing-function: ease;
  }
  .scIn.fadeZoomIn.move {
    opacity: 1;
    -webkit-opacity: 1;
    transform: scale(1);
  }
  .scIn.zoomIn {
    transform: scale(1.15, 1.15);
    transition-duration: 1.2s;
    transition-property: transform;
  }
  .scIn.zoomIn.move {
    transform: scale(1);
  }
  .scIn.slideInBottom, .scIn2 {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translateY(50px);
    transition-duration: 0.5s;
    transition-property: opacity, transform;
  }
  .scIn.slideInBottom.move, .scIn2.move {
    opacity: 1;
    -webkit-opacity: 1;
    transform: translateY(0px);
  }
  .scIn.slideInLeft {
    opacity: 0;
    -webkit-opacity: 0;
    position: relative;
    transition-duration: 0.4s;
    transition-property: opacity, transform;
    transform: translateX(-80px);
  }
  .scIn.slideInLeft.move {
    opacity: 1;
    -webkit-opacity: 1;
    transform: translateX(0px);
  }
  .scIn.slideInRight {
    opacity: 0;
    -webkit-opacity: 0;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    transform: translateX(100px);
  }
  .scIn.slideInRight.move {
    opacity: 1;
    -webkit-opacity: 1;
    transform: translateX(0px);
  }
}
.scIn.delay100 {
  transition-delay: 100ms !important;
}
.scIn.delay200 {
  transition-delay: 200ms !important;
}
.scIn.delay300 {
  transition-delay: 300ms !important;
}
.scIn.delay400 {
  transition-delay: 400ms !important;
}
.scIn.delay500 {
  transition-delay: 500ms !important;
}
.scIn.delay1000 {
  transition-delay: 1000ms !important;
}


/*------------------------------*/
#mainWrap #innnerlinkBox {
	padding-top: 40px;	
}
#mainWrap .inner-link {
	position: relative;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	font-weight: 800;
	border: 2px solid #bbb;
}
#mainWrap .inner-link li {
	position: relative;
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #000;
	overflow: hidden;
    font-size: 18px;
}

@media screen and (min-width: 751px) {
#mainWrap .inner-link li {
    font-size: min(28 / 1600 * 100vw, 28px);
}
	
}
#mainWrap .inner-link li.active {
	color: #000;
	background: #fff;
}
#mainWrap .inner-link li:nth-child(2n) {
	margin: 0 0 0 0;
}
#mainWrap .inner-link li div {
	width: 100%;
	height: 100%;
	padding: 10px;
	background: #fff;
}	
#mainWrap .inner-link li.active span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 100%;
	background: #000;
}
#mainWrap .inner-link li a {
	display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
	color: #fff;
}
#mainWrap .inner-link li:hover a {
	text-decoration: none;
	color: #fff;
	background: #d6cf36;
}

  #areaMovie .mountain_b {
  bottom: auto;
  top: calc(-9.5 / 375 * 100vw);
}
@media print, screen and (min-width: 751px) {
  #areaMovie .mountain_b {
    top: calc(-26 / 1600 * 100vw);
  }
}