@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap')
/*font-family: 'Noto Sans JP', sans-serif;*/
/*font-family: 'Zen Maru Gothic', serif;*/

/* CSS Document */
article, aside, section, nav, header, footer { display: block; }
* { margin: 0; padding: 0; font-size: 100%;}
*, *:after, *::before { box-sizing: border-box; }
body {
	position: relative;
	z-index: 0;
	color: #333;
	font-family: Arial, 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1;
	background-color: #333;
}
img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #4d7272;
	text-decoration: none;
	transition: .2s;
}
a:hover {
	color: #eaff06;
}
a img {
	transition: .2s;
}
a:hover:not(.roll) img {
	opacity: .5;
	transition: .2s;
}

a.btn {
	display: inline-block;
	min-width: min(20vw, 8rem);
	padding: max(0.5vw, 5px);
	color: #fff;
	font-weight: 700;
	text-align: center;
	background-color: #4d7272;
}
a.btn:hover {
	color: #fff;
	background-color: #d0b968;
}

.nolink {
    color: #54464f;
    pointer-events: none;
    text-decoration: none;
}

/*///////////////////////////////////////////////////////////////
	common class
/////////////////////////////////////////////////////////////////*/
/* mobile display none */
.mdn { display: none; }
.mdnbr br { display: none; } 
br.nbr { display: none; }
/* mobile display visible */
.mdv { display: block; }
.mdvbr br { display: inline; } 

.t_min { font-family: Century, 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; }

/*///////////////////////////////////////////////////////////////
	teaser
/////////////////////////////////////////////////////////////////*/
#topMain {
	position: relative;
	z-index: 0;
	width: 100%;
	> div {
		width: 100%;
		> img {
			width: 100%;
			height: auto;
		}
	}
	
	a#logoANIM {
		position: absolute;
		top: 1%;
		left: 1%;
		display: block;
		width: clamp(60px, 15vw, 180px);
	}
}

#contents {
	position: relative;
	padding: 0.1px;
	background-color: #eee;
	background-image: url(images/teaser/bg_1.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	
	#openDate {
		position: absolute;
		top: -5.2vw;
		left: 0;
		z-index: 1;
		width: 100%;
		> img {
			width: 100%;
			height: auto;
		}
	}
	
	#product {
		position: relative;
		z-index: 2;
		width: min(90vw, 1600px);
		margin: 27vw auto 8vw;
		padding: 4vw 2vw;
		border: min(0.5vw, 2px) solid #645852;
		background-color: #fff;
		
		> h1 {
			position: relative;
			margin-bottom: 4vw;
			font-size: clamp(1.3rem, 0.753rem + 2.73vw, 4rem);
			font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
			font-weight: 900;
			color: #645852;
			line-height: 1.3;
			text-align: center;
			
			&::after {
				content: "";
				display: block;
				width: 100%;
				height: min(3vw, 35px);
				background-image: url(images/teaser/line_1.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
			}
		}
	}
	#proList > div {
		display: flex;
		flex-direction: column;
		gap: 5vw;
		
		& ~ div {
			margin-top: min(5vw, 70px);
		}
		
		> dl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1vw;
			
			> dt {
				font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
				text-align: right;
				
				span {
					display: inline-block;
				}
			}
			> dd {
				font-size: clamp(1rem, 0.635rem + 1.82vw, 2.8rem);
				font-weight: 800;
				text-align: center;
				
				span {
					display: inline-block;
				}
			}
		}
	}
}

.cor {
	position: absolute;
	width: min(30vw, 215px);
	height: min(30vw, 215px);
}
.cor_tl {
	top: clamp(-16px, -2.2vw, -8px);
	left: clamp(-16px, -2.2vw, -8px);
}
.cor_tr {
	top: clamp(-16px, -2.2vw, -8px);
	right: clamp(-16px, -2.2vw, -8px);
	transform: rotate(90deg)
}
.cor_bl {
	bottom: clamp(-16px, -2.2vw, -8px);
	left: clamp(-16px, -2.2vw, -8px);
	transform: rotate(-90deg)
}
.cor_br {
	bottom: clamp(-16px, -2.2vw, -8px);
	right: clamp(-16px, -2.2vw, -8px);
	transform: rotate(180deg)
}

/*///////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////*/
#footer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: max(1vw, 8px);
	width: 100%;
	padding: max(0.7vw, 10px) 1vw;
	background-color: #333;
	
	#footerSNS {
		display: flex;
		align-items: center;
		gap: max(0.5vw, 5px);
	}
	
	footer {
		color: #fff;
		font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
	}
}



@media(667px <= width < 960px){
/*	Tablet -- 667px ~ 959px	*/
	body {
		font-size: 2.2vw;
	}
	/*/////////// ■common class■ ///////////*/
	.t-sm {
		font-size: 80%;
	}
}/*	Tablet -- end */

@media(960px <= width){
/*	PC -- 960px ~	*/
	body {
		font-size: 1.4rem;
	}
	/*/////////// ■common class■ ///////////*/
	
	/* mobile display none */
	.mdn { display: block; }
	.mdnbr br { display: inline; } 
	br.nbr { display: inline; }
	.mdnsp { display: inline; }
	/* mobile display visible */
	.mdv { display: none; }
	.mdvbr br { display: none; }
	
	.t-sm {
		font-size: 70%;
		line-height: 1.5;
	}
	/*/////////// ■teaser■ ///////////*/
	#contents {
		#proList > div {
			flex-direction: row;
			
			>dl {
				flex-direction: row;
				
				> dt {
					width: 8vw;
				}
				
				> dd {
					text-align: left;
				}
			}
		}
	}
	
	/*/////////// ■Footer■ ///////////*/
	#footer {
		flex-direction: row;
	}
	
}/*	PC -- end */