@charset "UTF-8";

/*========= フェードイン ===============*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}

/*========= アコーディオン ===============*/
.accordion {
width: 80%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.accordion-hidden{
display: none;
}
.accordion-open {
display: block;
cursor: pointer;
margin: 5px 0;
}
.accordion-close {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: 0.5s;/* 表示速度の設定 */
}
.accordion-hidden:checked + .accordion-open + .accordion-close {
height: auto;
opacity: 1;
padding: 10px;
background: #fff;
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
background: #eeefe4;
text-align:center;
color:#11110f;
}
#splash_sub{
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
background: rgba(255,255,255,1.0);
text-align:center;
color:#11110f;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1002;
}
#splash_logo img{
width:200px;
}

/*========= スクロールのためのCSS ===============*/
.scrolldown{
position:absolute;
bottom:7%;
left:50%;
}
.scrolldown span{
position: absolute;
left:10px;
bottom:10px;
color: #fff;
font-size: 0.5rem;
letter-spacing: 0.5em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.scrolldown:before {
content: "";
position: absolute;
bottom:0;
left:-4px;
width:10px;
height:10px;
border-radius: 50%;
background:#00b2db;
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
0%{bottom:45px;}
100%{bottom:-5px;}
}
@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:0.9;}
80%{opacity:0.7;}
100%{opacity:0;}
}
.scrolldown:after{
content:"";
position: absolute;
bottom:0;
left:0;
width:2px;
height: 50px;
background:#000;
}

@media screen and (max-width: 520px) {
/*========= menuのためのCSS ===============*/

.accordion {
width: 90%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
}