@charset "UTF-8";
:root {
	--p3HxgHeight: 140px;
	--p3HxgCoef: 1.68;
	--p3HxgWidth: calc( var(--p3HxgHeight) * var(--p3HxgCoef) );
	--p3HxgBrdRadius: 10px;
	
	--p3HxgBigHeight: 350px;
	--p3HxgBigCoef: 1.65;
	--p3HxgBigWidth: calc( var(--p3HxgBigHeight) * var(--p3HxgBigCoef) );
	--p3HxgBigBrdRadius: 20px;
}

main {
	gap: unset;
}

section {
	position: relative;
	width: calc( 1.1 * var(--p3HxgWidth) );
	height: calc( 2 * var(--p3HxgHeight) );
	cursor: pointer;
	transition: width 1s ease-in-out, height 1s ease-in-out;
}

.p3Hxg {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: var(--p3HxgWidth);
	height: var(--p3HxgHeight);
	border-radius: var(--p3HxgBrdRadius);
	background-color: var(--color-yellow);
	opacity: 1;
	z-index: -1;
	transition: 
		width 1s ease-in-out, 
		height 1s ease-in-out,
		border-radius 1s ease-in-out,
		top 1s ease-in-out,
		opacity 0s ease-in-out 1s;
}
.p3Hxg:before, .p3Hxg:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	background-color: inherit;
	border-radius: inherit;
	border: inherit;
	opacity: inherit;
	z-index: -1;
	transition: inherit;
}
.p3Hxg:before {
	transform: rotateZ(-60deg);
}
.p3Hxg:after {
	transform: rotateZ(60deg);
}
.p3HxgUp {
	top: calc( 0.5 * var(--p3HxgHeight) );
}
.p3HxgDown {
	opacity: 0;
	top: calc( 0.5 * var(--p3HxgHeight) );
}

.content130 {
	display: inline-block;
	width: var(--p3HxgWidth);
	height: var(--p3HxgHeight);
	margin-top: calc( 0.5 * var(--p3HxgHeight) );
	border-radius: var(--p3HxgBrdRadius);
	transition: 
		width 1s ease-in-out, 
		height 1s ease-in-out,
		border-radius 1s ease-in-out,
		margin-top 1s ease-in-out,
		opacity 1s ease-in-out 1s;
	
	.p3Title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: var(--p3HxgWidth);
		font-size: 160%;
		font-weight: bold;
		transition: 
			width 1s ease-in-out, 
			top 1s ease-in-out,
			translate 1s ease-in-out,
			font-size .5s ease-in-out;
	}
	.p3Title:hover {
		font-size: 200%;
	}
	.open {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) translateY(calc( -0.02 * var(--p3HxgHeight))) rotateZ(-90deg);
		font-family: "Amatic SC";
		font-size: 350%;
		letter-spacing: -0.2em;
		cursor: pointer;
		transition: transform 0.5s;
	}
	.open:hover {
		transform: translateX(-50%) translateY(calc( -0.06 * var(--p3HxgHeight))) rotateZ(-90deg);
	}
	.testify {
		display: none;
		opacity: 0;
		font-size: 200%;
		height: 100%;
		overflow: auto;
		padding-right: 5px;
		padding-top: 10px;
		transition: opacity 0.5s ease-in-out;
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		.testifyTitle {
			font-weight: 600;
			font-size: 80%;
		}
		img {
			margin-top: 20px;
			max-width: 200px;
		}
		blockquote {
			margin: 10px;
			font-style: italic;
			text-align: justify;
			font-size: 50%;
			letter-spacing: 0;
		}
		cite {
			display: inline-block;
			width: 100%;
			text-align: right;
			font-size: 65%;
		}
	}
}

.p3HxgColor5 {
	.testify a img {
			max-width: unset;
			width: 100%;
		}
}
.p3HxgColor6 {
	.testify a img  {
		max-width: 250px;
	}
}

.p3HxgColor7 {
	.testify a img  {
		max-width: 300px;
	}
}

.p3HxgColor8 {
	.testify img {
			max-width: unset;
			width: 40%;
		}
	.testify a img {
		width: 80px;
	}
}

.content13.show {
	width: calc( 1.1 * var(--p3HxgBigWidth) );
	height: calc( 2.5 * var(--p3HxgBigHeight) );
	cursor: unset;
	
	.p3Hxg {
		width: var(--p3HxgBigWidth); 
		height: var(--p3HxgBigHeight);
		border-radius: var(--p3HxgBigBrdRadius);
	}
	.p3HxgUp {
		top: calc( 0.5 * var(--p3HxgBigHeight) );
	}
	.p3HxgDown {
		transition: 
			width 1s ease-in-out, 
			height 1s ease-in-out,
			border-radius 1s ease-in-out,
			top 1s ease-in-out,
			opacity 0s ease-in-out 0s;
		opacity: 1;
		top: calc( 1 * var(--p3HxgBigHeight) );
	}
	
	.content130 {
		transition: 
			width 1s ease-in-out, 
			height 1s ease-in-out,
			border-radius 1s ease-in-out,
			margin-top 1s ease-in-out,
			opacity 0.5s ease-in-out;
		width: var(--p3HxgBigWidth);
		height: calc(100% - 1 * var(--p3HxgBigHeight) );
		margin-top: calc( 0.5 * var(--p3HxgBigHeight) );
		border-radius: var(--p3HxgBigBrdRadius);
		padding: 10px;
		box-sizing: border-box;
	}
			
	.content130 .p3Title {
		top: calc( 0.5 * var(--p3HxgBigHeight) );
		transform: translateX(-50%) translateY(-100%);
		width: calc(var(--p3HxgBigWidth) - 150px);
		font-size: 200%;
	} 
	.content130 .open {
		transform: translateX(-50%) translateY(calc( -0.15 * var(--p3HxgBigHeight))) rotateZ(90deg);
	}
	.content130 .testify {
		display: block;
		transition: 
			opacity 0.5s ease-in-out 0.5s;
		opacity: 1;
	}
}

#content134.content13.show .content130 .p3Title{
	top: calc( 0.5 * var(--p3HxgBigHeight) );
	transform: translateX(-50%) translateY(-70%);
	font-size: 180%;
}

@media screen and (max-height: 1000px) {
	:root {
		--p3HxgBigHeight: 35vh;
	}
	
	.content13.show .content130 {
		.p3Title {
			font-size: 180%;
		}
		
		.testify {
			text-align: justify;
			letter-spacing: normal;
		}
		.testifyTitle {
			font-size: 70%;
		}
		
		.testifyContent {
			font-size: 90%;
		}
	}
}

@media screen and (max-height: 900px) {
	#content11 {
		margin-top: 45vh;
	}
}

@media screen and (max-height: 650px) {
	.content13.show .content130 {
		.p3Title {
			font-size: 180%;
			transform: translateX(-50%) translateY(-60%);
		}
		
		.testify {
			text-align: justify;
			letter-spacing: normal;
		}
		.testifyTitle {
			font-size: 90%;
		}
		
		.testifyContent {
			font-size: 90%;
		}
	}
}

@media screen and (max-width: 650px) {
	:root {
		--p3HxgBigHeight: 300px;
	}
	
	.content13.show .content130 {
		.p3Title {
			font-size: 180%;
		}
		
		.testify {
			text-align: justify;
			letter-spacing: normal;
		}
		.testifyTitle {
			font-size: 90%;
		}
		
		.testifyContent {
			font-size: 90%;
		}
	}
}

@media screen and (max-height: 550px) {
	.content13.show .content130 {
		.p3Title {
			font-size: 180%;
			transform: translateX(-50%) translateY(-50%);
		}
		
		.testify {
			text-align: justify;
		}
		
		.testifyTitle {
			font-size: 80%;
		}
		
		.testifyContent {
			font-size: 80%;
		}
	}
}

@media screen and (max-width: 550px) {
	:root {
		--p3HxgBigHeight: 250px;
	}
	
	.content13.show .content130 {
		.p3Title {
			font-size: 180%;
		}
		
		.testify {
			text-align: justify;
		}
		
		.testifyTitle {
			font-size: 80%;
		}
		
		.testifyContent {
			font-size: 80%;
		}
	}
}

@media screen and (max-height: 450px) {
	.content13.show .content130 {
		.p3Title {
			font-size: 160%;
			transform: translateX(-50%) translateY(-40%);
		}
		
		.testifyTitle {
			font-size: 70%;
		}
		
		.testifyContent {
			font-size: 60%;
		}
	}
}

@media screen and (max-width: 450px) {
	:root {
		--p3HxgBigHeight: 200px;
	}
	
	.content13.show .content130 {
		.p3Title {
			font-size: 160%;
		}
		
		.testifyTitle {
			font-size: 70%;
		}
		
		.testifyContent {
			font-size: 60%;
		}
	}
}

@media screen and (max-height: 350px) {
	.content13.show .content130 {
		.p3Title {
			font-size: 140%;
			transform: translateX(-50%) translateY(-40%);
		}
		
		.testifyTitle {
			font-size: 60%;
		}
		
		.testifyContent {
			font-size: 45%;
		}
	}
}

@media screen and (max-width: 350px) {
	:root {
		--p3HxgBigHeight: 150px;
		--p3HxgBigCoef: 1.6;
	}
	
	.content13.show .content130 {
		.p3Title {
			font-size: 140%;
			transform: translateX(-50%) translateY(-40%);
		}
		
		.testifyTitle {
			font-size: 60%;
		}
		
		.testifyContent {
			font-size: 45%;
		}
	}
}