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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,400,500&subset=japanese');

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing:0em;
	text-align: center;
	border-spacing: border-box;
	font-weight: 400;
	line-height:150%;
}

header{
	padding: 50px 0px;
	width: 96%;
	max-width: 1080px;
	display: inline-block;
}

#wrap{
	overflow: hidden;
}

main{
	padding: 0px 0px 60px;
	width: 96%;
	max-width: 1080px;
	display: inline-block;
	text-align: left;
}

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

	header{
		padding: 25px 0px 50px;
		width: 94%;
	}
	
	main{
		width: 94%;
	}

}

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

	header{
		width: 90%;
	}


	main{
		width: 90%;
	}	
}

h1{
	color: #000;
	margin:0px 0px 40px;
	font-size: 32px;
	position: relative;
	z-index: 1;
	font-weight:100;
	letter-spacing: 0.15em;
}

h2{ 
	color: #000;/*文字色*/
	font-size:25px;
	margin:15px 0px;
	font-weight:500;
}

h3{
	color: #000;/*文字色*/
	font-size:16px;
	padding:0px;
	margin: 20px 0px 10px;
	font-weight:500;
}

p{	
	margin:0px 0px 5px;
	font-size: 13px;
}

table,tr,td{
	font-size: 13px;
	margin:0px;
	padding:3px 0px;
	border-spacing: 0px;
	vertical-align: top;
}

table{
	display: inline-block;
}

.pc-tb{
	width: 220px;
	float: left;
}

td{
	min-width: 60px;
}

ul {
	list-style: none;
}

li{
	font-size: 13px;
}

a{
text-decoration: none;
color: #000000; 
}

a:visited {
color: #000000; 
}

a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)"; 
}

a:active {
color: #000000; 
}


.clear{
	clear:both;
}

.pc,.pc2{
	display:inline-block;
}

.sp,.sp2{
	display:none;
}

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

	.pc2{
		display:none;
	}

	.sp2{
		display:inline-block;
	}

}

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

	.pc{
		display:none;
	}

	.sp{
		display:inline-block;
	}

}

.mb-30{
	margin-bottom: -30px;
}

.mb10{
	margin-bottom: 10px;
}

.mb20{
	margin-bottom: 20px;
}

.mb30{
	margin-bottom: 30px;
}

.mb40{
	margin-bottom: 40px;
}

.mb50{
	margin-bottom: 50px;
}

.mb100{
	margin-bottom: 100px;
}

.mb120{
	margin-bottom: 120px;
	
}

.mr15{
	margin-right: 15px;
}

footer{
	height: 50px;
}

footer p{
	font-size: 11px;
}

@media screen and (max-width:1120px) {
	
	.mr15{
		margin-right: auto;
		margin-left: auto;
	}
	
}

.color1{
	color: #00B3D6;
}

#page_top{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #333;
	position: fixed;
	bottom: 13px;
	right: 7px;
	margin: auto 10px;
	z-index:4;
}

#page_top p:after {
	position: absolute;
	top: 16px;
	left: 13px;
	content: "";
	width: 13px;
	height: 13px;
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index:4;
}

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

	h1{
		font-size: 27px;
	}

	h1 span{
		font-size: 15px;
	}


	h3{
		font-size:14px;
	}

	p{	
		font-size: 12px;
	}	
	
	.profile-p{
		margin:0px 100px 20px;
	}
	
	.profile-f{
		margin:0px;
	}

	table,tr,td{
		font-size: 12px;
	}
	
}

.content-p img{
	border: 1px solid #ddd;
	width: 100%;
	max-width: 1080px;
}

.content-p-nb img{
	width: 100%;
	max-width: 1080px;
}

.content-t{
	display: inline-block;
}

.content-p50{
	text-align: center;
}

.wd70{
	border: 1px solid #ddd;
	width: 100%;
	max-width: 700px;
}

.wd50{
	width: 100%;
	max-width: 540px;
}

.wd49{
	border: 1px solid #ddd;
	width: 100%;
	max-width: 530px;
}

.wd49-nb{
	width: 100%;
	max-width: 530px;
}

.wd48{
	width: 100%;
	max-width: 520px;
}

@media screen and (max-width:1120px){
	
	.wd49,.wd48{
		max-width: 540px;
	}
	
}



/*-------------------- loading --------------------*/


#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 11;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #000;
  z-index: 12;
}

#wrap {
	display: none;
}


/*--------------------index--------------------*/




.top01{
	display: inline-block;
	margin:0px 0% 0px 0px;
	width: 8%;
	height: auto;
	float: left;
}

.top02{
	display: inline-block;
	margin:0px 0px 0px;
	padding-bottom: 30px;
	padding-left: 2%;
	width: 90%;
	height: auto;
	vertical-align: top;
	position: relative;
	float: right;
}

.scroll{
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	color: #00B3D6;
}

.scroll img,.scroll p{
	display:inline-block;
}

.scroll img{
	margin: 0px 2px 0px -2px;
}

@media screen and (max-width:768px){
	
	.top01{
		width: 13%;
	}

	.top02{
		width: 85%;
	}		
}

@media screen and (max-width:568px){
	
	.top01{
		width: 20%;
	}

	.top02{
		width: 78%;
	}	
}

.site-header{
	float: right;
}

.site-header li{
	margin: 0px 0px 5px 30px;
	display: inline-block;
	letter-spacing:0.15em;
}

#indexs{
	margin-top: 180px;
	margin-bottom: 100px;
	text-align: center;
}

.index01 {
    background: url("img/TOP_01_over.png") no-repeat;
}

.index02 {
    background: url("img/TOP_02_over.png") no-repeat;
}

.index03 {
    background: url("img/TOP_03_over.png") no-repeat;
}

.index04 {
    background: url("img/TOP_04_over.png") no-repeat;
}

.index05 {
    background: url("img/TOP_05_over.png") no-repeat;
}

.index06 {
    background: url("img/TOP_06_over.png") no-repeat;
}

.index07 {
    background: url("img/TOP_07_over.png") no-repeat;
}

.index08,.index09 {
    background: url("img/TOP_08_over.png") no-repeat;
}

.index01,.index02,.index03,.index04,.index05,.index06,.index07{
	margin: -180px -92px;
	height: 700px;
	width: 700px;
	display: inline-block;
	background-size:cover;
}

.index08{
	margin: -180px 165px -180px -92px;
	height: 440px;
	width: 440px;
	display: inline-block;
	background-size:cover;
}

.index09{
	display: none;
}

.index01 img,.index02 img,.index03 img,.index04 img,.index05 img,.index06 img,.index07 img,.index08 img,.index09 img {
	width: 100%;
}
 
.index01 a,.index02 a,.index03 a,.index04 a,.index05 a,.index06 a,.index07 a,.index08 a,.index09 a {
    display: inline-block;
}
 
.index01 a:hover,.index02 a:hover,.index03 a:hover,.index04 a:hover,.index05 a:hover,.index06 a:hover,.index07 a:hover,.index08 a:hover,.index09 a:hover {
	background-color: transparent; /* IE6対応 */
}
 
.index01 a:hover img,.index02 a:hover img,.index03 a:hover img,.index04 a:hover img,.index05 a:hover img,.index06 a:hover img,.index07 a:hover img,.index08 a:hover img,.index09 a:hover img {
    visibility: hidden;
}

@media screen and (max-width:1120px){
	
	#indexs{
		margin-top: 50px;
		margin-bottom: 30px;
	}
	
	.index01,.index02,.index03,.index04,.index05,.index06,.index07{
		margin: -128px -64px;
		height: 490px;
		width: 490px;
	}
	
	.index08{
		margin: -128px 126px -128px -64px;
		height: 300px;
		width: 300px;
	}
	
}

@media screen and (max-width:768px){
	
	#indexs{
		margin-top: 25px;
		margin-bottom: 20px;
	}
	
	.index01,.index02,.index03,.index04,.index05,.index06,.index07{
		margin: -90px -44px;
		height: 335px;
		width: 335px;
	}
	
	.index08{
		margin: -90px 80px -90px -44px;
		height: 210px;
		width: 210px;
	}
	
}

@media screen and (max-width:568px){
	
	.index08{
		display: none;
	}
	
	.index09{
		margin: -90px 80px -90px -45px;
		height: 210px;
		width: 210px;
		display: inline-block;
		background-size:cover;
	}
	
}

/*--------------------ハンバーガーメニュー--------------------*/

/*--------------------PCのスタイル--------------------*/

#hg_menu{
	display:none;
}
 
#hg_menu nav ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

#hg_menu nav ul li a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
	padding: 15px ;
}

#nav_toggle{
	display: none;
}
 
/*--------------------メニュー部分--------------------*/

@media screen and (max-width:768px){
	
	.site-header{
		display:none;
	}	

	#hg_menu{
		display:block;
	}

	nav{
		display:none;
		position: fixed;
		top:0px;
		left:0px;
		width: 100%;
		background: rgba(255,255,255,0.9);
		z-index: 5;
		padding: 20px 0px;
	}

	#hg_menu nav ul{
		margin: 0px auto;
		width: 70%;
	}

	#hg_menu nav ul li{
		margin: 0 auto;
		text-align: center;
	}

	#hg_menu nav ul li a{
		display: block; 
		font-weight: 400;
		letter-spacing: 0.15em;
	}
 
}
  
@media screen and (max-width:768px){	
  
/*--------------------開閉ボタン--------------------*/
	#nav_toggle{
		display: block;
		width: 35px;
		height: 35px;
		float: right;
	}

	#nav_toggle div {
		position: relative;
		z-index: 10;
	}

	#nav_toggle span{
		display: block;
		height: 1px;
		background: #000;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}

	#nav_toggle span:nth-child(1){
		top:0px;
	}

	#nav_toggle span:nth-child(2){
		top:12px;
	}

	#nav_toggle span:nth-child(3){
		top:24px;
	}

/*--------------------開閉ボタンopen時--------------------*/
	.open #nav_toggle span:nth-child(1) {
	top: 12px;
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}

	.open #nav_toggle span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}

}