html{margin: 0; padding: 0; clear: both; }
            body{color: #202f42; font-size: 16px; letter-spacing: 0.01em; line-height: 1.5;  clear: both; font-family:"Meiryo","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","Osaka","MS PGothic","arial","helvetica",sans-serif;}

a, a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover,button:hover,a img:hover{filter:alpha(opacity=80);opacity:0.6;text-decoration:none; color: #fff;}
ul{-webkit-padding-start: 0;}
ul li{list-style: none; }
dl dt{font-weight: normal;}
.wrapper{overflow: hidden;}
header{color: #fff;}
#top{max-width: 900px;margin:0 auto; position: relative;}
h1.logo{ /*margin-top: 130px;*/ margin-bottom: 50px;}
/*h1.logo img{ display: inline-block;}*/
h1.logo{ margin-top: 15%; }
h1.logo img{ display: inline-block; text-align: center;}
h2{font-size: 2.8rem; font-weight: bold; letter-spacing: 0.1em; font-family:"Georgia","Times","Times New Roman",serif;}
h3{font-size: 2.0rem; font-weight: bold;}
h4{font-size: 1.8rem; font-weight: bold; margin: 0;}
.btn{
 background: rgba(0,0,0,0.0);
 border: 2px solid #fff;
 border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 color: #fff;
 width: 203px;
 padding: 8px 0 5px 0;
 font-size: 1.8rem;
 letter-spacing: 0.1em;
}
.info{ font-size: 1.5rem; font-weight: bold; margin: 9% 0 10px 0;}
.btn-down{margin-bottom: 60px;}
.btn-teaclass{position: absolute; bottom: 44px; right: -137px;}
.btn-teaparty{position: absolute; bottom: 276px; right: -131px;}
.link_box{ 
 position: relative;
 width: 30%;
 padding: 5%;
 border: solid 1px #CCC;
 margin: 0 auto 20px;
} 
.link_box a{ position:absolute; top: 0; left:0; width:100%; height:100%; text-indent:-999px;}
#news{ padding: 0;}
.title{font-size: 7.6rem; margin-top: 20px; margin-bottom: 20px; line-height: 1.3; letter-spacing: 0.01em;}
.title_date{font-size: 5.0rem; letter-spacing: -0.01em;}
#news p{font-size: 1.8rem; line-height: 1.8;}
.btn-facebook{margin: 58px 0 135px 0;}
.bg-color{background: #f6f6f6;}
#menu,#select{background:#f6f6f6;}
#menu h2{margin:85px 0 40px 0;}
#menu h3{margin:45px 0 10px 0; letter-spacing: 0.01em; font-size: 2.0rem; font-weight: bold;}
#menu h4{margin:38px 0 10px 0; letter-spacing: 0.01em; font-size: 1.8rem; font-weight: bold;}
.note{font-size: 1.2rem; line-height: 1; margin: 0;}
.note-icon{font-size: 1em; vertical-align:baseline; font-weight: 100;}
#menu ul{margin: 15px 0 30px 0;}
#menu ul li{font-size: 1.4rem; letter-spacing: -0.01em; }

.text-xs{font-size: 0.1rem; vertical-align: text-top;}
.text_s{font-size: 1.2rem;}
#menu ul.photo {margin-top: 150px;}
#menu ul.photo li{ margin:0 0 65px 0;}
#select{padding:80px 0 80px 0;}
#select p{margin: 30px 0 35px 0; line-height: 1.7; letter-spacing: 0.01em;}
#rental{margin: 85px 0 70px 0;}
#rental h2{margin: 0 0 40px 0;}
#rental h3{margin-bottom: 30px;}
#rental h4{margin-bottom: 30px; margin-top: 40px;}
#rental p{letter-spacing: -0.04em;}
#rental ul li{line-height: 2.0}
#rental dl,#access dl{margin: 25px 0 0 0;}
#rental dl dt,#access dl dt{text-align: left; margin-bottom: 3px;}
#rental dl dd,#access dl dd{text-align: left; margin-bottom: 3px;}
#access{ margin: 65px 0 40px 0; font-size: 1.7rem;}
#access h2{margin-bottom:35px;}
#access p, #access address{ font-size: 1.6rem; line-height: 1.7;}
#access ul.shopname li{line-height: 1.9;}
#access dl dt{width:138px;}
#access dl dd {margin-left: 138px;}
#access dd.tel a, a:link, a:visited, a:active {color: #202f42;}
.col-r ul{margin-top: 30px;}
.marker {background-color: #ffff40; padding:0 6px;}
.marker a{color: #202f42;}
.googlemap{ font-size: 0.9em; letter-spacing: 0.01em;}
.copy_area{text-align: center; font-size: 1rem; background:#fff54a;}
#footer p.copy{ font-size: 1.2rem; font-weight: bold; padding: 15px 0 5px 0; letter-spacing: 0.01em;}
.text-muted{color: #202f42;}
.fade { -webkit-transition: 0.3s ease-in-out;  
-moz-transition: 0.3s ease-in-out;  
-o-transition: 0.3s ease-in-out;  
transition: 0.3s ease-in-out;  
}  
.fade:hover {  
opacity: 0.4;  
filter: alpha(opacity=60);}
.btn-ghost { background: transparent;}
.btn-ghost.btn-white {color: #fff; border: 2px solid #fff;}
.btn-ghost.btn-white:hover {opacity: 0.4;   filter: alpha(opacity=60);}
.up{ position: absolute;bottom: 50px; right: 120px;}
.top_area{margin-top: 132px;}

body.page_a { color: #202f42;}
body.page_a header { background: #fff54a;}
body.page_a h1.logo{ margin-top: 40px; margin-bottom: 37px;}
body.page_a h1.logo img{ display: inline-block;}
body.page_a h1.logo img{ display: inline-block; text-align: center;}
body.page_a .btn-ghost.btn-white {color: #202f42; border: 2px solid #202f42;}
body.page_a p.btn_top{margin-bottom: 42px;}
body.page_a h2{margin: 94px 0 0 0;}
body#party h2{margin-top: 97px;}
body.page_a h3{font-weight: bold; font-size: 1.8rem; margin-bottom: 45px;}
body#school h3{margin: 30px 0 0 0;}
body#party h3{margin-top: 28px;}
body.page_a p.class_lead{line-height: 1.9; letter-spacing: 0.01em; margin-bottom: 30px;}
body#school p.class_lead{margin-top: 47px;}
body#store p.class_lead{margin-top: 56px; margin-bottom: 4px;}
body#party p.class_lead{margin-bottom: 52px;　}
body.page_a p.img_01{margin-bottom: 80px;}


body.page_a .boxA-area{border: 1px solid; padding: 3px; max-width: 900px; margin: 55px 10px  61px 10px;}
body#store .boxA-area{margin: 21px 10px  1px 10px;}
body.page_a .boxA{border: 2px solid #89919b; padding: 0 0 11px 0;}
body#school .schedule h3{font-size: 2.0rem; font-weight: normal; padding: 10px 0; text-align: center; margin-bottom: 17px; }
body.page_a .boxA dl dt{width: 400px; text-align: left; font-weight: bold; margin: 0 0 0 65px; line-height: 1.9;}
body.page_a .boxA dl dt.first{height: 40px;}
body.page_a .boxA dl dd{margin: 0 0 6px 0; line-height: 1.9;}
body#store .boxA{padding: 3px 0 13px 0;}
body#store .boxA dl{margin-top: 23px; margin-bottom: 16px;}
body#store .boxA dl dt{width: 260px;}

body.page_a .boxB dl{border-top: 1px dotted #333; border-bottom: 1px dotted #333;padding: 17px 0; margin-bottom: -1px; }
body#party .boxB dl{padding: 15px 0;}
body.page_a .boxB dl dt{ float: left; width: 7.5em; text-align: right; padding-right: 10px; line-height: 1.8;}
body.page_a .boxB dl dt:after{content:'：';}
body.page_a .boxB dl dd{padding-left: 9.5em; line-height: 1.8;}
body.page_a #footer{margin-top: 120px;}
body#party .boxB{margin-left: -15px; margin-bottom: 47px;}

body.page_a .boxC{padding: 28px 25px 33px 25px;}
body.page_a .boxC h3{margin-bottom: 19px;}

.boxC dl,.boxC dt,.boxC  dd {margin: 0;}
.boxC dl { display:table; border-top: 1px dotted #333; border-bottom:  1px dotted #333; margin-bottom: -1px; width:100%; padding: 7px 0 5px 0;}
.boxC dt { vertical-align:middle; display:table-cell; padding:3px 0; min-height:1.5em; text-align: right; width: 150px; line-height: 1.8;}
.boxC dl dt:after{content:'：';}
.boxC dd { vertical-align:middle; display:table-cell; min-height:1.5em; padding:9px 0 9px 5px; max-width: 610px; font-size: 1.4rem; line-height: 1.8; padding-left: 35px; letter-spacing: -0.01em; height: 66px;}
.boxC dl dd.price{padding-right: 15px; text-align: right; vertical-align:middle; width: 115px;}
.notes{margin-top: 45px;}
.notes p{letter-spacing: -0.01em; margin-bottom: 6px;}
.contact{}

.btn_Area{margin: 10px 0 -17px 0;}
.btn_Area p{color: #202f42; text-align: center;}
.link_page{background: rgba(0,0,0,0.0); border: 2px solid #202f42; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #202f42; padding: 12px 90px 9px 90px; font-size: 1.8rem; letter-spacing: 0.1em; font-weight: bold; text-align: center;}
.btn_Area a, .btn_Area a:link, .btn_Area a:visited, .btn_Area a:active {color: #202f42;}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

@media only screen and (max-device-width: 1100px){
  #top{height: 1024px;}  
}

@media screen and (max-width:1100px) { 
/*　画面サイズが1100pxからはここを読み込む　*/
p.up {margin-top: 100px; position: absolute;bottom: 10px; right: 60px;}
p.btn-teaclass{position: absolute; bottom: -120px; right: -10px;}
p.btn-teaparty{position: absolute; bottom: 80px; right: -10px; }
p.btn-teaclass img,p.btn-teaparty img{width: 90%;}
.btn_Area p{text-align: left;}
body.page_a .boxA dl dt{width: 600px;}
body.page_a .boxA dl dd{ padding: 0 65px;}
}



@media screen and (max-width:560px) { 
/*　画面サイズが560pxからはここを読み込む　*/
p.up {margin-top: 100px; position: absolute;bottom: 10px; right: 30px;}
p.btn-teaclass{position: absolute; bottom: -33px; right: -40px;}
p.btn-teaparty{position: absolute; bottom: -88px; right: -40px;}
p.btn-teaclass img,p.btn-teaparty img{width: 80%;}
.boxA dl dt{margin: 0 0 0 30px;}
.boxC dl{width:auto;}
.boxC dt{padding-left:5px; text-align:left; width: auto;}
.boxC dd{text-align: left; padding-left: 0;border-left:none; margin-left:auto; height: 100%;}
.boxC dt,.boxC dd,.boxC dl{display:block;}
.link_page{padding: 12px 35px 9px 35px;}
body.page_a .boxA dl dt{ width: 270px; margin: 0 0 0 20px; padding-right: 20px;}
body.page_a .boxA dl dd{ margin: 0 0 6px 20px; padding: 0;}
body#school .schedule h3{ padding: 10px 20px; text-align: left;}
body.page_a .boxB dl dt{ float: left; width: 100px; padding-right: 10px;}
body.page_a .boxB dl dd{ padding-left: 7em;}
.btn_Area p{text-align: center;}
}

@media only screen and (max-device-width: 480px){
  #top{height: 650px;}  
}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxからはここを読み込む　 */
.img-responsive{ max-width: 90%;}
p.up { position: absolute;bottom: 10px; right: 20px;}
#footer{margin-top: 100px;}
p.btn-teaparty { position: absolute; bottom: 55px; right: -75px;}
p.btn-teaclass { position: absolute; bottom: -30px; right: -77px; }
p.btn-teaclass img,p.btn-teaparty img{width: 40%;}
.link_page{padding: 12px 17px 9px 17px;}
#access dl dd {margin-left: 0;}
body#school .schedule h3{ padding: 10px 10px;}
body.page_a .boxA dl dt{ width: 235px; margin: 0 10px; padding-right: 20px;}
body.page_a .boxA dl dd{ margin: 0 20px 6px 20px;}
} 



/* Small devices (tablets, 768px and up) *//*
@media (min-width: @screen-sm-min) {
p.up {margin-top: 100px; position: absolute;bottom: 10px; right: 30px;}
p.btn-teaclass{position: absolute; bottom: -33px; right: -40px;}
p.btn-teaparty{position: absolute; bottom: -88px; right: -40px;}
p.btn-teaclass img,p.btn-teaparty img{width: 80%;}
.boxA dl dt{margin: 0 0 0 30px;}
.boxC dl{width:auto;}
.boxC dt{padding-left:5px; text-align:left; width: auto;}
.boxC dd{text-align: left; padding-left: 0;border-left:none; margin-left:auto; height: 100%;}
.boxC dt,.boxC dd,.boxC dl{display:block;}
.link_page{padding: 12px 35px 9px 35px;}
body.page_a .boxA dl dt{ width: 270px; margin: 0 0 0 20px; padding-right: 20px;}
body.page_a .boxA dl dd{ margin: 0 0 6px 20px; padding: 0;}
body#school .schedule h3{ padding: 10px 20px; text-align: left;}
body.page_a .boxB dl dt{ float: left; width: 100px; padding-right: 10px;}
body.page_a .boxB dl dd{ padding-left: 7em;}
.btn_Area p{text-align: center;}    
}
 
/* Medium devices (desktops, 992px and up) *//*
@media (min-width: @screen-md-min) { ... }
 
/* Large devices (large desktops, 1200px and up) *//*
@media (min-width: @screen-lg-min) {
#top{min-height: 1024px;}
p.up {margin-top: 100px; position: absolute;bottom: 10px; right: 60px;}
p.btn-teaclass{position: absolute; bottom: -120px; right: -10px;}
p.btn-teaparty{position: absolute; bottom: 80px; right: -10px; }
p.btn-teaclass img,p.btn-teaparty img{width: 90%;}
.btn_Area p{text-align: left;}
body.page_a .boxA dl dt{width: 600px;}
body.page_a .boxA dl dd{ padding: 0 65px;}
*/