@charset "UTF-8";

/*導入アニメーション*/

#introduction-bg {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background: #fff;
z-index: 99998;
animation: introbg 2s ease 8s 1 normal;
animation-fill-mode: forwards;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
animation-play-state: paused;
}
@keyframes introbg {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 1;
filter: alpha(opacity=100);
}
80% {
opacity: 1;
filter: alpha(opacity=100);
background-color: #000;
}
100% {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
}
#introduction-bg .inner {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
z-index: 99998;
animation: introbgin 2s ease 8s 1 normal;
animation-fill-mode: forwards;
}
@keyframes introbgin {
0% {
opacity: 1;
filter: alpha(opacity=100);
background-color: #fff;
}
70% {
background-color: #fff;
}
100% {
background-color: #000;
}
}
.intro{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.introp{
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.font-reimin{
font-family: a-otf-ud-reimin-pr6n, sans-serif;
font-style: normal;
}
#introduction{
position: absolute;
top: 50%;
left: 50%;
width: 604px;
height: 550px;
animation: introduction 2s ease 7s 1 normal;
animation-fill-mode: forwards;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
@media (max-width: 767px) {
#introduction{
top: 43%;
}
}
@keyframes introduction {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
#introduction #logo100th{
position: absolute;
top: 50%;
width: 100%;
height: auto;
margin-top: -25%;
z-index: 2;
animation: logo100th 3s ease 4s 1 normal;
animation-fill-mode: forwards;
opacity: 0;
filter: alpha(opacity=0);
}
@keyframes logo100th {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
#introduction #txt1,#introduction #txt2,#introduction #txt3,#introduction #txt4{
position: absolute;
width: 100%;
text-align: center;
color: #333;
z-index: 1;
opacity: 0;
filter: alpha(opacity=0);
}
#txt1 img,#txt2 img,#txt3 img,#txt4 img{
display: block;
margin: 0 auto;
}
#txt1 img{
width: 65%;
}
#txt2 img{
width: 60%;
}
#txt3 img{
width: 37%;
}
#txt4 img{
width: 45%;
}
#introduction #txt1{
top: 50%;
margin-top: -7%;
z-index: 3;
animation: txt1 3s ease 1s 1 normal;
}
@keyframes txt1{
0% {
opacity: 0;
filter: alpha(opacity=0);
}
30% {
opacity: 1;
filter: alpha(opacity=100);
}
60% {
opacity: 0.9;
filter: alpha(opacity=90);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
#introduction #txt2{
top: 0;
animation: txt2 2s ease 5s 1 normal;
animation-fill-mode: forwards;
}
@keyframes txt2{
0% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
#introduction #txt3{
bottom: 5.1rem;
animation: txt3 2s ease 5.5s 1 normal;
animation-fill-mode: forwards;
}
@keyframes txt3{
0% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
#introduction #txt4{
bottom: 0;
left:0rem;
letter-spacing: 0.6rem;
animation: txt4 2s ease 6s 1 normal;
animation-fill-mode: forwards;
}
@keyframes txt4{
0% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
@media (max-width: 1366px) {
#introduction{
width: 472px;
height: 430px;
}
#introduction #txt3{
bottom: 3.8rem;
}
}

@media (max-width: 767px) {
#introduction{
width: 457px;
height: 416px;
}
#introduction #txt3{
bottom: 3.4rem;
}
}
@media (max-width: 480px) {
#introduction{
width: 325px;
height: 296px;
}
#introduction #txt3{
bottom: 2.7rem;
}
}
@media (max-width: 360px) {
#introduction{
width: 249px;
height: 227px;
}
#introduction #txt3{
bottom: 2rem;
}
}

a.skip{
position: absolute;
bottom: 2rem;
right: 0;
padding: 0.5rem 1rem;
line-height: 1;
color: #fff;
background-color: #999;
letter-spacing: 0.3rem;
transition-duration: 1s;
z-index: 5;
}
@media (max-width: 767px) {
a.skip{
bottom: 10rem;
}
}
a.skip:hover{
background-color: #ddd;
}
a.skip::after {
	content:'\f0da';
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	margin-left: 0.3rem;
}

#movieset{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 1000px;
z-index: 2;
animation: movie 3s ease 9s 1 normal;
animation-fill-mode: forwards;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
opacity: 0;
filter: alpha(opacity=0);
text-align: center;
color: rgba(255,255,255,0.60);
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}
@keyframes movie {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
#movieset button#mute,#movieset button#play{
position: relative;
z-index: 999999;
display: inline-block;
margin-top: 3rem;
color: #fff;
font-size: 3rem;
background-color: transparent;
border: 1px solid #000;
cursor: pointer;
}
#movieset button#play{
display: none;
}
@media (max-width: 767px) {
#movieset button#mute,#movieset button#play{
margin-top: 6rem;
}
}
#movieset .ct{
display: flex;
justify-content: center;
}
#movie {
	position: relative;
	padding-top: 56.25%;
	pointer-events: none;
}
#movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}