@charset "UTF-8";
/* CSS Document */

/*============================================================================================
↓共通========================================================================================
============================================================================================*/
html {
	font-size : 62.5%; /*←全体の文字サイズの基準を10pxにセット*/
	line-height: 1em; /*←全体の行間を1emにセット*/
} 

/* clearfix */
#header:after,
#container:after,
#contents:after,
.clearfix:after{
	content:" ";
	display:block;
	height:0;
	line-height:0;
	clear:both;
	visibility:hidden;
}
#header,
#container,
#contents,
.clearfix{
	display:inline-block;
	min-height:1%;
}

/* Hides from IE-mac */
* html #header,
* html #container,
* html #contents,
* html .clearfix{height:1%;}

#header,
#container,
#contents,
.clearfix{display:block;}

/* リンクテキスト */
a:link,a:visited {
	text-decoration: underline;
	color: #000;
}
a:hover {
	text-decoration: none;
	
}
a.over,.over {cursor: pointer;}

/* 画像 */
img.width-max{
     width: 100%;
	 max-width: 1024px; /*←幅いっぱいの画像の最大サイズを指定*/
     height: auto;
	 margin: 0 auto;
     display:block;
}

/* 余白/フロート */
.clear{clear:both;}
.left{ float:left;  }
.right{ float:right; }
.align-c{ text-align:center; }
.align-r{ text-align:right; }
.align-l{ text-align:left; }

.mgB0{   margin-bottom:0px;  }
.mgB5{   margin-bottom:5px;  }
.mgB10{  margin-bottom:10px; }
.mgB15{  margin-bottom:15px; }
.mgB20{  margin-bottom:20px; }
.mgB30{  margin-bottom:30px; }
.mgB40{  margin-bottom:40px; }
.mgB50{  margin-bottom:50px; }
.mgB60{  margin-bottom:60px; }

.mgT0{   margin-top:0px;  }
.mgT5{   margin-top:5px;  }
.mgT10{  margin-top:10px; }
.mgT15{  margin-top:15px; }
.mgT20{  margin-top:20px; }
.mgT30{  margin-top:30px; }
.mgT40{  margin-top:40px; }
.mgT50{  margin-top:50px; }

.mgR0{   margin-right:0px;  }
.mgR5{   margin-right:5px;  }
.mgR10{  margin-right:10px; }
.mgR15{  margin-right:15px; }
.mgR20{  margin-right:20px; }
.mgR30{  margin-right:30px; }
.mgR40{  margin-right:40px; }
.mgR50{  margin-right:50px; }

.mgL0{   margin-left:0px;  }
.mgL5{   margin-left:5px;  }
.mgL10{  margin-left:10px; }
.mgL15{  margin-left:15px; }
.mgL20{  margin-left:20px; }
.mgL30{  margin-left:30px; }
.mgL40{  margin-left:40px; }
.mgL50{  margin-left:50px; }

.pdgB0{   padding-bottom:0px;  }
.pdgB5{   padding-bottom:5px;  }
.pdgB10{  padding-bottom:10px; }
.pdgB15{  padding-bottom:15px; }
.pdgB20{  padding-bottom:20px; }
.pdgB30{  padding-bottom:30px; }
.pdgB40{  padding-bottom:40px; }
.pdgB50{  padding-bottom:50px; }

.pdgT0{   padding-top:0px;  }
.pdgT5{   padding-top:5px;  }
.pdgT10{  padding-top:10px; }
.pdgT15{  padding-top:15px; }
.pdgT20{  padding-top:20px; }
.pdgT30{  padding-top:30px; }
.pdgT40{  padding-top:40px; }
.pdgT50{  padding-top:50px; }

.pdgR0{   padding-right:0px;  }
.pdgR5{   padding-right:5px;  }
.pdgR10{  padding-right:10px; }
.pdgR15{  padding-right:15px; }
.pdgR20{  padding-right:20px; }
.pdgR30{  padding-right:30px; }
.pdgR40{  padding-right:40px; }
.pdgR50{  padding-right:50px; }

.pdgL0{   padding-left:0px;  }
.pdgL5{   padding-left:5px;  }
.pdgL10{  padding-left:10px; }
.pdgL15{  padding-left:15px; }
.pdgL20{  padding-left:20px; }
.pdgL30{  padding-left:30px; }
.pdgL40{  padding-left:40px; }
.pdgL50{  padding-left:50px; }

/*============================================================================================
↓フォント====================================================================================
============================================================================================*/

/*フォントサイズ*/
.font8{font-size: 80%;}
.font10{font-size: 100%;}
.font12{font-size: 120%; line-height:1.2em;}
.font14{font-size: 140%; line-height:1.4em;}
.font16{font-size: 160%; line-height:1.6em;}
.font18{font-size: 180%; line-height:1.8em;}
.font20{font-size: 200%; line-height:2em;}

.en{font-family: 'Raleway', sans-serif;
font-weight: 700;}
.crimson{font-family: 'Crimson Text', serif;}
.red{
	color: #d80a30;
}

/*============================================================================================
↓各デバイスでの表示切り替え===========================================================
============================================================================================*/
.sp, .tab {display: none;}/*only SP&TAB*/
.pc {display: block;}/*only PC*/
@media screen and (max-width: 1080px) {
.sp, .tab {display: none;}
.pc {display: block;}
}
@media screen and (max-width: 1024px) {
.sp, .pc {display: none;}
.tab {display: block;}
}
@media screen and (max-width: 767px) {
.pc, .tab {display: none;}
.sp {display: block;}
}


/*============================================================================================
↓＜レイアウト＞全体============================================================================
============================================================================================*/
html {
	width: 100%;
	height: 100%;
}
body {
	font-size : 1.4em; /*←サイト全体の文字サイズの基準*/
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	font-weight: 100;
	color: #000;
	width: 100%;
	height:100%;
	line-height:1.4em;
	-webkit-text-size-adjust: 100%;/*←iOS、Safari向け。PC向けサイトをスマートフォンで閲覧した時に文字サイズが大きくならないようにする。*/
	background-color:#e5e5e5;
}

#wrapper {
padding:0 12px 20px;
	
}
@media screen and (max-width: 767px) {
	#wrapper {
padding:0 0px 5px;
	
}
}
#wrapper .wrapper{
	background-color: #fff;
box-shadow:0px 0px 5px 1px #8c8c8c;
-moz-box-shadow:0px 0px 5px 1px #8c8c8c;
-webkit-box-shadow:0px 0px 5px 1px #8c8c8c;
	padding-bottom: 80px;
}
#wrapper .wrapper-inner{
	max-width: 1080px;
	margin: auto;
}

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

  font-size : 1.3em;
}
}
@media screen and (max-width: 1024px) {
body {
 
  font-size : 1.2em;
}
}
@media screen and (max-width: 767px) {
body {
 
}
}

/*============================================================================================
↓＜レイアウト＞レスポンシブ対応（上下余白・サイド余白）======================================
============================================================================================*/
.inner-wrap { /*可変幅*/
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
@media screen and (max-width: 1024px) {
.inner-wrap { /*可変幅*/
padding:0 20px;
}
}
.ajs-mg { /*可変マージン*/
	margin-bottom: 3em;
	overflow: hidden;
}
/*============================================================================================
↓ヘッダー======================================================================================
============================================================================================*/
#header{
	position: fixed;
	width: 100%;
	z-index:6;
}
#header .header{
	position: relative;
	padding: 0 30px;
}
#header .inner{
	background-color: #FFFFFF;
	padding: 15px 0;
}
#header h1 {
	background: url(../img/logo.jpg) no-repeat left center;
	background-size: contain;
	width:200px;
	height:32px;
	margin-left: 50px;
	display: block;
	text-indent:-200%;
	white-space:nowrap;
	overflow:hidden;
}
#header h1 a{
	width: 100%;
	height: 100%;
	display: block;
}
@media screen and (max-width: 767px) {
	#header .header{
		padding: 0px 20px;
		background-color: #FFFFFF;
	}
	#header h1{
		width: 160px;
		height: 25px;
		margin-left: 0;
	}
}
/*============================================================================================
↓トンボ======================================================================================
============================================================================================*/
 .brackets{
	max-width:45px;
	position:fixed;
	 z-index: 7;
}

.brackets img{
	width: 100%;
}
.bra1{
	top:8px;
	left:20px;
}
.bra2{
	top:8px;
	right:20px;
}
.bra3{
	bottom:42px;
	left:20px;
}
.bra4{
	bottom:42px;
	right:20px;
}

@media screen and (max-width: 767px) {
	 .brackets{
	display: none;
}
}
/*============================================================================================
↓左右======================================================================================
============================================================================================*/
.right-side,.left-side{
	background-color: #fff !important;
	width: 40px;
	height: 100%;
	position: fixed;
	
}
.right-side{right: 12px;
}
.left-side{left: 12px;
	text-indent:-100%;
	white-space:nowrap;
	overflow:hidden;}
.right-side p{
	position: absolute;
	top: 45%;
	right: -70px;
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	letter-spacing: 0.08em;
}
@media screen and (max-width: 1024px) {
	.right-side p{
	right: -60px;
}
	.right-side,.left-side{
	width: 60px;
	
}
}
@media screen and (max-width: 767px) {
	.right-side,.left-side{
	background-color: inherit;
	width: 0px;
	position: relative;
	
}
}

/*============================================================================================
↓フッター======================================================================================
============================================================================================*/
footer{
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color:#e5e5e5;
	padding: 10px 0 5px;
	}
 .totop{
	position: fixed;
	bottom:18%;
	right: 0;
	font-size: 0.8em;
	 z-index: 4;
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	 letter-spacing: 0.08em
	
	
}
.totop a{
	text-decoration: none;
	padding: 4px;
	background: #e5e5e5;
}
 .totop img{
	height: 12px;
	 vertical-align: middle;
	 
}
@media screen and (max-width: 767px) {
	footer{
	position:relative;
	
	}
	.totop{bottom:7%;
	right: -4%;}
}

/*===========================================================================
↓loading====================================================================
===========================================================================*/
.loadingWrap{
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999999999999999999999999999999999 !important;
}
.loadingWrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999999999999999999999999999999999999 !important;
}

@media screen and (max-width: 480px) {
.loadingWrap img{
	position: absolute;
	top: 40%;
	left: 45%;
}
}

/*===========================================================================
↓spmenu====================================================================
===========================================================================*/


/* menu button - label tag */
.menu-btn, .close-btn {
	position: fixed;
	display: block;
	top:50%;
	left: 26px;
	display: block;
	width: 30px;
	height: 27px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 12;
}
.close-btn {
	display:none;
}
.bar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 100%;
	height: 3px;
	background: #000;
	transition: all .5s;
	transform-origin: center;
}
.bar.top {
	top: calc(50% - 10px);
}
.bar.middle {
	opacity: 1;
}
.bar.bottom {
	top: calc(50% + 10px);
}
@media screen and (max-width: 767px) {
	.menu-btn, .close-btn {
		top:15px;
		left: inherit;
		right:20px;
	}
}
.close-btn .bar {
	background:#fff !important;
}
.close-btn .bar.top {
	top: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
}
.close-btn .bar.middle {
	opacity: 0;
}
.close-btn .bar.bottom {
	top: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
}
.drawer-menu {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0);
	cursor: url(https://theorthodoxworks.com/demo/images/cross.svg), auto;
	display:none;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
 -webkit-transition-delay: .3s;
 transition-delay: .3s;
	background: rgba(132, 132, 132, 0.9);
	visibility: visible;
	opacity: 1;
	z-index: 11;
}
.drawer-menu ul {
	position: fixed;
	top: 30%;
	margin: auto;
	left: 12%;
}
.drawer-menu li {
	margin-bottom: 50px;
	font-size: 2.8em;
	letter-spacing: 0.06em;
}
.drawer-menu li:last-child {
	margin-bottom: 0px;
}
.nav {
	width: 100%;
}
.drawer-menu li .nav {
	color: #fffffff;
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #ffF;
	display:none;
}
.drawer-menu li .nav:before {
	position: absolute;
	top: 0.5em;
	left: 0;
	content: "";
	display: inline-block;
	width: 0;
	height: 4px;
	background: #ebe583;
	transition: 0.5s;
}
.drawer-menu li .nav:hover:before {
	width: 100%;
}
 @media screen and (max-width: 767px) {
 .drawer-menu ul {
 top: 0%;
 left: 0%;
	 right: 0;
	 bottom: 0;
	 height: 300px;
	 margin: auto;
}
.drawer-menu li {
 margin-bottom: 30px;
 font-size: 1.8em;
	text-align: center;
 letter-spacing: 0.06em;
}
.drawer-menu li .nav:before {
	 display:none;
}
}