@charset "utf-8";

@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
/*～以下、画面の横幅が640pxまでの場合のスタイル記入～*/


/*=====================================================

1. 基本レイアウト

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

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





=====================================================*/
/*====================================================
　1. 基本レイアウト
----------------------------------------------------*/
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:1em;
}

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

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;}

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


/*----------------------------------------------------
 #page
----------------------------------------------------*/
#page {
	overflow: hidden;
	width: 100%;
	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; 
	-moz-background-size:100% auto;
	background-size:100% auto;
	height:150px;
}
/*タイトル
----------------------*/
header.global h1 a{
position:absolute;
top:20px;
left:10px;
width:100%;
height:34px;
background: url("../img/common/title_top.png") no-repeat scroll 0 0 transparent;
	-moz-background-size:90%;
	background-size:90%;

text-indent:-9999px;
}

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

header.global nav ul {
	margin: 0;
	padding: 0 10px;
}

header.global nav ul li {
	float: left;
	width: 33%;
	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-weight:bold;
	font-size:82%;
	text-shadow:1px -1px #333;
	line-height:1.3em;
	font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif;
	/*背景*/
	background: #7b7b7b;
    background: linear-gradient(to bottom, #cacaca 0%, #939393 50%, #7b7b7b 50%, #a3a3a3 100%) repeat scroll 0 0 transparent;

  background: -webkit-gradient(linear, left top, left bottom,
	from(#cacaca),
	color-stop(0.50, #939393),
	/* topから 50% の位置で #939393 */
	color-stop(0.50, #7b7b7b),
	/* topから 50% の位置で #7b7b7b*/
	to(#a3a3a3)  );



    border: 1px solid #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 8px #CCCCCC;
    margin: 0 auto;
    padding: 10px;
    width: 80%;
	/*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 bottom;
	-moz-background-size:contain;
	background-size:contain;*/
	padding: 30px 0 0px;
	height:30px;
}

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

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

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

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

section.main h3{
font-size:1.2em;
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;*/
padding-bottom:20px;
}

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;*/
}

section.main .photo_right .photo img,
section.main .photo_left .photo img{width:100%;}


/*----------------------------------------------------
コンテナ(マージン)
----------------------------------------------------*/

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;
}

/*アイコンリンク*/

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　トップページ
----------------------------------------------------*/
#topcontents {
	position:relative;
}


body #topcontents #page {
	background: #fff url("../img/img_top.png") no-repeat scroll center top; 
	-moz-background-size:100% auto;
	background-size:100% auto;
}

#topcontents header.global {
	padding: 0;
	position:relative;
	background:none; 
	height:365px;
}

#topcontents header{height:200px;}
#topcontents header.global nav {
	position:absolute;
	top:20px;
	left:0px;
	width:100%;
}
#topcontents header.global nav ul{
	margin:160px 10px 0;
	padding:0;
}
#topcontents section.main{
position: relative;
margin:0;
padding: 8px 10px 3px;
background-color:#eee;
box-shadow: 0px 0px 20px #ccc inset;

}
#topcontents section.main p{color:#734783;font-size:0.75em;}

#topcontents header h1{
top:120px;
left:20px;
position:absolute;
width:90%;
height:34px;
background: url("../img/common/title_top.png") no-repeat scroll 0 0 transparent;
	-moz-background-size:contain;
	background-size:contain;
text-indent:-9999px;
}
#topcontents header .info{
display:block;
top: 270px;
position: relative;
background-color: #fff;
padding: 10px 10px 5px;
box-shadow: 0px 0px 20px #eee inset;
text-align:center;
font-size:0.8em;
line-height:1.5em;
}
#topcontents footer.global {
background-color: transparent;
	text-align:center;
	padding: 10px 0;
	width:100%;
}

/*----------------------------------------------------
 #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;
}

iframe{width:100%;}

/*----------------------------------------------------
 #map　マップ
----------------------------------------------------*/
/*2カラム・写真*/
#map .photo_right{
float:right;
width:48%;
}

#map .photo_left{
float:left;
width:48%;
}

/*----------------------------------------------------
 #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;
}

/*----------------------------------------------------
 #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;
	font-size:0.8em;
	background: #eeeeee;
	width:30%;
	vertical-align:middle;
}


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

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

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

table.contact #message{
	width:150px;
}

.btn{
text-align:center;
}

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

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

.flow{
margin-bottom:20px;
}

.flow span{
display:block;
width:25%;
padding:5px;
font-size:0.6em;
line-height:1em;
text-align:center;
   background:#eee url("../img/common/arrow_right_g.png") no-repeat scroll center right; 
   padding-right:12px;
float:left;
}


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

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


/*～以上、画面の横幅が640pxまでの場合のスタイル記入～*/
}