@charset "utf-8";

/* --------------------
__init
-------------------- */
.opacity0 {opacity:0;}
.none {display:none;}

#chara_01 {top:35%;left:7%;}
#menu-top {top:1%;left:10px;}
#menu-service {top:1%;left:72px;}
#menu-works {top:1%;left:158px;}
#menu-aboutus {top:1%;left:238px;}
#bt-mail {top:80%;right:20%;}
.yama {bottom:0%;right:10%;}
#kumo_01 {top:15%;left:65%;}

/* --------------------
__config
-------------------- */
body#index {background-color:#FFFFFF;}
#background {width:100%;height:100%;background-color:#2EC8D8;}
/*#tv {width:100%;height:auto;}*/
.monitor {overflow:hidden;}

.z0 {position:relative;z-index:0;}
.z1 {position:relative;z-index:1;}
.z100 {position:relative;z-index:100;}
.z1000 {position:relative;z-index:1000;}
.z10000 {position:relative;z-index:10000;}

.size50 {width:50%;height:auto;}
.size80 {width:80%;height:auto;}

.hsize3 {height:3%;width:auto;}
.hsize5 {height:5%;width:auto;}
.hsize10 {height:10%;width:auto;}
.hsize15 {height:15%;width:auto;}
.hsize20 {height:20%;width:auto;}
.hsize30 {height:30%;width:auto;}
.hsize40 {height:40%;width:auto;}
.hsize50 {height:50%;width:auto;}
.hsize80 {height:80%;width:auto;}

.mt10 {margin-top:10px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}
.mt100 {margin-top:100px;}
.mt150 {margin-top:150px;}
.mt200 {margin-top:200px;}
.mt250 {margin-top:250px;}

/* --------------------
__font
-------------------- */
.accent1 {color:#EDC048;}
/*.font-google-nsj {font-family:'Noto Sans Japanese';}*/
.marugo {font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}

/* --------------------
__index
-------------------- */
#logo {
	width: 100%;
	text-align: center;
	top: 50%;
	margin-top: -37px;
}

/*
#aboutus {
	width: 100%;
	text-align: center;
	top: 20px;
}
*/

#footer {
	width: 100%;
	text-align: center;
	top: 45%;
}

#rinen_text {
	font-weight: 900;
	line-height: 2.5em;
	color: #FFFFFF;
	width: 100%;
	text-align:center;
}

#aboutus_text a {
	text-decoration: none;
	color: #FFFFFF;
}

#aboutus_text a:hover {
	color: #FFA500;
}


dl#aboutus_text {
	font-weight: 900;
	line-height: 2.5em;
	color: #FFFFFF;
	width: 80%;
}

dl#aboutus_text dt {
	float:left;
	clear:left;
	width:25%;
}

dl#aboutus_text dd {
	float:left;
	width:55%;
}

/* --------------------
__service
-------------------- */
.service-container {
	width:800px;
	margin: 0 auto;
}

.service-gaiyou {
	text-align:center;
	margin-top:30px;
	margin-bottom:70px;
	color:#047391;
}

.service-gaiyou img {
	width:700px;
	height:auto;
}

.service-gaiyou h1 {
	margin-top:80px;
	font-size:2.5em;
}

.service-gaiyou p {
	margin-top:30px;
	font-size:1.5em;
}

.service-naiyou {
	text-align:left;
	width:700px;
	margin:0 auto;
	margin-bottom:70px;
}

.service-naiyou h2 {
	margin-bottom:20px;
	padding-left:30px;
	padding-top:20px;
	padding-bottom:20px;
	border-left:solid 10px #047391;
	border-bottom:dotted 2px #047391;
	font-size:3em;
	color:#047391;
}

.service-naiyou p {
	font-size:1.5em;
	text-indent:1em;
	margin-bottom:1em;
	text-align:justify;
	-ms-text-justify:inter-ideograph;
	letter-spacing:0.025em;
	padding-left:15px;
	padding-right:15px;
}

.service-naiyou .leftpart h2, .service-naiyou .leftpart p {
	margin-right:30px;
}

.service-naiyou .rightpart h2, .service-naiyou .rightpart p {
	margin-left:30px;
}

.service-naiyou img {
	max-width:320px;
	height:auto;
}

.leftpart {
	width:340px;
	margin-right:10px;
	text-align:left;
}

.rightpart {
	width:340px;
	margin-left:10px;
	text-align:right;
}

.rightpart h2 {
	text-align:left;
}

.table{
    display:table;
    text-align: center;
}
.table > *{
    display:table-cell;
    vertical-align: middle;
}

.hagure-chara {
	width:800px;
	text-align:right;
	margin-top:100px;
	margin-bottom:100px;
}

/* --------------------
__icon
-------------------- */
.ghost_btn{
	display: inline-block;
	padding: 20px 20px;
	border: solid 2px #fff;
	border-radius: 3px;
	background: rgba(0,0,0,0.2);
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
}

.ghost_btn:hover{
	color: #333;
	background: #fff;
}

#forward-icon, #backward-icon {
	cursor: pointer;
	padding: 1em;
	border-radius: 2em;
	background: #fff;
}

#forward-icon {
	position: fixed;
	bottom: 20px;
	right: 20px;	
}

#backward-icon {
	position: fixed;
	bottom: 20px;
	left: 20px;	
}


/* --------------------
__scroll
-------------------- */
/*
#point-top {
	padding-bottom: 1200px;
}

#point-service {
	padding-bottom: 1800px;
}

#point-works {
	padding-bottom: 1800px;
}
*/

/* --------------------
__modal
-------------------- */
.modal-content {
	text-align: center;
}

.close-service-01, .close-service-02, .close-service-03, .close-service-04, .close-service-05, .close-service-06, .close-service-07, .close-service-08 {
	position: fixed;
	top: 5%;
	right: 5%;
}


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

/* --------------------
__clearfix
-------------------- */

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* --------------------
__test 削除予定
-------------------- */
#test {
	width: 100%;
	height: 100%;
}