@charset "utf-8";

body {
	font-size:24px;
	line-height:1.25;
	color:#534741;
	background:#ccc;
}
a:link {
	width:100%;
	height:100%;
}

#wrapper {
	max-width:640px;
	height:100%;
	margin:0 auto;
	background:url(images/sp/bg.jpg);
}

h2 {
	background:url(images/ribbon.png) center no-repeat;
	height:85px;
	width:100%;
	line-height:70px;
	font-size:117%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#FFF;
	text-align:center;
	position:relative;
	top:-35px;
	margin-bottom:-20px;
}
h2.pagefoot {top:0; margin:8px 0;}
h2.pagefoot a {display:block; color:#FFF; text-decoration:none;}

.shadow {
	clear:both;
	background-color:#FFF;
	-webkit-box-shadow: 0px 0px 5px 5px #CCC;
	box-shadow: 0px 0px 5px 5px #CCC;
}
.anchor {
	padding-top:180px;
	margin-top:-180px;
	visibility:hidden;
	position:absolute;
	left:0;
	width:0;
	height:0;
}
img.max_width {
	 max-width: 100%!important;
	 height: auto!important;
}


/* header
-----------------------------------------*/
header {
	border-top:#40210F solid 14px;
	background:url(images/sp/header_bottom.png) bottom no-repeat;
	position:relative;
	z-index:1000;
	width:640px;
	margin:0 auto;
	padding-bottom:14px;
}
#head_wrap {
	background:url(images/sp/bg.jpg);
	background-size:188px auto;
	-webkit-background-size: 188px auto;
}
#logo {
	background:url(images/sp/header_top.png) top no-repeat;
	padding:32px 0;
}
h1 {
	background:url(images/sp/logo.png) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:354px;
	height:102px;
	margin:0 auto;
}
h1 a {
	width:354px;
	height:102px;
	display:block;
}

/* menu
-----------------------------------------*/
ul#menu {
	list-style:none;
	margin:0 6px;
}
ul#menu li {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:133%;
	line-height:88px;
	text-align:left;
	background:url(images/sp/menu_bg.png);
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	height:88px;
	margin:3px 0;
	text-indent:1em;
}
ul#menu li a {
	display:block;
	color:#534741;
	text-decoration:none;
}

/* content
-----------------------------------------*/
#inner_wrap {
	background:url(images/sp/wrapper_bottom.png) bottom no-repeat;
	position:relative;
	/*padding-top:98px;*/
	padding-bottom:16px;
	margin-top:-194px;
	padding-top:180px;
}
.content_wrap {
	margin:0 6px;
	background-color:#FFF;
	margin-top:-1px;
	border-top-left-radius:8px;
	-webkit-border-radius-topleft: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-right-radius:8px;
	-webkit-border-radius-topright: 8px;
	-moz-border-radius-topright: 8px;
}
.content {
	background:url(images/bg_content.png) top no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	margin-top:35px;
	padding:0 3px;
	padding-bottom:25px;
}
.content p {
	padding:0 1em;
}
.content p span {
	color:#C1272D;
	font-weight:bold;
}

section {margin-bottom:30px; padding-bottom:1em;}
#sect_information {margin-bottom:0; padding-bottom:0;}
#sect_information h2.pagefoot {margin-bottom:0;}
#sect_parking {margin:0; padding:0;}
#sect_studio p,
#sect_parking p {margin-bottom:1em;}


/* information */
p.intro {color:#000; margin-bottom:1em;}
ul#info {
	list-style: none;
    display: -webkit-flex;
	display: flex;
    -webkit-justify-content: center;
	justify-content: center;
}
ul#info li {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	float:left;
	margin:0 6px 18px 6px;
}
li#info_tel {
	background:url(images/sp/call.png);
	width:298px;
	height:68px;
}
li#info_tel a,
li#info_mail a {
	/*width:298px;
	height:68px;*/
}
li#info_mail {
	background:url(images/sp/mail.png);
	width:298px;
	height:68px;
}
ul#info li a {
	display:block;
}

#info_area {
    position: relative;
	padding: 0 1em 18px 10px;
}
p.tel {
	color:#42210B;
	font-size:167%;
	padding:0;
}
p.tel a {
	color:#42210B;
	text-decoration:none;
}

address {
	font-style:normal;
}
p.business_hours {
	padding:0!important;
	font-size:85%;
}
#info_area .business_hours {
    font-size: 85%;
    table-layout: fixed;
    margin-top: 5px;
}
#info_area .business_hours th,
#info_area .business_hours td {
    line-height: 1.35;
}
#info_area .business_hours th {
    font-weight: normal;
    text-align: right;
}
#info_area .business_hours td {
    padding: 0 1em;
}
.parking01 {
	background:url(images/sp/parking01.png);
	width:238px;
	height:114px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position:absolute;
	right:6px;
	top:0;
}
.parking01 a {
	display:block;
	width:100%;
	height:100%;
}
.parking02 {
	background:url(images/sp/parking02.png);
	height:114px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:0 auto;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    width:100%;
}
.parking02 a {
	display:block;
	width:100%;
	height:100%;
}

#gmap {margin:15px; position:relative;}
#gmap.shadow {padding:10px;}
#gmap_area {width:100%; height:580px;}
.gmap_info {
	width:220px;
	overflow:hidden;
}
.gmap_info h1 {
	background:url(images/logo02.png) no-repeat;
	-webkit-background-size: 220px 58px;
	background-size: 220px 58px;
	width:220px;
	height:58px;
	margin:10px 0;
}
p.inner_gmap {font-size:50%;}
.gmap_frame {
    position: relative;
	display: block;
	width: 100%;
    padding-top: 100%;
}
.gmap_frame iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
p.googlemap {
	background:url(images/marker.png) left no-repeat;
	height:54px;
	line-height:64px;
	margin:15px 0 5px 0;
	text-align:center;
}
p.googlemap a {
	text-decoration:none;
	display:block;
}
p.googlemap a:hover {
	text-decoration:underline;
}


/* fee
-----------------------------------------*/
.fee_block {
	background-color:#998675;
	border-radius:8px;
	padding:10px 20px;
	margin:10px 6px 20px 6px;
}
table.fee {
	width:100%;
	border:none;
}
table.fee th,
table.fee td {
	color:#FFF;
	line-height:2;
	font-weight:normal;
	text-align:center;
	padding:0 0.5em;
}
table.fee th {font-size:117%;}
table.fee td {border-left:#FFF solid 2px;}
table.fee td span {font-weight:bold;}
table.fee tr:nth-child(2) {border-top:#FFF solid 2px; border-bottom:#FFF solid 2px;}
table.fee tr:last-of-type {
    border-bottom: none!important;
}
table.fee td.blank {border:none;}

#sect_fee .notes {
    padding: 1em;
    margin-top: 1.5em;
    background: rgba(153,134,117,0.2);
}


/* sp03
-----------------------------------------*/
.parking_img {
	text-align:center;
}


/* footer
-----------------------------------------*/
footer {
	background:url(images/sp/foot.png) bottom no-repeat;
	padding-bottom:22px;
}
#footer_wrap {
	background:url(images/sp/footer_bg.png);
	padding:16px 25px;
}
p.copyright {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:75%;
	line-height:56px;
	color:#FFF;
	float:right;
}
#btn_home,#btn_top {
	float:left;
	width:107px;
	height:56px;
}
#btn_home a {
	background:url(images/sp/btn_home.png);
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	height:100%;
}
#btn_top a {
	background:url(images/sp/btn_top.png);
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	height:100%;
}


/* mail form
-----------------------------------------*/
.mailform {
	padding:5px 0.75em;
	margin-top:1em;
}
.mailform dt {
	float:left;
	clear:both;
	width:40%;
}
.mailform dd {
	float:right;
	width:60%;
	position:relative;
	margin-bottom:1em;
	min-height:1em;
}

/* Guitar Lesson
-----------------------------------------*/
#guitar_lesson p,
#lesson_detail p {
	padding-bottom:1em;
}
.app_mail {
	margin:20px 4px;
}
.app_mail a {
	display:block;
	width:100%;
	height:100%;
}


@media screen and (min-width:481px) and (max-width:855px) {
	body {
		font-size:20px;
	}
	#wrapper {
		min-width:480px;
		max-width:640px;
	}
	header {
		position:absolute!important;
	}
	h2 {
		height:63px;
		line-height:53px;
		-webkit-background-size: 350px auto;
		background-size: 350px auto;
		margin-bottom:-10px;
	}
	.anchor {
		padding-top:0;
		margin-top:0;
		visibility:hidden;
		position:absolute;
	}
	ul#info li {margin:0 4px 18px 4px;}
	li#info_tel,
	li#info_mail {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:256px;
		height:58px;
	}
	.parking01 {
		background:url(images/sp/parking01.png);
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:204px;
		height:98px;
		right:4px;
		top:0;
	}
/* mail form
-----------------------------------------*/
/*.mailform dt {
	float:none!important;
	clear:right;
	width:100%;
}
.mailform dd {
	float:none!important;
	width:90%;
	position:relative;
	margin-bottom:1em;
}*/

}


@media screen and (min-width:320px) and (max-width:480px) and (orientation: landscape) {
	body {
		font-size:18px;
		line-height:1.25;
	}
	#wrapper {
		width:480px;
		-webkit-background-size: 141px auto;
		background-size: 141px auto;
	}
	.anchor {
		padding-top:0;
		margin-top:0;
		visibility:hidden;
		position:absolute;
	}
	/* header
	-----------------------------------------*/
	header {
		border-top:#40210F solid 10px;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		position:absolute!important;
		width:480px;
		padding-bottom:10px;
	}
	#head_wrap {
		-webkit-background-size: 141px auto;
		background-size: 141px auto;
	}
	#logo {
		background:url(images/sp/header_top.png) top no-repeat;
		padding:24px 0;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
	h1 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:266px;
		height:77px;
	}
	h1 a {
		width:100%;
		height:100%;
		display:block;
	}
	h2 {
		height:63px;
		line-height:53px;
		-webkit-background-size: 350px auto;
		background-size: 350px auto;
		margin-bottom:-10px;
	}
	h2.pagefoot {top:0; margin-bottom:5px;}

	#inner_wrap {
		padding-top:0;
		padding-top:184px;
	}

	/* menu
	-----------------------------------------*/
	ul#menu {
		list-style:none;
		margin:0 3px;
	}
	ul#menu li {
		line-height:66px;
		-webkit-background-size: auto 66px;
		background-size: auto 66px;
		height:66px;
		margin:3px 0;
	}

	ul#info li {
		margin:0 5px 18px 5px;
	}
	li#info_tel,
	li#info_mail {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:224px;
		height:51px;
	}
	li#info_tel a,
	li#info_mail a {
		width:100%;
		height:100%;
	}
	/* content
	-----------------------------------------*/
	#inner_wrap {
		background:url(images/sp/wrapper_bottom.png) bottom no-repeat;
		/*position:relative;
		padding-top:98px;
		margin-top:-105px;*/
		padding-bottom:12px;
	}
	.content_wrap {
		margin:0 3px;
		background-color:#FFF;
	}
	.content {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin-top:50px;
		padding-bottom:12px;
	}
	p.tel {
		line-height:1.3;
	}
	.parking01 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:180px;
		height:86px;
		right:5px;
	}
	.parking01 a {
		width:100%;
		height:100%;
	}
	.parking02 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:458px;
		height:85px;
		margin:0 auto;
	}
	.parking02 a {
		width:100%;
		height:100%;
	}
	#gmap_area {width:100%; height:435px;}
	.gmap_info h1 {
		background:url(images/logo02.png) no-repeat;
		width:150px;
		height:40px;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin:10px auto;
	}
	p.googlemap {
		background:none;
		height:54px;
		height:40px;
		line-height:2;
		margin:15px 0 5px 0;
		text-align:center;
	}
	
	/* fee
	-----------------------------------------*/
	.fee_block {
		background-color:#998675;
		border-radius:4px;
		padding:5px 10px;
		margin:5px 3px 10px 3px;
	}
	table.fee {
		width:100%;
		border:none;
	}
	table.fee th,
	table.fee td {
		color:#FFF;
		line-height:2.5;
		font-weight:normal;
		text-align:center;
		padding:0 0.25em;
	}
	table.fee td {border-left:#FFF solid 1px;}
	table.fee td span {font-weight:bold;}
	table.fee tr:nth-child(2) {border-top:#FFF solid 1px; border-bottom:#FFF solid 1px;}

	/* footer
	-----------------------------------------*/
	footer {
		-webkit-background-size: 480px auto;
		background-size: 100% auto;
		padding-bottom:16px;
	}
	#footer_wrap {
		background:url(images/sp/footer_bg.png);
		padding:8px 12px;
		text-align:center;
	}
	p.copyright {
		line-height:3;
	}
	#btn_home,
	#btn_top {float:left; width:80px; height:42px;}
	#btn_home a,#btn_top a {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		background-repeat:no-repeat;
	}

/* mail form
-----------------------------------------*/
.mailform dt {
	float:none!important;
	clear:right;
	width:100%;
}
.mailform dd {
	float:none!important;
	width:90%;
	position:relative;
	margin-bottom:1em;
}


}

@media screen and (min-width:320px) and (max-width:480px)and ( orientation: portrait) {
	body {
		font-size:12px;
		line-height:1.25;
	}
	#wrapper {
		-webkit-background-size: 97px auto;
		background-size: 97px auto;
	}

	h2 {
		height:42px;
		line-height:35px;
		font-size:117%;
		-webkit-background-size: 234px auto;
		background-size: 234px auto;
		top:-20px;
		margin-bottom:-10px;
	}
h2.pagefoot {top:0; margin-bottom:5px;}
h2.pagefoot a {display:block; color:#FFF; text-decoration:none; height:100%;}

.shadow {
	clear:both;
	background-color:#FFF;
	-webkit-box-shadow: 0px 0px 2px 2px #CCC;
	box-shadow: 0px 0px 2px 2px #CCC;
}
.anchor {
	padding-top:105px;
	margin-top:-105px;
	visibility:hidden;
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:0;
}

	/* header
	-----------------------------------------*/
	header {
		border-top:#40210F solid 7px;
		background:url(images/sp/header_bottom.png) bottom no-repeat;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		position:fixed;
		z-index:1000;
		width:320px;
		margin:0 auto;
		padding-bottom:7px;
	}
	#head_wrap {
		background:url(images/sp/bg.jpg);
		-webkit-background-size: 94px 94px;
		background-size: 94px 94px;
		background-position:left top;
		background-clip:content-box;
	}
	#logo {
		background:url(images/sp/header_top.png) top no-repeat;
		padding:20px 0;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
	h1 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:177px;
		height:51px;
	}
	h1 a {
		width:100%;
		height:100%;
		display:block;
	}

	/* menu
	-----------------------------------------*/
	ul#menu {
		list-style:none;
		margin:0 3px;
	}
	ul#menu li {
		font-size:130%;
		line-height:44px;
		/*-webkit-background-size: auto 44px;
		background-size: auto 44px;*/
		height:44px;
		margin:3px 0;
		text-indent:1em;
	}

/* content
-----------------------------------------*/
#inner_wrap {
	background:url(images/sp/wrapper_bottom.png) bottom no-repeat;
	/*position:relative;*/
	padding-top:98px;
	margin-top:-105px;
	padding-bottom:8px;
}
.content_wrap {
	margin:0 3px;
	background-color:#FFF;
}
	.content {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin-top:35px;
		padding:0 2px;
		padding-bottom:12px;
	}
.content p {
	padding:0 0.75em;
}
.content p span {
	color:#C1272D;
	font-weight:bold;
}

section {margin-bottom:15px; padding-bottom:1em;}
#sect_parking {margin:0; padding:0;}
#sect_studio p,
#sect_parking p {margin-bottom:1em;}

ul#info li {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	float:left;
	margin:0 3px 9px 3px;
}
	li#info_tel,
	li#info_mail {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:149px;
		height:34px;
	}
	li#info_tel a,
	li#info_mail a {
		width:100%;
		height:100%;
	}

	#info_area {
        padding-bottom: 10px;
    }
	p.tel {
		line-height:1.3;
		padding:0;
	}
	address {
		font-style:normal;
		line-height:1.2;
	}
	.parking01 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:114px;
		height:54px;
		right:3px;
	}
	.parking01 a {
		width:100%;
		height:100%;
	}
	.parking02 {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		width:304px;
		height:57px;
	}
	.parking02 a {
		width:100%;
		height:100%;
	}

#gmap {margin:8px 15px; position:relative;}
#gmap.shadow {padding:10px;}
#gmap_area {width:100%; height:290px;}
.gmap_info {
	width: 106px;
	overflow: hidden;
}
	.gmap_info h1 {
		background: url(images/logo02.png) center no-repeat;
		width: 106px;
		height: 28px;
        background-size: contain;
		margin:10px auto;
		text-align:center;
	}
	p.inner_gmap {
        font-size:100%;
        display: none;
    }
	p.googlemap {
		background:none;
		height:54px;
		height:27px;
		line-height:2;
		margin:15px 0 5px 0;
		text-align:center;
	}


/* fee
-----------------------------------------*/
.fee_block {
	background-color:#998675;
	border-radius:4px;
	padding:5px 10px;
	margin:5px 3px 10px 3px;
}
table.fee {
	width:100%;
	border:none;
}
table.fee th,
table.fee td {
	color:#FFF;
	line-height:2.5;
	font-weight:normal;
	text-align:center;
	padding:0 0.25em;
}
table.fee td {border-left:#FFF solid 1px;}
table.fee td span {font-weight:bold;}
table.fee tr:nth-child(2) {border-top:#FFF solid 1px; border-bottom:#FFF solid 1px;}
table.fee td.blank {border:none;}
    
table.fee.lesson td:not(.more) {
    padding-right: 1.5em;
}


/* sp03
-----------------------------------------*/
.parking_img {
	text-align:center;
}


/* footer
-----------------------------------------*/
	footer {
		-webkit-background-size: 320px auto;
		background-size: 100% auto;
		padding-bottom:11px;
	}
	#footer_wrap {
		background:url(images/sp/footer_bg.png);
		padding:8px 12px;
		text-align:center;
	}
	p.copyright {
		font-size:75%;
		line-height:3;
	}
	#btn_home,
	#btn_top {float:left; width:54px; height:28px;}
	#btn_home a, #btn_top a {
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		background-repeat:no-repeat;
	}

/* mail form
-----------------------------------------*/
.mailform dt {
	float:none!important;
	clear:right;
	width:100%;
}
.mailform dd {
	float:none!important;
	width:100%;
	position:relative;
	margin-bottom:1em;
}


}


/* mail form */
body#mailform {}
body#mailform #wrapper {padding-top:20px; max-width:640px; position:relative;}
body#mailform #inner_wrap {margin-top:0; padding-top:15px;}
body#mailform .content {margin-top:0;}
body#mailform footer {background:none; padding-bottom:0;}
body#mailform p.copyright {line-height:1.4; text-align:center; float:none;}