@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,500,700&display=swap');

body {
    font-family: "noto-sans-cjk-jp", "メイリオ", sans-serif;
    background-color: #fff;
    min-width: 1200px;
}

img[src$=".svg"] {
    height: auto;
}

.is-sp {
    display: none;
}

main {
    position: relative;
}

@media screen and (max-width:768px) {
    body {
        min-width: auto;
    }
    
    .is-sp {
        display: block;
    }
}

/* menu */
.menu-list {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 940px;
    list-style: none;
    position: absolute;
    bottom: 24%;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
}
.menu-list-item {
    margin: 0 1% 1% 0;
    width: 23%;
    max-width: 220px;
}
.menu-list-item:nth-child(4n) {
    margin: 0 0 1% 0;
}
.menu-list-item-btn {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
    color: #000;
    background-color: #fff000;
    text-decoration: none;
    transition: .3s;
}
.menu-list-item-btn:hover {
    opacity: .7;
}

@media screen and (max-width:768px) {

    .menu-list {
        display: none;
        bottom: 33%;
    }
    .menu-list-item {
        margin: 0 2%;
        width: 35%;
    }
    .menu-list-item-btn {
        margin: auto;
        padding: 10px 0;
        font-size: 13px;
    }
}

/* footer */
footer {
	padding: 5%;
	background-color: #000000;
	padding-bottom: 10px;
}

.billing {
    width: 68%;
	margin: 0 auto 50px;
	margin-bottom: 0;
}


.sns-list {
    display: flex;
    justify-content: center;
    list-style: none;
}

.sns-list-item {
    margin-right: 1%;
}

.sns-list-item:last-child {
    margin-right: 0;
}

.sns-list-img {
    width: 100%;
    max-width: 168px;
}

.corp-list {
    display: flex;
    justify-content: center;
    margin: 30px 0 1em;
    list-style: none;
}

.corp-list-item {
    margin-right: 1%;
}

.corp-list-item:last-child {
    margin-right: 0;
}

.corp-list-item-btn {
    display: block;
    color: #FFFFFF;
    font-size: 11px;
    text-decoration: none;
}

.copyright {
    color: #FFFFFF;
    text-align: center;
    font-size: 11px;
}

.gaga-logo {
    display: block;
    margin-top: 1%;
    text-align: center;
}

@media screen and (max-width:768px) {
    
    .gaga-logo {
        margin-top: 4%;
    }
}


@media screen and (max-width:640px) {

    .sns-list {
        flex-wrap: wrap;
    }

    .sns-list-item {
        width: 50%;
        margin: 0 0 2%;
        text-align: center;
    }

    .corp-list {
        flex-wrap: wrap;
        margin: 30px 5% 1em;
    }

    .corp-list-item {
        width: 50%;
        margin: 0;
        line-height: 1.7;
    }

    .footer {
        padding: 8% 6%;
    }
}


.top-drawer-btn {
	display: none;
}

@media screen and (max-width:768px) {

	.top-drawer-btn {
		display: block;
		position: absolute;
		right: 10px;
		top: 10px;
		width: 30px;
		height: 24px;
		z-index: 10;
		cursor: pointer;
	}

	.top-drawer-btn span {
		position: absolute;
		display: block;
		border-radius: 2px;
		width: 100%;
		height: 2px;
		background-color: #371200;

	  transition-duration: 0.3s;
	  transition-timing-function: ease-out;
	}

	.top-drawer-btn span:first-child {
		top: 0;
	}

	.top-drawer-btn span:nth-child(2) {
		top: 50%;
		margin: -1px 0 0 0;
	}

	.top-drawer-btn span:last-child {
		bottom: 0;
	}

	.top-drawer-btn:hover span:first-child {
		top: 2px;
	}

	.top-drawer-btn:hover span:last-child {
		bottom: 2px;
	}

}

/*

__drawer

*/

.__drawer {
	opacity: 0;
	position: fixed;
	visibility: hidden;
}

@media screen and (max-width:768px) {

	.__drawer {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
        background-image: url(../images/home/introduction-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
	}

	.__drawer.is-open {
		opacity: 1;
		visibility: visible;
		display: block;
	}

	.drawer-nav {
		margin: 50px 0 0 0;
		padding: 0;
	}

	.drawer-nav-item {
		margin: 0 0 5% 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}

	.drawer-nav-btn {
		color: #371200;
        font-weight: bold;
        font-family: 'Noto Serif SC', serif;
        text-decoration: none;
		font-size: 18px;
	}

	.drawer-btn {
		display: block;
		position: absolute;
		right: 10px;
		top: 10px;
		width: 30px;
		height: 24px;
		z-index: 10;
		cursor: pointer;
	}

	.drawer-btn span {
		position: absolute;
		display: block;
		border-radius: 2px;
		width: 100%;
		height: 2px;
		background-color: #371200;

	  transition-duration: 0.3s;
	  transition-timing-function: ease-out;
	}

	.drawer-btn span:first-child {
		top: 2px;
	}

	.drawer-btn span:nth-child(2) {
		top: 50%;
		margin: -1px 0 0 0;
	}

	.drawer-btn span:last-child {
		bottom: 2px;
	}

	.is-open .drawer-btn span:first-child {
		top: 11px;
	  transform: rotate(-45deg);
	}

	.is-open .drawer-btn span:nth-child(2) {
		opacity: 0;
		top: 0;
		margin: 0;
	}

	.is-open .drawer-btn span:last-child {
		bottom: 11px;
	  transform: rotate(-135deg);
	}
}

/*-----------------------------------------
** loading
-----------------------------------------*/
.__loadingWrap{
	width: 100%;
	height: 100%;
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	overflow: hidden;
	/*display: none;*/
}
.__loadingWrap img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

.__progressbar {
	width: 0;
	height: 100%;
	background: url(../img/bg-loader-pen.png) right center repeat-y;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.2s linear 0s;
}

.spinner {
	width: 40px;
	height: 40px;
	background-color: #FBD642;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(50%,50%);
	margin: -20px 0 0 -20px;
	/*margin: 100px auto;*/
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
	0% { 
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
	} 50% { 
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
	} 100% { 
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}