@charset "utf-8";

body{
	font-size:14px;
	font-family: Verdana, 'Hiragino Kaku Gothic W3 JIS2004',"游ゴシック", YuGothic,'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, Meiryo, メイリオ, sans-serif;
	line-height:2.0;
	color:#333333;
	background:#000;
}
img{
	max-width:100%;
	height:auto;
}

/*---------------------------*/
/*-- wrapper,header,topimg --*/
/*---------------------------*/
/* 通常時はスマホ 0～640px */
.wrapper{
	width:100%;
	margin:auto;
	overflow:hidden;
	word-break: break-all;
	background:#000;
}
.header{
	position:relative;
}
.header .logo{
	display:none;
}
.header .logom{
	display:none;
}
.header .logosp{
	display:block;
}
.header .logosp h1{
	margin-top:10px;
	padding:20px 0 10px 10px;
	background:#fff;
	text-align:left;
}
.topimg{
	background:url(../jc-images/topimgsp.jpg) no-repeat center left;
	background-size:cover;
	height:140px;
}

/* タブレット 641～960px */
@media (min-width: 641px) {
  .wrapper{
	max-width:95%;
  }
  .header .logom{
	display:block;
  }
  .header .logom h1{
	margin-top:10px;
	padding:10px 0 0 10px;
	background:#fff;
	text-align:left;
  }
  .header .logosp{
	display:none;
  }
  .header .logo{
	display:none;
  }
 .topimg{
	background:url(../jc-images/topimgm.jpg) no-repeat center center; /* center left; */
	background-size:cover;
	height:220px;
  }
} /* end */

/* それ以上 961px～ */
@media (min-width:961px) {
  .wrapper{
	max-width:90%; /* 95% */
  }
  .header .logo{
	display:block;
  }
  .header .logo h1{
	margin-top:10px;
	padding:10px 0 0 20px;
	background:#fff;
	text-align:left;
  }
  .header .logosp{
	display:none;
  }
  .header .logom{
	display:none;
  }
 .topimg{
	background:url(../jc-images/topimg.jpg) no-repeat center center; /* center left; */
	background-size:cover;
	height:300px; /* 320px */
  }
} /* end */



/*---------------------------*/
/*-- nav --------------------*/
/*---------------------------*/
/* 通常時はスマホ 0～640px */
.nav{
	margin:0;
	background:#fff;
	position:absolute;
	bottom:20px; /* 5px */
	right:10px;
}
.nav ul{
	margin:0;
}
.nav ul li {
	/* float:left; */
	width: 80px;
	margin:0 0 5px 0;
	background:url(../jc-images/linesp.jpg) no-repeat bottom center;
	text-align: center;
}
.nav ul li a{
	display:block;
	line-height: 30px;
	height:30px;
	color: #333333;
	text-decoration:none;
	font-style:italic;
}
.nav ul li a:active{
	color: #aa0000;
	text-decoration:none;
}

/* タブレット以上 641～960px */
@media (min-width: 641px) {
  .nav{
	bottom:26px;
	right:10px;
  }
  .nav ul{
  }
  .nav ul li {
	float:left;
	width: 80px;
	margin:0 20px 0 0;
  }
  .nav ul li a{
	padding:5px 0;
	font-size:110%;
  }
  .nav ul li a:hover{
	color: #aa0000;
	text-decoration:none;
  }
} /* end */

/* それ以上 961px～ */
@media (min-width:961px) {
  .nav ul li {
	width: 120px;
  }
  .nav ul li a{
	padding:10px 0;
	font-size:130%;
  }
} /* end */



/*---------------------------*/
/*-- contentsとその内部 -----*/
/*---------------------------*/
/* 通常時はスマホ 0～640px */
.contents{
	margin:2em 0;
	padding:2em;
	background:url(../jc-images/background.jpg) repeat top center;
	text-align:center;
	font-size: 120%;
}
.catch{
	margin:0 auto;
	padding:0.5em 0 1em 0;
	width:100%;
	font-weight:normal;
	color:#aa0000;
	font-size:125%;
}
.cool{
	font-family: 'Tangerine', cursive;
	font-size:185%;
	font-weight:bold;
}
.descript{
	padding:0 0 2em 0;
	width:100%;
	text-align:center;
}
.descriptfont{
	font-size:150%;
}

/* タブレット 641～960px */
@media (min-width: 641px) {
  .contents{
	font-size:160%;
  }
  .descript{
	padding:0 1em 2em 1em;
  }
} /* end */

/* それ以上 961px～ */
@media (min-width:961px) {
  .contents{
	font-size:180%;
  }
  .descript{
	padding:0 2em 2em 2em;
  }
} /* end */



/*----------------------------------*/
/*-- line2,comwrapperとその内部 -----*/
/*----------------------------------*/
/* 通常時はスマホ 0～640px */
.line2{
	margin:0 auto;
	padding:1em 0 0 0;
	font-size:1px;
	background:url(../jc-images/linesp.jpg) repeat-x top center;
	color:#fff;
}
.comwrapper{
	margin:0 auto;
	width:100%;
	border:1px solid #c3c8e8;
	-webkit-box-shadow: 0px 0px 6px 0px rgba(195,200,232,1);
	-moz-box-shadow: 0px 0px 6px 0px rgba(195,200,232,1);
	box-shadow: 0px 0px 6px 0px rgba(195,200,232,1);
	background:#fff url(../jc-images/office.jpg) no-repeat bottom right;
	color:#000;
	text-shadow:1px 1px 0px #fff;
}
.comtable{
	float:left;
	padding:1em;
	width:85%;
	font-size:60%;
}
.comtitle{
	float:left;
	padding:0em 0.5em 0em 0em;
	font-size:250%;
	font-weight:bold;
}
.comtable .item1{
	float:left;
	width:30%;
	padding:0.5em 0em 0.5em 0em;
	text-align:left;
	font-size:100%;
}
.comtable .item2{
	float:left;
	width:70%;
	padding:0.5em 0 0.5em 0;
	text-align:left;
	font-size:100%;
}
.clear {
	clear:both;
} 

/* タブレット 641～960px */
@media (min-width: 641px) {
 .comwrapper{
	margin:0 auto;
	width:90%;
  }
  .comtable{
	width:90%;
  }
  .comtitle{
	float:left;
	padding:0em 1em 0em 0.5em;
	font-size:260%;
	font-weight:bold;
}
  .comtable .item1{
	float:left;
	width:20%;
	padding:0.5em 1em 0.5em 1em;
	text-align:left;
	font-size:100%;
  }
  .comtable .item2{
	float:left;
	width:70%;
	padding:0.5em 0 0.5em 0;
	text-align:left;
	font-size:100%;
  }
} /* end */

/* それ以上 961px～ */
@media (min-width:961px) {
 .comwrapper{
	margin:0 auto;
	width:90%;
  }
  .comtitle{
	float:left;
	padding:0em 1em 0em 0.5em;
	font-size:260%;
	font-weight:bold;
}
  .comtable .item1{
	float:left;
	width:15%;
	padding:0.5em 1em 0.5em 1em;
	text-align:left;
	font-size:100%;
  }
  .comtable .item2{
	float:left;
	padding:0.5em 0 0.5em 0;
	text-align:left;
	font-size:100%;
  }
} /* end */



/*---------------------------*/
/*-- footer以下 -------------*/
/*---------------------------*/
/* 通常時はスマホ 0～640px */
.footer{
	text-align:center;
}
.copyright{
	margin:0 auto;
	padding:3em 0 3em 0;
	font-size:90%;
	background:url(../jc-images/linesp.jpg) repeat-x top center;
	color:#fff;
}

#page-top{
	width:50px;
	height:50px;
	display:block;
	position:fixed;
	right:2%;
	bottom:0.5em;
}
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#3b3b3b;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
#page-top p:hover{
	background:#8b8b8b;
}
#move-page-top{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

/* タブレット 641～960px */
@media (min-width: 641px) {
  #page-top{
	width:55px;
	height:55px;
	display:block;
	position:fixed;
	right:2.5%;
	bottom:1em;
  }
  #move-page-top{
	line-height:60px;
  }
} /* end */

/* それ以上 961px～ */
@media (min-width:961px) {
  #page-top{
	width:60px;
	height:60px;
	display:block;
	position:fixed;
	right:5%;
	bottom:1em;
  }
  #move-page-top{
	line-height:60px;
  }
} /* end */