body {background-color: #020203; color: #eee;
	font-family: 'Lato','Noto Sans', sans-serif;
}
.bg-base {background-color: #000; position: relative; z-index: 0;}

.bg-gradient1 {
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.bg-gradient2 {
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.bg-blk {
	background: #101214;
}

a, .nav-link {color: inherit; text-decoration: none;}
a:hover,a:focus,
.nav-link:hover, .nav-link:focus {color: inherit; opacity: 0.9;}

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    max-height: 178vw;
    position: fixed;
    top: 0;
    left: 0;
}

.serif {
	font-family: 'Playfair Display', serif;
}
.serif.b {font-weight: 600;}
.tagline {
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.02em;
}

.text-gold {
	color: #53431f;
}
.text-inahogold {
	color: #a9895a;
}
.text-gray {
	color: #666;
}

.btn-primary {
	background: rgba(0,0,0,.5);
	border: 1px solid #ddd;
	/* font-size: 1.22em; */
	letter-spacing: 0.15em;
	padding: 0.9em 2.4em;
	border-radius: 0;
}
.btn-primary:hover {
	background: transparent;
		border: 1px solid #aaa;
}

.btn-secondary {
	border: 1px solid #000;
	background: rgba(0,0,0,.7);
	color: #fff;
	border-radius: 0;
	padding: 0.6em 1.8em;
}
.btn-secondary:hover {
	background: rgba(0,0,0,1)
}

.header {height: 60px;}
@media (min-width:768px) {
	.header {height: 80px;}
}

.aspect3-2vw {
	width: 100vw;
	height: 66.67vw;
}
.aspect2-1vw {
	width: 100vw;
	height: 50vw;
}

.lt{color: #DDDDDD;}

.bg-black-alpha {
	background: rgba(0,0,0,.2);
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%);
}
@media (min-width:992px) {
	.bg-black-alpha {
		background-color: rgba(0,0,0,.75);
	}
}

.key-img {
	max-height: 100vh;
	width: 100%;
	position: relative;
}

.key-img::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/s-2400x1600_keyv01.webp);
	background-size: cover;
	background-position: center center;
}

.about-bg {
	position: relative;
	background-image: url(../img/s-2400x1600_about01.webp);
	background-size: cover;
	background-position: right center;
}
@media (min-width: 576px;) {
	background-position: center center;
}


.about-bg::before,
.about-bg::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 22%;
}

.about-bg::before {
	top: 0;
	background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 100%)
}
.about-bg::after {
	bottom: 0;
	background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%)
}

.product-bg {
	max-height: 100vh;
	width: 100%;
	position: relative;
}
.product-bg::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 1em;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/product-bg-sp.webp);
	background-size: cover;
	background-position: center center;
}
@media (min-width:992px){
	.product-bg::before {
		background-image: url(../img/s-2400x1600_product01.webp);
	}
}

.dealer-bg {
	width: 100%;
	position: relative;
}
.dealer-bg::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/s-2400x1600_dealer01.webp);
	background-size: cover;
	background-position: center center;
	opacity: 0.6;
}


.footer-bg {
	max-height: 100vh;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: #000;
}
.footer-bg::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/s-2048x1367_footer02.webp);
	background-size: cover;
	background-position: center center;
	opacity: 0.7;
}

.pickup1::before {
	background-image: url(../img/s-2400x1600_pickup1-bg.webp);
}

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:0;
    right: -120%;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:rgba(0,0,0,.95);
    /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav #g-nav-list{ height: 100vh;}
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
/*
    position: absolute;
    z-index: 999;
    padding: 0;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
*/
		padding: 0;
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
/*     text-align: center; */
}

#g-nav li a{
  color: #eee;
  text-decoration: none;
  padding:10px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:relative;
    z-index: 9999;/*ボタンを最前面に*/
  top:0;
  right: 0;
  cursor: pointer;
    width: 50px;
    height:50px;
}
.header .nav-item > a {
	line-height: 50px;
	padding: 0;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 1px;
	  background-color: #bbb;
    width: 40px;
  }

.openbtn1 span:nth-of-type(1) {
  top:12px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:34px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 12px;
    left: 5px;
    transform: translateY(16px) rotate(-45deg);
    width: 40px;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 34px;
    left: 5px;
    transform: translateY(-6px) rotate(45deg);
    width: 40px;
}

.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	  overflow: hidden;
    transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}

.btn:hover span{
  color:#333;
}
/*== 背景が流れる（斜め） */
.bgskew::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
    /*色や形状*/
  background:#b6a367;
	background: linear-gradient(150deg, #b6a367 0%, #a9895a 100%);
  width:120%;
  height: 101%;
  transform: skewX(-23deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
  animation: skewanime .3s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}

#products .swiper-slide {
	height: auto;
}
/*
#products .swiper-slide >div {
	margin: 0 1.5rem;
}
*/
.swiper-wrapper {
	padding-bottom: 80px;
}
.swiper-button-next,.swiper-button-prev,.swiper-pagination {
	top: auto; bottom: 0; 
}
.swiper-button-next {right: 5px;}
.swiper-button-prev {left: 5px;}

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:fixed;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #ddd;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #ddd;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 2s ease-in-out 1s infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	70%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

.toplogo {
  transition: all 1000ms;
  opacity: 0;
}

.toplogo-in {
  opacity: 1;
  transition: all 1000ms;
}