@charset "utf-8";

/* ========================================
index.css
------------------------------------------

======================================== */
/** -webkit-transform-style: preserve-3d;*/

/* ---------------------------------------- 
 - body
---------------------------------------- */

/* ---------------------------------------- 
 - #container
---------------------------------------- */

/* ---------------------------------------- 
 - #Contents
---------------------------------------- */

/* ---------------------------------------- 
 - #Main
---------------------------------------- */
#Contents #Main {
    width: 100%;
    height: auto;
	background: #005aa0;
    margin: 110px auto 0;
    overflow: hidden;
    position: relative;
    /*background: url("../images/main_bg.jpg") bottom left no-repeat;
    background-size: contain;*/
}
#Contents #Main .bg_wrapper {
    width: 100%;
    height: auto;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
#Contents #Main .wrapper {
    width: 1000px;
    height: 720px;
	height: auto;
    overflow: hidden;
    padding: 0;
    margin-bottom: 24px;
    position: relative;
}
@media screen and (max-width: 1000px) {
    #Contents #Main,
    #Contents #Main .bg_wrapper {
        width: 1000px;
    }
}
@media screen and (max-width: 768px) {
 #Contents #Main {
    width: 100%;
    height: auto;
	background: #005aa0;
    margin: 70px auto 0;
    overflow: hidden;
    position: relative;
    /*background: url("../images/main_bg.jpg") bottom left no-repeat;
    background-size: contain;*/
}
   #Contents #Main,
    #Contents #Main .bg_wrapper {
        width: 100%;
    }
#Contents #Main .wrapper {
    width: 100%;
}
}

/* #Movie
---------------------------------------- */
#Contents #Main .wrapper #Movie {
    /*position: absolute;
    top: 4rem;
    right: 0;*/
	width: 100%;
}
#Contents #Main .wrapper #Movie video {
	width: 100%;
	height: 56.25%;
}

/* .flex_inner
---------------------------------------- */
#Contents #Main .wrapper .flex_inner {
	display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width: 768px) {
#Contents #MainImg {
    width: 100%;
}
#Contents #MainImg img {
    width: 100%;
}
#Contents #Main .wrapper .flex_inner {
	display: block;
        /*flex-wrap: wrap;
        flex-direction: row-reverse;
        align-items: flex-start;*/
    height: 312px;
    padding: 0 20px;
	position: relative;
	overflow: hidden;
}
}

/* #Info_area
---------------------------------------- */
#Contents #Main .wrapper #Info_area {
    max-width: 513px;
    margin-top: 10px;
}
#Contents #Main .wrapper #Info_area dt {
	margin-bottom: 5px;
    font-size: 1.5rem;
    color: #fff;
}
#Contents #Main .wrapper #Info_area dd {
    width: 100%;
    background: #fff;
    padding: 1em 1em;
    border-radius: 6px;
    font-size: 1.3rem;
    line-height: 1.5;
}
#Contents #Main .wrapper #Info_area dd .info_content {
    width: 100%;
	height: 5em;
	overflow-y: scroll;
}
#Contents #Main .wrapper #Info_area dd .info_content span,
#Contents #Main .wrapper #Info_area dd .info_content span  a {
    color: #F80000;
}
#Contents #Main .wrapper #Info_area dd .info_content a {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
#Contents #Main .wrapper #Info_area {
    margin-top: 10px;
    max-width: inherit;
    width: 100%;
}
#Contents #Main .wrapper #Info_area dt {
	margin-bottom: 5px;
    font-size: 1.8rem;
}
#Contents #Main .wrapper #Info_area dd .info_content {
    width: 100%;
	height: 130px;
	overflow-y: scroll;
}
}

/* #Link_area
---------------------------------------- */
#Contents #Main .wrapper ul#Link_area {
    position: absolute;
    bottom: 0;
    right: 0;
    
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
}
#Contents #Main .wrapper ul#Link_area li {
    margin-left: 2rem;
    opacity: 0;
}
#Contents #Main .wrapper ul#Link_area li a {
    width: 96px;
    height: 96px;
    border: #fff solid 2px;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    display: flex;
	justify-content: center;
	align-items: center;
}
#Contents #Main .wrapper ul#Link_area li {
    opacity: 0;
}
#Contents #Main .wrapper ul#Link_area.sectionAnimeRightIn li {
    animation-name: sectionAnimeRightIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
#Contents #Main .wrapper ul#Link_area li:nth-child(1) {
    animation-delay: 1.6s;
}
#Contents #Main .wrapper ul#Link_area li:nth-child(2) {
    animation-delay: 1.8s;
}
#Contents #Main .wrapper ul#Link_area li:nth-child(3) {
    animation-delay: 2s;
}
#Contents #Main .wrapper ul#Link_area li:nth-child(4) {
    animation-delay: 2.2s;
}
@media screen and (max-width: 768px) {
#Contents #Main .wrapper ul#Link_area {
    padding: 0 20px;
    position: absolute;
        top: 218px;
        left: 0;
    width: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        -ms-align-items: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
}
#Contents #Main .wrapper ul#Link_area li {
    display: table;
    margin-left: 0;
    opacity: 0;
    width: 47.88%;
}
#Contents #Main .wrapper ul#Link_area li a {
    display: table-cell;
    height: 40px;
    vertical-align: middle;
    width: auto;
}
}

/* ---------------------------------------- 
 - .section共通
---------------------------------------- */
#Contents .section {
    width: 100%;
    margin-top: 0;
    
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
#Contents .section img {
    width: 100%;
    height: auto;
}
@keyframes sectionFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes sectionAnimeDown {
    0% {
        -webkit-transform: translate(0, -60px);
        transform: translate(0, -60px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes sectionAnimeUp {
    0% {
        -webkit-transform: translate(0, 60px);
        transform: translate(0, 60px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes sectionAnimeLeftIn {
    0% {
        -webkit-transform: translate(-80px, 0);
        transform: translate(-80px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes sectionAnimeRightIn {
    0% {
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* ---------------------------------------- 
 - #LeadArea
---------------------------------------- */
#Contents #LeadArea {
    margin: 100px 0 0;
}
#Contents #LeadArea .wrapper {
    height: 348px;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#Contents #LeadArea .wrapper p.leadTtl {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.075em;
    font-feature-settings: "palt";

    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper p.lead {
    margin-top: 2em;
    font-size: 1.2rem;
    line-height: 1.8;
    
    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper p.leadSign {
    text-align: right;
    margin-top: 1em;
    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper .leadArea_img_l li,
#Contents #LeadArea .wrapper .leadArea_img_r li { 
    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper p.leadTtl.sectionFadeIn {
    animation-name: sectionFadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
#Contents #LeadArea .wrapper p.lead.sectionFadeIn {
    animation-name: sectionFadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}
#Contents #LeadArea .wrapper p.leadSign.sectionFadeIn {
    animation-name: sectionFadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}
#Contents #LeadArea .wrapper .leadArea_img_l.sectionFadeIn li,
#Contents #LeadArea .wrapper .leadArea_img_r.sectionFadeIn li { 
    animation-name: sectionFadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
#Contents #LeadArea .wrapper .leadArea_img_l.sectionFadeIn li:nth-child(1) { 
    animation-delay: .8s;
}
#Contents #LeadArea .wrapper .leadArea_img_r.sectionFadeIn li:nth-child(3) { 
    animation-delay: 1s;
}
#Contents #LeadArea .wrapper .leadArea_img_l.sectionFadeIn li:nth-child(3) { 
    animation-delay: 1.2s;
}
#Contents #LeadArea .wrapper .leadArea_img_r.sectionFadeIn li:nth-child(1) { 
    animation-delay: 1.4s;
}
#Contents #LeadArea .wrapper .leadArea_img_l.sectionFadeIn li:nth-child(2) { 
    animation-delay: 1.6s;
}
#Contents #LeadArea .wrapper .leadArea_img_r.sectionFadeIn li:nth-child(2) { 
    animation-delay: 1.8s;
}
@media screen and (max-width: 768px) {
#Contents #LeadArea {
    margin: 30px 0 0;
}
#Contents #LeadArea .wrapper {
    height: auto;
    text-align: left;
    display: -webkit-flex;
    display: block;
}
#Contents #LeadArea .wrapper p.leadTtl {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.075em;
    font-feature-settings: "palt";

    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper p.lead {
    margin-top: 20px;
    font-size: 1.3rem;
    line-height: 2;
    
    opacity: 0;/*初期非表示*/
}
#Contents #LeadArea .wrapper p.leadSign {
    margin-top: 0em;
    margin-bottom: 20px;
}
#Contents #LeadArea .wrapper p.leadArea_img_top {
    display: block !important;
    margin-bottom: 20px;
}
#Contents #LeadArea .wrapper p.leadArea_img_top img {
    height: auto;
    width: 100%;
}
#Contents #LeadArea .wrapper p.leadArea_img_bottom {
    display: block !important;
}
#Contents #LeadArea .wrapper p.leadArea_img_bottom img {
    height: auto;
    width: 100%;
}
}

/* ---------------------------------------- 
 - #MovieSec
---------------------------------------- */
#Contents #MapSec {
background: #e8f0d7;
background: -moz-linear-gradient(45deg,  #e8f0d7 0%, #ffffff 50%);
background: -webkit-linear-gradient(45deg,  #e8f0d7 0%,#ffffff 50%);
background: linear-gradient(45deg,  #e8f0d7 0%,#ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f0d7', endColorstr='#ffffff',GradientType=1 );
}
#Contents #MapSec .wrapper {
    height: 94.6rem;
    background: #f1f4e2 url("../images/mapSec_bg.jpg") top left no-repeat;
}
#Contents #MapSec .wrapper ul.mapPc li{
    position: absolute;
}
#Contents #MapSec .wrapper ul.mapPc li:nth-child(1){
    top: 413px;
    left: 218px;
}
#Contents #MapSec .wrapper ul.mapPc li:nth-child(2){
    top: 278px;
    left: 223px;
}
#Contents #MapSec .wrapper ul.mapPc li:nth-child(3){
    top: 573px;
    left: 131px;
}
#Contents #MapSec .wrapper ul.mapPc li:nth-child(4){
    top: 594px;
    left: 574px;
}
#Contents #MapSec .wrapper ul.mapPc li:nth-child(5){
    bottom: 24px;
    right: 88px;
}
@media screen and (max-width: 768px) {
#Contents #MapSec .wrapper {
    height: inherit;
    background: #f1f4e2;
    padding: 0 20px;
}
#Contents #MapSec .wrapper ul.mapSp {
    display: flex !important;
        justify-content: space-between;
        flex-wrap: wrap;
    padding: 40px 0;
}
#Contents #MapSec .wrapper ul.mapSp li {
    color: #EB1521;
    font-size: 1.4rem;
    width: 48.57%;
}
#Contents #MapSec .wrapper ul.mapSp li a {
    color: #EB1521;
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    padding-bottom: 15px;
}
#Contents #MapSec .wrapper ul.mapSp li a img {
    height: auto;
    width: 100%;
}
}


/*effect*/
.fade_image_effect {
    position: relative;
    width: 24%;
    overflow: hidden;
    padding: 0 1px 0 0;
    opacity: 0;
    
    transform : scaleX(0.01);
}
.fade_image_effect.active {
    opacity: 1;
}
.fade_image_effect.active {
    animation: scaleX 0.1s;
    animation-fill-mode: forwards;
}
.fade_image_effect.active.activeR:after {
    animation: swipeRight 1.4s cubic-bezier(0.6,0,0.4,1);
    animation-fill-mode: forwards;
}
.fade_image_effect.active.activeL:after {
    animation: swipeLeft 1.4s cubic-bezier(0.6,0,0.4,1);
    animation-fill-mode: forwards;
}
.fade_image_effect:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #f4f6eb;
    transform: translate3d(0%,0,0);
}
@keyframes scaleX {
	0% {
		 transform : scaleX(0.01);
	}
	100% {
		 transform : scaleX(1);
	}
}
@keyframes swipeLeft {
	0% {
		transform: translate(0);
	}
	50%, 60% {
		transform: translate3d(-100%,0,0);
	}
	100% {
		transform: translate3d(-100%,0,0);
	}
}
@keyframes swipeRight {
	0% {
		transform: translate(0);
	}
	50%, 60% {
		transform: translate3d(100%,0,0);
	}
	100% {
		transform: translate3d(100%,0,0);
	}
}

#Contents #MapSec .wrapper li:nth-child(1).fade_image_effect {
    width: 363px;
}
#Contents #MapSec .wrapper li:nth-child(2).fade_image_effect {
    width: 452px;
}
#Contents #MapSec .wrapper li:nth-child(2).fade_image_effect.active {
    animation-delay: .4s;
}
#Contents #MapSec .wrapper li:nth-child(2).fade_image_effect.active:after {
    animation-delay: .4s;
}
#Contents #MapSec .wrapper li:nth-child(3).fade_image_effect {
    width: 334px;
}
#Contents #MapSec .wrapper li:nth-child(3).fade_image_effect.active {
    animation-delay: .8s;
}
#Contents #MapSec .wrapper li:nth-child(3).fade_image_effect.active:after {
    animation-delay: .8s;
}
#Contents #MapSec .wrapper li:nth-child(4).fade_image_effect {
    width: 244px;
}
#Contents #MapSec .wrapper li:nth-child(4).fade_image_effect.active {
    animation-delay: 1.2s;
}
#Contents #MapSec .wrapper li:nth-child(4).fade_image_effect.active:after {
    animation-delay: 1.2s;
}
#Contents #MapSec .wrapper li:nth-child(5).fade_image_effect {
    width: 154px;
}
#Contents #MapSec .wrapper li:nth-child(5).fade_image_effect.active {
    animation-delay: 1.6s;
}
#Contents #MapSec .wrapper li:nth-child(5).fade_image_effect.active:after {
    animation-delay: 1.6s;
}

/* ---------------------------------------- 
 - #AffiliatesSec
---------------------------------------- */
#Contents #AffiliatesSec {
    
}
#Contents #AffiliatesSec .wrapper {
    width: 100%;
    max-width: 86.58rem;
    padding: 3rem 0;
}
#Contents #AffiliatesSec .wrapper p.ttl {
    display: inline-block;
    font-size: 2.8rem;
    border-bottom: #00599f solid 5px;
    padding: 0 0.5em;
    letter-spacing: .1em;
}
#Contents #AffiliatesSec .wrapper ul {
    margin-top: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
#Contents #AffiliatesSec .wrapper ul li {
    width: 420px;
    padding-left: 4.2rem;
    margin-top: 2rem;
    position: relative;
}
#Contents #AffiliatesSec .wrapper ul li.hp::before {
    content: url("../images/AffiliatesSec_ico_hp.png");
    position: absolute;
    top: 0; left: 0;
}
#Contents #AffiliatesSec .wrapper ul li dt {
    font-size: 1.6rem;
    font-weight: bold;
}
#Contents #AffiliatesSec .wrapper ul li dd {
    font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
#Contents #AffiliatesSec .wrapper {
    padding: 3rem 20px;
    text-align: center;
    width: 100%;
}
#Contents #AffiliatesSec .wrapper h3 {
    margin: 0 auto;
}
#Contents #AffiliatesSec .wrapper ul {
    text-align: left;
}
#Contents #AffiliatesSec .wrapper ul li {
    width: auto;
	display: flex;
}
	#Contents #AffiliatesSec .wrapper ul li.list1{
    order: 1;
}
	#Contents #AffiliatesSec .wrapper ul li.list2{
    order: 2;
}
	#Contents #AffiliatesSec .wrapper ul li.list3{
    order: 3;
}
#Contents #AffiliatesSec .wrapper ul li.list4 {
    order: 4;
}
#Contents #AffiliatesSec .wrapper ul li.list5 {
    order: 5;
}
#Contents #AffiliatesSec .wrapper ul li.list6 {
    order: 6;
}
	#Contents #AffiliatesSec .wrapper ul li.list7 {
    order: 7;
}
	#Contents #AffiliatesSec .wrapper ul li.list8 {
    order: 8;
}
#Contents #AffiliatesSec .wrapper ul li.list9 {
    order: 9;
}
}

/* ---------------------------------------- 
 - #MovieSec
---------------------------------------- */
#Contents #MovieSec {
    height: 720px;
    overflow: hidden;
    position: relative;
}
#Contents #MovieSec .bg_wrapper {
    width: 100%;
    height: 71.8vw;
    background: url("../images/movieSec_bg.jpg") top left no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
#Contents #MovieSec .wrapper {
    width: 710px;
    max-height: 718px;
    padding: 0;
}
#Contents #MovieSec .wrapper p.ttl {
    margin-top: 4.7rem;
    padding-bottom: 5.4rem;
    opacity: 0;
}
#Contents #MovieSec .wrapper div.youtube {
    aspect-ratio: 16 / 9;
    margin: 0 auto 28px;
    opacity: 0;
    width: 89.75%;
}
#Contents #MovieSec .wrapper div.youtube iframe {
    width: 100%;
    height: 100%;
}
#Contents #MovieSec .wrapper p.ttl.sectionAnimeUp { 
    animation-name: sectionAnimeUp;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}
#Contents #MovieSec .wrapper .youtube.sectionFadeIn { 
    animation-name: sectionFadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}
@media screen and (max-width: 768px) {
#Contents #MovieSec {
    height: auto;
}
#Contents #MovieSec .wrapper {
    width: 100%;
    height: auto;
    background: url("../images/movieSec_bg_sp.jpg") left 40px no-repeat;
    background-size: contain;
    padding: 40px 0 0;
}
#Contents #MovieSec .bg_wrapper {
    width: 100%;
    height: 71.8vw;
    background: none;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
#Contents #MovieSec .wrapper p.ttl {
    margin: 0 auto;
    padding-bottom: 20px;
    opacity: 0;
    width: 89.74%;
}
#Contents #MovieSec .wrapper p.ttl img {
    height: auto;
    width: 100%;
}
}



/* ---------------------------------------- 
 - #MenuArea
---------------------------------------- */
#Contents #MenuArea {
    width: 100%;
    background: #203d3a url("../common/images/bg.jpg") repeat;
}
#Contents #MenuArea .wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
    color: #fff;
}
#Contents #MenuArea .wrapper .column a {
    margin-bottom: 60px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
}
#Contents #MenuArea .wrapper .column:nth-child(2) a {
    flex-direction: row-reverse;
}
#Contents #MenuArea .wrapper .column:last-of-type a {
    margin-bottom: 0;
}
#Contents #MenuArea .wrapper .column a {
    color: #fff;
}
#Contents #MenuArea .wrapper .column p.photo,
#Contents #MenuArea .wrapper .column dl {
    width: 426px;
}
#Contents #MenuArea .wrapper .column dl dt {
    margin-bottom: 15px;
    font-size: 3rem;
    border-bottom: #fff solid 1px;
}
#Contents #MenuArea .wrapper .column dl dd.btn  {
    margin-top: -.5rem;;
    text-align: right;
}
#Contents #MenuArea .wrapper .column dl dd.btn img {
    width: 4rem;
    height: auto;
}

@media screen and (max-width: 960px) {
    #Contents #MenuArea .wrapper img {
        width: 100%;
        height: auto;
    }
    #Contents #MenuArea .wrapper .column p.photo,
    #Contents #MenuArea .wrapper .column dl {
        width: 44.375vw;
    } 
    #Contents #MenuArea .wrapper .column dl {
        margin-left: 1.875vw;
    }
    #Contents #MenuArea .wrapper .column:nth-child(2) dl {
        margin-right: 1.875vw;
    } 
}
@media screen and (max-width: 768px) {
    #Contents #MenuArea .wrapper .column a {
        margin-bottom: 30px;
        display: block;
    }
    #Contents #MenuArea .wrapper .column p.photo,
    #Contents #MenuArea .wrapper .column dl {
        width: auto;
    }
    #Contents #MenuArea .wrapper .column dl,
    #Contents #MenuArea .wrapper .column:nth-child(2) dl {
        margin-left: 0;
        margin-right: 0;
    } 
    #Contents #MenuArea .wrapper .column dl dt {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 2.4rem;
    }
}



/* ---------------------------------------- 
 - #Loading
---------------------------------------- */
#Loading {
    width: 61px;
    height: auto;
}
#Loading img {
    width: 61px;
    height: auto;
}
/* 基本設定（背景やレイアウト） */
#LoadingWrapper  {
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    background-color: #fff;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}
@keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity:0.3;
    }
    50% {
        transform: scale(1);
        opacity:1;
    }
    100% {
        transform: scale(1);
        opacity:0.3;
    }
}
.loadingFade {
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}