@charset "utf-8";

#bread { padding: 100px 0 10px; }

/* ------------------------------------------------------------ anime */
#anime{ position: relative; height: 980px; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #D1E5E6; }
.town{ position: relative; width: 100%; height: 100%; overflow: hidden; }
.background{ position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }

#bg1{ opacity: 1; }
.town-img{ position: absolute; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: 1700px; margin: 0 auto; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.town-img.is-active{ opacity: 1; z-index: 2; }

.nowdata{ z-index: 300; width: 700px; position: absolute; top: 5%; left: 5%; display: flex; align-items: center; gap: 30px; }
.nowdata-title{ padding: 2px 19px; font-size: 17px; text-align: center; font-family: 'Noto Sans Japanese Bold'; background: #fff; box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.2); }
.nowdata-tabs{ overflow: hidden; display: flex; align-items: center; width: min(260px, 48%); border-radius: 100px; box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.2); }
.nowdata-tab{ width: 50%; height: 50px; background: #fff; }
.nowdata__text{ display: inline-block; background: linear-gradient(109deg,rgba(16, 149, 212, 1) 0%, rgba(68, 98, 175, 1) 50%, rgba(15, 162, 130, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 5px 0 0; font-size: 20px; font-family: 'JosefinSans-BoldItalic'; line-height: 1; }

.nowdata-tab.is-active{ background: linear-gradient(109deg,rgba(16, 149, 212, 1) 0%, rgba(68, 98, 175, 1) 50%, rgba(15, 162, 130, 1) 100%); }
.nowdata-tab.is-active .nowdata__text{ color: #fff; -webkit-background-clip: none; -webkit-text-fill-color: #fff; background: none; }

.progress{ z-index: 299; width: 450px; height: 17px; background: #fff; border-radius: 100px; box-shadow: 0 6px 14px rgba(0,0,0,.12); position: fixed; bottom: 24px; left: 50%; transform: translate(-50%,0); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.progress-bar{ position: absolute; left: 2px; top: 50%; transform: translate(0,-50%); height: calc(100% - 4px); width: calc(100% - 4px); border-radius: 100px; background: linear-gradient(90deg, #1b8fc7, #4b60b2, #10a77f); }

.vm{ animation: fluffy 2s infinite linear; cursor: pointer; position: absolute; z-index: 150; min-width: 115px; background: #fff; border: 2px solid #E71402; border-radius: 13px; text-align: center; }
.vm::after{ content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 15px; height: 13px; background: #E71402; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.vm-label{ display: block; padding: 7px 7px 3px; font-size: 12px; font-family: 'Noto Sans Japanese bold'; }
.vm-more{ display: block; padding: 0 0 7px; font-size: 12px; font-family: 'JosefinSans-BoldItalic'; color: #e60012; }
.vm.is-main{ min-width: 140px; }
.vm.is-main .vm-brands{ display: block; font-size: 10px; font-family: 'JosefinSans-BoldItalic'; line-height: 1.2; padding: 5px; border-top: 1px solid #e60012; }
.vm.is-main .vm-more{ padding: 5px; background: #E71402; color: #fff; border-radius: 0 0 10px 10px; }

@keyframes fluffy {
	0%{
		transform: translateY(-5%);
	}
	50%{
		transform: translateY(5%);
	}
	100%{
		transform: translateY(-5%);
	}
}

/* 5つの位置 */
.vm-marine{ bottom: 12%; left: calc(50% - 600px); }
.vm-agri{ bottom: 30%; left: calc(50% - 460px); }
.vm-bike{ top: 28%; left: calc(50% - 200px); }
.vm-generator{ top: 27%; left: calc(50% + 400px); }
.vm-construction{ bottom: 32%; left: calc(50% + 460px); }

.modal-window{ overflow-y: scroll; transition: all 0.6s; opacity: 0; visibility: hidden; transform: translateX(100%); z-index: 300; position: absolute; right: 0; top: 0; width: 710px; height: 100%; background: #fff; padding: 40px 30px; box-sizing: border-box; }
.button-close{ cursor: pointer; position: absolute; right: 0; top: 0; width: 40px; }
.button-close img{ width: 100%; height: auto; }
.modal__kv{ width: 100%; height: auto; }
.modal__text{ padding: 30px 0; }
.modal__tiele{ padding: 0; font-size: 34px; font-family: 'Noto Sans Japanese Medium'; }
.modal__desc{ font-size: 16px; line-height: 2; }
.modal__desc a {cursor: pointer;
	color: #5EABD1;
	border-bottom: 1px solid #5EABD1;}

.modal-window.open{ opacity: 1; visibility: visible; transform: translateX(0); }

.sky{ overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.horizon{ position: absolute; left: 0; right: 0; bottom: 40%; height: 2px; opacity: .3; }
.planet{ will-change: transform, opacity; position: absolute; top: 0; left: 0; right: auto; opacity: 0; }
.planet.sun{ width: 90px; height: auto; }
.planet.moon{ width: 60px; height: auto; }


/* ------------------------------------------------------------ about */
.experience-item{ width: 100%; height: auto; }
.btn-experience{ position: relative; display: flex; align-items: center; justify-content: center; width: 80%; margin: 20px auto 0; height: 45px; background: linear-gradient(90deg, #3b82c4 0%, #1f9a8a 100%); border-radius: 100px; transition: 0.3s ease; }
.btn-text{ color: #fff; font-size: 16px; }
.btn-arrow{ position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg) translate(0,-50%); }

#about{ padding: 60px 0 100px; }
.about_inner{ max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.about_head{ margin-bottom: 70px; }
.about_title{ font-size: 76px; font-family: 'JosefinSans-BoldItalic'; margin: 0 0 10px; line-height: 1; }
.about_subtitle{ font-size: 18px; }
.about_body{ display: flex; gap: 4%; margin-bottom: 90px; }
.about_col{ width: 50%; }
.about_col p{ font-size: 18px; line-height: 2.2; }
.about_links{ display: flex; justify-content: center; gap: 2%; }
.about_btn{ display: flex; align-items: center; justify-content: center; width: 320px; height: 50px; background: #000; color: #fff!important; text-decoration: none; font-size: 18px; position: relative; transition: opacity .3s ease; }
.about_btn::after{ content: ""; position: absolute; right: 24px; width: 12px; height: 12px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.about_btn:hover{ opacity: 0.8; }



@media only screen and (max-width:640px){
	
	#bread { padding: 80px 0 10px; }

/* ------------------------------------------------------------ anime */
	#anime{ display: none; position: fixed; inset: 0; width: 100dvh; height: 100dvw; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center center; }
	.town-img{ object-position: left; height: 100%; width: 100%; }
	
	.nowdata{ width: 100%; top: 2%; gap: 15px; left: 0; padding: 0 3%; box-sizing: border-box; }
	.nowdata-title{ padding: 1px 11px; font-size: 11px; }
	.nowdata__text{ font-size: 11px; }
	.nowdata-tab{ height: 20px; }
	.nowdata-tabs{ width: 150px; }
	.anime-close{ cursor: pointer; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; line-height: 1; font-size: 20px; background: #fff; border-radius: 100px; margin: 0 0 0 auto; }

	.vm-label{ padding: 3px 3px 1px; font-size: 10px; }
	.vm-more{ padding: 0 0 4px; font-size: 10px; }
	.vm{ min-width: 80px; border: 1px solid #E71402; border-radius: 6px; }
	.vm.is-main{ min-width: 105px; }
	.vm.is-main .vm-brands{ padding: 3px; }
	.vm.is-main .vm-more{ padding: 3px; border-radius: 0 0 5px 5px; }

	.vm-agri{ left: 18%; }
	.vm-marine{ left: 6%; }
	.vm-bike{ top: 12%; left: 33%; }
	.vm-generator{ top: 19%; right: 17%; left: initial; }
	.vm-construction{ bottom: 30%; right: 11%; left: initial; }

	.progress{ width: 40%; height: 11px; }

	/* ★×ボタン：回転座標系内で右上（実画面では右下）に配置 */
	.button-close{
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10001;
		width: 25px;
		height: 25px;
	}

	.modal-window{ transform: translate(-50%,-50%); left: 50%; top: 50%; width: 88dvh; height: auto; max-height: 94vw; padding: 20px; display: flex; align-items: flex-start; gap: 5%; overflow-y: auto; border-radius: 7px; }
	.modal-window.open{ transform: translate(-50%,-50%); left: 50%; top: 50%; }
	.modal__text{ width: 50%; padding: 0; }
	.modal__tiele{ font-size: 22px; padding-bottom: 5px; }
	.modal__desc{ font-size: 12px; line-height: 1.6; }
	.modal__kv{ width: 50%; }
	
	.planet.sun{ width: 40px; height: auto; }
	.planet.moon{ width: 30px; height: auto; }


/* ------------------------------------------------------------ about */
	#about{ padding: 50px 0; }
	.about_head{ margin-bottom: 30px; }
	.about_title{ font-size: 40px; margin-bottom: 5px; line-height: 1.1; text-align: center; }
	.about_subtitle{ font-size: 16px; text-align: center; }
	.about_body{ flex-direction: column; gap: 30px; margin-bottom: 50px; }
	.about_col{ width: 100%; }
	.about_col p{ font-size: 13px; line-height: 2; }
	.about_links{ flex-direction: column; gap: 16px; width: 85%; margin: 0 auto; }
	.about_btn{ width: 100%; height: 52px; font-size: 16px; }
	.about_btn::after{ right: 18px; width: 10px; height: 10px; }
}