@charset "UTF-8";

@import url("../css/common/flag.css");

body {

  min-width: 320px;

}



.br {

  display: block;

}



/*----------------------------------------------

    min-width: 768px;

----------------------------------------------*/



@media screen and (min-width: 768px) {

  .pc_br {

    display: block;

  }

}



/*----------------------------------------------

    max-width: 767px;

----------------------------------------------*/



@media screen and (max-width: 767px) {

  .sp_br {

    display: block;

  }

}



/*  タッチデバイスのフォントサイズ

------------------------------------------------------------------------------ */

/* 画面サイズ767px以下かつタッチデバイスのとき */

@media screen and (max-width: 767px) {

  .ua_touch {

    font-size: 56.25%; /* 9px */

    /* font-size: 53.125%; */ /* 8.5px */

    /* font-size: 50%; */ /* 8px */

  }

}











/*  ローディング

------------------------------------------------------------------------------ */

#loading {

  display: block;

  position: fixed;

  z-index: 100;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #f8f6f7;

}













/*  flex(共通)

------------------------------------------------------------------------------ */

/* 左から */

.flex_left {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display:         flex;



  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

  -ms-flex-pack: start;

          justify-content: flex-start;

}



/* 両端 */

.flex_bet {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display:         flex;



  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

          justify-content: space-between;

}



/* 中央寄せ */

.flex_center {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display:         flex;



  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -ms-flex-pack: center;

          justify-content: center;

}





/* Android4以下のとき用 */

.and4 .flex_left,

.and4 .flex_bet,

.and4 .flex_center {

  display: block;

  overflow: hidden;

}

















/*  マウスオーバーで画像拡大(.scale付ける要素に幅高さ必要)

------------------------------------------------------------------------------ */

html:not(.ua_touch) .scale {

  overflow: hidden;

  background: #000;

}



html:not(.ua_touch) .scale img {

  -webkit-transition:         transform .2s ease-in-out;

  -webkit-transition: -webkit-transform .2s ease-in-out;

          transition: -webkit-transform .2s ease-in-out;

          transition:         transform .2s ease-in-out;

          transition:         transform .2s ease-in-out, -webkit-transform .2s ease-in-out;

  -webkit-transform: scale(1);

      -ms-transform: scale(1);

          transform: scale(1);

}



html:not(.ua_touch) .scale img:hover {

  -webkit-transform: scale(1.1);

      -ms-transform: scale(1.1);

          transform: scale(1.1);

}











/*  ホバーでポップするやつ(.popつける)

------------------------------------------------------------------------------ */

@-webkit-keyframes pop {

  50% {

    -webkit-transform: scale(1.2);

            transform: scale(1.2);

  }

}



.pop:hover {

  -webkit-animation-name: pop;

          animation-name: pop;

  -webkit-animation-duration: .2s;

          animation-duration: .2s;

  -webkit-animation-timing-function: linear;

          animation-timing-function: linear;

  -webkit-animation-iteration-count: 1;

          animation-iteration-count: 1;

}













/*  エリアリンクナビ

------------------------------------------------------------------------------ */

#gnav_wrap {

  position: fixed;

  z-index: 70;

  top: 0;

  left: 0;

  width: 100%;

  height: 2.8rem;

  background: #000;

}



/* グループロゴ */

#gnav_logo {

  position: absolute;

  top: 0;

  left: 1rem;

}



#gnav_logo a {

  display: inline-block;

  width: 2.8rem;

  height: 2.8rem;

  background: url(../yes_img-area/common/yesgrp.png);

  background-size: cover;

}



#gnav_area {

  position: absolute;

  left: 4rem;

}



#gnav_area > li {

  position: relative;

  float: left;

  padding: .8rem 0;

  color: #fff;

  font-size: 1.2rem;

  line-height: 1;

}



#gnav_area > li > a {

  padding: 0 .7em;

  border-left: 1px solid #fff;

}



#gnav_area > li:first-child > a {

  border-left: 0;

}



#gnav_area > li > ul {

  display: none; /* 最初読み込み時に出ないようにするためCSSで */

  position: absolute;

  z-index: 7; /* スライダーより上にくるように */

  top: 2.8rem;

  width: 14em;

  padding: .5em;

  background: rgba(238,238,238,.92);

}



#gnav_area > li > ul a {

  display: block;

  z-index: 11;

  padding: .5em;

  color: #222;

  font-size: 1.2rem;

  -webkit-transition: all .2s; /* font-weightに効かせたい */

          transition: all .2s;

}



html:not(.ua_touch) #gnav_area > li > ul a:hover {

  background: #bbb;

  color: #fff;

  font-weight: bold;

}













/*  左のメニューの中身

------------------------------------------------------------------------------ */

/* 1000px以下は非表示 */

#lnav_wrap {

  display: none;

}



/* 男子女子求人 */

#recruit {

  padding: 1rem;

}



#recruit .girl a,

#recruit .men a {

  display: block;

  margin: 1rem 0;

  padding: 1rem 0;

  color: #fff;

  font-size: 1.4rem;

  text-align: center;

}



#recruit .girl a span,

#recruit .men a span {

  display: block;

  margin-top: .2em;

  font-size: 2.2rem;

  font-weight: bold;

}



#recruit .girl a {

  border: 3px solid #fb4782;

  background-color: rgba(184,71,117,.4);

}



#recruit .men a {

  border: 3px solid #02a8ed;

  background-color: rgba(6,74,137,.4);

}



#recruit .button {

  display: inline-block;

  overflow: hidden;

  position: relative;

  padding: .75em 2em;

  font-size: 24px;

  text-decoration: none;

  text-align: center;

  -webkit-transition: all .2s ease-in-out;

          transition: all .2s ease-in-out;

}



#recruit .button:before {

  display: block;

  position: absolute;

  top: 0;

  left: -6.5em;

  width: 3em;

  height: 100%;

  background-color: rgba(255,255,255,.5);

  content: "";

  -webkit-transition: none;

          transition: none;

  -webkit-transform: skewX(-45deg) translateX(0);

      -ms-transform: skewX(-45deg) translateX(0);

          transform: skewX(-45deg) translateX(0);

}



#recruit .button:hover {

  border-bottom: 4px solid darken($color, 10%);

  color: #fff;

}



#recruit .button:hover:before {

  -webkit-transition: all .5s ease-in-out;

          transition: all .5s ease-in-out;

  -webkit-transform: skewX(-45deg) translateX(22.5em);

      -ms-transform: skewX(-45deg) translateX(22.5em);

          transform: skewX(-45deg) translateX(22.5em);

}



#recruit .button_p:hover {

  background-color: #fb4782;

}

#recruit .button_b:hover {

  background-color: #02a8ed;

}





@media screen and (min-width: 1001px) {

  #lnav_wrap {

    display: block;

    position: absolute;

    z-index: 12;

    left: -166px;

    width: 206px;

    height: 200%;

    background: #000;

    -webkit-transition: left .2s;

            transition: left .2s;

  }



  #lnav_wrap.on {

    left: 40px;

  }



  #lnav_wrap .area_logo_big {

    display: none;

  }



  #lnav_wrap ul {

    border-top: 1px solid #666;

  }



  #lnav_wrap ul li {

    border-bottom: 1px solid #666;

  }



  #lnav_wrap ul li a {

    display: block;

    padding: 2rem;

    color: #fff;

    font-size: 1.6rem;

  }

}



@media screen and (min-width: 1400px) {

  #lnav_wrap,

  #lnav_wrap.on {

    left: 0;

  }



  #lnav_wrap .area_logo_big {

    display: block;

    padding: 2rem 1rem;

  }

}













/*  ヘッダースマホ表示のときのハンバーガーと検索アイコン

------------------------------------------------------------------------------ */

#ham_btn,

#search_btn {

  position: fixed;

  z-index: 8;

  top: 1rem;

  width: 5rem;

  height: 5rem;

  background: rgba(255,255,255,.7);

  cursor: pointer;

}



#ham_btn {

  right: 1rem;

}



#search_btn {

  right: 7rem;

}



#ham_btn::after,

#search_btn::after {

  position: absolute;

  left: 50%;

  font-family: "fontello";

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}



#ham_btn::after {

  top: 50%;

  font-size: 3.2rem;

  content: "\f0c9";

}



#search_btn::after {

  top: 40%;

  font-size: 2.8rem;

  content: "\e805";

}



#search_btn::before {

  position: absolute;

  bottom: 2px;

  left: 3px;

  content: "出勤情報";

}







/*  パンくずリスト

------------------------------------------------------------------------------ */

#breadcrumbs {

  background: #f8f6f7;

}



#breadcrumbs ul {

  max-width: 1000px;

  width: 100%;

  margin: 0 auto;

  padding: 1rem;

  font-size: 1.2rem;

}



#breadcrumbs ul li {

  display: inline-block;

  padding-right: .5em;

}



#breadcrumbs ul li::before {

  padding-right: .5em;

  content: "|";

}



#breadcrumbs ul li:first-child::before {

  content: "";

}



#breadcrumbs a {

  -webkit-transition: color .2s;

          transition: color .2s;

}



#breadcrumbs a:hover {

  color: #888;

}















/*  矢印付きボタン(共通)

------------------------------------------------------------------------------ */

.btn a {

  display: block;

  overflow: hidden;

  position: relative;

  z-index: 1;

  margin-top: 2rem;

  padding: .5em 0;

  border: 1px solid #bbb;

  color: #666;

  font-size: 1.6rem;

  font-weight: bold;

  text-align: center;

}



/* hover時に表示するもの */

html:not(.ua_touch) .btn a::after {

  position: absolute;

  z-index: -1;

  top: 0;

  left: -140%;

  width: 120%;

  height: 100%;

  background: #888;

  content: "";

  -webkit-transition: left .3s;

          transition: left .3s;

  -webkit-transform: skewX(20deg);

      -ms-transform: skewX(20deg);

          transform: skewX(20deg);

}



html:not(.ua_touch) .btn a:hover::after {

  left: -10%;

}



html:not(.ua_touch) .btn a:hover,

html:not(.ua_touch) .btn a:hover i {

  color: #fff;

}



@media screen and (min-width: 768px) {

  .btn {

    overflow: hidden;

  }



  .btn a {

    float: right;

    padding-right: 1.6em;

    padding-left: 1em;

  }



  /* 768px以上で右側に配置する */

  .btn_r a {

    float: right;

  }



  /* 768px以上で右上に配置 */

  .btn_t {

    position: absolute;

    top: 3.6rem;

    right: 2rem;

  }

}



.btn a i {

  position: absolute;

  top: 50%;

  right: -.2em;

  color: #888;

  font-size: 1.6rem;

  -webkit-transition: color .2s;

          transition: color .2s;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

}









/*  タブ(共通)

------------------------------------------------------------------------------ */

.tab {

  height: 4rem; /* タブの高さ(オンのときと同じ高さに) */

  border-bottom: 1px solid #888;

}



.tab li {

  position: relative;

  float: left;

  width: 46%;

  width: calc( (100% - 3rem) / 2);

  height: 3.4rem; /* タブオフのときの高さ */

  margin-top: .6rem; /* タブオンとオフの差を入れる */

  margin-left: 1rem;

  background: #bcbcbc;

  color: #7c7c7c;

  font-size: 1.6rem;

  font-weight: bold;

  text-align: center;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  -webkit-transition: color .4s, background-color .4s, height .2s, margin .2s, font-size .2s;

          transition: color .4s, background-color .4s, height .2s, margin .2s, font-size .2s;

}



.tab li span {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}



.tab .tab_on,

html:not(.ua_touch) .tab li:hover {

  height: 4rem; /* タブオンのときの高さ */

  margin-top: 0;

  background: #111;

  color: #fff;

}



/* タブ本体の切り替えに必要なスタイル */

.tab_body {

  position: relative;

  width: 100%;

}



.tab_body > div {

  visibility: hidden;

  position: absolute;

  z-index: 1;

  width: 100%;

  opacity: 0;

  -webkit-transition-duration: .4s;

          transition-duration: .4s;

  -webkit-transition-property: opacity,visibility;

          transition-property: opacity,visibility;

}



.tab_body > div.tab_show {

  visibility: visible;

  z-index: 2;

  opacity: 1;

}





/*  スライダー(共通)

------------------------------------------------------------------------------ */

/* 左右の矢印(767px以下は下に) */

.slick_prev,

.slick_next {

  position: absolute;

  z-index: 2;

  bottom: 0;

  width: 4rem;

  cursor: pointer;

}



.slick_prev {

  left: 0;

}



.slick_next {

  right: 0;

}



/* 左右の矢印(768px以上は左右に) */

@media screen and (min-width: 768px) {

  .slick_prev,

  .slick_next {

    top: 0;

    height: 100%;

  }

}



/* 左右の矢印(1001px以上かつスプリットオンのとき) */

@media screen and (min-width: 1001px) {

  #wrapper-sprit .slick_prev,

  #wrapper-sprit .slick_next {

    top: auto;

    bottom: 0;

    height: auto;

  }

}



.slick_prev i,

.slick_next i {

  position: absolute;

  z-index: 1;

  top: -2rem; /* ドットの分少し上にするため */

  top: calc(50% - 2rem);

  left: 50%;

  width: 3.6rem;

  height: 3.6rem;

  border: 1px solid #888;

  border-radius: 50%;

  color: #888;

  font-style: normal;

  -webkit-transition: color .2s, background-color .2s;

          transition: color .2s, background-color .2s;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}



.slick_prev i::before,

.slick_next i::before {

  position: absolute;

  top: 50%;

  font-family: "fontello";

  font-size: 2.4rem;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}



html:not(.ua_touch) .slick_prev:hover i,

html:not(.ua_touch) .slick_next:hover i {

  background-color: #888;

  color: #fff;

}



.slick_prev i::before {

  left: 50%;

  content: "\e804";

}



.slick_next i::before {

  left: 55%; /* 矢印を中央に見せるため少しずらしている */

  content: "\e803";

}



/* ページャー */

.dots {

  display: -webkit-flex;

  display: -webkit-box;

  display: -ms-flexbox;

  display:         flex;

  position: absolute;

  bottom: 1.2rem; /* スマホのときの下に配置する矢印の半分の高さ */

  left: 50%;

  width: 100%;

  -webkit-transform: translateX(-50%);

      -ms-transform: translateX(-50%);

          transform: translateX(-50%);



  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  -webkit-justify-content: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

          justify-content: center;

}



.dots li {

  margin: 0 .6rem;

  cursor: pointer;

}



/* ドットのボタンを非表示 */

.dots li button {

  display: none;

}



/* ドットの黒丸を出す(webfont) */

.dots li::before {

  color: #bbb;

  font-family: "fontello";

  font-size: 1.6rem;

  content: "\f111";

  -webkit-transition: color .2s;

          transition: color .2s;

}















/*  プロフィール部分の共通部分

------------------------------------------------------------------------------ */

/* 女の子データ */

.p_time {

  color: #f60008;

}



.p_date {

  color: #00ae58;

}



.p_shop {

  display: block;

  margin-top: .4rem;

  white-space: normal;

  word-wrap: break-word;

}



.p_name {

  margin-top: .4rem;

  font-size: 1.4rem;

}



.p_size {

  margin-top: .6rem;

  font-size: 1.1rem;

}



.p_drop {

  width: 90%;

  margin: 0 auto;

  margin-top: .6rem;

  color: #888;

  font-size: 1.1rem;

  text-align: left;

}



/* ラベル */

.p_label,

.p_reserve,

.p_next,

.p_work {

  width: 90%;

  margin: .6rem auto 0;

  padding: .2em 0;

  font-size: 1.3rem;

  line-height: 1;

  white-space: nowrap;

  letter-spacing: 0;

}



.p_work {

  border: 1px solid #f60008;

  color: #f60008;

}



.p_label {

  border: 1px solid #db8d20;

  color: #db8d20;

}



.p_next {

  border: 1px solid #888;

  color: #666;

}



.p_startend {

  margin-top: .4rem;

  font-family: "Italianno", cursive;

  font-size: 2.4rem;

  line-height: 1;

}



.p_startend span {

  font-size: 1.2rem;

}





/*  エリア内リンクナビ

------------------------------------------------------------------------------ */

#snav_wrap {

  z-index: 4;

  width: 100%;

  background: #eee;

}



#snav_wrap ul {

  max-width: 1000px;

  width: 100%;

  margin: 0 auto;

  border-bottom: 1px solid #dad7d7;

}



#snav_wrap ul li {

  width: 16.66%;

  /* width: calc(100% / 6); */

  height: 4.8rem;

  border-right: 1px solid #bbb;

}



#snav_wrap li a {

  display: block;

  position: relative;

  width: 100%;

  height: 100%;

  color: #666;

  font-size: 1.4rem;

  text-align: center;

  line-height: 1.2;

  white-space: nowrap;

}



#snav_wrap li a:hover {

  background: #c5c6c7;

}



#snav_wrap li a span {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}



/* スライドダウンで現れる女の子検索部分 */

#search_box {

  position: absolute;

  z-index: 4;

  top: 4.8rem; /* #snav_wrapの高さ */

  left: 0;

  width: 100%;

  background: rgba(0,0,0,.76);

  white-space: nowrap;

}



#search_box .search_inner {

  position: relative;

  max-width: 1000px;

  width: 100%;

  height: 5rem;

  margin: 0 auto;

  color: #fff;

  font-size: 1.4rem;

}



/* 左側 */

#search_box .search_l {

  position: absolute;

  left: 0;

  width: 80%; /* 左の幅 */

  height: 5rem;



  -webkit-box-align: center;

  -webkit-align-items: center;

  -ms-flex-align: center;

          align-items: center; /* 上下中央 */

}





#search_box .search_l dt {

  width: 5%;

  text-align: right;

}



#search_box .search_l .shop_dt {

  width: 11%;

}



#search_box .search_l dt::after {

  content: ":";

}





#search_box .search_l .date {

  width: 15%;

}



#search_box .search_l .time {

  width: 15%;

}



#search_box .search_l .sp {

  display: none; /* スマホで表示する時間を非表示 */

}



/* 店舗選択のチェックボックス */

#search_box .search_l .shop {

  position: relative;

  width: 28%;

  height: 2.6rem;

  padding-left: .1em;

  color: #333;

  font-size: 1.6rem;

  font-size: 1.4rem;

  line-height: 2.6rem;

  cursor: pointer;

}



/* チェックボックスデザイン */

#s_list input[type="checkbox"],

#s_list_sp input[type="checkbox"] {

  display: none;

}



#s_list input[type="radio"],

#s_list_sp input[type="radio"] {

  display: none;

}



#s_list label,

#s_list_sp label {

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}



#s_list input[type="checkbox"] + label,

#s_list_sp input[type="checkbox"] + label {

  display: inline-block;

  position: relative;

  width: 100%;

  margin-left: 18px;

  padding: 5px 0 3px 6px;

  border-radius: 2px;

  text-align: left;

  line-height: 1;

  cursor: pointer;

}



#s_list input[type="checkbox"] + label:before,

#s_list_sp input[type="checkbox"] + label:before {

  display: block;

  position: absolute;

  top: 50%;

  left: -18px;

  width: 18px;

  height: 18px;

  margin-top: -9px;

  border-radius: .3rem;

  background: #eee;

  content: "";

}



#s_list input[type="checkbox"] + label:after,

#s_list_sp input[type="checkbox"] + label:after {

  display: block;

  position: absolute;

  top: 50%;

  left: -13px;

  width: 5px;

  height: 9px;

  margin-top: -8px;

  border-right: 3px solid #444;

  border-bottom: 3px solid #444;

  opacity: 0;

  content: "";

  -webkit-transition: opacity .2s linear;

          transition: opacity .2s linear;

  -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

          transform: rotate(45deg);

}



#s_list input[type="checkbox"]:checked + label:after,

#s_list_sp input[type="checkbox"]:checked + label:after {

  opacity: 1;

}



#s_list {

  max-width: none !important;

  width: 100% !important;

  margin: .6rem 0 0 !important;

  padding: .4rem .8rem;

  border: 1px solid #eee !important;

  border-radius: .2rem;

  background: #fff;

}



#s_list_sp {

  max-width: none !important;

  width: 100% !important;

  margin: .6rem 0 0 !important;

  padding: .4rem .8rem;

  border: none !important;

  border-radius: .2rem;

  background: transparent;

}
/*---------------------------------------
[始]2020.07.22 search.cssとかち合いを発見した為修正
---------------------------------------*/
#sp_head #s_list_sp input[type="checkbox"] + label {
  color: #fff;
}
/*[終]---------------------------------*/

#s_list li,

#s_list_sp li {

  width: 100% !important;

  height: auto !important;

  margin-top: .4rem;

  border-right: 0 !important;

}



#s_list li:first-child {

  border-bottom: 1px solid #eee;

}



#s_list_sp li:first-child {

  padding-bottom: .4rem;

  border-bottom: 1px solid #666;

}



#s_text_sp,

#ssear_inner .search_l dd::before {

  display: none;

}



/* select共通 */

#search_box .search_l dd {

  position: relative;

  border-radius: .2rem;

  background: rgba(255,255,255,.9);

}



#search_box .search_l dd::before {

  position: absolute;

  top: 50%;

  right: .5em;

  color: #000;

  font-size: 1rem;

  content: "▼";

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

}



#search_box dd select {

  position: relative;

  width: 100%;

  height: 2.6rem;

  padding-left: .1em;

  font-size: 1.4rem;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}







/*

#search_box .search_l .shop select {

  padding: .4rem 0;

}



#search_box .search_l .shop select:focus {

  position: absolute;

  z-index: 10;

  top: -1.3rem;

  min-height: 10rem;

  background: #fff;

  outline: 1px solid #ddd;

}

*/





/* 右側のボタン */

#search_box #s_submit {

  position: absolute;

  top: 50%;

  left: 82%; /* 左の幅分＋4% */

  width: 18%;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

}



#search_box #s_submit input {

  width: 92%;

  height: 2.6rem;

  border-radius: .2rem;

  font-family: inherit;

  font-size: 1.4rem;

  cursor: pointer;

  -webkit-transition: opacity .2s;

          transition: opacity .2s;

}



html:not(.ua_touch) #search_box #s_submit input:hover {

  opacity: .7;

}





/* スプリットオンのとき下に落とす */

#wrapper-sprit #search_box {

  padding-left: 0;

}



#wrapper-sprit #search_box .search_inner {

  height: 9rem;

}



#wrapper-sprit #search_box .search_l {

  width: 98%; /* 左の幅 */

  height: 5rem;

}



#wrapper-sprit #search_box #s_submit {

  top: auto;

  bottom: 0;

  left: 30%;

  width: 40%;

}









/*  スマホのオールナビ

------------------------------------------------------------------------------ */

#anav_wrap {

  visibility: hidden;

  position: fixed;

  z-index: 9;

  top: 0;

  right: 0;

  left: 0;

  height: 100%;

  opacity: 0;

  font-size: 1.6rem;

  white-space: nowrap;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  -webkit-transition-duration: .2s;

          transition-duration: .2s;

  -webkit-transition-property: opacity,visibility;

          transition-property: opacity,visibility;

}



#anav_wrap.on {

  visibility: visible;

  opacity: 1;

}



.and4 #anav_wrap {

  display: none;

  visibility: visible;

  opacity: 1;

}



.and4 #anav_wrap.on {

  display: block;

}





#anav_close {

  position: relative;

  height: 7rem;

  background: rgba(0,0,0,.7);

  cursor: pointer;

}



#anav_close::after {

  position: absolute;

  top: 1.8rem;

  right: 1.8rem;

  color: #ddd;

  font-family: "fontello";

  font-size: 3rem;

  content: "\e801";

}



#anav_inner {

  overflow: auto;

  width: 100%;

  height: 100%;

  height: calc(100% - 6rem);

  margin: 0 auto;

  background: #444;

}



/* エリアごとの店舗リストの一番上のエリアトップへのTOPの文字生成 */

#sp_snav ul li:first-child a:after {

  content: "TOP";

}



/* 上のナビに関する */

#sp_gnav li {

  width: 50%;

  border-bottom: 1px solid #888;

}



.and4 #sp_gnav li {

  float: left;

}



#sp_gnav li a {

  display: block;

  padding: 2rem 0;

  color: #fff;

  text-align: center;

}



#sp_gnav li:nth-child(even) {

  border-right: 1px solid #888;

}



/* 取ってきた女の子簡易検索は非表示 */

#sp_gnav #girls_search {

  display: none;

}



/* 求人リンクに関する */

#sp_rec {

  width: 98%;

  margin: 0 auto;

}



#sp_rec .girl,

#sp_rec .men {

  width: 49.4%;

}



.and4 #sp_rec .girl,

.and4 #sp_rec .men {

  float: left;

}



#sp_rec .girl a,

#sp_rec .men a {

  display: block;

  margin: 1rem 0;

  padding: 1rem 0;

  color: #fff;

  font-size: 1.4rem;

  text-align: center;

}



#sp_rec .girl a span,

#sp_rec .men a span {

  display: block;

  margin-top: .2em;

  font-size: 2.2rem;

  font-weight: bold;

}



#sp_rec .girl a {

  background-color: #fb4782;

}



#sp_rec .men a {

  background-color: #17aae6;

}





/* エリアを選択テキスト */

#anav_inner > p {

  padding: 2rem 0 2rem 2rem;

  border-top: 1px solid #888;

  color: #fff;

}



/* エリアナビ */

#sp_snav > li {

  border-top: 1px solid #888;

  color: #fff;

  cursor: pointer;

}



#sp_snav > li p {

  position: relative;

  padding: 2rem 0 2rem 2rem;

  -webkit-transition: background .2s;

          transition: background .2s;

}



#sp_snav > li p::before,

#sp_snav > li p::after {

  position: absolute;

  top: 50%;

  right: 2rem;

  font-family: "fontello";

  font-size: 3rem;

  -webkit-transition: opacity .2s;

          transition: opacity .2s;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

}



#sp_snav > li p::before {

  opacity: 1;

  content: "\e802";

}



#sp_snav > li p::after {

  opacity: 0;

  content: "\e800";

}



#sp_snav > li.on p {

  background: #666;

}



#sp_snav > li.on p::before {

  opacity: 0;

}



#sp_snav > li.on p::after {

  opacity: 1;

}



#sp_snav > li ul {

  margin-bottom: 2rem;

}



#sp_snav > li ul li {

  border-top: 1px solid #888;

}



#sp_snav > li ul li a {

  display: block;

  padding: 1.6rem 0 1.6rem 4rem;

}



/* 総トップへのリンク */

#yes_top {

  border-top: 1px solid #888;

}



#yes_top a {

  display: block;

  padding: 2rem 0 6rem 2rem;

  color: #fff;

}











/*  女の子簡易検索(SP) ※基本オールナビと同じこと

------------------------------------------------------------------------------ */

#ssear_wrap {

  visibility: hidden;

  position: fixed;

  z-index: 9;

  top: 0;

  right: 0;

  left: 0;

  height: 100%;

  opacity: 0;

  font-size: 1.6rem;

  white-space: nowrap;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  -webkit-transition-duration: .2s;

          transition-duration: .2s;

  -webkit-transition-property: opacity,visibility;

          transition-property: opacity,visibility;

}



#ssear_wrap.on {

  visibility: visible;

  opacity: 1;

}



.and4 #ssear_wrap {

  display: none;

  visibility: visible;

  opacity: 1;

}



.and4 #ssear_wrap.on {

  display: block;

}



#ssear_close {

  position: relative;

  height: 7rem;

  background: rgba(0,0,0,.7);

  cursor: pointer;

}



#ssear_close::after {

  position: absolute;

  top: 1.8rem;

  right: 1.8rem;

  color: #ddd;

  font-family: "fontello";

  font-size: 3.2rem;

  content: "\e801";

}



#ssear_inner {

  overflow: auto;

  width: 100%;

  height: 100%;

  height: calc(100% - 6rem);

  margin: 0 auto;

  padding-bottom: 6rem;

  background: #444;

  color: #fff;

}



/* 検索フォームの中身 */

#ssear_inner .search_l dt {

  width: 25%;

  border-bottom: 1px solid #888;

  font-size: 1.6rem;

  text-align: center;

  line-height: 6.4rem;

}



#ssear_inner .search_l dd {

  position: relative;

  z-index: 2;

  width: 75%;

  border-bottom: 1px solid #888;

}



.and4 #ssear_inner .search_l dt,

.and4 #ssear_inner .search_l dd {

  float: left;

}



#ssear_inner .search_l dd {

  position: relative;

  z-index: 2;

  width: 75%;

  border-bottom: 1px solid #888;

}



#ssear_inner .search_l dd::before {

  position: absolute;

  z-index: -1;

  right: 2rem;

  padding: 2rem 0;

  color: #fff;

  font-family: "fontello";

  font-size: 3rem;

  content: "";

  content: "\e802";

}



#ssear_inner .search_l dd select {

  width: 100%;

  height: 6.4rem;

  padding: 2rem;

  color: #fff;

  font-size: 16px; /* スマホでの拡大を防ぐため */

  text-align: center;

}



#ssear_inner .search_l dd select option {

  background: #444;

  color: #fff;

}



#ssear_inner #s_submit {

  width: 96%;

  margin: .8rem auto;

  text-align: center;

}



#ssear_inner #s_submit input {

  display: block;

  width: 100%;

  padding: 2rem 0;

  color: #fff;

  font-family: inherit;

  font-size: 1.6rem;

  line-height: 1;

  cursor: pointer;

}









/*  フッター

------------------------------------------------------------------------------ */

#footer {

  padding: 4rem 1rem 6rem;

  border-top: 1px solid #888;

  background-color: #ebeae6;

}



.footer_inner {

  width: 100%;

  margin: 0 auto;

  font-size: 1.2rem;

  line-height: 1.4;

}



/* 中身 */

.foot_sp {

  margin-top: 1rem;

}



.foot_pc {

  display: none;

}



.foot_sp a {

  float: none;

  margin-top: .8rem;

  background: #f0f0f0;

}



.foot_sp .medical,

.foot_sp .mutual_link {

  width: 100%;

}



.foot_sp .goto_top,

.foot_sp .other_area {

  width: 49%;

}





/* Android4用 */

.and4 .foot_sp .medical,

.and4 .foot_sp .mutual_link,

.and4 .foot_sp .goto_top,

.and4 .foot_sp .other_area {

  float: left;

}



.and4 .foot_sp .goto_top {

  margin-right: 2%;

}





@media screen and (min-width: 768px) {

  #footer {

    padding: 4rem 2rem 6rem;

  }



  .footer_inner {

    max-width: 480px;

  }



  .foot_sp {

    display: none;

  }



  .foot_pc {

    display: block;

    margin-top: 2rem;

  }



  .foot_pc .medical {

    overflow: hidden;

  }



  .foot_pc .medical a {

    display: block;

    float: left;

    width: 180px;

  }



  .foot_pc .medical p {

    float: left;

    width: calc(100% - 180px);

    padding-left: 1rem;

  }



  .foot_pc .mutual_link {

    margin-top: 2rem;

    border: 1px solid #888;

    border-radius: 2rem;

    -webkit-transition: background .2s;

            transition: background .2s;

  }



  .foot_pc .mutual_link > a {

    display: block;

    position: relative;

    padding: .4rem 0;

    font-size: 1.4rem;

    text-align: center;

  }



  .foot_pc .mutual_link a::before {

    position: absolute;

    left: 2rem;

    content: "▼";

    -webkit-transform: rotate(-90deg);

        -ms-transform: rotate(-90deg);

            transform: rotate(-90deg);

  }



  html:not(.ua_touch) .foot_pc .mutual_link:hover {

    background: #ddd;

  }



  .foot_pc .mutual_list {

    margin-top: 2rem;
    
    justify-content: flex-start;

  }



  .foot_pc .mutual_list li {

    max-width: 88px;

    width: 100%;

    margin-bottom: .5rem;
    
    padding-right: 3px;
    
    box-sizing:border-box;

  }

}



/* コピーライト(#footerより外) */

#foot_copy small {

  display: block;

  width: 100%;

  padding: .6rem 0;

  background: #333;

  color: #fff;

  font-size: 1.1rem;

  text-align: center;

}







/* フッター男子女子求人 */

#f_recruit {

  overflow: hidden;

  padding: 0;

}



#f_recruit .girl a,

#f_recruit .men a {

  display: block;

  box-sizing: border-box;

  float: left;

  width: 49.5%;

  margin: 0 0 2rem;

  padding: .5rem 0;

  color: #fff;

  font-size: 1.4rem;

  text-align: center;

}

#f_recruit .girl a {

  margin-right: .5%;

}

#f_recruit .men a {

  margin-left: .5%;

}

#f_recruit .girl a span,

#f_recruit .men a span {

  display: block;

  margin-top: .2em;

  font-size: 1.8rem;

  font-weight: bold;

  letter-spacing: 1.2pt;

}



#f_recruit .girl a {

  border: 3px solid #fb4782;

  background-color: #fb4782;

}



#f_recruit .men a {

  border: 3px solid #02a8ed;

  background-color: #02a8ed;

}



#f_recruit .button {

  display: inline-block;

  overflow: hidden;

  position: relative;

  padding: .75em 2em;

  font-size: 24px;

  text-decoration: none;

  text-align: center;

  -webkit-transition: all .2s ease-in-out;

          transition: all .2s ease-in-out;

}

















/*  エリア別で色を替える部分

------------------------------------------------------------------------------ */



/*---------- 札幌 ----------*/

#sapporo .pagination a:hover::after,

/* sliderのドットのカレント */

#sapporo .pagination a.active::after,

#sapporo .dots li:hover::before,

/* 他の共通スライダー */

#sapporo .dots .slick-active::before {

  color: #398ec5 !important;

}





#sapporo #girls_search a,

/* 女の子簡易検索 */

#sapporo #search_box #s_submit input,

/* 検索開始ボタン */

#sapporo #sp_info::before,

/* スマホの上のInfo部分 */

#sapporo #page-top a,

/* 上へ戻るボタン */

#sapporo #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #398ec5 !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#sapporo li#girls_search a:hover {

  background: #398ec5 !important;

  color: #fff !important;

}



#sapporo #sp_info::after {

  border-left-color: #398ec5 !important; /* スマホの上のInfoの矢印 */

}



#sapporo #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #398ec5 !important;

}



#sapporo #other .other_inner li /* Otherのコンテンツ */ {

  background: #3674a3 !important;

}



#sapporo #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #3993d1 !important;

}



/* 女の子検索ラジオ */

#sapporo #search input[type="radio"] + label::after {

  background: #398ec5;

}



/* 女の子検索チェックボックス */

#sapporo #search input[type="checkbox"] + label:after,

#sapporo #kensaku input[type="checkbox"] + label:after {

  border-color: #398ec5;

}



/* 簡易検索のチェックボックス */

#sapporo #s_list input[type="checkbox"] + label:after,

#sapporo #s_list_sp input[type="checkbox"] + label:after {

  border-color: #398ec5;

}



/* 店舗一覧へボタン */

#sapporo .shop_list_link a {

  background: #398ec5 !important;

}



/* 店舗一覧へボタンのホバー */

#sapporo .shop_list_link a:hover {

  background: #398ec5 !important;

}





/*---------- 水戸 ----------*/

#ibaraki .pagination a:hover::after,

/* sliderのドットのカレント */

#ibaraki .pagination a.active::after,

#ibaraki .dots li:hover::before,

/* 他の共通スライダー */

#ibaraki .dots .slick-active::before {

  color: #e45c36 !important;

}





#ibaraki #girls_search a,

/* 女の子簡易検索 */

#ibaraki #search_box #s_submit input,

/* 検索開始ボタン */

#ibaraki #sp_info::before,

/* スマホの上のInfo部分 */

#ibaraki #page-top a,

/* 上へ戻るボタン */

#ibaraki #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #e45c36 !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#ibaraki li#girls_search a:hover {

  background: #e45c36 !important;

  color: #fff !important;

}





#ibaraki #sp_info::after {

  border-left-color: #e45c36 !important; /* スマホの上のInfoの矢印 */

}



#ibaraki #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #e45c36 !important;

}



#ibaraki #other .other_inner li /* Otherのコンテンツ */ {

  background: #f59356 !important;

}



#ibaraki #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #eca539 !important;

}



/* 女の子検索ラジオ */

#ibaraki #search input[type="radio"] + label::after {

  background: #e45c36;

}



/* 女の子検索チェックボックス */

#ibaraki #search input[type="checkbox"] + label:after,

#ibaraki #kensaku input[type="checkbox"] + label:after {

  border-color: #e45c36;

}



/* 簡易検索のチェックボックス */

#ibaraki #s_list input[type="checkbox"] + label:after,

#ibaraki #s_list_sp input[type="checkbox"] + label:after {

  border-color: #e45c36;

}





/* 店舗一覧へボタン */

#ibaraki .shop_list_link a {

  background: #e85c07 !important;

}



/* 店舗一覧へボタンのホバー */

#ibaraki .shop_list_link a:hover {

  background: #f89e67 !important;

}





/*---------- 土浦 ----------*/

#tsuchiura .pagination a:hover::after,

/* sliderのドットのカレント */

#tsuchiura .pagination a.active::after,

#tsuchiura .dots li:hover::before,

/* 他の共通スライダー */

#tsuchiura .dots .slick-active::before {

  color: #e3366e !important;

}





#tsuchiura #girls_search a,

/* 女の子簡易検索 */

#tsuchiura #search_box #s_submit input,

/* 検索開始ボタン */

#tsuchiura #sp_info::before,

/* スマホの上のInfo部分 */

#tsuchiura #page-top a,

/* 上へ戻るボタン */

#tsuchiura #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #e3366e !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#tsuchiura li#girls_search a:hover {

  background: #e3366e !important;

  color: #fff !important;

}





#tsuchiura #sp_info::after {

  border-left-color: #e3366e !important; /* スマホの上のInfoの矢印 */

}



#tsuchiura #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #e3366e !important;

}



#tsuchiura #other .other_inner li /* Otherのコンテンツ */ {

  background: #fea6d9 !important;

}



#tsuchiura #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #e3366e !important;

}



/* 女の子検索ラジオ */

#tsuchiura #search input[type="radio"] + label::after {

  background: #e3366e;

}



/* 女の子検索チェックボックス */

#tsuchiura #search input[type="checkbox"] + label:after,

#tsuchiura #kensaku input[type="checkbox"] + label:after {

  border-color: #e3366e;

}



/* 簡易検索のチェックボックス */

#tsuchiura #s_list input[type="checkbox"] + label:after,

#tsuchiura #s_list_sp input[type="checkbox"] + label:after {

  border-color: #e3366e;

}



/* 店舗一覧へボタン */

#tsuchiura .shop_list_link a {

  background: #e3366e !important;

}



/* 店舗一覧へボタンのホバー */

#tsuchiura .shop_list_link a:hover {

  background: #fd70da !important;

}





/*---------- 横浜 ----------*/

#yokohama .pagination a:hover::after,

/* sliderのドットのカレント */

#yokohama .pagination a.active::after,

#yokohama .dots li:hover::before,

/* 他の共通スライダー */

#yokohama .dots .slick-active::before {

  color: #73b025 !important;

}



/* 左ナビの背景色 */

#yokohama #lnav_wrap {

 /* background: #222 !important;*/

}





#yokohama #girls_search a,

/* 女の子簡易検索 */

#yokohama #search_box #s_submit input,

/* 検索開始ボタン */

#yokohama #sp_info::before,

/* スマホの上のInfo部分 */

#yokohama #page-top a,

/* 上へ戻るボタン */

#yokohama #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #73b025 !important;

  color: #fff !important;

}



/* 検索開始ボタン見づらいから色変更 */

#yokohama #search_box #s_submit input {

  background: #73b025 !important;

}



/* 女の子検索のホバー */

#yokohama li#girls_search a:hover {

  background: #73b025 !important;

  color: #fff !important;

}





#yokohama #sp_info::after {

  border-left-color: #73b025 !important; /* スマホの上のInfoの矢印 */

}



#yokohama #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #73b025 !important;

}



#yokohama #other .other_inner li /* Otherのコンテンツ */ {

  background: #73b025 !important;

}



#yokohama #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #61941f !important;

}



/* 女の子検索ラジオ */

#yokohama #search input[type="radio"] + label::after {

  background: #73b025;

}



/* 女の子検索チェックボックス */

#yokohama #search input[type="checkbox"] + label:after,

#yokohama #kensaku input[type="checkbox"] + label:after {

  border-color: #73b025;

}



/* 簡易検索のチェックボックス */

#yokohama #s_list input[type="checkbox"] + label:after,

#yokohama #s_list_sp input[type="checkbox"] + label:after {

  border-color: #73b025;

}



/* 店舗一覧へボタン */

#yokohama .shop_list_link a {

  background: #73b025 !important;

}



/* 店舗一覧へボタンのホバー */

#yokohama .shop_list_link a:hover {

  background: #96d742 !important;

}





/*---------- 松山 ----------*/

#matsuyama .pagination a:hover::after,

/* sliderのドットのカレント */

#matsuyama .pagination a.active::after,

#matsuyama .dots li:hover::before,

/* 他の共通スライダー */

#matsuyama .dots .slick-active::before {

  color: #24b089 !important;

}





#matsuyama #girls_search a,

/* 女の子簡易検索 */

#matsuyama #search_box #s_submit input,

/* 検索開始ボタン */

#matsuyama #sp_info::before,

/* スマホの上のInfo部分 */

#matsuyama #page-top a,

/* 上へ戻るボタン */

#matsuyama #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #24b089 !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#matsuyama li#girls_search a:hover {

  background: #24b089 !important;

  color: #fff !important;

}





#matsuyama #sp_info::after {

  border-left-color: #24b089 !important; /* スマホの上のInfoの矢印 */

}



#matsuyama #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #24b089 !important;

}



#matsuyama #other .other_inner li /* Otherのコンテンツ */ {

  background: #64aa88 !important;

}



#matsuyama #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #76ba57 !important;

}



/* 女の子検索ラジオ */

#matsuyama #search input[type="radio"] + label::after {

  background: #24b089;

}



/* 女の子検索チェックボックス */

#matsuyama #search input[type="checkbox"] + label:after,

#matsuyama #kensaku input[type="checkbox"] + label:after {

  border-color: #24b089;

}



/* 簡易検索のチェックボックス */

#matsuyama #s_list input[type="checkbox"] + label:after,

#matsuyama #s_list_sp input[type="checkbox"] + label:after {

  border-color: #24b089;

}



/* 店舗一覧へボタン */

#matsuyama .shop_list_link a {

  background: #018947 !important;

}



/* 店舗一覧へボタンのホバー */

#matsuyama .shop_list_link a:hover {

  background: #3cbc7e !important;

}





/*---------- 福岡 ----------*/

#hukuoka .pagination a:hover::after,

/* sliderのドットのカレント */

#hukuoka .pagination a.active::after,

#hukuoka .dots li:hover::before,

/* 他の共通スライダー */

#hukuoka .dots .slick-active::before {

  color: #9e59ac !important;

}





#hukuoka #girls_search a,

/* 女の子簡易検索 */

#hukuoka #search_box #s_submit input,

/* 検索開始ボタン */

#hukuoka #sp_info::before,

/* スマホの上のInfo部分 */

#hukuoka #page-top a,

/* 上へ戻るボタン */

#hukuoka #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #9e59ac !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#hukuoka li#girls_search a:hover {

  background: #9e59ac !important;

  color: #fff !important;

}





#hukuoka #sp_info::after {

  border-left-color: #9e59ac !important; /* スマホの上のInfoの矢印 */

}



#hukuoka #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #9e59ac !important;

}



#hukuoka #other .other_inner li /* Otherのコンテンツ */ {

  background: #a583c0 !important;

}



#hukuoka #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #7b61a0 !important;

}



/* 女の子検索ラジオ */

#hukuoka #search input[type="radio"] + label::after {

  background: #9e59ac;

}



/* 女の子検索チェックボックス */

#hukuoka #search input[type="checkbox"] + label:after,

#hukuoka #kensaku input[type="checkbox"] + label:after {

  border-color: #9e59ac;

}



/* 簡易検索のチェックボックス */

#hukuoka #s_list input[type="checkbox"] + label:after,

#hukuoka #s_list_sp input[type="checkbox"] + label:after {

  border-color: #9e59ac;

}



/* 店舗一覧へボタン */

#hukuoka .shop_list_link a {

  background: #8d33d1 !important;

}



/* 店舗一覧へボタンのホバー */

#hukuoka .shop_list_link a:hover {

  background: #bf7af4 !important;

}







/*---------- 熊本 ----------*/

#kumamoto .pagination a:hover::after,

/* sliderのドットのカレント */

#kumamoto .pagination a.active::after,

#kumamoto .dots li:hover::before,

/* 他の共通スライダー */

#kumamoto .dots .slick-active::before {

  color: #6849e5 !important;

}





#kumamoto #girls_search a,

/* 女の子簡易検索 */

#kumamoto #search_box #s_submit input,

/* 検索開始ボタン */

#kumamoto #sp_info::before,

/* スマホの上のInfo部分 */

#kumamoto #page-top a,

/* 上へ戻るボタン */

#kumamoto #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #6849e5 !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#kumamoto li#girls_search a:hover {

  background: #6849e5 !important;

  color: #fff !important;

}





#kumamoto #sp_info::after {

  border-left-color: #6849e5 !important; /* スマホの上のInfoの矢印 */

}



#kumamoto #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #6849e5 !important;

}



#kumamoto #other .other_inner li /* Otherのコンテンツ */ {

  background: #6472d5 !important;

}



#kumamoto #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #8b91cb !important;

}



/* 女の子検索ラジオ */

#kumamoto #search input[type="radio"] + label::after {

  background: #6849e5;

}



/* 女の子検索チェックボックス */

#kumamoto #search input[type="checkbox"] + label:after,

#kumamoto #kensaku input[type="checkbox"] + label:after {

  border-color: #6849e5;

}



/* 簡易検索のチェックボックス */

#kumamoto #s_list input[type="checkbox"] + label:after,

#kumamoto #s_list_sp input[type="checkbox"] + label:after {

  border-color: #6849e5;

}



/* 店舗一覧へボタン */

#kumamoto .shop_list_link a {

  background: #495beb !important;

}



/* 店舗一覧へボタンのホバー */

#kumamoto .shop_list_link a:hover {

  background: #6877ef !important;

}









/*---------- 那覇 ----------*/

#naha .pagination a:hover::after,

/* sliderのドットのカレント */

#naha .pagination a.active::after,

#naha .dots li:hover::before,

/* 他の共通スライダー */

#naha .dots .slick-active::before {

  color: #ca4999 !important;

}



#naha #girls_search a,

/* 女の子簡易検索 */

#naha #search_box #s_submit input,

/* 検索開始ボタン */

#naha #sp_info::before,

/* スマホの上のInfo部分 */

#naha #page-top a,

/* 上へ戻るボタン */

#naha #ssear_inner #s_submit input /* スマホの検索開始ボタン */ {

  background: #ca4999 !important;

  color: #fff !important;

}



/* 女の子検索のホバー */

#naha li#girls_search a:hover {

  background: #ca4999 !important;

  color: #fff !important;

}





#naha #sp_info::after {

  border-left-color: #ca4999 !important; /* スマホの上のInfoの矢印 */

}



#naha #lnav_wrap ul li a:hover /* 左の出てくるメニューのホバー */ {

  background: #ca4999 !important;

}



#naha #other .other_inner li /* Otherのコンテンツ */ {

  background: #ca4999 !important;

}



#naha #first_visitor .visitor_inner li /* 初めてご来店のコンテンツ */ {

  background: #d570af !important;

}



/* 女の子検索ラジオ */

#naha #search input[type="radio"] + label::after {

  background: #ca4999;

}



/* 女の子検索チェックボックス */

#naha #search input[type="checkbox"] + label:after,

#naha #kensaku input[type="checkbox"] + label:after {

  border-color: #ca4999;

}



/* 簡易検索のチェックボックス */

#naha #s_list input[type="checkbox"] + label:after,

#naha #s_list_sp input[type="checkbox"] + label:after {

  border-color: #ca4999;

}



/* 店舗一覧へボタン */

#naha .shop_list_link a {

  background: #d570af !important;

}



/* 店舗一覧へボタンのホバー */

#naha .shop_list_link a:hover {

  background: #ca4999 !important;

}









/*  トップへ戻るボタン

------------------------------------------------------------------------------ */

#page-top {

  position: fixed;

  z-index: 8;

  right: .6rem;

  bottom: 1.2rem;

  font-size: 1.2rem;

  -webkit-transition: bottom .2s;

          transition: bottom .2s;

}



#page-top a {

  display: block;

  position: relative;

  width: 5rem;

  height: 5rem;

  border-radius: 50%;

  text-align: center;

  -webkit-transition: opacity .2s;

          transition: opacity .2s;

}



#page-top a::after {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 1rem;

  height: 1rem;

  margin-top: -.5rem;

  margin-left: -.55rem;

  border-top: 2px solid rgba(255, 255, 255, .9);

  border-left: 2px solid rgba(255, 255, 255, .9);

  content: "";

  -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

          transform: rotate(45deg);

}



html:not(.ua_touch) #page-top:hover {

  bottom: 2rem;

}



html:not(.ua_touch) #page-top:hover a {

  opacity: .8;

}













/*  webfont

------------------------------------------------------------------------------ */

@font-face {

  font-family: "fontello";

  font-weight: normal;

  font-style: normal;



  src: url("./font/fontello.eot?83688895");

  src: url("./font/fontello.eot?83688895#iefix") format("embedded-opentype"),

  url("./font/fontello.woff2?83688895") format("woff2"),

  url("./font/fontello.woff?83688895") format("woff"),

  url("./font/fontello.ttf?83688895") format("truetype"),

  url("./font/fontello.svg?83688895#fontello") format("svg");

}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */

/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */

/*

@media screen and (-webkit-min-device-pixel-ratio:0) {

  @font-face {

    font-family: 'fontello';

    src: url('../font/fontello.svg?83688895#fontello') format('svg');

  }

}

*/



[class^="icon-"]:before,

[class*=" icon-"]:before {

  display: inline-block;

  width: 1em;

  margin-right: .2em;

  /* Animation center compensation - margins should be symmetric */

  /* remove if not needed */

  margin-left: .2em;

  font-family: "fontello";

  font-weight: normal;

  font-style: normal;

  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/

  font-variant: normal;

  text-decoration: inherit;

  text-align: center;

  /* fix buttons height, for twitter bootstrap */

  line-height: 1em;

  text-transform: none;



  speak: none;

  /* you can be more comfortable with increased icons size */

  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */

  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

}



.icon-up-open:before {

  content: "\e800";

} /* '?' */

.icon-cancel:before {

  content: "\e801";

} /* '?' */

.icon-down-open:before {

  content: "\e802";

} /* '?' */

.icon-right-open:before {

  content: "\e803";

} /* '?' */

.icon-left-open:before {

  content: "\e804";

} /* '?' */

.icon-search-1:before {

  content: "\e805";

} /* '?' */

.icon-right-1:before {

  content: "\e806";

} /* '?' */

.icon-right-open-big:before {

  content: "\e807";

} /* '?' */

.icon-down-open-big:before {

  content: "\e808";

} /* '?' */

.icon-up-open-big:before {

  content: "\e809";

} /* '?' */

.icon-left-open-big:before {

  content: "\e80a";

} /* '?' */

.icon-menu:before {

  content: "\f0c9";

} /* '?' */

.icon-circle:before {

  content: "\f111";

} /* '?' */

/*  20190110 追加 イベントページに関連バナー表示

------------------------------------------------------------------------------ */

.eve_page_freebn {

    padding: 1.5rem 1.5rem 0;

    border: 1px solid #bbb;

    margin: 2rem 0;

}

.eve_page_freebn ul{

   display: -webkit-box;

   display: -webkit-flex;

   display: -ms-flexbox;

   display:         flex;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

   max-width: 600px;

   margin: 0 auto;

}

.eve_page_freebn li{

  box-sizing: border-box;

	width:49%; 

  margin-bottom: 2rem;

}

.eve_page_freebn li:nth-child(odd){

  margin-right: 2%;

}

.eve_page_freebn img{

  width: 100%;

}

.eve_page_freebn a{

  display: block;

}

.eve_page_freebn span{

 display: block;

 font-size: 1.3rem;

 line-height: 1.4;

  font-weight: bold;

  margin-left: .5rem;

}

@media screen and (max-width: 640px) {

.eve_page_freebn li{

  box-sizing: border-box;

	width:100%; 

}



.eve_page_freebn span{

 font-size: 1rem;

 line-height: 1;

 margin-bottom: .2rem;



}

}



@media screen and (min-width: 1001px) {
  #lnav_wrap {
    background: #00a6e4;
  }
  #lnav_wrap ul {
    border-top: 1px solid #fff;
  }
   #lnav_wrap ul li {
    border-bottom: 1px solid #fff;
  }
  #sapporo #lnav_wrap ul li a:hover, #ibaraki #lnav_wrap ul li a:hover,#tsuchiura #lnav_wrap ul li a:hover,#yokohama #lnav_wrap ul li a:hover,
  #hukuoka #lnav_wrap ul li a:hover,#matsuyama #lnav_wrap ul li a:hover,#kumamoto #lnav_wrap ul li a:hover,#naha #lnav_wrap ul li a:hover{

  background: #1e92bd !important;

}
}
#sapporo #girls_search a,#ibaraki #girls_search a,#tsuchiura #girls_search a,#yokohama #girls_search a,#hukuoka #girls_search a,#matsuyama #girls_search a,#kumamoto #girls_search a, #naha #girls_search a{
  background: #00a6e4!important;
}
#sapporo #girls_search a:hover,#ibaraki #girls_search a:hover,#tsuchiura #girls_search a:hover,#yokohama #girls_search a:hover,#hukuoka #girls_search a:hover,#matsuyama #girls_search a:hover,#kumamoto #girls_search a:hover, #naha #girls_search a:hover {
  background: #1e92bd !important;
}



#sapporo li#girls_search a:hover,#ibaraki li#girls_search a:hover,#tsuchiura li#girls_search a:hover,#yokohama li#girls_search a:hover,#hukuoka li#girls_search a:hover,#matsuyama li#girls_search a:hover,#kumamoto li#girls_search a:hover,#naha li#girls_search a:hover {
  background: #1e92bd !important;
}

#recruit .girl a {
   background-color: #61314b!important; 
}
#recruit .men a {
  background-color: #16314c!important;
}
