@charset "utf-8";

:root {
	--main-color: 195, 11, 21;
	--base-color: 211, 212, 211;
	--scale-ratio: 1.2;
	--body: clamp(.875rem, 0.824rem + 0.26dvw, 1rem);
	--body-font: "Noto Sans Japanese", sans-serif;
	--body-weight: 400;
	--body-line-height: 1.5;
	--body-letter-spacing: normal;
	--body-color: 0, 0, 0;
	--body-background: 255, 255, 255;
	--heading-font: var(--body-font);
	--heading-weight: 600;
	--heading-line-height: 1.25;
	--heading-letter-spacing: normal;
	--heading-color: rgb(var(--body-color));
	--heading1: clamp(1.5rem, 1.09rem + 2.05dvw, 2.5rem);
	--heading2: clamp(1.5rem, 1.346rem + 0.77dvw, 1.875rem);
	--heading3: clamp(1.25rem, 1.147rem + 0.51dvw, 1.5rem);
	--heading4: clamp(1rem, 1rem + 0dvw, 1rem);
	--small-body: calc(var(--body) * 0.875);
	--large-body: calc(var(--body) * 1.2);
}

body {
	font-family: var(--body-font);
	font-size: var(--body);
	line-height: var(--body-line-height);
	letter-spacing: var(--body-letter-spacing);
	color: var(--body-color);
	background: rgb(var(--body-background));
}

body:before{
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100dvh;
	background: url('https://www.holbein.co.jp/dcms_media/image/main-image_768.webp');
	background-size: cover;
	background-position: center top;

	@media (width >= 768px) {
		background: url('https://www.holbein.co.jp/dcms_media/image/main-image_1920.webp');
		background-size: cover;
	}

	@media (width >= 1024px) {
		background: url('https://www.holbein.co.jp/dcms_media/image/main-image_3840.webp');
		background-size: cover;
	}
}

.caption { font-size: var(--small-body); }
p { font-size: var(--body); }
h4 {
	font-size: var(--heading4);
	@media (width <= 480px) {
		font-size: calc(var(--heading4) * 0.875);
	}
}
h3 {
	font-size: var(--heading3);
	@media (width <= 480px) {
		font-size: calc(var(--heading3) * 0.875);
	}
}
h2 {
	font-size: var(--heading2);
	@media (width <= 480px) {
		font-size: calc(var(--heading2) * 0.875);
	}
}
h1 { font-size: var(--heading1); }
h4, h3, h2, h1 {
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
}

.Container *, .Container *::before, .Container *::after{
	box-sizing: border-box;
}

.Container {
	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.heroContainer {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transition: opacity 0.2s ease-out;

	.hero_logo {
		padding: 5%;
		width: 100%;
		background-color: rgb(var(--main-color));

		.lead {
			margin:  auto;
			text-align: left;

			img {
				width: 60%;
			}

			h2 {
				margin: 5rem 0 2rem;
				font-size: var(--heading1);
				font-weight: 500;
				color: white;
				
				@media (width >= 1024px) {
					.spbr {
						display: none;
					}
				}
			}

			h3 {
				font-size: var(--heading1);
				font-weight: 500;
				color: white;
			}


		}
	}

	.hero_cover {
		width: 100%;
		background-color: rgb(var(--base-color));

		img {
			object-fit: cover;
			height: 100%;
		}
	}

	@media (width >= 768px) {
		display: flex;
		flex-direction: row;
	}
}

.headerContainer {
	position: relative;
	background-color: white;
}

.mainContainer {
	margin-inline: auto;
}

.subContainer {
	margin-inline: auto;
	background-color: white;
}

.contents {
	margin-inline: auto;
	padding: 1rem;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	
	.inner {
		margin-inline: auto;
		width: clamp(200px, 86%, 980px);
	}

	h3 {
		margin: 1.3rem 0;
		padding-bottom: 1.5rem;
		font-size: var(--heading2);
		border-bottom: 1px solid black;
	}
}

.contents.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.contents {
		animation: none !important;
		transform: none !important;
		transition: none !important;
		opacity: 1 !important;
	}
}

.footerContainer {
	background-color: black;
	text-align: center;

	.inner {
		padding: 4rem 0 2rem;

		.footer_sns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-inline: auto;
			gap: 2rem;
			width: clamp(240px,60%,400px);

			img {
				display: inline-block;
				width: clamp(40px,100%,60px);
			}
		}

		.footer_logo {
			margin: 2rem auto;
			width: clamp(240px,60%,400px);

			img {
				width: min(180px,80%,400px);
			}
		}
	}
}

.Loading {
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	background: rgb(var(--main-color));
	height: 100dvh;

	.inner {
		top: 50%;
		left: 50%;  
		transform: translate(-50%, -50%);
		position: absolute;

		h2 {
			font-size: var(--heading1);
			color: white;

			@media (width >= 1024px) {
				.spbr {
					display: none;
				}
			}
		}
	}
}

/*====================================*/

/*ナビ*/
/*====================================*/
#global-nav {
	display: none;
}

.hamburger {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 10px;
	background: white;
	cursor: pointer;

	.hamburger_line {
		position: absolute;
		left: 11px;
		width: 26px;
		height: 3px;
		transition: all 0.4s;
		background-color: rgb(var(--main-color));
	}

	.hamburger_line:nth-of-type(1) {
		top: 14px;
	}
	.hamburger_line:nth-of-type(2) {
		top: 23px;
	}
	.hamburger_line:nth-of-type(3) {
		top: 32px;
	}

	@media (width >= 768px) {
		.hamburger {
			display: inline;
		}
	}
}

.hamburger.active .hamburger_line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger_line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger_line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.hamburger.transparency {
	opacity: 0.8;
}

nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 70dvw;
	height: 100dvh;
	transform: translateX(-100%);
	transition: transform 0.4s;
	background-color: white;
	box-shadow: 2px 0 4px rgba(0,0,0,.1);
}

.nav {
	background-color: rgba(var(--main-color),0.8);

	.drawer_list {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 2rem;
		margin-top: 2rem;
		margin-left: 2rem;
		padding: 1rem 2rem;

		a {
			font-size: var(--heading1);
			font-weight: var(--heading-weight);
			color: white;
		}
	}
}

.nav.active {
	transform: translateX(0);
}

@media (width >= 1024px) {
	#global-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-inline: auto;
		width: 86%;
		height: 5rem;
		line-height: 2.25rem;
		font-size: var(--large-body);
		font-weight: var(--heading-weight);
		border: none;

		li a {
			transition: opacity 0.3s ease;
			color: rgb(var(--main-color));
		}

		li a:hover{
			opacity: 0.7;
		}

		li.navi-logo {
			display: none;
			opacity: 1;
		}
	}

	.hamburger {
		display: none;
	}

	.fixed {
		position: fixed;
		top: 0;
		z-index: 1000;
		width: 100%;
	}

	.headerContainer.fixed {
		background-color: rgb(var(--main-color));

		#global-nav {
			li a {
				color: white;
			}

			li.navi-logo {
				display: block;
				transition: opacity 0.3s ease;
				opacity: 1;

				@starting-style {
					opacity: 0;
				}
			}
		}
	}
}

/*====================================*/

/*お知らせ・キャンペーン*/
/*====================================*/
#campaign {
	.inner {
		margin: 4rem auto 2rem;
		padding-top: 2.5rem;
		padding-bottom: 2rem;
		background-color: rgba(255, 255, 255, 0.8);
		border: 1px solid black;

		ul {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 2rem;
			margin-inline: auto;
			width: 86%;

			li {
				text-align: center;

				.banner {
					margin-inline: auto;
					width: 100%;
					border: 1px solid black;
				}

				p {
					padding-top: 0.3rem;
					font-size: var(--small-body);
					font-weight: 500;

					@media (width >= 768px) {
						font-size: var(--large-body);

						.spbr {
							display: none;
						}
					}
				}
			}
		}
	}
}

/*====================================*/

/*製品特長*/
/*====================================*/
#product {

	.inner {
		margin:2rem auto 4rem;
		padding-top: 1.5rem;
		background-color: rgba(255, 255, 255, 0.8);
		border: 1px solid black;

		h3 {
			margin-inline: auto;
			padding-bottom: 1rem;
			width: 80%;
			font-size: var(--heading3);
			text-align: center;
		}

		ul {
			margin-inline: auto;
			width: 86%;
			text-align: center;

			li {
				margin-bottom: 3rem;

				h4 {
					margin-bottom: 0.4rem;
					text-align: center;

					@media (width >= 768px) {
						font-size: var(--heading2);

						.spbr {
							display: none;
						}
					}
				}

				p {
					text-align: left;

					@media (width >= 768px) {
						font-size: var(--large-body);
					}
				}
			}
		}
	}
}

/*====================================*/

/*カラーリスト*/
/*====================================*/
#colorlist {
	.clist-wrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: start;
 		width: 100%;

		> li {
			padding-bottom: 1rem;
			border-bottom: 1px solid black;
			width: 100%;

			&:last-child {
				border-bottom: none;
			}
		}

		@media (width >= 768px) {
			flex-direction: row;
			gap: 2%;
			
			> li {
				width: 49%;

				&:nth-child(49) {
					border-bottom: none;
				}
			}
		}

		.clist {
			display: grid;
			grid-template-columns: [col-start] 25% [col-2] 75% [col-end] ;
			grid-template-rows: [row-start] min-content [row-2] min-content [row-end];
			margin-inline: auto;
			margin-top: 1rem;
			width: strech;

			> li:nth-child(1) {
				grid-column: col-start / col-2;
				grid-row: row-start / row-2;
				align-self: center;
			}
			> li:nth-child(2) {
				grid-column: col-2 / col-end;
				grid-row: row-start / row-2;
				align-self: center;

				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}
			> li:nth-child(3) {
				grid-column: col-start / col-end;
				grid-row: row-2 / row-end;
				justify-self: right;
				align-self: center;
			}

			@media (width < 390px) {
				grid-template-columns: [col-start] 35% [col-2] 65% [col-end] ;
				grid-template-rows: [row-start] min-content [row-2] min-content [row-end];

				>li:nth-child(1) {
					grid-column: col-start / col-2;
					grid-row: row-start / row-2;
				}
				>li:nth-child(2) {
					grid-column: col-2 / col-end;
					grid-row: row-start / row-2;
				}
				>li:nth-child(3) {
					grid-column: col-start / col-end;
					grid-row: row-2 / row-end;
				}
			} 

			@media (540px <= width <= 767px) {
				grid-template-columns: [col-start] min-content [col-2] 125px [col-3] max-content [col-end] ;
				grid-template-rows: 1fr;

				>li:nth-child(1) {
					grid-column: col-start / col-2;
					grid-row: 1;
				}
				>li:nth-child(2) {
					grid-column: col-2 / col-3;
					grid-row: 1;
				}
				>li:nth-child(3) {
					grid-column: col-3 / col-end;
					grid-row: 1;
				}
			} 

			@media (width >= 768px) {
				grid-template-columns: [col-start] min-content [col-2] 125px [col-end] ;
				grid-template-rows: [row-start] min-content [row-2] auto [row-end];

				>li:nth-child(1) {
					grid-column: col-start / col-2;
					grid-row: row-start / row-2;
				}
				>li:nth-child(2) {
					grid-column: col-2 / col-end;
					grid-row: row-start / row-2;
				}
				>li:nth-child(3) {
					grid-column: col-start / col-end;
					grid-row: row-2 / row-end;
					justify-self: flex-start;
				}

				.colorName {
					white-space: nowrap;
				}
			} 

			@media (width >= 1024px) {
				grid-template-columns: [col-start] min-content [col-2] 125px [col-3] max-content [col-end] ;
				grid-template-rows: 1fr;

				>li:nth-child(1) {
					grid-column: col-start / col-2;
					grid-row: 1;
				}
				>li:nth-child(2) {
					grid-column: col-2 / col-3;
					grid-row: 1;
				}
				>li:nth-child(3) {
					grid-column: col-3 / col-end;
					grid-row: 1;
				}
			}

			.RefNumber {
				display: inline-block;
				padding: 1rem;
				white-space: nowrap;
				font-size: var(--body);
				font-weight: var(--heading-weight);
			}

			.white img {
				border: 1px solid black;
			}

			.colorName {
				display: inline-block;
				padding-top: 0.4rem;
				padding-bottom: 0.4rem;
				padding-left: 1rem;
				font-size: calc(var(--small-body)*0.9);
				font-weight: var(--heading-weight);

				.spbr {
					display: none;

					@media (width < 428px) {
						/* display: inline; */
					}
				}
			}
		}
	}
}

/*====================================*/

/*作家の声*/
/*====================================*/
#testimonials {
	.artist > li {
		margin-bottom: 4rem;
	}

	.profile {
		margin-inline: auto;

		>li:first-child {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			@media (width < 680px) {
				flex-direction: column;
				ul:last-child {
					align-self: flex-end;

					@media (width <= 380px) {
						align-self: flex-start;
					}
				} 
				
			}
		}

		>li:nth-child(2) {
			text-align: right;
			
			figure {
				margin: 10px auto;

				figcaption {
					margin-top: 0.3rem;
				}
			}
		}

		.name {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1rem;

			li:first-child {
				font-size: var(--heading3);
				font-weight: var(--heading-weight);
			}

			@media (width <= 480px) {
				flex-direction: column;
				align-items: baseline;
				gap: 0;
			}
		}

		.sns {
			display: flex;
			align-items: center;

			li {
				margin-right: 5px;
				height: 60px;

				img {
					width: auto;
					height: 100%;
				}
				
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}

/*====================================*/

/*使い方*/
/*====================================*/
#howtouse {
	.video {
		width: 100%;
		aspect-ratio: 16 / 9;

		iframe {
			width: 100%;
			height: 100%;
		}

		div {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			background-color: rgb(var(--base-color));
			text-align: center;

			p {
				display: inline-block;
				font-size: var(--large-body);
				font-weight: var(--heading-weight);
				color: white;
			}
		}
	}
}

/*====================================*/

/*ラインアップ*/
/*====================================*/
#lineup {
	padding-bottom: 3rem;

	.items {
		margin-bottom: 3rem;

		> ul {
			display: flex;
			flex-direction: column;
			gap: 2rem;

			> li {
				padding-bottom: 2rem;
				border-bottom: 1px solid black;

				&:last-child {
					border-bottom: none;
				}
			}

			@media (width >= 768px) {
				display: grid;
				grid-template-columns: [col-start] 50% [col-2] 50% [col-end] ;
				grid-template-rows: [row-start] min-content [row-2] auto [row-end] ;
				column-gap: 1.5rem;
				row-gap: 1.5rem;

				> li {
					padding-right: 1.5rem;
					padding-bottom: none;
					border-bottom: none;

					&:nth-child(1) {
						grid-column: col-start / col-end;
						grid-row: row-start / row-2;
						border-bottom: 1px solid black;
					}
					&:nth-child(2) {
						grid-column: col-start / col-2;
						grid-row: row-2 / row-end;
						border-right: 1px solid black;
					}
					&:nth-child(3) {
						grid-column: col-2 / col-end;
						grid-row: row-2 / row-end;
					}
				}
			}

				figcaption {
					font-size: var(--body);
					font-weight: var(--heading-weight);

					> ul {
						display: flex;
						flex-direction: row;
						justify-content: start;
						gap: 0.4rem;

						li {
							&:first-child span {
								margin: 0;
								padding: 0.2rem 0.4rem 0.1rem;
								border: 1px solid black;
								white-space: nowrap;
							}

							&:last-child span {
								display: inline-block;
								margin-left: 0.4rem;
								font-size: var(--small-body);
								font-weight: var(--body-weight);
							}
						}
					}

					.price {
						margin-top: 0.4rem;
						color: black;
						font-weight: var(--headding-weight);

						> span {
							font-size: var(--small-body);
							font-weight: var(--body-weight);
						}
					}

					.onsale {
						margin-top: 0.4rem;
						color: rgb(var(--main-color));
						font-weight: var(--body-weight);
					}
				}
			}
		}

	.related {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 1rem;
		border: 1px solid black;

		h4 {
			margin-bottom: 1rem;
			padding-bottom: 1rem;
			font-size: var(--heading3);
			font-weight: var(--heading-weight);
			border-bottom: 1px solid black;
			text-align: center;
		}

		> ul {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			padding-bottom: 1.5rem;

			@media (width >= 768px) {
				display: grid;
				grid-template-columns: repeat(2,50%);
				column-gap: 1.5rem;
				row-gap: 1.5rem;
			}

			> li {
				border-bottom: 1px solid black;

				&:first-child {
					padding-bottom: 1.5rem;
				}

				&:last-child {
					border-bottom: none;
				}

				@media (width >= 768px) {
					padding-right: 1.5rem;
					padding-bottom: none;
					border-right: 1px solid black;
					border-bottom: none;

					&:nth-child(2) {
						border-right: none;
					}
				}

				figcaption {
					font-size: var(--large-body);
					font-weight: var(--heading-weight);

					@media (768px <= width <= 1023px) {
						font-size: var(--body);
					}

					> ul {
						display: flex;
						flex-direction: column;
						justify-content: start;
						gap: 0.4rem;

						li {
							 > span {
								display: inline;
								margin: 0;
								padding: 0.1rem 0.5rem 0.2rem;
								color: rgb(var(--body));
								font-weight: var(--heading-weight);
								background: rgb(var(--base-color));
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

		> ul:nth-of-type(1) {
			border-bottom: 1px solid black;
		}
	}
}

/*====================================*/

/*上に戻るボタン*/
/*====================================*/

.Backtotop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 10px;
	background: rgb(var(--main-color));
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 100;

	a {
		width: 45px;
		height: 45px;
	}
	
	a::before {
		top: 5px;
		width: 10px;
		height: 10px;
	}

	.arrow {
		position: absolute;
		top: 20px;
		left: 15px;
		text-decoration: none;
	}

	.arrow::after {
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		border-top: 3px solid white;
		border-left: 3px solid white;
	}

	.arrow--up::after {
		transform: rotate(45deg);
	}
}

.Backtotop.show {
	opacity: 0.8;
	pointer-events: auto;
}