@charset "utf-8";

body{
	overflow-x: hidden !important; 
	font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
}

#loading.loaded {
	opacity: 0;
	pointer-events: none;
}

#loading{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 1.5s ease;
	opacity: 1;
}

#loading img {
	width: 200px;
	height: 240px;
	animation: bounce 2s ease-in-out infinite;
}

/* ローディングアニメーション */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
  }
  40% { 
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


main{
	 position: relative;
	 overflow-x: clip;
}
.toptitle{
	width: 45vw;
	position: absolute;
	z-index: 5;
	top:16vw;
	left:5vw;
}

.topbg{
	width: 100%;
	position: relative;
	z-index: 0;
}

.topbg_ph{
	display: none;
}

.topsubtitle{
	width: 16vw;
	z-index: 5;
	position: absolute;
	top:36vw;
	left: 4vw;
	animation: float 3s ease-in-out infinite;
}

@keyframes float{
	0%,100%{
		transform: rotate(-7deg) translateY(-5%);
	}
	50%{
		transform: rotate(-7deg) translateY(5%);
	}
}

.top_credit{
	width: 12vw;
	position: absolute;
	z-index: 5;
	top:54.3vw;
	right: 1vw;
}

.point_text{
	font-weight: 600;
	text-decoration: underline;
	
}

.second_top{
	background-image: url("../img/second_bg.png");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-size: cover;
	position: relative;
	height: 28vw;
}

.second_topwrapper{
	margin-left: 13vw;
	padding-top: 3vw;
	font-family: "Arial", "Helvetica", "sans-serif";
}

.second_topwrapper h2{
	font-size: 2.5vw;
	line-height: 3.8vw;
	letter-spacing: 0.4vw;
	margin-bottom: 1vw;
}

.second_topwrapper p{
	font-size: 1.5vw;
	line-height: 2.5vw;
	padding-bottom: 70px;
}

.second_topimg1{
	width: 10vw;
	position: absolute;
	top:-3vw;
	left: -2.5vw;
	animation: rotate-right 7s linear infinite;
}

@keyframes rotate-right{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

.second_topimg2{
	width: 6vw;
	position: absolute;
	top:-3vw;
	right: 4vw;
	transform: rotate(-20deg);
}

.second_topimg3{
	width: 3vw;
	position: absolute;
	top:4vw;
	right: 3vw;
	animation: rotate-left 7s linear infinite;
}

@keyframes rotate-left{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(-360deg);
	}
}

.second_topimg4{
	width: 6.5vw;
	position: absolute;
	right: 18vw;
	top:26vw;
	animation: rotate-right 7s linear infinite;
	z-index: 4;
}

.second_topimg5{
	width: 6vw;
	position: absolute;
	right: 4vw;
	top:25vw;
	z-index: 2;
}

.second_topimg6{
	position: absolute;
	right: 5vw;
	top:13vw;
	width: 10vw;
	z-index: 4;
}
.second_topimg7{
	width: 12vw;
	position: absolute;
	right: 1vw;
	top:26vw;
	z-index: 4;
}

.pcnone{
	display: none;
}

.click-btn img{
	opacity: 0;
	transition: 2s;
}

/*スクロールした時に追加されるクラス*/
.click-btn img.fadein{
  opacity: 1;
}

.main_lineup{
	background-image: url("../img/AdobeStock_521167811.jpeg");
	background-size: cover;
	position: relative;
	height: 116vw;
	z-index: 0;
}

.main_lineup h2{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2.6vw;
	padding-top: 10vw;
}

.main_lineup p{
	font-size: 1.5vw;
	display: flex;
	align-items: center; /* 垂直中心 */
	justify-content: center; /* 水平中心 */
}

.main_lineup p:before, .main_lineup p:after {
	border-top: 1px solid;
	content: "";
	width: 2em;
}
.main_lineup p:before {
	margin-right: 1em;
}
.main_lineup p:after {
	margin-left: 1em;
}

.product_img_wrapper{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.product_img_outer{
	flex-direction: column; /* 縦並び */
	width: 100%;
	text-align: center;
	height: auto;
	gap:7vw;
	padding-top: 9vw;
}

.thumbs{
	transition: all 1.0s;
	opacity: 0;
	transform: rotateY(180deg);
}

.scrollin{
	transform: translate(0, 0)!important;
	opacity: 1!important;
}

.aaa{
	display: flex;
}

.productimg1 ,.productimg2{
	height: 30vw;
}

.price{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 1.5vw;
	padding-top: 1vw;
}

.price_bold{
	font-size: 2.5vw;
}

.btn1{
	width: 15vw;
	margin-top: 2vw;
}

.btnph{
	display: none;
}

.productimg3{
	height: 30vw; 
}

.btn3{
	width: 15vw;
	margin-top: 2vw;
}

.main_lineupimg1{
	width: 18vw;
	position: absolute;
	top:5vw;
	right: 18vw;
	transform: rotate(7deg);
}

.main_lineupimg2{
	width: 7vw;
	position: absolute;
	top:8vw;
	left:10vw;
	animation: rotate-left 8s linear infinite;
}

.main_lineupimg3{
	width: 12vw;
	position: absolute;
	top:16vw;
	left: 3vw;
	transform: rotate(-15deg);
}

.main_lineupimg4{
	width: 12vw;
	position: absolute;
	top:50vw;
	right: -3vw;
	animation: rotate-right 7s linear infinite;
}

.main_lineupimg5{
	width: 10vw;
	position: absolute;
	top:67vw;
	right: 22vw;
	transform: rotate(20deg);
}

.main_lineupimg6{
	width: 18vw;
	position: absolute;
	top:93vw;
	left: -2vw;
}

.main_lineupimg7{
	width: 15vw;
	position: absolute;
	top:93vw;
	right: 5vw;
	animation: float 4s ease-in-out infinite; 
}

.main_lineupimg8{
	width: 12vw;
	position: absolute;
	top: 113vw;
	right: 1vw;
}

.alllineup{
	position: relative;
	overflow-x: hidden;
	height: 100vw;
	background-color: #ffffff;
}

.alllineup h2{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2.6vw;
	padding-top: 10vw;
	line-height: 4vw;
}

.alllineup_img01{
	width: 17vw;
	position: absolute;
	top: 10vw;
	left: 17vw;
	transform: rotate(-20deg);
	z-index: 4;
}

.alllineup_img02{
	width: 30vw;
	position: absolute;
	top:25vw;
	left:-3vw;
}

.alllineup_img03{
	width: 30vw;
	position: absolute;
	top:60vw;
	right: -3vw;
	transform: scale(-1);
}

.alllineup_img04{
	width: 30vw;
	position: absolute;
	top:83vw;
	left: -2vw;
}

.alllineup_img05{
	width: 11vw;
	position: absolute;
	top:2vw;
	right: 15vw;
	animation: rotate-right 7s linear infinite;
}

.alllineup_img06{
	width: 6vw;
	position: absolute;
	top:60vw;
	left:30vw;
	animation: rotate-right 7s linear infinite;
}

.alllineup_img07{
	width: 8vw;
	position: absolute;
	top:67vw;
	right: -2vw;
	animation: rotate-left 9s linear infinite;
}

.alllineup_img08{
	width: 6vw;
	position: absolute;
	top:70vw;
	right: 4vw;
	animation: rotate-right 10s linear infinite;
}

.popup{
	position: relative;
}
.popup-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px; 
}

.morebtn{
	width: 10vw;
}

.morebtnph{
	display: none;
}

.year{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3vw;
	text-align: center;
	padding-top: 5vw;
}

.animals1{
	width: 13vw;
	position: absolute;
	top:15vw;
	left:8vw;
}

.animals2{
	width: 20vw;
	position: absolute;
	top: 10vw;
	left:22vw;
}

.animals3{
	width: 20vw;
	position:absolute;
	top:13.5vw;
	left:43vw;;
}

.animals4{
	width: 11vw;
	position: absolute;
	top:17vw;
	left: 65vw;
}

.animals5{
	width: 20vw;
	position: absolute;
	top:20vw;
	left: 76vw;
	transform: rotate(12deg);
}

.animals6{
	width: 15vw;
	position: absolute;
	top:38vw;
	left: 67vw;
	transform: rotate(-23deg) scaleX(-1);
}

.animals7{
	width: 22vw;
	position: absolute;
	top:33vw;
	left:40vw;
	transform: scaleX(-1);
}

.animals8{
	width: 12vw;
	position: absolute;
	top:43vw;
	left:22vw;
	transform: scaleX(-1);
}

.animals9{
	width: 10vw;
	position: absolute;
	top:49vw;
	left:9vw;
	transform: rotate(-10deg) scaleX(-1);
}

.animals10{
	width: 8vw;
	position: absolute;
	top:58vw;
	left:21vw;
	transform: rotate(24deg);
}

.animals11{
	width: 18vw;
	position: absolute;
	top:58vw;
	left:31vw;
}

.animals12{
	width: 22vw;
	position: absolute;
	top:58vw;
	left:54vw;
}
.popup-wrapper {
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	display: none;
}

.popup-inside{
	width: 100%;
	max-width: 80vw;
	height: 40vw;
	background-image: url("../img/second_bg.png");
	border-radius:60px;
	background-size: cover;
	position: relative;
	margin: 8vw auto;
}

.comingsoon{
	width: 59vw;
	border-radius:60px;
}

.comingsoonph{
	display: none;
}

.popupbg{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2vw;
	padding-top: 3vw;
	text-align: center;
}

.popupimg{
	width: 13vw;
	margin: 5px;
}

.close{
	font-size: 2vw;
	font-weight: 800;
	position: absolute;
	top: 2vw;
	right: 3vw;
	cursor: pointer;
}

.mitsubishi{
	background-image: url("../img/bg1.png");
	height: 60vw;
	background-size: cover;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	position: relative;
	z-index: 0;
}

.mitsubishibg01{
	position: absolute;
	width: 12vw;
	top:-2vw;
	left: 54vw;
	transform: rotate(10deg);
	z-index: 5;
	opacity: 0.5;
}

.mitsubishibg02{
	position: absolute;
	width: 8vw;
	top:10vw;
	left:10vw;
	opacity: 0.5;
}

.mitsubishibg03{
	position: absolute;
	width: 30vw;
	top: 56vw;
	left:-1vw;
	z-index: 4;
	opacity: 0.8;
}

.mitsubishibg04{
	width: 40vw;
	position: absolute;
	top: 44vw;
	right: -17vw;
	opacity: 0.8;
}

.mitsubishibg05{
	width: 11vw;
	position: absolute;
	top:5vw;
	left:3vw;
	animation: rotate-right 10s linear infinite;
}

.mitsubishibg06{
	width: 9vw;
	position: absolute;
	top:13vw;
	left:80vw;
	animation: rotate-left 8s linear infinite;
}

.mitsubishibg07{
	width: 5vw;
	position: absolute;
	top:24vw;
	left: 17vw;
	z-index: 3;
	animation: rotate-left 8s linear infinite;
}

.mitsubishibg08{
	width: 8vw;
	position: absolute;
	top:58vw;
	left:27vw;
	animation: rotate-right 11s linear infinite;
	z-index: 6;
}

.mitsubishibg09{
	width: 4vw;
	position: absolute;
	top:70vw;
	left:75vw;
	animation: rotate-left 16s linear infinite;
}

.mitsubishi h2{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2.6vw;
	padding-top: 8vw;
}

.detail_wrapper{
	width: 58vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 7;
}

.mitsubishi_detail{
	font-size: 1.6vw;
	font-weight: 450;
	padding-top: 2vw;
}

.mitsubishi_about{
	margin-top: 2vw;
	border: 1px solid #619c03;
}

.goldcard{
	width: 50vw;
}

.mitsubishi_about dt{
	padding: 1vw 1.8vw;
	background-color: #619c03;
}
.mitsubishi_about dd{
	padding: 0.5vw 1vw;
	line-height: 1.6em;
	letter-spacing: .1em;
	background-color: white;
	font-size: 1.2vw;
}

.mitsubishi_figure{
	width: 58vw;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2vw;
}

.sns{
	background-image: url("../img/AdobeStock_521167811.jpeg");
	background-size: cover;
	height: 17vw;
}

.sns h2{
	font-family: "ta-fuga-fude", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 2.6vw;
	padding-top: 4vw;
}

.sns__list{
	display: flex;
	justify-content: center;
	gap: 7vw;
	padding-top: 3vw;
}

.sns__list dd img{
	width: 5vw;
}

.footer {
    padding: 16px 0;
    background-color: #ffffff; 
    text-align: center;
}

.footer-logo {
    width: 20vw;;
    height: auto;
    margin:0 auto;
	padding-top: 10px;
	justify-content: center;
}

.footer-nav {
    margin-top: 16px; 
}

.footer-nav a {
    margin: 0 8px;
    font-size: 1.5vw;
    color: #5d8ca6; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ECA642; 
}

footer p {
    margin-top: 16px;
    font-size: 1vw;
    color: #777;
}
/* CSS Document */