@charset "UTF-8";


/* Fixed reset */
#global-nav {
	display:block;
	position: absolute;z-index:3;
	/* 開いてないときは画面外に配置 */
	top: 85px;right: -460px;
	background: rgba(15, 15, 15, 0.9);
	width: 240px;padding:0% 0.5% 2% 4%;
	color:#222;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	position: fixed;
}

/*#global-nav #nav {display:flex;flex-wrap: wrap;}*/
#global-nav ul {
	list-style-type:none;
	padding-left:0;
	overflow:hidden;
	right: 0;bottom: 0;
	font-size: 15px;
	justify-content: space-between;
}
#global-nav ul li {
	float:none;
	position: static;
}
#global-nav ul li:nth-child(odd) {border-left:none;}
#global-nav ul li:nth-child(5) {letter-spacing:0.005em;}
#global-nav ul li a {position: relative;display: block;margin: 0;padding: 2em 0;color:#fff;text-decoration:none;
}

#header #global-nav ul li a,
#header.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	color: #138B90;
	padding: 12px 0;
	text-decoration:none;
}

#nav-toggle-wrapper {
}

#nav-toggle {
	position: absolute;
	right: 15px;
	width: 60px;
	height: 60px;
	cursor: pointer;
	z-index: 55;
	top:12px;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 1px;width: 80%;
	background: #fff;left: 6px;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.menu:before {content:"MENU";text-align:center;color:#fff;font-size:9px;letter-spacing:0.3em;}
#nav-toggle span.bd1 {top: 25px;}
#nav-toggle span.bd2 {top: 38px;}
#nav-toggle span.bd3 {top: 52px;}


/* #nav-toggle 切り替えアニメーション */
.open .menu:before {content:"CLOSE";text-align:center;font-size:8px;color:#fff;}
.open #nav-toggle span.bd1 {
	top: 38px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span.bd2 {
	width: 0;
	left: 50%;
}
.open #nav-toggle span.bd3 {
	top: 38px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateX(-460px);
        -webkit-transform: translateX(-460px);
        transform: translateX(-460px);
}


/* メニュー */
.fix-area {position: fixed;z-index: 55;background: #312f2f;width: 65px;height: 65px;}

.menu {
	overflow:hidden;
	counter-reset: item;text-align:center;
	position:relative;
	top:-2px;
}
.menu .tt {
	font-weight:bold;
	font-family: 'Playfair Display','Noto Serif Japanese',"Noto Serif CJK JP","ヒラギノ明朝 ProN W3",
	"Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:48px;line-height:180%;
}
.menu .tt img {padding-right:10px;}

.menu .menuBox {
	overflow:hidden;margin:auto;margin-top:30px;
	padding:3%;border:1px solid #AB8C5E;
	border-radius:5px;
}
.menu .menuBox .txtArea {float:right;width:60%;}
.menu .menuBox:nth-child(even) .txtArea {float:left;}
.menu .menuBox .pic {float:left;}
.menu .menuBox:nth-child(even) .pic {float:right;}

.menu .menuBox .tt {
	font-size:22px;color:#fff;
	line-height:240%;background: #5c3a07;
	position:relative;
}
.menu .menuBox .tt:before {
	counter-increment: item;
	content:"スキル"counters(item,"");
	display: inline-block;background:#ab8c5e;
	padding: 0 10px;margin-right:15px;
}
.menu .menuBox .txt {margin-top:15px;}
/* メニュー */



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

	#global-nav {padding:0% 0.5% 2% 10%;width:200px;}
	#global-nav ul li a {padding:1em 0;}
}