@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Zen+Old+Mincho:wght@400;600&display=swap');

/* -------------------------------------
  .contentWrap#synerg
----------------------------------------*/
.contentWrap#synerg {
	background-color: #282828;
	color: #ffffff;
	text-align: center;
	background-image: url("/img/common/bg-globe.svg");
	background-position: center 24vw;
	background-repeat: no-repeat;
	background-size: 200% auto;
}
.contentWrap#synerg .inner {
	width: 92%;
	max-width: 926px;
	padding: 4em 0 8em 0;
}
.en {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
}
.enTitle {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-size: min(4.6vw, 18px);
	letter-spacing: 0.025em;
	line-height: 1.2;
	padding: 1em 0;
	margin-bottom: 1em;
}
#totop {
	background-color: initial;
}
@media screen and (min-width: 768px) {
	.contentWrap#synerg {
		background-size: auto;
	}
	.contentWrap#synerg .inner {
		padding-top: 0;
		padding-bottom: 288px;
	}
	.enTitle {
		font-size: min(4.6vw, 23px);
		padding: 2em 0;
		margin-bottom: 2em;
	}
}
/* -------------------------------------
  .introArea
----------------------------------------*/
.introArea {
	padding: 0 1em;
	margin-bottom: 40px;
}
/*.introArea h1 {
	font-size: min(3.4vw, 30px);
	line-height: 1.56;
	letter-spacing: 0.05em;
	font-weight: 400;
	margin-bottom: 3.3em;
}*/
.introArea .mainTextImg {
	width: 65%;
	margin: 0 auto min(8.18vw, 94px);
}
/* .introArea h2 {
	font-size: min(6.96vw, 80px);
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	margin-bottom: 0.35em;
}
.introArea h3 {
	font-size: min(4.09vw, 47px);
	letter-spacing: 0.005em;
	margin-bottom: 2em;
} */
.introArea p {
	font-size: min(3vw, 18px);
	font-weight: 300;
	text-align: left;
}
@media screen and (min-width: 768px) {
	.introArea {
		margin-bottom: 75px;
	}
	/*.introArea h1 {
		font-size: min(2.61vw, 30px);
	}*/
	.introArea p {
		font-size: min(2vw, 18px);
		line-height: 1.83;
		letter-spacing: 0.075em;
		text-align: center;
	}
}
/* -------------------------------------
  .detailArea
----------------------------------------*/
.detailArea {
	border-radius: min(4vw, 67px);
	background-color: rgba(255,255,255,0.95);
	color: #040000;
	padding: min(7vw, 52px) min(7vw, 142px);
}
.detailArea .btnWrap {
	width: 15%;
	margin: 0 auto 3%;
}
.detailArea .btnWrap .next {
	opacity: 0;
}
.detailArea .btnWrap .next.view {
	transition: opacity 2s;
	opacity: 1;
}
.detailArea .btnWrap .next.view:hover {
	transition: opacity 0.2s ease-out;
	opacity: 0.6;
    cursor: pointer;
}
@media screen and (min-width: 768px) {
	.detailArea .btnWrap {
		width: 80px;
		margin: 0 auto 25px;
	}
}
@media screen and (min-width: 1040px) {
	.detailArea {
		border-radius: 67px;
		padding: 52px 142px;
	}
}
/*.type*/
.type {
	display: flex;
	justify-content: center;
	position: relative;
	margin-bottom: min(6.26vw, 58px);
}
/*.type:before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: min(21.38vw, 198px);
	height: min(21.38vw, 198px);
	background-image: url("/img/synergy/cross.svg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}*/
.type .cross {
	width: min(21.38vw, 198px);
	height: min(21.38vw, 198px);
}
.type .logoBox {
	position: relative;
	width: min(21.38vw, 198px);
	height: min(21.38vw, 198px);
}
.type .logoBox li {
	position: absolute;
	display: flex;
	width: min(21.38vw, 198px);
	height: min(21.38vw, 198px);
	opacity: 0;
}
.type .logoBox li.active {
	animation: shuffle 0.5s ease infinite;
}
.type .logoBox li.view {
	transition: 3s;
	opacity: 1;
}
.type .logoBox li.resultLogo {
	transition: opacity 0.5s;
}
@keyframes shuffle {
	0%{
		opacity: 0;
	}
	40%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*.result*/
.detailArea .result {
	display: none;
}
.detailArea .result h2,
.detailArea .result h3,
.detailArea .result > p:last-of-type {
	margin-bottom: min(5.72vw, 53px);
}
.detailArea .result h2 {
	color: #231815;
	font-size: min(5.29vw, 49px);
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	line-height: 1.2;
	padding: 0.5em;
	border-top:1px solid #2b2320;
	border-bottom:1px solid #2b2320;
}
.detailArea .result h3 {
	color: #231815;
	font-size: min(3.89vw, 36px);
	font-weight: 400;
	letter-spacing: 0.075em;
	line-height: 1.47;
}
.detailArea .result .detailWrap img {
	display: block;
	width: 80%;
    margin: 0 auto;
	border-radius: 11px;
}
.detailArea .result figure {
	width: 80%;
    margin: 0 auto;
}
.detailArea .result figure img {
	border-radius: 11px;
}
.detailArea .result .detailWrap {
	margin-bottom: min(5.72vw, 53px);
}
.detailArea .result .detailWrap * {
	font-weight: 300;
	letter-spacing: 0.075em;
	line-height: 1.6;
	text-align: left;
}
.detailArea .result p:last-child {
	margin-bottom: 0;
}