/*共通*/
html {
	font-feature-settings: "palt";
	scroll-behavior: smooth;
	line-height: 2;
	scroll-padding-top: 100px;
	@media screen and (min-width:768px) {scroll-padding-top: 160px;}
}
body { 
	font-family: 'Noto Sans JP', sans-serif;
	display: grid;
	grid-auto-rows: 1fr auto;
	min-height: 100vh;
}
img {
	width: 100%;
	height: auto;
}
@keyframes reveal {
	from {
		opacity: 0; 
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
a {
	text-decoration: underline;
	display: inline-block;
	&:hover {
		transition: 0.4s;
		opacity: 0.7;
	}
}
@media screen and (min-width:768px) {
	.sp{ display: none; }
}

/*header*/
header {
	border-radius: 20px;
	padding: 5px;
	position: fixed;
	width: calc(100% - 10px);
	top: 5px;
	left: 5px;
	line-height: 1.5;
	z-index: 1000000;
	padding-top: 75px;
	@media screen and (min-width:768px) {
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		padding: 15px 40px 15px 30px;
		max-width: 1200px;
		width: 95%;
	}
	& .button {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 20px;
		top: 20px;
		@media screen and (min-width:768px) { display: none; }
		&:hover {cursor: pointer;}
		&::before, &::after {
			display: block;
			content: "";
			height: 1px;
			width: 30px;
			background-color: #ffffff;
			position: absolute;
			transition: 0.5s;
		}
		&::before {top: 10px;}
		&::after {bottom: 10px;}
	}
	& .global {
		overflow-y: auto;
		scrollbar-width: thin;
		@media screen and (min-width:768px) {
			margin-top: 0;
			display: grid;
			gap: 0 20px;
			grid-template-columns: 1fr max-content 1fr;
			align-items: center;
			overflow-y: visible;
		}
		& .logo {
			width: 140px;
			position: fixed;
			top: 10px;
			left: 50%;
			transform: translateX(-50%) !important;
			@media screen and (min-width:768px) {
				width: 150px;
				position: relative;
				top: 0;
			}
			& a {
				width: 140px;
				@media screen and (min-width:768px) {width: 150px;}
			}
		}
		& nav {
			text-align: center;
			display: none;
			@media screen and (min-width:768px) { display: block; }
			& ul li a {
				color: #ffffff;
				text-decoration: none;
				padding: 15px 0;
				font-weight: 400;
				white-space: nowrap;
			}
			& ul.policy {
				display: flex;
				gap: 20px;
				font-size: 75%;
				justify-content: center;
				margin-top: 40px;
				@media screen and (min-width:768px) { display: none; }
				& li a { font-weight: 100; }
			}
		}
	}
}
@media screen and (min-width:768px) {
	header .global nav ul {
		display: flex;
		gap: 0 1vw;
		justify-content: space-around; 
		align-items: center;
		padding: 0;
		margin: 0;
		list-style: none;
	}
}
header .global nav ul li {
	& a {
		@media screen and (min-width:768px) {
			font-size: clamp(12px, 1.2vw, 16px);
			letter-spacing: clamp(0px, 0.05vw, 1px);
		}
	}
	& a::before {
		color: #ffffff;
		display: block;
		font-weight: 700;
		font-size: 150%;
		@media screen and (min-width:768px) { font-size: 100%; }
	}
	&.about a::before {content: "ABOUT US";}
	&.info a::before {content: "INFORMATION";}
	&.stock a::before {content: "STOCK";}
	&.office a::before {content: "SALES OFFICE";}
	&.contact a::before {content: "CONTACT";}
	&.h-d a::before {content: "H-D JAPAN";}
	&.h-d a::after {
		content: url(../img/common/ico-blank.svg);
		display: inline-block;
		width: 1em;
		margin-left: .5em;
		margin-right: -0.8em;
	}
}
header.scrolled {
	background-color: rgba(0,0,0,0.7);
	@media screen and (min-width:768px) { padding-top: 15px; }
}
header.open {
	background-color: rgba(0,0,0,1);
	& .button {
		&::before, &::after {top: 20px;}
		&::before { transform: rotate(30deg);}
		&::after {
			bottom: auto;
			transform: rotate(-30deg);
		}
	}
	& .global {
		height: calc(100vh - 150px);
		margin-top: 55px;
		& nav { display: block; }
		@media screen and (min-width:768px) { margin-top: 0;}
	}
}
header + .contact {
	width: 26px;
	height: 26px;
	position: fixed;
	top: 25px;
	right: 75px;
	z-index: 1000000;
	@media screen and (min-width:768px) { display: none; }
	a {
		display: block;
	}
}
#inline-contact {
	padding: 20px;
	& h3 {
		text-align: center;
		font-weight: bold;
		font-size: 4vw;
		margin-bottom: 20px;
	}
	& dl {
		display: grid;
		gap: 0 20px;
		grid-template-columns: 10em 1fr;
		align-items: center;
		margin-bottom: 20px;
		& dt {
			color: #ffffff;
			background-color: #000000;
			width: 10em;
			text-align: center;
			border-radius: 19px;
			padding: 3px;
		}
		& dd {
			display: flex;
			gap: 10px;
			& a.tel { width: 1em; }
			& a.e-mail {
				width: 1.5em;
				height: fit-content;
				line-height: 1.5;
			}
			& a.line {
				content: url(../img/common/ico-line.svg);
				width: 1.5em;
			}
			& a.sns_x {
				content: url(../img/common/ico-x.svg);
				width: 1.5em;
			}
		}
	}
}
#cboxOverlay { background: #000000;}
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxMiddleLeft, #cboxMiddleRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight {background: none !important; }
#cboxContent {
	padding: 20px;
	border-radius: 20px;
}
#cboxClose {
	bottom: 20px;
	right: 20px;
}

/*背景動画*/
.hero {
	position: relative;
	& div {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -10;
		overflow: hidden;
		width: 100%;
		height: 100vh;
		pointer-events: none;
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			content: "";
/*			background: rgba(0, 0, 0, 0.4);*/
		}
		& iframe, & img {
			position: absolute;
			top: 50%;
			left: 50%;
/*			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);*/
		}
		& img {
			width: 100vw;
			height: 100vh;
			min-width: 100%;
			min-height: 100%;
			object-fit: cover;
			transform: translate(-50%, -50%);
		}
		& iframe {
			width: 100vw;
			height: 56.25vw;
			min-height: 100vh;
			min-width: 177.77vh;
			transform: translate(-50%, -50%) scale(1.2);
		}
	}
}

/*footer*/
footer {
	background-color: #000000;
	padding: 20px 5% 5px;
	height: fit-content;
	margin-top: auto;
	& section { 
		display: grid;
		gap: 10px;
		@media screen and (min-width:768px) {
			max-width: 1200px;
			margin: 60px auto 10px;
			grid-template-columns: auto auto;
		}
		& p:has(img) {
			width: 60%;
			@media screen and (min-width:768px) { width: 360px;}
		}
	}
	& nav { 
		display: none;
		margin-left: auto;
		@media screen and (min-width:768px) { display: block;}
		& ul {
			display: flex;
			gap: 0 1vw;
			font-weight: 200;
			& li a {
				color: #ffffff;
				text-decoration: none;
				line-height: 1.5;
				@media screen and (min-width:768px) { 
					font-size: clamp(12px, 1.2vw, 16px);
					letter-spacing: clamp(0px, 0.05vw, 1px);
				}
			}
			& li.h-d a::after {
			        content: url(../img/common/ico-blank.svg);
			        display: inline-block;
			        width: 1em;
			        margin-left: .5em;
			        margin-right: -0.8em;
			}
		}
		& ul.policy {
			font-size: 75%;
			margin-top: 10px;
		}
	}
	& .copy {
		color: #999999;
		font-size: 62.5%;
		@media screen and (min-width:768px) { margin: 30px 0 0;}
	}
}

/*main*/
main {
	padding-top: 100vh;
	&::before {
		display: block;
		width: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		@media screen and (min-width:768px) { width: 450px; }
	}
	& section {
		background-color: rgba(255,255,255,1);
		@media screen and (min-width:768px) { padding: 0 5%; }
		&:first-child {
			background-color: rgba(255,255,255,0.6);
			backdrop-filter: blur(10px);
		}
		&.office { background-color: rgba(0,0,0,0.3); }
		& article {
			padding: 100px 5%;
			@media screen and (min-width:768px) { 
				padding: 160px 0;
				max-width: 1200px;
				margin: 0 auto;
			}
			& h2 {
				font-size: 118.75%;
				margin-bottom: 40px;
				@media screen and (min-width:768px) {
					font-size: 150%;
					margin-bottom: 0;
				}
				&::before {
					display: block;
					font-family: "acumin-variable", sans-serif;
					font-size: 200%;
					font-weight: 800;
					line-height: 1;
				}
			}
			& + p {
				@media screen and (min-width:768px) { font-size: 125%; }
			}
			& p:has(img) {
				margin-top: 20px;
				border-radius: 20px;
				overflow: hidden;
				opacity: 0;
				animation: reveal linear both;
				animation-timeline: view();
				animation-range: entry 20% cover 40%;
			}
			& .link a {
				display: grid;
				grid-template-columns: 1fr 1em;
				width: 240px;
				padding: 10px 30px;
				border: 1px solid #000000;
				border-radius: 30px;
				text-decoration: none;
				font-family: "acumin-variable", sans-serif;
				margin-top: 20px;
				&::after {
					content: url(../img/common/ico-arrow.svg);
					display: block;
					width: 0.5em;
				}
			}
		}
	}
}
/*総合TOP*/
.home main::before { content: url(../img/common/logo.svg); }
.home main section.about article h2::before { content: "ABOUT US"; }
main section.info article h2::before { content: "INFORMATION"; }
/*main section.recommend article h2::before { content: "RECOMMEND"; }*/
main section.stock article h2::before { content: "STOCK"; }
main section.office article h2::before { content: "SALES OFFICE"; }
@media screen and (min-width:768px) { 
	.home main section article {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content 1fr;
		align-items: start;
		min-height: fit-content;
		& h2 {
			grid-column: 1;
			grid-row: 1; 
			position: sticky; 
			top: 7em;
			& + p {
				grid-column: 2;
				grid-row: 1;
				& + p {
					grid-column: 2;
					grid-row: 2;
				}
			}
		}
		& div { grid-row: 1/3; }
		& .link {
			grid-column: 1;
			grid-row: 2; 
			position: sticky;
			top: 16.5em;
		}
	}
}
/*.home main section.about article p img {border-radius: 20px;}*/
.home main section.about article h3 {
	font-weight: bold;
	font-size: 125%;
	margin-bottom: 10px;
	line-height: 1.5;
}
.home main section.info article {
	& ul {
		line-height: 1.3;
		display: grid;
		gap: 30px;
		margin-bottom: 40px;
		@media screen and (min-width:768px) { grid-row: 1 / 3; }
		& li {
			@media screen and (min-width:768px) {
				display: flex;
				gap: 30px 20px;
			}
			& time {
				font-family: "acumin-variable", sans-serif;
				font-size: 87.5%;
				& span { font-size: 171.4%;}
			}
			& p {
				@media screen and (min-width:768px) { margin-top: 5px; }
			}
		}
	}
}
/*在庫車両*/
.home main section.stock {
	background-color: #000000;
	color: rgb(255, 255, 255);
	& article {
		@media screen and (min-width:768px) {
			grid-template-columns: auto 1fr;
			gap: 80px;
			grid-template-rows: 1fr;
		}
		& ul {
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(2, 1fr);
			@media screen and (min-width:768px) { grid-template-columns: repeat(5, 1fr); }
			& li a {
				border: 1px solid #f26a2b;
				text-decoration: none;
				display: block;
				text-align: center;
				padding: 2em;
				border-radius: 20px;
				background-color: rgba(0,0,0,0.4);
				line-height: 1.3;
position: relative;
				@media screen and (min-width:768px) {
					grid-template-columns: repeat(4, 1fr);
					padding: 3em 0 ;
				}
				&::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/common/logo.png');
  background-repeat: no-repeat;
  background-size: auto 70%; 
  background-position: center;
  opacity: 0.2; /* 画像だけを30%の薄さにする（文字には影響しない） */
  z-index: 1;
				}
			}
		}
	}
}

/*販売拠点*/
main section.office article {
	@media screen and (min-width:768px) { grid-template-columns: 1fr; }
	& h2 {
		color: #ffffff;
		@media screen and (min-width:768px) {
			text-align: center;
			position: static;
			margin-bottom: 40px;
		}
	}
	& ul {
		display: grid;
		gap: 20px;
		line-height: 1.5;
		@media screen and (min-width:768px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		& li {
			opacity: 0;
			animation: reveal linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 40%;
			@media screen and (min-width:768px) { width: calc(50% - 10px); }
			a {
				background-color: #ffffff;
				border-radius: 20px;
				padding: 20px;
				display: grid;
				gap: 15px;
				grid-template-columns: 30% 1fr;
				grid-template-rows: min-content 1fr;
				align-items: start;
				text-decoration: none;
				& h3 {
					font-weight: bold;
					@media screen and (min-width:768px) { text-align: center; }
					&::before {
						display: block;
						font-family: "acumin-variable", sans-serif;
						font-weight: 800;
						line-height: 1;
						font-size: 125%;
					}
				}
				& p:has(img) {
					margin-top: 0;
					img { border-radius: 10px; }
				}
				& p { font-size: 87.5%; }
				& div {
					grid-column: 2;
					grid-row: 1 / 3;
					& dl {
						font-size: 87.5%;
						display: grid;
						grid-template-columns: auto 1fr;
						gap: 5px 10px;
						margin-top: 10px;
						dt {
							font-size: 75%; 
							color: #ffffff;
							background-color: #000000;
							width: 6em;
							text-align: center;
							line-height: 2;
							border-radius: 10px;
						}
					}
				}
			}
		}
	}
}
main section.office article ul li.nishitokyo a h3::before,
.nishitokyo main section.info h3::before { content: "NISHI TOKYO"; }
main section.office article ul li.kawagoe a h3::before,
.kawagoe main section.info h3::before { content: "KAWAGOE"; }
main section.office article ul li.nakano a h3::before,
.nakano main section.info h3::before { content: "NAKANO"; }
main section.office article ul li.kashiwa a h3::before,
.kashiwa main section.info h3::before { content: "KASHIWA"; }
main section.office article ul li.kashiwa-rental a h3::before { content: "CITY BIKE AND RENTALS"; }

/*各店舗ページ*/
.page-template-page-office main h1 {
	color: transparent;
	&::before {
		display: block;
		width: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		@media screen and (min-width: 768px) { width: 450px; }
	}
}
.nishitokyo main h1::before { content: url(../img/logo-nishitokyo.svg); }
.kawagoe main h1::before { content: url(../img/logo-kawagoe.svg); }
.nakano main h1::before { content: url(../img/logo-nakano.svg); }
.kashiwa main h1::before { content: url(../img/logo-kashiwa.svg); }
.kashiwa-rental main h1::before {
	content: url(../img/logo-rental-kashiwa.svg); 
/*	@media screen and (min-width: 768px) {
		max-width: 700px;
		width: 100%;
	}*/
}
.page-template-page-office main section.info {
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	& article {
		display: grid;
		@media screen and (min-width: 768px) {
		        grid-template-columns: 1fr 1fr;
		        grid-template-rows: min-content 1fr;
		        align-items: start;
		        min-height: fit-content;
		        & h2 {
				grid-column: 1;
				grid-row: 1;
				position: sticky;
				top: 7em;
		        }
		}
		&.map {
			padding: 0 5% 100px;
			margin-top: -40px;
			@media screen and (min-width: 768px) {
				grid-template-columns: 1fr;
				padding: 0 0 160px;
				margin-top: -120px
			}
			& iframe {
				aspect-ratio: 16 / 9;
				width: 100%;
				height: auto;
				@media screen and (min-width: 768px) { aspect-ratio: 3 / 1; }
			}
		}
		& div {
			display: grid;
			gap: 20px;
			@media screen and (min-width: 768px) {
				grid-row: 1 / 3;
			}
			& h3 {
				font-weight: bold;
				padding-top: 60px;
				&::before {
					display: inline-block;
					font-family: "acumin-variable", sans-serif;
					font-weight: 800;
					line-height: 1;
					font-size: 125%;
					margin: 0 0.5em 0 15.5%;
					@media screen and (min-width: 768px) { margin: 0 0.5em 0 85px; }
				}
				&::after {
					content: url(../img/common/logo-b.svg);
					width: 100%;
					display: block;
					margin-top: -70px;
					@media screen and (min-width: 768px) { width: 530px; }
				}
			}
			& p:has(img) {
				margin-top: 0;
				& img { border-radius: 20px; }
			}
			& .news a{
				color: #ffffff;
				background-color: #000000;
				text-decoration: none;
				padding: 5px 20px;
				border-radius: 21px;
				&::after {
					content: url(../img/common/ico-arrow-w.svg);
					display: inline-block;
					width: 0.5em;
					margin-left: 0.5em;
				}
			}
			& .link a { margin-top: 0; }
			& p.info-text {
				line-height: 1.5;
				& .sp { display: contents; }
			}
			& dl {
				display: grid;
				grid-template-columns: repeat(4, auto);
				gap: 5px 10px;
				margin-top: 10px;
				line-height: 1;
				justify-content: left;
				& dt {
					font-size: 75%;
					color: #ffffff;
					background-color: #000000;
					width: 6em;
					text-align: center;
					border-radius: 10px;
					padding: 3px;
				}
			}
			& dl.sns {
				grid-template-columns: 1fr;
				 align-items: center;
				& dt {
					color: #000000;
					background-color: transparent;
					font-size: 150%;
					font-family: "acumin-variable", sans-serif;
					font-weight: 800;
					padding: 0;
				}
				& dd {
					display: flex;
					gap: 10px;
					align-items: center;
					& a {
						width: 36px;
						&.youtube { content: url(../img/common/ico-youtube.svg); }
						&.tiktok { content: url(../img/common/ico-tiktok.svg); }
						&.facebook { content: url(../img/common/ico-facebook.svg); }
						&.sns_x { content: url(../img/common/ico-x.svg); }
						&.line { content: url(../img/common/ico-line.svg); }
						&.instagram { content: url(../img/common/ico-instagram.svg); }
						&.line-sales, &.line-wear, &.insta-gmd, &.insta-motorcycle, &.insta-service {
							display: flex;
							flex-direction: column;
							gap: 1px;
							text-decoration: none;
							font-size: 0;
							width: 36px;
						}
						&.line-sales::before, &.line-wear::before,
						&.insta-gmd::before, &.insta-motorcycle::before, &.insta-service::before {
							content: "";
							display: block;
							width: 36px;
							height: 36px;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center;
						}
						&.insta-gmd::before, &.insta-motorcycle::before, &.insta-service::before {
							background-image: url(../img/common/ico-instagram.svg);
						}
						&.line-sales::before, &.line-wear::before {
							background-image: url(../img/common/ico-line.svg);
						}
						&.line-sales::after, &.line-wear::after, &.insta-gmd::after, &.insta-motorcycle::after, &.insta-service::after {
							font-size: 10px;
							text-align: center;
							line-height: 1;
						}
						&.line-sales::after { content: "営業";}
						&.line-wear::after { content: "ウェア";}
						&.insta-gmd::after { content: "GMD";}
						&.insta-motorcycle::after { content: "Motorcycle"; margin-left: -0.7em;}
						&.insta-service::after { content: "Service";}
					}
				}
			}
		}
	}
}
.kashiwa-rental main section.info article div h3 {
	&::before {
		margin: 0 0.5em 0 0;
		width: 60%;
	}
	&::after {
		content: url(../img/logotype-rental-kashiwa.svg);
		margin-top: -60px;
		@media screen and (min-width: 768px) { width: 460px; }
	}
}