@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;
	border-radius:5px;
}

/*#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 {
	position: absolute;
	right: 25px;
	width: 70px;
	height: 70px;
	cursor: pointer;
	z-index: 55;
	top:20px;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 2px;width: 50%;
	background: #fff4e9;left: 18px;
    -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:#fff4e9;font-size:11px;font-weight:bold;letter-spacing:0.1em;}
#nav-toggle span.bd1 {top: 37px;}
#nav-toggle span.bd2 {top: 46px;display:none;}
#nav-toggle span.bd3 {top: 49px;}


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


/* メニュー */
.fix-area {
	position: fixed;z-index: 55;width: 70px;height: 70px;border-radius:25%;
	background: rgb(247,191,140);
	background: linear-gradient(135deg, rgba(245,160,82,1) 0%, rgba(235,130,67,1) 40%, rgba(235,97,59,1) 100%);}
.fix-area::before {
	background: rgb(247,191,140);
	background: linear-gradient(315deg, rgba(245,160,82,1) 0%, rgba(235,130,67,1) 40%, rgba(235,97,59,1) 100%);
	transition:.3s ease-in;content:"";height:100%;width:100%;border-radius:25%;position:absolute;left:0;top:0;
}
.fix-area:hover::before {opacity:0;}

.menu {
	overflow:hidden;
	counter-reset: item;margin-left: 15px;
	position:relative;
	top:8px;
}
.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){

	#nav-toggle {width:60px;height:60px;top:45px;right:15px;}
	.fix-area {width:60px;height:60px;}
	.menu {margin-left: 11px;top:1px;}
	#nav-toggle span {left:16px;}
	#nav-toggle span.bd1 {top:31px;}
	#nav-toggle span.bd3 {top:42px;}
	.open #nav-toggle span.bd1 {top:37px;}
	.open #nav-toggle span.bd3 {top:37px;}
	.open .menu::before {letter-spacing:0.05em;}

	#global-nav {padding:0% 0.5% 2% 10%;width:240px;}
	#global-nav ul li a {padding:1em 0;}
	.open #global-nav {transform: translateX(-470px);}

}