@charset "utf-8";

/*-----------------------------

　リセットCSS + サイト共通設定

------------------------------*/

/* 全ての要素に対する余白初期値設定 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, main,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border: 0;
	font-size: 100%;
}

/* デフォルト文字設定 */
body{
	color:#666666;
	font-family:sans-serif;
	line-height:1.5;
}

/* リストマーカーを非表示 */
ul,ol{
	list-style-type:none;
}

/* テーブルセルのボーダーの設定 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

table th, table td {
  border: solid 1px black;
  /*実線 1px 黒*/
}

th {
    width:  100px;              /* 幅指定 */
    height: 40px;               /* 高さ指定 */
}

/* 画像とフォームパーツの上下位置をテキストの真ん中に */
img, input, select, textarea {
	vertical-align: middle;
}


/* デフォルトリンク色の設定 */
a{
	color:#00C4AB;
}

a:hover{
	color:#CCE739;
}

/* 画像リンクの設定 */
a img{
	opacity:1;
	filter: alpha(opacity=100);
}

a:hover img{
	opacity:0.7;
	filter: alpha(opacity=75);
}


/*	clearfix
------------------------------*/
.clearfix:after {/*for modern browser*/
   content: "";
   display: block;
   clear: both;
}

.clearfix { *zoom:1; } /*for IE6,IE7*/


/*--------------------------

　レイアウト

---------------------------*/
.inner{
	width: 940px;
	margin: 0 auto;
}


/* Additional class
---------------------------*/

@media screen and (min-width: 1126px) {

.float_center {
  position: relative;
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
}

.float_center_learge {
  position: relative;
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
	font-size: 1.3rem;
	font-weight: bold;
}

.float_center ul {
  position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
  float: left;
}

.float_center ul li {
  position: relative;
  left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
  float: left;
  list-style: none; /* 項目にぼっちを出したくない場合はこれを設定（今回はあんまり関係ないですが） */
	margin-left: 40px;
	margin-right: 40px;
}

}



@media screen and (max-width: 1125px) {
    .float_center{
        padding: 0 0 0 100px;
    }
}


.text_on_image{
   position: absolute;
   z-index: 11;
   text-align: center;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   margin:0;
   padding:0;
   color: white;
   font-weight: bold;
   font-size: 3rem;
}


.text_on_image #small{
   font-size: 1.4rem;
}


/* ヘッダー
---------------------------*/
body{
	/* border-top: #cce739 5px solid; */
}

#header{
	padding: 10px 0;
	/*border-top: #00c4ab 5px solid;*/
	/*background: url(../img/bg_header.png) #e6e6e6;*/
}

#header .inner {
	display: table;
}

#logo{
	margin-right: 10px;
	display: table-cell;
	vertical-align: middle;
}

img#img-logo{
        width: 550px;
        height: 53px;
}


@media screen and (max-width: 1126px) {
img#img-logo{
        width: 100%;
        height: auto;
}
}

#catch{
	display: table-cell;
	vertical-align: middle;
}

#info dt{
	clear: left;
	float: left;
	width: 6em;
}

/* フッター
---------------------------*/
#footer{
	padding: 10px 0;
	background: #e6e6e6;
}

#flink{
	float: left;
}

#flink li{
	display: inline;
}

#flink a{
	padding: 0 10px;
	background: url(../img/ico_arw01.png) left center no-repeat;
	color: #666;
	text-decoration: none;
}

#flink a:hover{
	text-decoration: underline;
}

#copyright{
	float: right;
}

/* グローバルナビゲーション
---------------------------*/
@media screen and (min-width: 1126px) {
  #gnav{
	/*background: #00c4ab;*/
	background: #0067C0;
  }
}
@media screen and (max-width: 1125px) {
  #gnav{
	/*background: #00c4ab;*/
	background: #0067C0;
        font-size: 1.5rem;
  }
}


#gnav ul{
	overflow: hidden;
}

#gnav li{
	float: left;
	width: 230px;
	border-right: #fff 1px solid;
}

#gnav li:first-child{
	width: 230px;
	border-left: #fff 1px solid;
}




@media screen and (min-width: 1126px) {
  #gnav a{
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
  }
}
@media screen and (max-width: 1125px) {
  #gnav a{
	display: block;
	padding: 20px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
  }
}


#gnav a:hover{
	background: #cce739;
}

#gnav a.selected{
	background: #fff;
	color: #00c4ab;
	font-weight: bold;
}


/* コンテンツエリア
---------------------------*/
@media screen and (min-width: 1126px) {
#contents{
	width: 900px;
	margin: 0 auto;
	padding: 30px 20px 0 20px;
}

}
@media screen and (max-width: 1125px) {
#contents{
	width: 900px;
	margin: 0 auto;
	padding: 30px 20px 0 20px;
        font-size: 1.5rem;
}
}

#top_slide{
	width: 900px;
	margin: 0 auto;
	padding: 10px 20px 0 20px;
	position: relative;
}
/* ナビゲーション
---------------------------*/
#navigation{
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: #ccc 1px dotted;
}

#navigation li{
	display: inline;
	font-size: 100%;
}

#navigation li{
	padding-right: 15px;
	background: url(../img/ico_arw01.png) right center no-repeat;
}



/* メインコンテンツ
---------------------------*/
@media screen and (min-width: 1126px) {
  #sub_main{
	width: 680px;
	margin-bottom: 40px;
	float: right;
  }
}

@media screen and (max-width: 1125px) {
　　 #sub_main{
	    width: 860px;
  	    margin-bottom: 40px;
       }
}


/* サイドバー
---------------------------*/
#side{
        width: 180px;
	margin-bottom: 40px;
	float: left;
}

@media screen and (max-width: 1125px) {
	#side{
		display: none;
	}
}


/* ページトップ
---------------------------*/
#pagetop{
	clear:both;
}


/* 右寄せ
---------------------------*/
#right{
	float: right;
}

img#img-tel{
        width:  240px;
        height: 60px;
}

@media screen and (max-width: 1125px) {
	img#img-tel{
		display: none;
	}
}

img#img-consulting{
        width:  300px;
        height: 200px;
        position: relative;
}

@media screen and (max-width: 1125px) {
	img#img-consulting{
		width:  90%;
                height: auto;
	}

}


img#img-piano{
        width:  300px;
        height: 200px;
        position: relative;
}

@media screen and (max-width: 1125px) {
	img#img-piano{
		width:  90%;
                height: auto;
	}
}



/* Additional
---------------------------*/
h2{
	font-size: 1.4rem;
	background: #e6e6e6;
}

#page_title{
	font-size: 1.6rem;
	/*
	background: #FF9900;
	color: #ffffff;
	*/
}

#center_large{
	text-align: center;
	font-size: 1.4rem;
}

#center{
	text-align: center;
	font-size: 1.1rem;
}


/* slideshow
---------------------------*/

#slideshow {
   position: relative;
   width:  900px;
   height: 320px;
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}




/*--------------------------

　共有スタイル

---------------------------*/