@charset "UTF-8";
/* CSS Document */
@import url('reset.css');
@import url('global.css');


/*
	全体にかかわるもの
*/
html { overflow:scroll;  font-size:10px; }
body {}
img { vertical-align:bottom; width:100%; }
.container { width:100%; max-width:1100px; margin-left:auto; margin-right:auto;}
article { }

.font-01 { font-family: "リュウミン R-KL"; }
.font-02 { font-family: 'Lato', sans-serif; }


/*
	画面サイズによって切り替えるフラグ
*/
.pc { display:block; }
.sp { display:none; }

/*
	背景
*/

.bgBlack { background-color: #444; }


/*------------------------------------------------------
	ヘッダー
------------------------------------------------------*/
header { position:relative; }
header #headNav { padding-top: 20px; background-color: rgba(255,255,255,0.5); /*position: absolute;*/ top: 0; left: 0; width: 100%; z-index: 999;}
header h1 { text-indent:-9999px; background:url(../images/logo.png) no-repeat left top; width:180px; height:25px; background-size:100% auto; display:block;  margin:0 auto 14px auto;  }
header h1 a { display:block; height:100%;}
header nav { width:100%; max-width: 1200px; margin:0 auto; padding:5px 0 15px 0;}
header nav ul { list-style-type:none;}
header nav ul li { width:25%; float:left; text-align:center; line-height:1.4;}
header nav ul li a { color: #000; font-size:1.2rem; }
header nav ul li a:link { color:#333; text-decoration: none; }
header nav ul li a:visited { color:#333; }
header nav ul li a span { font-size:1.6rem; letter-spacing: 2px; display:block; }

#headMenuBtn { width: 40px; height: 40px; background-color: #eee; position: absolute; right: 10px; top: 10px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;}
#headMenuBtn span { display: block; background-color: #3D4042; height: 4px; margin: 6px 5px;}
#headMenuBtn span:first-child { margin-top: 8px;}

#headMenuBtn.active { background-color: #3D4042; }
#headMenuBtn.active span { background-color: #eee;}

@media (min-width: 768px) {
    header #headNav { position: absolute; }
	header #headNav nav { height: auto !important; display: block !important; opacity: 1 !important;}

	header #headNav.scroll { position: fixed; background-color: rgba(255,255,255,0.9); padding-top: 10px; }
	header #headNav.scroll h1 { margin-bottom: 0;}
	header #headNav.scroll span { display: none; }
	header #headNav.scroll nav { padding-top: 10px; padding-bottom: 10px;}
	
	#headMenuBtn { display: none;}
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	header #headNav { position: fixed; padding-top: 10px;}
	header #headNav h1 { background: url(../images/logo_sp.svg) no-repeat left top; background-size: 100% auto; width: 40px; height: 40px; margin-left: 10px; margin-bottom: 10px; }
	header #headNav nav { display: none; background-color: rgba(0,0,0,0.8); padding: 0; opacity: 0; }
	header #headNav nav ul { margin: 0 20px; padding-top: 20px;}
	header #headNav nav ul li a { font-size: 1.8rem; color: #fff; display: block; padding: 15px; text-decoration: none; }
	header #headNav nav ul li { width:100%; text-align: left; border-bottom: 1px solid #fff; position: relative;}
	header #headNav nav ul li::before { content: ''; position: absolute; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; right: 0; top: 13px; }
	header #headNav nav ul li::after { content: ''; position: absolute; left: auto; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 8px; top: 20px;}
	header #headNav nav span { display: none; }
}


/*------------------------------------------------------
	フッター
------------------------------------------------------*/
footer { font-size:16px; position:relative; text-align:center; background:url(../images/footBg.png) repeat-x left top; padding:45px 0 0 0; margin-top:50px; }
footer ul { list-style-type:none; width: 80%; max-width: 500px; margin: 0 auto; }
footer ul li { width:auto; float:left; }
footer ul li a { color:#333 !important; text-decoration:none !important; border-left:1px solid #333; padding:0 25px; }
footer ul li:first-child a { border-left:none;}
footer #copy { padding:12px 0;}



/*------------------------------------------------------
	トップへ戻る
------------------------------------------------------*/
#page-top { position:fixed; bottom:20px; right:20px; font-size:1.4rem; z-index:999; }
#page-top a { background: #666; text-decoration: none; color:#fff; width:100px; padding:20px 0; text-align:center; display: block; border-radius: 5px; opacity:0.8;  }
#page-top a:hover { text-decoration:none; background:#999; }



.colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; }


/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	以下レスポンシブ

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media (max-width: 767px) {

	/* 全体に関わる部分 */
	body { }
	.pc { display:none; }
	.sp { display:block; }
	.container { /*width:90%;*/ width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
	
	/* ヘッダー */
	header nav { width:100%; }

	/* フッター */
	footer ul { width:90%; max-width:420px; }
	footer ul li a { padding:0 16px; }

}

@media (max-width: 480px) {
	/* 全体に関わる部分 */
	.container { /*width:95%;*/ width: -webkit-calc(100% - 20px); width: calc(100% - 20px);}
	
	/* ヘッダー */
	header nav ul li a span { font-size: 1.6rem; }
	header nav ul li a { font-size: 1.1rem; }
	
	/* フッター */
	footer ul li { width:100%; border-left:1px solid #333; border-right:1px solid #333; margin-bottom:10px; }
	footer ul li a { border:none; display:block; }

}



/*------------------------------------------------------
    loading
------------------------------------------------------*/
html.loading { overflow: hidden;}
#loaderWrap { position: fixed; top: 0; left: 0; background-color: #ffffff; width: 100%; height: 100%; z-index: 1000; }

.loader,
.loader:after {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 5px solid rgba(0, 0, 0, 0.1);
  border-right: 5px solid rgba(0, 0, 0, 0.1);
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  border-left: 5px solid #999999;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loadanime 1.0s infinite linear;
  animation: loadanime 1.0s infinite linear;
    top: calc(50% - 100px);
}
#loaderWrap p { color: #999; text-align: center; position: relative; font-size: 1.4rem; top: calc(50% - 145px); }

@-webkit-keyframes loadanime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadanime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}