@charset "UTF-8";
/* ######################################################################################

　pageIndex　ファーストビューの要素

###################################################################################### */

/* =======================================================
　アニメーション
========================================================== */
.animation {
    position:absolute;
    top:0;
    left:0;
    background:#a23030;
    width:100%;
    z-index:1010;
}
.animation > * {
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

@media print, screen and (min-width: 768px) {
    .animation {height:844px;}
}
@media screen and (max-width: 767px) {
    .animation {height:100vh;}
    .animation > * {height:100%;}
    .animation > *:not(.animation___image01) {align-items:flex-end;}
}

.mainImg__title,
.hbgMenu {opacity:0;}

.lead-section:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    height:calc(100% - 56px);
    background:#a23030;
    z-index:1;
}

.action .animation___image01 { animation:fade 2s ease;}
.action .animation___image02 { animation:fade 0.5s ease 2s;}
.action .animation___image03 { animation:fade 0.5s ease 2.5s;}
.action .animation___image04 { animation:fade 0.5s ease 3s;}
.action .animation___image05 { animation:fade 0.5s ease 3.5s;}
.animation.action { animation:fadeOut 1s ease 4s forwards;}

.lead-section {position:relative;}
.lead-section.action:before { animation:fadeOut 1s ease 5s forwards;}

.mainImg__title.action,
.hbgMenu.action {animation:fadeIn 1s ease 5s forwards;}

@keyframes fade {
   0%  { opacity:0;}
   33% { opacity:1;}
   66% { opacity:1;}
  100% { opacity:0;}
}
@keyframes fadeOut {
   0%  { opacity:1;}
  100% { opacity:0;}
}
@keyframes fadeIn {
  0% { opacity:0;}
  100%  { opacity:1;}
}
.hbgMenu {opacity:0;}

/* =======================================================
　冒頭　メインイメージ
========================================================== */

.mainImg{
    position: relative;
    z-index: 1;
	margin: auto;
}
.mainImg.finish{	padding-top: 47px; margin: auto; text-align: center;}
.mainImg .mainImg__logo{width: 260px;margin: auto;}
.mainImg .mainImg__title{width: 350px;margin-bottom: -10px;}
.mainImg .mainImg__img{width: 98%;margin: 0 auto 15px;}

.mainImg > .contents{    position: relative;}


/*  lead-section
-------------------------------------*/
.lead-section__inner{margin: auto;position: relative;}
.lead-section__inner .lead-section__title{width: 300px;margin: 0 auto -5px;}
.lead-section__inner .lead-section__text{
	background: url("../img/contents/bg_brush-red.png") top left no-repeat;
	background-size: cover;
	height: 361px;
}
.lead-section__inner .lead-section__text p{ padding-top:70px; margin-bottom: 40px;}

/*  calender-section
-------------------------------------*/
.calender-section{ position:relative; z-index:10;}
.calender-section .calender-section__title{position: relative;width: 170px;margin: 0 auto -20px;}
.calender-section .calender-section__img{width: 320px;margin: 0 auto 40px;}


/*  wallBelt
-------------------------------------*/
.bg_menu {position:relative;}
.bg_menu:before {
    content:"";
    display:block;
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    width:100%;
    height:50%;
	background: url("../img/contents/bg_lineup-nav.png") no-repeat;
	background-size: contain;
	background-position: 0 188px;
}