@charset "utf-8";
#mv{width:100%;margin:0 auto;position:relative;z-index:0;text-align:center;clear:both}
#mv p{text-shadow:2px 2px 1px #fff;color:#111}
#mv p strong{display:block}
#indexIntro h2{text-align:center}
#indexIntro h2 strong{color:#f56e9e}
#indexIntro h2 strong span{font-style:italic}
#indexIntro ol{counter-reset:rankno 0}
#indexIntro ol li:before{content:counter(rankno);counter-increment:rankno;position:absolute;z-index:10;color:#fff;font-style:italic;font-family: 'Crimson Text', serif}
#indexIntro ol li:after{width:0;height:0;display:block;content:"";position:absolute;top:0;left:0}
#indexIntro ol li{background-color:#fff;position:relative;overflow:hidden}
#indexIntro ol li img{background-repeat:no-repeat;background-size:cover;background-position:center top;vertical-align:top;line-height:1}
#indexIntro ol li:nth-child(1) img{background-image:url(../img/index/img01.jpg)}
#indexIntro ol li:nth-child(2) img{background-image:url(../img/index/img02.jpg)}
#indexIntro ol li:nth-child(3) img{background-image:url(../img/index/img03.jpg)}
#indexIntro ol li p{color:#db3671;position:relative}
#indexIntro ol li p:before{content:"\0025b2";position:absolute;top:0;left:50%;color:#fff}
#indexIntro ol li p:last-child{color:#111}
#indexIntro ol li p:last-child:before{display:none}
#indexGallery{display:block;width:100%;position:relative}
#indexGallery a{color:#fff;text-decoration:none}
#indexGallery a:before{content:"";background:rgba(0,0,0,0.5);display:block;width:100%;position:absolute;top:0;left:0}
#indexGallery a h2,#indexGallery a p{position:relative;z-index:2;text-shadow:2px 2px 3px #000000;}
#indexGallery a h2{text-align:center}
#indexGallery a p:after{content:"\0030ae\0030e3\0030e9\0030ea\0030fc\003092\00307f\00308b";display:block;color:#fff;background:#9b7a30;box-shadow:0px 2px 2px 0px #333;text-shadow:none}
#indexGallery a:hover p:after{background:#8f6914}
#indexLead li{position:relative}
#indexLead ul li img{background-color:#fff;background-repeat:no-repeat;background-size:cover;background-position:center;height:auto;display:block;margin:0 auto}
#indexLead ul li:nth-child(1) img{background-image:url(../img/index/img04.jpg)}
#indexLead ul li:nth-child(2) img{background-image:url(../img/index/img05.jpg)}
#indexLead ul li:nth-child(3) img{background-image:url(../img/index/img06.jpg)}
#indexLead ul li:nth-child(4) img{background-image:url(../img/index/img07.jpg)}
#indexLead ul li:nth-child(2n+1):after{background:#f5e4bf}
#indexLead ul li:nth-child(2n):after{background:#fbe0e0}
#indexLead ul li a{text-decoration:none}
#indexLead ul li p:before{content:""}
#indexLead ul li a:hover img{opacity:0.9}
#indexLead ul li:nth-child(2n) p:before{background:url(../img/index/ico01.png) no-repeat center;background-size:100%}
#indexLead ul li:nth-child(2n+1) p:before{background:url(../img/index/ico02.png) no-repeat center;background-size:100%}
#indexNews section:nth-child(1){background:url(../img/index/bg01.jpg) no-repeat center;background-size:cover}
#indexNews section:nth-child(2){background:url(../img/index/bg02.jpg) no-repeat center;background-size:cover}
#indexNews section .inner{background:rgba(255,255,255,0.85)}
#indexNews section h2{text-align:center}
#indexNews section h2:after{font-family: 'Crimson Text', serif;color:#f56e9e;display:block}
#indexNews section:nth-child(1) h2:after{content:"\004e\0065\0078\0074\0020\0053\0074\0061\0067\0065\0020\0049\006e\0066\006f\0072\006d\0061\0074\0069\006f\006e"}
#indexNews section:nth-child(2) h2:after{content:"\004e\0065\0077\0073"}
.scroll{width:100%;overflow-y:scroll;position:relative}
.jspContainer{overflow:hidden;position:relative}
.jspPane{position:absolute}
.jspTrack{background:#e9e9e9;position:relative}
.jspDrag{background:#e0c4c4;position:relative;top:0;left:0;cursor:pointer}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag{float:left;height:100%}
.jspVerticalBar{position:absolute;top:0;right:0;height:100%}
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%}
@media screen and (min-width: 961px), print {
#loading{background-size:200px}
body{min-width:1350px}
#mv{height:540px;position:relative;top:-11px}
#mv p{font-size:56px;padding:190px 0 0;line-height:1.8em}
#mv p strong{font-size:24px}
#indexIntro{margin:0 auto 50px}
#indexIntro h2{font-size:32px;padding:50px;background:url(../img/index/deco01.png) no-repeat center;background-size:auto 50px}
#indexIntro h2 strong span{font-size:36px;padding:0 8px 0 3px}
#indexIntro ol{display:table;border-spacing:20px 0;border-collapse:separate}
#indexIntro ol li{display:table-cell;width:33.3%}
#indexIntro ol li:before{font-size:36px;padding:0 0 0 8px;line-height:1em}
#indexIntro ol li:after{border:60px solid transparent;border-top:60px solid #c3a563;margin:0 0 0 -60px}
#indexIntro ol li img{width:100%;height:auto}
#indexIntro ol li p{font-size:24px;text-align:center;padding:20px 15px 0}
#indexIntro ol li p:before{margin:-24px 0 0 -12px}
#indexIntro ol li p:last-child{text-align:left;font-size:16px;padding-bottom:20px}
#indexGallery{background:url(../img/index/bg_gallery.jpg) no-repeat center;background-size:cover;border-top:4px solid #c3a563;border-bottom:4px solid #c3a563;height:360px}
#indexGallery a{height:360px;text-align:center}
#indexGallery a:before{height:356px}
#indexGallery a h2{font-size:36px;background:url(../img/index/deco05.png) no-repeat center;background-size:auto 40px;margin:100px auto 30px}
#indexGallery a p{font-size:20px;letter-spacing:0.05em;text-indent:0.05em}
#indexGallery a p:after{font-size:17px;width:200px;margin:60px auto 0;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;padding:5px 0 2px;transition:0.3s}
#indexGallery a:hover p:after{margin:55px auto 0}
#indexLead{padding:60px 0}
#indexLead ul{display:table;border-spacing:15px 0;border-collapse:separate;width:100%}
#indexLead ul li{display:table-cell;width:220px;text-align:center;font-size:20px;padding:0 20px;transition:0.3s}
#indexLead ul li img{width:100%;display:block;margin:0 auto 12px}
#indexLead ul li p,#indexLead ul li img,#indexLead ul li a{position:relative;z-index:1}
#indexLead ul li:after{content:"";display:block;margin:0 auto;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:0;position:absolute;left:50%;width:220px;height:220px;margin:20px 0 0 -110px;z-index:0;transition:0.3s}
#indexLead ul li p:before{content:"";width:10px;height:10px;display:inline-block;position:relative;top:-2px;margin:0 10px 0 0}
#indexLead ul li:hover:after{margin:30px 0 0 -110px}
#indexNews{display:table;width:100%}
#indexNews section{width:50%;display:table-cell;padding:50px;position:relative;z-index:0}
#indexNews section .inner:before{border:1px solid #fff;width:490px;height:490px;position:absolute;top:4px;left:4px;content:""}
#indexNews section:after{content:"";position:absolute;z-index:1}
#indexNews section:nth-child(1):after{width:132px;height:132px;background:url(../img/index/deco03.png) no-repeat center;background-size:cover;top:15px;right:50%;margin-right:140px}
#indexNews section:nth-child(2):after{width:182px;height:128px;background:url(../img/index/deco04.png) no-repeat center;background-size:cover;top:36px;left:50%;margin-left:110px}
#indexNews section .inner{width:500px;height:500px;margin:0 auto;position:relative}
#indexNews section h2{font-size:28px;padding:30px}
#indexNews section h2:after{font-size:16px}
#indexNews section .scroll{margin:0 30px}
#indexNews section .scroll{width:440px;height:340px}
.jspVerticalBar{width:5px}
.jspHorizontalBar{height:5px}
}
@media screen and (max-width: 960px) {
#loading{background-size:200px}
#mv{height:320px;width:100%;margin:0 auto}
#mv p{font-size:24px;padding:120px 0 0;line-height:1.8em}
#mv p strong{font-size:14px}
#indexIntro{margin:0 auto 40px}
#indexIntro h2{font-size:14px;padding:20px;background:url(../img/index/deco01.png) no-repeat center;background-size:auto 22px}
@media screen and (max-width: 320px) {#indexIntro h2{background-size:auto 20px}}
#indexIntro h2 strong span{font-size:17px;padding:0 5px 0 3px}
#indexIntro ol{padding:0 20px}
#indexIntro ol li{width:280px;margin:0 auto 20px}
#indexIntro ol li:before{font-size:22px;padding:0 0 0 6px;line-height:1.2em}
#indexIntro ol li:after{border:40px solid transparent;border-top:40px solid #c3a563;margin:0 0 0 -40px}
#indexIntro ol li img{width:100%;height:auto}
#indexIntro ol li p{font-size:16px;text-align:center;padding:10px 10px 0}
#indexIntro ol li p:before{margin:-15px 0 0 -12px}
#indexIntro ol li p:last-child{text-align:left;font-size:12px;padding-bottom:10px}
#indexGallery{background:url(../img/index/bg_gallery_sp.jpg) no-repeat center;background-size:cover;border-top:2px solid #c3a563;border-bottom:2px solid #c3a563;height:250px}
#indexGallery a{height:250px;text-align:center}
#indexGallery a:before{height:246px}
#indexGallery a h2{font-size:20px;background:url(../img/index/deco05.png) no-repeat center;background-size:auto 20px;margin:50px auto 30px}
#indexGallery a p{font-size:13px;letter-spacing:0.05em;text-indent:0.05em}
#indexGallery a p:after{font-size:13px;width:160px;margin:50px auto 0;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;padding:5px 0 2px;transition:0.3s}
#indexGallery a:hover p:after{margin:55px auto 0}
#indexLead{padding:20px 0 10px}
#indexLead ul{width:100%;padding:10px}
#indexLead ul li{width:50%;text-align:center;font-size:13px;padding:0 10px;transition:0.3s;float:left;margin:0 auto 20px}
#indexLead ul li:nth-child(2n+1){clear:both}
#indexLead ul li img{width:100%;display:block;margin:0 auto 8px}
#indexLead ul li p,#indexLead ul li img,#indexLead ul li a{position:relative;z-index:1}
#indexLead ul li p:before{content:"";width:8px;height:8px;display:inline-block;position:relative;top:-2px;margin:0 6px 0 0}
#indexLead ul li:hover:after{margin:30px 0 0 -110px}

#indexNews section{padding:30px 20px;position:relative;z-index:0;margin:0 auto 30px}
#indexNews section .inner:before{border:1px solid #fff;position:absolute;top:4px;left:4px;content:""}
#indexNews section .inner{margin:0 auto;position:relative;padding:0 10px 10px}
#indexNews section h2{font-size:16px;padding:20px 10px 10px;margin:0 auto 10px}
#indexNews section h2:after{font-size:10px}
#indexNews section .scroll{font-size:13px}
.jspContainer{width:100%}
.jspPane{width:80%}
.scroll{height:150px}
.jspVerticalBar{width:4px}
.jspHorizontalBar{height:4px}
}

/* -------------------------
COMMON PARTS on underpage
------------------------- */
#pageTitle{line-height:1;text-align:center;background-image:url(../img/common/page_title.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-bottom:1px solid #e1e1e1}
#pageTitle h2:before{color:#f56e9e;font-family: 'Crimson Text', serif;display:block;font-weight:normal}
#pageTitle h2{color:#262626;letter-spacing:0.05em;text-indent:0.05em}
#under h3{text-align:center;position:relative}
#under h3:before{background:#d21d00}
#under h3:after{background:#1f1f1f}
#under h3:before,#under h3:after{content:"";height:2px;position:absolute;bottom:0}
#under h3:before{left:50%}
#under h3:after{right:50%}
#under h4{font-family:'m1p-m'}
@media screen and (min-width: 961px), print {
#pageTitle{padding:70px 0;margin:0 0 40px}
#pageTitle h2:before{font-size:54px;padding:0 0 20px}
#pageTitle h2{font-size:24px;padding:30px 50px}
}
@media screen and (max-width: 960px) {
#pageTitle{padding:10px 0;margin:0 auto}
#pageTitle h2:before{font-size:24px;padding:0 0 10px}
#pageTitle h2{font-size:12px;padding:20px 10px}
}

/* -------------------------
スタジオ案内 (https://ryoko-ballet.com/studio/)
------------------------- */
.studioPage #pageTitle h2:before{content:"\006f\0075\0072\0020\0073\0074\0075\0064\0069\006f"}
#lecture h3{background:#c3a563;color:#fff;font-weight:normal}
#lecture figure span:lang(ja){color:#191919}
#lecture figure span:lang(en){color:#f56e9e;font-family: 'Crimson Text', serif}
#lecture div{background:#fff}
#lecture div h4{color:#f56e9e;border-bottom:1px solid #f56e9e;display:inline-block}
@media screen and (min-width: 961px), print {
#lecture{display:table;border-spacing:40px 0;border-collapse:separate;margin:0 auto 100px}
#lecture h3,#lecture figure,#lecture div{display:table-cell;vertical-align:top}
#lecture h3{font-size:30px;width:80px;padding:20px;text-align:center}
#lecture figcaption{padding:20px 0;line-height:2em;display:block}
#lecture figure span:lang(ja){font-size:40px}
#lecture figure span:lang(en){font-size:20px;letter-spacing:0.03em}
#lecture div{background:#fff}
#lecture div h4{padding:20px 30px 10px 25px;font-size:24px;letter-spacing:0.05em;margin:0 0 20px}
#lecture div p{padding:0 25px;margin:0 0 1.8em;line-height:1.8em}
#message{position:relative;margin:0 auto 50px}
#message h3{color:#fff;width:25%;margin:0 auto;background:url(../img/studio/bg01.gif);display:block;text-align:center;position:absolute;top:0;left:50%;margin:0 0 0 -12.5%;min-height:400px;line-height:1.4em;font-size:28px;letter-spacing:0.05em;text-indent:0.05em;padding:6% 0 0;-webkit-box-sizing:border-box;moz-box-sizing:border-box;box-sizing:border-box}
#message ul{position:relative;top:0}
#message ul li{width:12.5%;float:left;line-height:0;background:#fff}
#message ul li img{width:100%;height:auto}
#message ul li:nth-child(3){margin-right:25%}
}
@media screen and (max-width: 960px) {
#lecture{margin:0 auto 20px;padding:20px}
#lecture h3{font-size:15px;padding:6px 10px;text-align:center;letter-spacing:0.05em;text-indent:0.05em}
#lecture figure{text-align:center;padding:10px 0}
#lecture figure img{width:140px;height:auto;display:block;margin:0 auto}
#lecture figcaption{padding:20px 0 0;line-height:1.3em;display:block}
#lecture figure span:lang(ja){font-size:18px}
#lecture figure span:lang(en){font-size:12px;letter-spacing:0.03em;display:block}
#lecture div{background:#fff;padding:0 0 10px}
#lecture div h4{padding:10px 20px 5px 20px;font-size:15px;letter-spacing:0.05em;margin:0 0 10px}
#lecture div p{padding:0 20px;margin:0 0 1.6em;line-height:1.8em;font-size:12px}
#message{margin:0 auto 20px}
#message h3{color:#fff;width:100%;margin:0 auto;background:url(../img/studio/bg01.gif);display:block;text-align:center;line-height:1.4em;font-size:15px;letter-spacing:0.05em;text-indent:0.05em;-webkit-box-sizing:border-box;moz-box-sizing:border-box;box-sizing:border-box;padding:12px 0}
#message h3 br{display:none}
#message ul{position:relative;top:0}
#message ul li{width:25%;float:left;line-height:0;background:#fff}
#message ul li img{width:100%;height:auto}
#message ul li:nth-child(4n+1){clear:both}
}

/* -------------------------
レッスンクラス・料金 (https://ryoko-ballet.com/lesson/)
------------------------- */
.lessonPage #pageTitle h2:before{content:"\006c\0065\0073\0073\006f\006e\0020\0063\006c\0061\0073\0073\0020\0026\0020\0066\0065\0065"}
.lessonPage main h3{text-align:center;background:url(../img/lesson/deco02.png) no-repeat center;letter-spacing:0.05em;text-indent:0.05em}
.lessonPage main h3:after{color:#dd437a;display:block;font-family: 'Crimson Text', serif;;letter-spacing:normal;text-indent:0}
#class h3:after{content:"\004c\0065\0073\0073\006f\006e\0020\0063\006c\0061\0073\0073\0020\006c\0069\006e\0065\0020\0075\0070"}
#price h3:after{content:"\004c\0065\0073\0073\006f\006e\0020\0070\0072\0069\0063\0065"}

#class article{background:#fff;text-align:center;position:relative;box-shadow:0px 0px 8px 1px #f1e1ea}
#class article>p:first-child{display:inline-block;color:#fff;background:#c3a563;position:relative;z-index:1}
#class article img{width:100%;height:auto}
#class article h4{background:#fff;border-top:2px solid #c3a563;text-align:center;position:relative;z-index:1}
#class article:before{content:"";background:url(../img/lesson/deco01.png) no-repeat center top;background-size:100% auto}
#class article .txt{text-align:left}
#price{background:url(../img/lesson/bg01.gif);border-top:1px solid #e5e5e5}
#pricetab{display:table}
#pricetab li{width:50%;text-align:center;display:table-cell}
#pricetab li a{display:block;background:#dadada;text-decoration:none;position:relative}
#pricetab li a:hover,#pricetab li a.selected{background:#e05b8b;color:#fff}
#pricetab li .selected:after{content:"\0025bc";color:#e05b8b;position:absolute;left:50%}
dl.table{border-top:1px solid #dadada}
dl.table dt{float:left;clear:both;color:#e05b8b}
dl.table dd{border-bottom:1px solid #dadada;text-align:right}
#tab1 dl.table+dl dt{text-align:center;color:#e05b8b}
#tab1 dl.table+dl dd ul li:before{content:"\0025a0";color:#e05b8b}
#tab1 dl.table:after{content:"\00203b\006708\00306e\00982d\00306b\00304a\00652f\006255\003044\00304f\003060\003055\003044\003002";display:block}

@media screen and (min-width: 961px), print {
#class{width:1230px;margin:0 auto}
.lessonPage main h3{font-size:28px;background-size:auto 45px}
.lessonPage main h3:after{font-size:16px;padding:5px 0 0}
#class article>p:first-child{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;font-size:16px;padding:3px 10px;margin:0 auto;top:-20px}
#class article:before{width:84px;height:32px;display:block;position:absolute;top:-42px;left:50%;margin:0 0 0 -42px}
#class article{width:360px;margin:0 25px 80px;float:left;position:relative}
#class article:nth-child(5){clear:both;margin-left:225px}
#class article img{position:relative;top:-30px}
#class article h4{width:190px;font-size:26px;color:#9d7d36;padding:10px 0 0;margin:-50px auto 0}
#class article .txt{padding:20px;font-size:15px;line-height:1.8em}
#class article .scroll{height:170px}
#class h3{margin:0 auto 100px}
#price{padding:50px 0}
#price h3{margin:0 auto 50px}
#price h3+p{text-align:center;line-height:2em;margin:0 auto 60px}
#price h4{display:none}
#pricetab{margin:0 auto 20px}
#pricetab,.pricebox{width:1000px;margin:0 auto}
#pricetab li a{font-size:20px;padding:6px 0}
#pricetab li a.selected:after{bottom:-18px;margin-left:-10px}
#tab1,#tab2{padding:40px 0 0}
#tab1 dl.table{float:left;margin:0 0 0 20px;width:450px}
#tab1 dl.table:after{padding:20px 0 0;font-size:13px}
#tab1 dl.table+dl{float:right;border:5px solid #ffeff5;margin:0 20px 0 0;width:460px}
#tab1 dl.table+dl dt{font-size:22px;padding:20px}
#tab1 dl.table+dl dd{padding:0 15px 15px;text-align:center;font-size:18px}
#tab1 dl.table+dl dd p{border-bottom:2px solid #e05b8b;display:inline-block;padding:0 2px 2px}
#tab1 dl.table+dl dd ul{text-align:left;padding:30px 0 0}
#tab1 dl.table+dl dd ul li{font-size:14px;padding:0 0 0 15px;margin:0 0 5px}
#tab1 dl.table+dl dd ul li:before{margin:0 5px 0 -15px}
#tab2 dl.table{width:770px;margin:30px auto;font-size:18px}
#price dl.table dt,#price dl.table dd{padding:20px 10px}
}
@media screen and (max-width: 960px) {
.lessonPage main{padding:20px 0 0}
.lessonPage main h3{font-size:16px;background-size:auto 22px}
.lessonPage main h3:after{font-size:10px;padding:2px 0 0}
#class article>p:first-child{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;font-size:12px;padding:3px 10px;margin:0 auto;top:-20px}
#class article:before{width:42px;height:16px;display:block;position:absolute;top:-30px;left:50%;margin:0 0 0 -21px}
#class article{width:280px;margin:0 auto 60px;position:relative}
#class article:last-child{margin:0 auto 40px}
#class article img{position:relative;top:-30px}
#class article h4{width:160px;font-size:16px;color:#9d7d36;padding:10px 0 0;margin:-60px auto 0}
#class article .txt{padding:10px;font-size:13px;line-height:1.8em}
#class article .scroll{height:100%}
#class h3{margin:0 auto 50px}
#class .jspVerticalBar,#class .jspHorizontalBar,#class .jspDrag{display:none}
#price{padding:30px 20px}
#price h3{margin:0 auto 20px}
#price h3+p{text-align:center;line-height:2em;padding:0 20px;font-size:12px}
#price h4{background:url(../img/studio/bg01.gif);color:#fff;padding:5px;color:#fff;text-align:center;margin:0 auto 20px}
#pricetab{display:none}
#tab1,#tab2{padding:40px 0 0}
#tab1 dl.table{margin:0 10px 20px}
#tab1 dl.table:after{padding:10px 0 0;font-size:11px}
#tab1 dl.table+dl{border:5px solid #ffeff5;margin:0}
#tab1 dl.table+dl dt{font-size:16px;padding:20px 10px}
#tab1 dl.table+dl dd{padding:0 10px 10px;text-align:center;font-size:14px}
#tab1 dl.table+dl dd p{border-bottom:2px solid #e05b8b;display:inline-block;padding:0 2px 2px}
#tab1 dl.table+dl dd ul{text-align:left;padding:20px 0 0}
#tab1 dl.table+dl dd ul li{font-size:11px;padding:0 0 0 15px;margin:0 0 5px}
#tab1 dl.table+dl dd ul li:before{margin:0 5px 0 -15px;font-size:10px}
#tab2 dl.table{margin:20px auto;font-size:18px}
#price dl.table dt,#price dl.table dd{padding:10px;font-size:13px}
}

/* -------------------------
スタジオ案内 (https://ryoko-ballet.com/studio/)
------------------------- */
.schedulePage #pageTitle h2:before{content:"\0073\0063\0068\0065\0064\0075\006c\0065"}
.schedulePage main img{width:100%;height:auto;display:block;margin:0 auto}
@media screen and (min-width: 961px), print {
.schedulePage main{width:1100px;margin:0 auto 50px}
}
@media screen and (max-width: 960px) {
.schedulePage main{padding:10px}
}

/* -------------------------
ギャラリー案内 (https://ryoko-ballet.com/gallery/)
------------------------- */
.galleryPage #pageTitle h2:before{content:"\0067\0061\006c\006c\0065\0072\0079"}
#galleryList ul{letter-spacing:-.4em;text-align:center}
#galleryList li{display:inline-block;letter-spacing:normal;line-height:0}
#galleryList li a{position:relative;z-index:0;display:table;color:#fff}
#galleryList li a div{position:absolute;top:0;z-index:1;left:0;display:none;width:100%;height:100%;text-shadow:2px 2px 3px #333}
#galleryList li a div img{vertical-align:top;line-height:0}
#galleryDetail h3{text-align:center}
#galleryDetail h3:before{content:"";background:url(../img/gallery/ico02.png) no-repeat left center;background-size:100%;display:inline-block;position:relative}
#galleryDetail header{display:flex}
#galleryDetail header:before,#galleryDetail header:after{content:"";flex-grow:1;height:1px;background:transparent;display:block;border-top:3px double #c3a563}
.tiled-gallery.type-rectangular,.gallery-row{margin:0 auto}
@media screen and (min-width: 961px), print {
#galleryList{margin:0 auto 40px}
#galleryList li{background:#000;margin:0 3px}
#galleryList li a{}
#galleryList li a div p{line-height:1.6em;padding-top:55%}
#galleryList li a div time{padding:20px 0 0;display:block}
#galleryList li a:hover div{display:table-cell;vertical-align:middle;background:url(../img/gallery/ico01.png) no-repeat center top 25%;background-size:60px}
#galleryList li a:hover img{opacity:0.9 !important}
#galleryDetail header{padding:0 20px 40px}
#galleryDetail header:before,#galleryDetail header:after{margin-top:1.8em}
#galleryDetail header:before{margin-right:1.2em}
#galleryDetail header:after{margin-left:1.2em}
#galleryDetail h3:before{width:40px;height:40px;margin:0 10px 0 0;top:7px}
#galleryDetail h3{font-size:28px}
}
@media screen and (max-width: 960px) {
#galleryList{margin:0 auto 5px}
#galleryList ul{padding:5px}
#galleryList li{width:50%;float:left}
#galleryList li:nth-child(2n+1){clear:both}
#galleryList li a{padding:5px}
#galleryList li a div p{line-height:1.6em;padding-top:50%;font-size:12px}
#galleryList li a div time{padding:20px 0 0;display:block;font-size:10px}
#galleryList li a div{display:table-cell;vertical-align:middle;background:url(../img/gallery/ico01.png) no-repeat center top 25%;background-size:24px;padding:15px}
#galleryDetail header{padding:10px}
#galleryDetail header:before,#galleryDetail header:after{margin-top:0.7em}
#galleryDetail header:before{margin-right:0.5em}
#galleryDetail header:after{margin-left:0.5em}
#galleryDetail h3:before{width:20px;height:20px;margin:0 8px 0 0;top:3px}
#galleryDetail h3{font-size:16px}
}

/* -------------------------
アクセス (https://ryoko-ballet.com/info/)
------------------------- */
.infoPage #pageTitle h2:before{content:"\0061\0063\0063\0065\0073\0073"}
.infoPage main h3{text-align:center;background:url(../img/lesson/deco02.png) no-repeat center;letter-spacing:0.05em;text-indent:0.05em}
.infoPage main h3:after{color:#dd437a;display:block;font-family: 'Crimson Text', serif;;letter-spacing:normal;text-indent:0}
#summary h3:after{content:"\004f\0075\0072\0020\0050\0072\006f\0066\0069\006c\0065"}
#access h3:after{content:"\004c\006f\0063\0061\0074\0069\006f\006e\0020\0026\0020\0041\0063\0063\0065\0073\0073"}
#summary dt{color:#a37716}
#access iframe{width:100%;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}

@media screen and (min-width: 961px), print {
.slider{min-width:980px}
.slider li{margin:0 auto}
.slider li figure{display:block;margin:5px 5px 0}
.slider li figcaption{padding:5px 0;width:250px;margin:0 auto;display:block}
.bx-wrapper{position:relative;margin:0 auto 100px;padding:80px 0 0;*zoom:1;width:100%}
.bx-wrapper img{display:block;margin:0 auto 10px;width:250px;height:auto}
.bx-wrapper .bx-viewport{left:-5px;-webkit-transform:translatez(0);-moz-transform:translatez(0);-ms-transform:translatez(0);-o-transform:translatez(0);transform:translatez(0)}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{position:absolute;bottom:-20px;width:100%}
.bx-wrapper .bx-loading{min-height:50px;background:url(../img/info/loading.gif) center center no-repeat #fef9e7;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}
.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666}
.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block;*zoom:1;*display:inline}
.bx-wrapper .bx-pager.bx-default-pager a{background:#d2d2d2;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background:#f56e9e}
.bx-wrapper .bx-prev{left:-40px;background:url(../img/info/controls.png) no-repeat 0 -32px}
.bx-wrapper .bx-next{right:-30px;background:url(../img/info/controls.png) no-repeat -43px -32px}
.bx-wrapper .bx-prev:hover{background-position:0 0}
.bx-wrapper .bx-next:hover{background-position:-43px 0}
.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}
.bx-wrapper .bx-controls-direction a.disabled{display:none}
.bx-wrapper .bx-controls-auto{text-align:center}
.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(../img/info/controls.png) -86px -11px no-repeat;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active{background-position:-86px 0}
.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(../img/info/controls.png) -86px -44px no-repeat;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active{background-position:-86px -33px}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}
.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666\9;background:rgba(80,80,80,0.75);width:100%}
.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
.infoPage main h3{font-size:28px;background-size:auto 45px}
.infoPage main h3:after{font-size:16px;padding:5px 0 0}
#summary dl{font-size:18px;width:740px;margin:60px auto 80px;line-height:1.8em}
#summary dt{width:180px;clear:both;float:left;padding:15px 40px 15px 0;text-align:right;position:relative}
#summary dt:after{content:"\0025cf";color:#c3a563;font-size:8px;position:absolute;right:-25px;top:16px}
#summary dd{padding:15px 0 15px 40px;border-left:1px solid #c3a563;margin:0 0 0 200px}
#access iframe{height:360px;margin:40px auto 0}
}
@media screen and (max-width: 960px) {
#summary{padding:20px}
#summary dl{font-size:13px;margin:0 auto 20px}
#summary dt{padding:10px 0 5px}
#summary dd{padding:0 0 10px;border-bottom:1px dotted #c3a563}
#summary dd:last-child{border-bottom:none}
#access iframe{height:250px;margin:20px auto}

.slider{margin:0 auto}
.slider li{line-height:1.5em;font-size:82%}
.slider ul{padding:0 0 0 10px}
.slider li figure{display:block;margin:5px}
.slider li figcaption{padding:5px 10px}
.bx-wrapper{position:relative!important;margin:0 auto 40px;padding:0;*zoom:1;width:100%!important}
.bx-wrapper img{max-width:100%;display:block;width:300px;margin:0 auto;height:auto}
.bx-wrapper .bx-viewport{left:-5px;-webkit-transform:translatez(0);-moz-transform:translatez(0);-ms-transform:translatez(0);-o-transform:translatez(0);transform:translatez(0)}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{position:absolute;bottom:-10px;width:100%}
.bx-wrapper .bx-loading{min-height:50px;background:url(../img/info/loading.gif) center center no-repeat #fef9e7;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}
.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}
.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block;*zoom:1;*display:inline}
.bx-wrapper .bx-pager.bx-default-pager a{background:#d2d2d2;text-indent:-9999px;display:block;width:6px;height:6px;margin:0 5px;outline:0;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background:#f56e9e}
.bx-wrapper .bx-prev{display:none;left:-40px;background:url(../img/info/controls.png) no-repeat 0 -32px}
.bx-wrapper .bx-next{right:-30px;background:url(../img/info/controls.png) no-repeat -43px -32px;display:none}
.bx-wrapper .bx-prev:hover{background-position:0 0}
.bx-wrapper .bx-next:hover{background-position:-43px 0}
.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}
.bx-wrapper .bx-controls-direction a.disabled{display:none}
.bx-wrapper .bx-controls-auto{text-align:center}
.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(../img/info/controls.png) -86px -11px no-repeat;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active{background-position:-86px 0}
.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(../img/info/controls.png) -86px -44px no-repeat;margin:0 3px}
.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active{background-position:-86px -33px}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}
.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666\9;background:rgba(80,80,80,0.75);width:100%}
.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
.infoPage main h3{font-size:16px;background-size:auto 22px}
.infoPage main h3:after{font-size:10px;padding:2px 0 0}


}


/* -------------------------
★★フォーム★★ (https://★)
------------------------- */

#form dl dt{font-weight:600}
#form dl dd{background:#f2f2f2}
#form dl dd img{max-width:100%;height:auto}
#form dl dd:after{content:'';display:block;clear:both}
#form dl input[type="text"],#form dl input[type="email"],#form dl textarea{background:#fff}
.require{color:#fff;background:#d21d00;font-weight:normal}
#confirm-button{clear:both;text-align:center}
#confirm-button input[type="submit"]{border:none;cursor:pointer}
#confirm-button input[type="submit"]:hover{opacity:0.8}

#confirm-button input[type="submit"].back{color:#fff;background:#999;text-align:center;display:block;margin:0 auto}
#confirm-button input[type="submit"].finish{color:#fff;background:#d21d00;text-align:center;display:block;margin:0 auto}
/*input[type=radio],input[type=checkbox]{display:none}.radio,.ckbox{box-sizing:border-box;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;position:relative;display:inline-block;margin:0 10px 0 0;padding:2px 4px 2px 30px;border-radius:3px;vertical-align:middle;cursor:pointer}.radio:after{-webkit-transition:border-color .2s linear;transition:border-color .2s linear;position:absolute;top:50%;left:5px;display:block;margin-top:-10px;width:16px;height:16px;border:2px solid #bbb;border-radius:10px;content:''}.ckbox:after{-webkit-transition:border-color .2s linear;transition:border-color .2s linear;position:absolute;top:50%;left:5px;display:block;margin-top:-10px;width:16px;height:16px;border:2px solid #bbb;content:''}.radio:before{-webkit-transition:opacity .2s linear;transition:opacity .2s linear;position:absolute;top:50%;left:10px;display:block;margin-top:-5px;width:10px;height:10px;border-radius:50%;background-color:#ff3802;content:'';opacity:0}input[type=radio]:checked + .radio:before{opacity:1}.ckbox:before{-webkit-transition:opacity .2s linear;transition:opacity .2s linear;position:absolute;top:50%;left:11px;display:block;margin-top:-7px;width:5px;height:9px;border-right:3px solid #ff3802;border-bottom:3px solid #ff3802;content:'';opacity:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}input[type=checkbox]:checked + .ckbox:before{opacity:1}*/
select{background:#fff;border:none}
#form dl dd ul li{display:inline-block}
@media screen and (min-width: 961px), print {
#formHd,#form form{width:700px;margin:0 auto}
#form{padding:0 0 60px}
#form dl dt,#form dl dd{font-size:16px}
#form dl dt{padding:15px 30px 0 30px}
#form dl dd{padding:12px 30px 12px}
#form dl input[type="text"],#form dl input[type="email"],#form dl textarea{padding:8px 20px}
#form dl input[type="text"],#form dl input[type="email"]{width:100%}
#form dl dd textarea{width:100%;height:130px}
#form select{width:100%;padding:8px}
.require{font-size:12px;padding:1px 8px;margin:0 0 0 20px}
/*input[type="file"],.file{background:#a4a4a4;color:#fff}*/
#confirm-button{padding:30px}
#confirm-button input[type="submit"].back{font-size:20px;width:200px;padding:10px;margin-top:20px}

#confirm-button input[type="submit"].finish{font-size:20px;width:300px;padding:10px}
input[type="file"],input[type="submit"],.file{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px}
input[type="submit"]{font-size:26px}
.file{padding:8px 30px;margin:0 auto;display:block;width:200px;cursor:pointer;text-align:center}
.file:hover{opacity:0.8}
.file input{display:none}
}

#form.confirm dl dd{border-bottom:1px solid #ccc}
@media screen and (max-width: 960px) {
#formHd{margin:0 0 10px;padding:10px;font-size:13px}
#form{margin:0 auto 20px}
#form dl dt,#form dl dd{font-size:13px}
#form dl dt{padding:10px 10px 0}
#form dl dd{padding:5px 10px 10px}
#form dl input[type="text"],#form dl input[type="email"],#form dl textarea{padding:8px}
#form dl input[type="text"],#form dl input[type="email"]{width:99%}
#form dl dd textarea{width:99%;height:120px}
#form select{width:100%;padding:8px}
.require{font-size:10px;padding:1px 5px;margin:0 0 0 10px}
#confirm-button{padding:10px}
/*input[type="file"],.file{background:#a4a4a4;color:#fff}*/
#confirm-button input[type="submit"].back{font-size:16px;width:160px;padding:10px;margin-top:10px}

#confirm-button input[type="submit"].finish{font-size:16px;width:200px;padding:10px}
input[type="file"],input[type="submit"],.file{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px}
input[type="submit"]{font-size:26px}
.file{padding:8px 30px;margin:0 auto;display:block;width:200px;cursor:pointer;text-align:center}
.file:hover{opacity:0.8}
.file input{display:none}
}