.themeExtra h3{
	font-size: 1.5em;
}

ul.history{
	margin-top:1em;
	display: flex;
	aspect-ratio:2.07;
	background: url(../images/history.jpg) no-repeat center/contain;
}

ul.history li{
	width:33.33%;
}
ul.history li:nth-child(1){ color:#6e5e47;}
ul.history li:nth-child(2){ color:#996441;}
ul.history li:nth-child(3){ color:#494949;}

ul.history li button{
	border: none;
	background: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
	cursor: pointer;
	color: inherit;
	transition: background 0.2s;
}
ul.history li button:hover{
	background:rgba(255, 255, 255, 0.15);
}
ul.history li button span{
	text-indent: -9999px;
	line-height: 0;
	position: relative;
	display: block;
	width:1.45em;
	aspect-ratio:1;
	border-radius:50%;
	background: currentColor;
	
}
ul.history li button span:before{
	position: absolute;
	content:"";
	display: block;
	left:50%;
	top:50%;
	width:115%;
	aspect-ratio:1;
	transform-origin: left top;
	transform: translate(-50%, -50%);
	border:0.14em solid;
	border-radius:50%;
	animation: expand 1s ease-out infinite;
}
@keyframes expand{
	to{
		opacity: 0;
		transform: scale(2.2) translate(-50%, -50%);
	}
}

ul.history li .txt{
	display: none;
}

/************************ overlay start ****************************/
.overlay.history{
	background: rgba(255, 255, 255, 0.9);
}
.overlay.history .overlayCT{
	border-radius: 0;
	max-width: 950px;
	height:auto;
	padding: 3.5em;
	color:#FFF;
	box-shadow:0 0 1em 0.5em rgba(0, 0, 0, 0.075);
}
.overlay.history.h1 .overlayCT{ background: #d7c6a8;}
.overlay.history.h2 .overlayCT{ background: #dcaa89;}
.overlay.history.h3 .overlayCT{ background: #a9a49b;}

.overlay.history .txt:before{
	content: "";
	display: block;
	margin:0 auto 2em;
	width:25%;
	aspect-ratio:5.92;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.overlay.history.h1 .txt:before{background-image: url(../images/t1.png);}
.overlay.history.h2 .txt:before{background-image: url(../images/t2.png);}
.overlay.history.h3 .txt:before{background-image: url(../images/t3.png);}

.overlay.history p{
	margin:0;
	line-height: 2em;
}

.overlay.history .closeBtn{
	right:10px;
	bottom:auto;
	top:10px;
	color:#494949;
	transition: transform 0.2s;
}
.overlay.history .closeBtn:hover{
	transform: rotate(-90deg);
}
.overlay.history .closeBtn:before,
.overlay.history .closeBtn:after{
	background: currentColor;
}
/************************ overlay end ****************************/

.themeImage .tabBlock .tabBtn{
	display: none;
}


@media screen and (max-width:767px){
	
	.themeExtra{
		font-size: 0.8em;
	}
	
	.themeExtra h3{
		margin-left: 0.5em;
	}
	
	ul.history li button span{
		width:0.75em;
	}
	ul.history li button span:before{
		border-width:0.08em;
	}
	
	/************************ overlay start ****************************/
	.overlay.history .overlayCT{
		padding: 2.5em 2em 2em;
	}

	.overlay.history .txt:before{
		width:55%;
	}
	/************************ overlay end ****************************/
	
}