@charset "utf-8";
@media (max-width: 1024px) {
	/* =======================================

    1.common.css
    2.header.css
    3.index.php

=========================================*/


	/* ---------------------------------------

    common

---------------------------------------- */

	/*  navigation
---------------------------------------- */

.tablet_disp {
    display: none;
}

.nav,
.nav__list {
    flex-direction: column;
    align-items: center;
}

.nav__list-link {
    margin-right: 0;
}

.nav__online-link {
    padding: 10px !important;
    border-radius: 10px;
}

.nav__online-link--left {
    margin-right: 10px;
}

	#nav-toggle {
		position: fixed;
		top: 0;
		right: 25px;
		height: 32px;
		cursor: pointer;
	}
	#nav-toggle > div {
		position: relative;
		width: 36px;
	}
	#nav-toggle span {
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 1px;
		-webkit-transition: top .5s ease, -webkit-transform .6s ease-in-out;
		        transition: top .5s ease, -webkit-transform .6s ease-in-out;
		        transition: transform .6s ease-in-out, top .5s ease;
		        transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
		background: #FFF;
	}
	#nav-toggle span:nth-child(1) {
		top: 0;
	}
	#nav-toggle span:nth-child(2) {
		top: 14px;
	}
	#nav-toggle span:nth-child(3) {
		top: 28px;
	}
	#nav-toggle:hover span:nth-child(1) {
		top: 4px;
	}
	#nav-toggle:hover span:nth-child(3) {
		top: 23px;
	}

	.open #nav-toggle span {
		background: #ffffff;
	}
	.open #nav-toggle span:nth-child(1) {
		top: 15px;
		        transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
		top: 15px;
		left: 50%;
		width: 0;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 15px;
		        transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	/* z-index */
	#nav-toggle {
		z-index: 1000;
	}

	#container {
		z-index: 900;
	}

	#gloval-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: -webkit-box;
		display: flex;
		flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		justify-content: center;
		-webkit-box-pack: center;
		align-items: center;
		-webkit-box-align: center;
		z-index: 990;
		visibility: hidden;
		font-size: 29px;
		color: #ffffff;
		text-align: center;
		-webkit-transition: opacity .6s ease, visibility .6s ease;
		        transition: opacity .6s ease, visibility .6s ease;
		background: #000000;
		opacity: 0;
	}

	#gloval-nav a {
		padding: 10px 0;
		color: #ffffff;
		text-decoration: none;
		-webkit-transition: color .6s ease;
		        transition: color .6s ease;
    }
	#gloval-nav a:hover {
		color: #666666;
	}
	#gloval-nav ul {
		list-style: none;
	}
	#gloval-nav ul li {
		        transform: translateX(200px);
		-webkit-transform: translateX(200px);
		-webkit-transition: opacity .2s ease, -webkit-transform .6s ease;
		        transition: opacity .2s ease, -webkit-transform .6s ease;
		        transition: transform .6s ease, opacity .2s ease;
		        transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
		opacity: 0;
	}
	#gloval-nav ul li:nth-child(2) {
		        transition-delay: .15s;

		-webkit-transition-delay: .15s;
	}
	#gloval-nav ul li:nth-child(3) {
		        transition-delay: .3s;

		-webkit-transition-delay: .3s;
	}
	#gloval-nav ul li:nth-child(4) {
		        transition-delay: .45s;

		-webkit-transition-delay: .45s;
	}
	#gloval-nav ul li:nth-child(5) {
		        transition-delay: .6s;

		-webkit-transition-delay: .6s;
	}
	#gloval-nav ul li:nth-child(6) {
		        transition-delay: .75s;

		-webkit-transition-delay: .75s;
	}
	#gloval-nav ul li:nth-child(7) {
		        transition-delay: .9s;

		-webkit-transition-delay: .9s;
	}

	/* open */
	.open {
		overflow: hidden;
	}
	.open #gloval-nav {
		visibility: visible;
		opacity: 1;
	}
	.open #gloval-nav li {
		        transform: translateX(0);
		-webkit-transform: translateX(0);
		-webkit-transition: opacity .9s ease, -webkit-transform 1s ease;
		        transition: opacity .9s ease, -webkit-transform 1s ease;
		        transition: transform 1s ease, opacity .9s ease;
		        transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
		opacity: 1;
	}
	/* ---------------------------------------

    index.php

---------------------------------------- */

	/*  section
---------------------------------------- */
}