@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Jost:wght@400;500;600;700&display=swap");
/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Outfit', sans-serif;
font-family: 'Jost', sans-serif;
*/
/*
width: min(, );
height: calc( + );
*/

:root {
	--base: 1240;
	--vw: calc(100vw / var(--base));
}

@media only screen and (max-width: 768px) {
	:root {
		--base: 500;
		--vw: calc(100vw / var(--base));
	}
}

.about {
	background: url("../../../img/event/eformul25/about_bg.jpg") top center no-repeat;
	background-size: cover;
}

.about_txts {
	padding: min(calc(74.7 * var(--vw)), 74.7px) 0 min(calc(68 * var(--vw)), 68px);
}

.about_txts_img {
	margin: 0 auto;
}

.about_txts_txt {
	text-align: center;
	color: #fff;
	font-size: min(4vw, 20px);
	line-height: 46px;
	font-weight: 500;
	font-family: "Noto Serif JP", serif;
	letter-spacing: 0em;
	width: min(84vw, 420px);
	margin: calc(61.6 * var(--vw)) auto 0;
}

.youtube {
	width: min(84vw, 420px);
	margin: 0 auto;
	padding: 0 0 100px;
}
.youtube::after {
	content: "";
	display: block;
	width: 100%;
	background: #fff;
	height: 1px;
	margin: 41px 0 0 0;
}
.youtube_txt {
	padding: 0 0 29px;
}
.youtube_wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	width: min(84vw, 420px);
	height: auto;
	margin: 0 auto;
}
.youtube_wrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.comment1,
.comment2 {
	background: #fff;
	position: relative;
}

.comment1 {
	padding: 0 0 min(calc(98 / 500 * 100vw), 98px);
}

.comment1_txt {
	width: calc(140 * var(--vw));
	max-width: 140px;
	position: absolute;
	left: 22px;
	bottom: min(calc(127 / 500 * 100vw), 127px);
}

.comment2 {
	padding: 0 0 min(calc(283 / 500 * 100vw), 283px);
}

.comment2_txt {
	width: calc(263 * var(--vw));
	max-width: 263px;
	position: absolute;
	right: 23px;
	bottom: min(calc(95 / 500 * 100vw), 95px);
}

#eformul25 {
	font-family: "Noto Sans JP", sans-serif;
}

#eformul25 img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: bottom;
}

#eformul25 img,
svg {
	width: 100%;
	height: auto;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
	#eformul25 img {
		image-rendering: -webkit-optimize-contrast;
	}
}

#eformul25 a {
	text-decoration: none;
	color: inherit;
}

#eformul25 *,
#eformul25 *:before,
#eformul25 *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*.container,
.pane-contents,
.*/
.pane-main,
.pane-main div {
	overflow: visible !important;
}

#main {
	padding: 0 !important;
	margin: 0 !important;
}

#main_cont {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

#eformul25 .pc_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	margin-left: 0;
	min-height: 100vh;
	overflow: hidden;
	z-index: -1;
	background: url("../../../img/event/eformul25/pc_bg.jpg") center center no-repeat;
	background-size: cover;
}

#eformul25 .pc_bg h1 {
	display: none;
}

#eformul25 .scroll {
	display: none;
}

@media only screen and (min-width: 1230px) {
	#eformul25 .pc_bg h1 {
		position: absolute;
		top: 47%;
		left: calc(25vw - 125px);
		width: 228px;
		display: block;
		transform: translate(-50%);
	}
}

#eformul25 section {
	position: relative;
	z-index: 3;
}

@media only screen and (max-width: 768px) {
	#eformul25 .pc_bg {
		display: none;
	}

	#eformul25 {
		background: #1f1f1f;
	}
}

#step {
	position: relative;
	width: 100%;
	max-width: 500px;
	background: #1f1f1f;
	z-index: 10;
	overflow: hidden;
}

#step .set {
	position: relative;
	width: 100%;
	background: #1f1f1f url("../../../img/event/eformul25/step_bg.jpg") 0 0 no-repeat;
	background-size: 100% auto;
	padding-top: min(184vw, 920px);
	padding-bottom: min(24vw, 120px);
}

#step .first_set {
	position: relative;
	width: 100%;
	color: #fff;
	z-index: 5;
}

#step .first_set h3 {
	position: relative;
	text-align: center;
	font-size: min(6vw, 30px);
	line-height: 1.8;
	font-weight: 400;
	letter-spacing: 0.1em;
	font-family: "Noto Serif JP", serif;
	padding-bottom: min(6vw, 30px);
}

#eformul25 .normal_txt {
	position: relative;
	text-align: left;
	font-size: min(3.6vw, 18px);
	line-height: 2;
	font-weight: 300;
	letter-spacing: 0.05em;
	width: min(84vw, 420px);
	margin: 0 auto;
}

#eformul25 .cap {
	position: relative;
	text-align: left;
	font-size: min(2.4vw, 12px);
	line-height: 1.6;
	font-weight: 300;
	letter-spacing: 0em;
	width: min(84vw, 420px);
	margin: 0 auto;
}

#eformul25 .normal_txt .sup,
#eformul25 .small_txt .sup {
	display: inline-block;
	font-size: 11px;
	transform: translateY(-6px);
}

#step .first_set .normal_txt {
	padding-bottom: min(12vw, 10px);
}

#step .img_set .cap {
	padding-bottom: min(12vw, 60px);
	color: #fff;
}

#step .component_set .cap {
	color: #dbd3b0;
}

.formula_bg {
	position: relative;
	background: #000;
}

#formula1 {
	position: relative;
	width: 100%;
	max-width: 500px;
	overflow: hidden;
	z-index: 20;
	transition: 0.6s ease-out !important;
	background: url("../../../img/event/eformul25/formula1_bg.png") 0 0 no-repeat;
	background-size: 100% auto;
	background-color: #383632;
	border-top-right-radius: min(5.6vw, 28px);
	border-top-left-radius: min(5.6vw, 28px);
	margin-top: -30px;
}

#formula1 .set {
	position: relative;
	width: 100%;
	padding-top: min(76vw, 380px);
	color: #dbd3b0;
}

.formula h3 {
	position: relative;
	text-align: left;
	font-size: min(8vw, 40px);
	line-height: 1.325;
	font-weight: 400;
	letter-spacing: 0em;
	font-family: "Noto Serif JP", serif;
	padding-bottom: min(4vw, 20px);
	padding-left: min(8vw, 40px);
	white-space: nowrap;
}

#formula1 .normal_txt {
	padding-bottom: min(2vw, 10px);
}

#formula1 .cap:last-of-type {
	padding-bottom: min(28vw, 140px);
}

.formula h3 .tl {
	position: relative;
	display: inline-block;
	transform: translateX(-8px);
}

.formula h3 .tl2 {
	position: relative;
	display: inline-block;
	transform: translateX(-30px);
}

@media only screen and (max-width: 768px) {
	.formula h3 .tl {
		position: relative;
		display: inline-block;
		transform: translateX(-1.6vw);
	}

	.formula h3 .tl2 {
		position: relative;
		display: inline-block;
		transform: translateX(-6vw);
	}
}

#formula2 {
	position: relative;
	width: 100%;
	max-width: 500px;
	overflow: hidden;
	z-index: 30;
	transition: 0.6s ease-out !important;
	color: #fff;
	border-top-right-radius: min(5.6vw, 28px);
	border-top-left-radius: min(5.6vw, 28px);
	margin-top: -30px;
}

#formula2 #first_set {
	position: relative;
	width: 100%;
	background: url("../../../img/event/eformul25/formula2_1_bg.png") 0 0 no-repeat;
	background-size: 100% auto;
}

#formula2 .set {
	position: relative;
	width: 100%;
	padding-top: min(76vw, 380px);
}

.formula h3 .sup {
	display: inline-block;
	font-size: 11px;
	transform: translateY(-20px);
}

@media only screen and (max-width: 768px) {
	.formula h3 .sup {
		transform: translateY(-4vw);
	}
}

#formula_banner {
	position: relative;
	width: min(100%, 500px);
	overflow: hidden;
}

#formula_banner img {
	transition: 0.6s ease-in-out !important;
	opacity: 1 !important;
}

#formula_banner a {
	position: relative;
	display: block;
	width: 100%;
}

#formula_banner a:hover::after {
	transform: scale(1.2);
	opacity: 0.6;
}

#formula2 .normal_txt {
	padding-bottom: min(8vw, 30px);
}

#formula2 .cap {
	padding-bottom: min(33vw, 168px);
}

#bottom {
	width: 100%;
	background: url("../../../img/event/eformul25/bottom_bg.png") 0 0 no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	margin-top: -95px;
	z-index: 40;
	padding: min(calc(156.6 * var(--vw)), 156.6px) 0 min(calc(100 * var(--vw)), 100px);
}

@media only screen and (max-width: 768px) {
	#bottom {
		margin-top: -19vw;
	}
}

.bottom_bnr {
	width: calc(450 * var(--vw));
	max-width: 450px;
	margin: 0 auto;
	position: relative;
}

.bottom_bnr_img a:hover {
	opacity: 0.8;
}

.bottom_bnr_btn {
	position: absolute;
	left: 50%;
	bottom: min(calc(50 * var(--vw)), 50px);
	transform: translateX(-50%);
	width: calc(384 * var(--vw));
	max-width: 384px;
}

@keyframes loop2 {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	60% {
		opacity: 0.3;
		transform: scale(1);
	}

	90% {
		opacity: 0;
		transform: scale(1.02);
	}

	100% {
		opacity: 0;
		transform: scale(1.02);
	}
}

@keyframes loop1 {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	10% {
		opacity: 0;
		transform: scale(0.7);
	}

	70% {
		opacity: 0.3;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.02);
	}
}

/*transition*/
#eformul25 .fade {
	opacity: 0;
	filter: blur(10px);
	transition: 0.9s ease-out;
}

#eformul25 .fade.start {
	opacity: 1;
	filter: blur(0);
	transition-delay: 0.3s;
}

#eformul25 .slide_in {
	opacity: 0;
	transform: translateX(-60px);
	transition: 0.9s ease-out;
}

#eformul25 .slide_in.start {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.6s;
}

#eformul25 .formula {
	transform: translateY(40px);
	transition: 0.9s ease-out;
}

#eformul25 .formula.start {
	transform: translateY(0);
	transition-delay: 0.3s;
}

#eformul25 .fade_img {
	opacity: 0;
	transform: translateY(30px);
	transition: 0.9s ease-out;
}

#eformul25 .fade_img.start {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}

#eformul25 .img_set .set_box {
	opacity: 0;
	filter: blur(10px);
	transition: 0.9s ease-out;
}

#footer_pagetop {
	opacity: 0;
}

footer {
	background: #fff;
}

.pane-topic-path,
.pane-footer {
	z-index: 100;
}

.pane-footer {
	padding-top: 0 !important;
}

.container,
.pane-main,
.block-container-section.block-topic-details {
	padding: 0 !important;
	top: 0 !important;
	margin: 0 !important;
}

#footer_pagetop a {
	display: block;
	border: 1px solid #222;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
}
#footer_pagetop a::before {
	content: "";
	width: 1rem;
	height: 1rem;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	transform-origin: center center;
	position: absolute;
	top: 1.7rem;
	left: 1.5rem;
	transform: rotate3d(0, 0, 1, -45deg);
}
@media (max-width: 768px) {
	#footer_pagetop {
		right: 2rem;
		bottom: 88px;
	}
}