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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0; }
  
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 7px;
    padding-left: 7px;
}

body { min-width: auto; color: #111; background: #FFF ; font-weight: 400; font-size: 15px; }
body { 
  font-family: 'M PLUS 1', sans-serif; font-weight: 400;
  font-size: 15px; background: #FFF ; }

a { color: #111 ;}
a:hover { text-decoration: none }

h1, h2, h3, h4, h5, h6 { font-family: 'M PLUS 1', sans-serif; font-weight: 800; }

.font-weight-bold { font-size: 110% }
.container { max-width: 1190px; }
.container-fluid { padding: 0; }

.mgb30 { margin-bottom: 30px }


.pcNo { display: none ; }

.fa, .fas, .far, .fal, .fab { display: inline-block; width: 15px ; margin-right: 3px; text-align: center;}
.fa-arrow-right { margin-left: 5px; margin-right: 0 ; font-weight: 700 !important;}

.backPage { margin-top: 35px; text-align: center; }

.button{ display: block; max-width: 600px; width: 80% ; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:2px solid #222 ; color: #111 ; border-radius: 3px ; margin: 35px auto 0; }
button.blue,.button.blue {  background-color: #70a6ff; color: #111 !important; }
button.green,.button.green {  background-color: #77cc34; color: #111 !important; }
button.red,.button.red {  background-color: #ff7734; color: #111 !important; }
button.pink,.button.pink {  background-color: #ff34d3; color: #111 !important; }

span.blue { color: #70a6ff !important; }
span.green {  color: #77cc34 !important; }
span.red { color: #ff7734 !important; }
span.pink { color: #ff34d3 !important; }

header { background-color: #ffd700; text-align: center ; border-bottom: 2px solid #000 ; display: flex; padding: 0 0; height: 77px;	position: fixed; justify-content: space-between; color: #fff ;	transition: .5s; width: 100%; z-index: 1000; }
 
header .nav-fill { max-width: 250px; }
header .nav-fill a { color: #ffffff; }
header .nav-fill li:hover a { color: #03133a; }
.navbar-expand-md .navbar-nav .nav-link { color: #111; font-size: 88% ; font-weight: 700 ; line-height: 52px; padding: 0 0.7rem; letter-spacing: -0.7px;  }
.navbar-expand-md .navbar-nav .nav-link i{ font-size: 120% ; margin-right: 4px;}
.navbar-expand-md .navbar-nav .nav-link span{ display: block ; font-weight: 500 ;font-size: 90% ;  }
  
.navbar {  padding: 0 ; } 
.site-header.transform{ background: rgba(255,255,255,0.9); color: #111 ; }
.nav-search { display: none;  max-width: 600px;  width: 100%;  margin: 10px 0;  padding: 10px;  height: auto; }

.toggle-search { margin-top: 12px; cursor: pointer; }
header .bar1, header .bar2, header .bar3 {width: 25px;height: 2px;background-color: #111;margin: 5px 0;transition: 0.4s;display: block; position: relative; }

header .change .bar1 {
-webkit-transform: rotate(-42deg) translate(-2px, 6px);
transform: rotate(-42deg) translate(-2px, 6px); }

header .change .bar2 { opacity: 0; }

header .change .bar3 {
-webkit-transform: rotate(46deg) translate(-4px, -8px);
transform: rotate(46deg) translate(-4px, -8px); }

header .tora { width: 100%; height: 3px; position: absolute; bottom: 0; }
.tora { width: 100%; background: url("../images/shop/toraLine.png") ; }

.headerPhone, .footerPhone { display: none ; }
.footerTelop { width: 100% ; overflow: hidden; white-space: nowrap }
.slide-header { margin-top: 66px; }
.slide-header div{ position: relative; }
.slide-header img#ANMA{ width: 50% ; position: absolute ; left: 8%; z-index: 110 ; }
.slide-header img.bg{ width: 100% ; z-index: 100 ; }

.site-logo { width: 100px; position: absolute; top: 5px; left: 10px ; text-align: left ;}
.site-logo img{ width: 100% ; }

h3 { font-size:150%; font-weight: 900; }
h4 { font-size: 120%; font-weight: 800; margin-bottom: 20px; }

h2.pageTitle { height: 50px; text-align: center ; background: #000; position: relative; display: inline-block ; }
h2.pageTitle i{ color: #fff ; font-size: 50% ; }
h2.pageTitle span{  padding: 0 10px; color: #FFF ; font-size: 75% ;font-weight: 900 ;  line-height: 50px; }

h2.title { background: #2ea7e0;  padding: 0 10px; font-weight: 900 ; color: #FFF ; font-size: 130% ; line-height: 150% ; margin-bottom: 35px; }

.titleWide { margin-bottom: 10px; border-bottom: 5px solid #000 ; }
h3.title { margin: 0 auto; height: 45px; display: inline-block; padding: 0 10px ; position: relative; background: #000; color: #ff4900 ; font-weight: 900 ; }
h3.title i{ color: #fff ; font-size: 50% ; }

h3.title span{  padding: 0 10px; color: #FFF ; font-size: 90% ;font-weight: 900 ;  line-height: 50px; }
.titleWide h3.title::before { background: none ; }

h4.title { background: #111; color: #FFF; padding: 5px 10px; }

#profBox { position: relative; text-align: left; }
#profBox .name {  color: #4fbafe;  font-size: 22px;  font-weight: bold;  line-height: 33px;}
#profBox .name img { height: 25px; margin-left: 5px; }
#profBox .age { font-size: 20px; color: #ff3a8e ; }
#profBox .size { font-size: 15px; font-weight: bold; }
#profBox .icon img {width: 160px; }
#profBox .comment { line-height: 1.3 ; padding: 0 15px 15px; font-size: 14px;}

.girlSlider { width: 100%; overflow: hidden; padding: 0 10px 30px; }
.girlSlider div.cell {   width: 60%;  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell; }
.girlSlider div.cell img{ width: 100%; opacity: 1 ; border-radius: 7px }
.is-selected img{ opacity: 1}
.flickity-page-dots { bottom: 10px;}
.table_AT { width: 98%;}
.table_AT th{ width:50% ; text-align:center; color: #FFFFFF; background: #e63b31 ;line-height: 26px; font-size: 14px; border: 3px solid #FFFFFF; vertical-align: middle; }
.table_AT td{ width:50%; text-align:center; vertical-align: middle;line-height: 26px; font-size: 14px; }
.table_AT td.seiri {color: #ff3c00}

/* position dots in carousel */
.flickity-page-dots {  bottom: 10px !important ;}
/* white circles */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid #ff3f95;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: #ff3f95;
}

/*.flickity-prev-next-button.previous { width: 40px; height: 509px; background: url(../images/shop/photoArrowL.png) no-repeat center top;border-radius: 0; position: absolute; top: 255px;  left:0; }
.flickity-prev-next-button.next { width: 40px; height: 509px; background: url(../images/shop/photoArrowR.png) no-repeat center top;; border-radius: 0; position: absolute; top: 255px;right:0; }*/
.flickity-prev-next-button svg { display: none; }

#blogInfo table th { overflow-x:  hidden;}
#blogInfo table th img { width: auto ; max-height: 150px; }
#blogInfo table td p.content {	height: 70px;	overflow: hidden;}
#blogInfoLoader table th img { border: none !important; box-shadow: none !important; }
#blogInfoLoader table th { padding: 5px 5px 5px 0 !important ;}
#blogInfoLoader table td { padding: 5px 0 !important;}

#twitter { border: 2px solid #000 ; margin-bottom: 10px; }
.twitterTitle { padding: 5px 40px 0; background: #000 ; }
.twitterTitle img{ width: 100% ;}
.sideBnn img { width: 100% ; margin-bottom: 10px;border: 2px solid #000 ; } 

.owl-item a { color: #111 ; }
span.pickTitle { font-weight: 900; font-size: 130% ; padding: 5px 5px 10px 10px;  background: #000; color: #ff4900 ; position: absolute ; top: 0 ; right: 0 ; }
h3.pickTitle { display: none ; text-align: center; margin-bottom: 10px;}

.contact a.btn { width: 255px; color: #FFF ; }
.contact a.btn:hover { background: #f7f7f7; color: #FFF ; }


.footerTelop { background: #fff100 ; font-size: 100% ; font-weight: 700 ; border-top: 3px solid #000 ; padding: 0 0  ; }
.footerTelop p{ padding: 5px 0  ; }
.footerTelop .tora{ height: 3px; }

@keyframes hscroll {
	0% { transform:translateX(0); }
	100% { transform:translateX(-100%); }
}
.telopIn {
	display:inline-block;
	margin:0;
	padding:0;
	animation:hscroll 40s linear infinite;
}

footer { width: 100%; height: 40px; position: fixed; z-index: 500; bottom: 0 ; left: 0; background: #000 ; color: #FFF }
footer a{ color: #FFF }

footer .copyright { text-align: center; font-weight: 500 ; line-height: 40px; }

.page-title { width: 100% ; max-width: 240px; margin-top: 70px ; margin-bottom: 10px }
#contactBox { color: #333 ; font-size: 16px; padding: 25px 25px;}
.inputSS { width: 140px; margin-right: 10px; }
#contactBox th { width: 430px; font-weight: normal ; padding: 10px 15px;
}

a.pageTop {  box-sizing: border-box;  display: block;  position: relative;  width: 40px;  height: 40px;  border: solid 3px #000;  border-radius: 50%;  box-shadow: 0 3px 10px rgb(0 0 0 / 16%); position: fixed ; bottom: 50px ; right: 15px; 
}

a.pageTop:after {  content: "";  display: block;  position: absolute;  top: 50%;  left: 50%;  width: 50px;  height: 50px;  background-color: #000;  border-radius: 50%;  transform: translate(-50%, -50%) scale(0, 0);  transition: transform ease 0.4s;}

a.pageTop:hover:after {  transform: translate(-50%, -50%) scale(1.1, 1.1);}

a.pageTop:before {  content: "";  position: absolute;  z-index: 10;  top: 57%;  left: 50%;  width: 15px;  height: 15px; border-style: solid;
  border-color: #000;  border-width: 3px 0 0 3px;  transform: translate(-50%, -50%) rotate(45deg);  transition: border-color ease 0.1s;}

a.pageTop:hover:before {  border-color: #fff;}

.pageBox { padding: 62px 0 80px; }
.pageBox .err { border-radius: 10px ; background: #FF2828 ; font-weight: 800 ; color: #FFF ; padding: 5px 10px; }
.pageBox h3 { text-align: center ; color: #FFF ; background: #111; font-size: 110%; font-weight: 600 ; margin-bottom: 35px; }
.pageBox h3.result { color: #111 ; }

.function { text-align: center; margin-bottom: 35px;}
.function a { display: inline-block; text-align: center; padding: 10px 15px; margin: 0 15px; font-weight: 700; letter-spacing: -1px; font-size: 90%; border-bottom: 2px solid #111; background: #f0f0f0; border-radius: 10px ;}

.contentBox { margin: 0 auto; padding-top: 35px; }
.content { margin-top: 35px; padding: 0 35px;}
#seachResult { text-align: center; margin-top: 35px; }
#ONLINE_LOGO { width: 250px; margin: 35px 0 15px;}
.memberBox { padding: 25px 0 55px;}
.loginBox { max-width: 900px; border: 1px solid #cdcdcd; background: #F5F5F5 ; margin: 0 auto 15px; padding: 25px; border-radius: 5px;}
.loginBox h3 { margin-bottom: 15px;}
.loginBox h3 i{ display: inline-block; margin-right: 5px; }
.accountBox { max-width: 700px; margin: 0 auto; }
.searchBox { max-width: 700px; margin: 0 auto; }
.contactBox { max-width: 700px; margin: 0 auto; }

.info { text-align: center; color: #555;}
.info a{ text-decoration: underline;}
.point { text-align: center; font-weight: 700; color: #111;}

#contactLogBox  { max-width: 800px; margin: 0 auto; padding: 2%; border-radius: 5px; margin-top: 35px; over-flow: hidden}
#contactLogBox .contact { margin-bottom: 15px; }
#contactLogBox .contact > div {  position: relative; background: #fde5e5; border-radius: 10px; padding: 7px 12px; margin-left: 55px; }

#contactLogBox .contact > div.shop { word-wrap: break-word; margin-left: 0; background: #f2f3f7 ; padding-left: 40px; margin-right: 55px ; }
#contactLogBox .contact > div.shop img{ width: auto; max-width: 100%;}

#contactLogBox .contact > div.shop::before { content: ""; display: inline-block; width: 30px; height: 30px; background-image: url('../images/chatIcon.png');    background-position: center; background-size: contain; position: absolute; left: 3px; top: 7px;}

#contactLogBox .reply { color: #00aced; font-size: 80%; display: block ; text-align: left ;}
#contactLogBox .to { color: #ff3c00; font-size: 80%; display: block ; text-align: left ;}
#contactLogBox .time { color: #cdcdcd; font-size: 80%; }

.weekList { width: 100%; list-style: none; text-align: center; margin-bottom: 10px; }
.weekList li { width:110px; color: #222222 ; font-size: 11px;  margin: 0 1px 4px; display: inline-block;}
.weekList li a{ color: #222222 ;line-height :25px;  font-weight: bold; background: #ffd200 ; border-radius: 5px ; display: block; border: 2px #222222 solid }
.weekList li.act a{ color:#FFFFFF ; background: #00aced ; border-radius: 5px ; display: block; border: 2px #222222 solid ; border-bottom: 4px #222222 solid ; text-decoration: none;  box-sizing: border-box; }

.accesssBox { list-style: none;}
.accesssBox li{ padding: 5px 10px ; font-size: 110%; background: #00aced; color: #FFF; margin: 6px 3px; border-radius: 10px; display: inline-block;}
.accesssBox li a { color: #FFF ;}

.shopBox .row > div { padding: 0 25px 25px; }
.shopBox .row > div h4{ font-size: 90%; color: #FFF; padding: 5px 10px; font-weight: 500; background-color: #00aced; border-left: 10px solid #15bdfa; }
.shopBox .row > div h4.gakuen{ background-color: #ff72d3; border-left: 10px solid #ff89da; }
.shopBox .row > div h4.otona{ background-color: #111; color: #FFF; border-left: 10px solid #444; }

.shopBox .row > div table{ width: 100%; }
.shopBox .row > div table th { width: 150px;}
.shopBox .row > div table th, .shopBox .row > div table td { padding: 5px; vertical-align: top; }
.shopBox .row > div table th i { display: inline-block; margin-right: 5px;}
.shopBox .row > div a span{ display: inline-block; background: #ffd200 ; padding: 3px 10px; border-radius: 5px; font-size: 90%; }

.shopSelect{ list-style: none; width: 100%; text-align: center; margin-bottom: 35px; border-radius: 10px; overflow: hidden; }
.shopSelect li{ width: 10%; display: inline-block ; padding: 10px 5px ; }
.shopSelect li a{ width: 100%; display: block ; padding: 7px 5px ; font-weight: 700 ; letter-spacing: -1px ; font-size: 90%; border-bottom: 2px solid #111; background: #f0f0f0;  border-radius: 10px;}
.shopSelect li.act a{ background: #70a6ff; border-radius: 0;}

.freeBox { text-align: center; margin-bottom: 35px;}
button.RESERVE_FREE{ display: block ; padding: 5px 55px ; font-weight: 700 ; letter-spacing: -1px ; font-size: 90%; border-bottom: 2px solid #111; background: #ff34d3;  border-radius: 10px; margin: 0 auto; color: #FFF;}
button.RESERVE_FREE i { display: inline-block; margin-right: 5px;}
#typeExp { margin: 0 35px; padding: 10px; font-size: 14px; text-align: left; border : 1px #888888 solid ; border-radius: 5px;}
#typeExpAll { margin: 0 95px; padding: 10px; font-size: 14px; text-align: left; border : 1px #888888 solid ; border-radius: 5px;}
#typeExp .op,#typeExpAll .op{ background: #00aced ; color: #ffffff ; padding: 10px; margin: 10px 0}

.modalPreview { display: none; padding-top: 40px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background-color: #FFF; font-size: 95%; border-radius: 5px ; overflow-y: auto; border: 1px solid #f0f0f0; z-index: 2000; }
.modalReserve { display: none; padding-top: 40px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background-color: #FFF; font-size: 95%; border-radius: 5px ; overflow-y: auto; border: 1px solid #222; z-index: 2000; }

.modalWindowIn .photoBox { margin-bottom: 15px;}
.modalWindowIn .photoBox li { width: 33.333% ; padding: 0 0.5% ; display: inline-block; }
.modalWindowIn .photoBox li img{ width: 100%   ; }
.buttonClose { width: auto ; position: absolute ;  top: 5px; right: 7px; font-size: 80% ; color: #222; line-height: 120%;  border-radius: 8px;  cursor: pointer; font-size: 160%;}
#modalOverlay { width: 100%; height: 100vh; display: none; position: fixed; top: 0; left: 0;   z-index: 1500;}


.weekListTable {}
.weekListTable a { text-decoration: none;}
.weekListTable a table { color: #222222; }
.weekListTable .gBox { text-align: left; position: relative; margin-bottom: 35px; }
.weekListTable .gBox > div { display: flex; flex-direction: row ; }
.weekListTable .gBox p { padding: 5px 10px; }
.weekListTable .gBox p.name{ font-size: 17px ; color: #0C93EC; font-weight: bold; padding-bottom: 0; }
.weekListTable .gBox p.name .age{ font-size: 14px; font-weight: normal; }
.weekListTable .gBox .kutikomi {
    display: inline-block;
    margin-left: 5px;
    background: #FFF;
    border: 1px solid #111;
    border-radius: 5px;
    color: #111;
    font-size: 10px;
    padding: 3px 5px;
}

.weekListTable .gBox .size { padding-bottom: 5px; font-size: 14px; color: #222222; }
.weekListTable .gBox .count { font-size: 14px; color: #ff00bb ; }
.weekListTable .gBox p.type { font-size: 14px; color: #0096ff ; }
.weekListTable .gBox .op { color: #ff3c00; }
.weekListTable .gBox p.status img{ width: 40% ; max-width: 150px; margin-right: 5px; }
.weekListTable .iconBoxL { height: 45px; position: absolute ; top: -2px; right: 12px ; overflow: hidden; text-align: right; }
.weekListTable .iconBoxL img { width: 40px; height: 40px;}
.weekListTable .gBox p.status { padding-top: 0; }
.weekListTable .gBox p.comment { font-size: 13px; padding: 5px 10px}
.weekListTable .gBox ul {  padding: 0 10px; }
.weekListTable .gBox .shop li { display: inline-block; margin-right: 3px; margin-bottom: 2px; background: #efefef; padding: 2px 5px;    border-radius: 3px; font-size: 12px;}

.weekListTable .gBox .image{ width: 170px;}
.weekListTable .gBox .image span{ display: block; width: 100%; }
.weekListTable .gBox .image img{ width: 100%;}
.weekListTable .iconBox { height: 25px; position: absolute ; top: 165px; left: 10px ; }
.weekListTable .iconBox img{ width: 25px; }
.weekListTable .gBox img.status { width: 100px; margin-top: 3px; }
.weekListTable .gBox img.iconBlog { height: 22px; margin-left: 5px;}
.weekListTable .attend table { width: 100% ;}
.weekListTable table tr th{ text-align: center; font-size: 13px; padding: 3px; border: 1px solid #f0f0f0; }
.weekListTable table tr td{ text-align: center;height: 69px;  font-size: 13px; padding: 3px; border: 1px solid #f0f0f0; }
.weekListTable table tr td.soku{ background: #ffd200 ; }
.weekListTable table tr td span.soku{ display: inline-block; border-radius: 5px ; background: #ff2727 ; padding: 0 5px;  margin-left: 5px; color: #FFF ;}
.weekListTable .gBox td.syukkin { width: 50%; text-align: center; background: #efefef ; font-size: 13px; vertical-align: top; }
.weekListTable .gBox td.syukkin .next{ display: inline-block; background: #00aced; border-radius: 5px ; color: #FFF ; padding: 3px 7px; font-weight: 600; font-size: 85% ;}
.weekListTable .gBox .seiri {color: #ff3c00; }
ul.func { padding: 0 10px ; margin-top: 5px ;}
ul.func li { width: 50%; padding: 3px; display: inline-block ; }
ul.func li span { width: 100%; display: block; text-align: center; color: #111 !important; cursor: pointer; border: 1px solid #222; padding: 5px; font-size: 80%; }
ul.func li span i{ display: inline-block; margin-right: 5px; }
ul.func li span.RESERVE { background-color: #70a6ff; }
.func li span.FAVORITE_DEL{ background-color: #ff7734; }
.func li span.RESERVE + div{ width: 100%; display: none;}
.func li span.FAVORITE{ background-color: #ff34d3; }
.func li span.FAVORITE + div{ width: 100%; display: none;}
.func li span.FAVORITE_DEL + div{ width: 100%; display: none;}
.func li span.DETAIL { background-color: #77cc34; } 

.weekListTable button.confirm, .weekListTable button.time { font-size: 90%; display: block; width: 100% ; background-color: transparent; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:1px solid #222 ; background-color: #70a6ff; color: #111 ;  border-radius: 3px ; margin: 0 ; }

.weekListTable button.time { background-color: #70a6ff; } 

.faqBox { }
.faqBox .faq{ padding: 0 0 10px ; margin-bottom: 20px; border-bottom: 1px solid #ffdada; }
.faqBox p{ padding: 0 15px ; }
.faq span{ display: inline-block; font-weight: 600 ; margin-bottom: 10px; border-bottom: 1px solid #111111; }


@media (max-width: 1220px) {

}
.site-phone { font-size: 130% ; border-left:  1px solid #000 ; padding-right: 5px; padding-left: 10px; margin-left: 10px; line-height: 103%; font-weight: 800 ; text-align: left}
.site-phone a.nav-link {  font-weight: 900 ; letter-spacing: 0.5px; }
.site-phone span{ font-size: 100% !important ; line-height: 103%; font-weight: 900 !important}

.navbar { position: absolute; top: 11px ; right: 5px }

@media (max-width: 767px) {
.navbar-collapse { width: 170px; background: rgba(255,255,255,1); border: 1px solid #FFF ; padding: 10px 20px;
}
}

.owl-system .owl-nav { width: 100% ; color: #111 ; font-size: 35px;  position: absolute ; top: 38% ; z-index: 100 }
.owl-system .owl-prev { line-height: 30px; position: absolute ; left: 5px; }
.owl-system .owl-next { line-height: 30px;position: absolute ; right: 5px; }
 
.errorBox .error { text-align: center; color: #FF2828 ; margin-bottom: 25px;}
.changeBox { text-align: center; color: #FF2828 ; margin-bottom: 25px;}
label.error { width: 100%; color: #FF2828; font-size: 90% ; padding-left: 10px; line-height: 30px;}

.incompleteBox { border-radius: 8px ; background: #b2ff82; padding: 15px; margin: 25px 5%;}

.confirmBox { border-radius: 8px ; background: #eff7ff; padding: 15px; margin: 25px 5%;}
.confirmBox .shopTel { text-align: right;}
.confirmBox .shopTel a{ display: inline-block; background: #70a6ff; font-size: 90% ; color: #FFF; padding: 5px 10px; border-radius: 8px; }

.selectedBox { border-radius: 8px ; font-size: 90%; background: #eff7ff; padding: 15px; margin: 25px 5%;}
.selectedBox span{ font-size: 80%;}
.selectedBox li{ display: inline-block ; padding-right: 15px;}


.accountInfo { margin-left:30%; margin-bottom: 35px; font-weight: 600; font-size: 90%;}
.accountInfo i{ width: 20px; text-align: center; display: inline-block;}
.accountInfo table { width: 100%;}
.accountInfo th { width: 155px; border-bottom: 1px solid #f0f0f0; padding: 5px; vertical-align: top;}
.accountInfo td { border-bottom: 1px solid #f0f0f0; padding: 5px;}

.accountInfo td span.cancel{ color: #999; font-size: 80%;}

.accountInfo td span.date{ color: #5555; font-size: 80%;}
.accountButton button{ margin-bottom: 10px; }
#timeBox { padding: 15px 15px;}
#timeBox .available{ font-weight: bold; margin: 25px 0;}
.weekListTable .modalWindowIn #timeBox button.confirm { margin-top: 25px ; font-size: 100%; display: none;}

#timeCheck { margin-top: 25px;}

.historyInfo { font-size: 80%; text-align: center ; margin-bottom: 25px;}
.history { margin-left:30%; font-size: 90%; margin-right: 30%; margin-bottom: 35px; font-weight: 600;}

.history h5.cancel { text-align: center; color: #ff7734; font-weight: 700;}
.history h5.cancel span{ color: #ff7734; font-weight: 700;}
.history h5.cancel span i{ display: inline-block ;margin-right: 5px;}

.history h5.temporary { text-align: center; color: #ff7734; font-weight: 700;}

.history h5.temporary span{ color: #70a6ff; font-weight: 700;}
.history h5.temporary span i{ display: inline-block ;margin-right: 5px;}
.history table.temporary { opacity: 0.6;}

.history table.cancel { opacity: 0.3;}
.history i{ width: 20px; text-align: center; display: inline-block;}
.history table { width: 100%; margin-bottom: 5px;}
.history .func { padding-bottom: 10px;  border-bottom: 1px solid #111 ; margin-bottom: 25px;}
.history th { width: 120px; border-bottom: 1px solid #f0f0f0; padding: 5px;}
.history td { border-bottom: 1px solid #f0f0f0; padding: 5px;}
.history td a{ color: #70a6ff ;}
.history td span.today{ display: inline-block; margin-left: 5px; border-radius: 5px; font-size: 80%; color: #FFF;padding: 0 3px ; background-color: #70a6ff; }
.history td span.tommorrow{ display: inline-block; margin-left: 5px; border-radius: 5px; font-size: 80%; color: #FFF;padding: 0 3px ; background-color: #ff7734; }
.history tr.addDate th,.history tr.addDate td{ font-size: 90%; color: #555;}
.kariExp { font-size: 90%; font-weight: normal; color: #111; display: block; text-align: center; margin-bottom: 5px;}

#reserveConfirmTable { width: 60%; margin-left:20%; margin-right: 20%; margin-bottom: 35px; font-weight: 600;}
#reserveConfirmTable i{ width: 20px; text-align: center; display: inline-block;}
#reserveConfirmTable table { width: 100%; margin-bottom: 15px;}
#reserveConfirmTable th { width: 100px; border-bottom: 1px solid #f0f0f0; padding: 5px;}
#reserveConfirmTable td { border-bottom: 1px solid #f0f0f0; padding: 5px;}


#selected { font-size: 80% ; color: #222; text-align: left;; position: fixed ; top: 5px; left: 5px; background-color: rgbs(255,255,255,0.5);}
#selected ul{ display: inline-block; }
#selected ul li{ display: inline-block; padding: 0 10px 0 0 ; }

#reserveGirl { max-width: 320px; margin: auto ; }
#reserveGirl { display: table ; }
#reserveGirl div { display: table-cell; vertical-align: middle ; padding-left: 10px ; line-height: 105%;}
#reserveGirl .photo{ width:40px ; display: table-cell ;}
#reserveGirl .name{ text-align: center; font-weight: 800 ; }
#reserveGirl .size{ font-size: 90% ; font-weight: 600 ; }

.pageBox input[type=text] { width: 100% ; border:1px solid #cccccc ; box-shadow: none; }
.pageBox textarea { width: 100% ; border:1px solid #cccccc ; box-shadow: none; }

.pageBox ul.choose{ list-style: none; text-align: center; padding: 0 ; margin: 0 ; }
.pageBox ul.choose li{ width: 99% ; border-radius: 0 ; display: inline-block; line-height: 100% ; margin: 0 0.5% 10px ; box-sizing: border-box ; }
.pageBox button.buttonRdo, #reserveBox button.buttonChk  { display: block; width: 80% ; background-color: transparent; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:1px solid #222 ; background-color: #efefef;  border-radius: 3px ; margin: 0 auto ; color: #111 ; }

.pageBox button.buttonChkNo  { opacity: 0.3; display: block; width: 80% ; color: #111; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:1px solid #222 ; background-color: #efefef;  border-radius: 3px ; margin: 0 auto; }

.pageBox button.on{ background: #77cc34 ; color: #FFF ; }

.reserveBox { text-align: center;}
.reserveBox span.closeShop{ padding: 5px 10px; font-size: 105%; border: 2px #111 solid; background: #ff7734; color: #FFF; margin-bottom: 10px; }

div.preview { display: none ;}

.modalReserve { margin: 0 auto; padding: 25px 10px ; font-size: 110%; }
.modalReserve h3 { text-align: center ; color: #ff461b ; font-size: 110%; font-weight: 800 ; margin-top: 15px; margin-bottom: 15px; letter-spacing: -1px;}
.modalReserve button.confirm { display: block; width: 100% ; background-color: transparent; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:1px solid #222 ; background-color: #70a6ff; color: #FFF ;  border-radius: 3px ; margin: 0 ; margin-top: 35px; }
.modalReserve input[type=text] { width: 100% ; border:1px solid #efefef ; box-shadow: none; }

#useBox { margin-bottom: 100px; }
#termsBox { display: none; padding-top: 10px; margin: 0 10px 100px; text-align: left;  }
#rule { margin-bottom: 25px;}
#rule h4 { display: block; text-align: center;}
#rule h4 span{    display: inline-block;    font-size: 18px;    padding: 4px 8px 4px;    border: 3px solid #111;    font-weight: bold; }

#rule ul.exp{ list-style:disc; text-align: left; padding: 0 ; margin: 25px 0 ; color: #70a6ff; }
#rule ul.exp li{ width: auto ; border-radius: 0 ; display: block; line-height: 120% ; padding-left: 25px; }
#termsBox div.intro{ font-weight: 700; text-align: center; margin-bottom: 15px;}
#termsBox div.rule{ max-width: 600px; margin: 0 auto 25px; text-align: left; border-radius: 10px; padding: 10px ; border: 5px solid #ed4800;   }
#termsBox h3 { font-size: 22px ; margin-bottom: 15px; }
#termsBox h4 { font-size: 18px ; margin-bottom: 15px; }
#whenBox { display: none; padding-top: 10px ; margin-bottom: 100px ; }
#shopBox { display: none; padding-top: 10px ; margin-bottom: 100px ; }
#whoBox { display: none; padding-top: 10px ; margin-bottom: 100px ; }
#nextBox { display: none; }

#courseSelectBoxM { display: none; }
#courseSelectBox { display: none; }

#startSelectBoxM { display: none; }
#startSelectBox { display: none; }

.selectForm {    display: inline-block;    width: 100%;    padding: 10px 12px;    line-height: 220%;    color: #555555;    vertical-align: middle;    background-color: #ffffff;    border: 1px solid #cccccc;    border-radius: 4px;    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.selectForm option:disabled { color: #cacaca; }

.weekListTable h5 { width: 100%;    color: #111111;    font-size: 18px;    font-weight: bold;    border: 2px #111 solid;    display: inline-block;    padding: 5px 10px;    background: #ffd200;    margin-bottom: 7px; text-align: center; margin: 15px auto;}

.button{ display: block; max-width: 700px; width: 100% ; border: none; line-height: 220% ; cursor: pointer; outline: none; padding: 0; appearance: none; border:1px solid #222 ; color: #111 ; border-radius: 3px ; margin: 0 auto; }
.button.confirm {  background-color: #70a6ff;   }
.freeShopBox button.confirm {  background-color: #70a6ff; margin: 15px auto 0 }
#shopOk { display: none; }

.modalPreview,.modalReserve{ width: 50%; height: 90%; background-color: #FFF; display: none; padding: 35px 10px 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 95%; border-radius: 5px ; overflow-y: auto; border: 1px solid #222; z-index: 2000; }

.modalWindowIn .photoBox { margin-bottom: 15px;}
.modalWindowIn .photoBox li { width: 33.333% ; padding: 0 0.5% ; display: inline-block; }
.modalWindowIn .photoBox li img{ width: 100%   ; }
.buttonClose { width: auto ; position: absolute ;  top: 7px; right: 11px; font-size: 85% ; color: #222; line-height: 120%;  border-radius: 8px;  cursor: pointer; font-size: 160%;}
#modalOverlay { width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0;   z-index: 1500;
}
.buttonBox { text-align: center ;}


div.input { margin-bottom: 25px;}
div.input .error{ color: #FF2828; font-size: 90% ;}
span.forget { color: #111 ; border-bottom: 1px solid #111 ; padding-bottom: 3px; display: inline-block ;}

.g-recaptcha {
    justify-content: center;
    display: flex;
}
p#warning { text-align: center ; font-size: 80%;}

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.input-group-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem 0 0 .25rem;
}
.input-group .form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1% !important;
    margin-bottom: 0;
}

#forumMenu { list-style: none; margin: 10px; text-align: center; }
#forumMenu li { display: inline-block ; padding: 0 15px ; margin-bottom: 25px; }
#forumMenu li a{ color: #111;}

.forumBox { margin: 0 auto; border-radius: 5px; }
.forumBox .forum { border: 1px solid #cdcdcd ; background:#fafafa ; padding: 25px; margin-bottom:25px;  border-radius: 10px ; }
.forumBox .forumForm { max-width: 700px; margin: 55px auto 0;}

.forumBox .forum .title { margin-bottom: 15px; font-size: 90% ; color: #555555; }
.forumBox .forum .title span { color: #111; font-weight: 800; font-size: 120% ;}
.forumBox .forum a { display: block;    width: 100%;    border: none;     line-height: 220%;    cursor: pointer;    outline: none;    padding: 0;    appearance: none; border: 1px solid #222;    border-radius: 3px; text-align: center ;    margin: 35px auto 0; background-color: #70a6ff; color: #FFF !important; }
.forumBox .forum .name { font-size: 90% ; color: #555555; margin-bottom: 25px; }
.forumBox .forum .name .unpretei{ background: #ff461b; color: #FFF; padding: 0 5px; border-radius: 5px; margin-left: 33px; font-size: 120%; display: inline-block; position: relative;}
.forumBox .forum .name .unpretei::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('../images/chatIcon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -33px; top: -5px;
}

.forumBox .comment { max-width: 700px; padding: 25px ; margin: 0 auto 25px; border-bottom: 1px solid #cdcdcd ;}
.forumBox .comment p {padding: 0 15px ; margin-bottom: 15px; }
.forumBox .comment .title { width: 100%; display: block; font-weight: 800; font-size: 120% ;}
.forumBox .comment .name { font-size: 80% ; color: #555555; margin-bottom: 25px; margin-top: 10px; }
.forumBox .comment .name .unpretei{ background: #ff461b; color: #FFF; padding: 0 5px; border-radius: 5px; margin-left: 33px; font-size: 120%; display: inline-block; position: relative;}
.forumBox .comment .name .unpretei::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url('../images/chatIcon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -35px; top: -5px;
}

/* .myForumBox { margin: 0 auto; border-radius: 5px; }
.myForumBox .forum { border: 1px solid #cdcdcd ; background:#fafafa ; padding: 25px; margin-bottom:25px;  border-radius: 10px ; }

.myForumBox .forumForm { margin-top: 55px;}

.myForumBox .forum .title { margin-bottom: 15px; font-size: 90% ; color: #555555; }
.myForumBox .forum .title span { color: #111; font-weight: 800; font-size: 120% ;} */
.forumBox .forum .approval{ display: inline-block; margin-right: 5px;
    padding: 6px 5px;
    line-height: 13px;
    font-size: 70%; color: #ffffff;
    font-weight: 500;
    border-radius: 2px; background: #fc4b6c;
    border: 1px solid #111;
    letter-spacing: -0.5px;
}


@media (max-width: 1520px) {
.pageBox { padding: 50px 0 60px; }

}
@media (max-width: 1299px) {
	.shopInfo::before { width: 0; height: 0; }
	.shopInfo::after { width: 0; height: 0; }
	.pageBox { padding: 30px 0 60px; }
	.navbar-expand-md .navbar-nav .nav-link {
    font-size: 85%;
    font-weight: 700;
    padding: 0.5rem 0.5rem;
    letter-spacing: -0.7px;
}
}
		
@media (max-width: 767px) {
    body { background-size: 50px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 0;
        padding-left: 0;
    }

.navbar-expand-md .navbar-nav .nav-link {
    color: #111; text-align: left; font-size: 15px; font-weight: 600; line-height:normal ;
    padding: 15px 0; letter-spacing: -0.7px;
}
    .pcNo { display: block;} 
    .spNo { display: none !important ; }
    .slide-header { margin-top: 0 ; }
    .content { margin-top: 25px;    padding-bottom: 35px;}
    #typeExpAll {    margin: 0 !important;}

    .menu { display: block; position: relative; font-size: 10px; letter-spacing: -1px; font-weight: 700;    }
    .pageTop { display: none !important ; }
    .mgb30 {    margin-bottom: 10px;}
    header {    height: 50px;}
    .site-logo { width: 100px; position: absolute; top: 0; left: 10px ; text-align: left ;}

    .site-logo { line-height: 100%;}
    .site-logo img { width: 74px; }
    .site-phone { display: none } 
    .font130 {    font-size: 100%;}
    .pageBox { padding: 50px 0 30px; }
        .memberBox { padding: 25px 0 10px; }
        #ONLINE_LOGO { width: 150px; margin: 0 auto 15px;}
    .container { margin-right: auto; margin-left: auto; }
    .font-weight-bold {	font-size: 100%; }
    h4 { font-size: 105%; }
    h3 { margin-bottom: 10px;}


.loginBox { margin: 0 0 15px; padding: 18px;}
.loginBox h3 { font-weight: 700; font-size: 20px;}
.loginBox h3 i{ display: inline-block; margin-right: 5px; font-size: 20px;}
.function a { width: 30%;
    display: inline-block;
    text-align: center;
    padding: 7px 5px;
    margin: 0 5px;
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 75%;
    border-bottom: 2px solid #111;
    background: #f0f0f0;
}

header { height: 0; border: none;}
footer { position: relative;}
.spNavi { width: 80%; margin: 16px 0 0 0; text-align: center; position: fixed; top: 0; right: 0; }
.spNavi li{ width: 16.666%; display: inline-block; font-size: 7px; color: #111; }
.spNavi li i{ width: 100%; display: block; font-size: 25px;}
.menu { color: #111 !important; font-weight: normal; }
.modalPreview,.modalReserve{ width: 90%; height: 90%; }
.site-logo { width: 75px; position: absolute; top: 3px; left: 3px; text-align: left;}.site-logo img { width: 100%; }
.navbar { position: absolute; top: 63px; right: 15px; background: #FFF; border: 1px solid #111;}
.spLeft { text-align: left;}
h4.title { margin-bottom: 10px; }
.content {    margin-top: 35px;    padding: 0 0;}
.contentBox { margin: 0 0; padding: 25px 0; }
.weekListTable { padding: 10px;}
.searchBox {    margin: 0 0;}
.contactBox { margin: 0 auto;}
.forumBox .forum { border: 1px solid #cdcdcd ; background:#f5f5f5 ; padding: 15px;  border-radius: 10px ; margin: 35px auto;}
.forumBox .forum .name { 
    margin-bottom: 15px;
}
.forumBox .comment { padding: 10px ; margin-bottom: 0}
.forumBox .forum a { 
    margin: 15px auto 0; 
}
.forumBox .forum .title span {
    color: #111;
    font-weight: 600;
    font-size: 120%;
}
.forumBox .forum .name .unpretei {
    font-size: 100%;
}
.accountInfo {    margin-left: 0;     font-weight: 600;}
#reserveConfirmTable { width: 100%; margin-left: 0; margin-right: 0; }
.history {    margin-left: 0;     margin-right: 0;    font-weight: 600;}


#profBox h4 {
    text-align: center;
    color: #FFF;
    background: #111;
    font-size: 85%;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.pageBox h3 {
    text-align: center;
    color: #FFF;
    background: #111;
    font-size: 80%; line-height: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.shopSelect li a {
    width: 100%;
    display: block;
    padding: 5px 5px;
    font-weight: 500;
    letter-spacing: -1px;
    font-size: 90%;
    border-bottom: 1px solid #111;
    background: #f0f0f0;
}
#profBox .comment { padding: 0 10px 10px; font-size: 14px;}
.shopSelect li {
    width: 25%; font-size: 90%;
    display: inline-block;
    padding: 3px;
}
.weekListTable table th { width: 100px ; padding: 5px;vertical-align: top;}
.weekListTable table th span { width: 100px ; height: 130px; border-radius: 7px; display: block; overflow: hidden;}
.weekListTable table th img{ width: 100px;}
.weekListTable table tr.date td{ text-align: center; font-size: 80%; }
.weekListTable table td.comment { font-size: 80%; padding: 5px;}
.weekListTable table td.name {    font-size: 15px;}

.weekListTable .gBox p { padding: 3px 10px 0; line-height: 130%; }
.weekListTable .gBox p.name { line-height: 100%; }
.weekListTable .gBox p.size { padding-bottom: 5px ; }
.weekListTable .gBox p.comment { padding-top: 0 !important ; }
.weekListTable .gBox p.status { padding-top: 0 !important ; }

.weekListTable .iconBox {top: 150px; }

}