@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Allura);

html { font-size: 62.5%; } 
body { font-size: 16px; font-size: 1.6rem; } /* =16px */
body {
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: #736357;
	line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; font-size: 1.6rem; }
p, ul, ol, dl, dt, dd, address { margin: 0; padding: 0; }
li { list-style: none; }
form, input, select, option, textarea, table, tr { margin: 0; padding: 0; }

a img { border: none 0; }
a { text-decoration: none; color: darkcyan; }
a:hover { text-decoration: none; transition: 0.5s; color: aquamarine; }

/* ------------ common part ------------ */
body { background: #EBE4DB; margin: 0; padding: 0; }
#page { width: 80%; margin: 0 auto; background: #fff; box-shadow:0px 0px 10px #998675; min-width: 1000px; }
#header { height: 200px; background: #998675 url(../images/sanalu.png) no-repeat 10rem 6rem; }
#header h1 { color: #fff; font-weight: normal; padding-top: 3rem; padding-left: 10rem; }
#header #yogaroom { margin-left: 80%; }

nav { width: 100%; font-family: Allura; font-size: 3rem; }
nav ul{ display: flex; justify-content: center; }
nav li { padding: 2rem 2rem 0; }
nav li a { color: #333; }
nav a:hover{ color: #fff; background: url(../images/icon_circle.png) no-repeat center; }

#contents { width: 1000px; margin: 0 auto; text-align: left;  }
#introduction, #profile, #schedule, #studios, #lessons, #private { margin-bottom: 2rem; }
#profile, #schedule, #studios, #lessons, #family, #inquiry, #private { margin-left: 5rem; margin-right: 5rem; }

h2 { font-family: Allura; font-size: 4rem; margin: 1rem 0; padding-left: 4rem; background:url(../images/icon_flower2.png) no-repeat 0 1.2rem; }
h2 span { padding-left: 1.6rem; font-size: 40%; }

#profile h3 { margin-bottom: 0.5rem; font-size: 2rem; }
#profile #photo { float: right; }
#profile #comment { margin-bottom: 1rem; }
#profile li { margin-left: 2rem; list-style:disc; }

#schedule div { background: url(../images/schedule.png) no-repeat; width: 920px; height: 780px; position: relative; }
#schedule div a p:hover { background: #ed1c24; transition: 0.5s; }
.frame { align-self: center; position: absolute; width: 140px; height: 60px; background: #f4777c; font-size: 1.4rem; color: #fff; text-align: center; line-height: 1; border: 1px solid #f30; border-radius:8px; }
.frame strong { color:#633; display: block; }
.lesson-wed1 { top:120px; left:360px; height: 30px; } /* 水曜6:30-7:00 早朝ヨーガ＠オンライン　※2020年12スタート */
.lesson-wed2 { top:330px; left:360px; } /* 水曜10:00-11:00 ヨーガ＠sanalu　※2020年12スタート */
.lesson-thu { top: 370px; left: 500px; } /* 木曜10:40～11:40 ダンスエクササイズ&ピラティス＠Twinkleダンススタジオ */
.lesson-fri { top: 700px; left: 640px; } /* 金曜16:10～17:10 キッズダンス＠ルキナ仙川アネックス*/
.lesson-sat1 { top:270px; left:780px; } /* 土曜9:00-10:00 朝ヨガ＠sanalu　※2019年12月まで */
.lesson-sat2 { top:360px; left:780px; } /* 土曜10:30-11:30 ママヨガ＠sanalu　※2019年12月まで */


#lessons h3 { text-align: center; margin: 0 0 2rem; font-size: 150%; font-weight: bold; }
/*#lessons h3 { width: 120px; height: 120px; border: 1px solid; border-radius: 60px; -webkit-border-radius: 60px; text-align: center; margin-bottom: 1.6rem; float: left; line-height: 120px; }
#lessons h3.line2 { line-height: 100px; } 
#lessons h3.line2 span { font-size: 1.2rem; position: relative; bottom: 80px; }*/
#lessons p.detail { text-align: center; margin-bottom: 2rem;}

.discount { padding: 0.1rem 1rem; color:#f00; border: 1px solid #f00; background:#fee; }
.reserve { width: 35rem; margin: 2rem auto 5rem; }
.reserve a { padding: 0.5rem 1.6rem; width: 35rem; display: block; background: #f4777c; color:#fff; border: 1px solid #f60; text-decoration: none; border-radius:2rem;  -webkit-border-radius:2rem; text-align: center; box-shadow:2px 5px rgba(0,0,0,0.1); }
.reserve a:hover { background: #ed1c24; border-color: #f30; }
/*#lessons hr { margin-top: 2rem; margin-bottom: 2rem; border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); }*/

table.lesson-detail { margin-bottom: 3rem; border-collapse: collapse; width: 100%; border: solid 1px #8c8b8b; text-align: center; }
table.lesson-detail thead { border-bottom: solid 1px #8c8b8b; }
table.lesson-detail tbody tr { border-bottom: solid 1px #8c8b8b; }
table.lesson-detail th { padding: 0.5rem 0; background: #eeeeee; }
table.lesson-detail td { padding: 1rem 0.5rem; border-right: solid 1px #8c8b8b; }
table.lesson-detail .lesson-place { width: 23%; }
table.lesson-detail .lesson-course { width: 23%; }
table.lesson-detail .lesson-day { width: 6%; }
table.lesson-detail .lesson-time { width: 9%; }
table.lesson-detail .lesson-price { white-space: nowrap; }
table.lesson-detail .lesson-belongings { width: 25%; }

#private { overflow: hidden; }
table#private-detail { margin-bottom: 2rem; border-collapse: collapse; }
table#private-detail th { padding: 0 0 1rem; }
table#private-detail td { padding: 1rem 1.5rem; }
table#private-detail thead { text-align: center; border-bottom: solid 1px #8c8b8b; }
table#private-detail tbody tr { border-bottom: solid 1px #8c8b8b; }
table#private-detail tbody .private-price { text-align: center; }
table#private-detail tfoot td { text-align: center; padding-top: 3rem; }

#studios div { overflow: hidden; }

footer { position: relative; text-align: center; padding-bottom: 2rem; }
small { font-size: inherit; }
#pagetop { width: 50px; height: 50px; border: 1px solid; border-radius: 25px; -webkit-border-radius: 25px; position: absolute; right: 0; bottom: -100px; }
#pagetop a { display: block; width: 50px; height: 50px; padding-top: 3px; text-align: center; font-size: 1.28rem; line-height: 1; }
#pagetop a:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    border-left: #666 3px solid;
    border-top: #666 3px solid;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
		position: relative;
		margin: 0 auto;
		top: 5px;
}


#footer { text-align: center; padding: 1rem 0; }