@charset "utf-8";
@media screen and (min-width: 641px){
/*=====================================================

1. 基本レイアウト

2. 共通パーツ
	幅全体に広げる
	位置よせ

3. 各ページ設定
	#profile      プロフィール
	#resson       ピアノ教室
	#map          アクセス方法
	#contact      お問い合わせ
	#news         お知らせ




=====================================================*/
/*====================================================
　1. 基本レイアウト
----------------------------------------------------*/

html{
  overflow-y: scroll;/*短いページでもスクロールバー幅を表示させて、ページ遷移時のがたつきを解消*/
}

body, table th, table td, h1, h2, h3, h4, h5, input, textarea {
    color: #333;/*222*/
    font-family: "メイリオ","Meiryo","Lucida Grande","Helvetica","Arial","Hiragino Kaku Gothic Pro","MS P Gothic",sans-serif;
    word-break: break-all;
}

body {
	color: #333;
	line-height: 1.5em;
	width:100%;
	background: #fff url("../img/common/bg.gif") repeat-y fixed center top;
	font-size:16px;
}

/***********************************************
 * ルビ
 */

ruby
{
  position: relative;
}

rb
{
  font-size: 1em;
  line-height: 1.5em;
}

rt,
h2 rt
{
  position: absolute;
  top: -1.5em;
  left: 0;
  width: 100%;
  white-space: nowrap;
  font-size: 10px;
  text-align: center;
}

rp
{
  display: none;
}
/*********************************************** */

a {color:#2cac88;	-webkit-tap-highlight-color: rgba(200,200,555,.6);}
a:link {	text-decoration: none;}
a:visited {	text-decoration: none;}

img {
	vertical-align: top;
	border: 0 none;
}
img:not([width]) {
	/*zoom: .5;*/
	/* Retinaディスプレイ対応のためimg要素は半分の大きさに */
}
p, dl, ol, ul {
	margin-bottom: 10px;
}
ol,ul {
	margin-left: 20px;
}

/*基本色*/
.colorpurple{color:#734783;}
.colorgreen{color:#2cac88;}
.colorblue{color:#3a5aa2;}

/*基本マージン*/
.mt30{margin-top:20px;}
.mt50{margin-top:50px;}
.mb50{margin-bottom:50px;}


/*----------------------------------------------------
 #page
----------------------------------------------------*/
#page {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
	color: #333;
	line-height: 1.5em;
}
/*----------------------------------------------------
 header
----------------------------------------------------*/
header.global {
	padding: 0;
	position:relative;
	background: url("../img/common/bg_main_header.png") no-repeat scroll center top; 
	height:190px;
}
/*タイトル
----------------------*/
header.global h1 a{
position:absolute;
top:20px;
left:50px;
width:513px;
height:34px;
background: url("../img/common/title_top.png") no-repeat scroll 0 0 transparent;
text-indent:-9999px;
}

header.global nav {
	margin: 0 26px;
	position:absolute;
	top:100px;
	left:0px;
	width:900px;
}

header.global nav ul {
	margin: 0;
	padding: 0;
	width:100%;
}

header.global nav ul li {
	float: left;
	width: 20%;
	margin: 0;
	text-align: center;
}

header.global nav ul li:last-child {
}

header.global nav ul li a.btn {
	display:block;
	/*文字装飾*/
	text-align: center;
	color:#fff;
	font-size:19px;
	font-weight:bold;
	text-shadow:1px -1px #333;
	font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;
	line-height:1.4em;
	/*背景*/
	background: #7b7b7b;
    background: linear-gradient(to bottom, #cacaca 0%, #939393 50%, #7b7b7b 50%, #a3a3a3 100%) repeat scroll 0 0 transparent;
    border: 2px solid #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 8px #CCCCCC;
    margin: 0 auto;
    padding: 10px;
    width: 140px;
	/*IE6 IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#cacaca, endcolorstr=#7b7b7b));
	/* IE8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#cacaca, endcolorstr=#7b7b7b))";
	zoom: 1;
	/*透明度*/
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}
header.global nav ul li a.btn:hover {
	/*透明度*/
	filter: alpha(opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
}

/*----------------------------------------------------
 footer
----------------------------------------------------*/
footer.global {
	position:relative;
	background: url("../img/common/bg_main_footer.png") no-repeat scroll center top; 
	padding: 30px 0 0px;
	height:30px;
}

footer.global p.copyright {
	margin: 0;
	text-align: center;
}

footer.global p.copyright small{
	color: #666;
	font-size:10px;
}

/*----------------------------------------------------
 main
----------------------------------------------------*/
section.main {
	padding: 20px 50px;
	background-color:#fff;
}

/*----------------------------------------------------
見出し
----------------------------------------------------*/
section.main h2{
font-size:23px;
font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;
color:#3a5aa2;/*3d1c81*/
border-bottom:5px solid #acdbce;
margin:0 0 20px;
padding:30px 0 10px 0;
}

section.main h3{
font-size:20px;
font-weight:normal;
color:#2cac88;/*2cac88*/
/*font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;*/
border-left:5px solid #acdbce;
border-bottom:1px solid #ddd;
margin:0 0 20px;
padding:0 0 0 10px;
}

/*----------------------------------------------------
カラム
----------------------------------------------------*/
section.main div{
}

/*2カラム・写真右*/
section.main .photo_right{
padding-bottom:50px;
}

section.main .photo_right .photo{
float:right;
width:300px;
}

section.main .photo_right .text{
float:left;
width:500px;
}

/*2カラム・写真左*/
section.main .photo_left{
}

section.main .photo_left .photo{
float:left;
width:300px;
}

section.main .photo_left .text{
float:right;
width:500px;
}

/*2カラム・写真2つ*/
section.main .photo2_right{
float:right;
width:48%;
}

section.main .photo2_left{
float:left;
width:48%;
}
/*----------------------------------------------------
コンテナ(マージン)
----------------------------------------------------*/

div.container{
margin-bottom:50px;
}

/*====================================================
　2. 共通パーツ
----------------------------------------------------*/
/*幅全体に広げる*/
.fullWidth{
	width:100%;
	height:auto;
}
img.fullWidth{
	zoom:1; /*imgタグの設定をリセット*/
}
/*位置よせ*/
.tcenter{text-align:center;}
.tright{text-align:right;}
.tleft{text-align:left;}

.tindent1em{
	padding-left: 1em;
	text-indent: -1em;
}

/*余白*/
.mb0{margin-bottom:0px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}


/*アイコンリンク*/

a.arrowright{
   background: url("../img/common/arrow_right.png") no-repeat scroll center left; 
   padding-left:30px;
}

a.arrowleft{
   background: url("../img/common/arrow_left.png") no-repeat scroll center left; 
   padding-left:30px;
}


/*====================================================
　3. 各ページ設定
----------------------------------------------------*/
/*----------------------------------------------------
 #topcontents　トップページ
----------------------------------------------------*/
body #topcontents #page {
	background: url("../img/img_top.png") no-repeat scroll center top; 
}

#topcontents header.global {
	padding: 0;
	position:relative;
	background:none; 
	height:590px;
}
#topcontents section.main p{color:#734783;}
#topcontents header{height:582px;}
#topcontents header.global nav {
	position:absolute;
	top:417px;
	left:0px;
	width:870px;
}
#topcontents header.global nav ul{
	margin:0 20px;
}
#topcontents section.main{
height:120px;
margin:0;
padding: 0 78px;
line-height:2em;
background-color:transparent;
}

#topcontents header h1{
top:195px;
left:85px;
position:absolute;
width:513px;
height:34px;
background: url("../img/common/title_top.png") no-repeat scroll 0 0 transparent;
text-indent:-9999px;
}

#topcontents header .info{
display:block;
width:400px;
top: 260px;
left: 82px;
position: absolute;
background-color: #fff;
padding: 20px 20px 7px;
border-radius: 10px;
border: 1px solid #fff;
box-shadow: 0px 0px 5px #ccc,0px 0px 20px #eee inset;
text-align:center;
}
#topcontents footer.global {
	position:relative;
	background:transparent; 
	padding: 20px 0;
	height:100px;
}

/*----------------------------------------------------
 #profile　プロフィール
----------------------------------------------------*/
#profile div.photo{
margin-bottom:30px;
}

#profile div.text strong{
display:block;
margin-bottom:10px;
font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;
font-size:20px;
}

/*----------------------------------------------------
 #map　マップ
----------------------------------------------------*/




/*----------------------------------------------------
 #resson　レッスン
----------------------------------------------------*/
table.resson {
	border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.resson th.t_top {
	border-top: #ddd 1px dotted;
    /*border-top: #b3b3b3 4px solid;*/
}
table.resson th {
	border-bottom: #ddd 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	background: #eeeeee;

}
table.resson td.t_top {
	/*border-top: #eeeeee 4px solid;*/
	border-top: #ddd 1px dotted;
}

table.resson td {
	border-bottom: #ddd 1px dotted;
	text-align: left;
	padding: 10px;
}


ul.resson{
	padding:0;
	margin:0 0 20px;
}

ul.resson li{
	line-height:1.5em;
	margin-bottom:5px;
	list-style-type:none;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

div.program{
border:1px solid #ccc;padding:10px;
padding:30px 50px;
}

div.program p.day{
text-align: right;
}

div.program h4{
text-align: center;
display:block;
font-size:120%;
}

div.program strong{
text-align: center;
display:block;
margin:20px 0;
font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;

}

table.program {
	border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.program th.t_top {
}
table.program th {
	text-align: left;
	padding: 10px;
	font-weight: normal;

}
table.program td.t_top {
}

table.program td {
	text-align: left;
	padding: 10px;
}


/*----------------------------------------------------
 #contact　お問い合わせ
----------------------------------------------------*/

table.contact {
	border-collapse: collapse;
	width:100%;
}
table.contact th.t_top {
    border-top: #b3b3b3 4px solid;
}
table.contact th {
	border-bottom: #ddd 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	background: #eeeeee;
	width:30%;
	vertical-align:middle;
}


table.contact td {
	border-bottom: #ddd 1px dotted;
	text-align: left;
	padding: 10px;
	width:70%;
}

table.contact td.t_top {
	border-top: #eeeeee 4px solid;
}

table.contact input[type="textarea"]{
	width:500px;
}

.btn{
text-align:center;
}

.btn input[type="submit"],input[type="reset"],input[type="button"]{
width:200px;
padding:10px;
margin:10px;
}

.note{
margin-top:10px;
text-align:left;
font-size:80%;
	padding-left: 1em;
	text-indent: -1em;
}

.flow{
margin-bottom:20px;
}

.flow span{
display:block;
width:150px;
padding:5px;
text-align:center;
   background:#eee url("../img/common/arrow_right_g.png") no-repeat scroll center right; 
   padding-right:30px;
float:left;
}


.flow span.last{
background-image: none;
padding:5px 15px;
}

.flow span.on{background-color:#73d4b9;}


















/*------------------------------------------*/
}