@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400');

body {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

header {background: url(../img/star_bg.jpg) top center ;}
header h1 a {text-decoration: none;display: block;position: absolute;left: 0;width:48%;height:23%;}
header h1 a.osaka {bottom:23%;}
header h1 a.nagoya {bottom:0;}
header h1 a:hover {background: rgba(255,255,255,0.2);}

section h3 {text-align: center;}
section#profile h3 {text-align: left;font-family: 'Josefin Sans', sans-serif;font-weight: 300;}
section p.lead {text-align: center;}
section div h3 {font-size: 2.5em;font-weight: 600;}

#map_canvas a {background: none;padding: 0;}

#lesson div.clearfix > ul {}
#lesson div.clearfix > ul > li {float:none;width: 90%;padding:1em;margin:0 auto;}
#lesson div.clearfix > ul > li div {background-color: #fff;border-radius: 5px;padding: 0.5em;box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.5);color:#222;}
#lesson div.clearfix > ul > li div span {display: block;}
#lesson div.clearfix > ul > li div span.date {font-size:2em;}
#lesson div.clearfix > ul > li div span.uketsuke {font-weight: 600;font-size: 1.25em;}


ul.uketsuke li {margin:0.25em 0 0.5em 0.25em;font-size: 1.375em;border-bottom: 1px solid #ccc;}
ul.uketsuke li:last-child {border: none;}
ul.uketsuke li a {padding:0.25em 1em;margin-left: 0.5em;font-size: 100%;}
ul.uketsuke li span {display:block;font-size: 0.6em;}
ul.uketsuke li span.title {font-weight: 600;margin-top: 0.5em;}
ul.uketsuke li a.yet {background-color: #ccc;color:#999;cursor:default;}


#instore {/*background-color:rgba(255,3,5,0.9);color: #fff;*/}
#osaka {border-top: 2px solid yellow;border-bottom: 2px solid yellow;background: linear-gradient(to bottom, rgba(255,255,0,0.2) ,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,rgba(255,255,0,0.2));}
#nagoya {border-top: 2px solid blue;border-bottom: 2px solid blue;background: linear-gradient(to bottom, rgba(0,0,255,0.2) ,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,rgba(0,0,255,0.2));}
#tencho {background-color:rgba(235,200,110,0.5);}

#nagoya ul li {width:100%;float:none;padding:0.5em;}
#nagoya ul li div {background-color: #fff;border-radius: 5px;padding: 0.5em;box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.5);color:#222;}
#nagoya ul li div span {display:block;}
#nagoya ul li div span.time {font-size: 1.25em;}

section > div > span {display:block;text-align: center;}
section > div > span.free {color:#fff;margin:0.5em auto;font-size: 1em;}
section > div > span.free b {border:1px solid #f30;border-radius: 2px;padding:0.5em;background: red;}
section > div > span.date {font-size: 2em;}
section > div > span.time {font-size:1.375em;}
section > div > span.place {font-size:1.875em;}
section > div > span.open {}
section > div > span.start {}

section.instore a {display: block;}
section.instore a.shoplink {background: none;color: #116;font-weight: 500;margin:0.5em auto 0;}
section.instore a.shoplink:hover {color: #d33;text-decoration: underline;}
section.instore div.mapframe {width:80%;overflow: hidden;margin:0em auto 0.5em;border: 1px solid #ccc;}
section.instore div.mapframe iframe {width:100%;}
section.instore span.tel {background: #cfc;padding: 0.25em 0.5em;border-radius: 4px;margin:0 0;font-size: 1.5em;}

#movie {background-color: #111;color:#fff;}
.ytdemos {}
#movie div.youtube {width:100%;overflow: hidden;padding-top: 56.25%;margin-top: 1em;}
#movie div.youtube:first-child {margin-top: 0;}
#movie div.youtube iframe {position: absolute;top:0;left:0;width: 100% !important;height: 100% !important;}



.lemenu {margin:1em auto 0;display: none;}
.lemenu h5 {font-size: 1.5em;}
.lemenu span {display:block;}
.lemenu span.date {font-size: 1.5em;margin-top:0.5em;font-weight:500;}
.lemenu span.class {margin-top: 0.5em;border-top: 1px solid #ccc;padding-top: 0.25em;font-size: 1.5em;}
.lemenu span.class a {font-size: 0.875em;margin-left: 0.5em;}
.lemenu span.title {font-weight: 600;}


span.alert {font-size: 0.75em;display: block;text-align: left;}
#instore p.lead span.alert, .instore p.lead span.alert {font-size: 0.75em;text-align: center;}

#item {}
#item ul {width:90%;margin:0 auto;}
#item ul li {width:100%;float:none;padding:0.5em;}
#item ul li img {width:80%;margin:0 auto;}
#item ul li p {font-weight: 600;}
#item ul li span {display: block;}
#item ul li span.alert {text-align: left;}
#item ul li span.tokuten {}
#item ul li span.price {font-weight: 500;color:red;}

@media screen and (min-width: 750px) {
	#lesson div.clearfix > ul > li {float:left;width: 50%;padding:1em;}
	#movie .ytdemos.mov2 div.youtube {width: 49.5%;float:left;margin-top: 0;padding-top:27.56%;}
	#movie .ytdemos.mov2 div.youtube:last-child {margin-left: 1%;}
	#item ul li {width:50%;float:left;padding:0.5em;}
	#nagoya ul li {float:left;width: 50%;padding: 1em;}
	span.alert {text-align: center;}
}