/* --------------------------------------------------------------------------------
reset
-------------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	font: inherit;
	border: none;
	margin: 0px;
	padding: 0px;
}
html {
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
}
a {
	text-decoration: none;
	color: inherit;
}
ul,
ol {
	list-style: none;
}
table {
	border-collapse: collapse;
}
iframe,
img,
svg,
video {
	display: block;
}
img {
	max-width: 100%;
	height: auto;
}



/* --------------------------------------------------------------------------------
essential
-------------------------------------------------------------------------------- */

html {
	font-size: 16px;
}
body {
	text-align: justify;
	overflow-wrap: break-word;
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: 400;
	font-feature-settings: "palt";
	line-height: 1.875rem;
	color: #ffffff;
	background-color: #000064;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/* --------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------- */

div#page {
	position: relative;
	overflow: hidden;
}



/* --------------------------------------------------------------------------------
main
-------------------------------------------------------------------------------- */

main div#splash {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 100;
	background-color: #fdfdfd;
	transition: 0.5s opacity 0.5s ease-in-out;
}
main div#splash.deactive {
	pointer-events: none;
	opacity: 0;
}
main div#splash div.inner-splash {
	opacity: 0;
	transition: 0.5s opacity 0.25s ease-in-out, 0.5s transform 0.25s ease;
	transform: scale(0.9375);
}
main div#splash.active div.inner-splash {
	opacity: 1;
	transform: scale(1);
}
main div#splash.deactive div.inner-splash {
	opacity: 0;
	transition-delay: 0s;
}
main div#splash :where(h1, p.headline, p.loading) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
main div#splash h1 {
	margin-bottom: 40px;
}
main div#splash h1 img {
	width: 237px;
}
main div#splash p.headline {
	position: relative;
	z-index: 1;
	margin-bottom: -40px;
}
main div#splash p.headline img {
	width: 108px;
}
main div#splash div.video {
	width: 240px;
	height: 240px;
	margin-bottom: 20px;
	clip-path: polygon(2.5% 2.5%, 97.5% 2.5%, 97.5% 97.5%, 2.5% 97.5%);
}
main div#splash div.video video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
main div#slide {
	overflow: hidden;
}
main div#splash p.gauge {
	width: 120px;
	height: 10px;
	border: 1px solid #000064;
	margin: 0px auto 10px auto;
}
main div#splash p.gauge::before {
	display: block;
	position: relative;
	height: 100%;
	background-color: #ff00ff;
	content: "";
	transform-origin: left top;
	transform: scaleX(0);
}
main div#splash.active p.gauge::before {
	animation: gauge 2.5s ease-in-out 0.5s 1 forwards;
}
@keyframes gauge {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
main div#splash.active p.loading {
	animation: loading 0.5s infinite forwards;
}
@keyframes loading {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
main div#splash p.loading img {
	width: 74px;
}
main div#slide div.inner-slide {
	display: flex;
	flex-wrap: wrap;
	width: 99999px;
}
main div#slide section {
	display: flex;
	flex-wrap: wrap;
	pointer-events: none;
}
main div#slide section div:where(.main, .sub) {
	position: relative;
	height: calc(100svh - 60px);
}
main div#slide section div.main {
	aspect-ratio: 375 / 600;
	z-index: 1;
}
main div#slide section div.main :where(p.button-youtube, h2, p.balloon, p.body, p.image) {
	position: absolute;
}
main div#slide section div.main :where(p.button-youtube, h2, p.balloon, p.body, p.image) img {
	width: 100%;
}
main div#slide section div.main p:where(.button-youtube, .balloon-01) {
	top: 20px;
}
main div#slide section div.main p.button-youtube {
	width: calc(100% - 40px);
	left: 20px;
	pointer-events: auto;
	cursor: pointer;
}
main div#slide section div.main p.button-youtube::before {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	content: "";
}
main div#slide section div.main p.button-youtube span {
	position: absolute;
	width: 50px;
	height: 50px;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	z-index: 1;
	background-color: #ff00ff;
	border-radius: 50%;
	transition: 0.25s background-color ease;
}
main div#slide section div.main p.button-youtube:hover span {
	background-color: #ffffff;
}
main div#slide section div.main p.button-youtube span::before {
	position: absolute;
	width: 20px;
	height: 25px;
	left: calc(50% - 7.5px);
	top: calc(50% - 12.5px);
	background-color: #ffffff;
	content: "";
	transition: 0.25s background-color ease;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
main div#slide section div.main p.button-youtube:hover span::before {
	background-color: #ff00ff;
}
main div#slide section div.main p.balloon-01 {
	width: calc(100% * calc(119 / 375));
	left: 100%;
}
main div#slide section div.main :where(h2, p.body) {
	left: 20px;
}
main div#slide section div.main h2 {
	width: calc(100% * calc(275 / 375));
	top: 37%;
}
main div#slide section div.main h2 img {
	width: 100%;
}
main div#slide section div.main p.balloon-02 {
	width: calc(100% * calc(128 / 375));
	left: 58%;
	top: 60%;
}
main div#slide section div.main p.body {
	width: calc(100% * calc(325 / 375));
	top: 68%;
}
main div#slide section div.main p.image {
	width: calc(100% * calc(67 / 375));
	left: 72.5%;
	top: 30%;
}
@media (max-width:767px) {
main div#slide section div.main {
	aspect-ratio: unset;
	width: 100vw;
}
main div#slide section div.main h2 {
	width: calc(100% * calc(265 / 375));
	top: calc(calc(100vw * calc(195 / 350)) + 10px);
}
main div#slide section div.main p.balloon-02 {
	width: calc(100% * calc(118 / 375));
	top: calc(calc(calc(100vw * calc(195 / 350)) + calc(calc(100vw * calc(265 / 350)) * calc(176 / 275))) - calc(100vw * 0.09));
}
main div#slide section div.main p.body {
	width: calc(100% * calc(315 / 375));
	top: calc(calc(calc(100vw * calc(195 / 350)) + calc(calc(100vw * calc(265 / 350)) * calc(176 / 275))) + calc(100vw * 0.03));
}
main div#slide section div.main p.image {
	top: calc(calc(100vw * calc(195 / 350)) - 40px);
}
}
main div#slide section div.sub {
	aspect-ratio: 1500 / 600;
	overflow: hidden;
}
main div#slide section div.sub div.block {
	position: absolute;
	width: 100%;
	height: 100%;
}
main div#slide section div.sub div.block :where(p.catch, h3, p.body, p.number, p.image) {
	position: absolute;
}
main div#slide section div.sub div.block :where(p.catch, h3, p.body, p.number, p.image) img,
main div#slide section div.sub div.block p.number svg {
	width: 100%;
}
main div#slide section div.sub div.block-01 {
	left: 2%;
	bottom: 2%;
}
main div#slide section div.sub div.block-01 p.catch {
	width: calc(100% * calc(211 / 1500));
	left: 0%;
	bottom: 77.5%;
}
main div#slide section div.sub div.block-01 h3 {
	width: calc(100% * calc(227 / 1500));
	left: 0%;
	bottom: 70%;
}
main div#slide section div.sub div.block-01 p.body {
	width: calc(100% * calc(228 / 1500));
	left: 0%;
	bottom: 55%;
}
main div#slide section div.sub div.block-01 p.number {
	width: calc(100% * calc(173 / 1500));
	left: -2%;
	bottom: 0%;
}
main div#slide section div.sub div.block-01 p.image {
	width: calc(100% * calc(132 / 1500));
	left: 8.5%;
	bottom: 0%;
}
main div#slide section div.sub div.block-02 {
	left: 15%;
	top: 2%;
}
main div#slide section div.sub div.block-02 h3 {
	width: calc(100% * calc(29 / 1500));
	left: 28%;
	top: 0%;
}
main div#slide section div.sub div.block-02 p.body {
	width: calc(100% * calc(210 / 1500));
	left: 6%;
	top: 15%;
}
main div#slide section div.sub div.block-02 p.number {
	width: calc(100% * calc(391 / 1500));
	left: 0%;
	top: 0%;
}
main div#slide section div.sub div.block-02 p.image {
	width: calc(100% * calc(93 / 1500));
	left: 21%;
	top: 11%;
}
main div#slide section div.sub div.block-03 {
	left: 21%;
	bottom: 2%;
}
main div#slide section div.sub div.block-03 p.catch {
	width: calc(100% * calc(170 / 1500));
	left: 14%;
	bottom: 34%;
}
main div#slide section div.sub div.block-03 h3 {
	width: calc(100% * calc(217 / 1500));
	left: 0%;
	bottom: 20%;
}
main div#slide section div.sub div.block-03 p.body {
	width: calc(100% * calc(221 / 1500));
	left: 0%;
	bottom: 0%;
}
main div#slide section div.sub div.block-03 p.number {
	width: calc(100% * calc(190 / 1500));
	left: 0%;
	bottom: 28%;
}
main div#slide section div.sub div.block-03 p.image {
	width: calc(100% * calc(130 / 1500));
	left: 15.5%;
	bottom: 0%;
}
main div#slide section div.sub div.block-04 {
	left: 47%;
	top: 2%;
}
main div#slide section div.sub div.block-04 h3 {
	width: calc(100% * calc(191 / 1500));
	left: 0%;
	top: 0%;
}
main div#slide section div.sub div.block-04 p.body {
	width: calc(100% * calc(171 / 1500));
	left: 0%;
	top: 17%;
}
main div#slide section div.sub div.block-04 p.number {
	width: calc(100% * calc(173 / 1500));
	left: 0%;
	top: 41%;
}
main div#slide section div.sub div.block-04 p.image {
	width: calc(100% * calc(100 / 1500));
	left: 12%;
	top: 0%;
}
main div#slide section div.sub div.block-05 {
	left: 61%;
	bottom: 2%;
	z-index: 1;
}
main div#slide section div.sub div.block-05 p.catch {
	width: calc(100% * calc(341 / 1500));
	left: 1.5%;
	bottom: 58%;
}
main div#slide section div.sub div.block-05 h3 {
	width: calc(100% * calc(326 / 1500));
	left: 0%;
	bottom: 49%;
}
main div#slide section div.sub div.block-05 p.body {
	width: calc(100% * calc(144 / 1500));
	left: 0%;
	bottom: 19%;
}
main div#slide section div.sub div.block-05 p.number {
	width: calc(100% * calc(171 / 1500));
	left: 11%;
	bottom: 0%;
}
main div#slide section div.sub div.block-05 p.image {
	width: calc(100% * calc(119 / 1500));
	left: 2.5%;
	bottom: 0%;
}
main div#slide section div.sub div.block-06 {
	left: 67%;
	top: 2%;
}
main div#slide section div.sub div.block-06 h3 {
	width: calc(100% * calc(303 / 1500));
	left: 0%;
	top: 0%;
}
main div#slide section div.sub div.block-06 p.body {
	width: calc(100% * calc(278 / 1500));
	left: 0%;
	top: 9%;
}
main div#slide section div.sub div.block-06 p.number {
	width: calc(100% * calc(159 / 1500));
	left: 21%;
	top: 0%;
}
main div#slide section div.sub div.block-06 p.image {
	width: calc(100% * calc(128 / 1500));
	left: 15.5%;
	top: 9%;
}
main div#slide section div.sub div.block-07 {
	right: 1%;
	bottom: 2%;
}
main div#slide section div.sub div.block-07 h3 {
	width: calc(100% * calc(175 / 1500));
	right: 0%;
	bottom: 42%;
}
main div#slide section div.sub div.block-07 p.body {
	width: calc(100% * calc(195 / 1500));
	right: 0%;
	bottom: 0%;
}
main div#slide section div.sub div.block-07 p.number {
	width: calc(100% * calc(148 / 1500));
	right: 0%;
	bottom: 24%;
}
main div#slide section div.sub div.block-07 p.image {
	width: calc(100% * calc(156 / 1500));
	right: 5.5%;
	bottom: 25%;
}
main div#slide section.animation div.main :where(p.button-youtube, h2, p.balloon, p.body) {
	opacity: 0;
	transition: 1s opacity ease-in-out;
}
main div#slide.active section.animation div.main :where(p.button-youtube, h2, p.balloon, p.body) {
	opacity: 1;
}
main div#slide section.animation div.main p.button-youtube {
	transition-delay: calc(0.125s * 1);
}
main div#slide section.animation div.main p.balloon-01 {
	transition-delay: calc(0.125s * 2);
}
main div#slide section.animation div.main h2 {
	transition-delay: calc(0.125s * 3);
}
main div#slide section.animation div.main p.balloon-02 {
	transition-delay: calc(0.125s * 4);
}
main div#slide section.animation div.main p.body {
	transition-delay: calc(0.125s * 5);
}
main div#slide section.animation div.main p.image {
	opacity: 0;
	transition: 1s opacity calc(0.125s * 6) ease-in-out, 1s transform calc(0.125s * 6) cubic-bezier(0.86, 0, 0.14, 1);
	transform: translateY(-3.75svh);
}
main div#slide.active section.animation div.main p.image {
	opacity: 1;
	transform: translateY(0px);
}
main div#slide section.animation div.sub div.block p.catch {
	transition: 1s clip-path 0.5s ease-in-out;
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
main div#slide section.animation div.sub div.block p.catch.active {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
main div#slide section.animation div.sub div.block :where(h3, p.body) {
	opacity: 0;
	transition: 1s opacity 0.25s ease-in-out;
}
main div#slide section.animation div.sub div.block :where(h3, p.body).active {
	opacity: 1;
}
main div#slide section.animation div.sub div.block p.number {
	opacity: 0;
	transition: 1s opacity 0.5s ease-in-out, 1s transform 0.5s ease;
	transform: scale(0.925);
}
main div#slide section.animation div.sub div.block  p.number.active {
	opacity: 1;
	transform: scale(1);
}
main div#slide section.animation div.sub div.block p.image {
	opacity: 0;
	transition: 1s opacity ease-in-out, 1s transform ease;
}
main div#slide section.animation div.sub div.block p.image.active {
	opacity: 1;
	transform: translate(0px, 0px);
}
main div#slide section.animation div.sub div.block-01 p.image {
	transform: translate(calc(100svh * 0.05), 0px);
}
main div#slide section.animation div.sub div.block-02 p.image {
	transform: translate(0px, calc(100svh * -0.05));
}
main div#slide section.animation div.sub div.block-03 p.image {
	transform: translate(calc(100svh * -0.05), 0px);
}
main div#slide section.animation div.sub div.block-04 p.image {
	transform: translate(calc(100svh * 0.05), 0px);
}
main div#slide section.animation div.sub div.block-05 p.image {
	transform: translate(calc(100svh * -0.05), 0px);
}
main div#slide section.animation div.sub div.block-06 p.image {
	transform: translate(calc(100svh * -0.05), calc(100svh * 0.05));
}
main div#slide section.animation div.sub div.block-07 p.image {
	transform: translate(0px, calc(100svh * -0.05));
}



/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */

footer#footer {
	position: fixed;
	width: 100%;
	height: 60px;
	left: 0px;
	bottom: 0px;
}
footer#footer :where(p.button-corporate, div.catch) {
	position: absolute;
	top: 0px;
}
footer#footer p.button-corporate {
	width: 60px;
	left: 0px;
}
footer#footer p.button-corporate a,
footer#footer div.catch div.inner-catch p.row {
	height: 60px;
}
footer#footer p.button-corporate a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background-color: #ffff00;
	animation: button-corporate 2s infinite forwards;
}
@keyframes button-corporate {
	0% { background-color: #ffff00; }
	50% { background-color: #ffffff; }
	100% { background-color: #ffff00; }
}
footer#footer p.button-corporate img {
	width: 48px;
}
footer#footer div.catch {
	width: calc(100% - 60px);
	left: 60px;
	overflow: hidden;
}
footer#footer div.catch div.inner-catch {
	display: flex;
	flex-wrap: wrap;
	width: 9999px;
	animation: catch-footer 20s linear infinite forwards;
}
@keyframes catch-footer {
	0% { transform: translateX(0px); }
	100% { transform: translateX(-1065px); }
}
footer#footer div.catch div.inner-catch p.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	width: 1065px;
}
footer#footer div.catch div.inner-catch p.row img {
	width: 100%;
}



/* --------------------------------------------------------------------------------
modal
-------------------------------------------------------------------------------- */

div#modal {
	position: fixed;
	width: 100%;
	height: 0%;
	left: 0px;
	top: 0px;
	overflow: hidden;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: 0.25s opacity ease;
}
div#modal.active {
	height: 100%;
	pointer-events: auto;
}
div#modal.fade {
	opacity: 1;
}
div#modal div.inner-modal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
div#modal div.inner-modal p.button-close {
	position: absolute;
	width: 60px;
	height: 60px;
	right: 0px;
	top: 0px;
	z-index: 10;
	cursor: pointer;
}
div#modal div.inner-modal p.button-close::before,
div#modal div.inner-modal p.button-close::after {
	position: absolute;
	width: 30px;
	height: 0px;
	left: calc(50% - 15px);
	top: calc(50% - 0.5px);
	border-bottom: 1px solid #ffffff;
	content: "";
}
div#modal div.inner-modal p.button-close::before {
	transform: rotate(45deg);
}
div#modal div.inner-modal p.button-close::after {
	transform: rotate(-45deg);
}
div#modal div.video,
div#modal div.video iframe {
	width: 100%;
	height: 100%;
}