@charset "utf-8";

html, body {
	width: 100%;
	font-family:Arial, Meiryo, "Hiragino Kaku Gothic ProN", Roboto, "Droid Sans", YuGothic, sans-serif !important;
	font-size: 18px;
    line-height: 1.8;
    color: #333;
	background-color: #fff;
	margin: 0;
	padding: 0;
}
.wrapper {
	position: relative;
	width: 100%;
	z-index: 1;
}
section, div {box-sizing: border-box;}
.inner {
	position: relative;
	width: 1600px;
	margin: 0 auto;
}
a {color: #333; outline: none; text-decoration: none;}
a:hover {text-decoration: underline;}
img {width: 100%; border: none;}

/* header */
.header {
	width: 100%;
	height: 80px;
	background-color: #000;
}
.header .inner {
	display: flex;
	flex-flow: row nowrap;
}
.header .inner .lang {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	width: 164px;
	margin-left: 896px;
}
.header .inner .lang a {
	display: block;
	width: 64px;
	height: 30px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	border: 0;
	border-radius: 4px;
	background-color: #fff;
}
.header .inner .menu {
	display: block;
	position: relative;
	width: 130px;
	height: 36px;
	text-align: center;
	margin-top: 22px;
}
.header .inner .menu img {
	width: 36px;
	height: 36px;
}
.header .inner .menu::after {
	content: 'INDEX';
	display: block;
	position: absolute;
	top: 32px;
	width: 130px;
	font-size: 12px;
	color: #fff;
	text-align: center;
}
.headsep {
	width: 100%;
	height: 4px;
	background-color: #fff;
}
.headsep .inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
.headsep .inner div {width: 100px; height: 4px;}
.headsep .inner div:nth-child(1) {background-color: #0068b7;}
.headsep .inner div:nth-child(2) {background-color: #00afdd;}
.headsep .inner div:nth-child(3) {background-color: #ed6c00; margin-right: 20px;}

/* footer */
.footerlink {
	width: 100%;
	height: 216px;
	background-color: #000;
}
.footerlink .inner {padding: 60px 0;}
.footerlink .inner .links {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	width: 1400px;
	margin: 0 auto;
}
.footerlink .inner .links a {
	display: block;
	width: 340px;
	height: 30px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	border: 0;
	border-radius: 4px;
	background-color: #fff;
	margin-bottom: 24px;
}
.footerlink .inner .links div {width: 340px; height: 30px;}
.footer {
	width: 100%;
	height: 60px;
	background-color: #000;
}
.footer .inner {color: #fff; line-height: 60px; text-align: center;}

/* blocks */
.block {
	display: block;
	position: relative;
	width: 100%;
	background-color: #fff;
}
.blocksep {
	width: 100%;
	height: 4px;
	background-color: #fff;
}
.blocktitle {
	width: 100%;
	height: 66px;
	text-align: center;
	background-color: #000;
}
.blocktitle img {width: 300px;}

/* global menu */
#globalMenuBtn {
	cursor: pointer;
	z-index: 5000;
}
.overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 1000;
}
.globalMenuOpen .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.7);
	}
.globalMenuOpen .wrapper {transform: translate3d(-300px, 0, 0);}
#globalMenu {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 16px 16px 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	background: #f2f2f2;
	z-index: 1500;
	visibility: hidden;
	overflow-y: scroll;
}
#globalMenu .title {font-weight: bold; margin: 16px 0 0;}
#globalMenu .title.group {
	border-top: solid 1px #333;
	padding-top: 16px;
}
#globalMenu a {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}
.globalMenuOpen #globalMenu {visibility: visible;}

/* ---------- @media settings ---------- */
@media only screen and (max-width: 1600px) {

.inner {width: 1300px;}

/* header */
.header .inner .lang {margin-left: 596px;}

/* footer */
.footerlink {height: 270px;}
.footerlink .inner {padding: 60px 0;}
.footerlink .inner .links {width: 1200px;}

} /* ---@media max1600--- */

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

html, body {font-size: 14px;}
.inner {width: 1024px;}

/* header */
.header .inner .lang {margin-left: auto;}
.header .inner .lang a {font-size: 14px;}
/* footer */
.footerlink {height: 270px;}
.footerlink .inner {padding: 60px 0;}
.footerlink .inner .links {width: 1024px;}
.footerlink .inner .links a {width: 300px; font-size: 14px;}
.footerlink .inner .links div {width: 300px; }
/* blocks */
.blocktitle {height: 56px;}
.blocktitle img {width: 250px;}
/* global menu */
#globalMenu {font-size: 14px;}

} /* ---@media max1299--- */

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

html, body {
	width: 100vw;
	font-size: 3vw;
}
.wrapper {width: 100vw;}
.inner {width: 100vw;}
/*
a {text-decoration: underline;}
a:hover {text-decoration: underline;}
*/

/* header */
.header {
	width: 100vw;
	height: 28vw;
}
.header .inner {
	flex-flow: row wrap;
	justify-content: flex-end;
}
.header .inner .logo {width: 56vw; margin-right: auto;}
.header .inner .lang {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	width: 80vw;
	margin-left: 0;
	padding-right: 8vw;
}
.header .inner .lang a {
	width: 16vw;
	height: 6vw;
	font-size: 3vw;
	line-height: 6vw;
}
.header .inner .lang a:first-child {margin-right: 2vw;}
.header .inner .menu {
	width: 8vw;
	height: 8vw;
	margin-top: 0;
	margin-right: 4vw;
}
.header .inner .menu img {
	width: 8vw;
	height: 8vw;
}
.header .inner .menu::after {
	top: 8vw;
	width: 8vw;
	font-size: 2.5vw;
}
.headsep {
	width: 100vw;
	height: 4px;
	background-color: #fff;
}
.headsep .inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
.headsep .inner div {width: 15vw; height: 4px;}
.headsep .inner div:nth-child(1) {background-color: #0068b7;}
.headsep .inner div:nth-child(2) {background-color: #00afdd;}
.headsep .inner div:nth-child(3) {background-color: #ed6c00; margin-right: 4vw;}

/* footer */
.footerlink {height: auto;}
.footerlink .inner {padding: 8vw 0 4vw;}
.footerlink .inner .links {
	width: 98vw;
	margin: 0 auto;
}
.footerlink .inner .links a {
	width: 48vw;
	height: 6vw;
	font-size: 3vw;
	line-height: 6vw;
	margin-bottom: 4vw;
}
.footerlink .inner .links div {width: 48vw; height: 6vw;}
.footer {height: 12vw;}
.footer .inner {line-height: 12vw;}

/* blocks */
.blocktitle {width: 100%; height: 16vw;}
.blocktitle img {width: 60vw; height: auto;}

/* global menu */
.globalMenuOpen .wrapper {transform: translate3d(-70vw, 0, 0);}
#globalMenu {
	width: 70vw;
	padding: 4vw 4vw 0;
	font-size: 3vw;
}
#globalMenu .title {margin: 4vw 0 0;}
#globalMenu .title.group {padding-top: 4vw;}

} /* ---@media max1024--- */