/*----------------------------------------------------
	1. CSS Reset
------------------------------------------------------*/

html { font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
	text-rendering: optimizelegibility; 
}
body {
	color:#888089;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	position:relative;
	background:#fff;
	max-width: 100%;
	height:100%;
	overflow: scroll;
	-webkit-font-smoothing: antialiased;
}
a {
	text-decoration:none;
	color:#7b5765;
	outline:none;
}

/*----------------------------------------------------
	 2. Document Setup
------------------------------------------------------*/
.wrapper{
	width:100%;
}
.spHeight{
	padding-top:63px;
}
.wrapper.noGap {
	padding-top:0;
}
.noMar{
	margin:0 !important;
}
.noPadd{
	padding:0px !important;
}
p{
	font-size:13px;
	line-height:27px;
	font-weight:400;
	padding-bottom:20px;
	margin:0px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color:#000;
}
h1{
	font-family: 'Noto Serif JP', serif;
	font-size:3em;
	line-height:76px;
	font-weight:400;
	margin:0px;
	padding-bottom:8px;
	text-align: center;
}
h2{
	font-family: 'Montserrat', sans-serif;
	font-size:19px;
	color:#7b5765;
	line-height:57px;
	padding-bottom:10px;
	font-weight:400;
	text-transform:uppercase;
	margin:0px;
	text-align: center;
	margin-top: 135px;
}
h3{
	font-family: 'Montserrat', sans-serif;
	font-size:11px;
	line-height:30px;
	padding-bottom:10px;
	font-weight:300;
	margin:0px;
	text-align: center;
}
h4{
	font-family: 'Montserrat', sans-serif;
	font-size:21px;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
h5{
	font-family: 'Montserrat', sans-serif;
	font-size:17px;
	color:#7b5765;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
tbody{
	padding: 10px;
}

.wrapper .media {
	margin-top:0;
}
.heading{
	text-align:center;
	padding-bottom:70px;
}
.heading .container{
	padding-top:0px !important;
	padding-bottom:0px !important;
	padding-right: 15px;
	padding-left: 15px;
}

h2:after {
	content:"";
	display:block;
	width:76px;
	height:2px;
	background:#5b4c5c;
	position:absolute;
	bottom:50;
	left:50%;
	margin-left:-38px;
}
.heading h3{
	font-size:18px;
	line-height:30px;
	color:#5b4c5c;
	padding-bottom:0;
	font-weight:300;
	text-transform:none;
	letter-spacing:1px;
}
.heading p{
	line-height:25px;
}
.topmar{
	margin-top:20px;
}
.cv-btn{
	border:2px solid #746c75;
	background:none;
	line-height:30px;
	font-size:7px;
	color:#7b5765;
	letter-spacing:2px;
	text-transform:uppercase;
	font-weight:600;
	border-radius: 0;
	padding: 1rem;
}

/*----------------------------------------------------
	3. Header Part
------------------------------------------------------*/
header{
	position:relative;
}
.banner{
	overflow:hidden ;
	margin:0 auto !important;
	background:#CACACA;
}
.patternOverlay {
	background:#f7f7f7;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	z-index:9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.bannerText{
	width:100%;
	position:absolute ;
	/*left:47%;*/
	/*right:47%;*/
	top:32%;
	text-align:center;
	margin-top:-35px;
	padding:0 ;
	z-index:999 ;
}
.bannerText h1{
	margin: 0 auto;
	text-transform:uppercase;
	line-height:normal;
	font-weight:400;
	color:#a0a0a0;
	letter-spacing:4px;
    writing-mode: vertical-rl;
}
.bannerText h3{
	color:#fff;
	font-size:19px;
	line-height:normal;
	font-weight:400;
	text-transform:none;
	margin-bottom:20px;
	letter-spacing:2px;
}
.navbar-header{
    background: #fff;
    display: flex;
    padding: 20px;
    position: absolute;
    justify-content: space-between;
    width: 100%;
}

/*----------------------------------------------------
 	3.1 Menu Style
------------------------------------------------------*/
.isStuck{
    left:0px;
    width:100%;
}
.menu{
	margin-top:34px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
}
.logo{
	float:left;
	background:url(../images/logo-2.png) no-repeat 0 0;
	width:123px;
	height:80px;
	font-size:0;
	line-height:0;
}
.isStuck .logo{
	background:url(../images/logo.png) no-repeat 0 0;
}
.navwrapper .container{
	padding:0;
	width:auto;
}
.navArea {
	position:relative;
}
.navbar.navbar-inverse.navbar-static-top a.closeMenu {
	width:32px;
	height:32px;
	border:1px solid #fff;
	text-align:center;
	color:#fff;
	font-weight:normal;
	position:absolute;
	right:0;
	top:20px;
	padding:0;
	margin:
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}
.navbar.navbar-inverse.navbar-static-top a.closeMenu:hover {
	background:none;
}
.isStuck .navbar.navbar-inverse.navbar-static-top a.closeMenu:hover{
	background:none;
}
.closeMenu i {
	font-size:14px;
	line-height:32px;
	color:#fff;
}
.isStuck .navbar.navbar-inverse.navbar-static-top a.closeMenu {
	border-color:#000;
}
.isStuck .navbar.navbar-inverse.navbar-static-top a.closeMenu i {
	color:#000;
}
.navbar-header{
	display:none;
}
.nav > li > a{
	display:inline-block;
	font-weight:200;
	letter-spacing:2px;
}
.navbar-nav > li{
	float: none;
	display: inline-block;
	padding: 10px;
}
.navbar-nav{
	margin: 0 auto;
	text-align: center;
	float: none;
}

.navbar-toggle{
	margin-top:14px;
}

.navbar-wrapper {
  margin-top:0px;
  height:80px;
  position: relative;
  z-index: 15;
}
.navbar-wrapper .container{
	padding:0px;
}

.navbar-collapse{
	padding:0;
}
.navbar-collapse.in{
	max-height:100%;
}

.navbar.navbar-inverse.navbar-static-top {
  margin:0px auto;
  background:none;
  color:#c3c8d6;
  border:none;
  font-family: 'Open Sans', sans-serif;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
}
.navbar.navbar-inverse.navbar-static-top a{
  color:#a0a0a0;
  padding:31px 16px;
  line-height:18px;
  text-align:center;
}
.navbar.navbar-inverse.navbar-static-top a:hover{
  background:none;
  color:#fff;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus{
  background: none;
  color:#a0a0a0 !important;
}
.navbar-inverse .navbar-nav>.active>a:hover {
  color:#fff;
}

.hideClass{
	display:none;
}
.isStuck .navbar-inverse .navbar-nav>.active>a, .isStuck .navbar-inverse .navbar-nav>.active>a:focus{
  background: #181a1c;
  color:#fff ;
}
.isStuck .navbar.navbar-inverse.navbar-static-top a:hover{
  background:#181a1c;
  color:#fff;
}
.isStuck .navbar.navbar-inverse.navbar-static-top a{
  color:#000;
}
.nav-icon {
	width:42px;
	height:32px;
	text-align:center;
	background:#5b4c5c;
	position:absolute;
	left:50%;
	margin-left:-21px;
	top:36px;
	z-index:999;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.nav-icon i {
	color:#fff;
	line-height:32px;
	font-size:24px;
	font-weight:normal;
}
.default-menu {
	margin-top:-80px;
}
.stuckMenu,
.navbar-wrapper{
	-o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
	
	background: transparent;
}
.isStuck{
	background:#fff ;
	
	-o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.gnavi{
	z-index: 999;
    position: relative;
    top: 40px;
    height: 0px;
}


/*----------------------------------------------------
 	3.1 -2 ハンバーガー Style
------------------------------------------------------*/

/*ハンバーガーボタン*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
}
 
.el_humburger {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 45px;
  height: auto;
  padding-top: 1px;
  box-sizing: border-box;
  z-index: 10000;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  pointer-events: auto;
}
 
.el_humburger a{
  writing-mode: vertical-lr;
  font-size: 19px;
  height: 100px;
  text-align: center;
  position: relative;
  right: -16%;
  text-decoration: none;
  color: #7b5765
}

.el_humburger > span {
  display: block;
  width: 100%;
  margin: 0 auto 6px;
  height: 2px;
  background: #000;
  transition: all 0.2s ease-in-out;
}
.el_humburger > span:last-child {
  margin-bottom: 0;
}
.js_humburgerOpen .el_humburger > span {
  background: #000;
}
 
.js_humburgerOpen .el_humburger > span.top {
  transform: translateY(7px) rotate(-45deg);
}
 
.js_humburgerOpen .el_humburger > span.middle {
  opacity: 0;
}
 
.js_humburgerOpen .el_humburger > span.bottom {
  transform: translateY(-9px) rotate(45deg);
}
 
.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%;
}
 
.el_humburgerButton__close > span {
  display: block;
  width: 35px;
  margin: 0 auto;
  height: 4px;
  background: #fff;
}
 
.el_humburgerButton__close > span.el_humburgerLineTop {
  transform: translateY(5px) rotate(-45deg);
}
 
.el_humburgerButton__close > span.el_humburgerLineBottom {
  transform: translateY(-6px) rotate(45deg);
}
 
/*ナビゲーション*/
.uq_spNavi {
  display: none;
}
.uq_spNavi.js_appear {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  z-index: 9999;
}
 
.uq_spNavi_screen {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*background-color: rgba(255, 255, 255, 3.96);*/
  background-color: #f5f5f5ed;
  z-index: 999999;
  margin-top: 0px;
  padding-top: 0px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
 
.navigation {
  padding: 80px 0 0 0;
  text-align: center;
}
 
.navigation_item {
  font-size: 1.4rem;
  margin-bottom: 30px;
  font-family: sans-serif;
}
 
.navigation_item > a {
  color: #7b5765;
  font-family: 'Montserrat', sans-serif;
}
 
.js_fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

.mailform{
	height: 500px;
	margin: 0 auto;
	width: 620px;
}
.mailform th{
	vertical-align: middle;
	text-align: left;
	height: 70px;
	width: 30%;
}
.mailform td{
	display: block;
	margin-top: 18px;
    margin-left: 17px;
}
textarea{
		width: 100%;
		height: 200px;	
}


/*----------------------------------------------------
	 form Style
------------------------------------------------------*/

.send{
	width: 250px;
	height: 45px;
	border-radius: 25px;
	border:none;
	background: #7b5765;
	color: #fff;
	font-weight: 700;
	display: block;
	margin: 0 auto;
}

.send:hover{
	background-color: transparent;
    border: 2px solid #7b5765;
    color: #888 !important;
	font-weight: 700;
}
input[type="text"]{
		width: 100%;
		height: 20px;
	}
tbody{
	width: 100%;
}

.thanks{
	text-align: center;
}

/*----------------------------------------------------
	 10. Footer Style
------------------------------------------------------*/
.footer{
	background:#fff;
}
.footer .container{
	padding:84px 0 0;
}

.footer ul{
	margin:0 auto;
	margin-bottom:62px;
	text-align:center;
	list-style-type:none;
}
.footer ul li{
	display:inline-block;
	text-align:center;
	background:#bebabe;
	color:#ffffff;
	line-height:55px;
	margin:0 17px 14px;
	width:55px !important;
	height:55px !important;
	
	-webkit-border-radius: 50%;
    border-radius: 50%;
}
.footer ul li:hover{
	background:#1d1d1d ;
}
.footer ul li:hover	a{
	color:#fff;
}

.footer ul li a{
	color:#fff;
	width:42px !important;
	height:42px !important;
}
.footer ul li a i{
	line-height:55px !important;
	color:#fff;
}

.footer p{
	color:#8c9099;
	font-size:12px;
	line-height:24px;
	font-weight:300;
	text-align:center;
	margin: 0;
}
.footer p:last-child{
	padding-top:140px;
	padding-bottom:40px;
}
.gototop {
	display:inline-block;
	width:40px;
	height:40px;
	border:2px solid #746c75;
}
.gototop i {
	color:#817a82;
	line-height:35px;
}




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

	 11. Responsive style


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

@media screen and (min-width: 1200px) {
	.workYear{
		width:140px;
		height:140px;
		padding-top:50px;
	}
	
	.education .workYear{
		padding-top:58px;
	}
}


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

	.bannerText h1{
		font-size:65px;
		line-height:71px;
	}
	.bannerText h2{
		font-size:28px;
	}
	.proPic{
		text-align:center;
	}
	
	.navbar-inverse .navbar-toggle .icon-bar{
		background:#000;
	}
	.navbar-inverse .navbar-toggle:hover .icon-bar,
	.navbar-inverse .navbar-toggle.active .icon-bar{
		background:#fff;
	}
	.navbar-inverse .navbar-toggle.active {
		background-color:#11141c;
	}
}




@media screen and (max-width: 810px) {
	body{
		min-height:700px;
	}
	#header h3{
		font-size: 38px;
	}
	#header h3 span{
		font-size: 16px;
	}
	.abc{
		width:100%;
	}
	.navArea {
		float:none;
	}	
}


@media screen and (min-width: 768px) {
	.navbar.navbar-inverse.navbar-static-top a {
		padding-left:12px;
		padding-right:12px;
	}
	.navbar.navbar-inverse.navbar-static-top a.closeMenu {
		width:28px;
		height:28px;
		top:25px;
	}
	.closeMenu i {
		line-height:25px;
	}
}

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

 767px以下用（タブレット／スマートフォン用）の記述 

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

@media screen and (max-width: 767px) {
	#mf_header{
		margin-bottom: 30px;
	}
	.mailform{
		height: 700px;
		margin: 0 auto;
		max-width: 100%;

	}
	.mailform tr{
	}
	.mailform th{
		margin-top: 5px;
		margin-bottom: 10px;
		display: block;
		text-align: left;
		height: 30px;
		width: 100%;
	}
	.mailform td{
		display: block;
		margin-top: 5px;
	    width: 80%;
	    margin: 0 auto;

	}
	input[type="text"]{
		width: 100%;
	}
	textarea{
		width: 100%;
		height: 200px;	
	}
	.mf{
		width: 100%;
	}
	.mf_c{
	    margin: 0 auto;
	}

	.radio01{
	}

}

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

	.arrowpart{
		float:none;
		width:100%;
		height:40px;
		background:url(../images/arrow-top.png) no-repeat 50% 100%;
	}
	.education .arrowpart{
		background:url(../images/arrow-top-light.png) no-repeat 50% 100%;
	}


	.closeMenu,
	.nav-icon{
		display:none;
	}
	.navbar-nav > li {
		display:block;
	}
	ul.navbar-nav li a{
		display:block;
	}
	.navbar.navbar-inverse.navbar-static-top a {
		padding:10px 0;
	}
	.about{
		border-right:none;
		border-bottom:solid 1px #dbdbdb
	}
	.about:nth-child(3n+3){
		border-bottom:none;
	}
	.media {
		text-align:center;
	}
	.experdate {
		margin:0 auto 40px;
	}
	.conForm .submitBnt {
		width:100%;
	}
}

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

 650px以下用（スマートフォン用）の記述 

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

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


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


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