/* =========================
   Reusable tokens (:root)
   ========================= */
:root{
  /* fonts */
  --font-sans: 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
  --font-serif-title: 'Playfair Display', serif;
  --font-serif-small: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
  --font-title-em: 'Limelight', cursive;
  --font-title-sub: 'M PLUS Rounded 1c', sans-serif;

  /* base colors */
  --c-white:#fff;
  --c-black:#000;

  --c-text:#1e1b24;
  --c-muted:#555;
  --c-muted-2:#999;

  /* brand / theme */
  --c-brand-pink:#fe8eb2;
  --c-brand-pink-2:#fca0bb;
  --c-brand-pink-light:#ffdcea;

  --c-accent-gold:#cdaf09;

  /* main gradient (used in header / nav blocks) */
  --c-grad-1:#fd82ce;
  --c-grad-2:#fe9cda;
  --c-grad-3:#fda1dd;
  --c-grad-4:#fec6ef;
  --c-grad-5:#ff8dd4;
  --grad-main: linear-gradient(135deg,
                var(--c-grad-1) 0%,
                var(--c-grad-2) 25%,
                var(--c-grad-3) 50%,
                var(--c-grad-4) 75%,
                var(--c-grad-5) 100%);

  /* shadows / borders */
  --shadow-soft:0 10px 15px rgba(0,0,0,0.1);
  --shadow-mid:0 10px 10px rgba(0,0,0,0.2);

  /* misc */
  --anim-fade: fade 1.4s ease-in-out;

  /* “breakpoints” (note: media queries still use literal values) */
  --bp-750:750px;
  --bp-900:900px;

  /* page title colors */
  --pt-bg: rgba(255,255,255,0.95);
  --pt-em: rgba(253,144,195,1);
  --pt-em-mask: rgba(255,176,210,1);
  --pt-underline: rgba(255,220,118,1);
  --pt-span: rgba(51,51,51,1);

  /* system colors */
  --sys-border:#F08796;
  --sys-bg:#FFE7EB;
  --sys-label:#9E6570;
  --sys-price:#ff799c;
  --sys-remark-head:#655047;
  --sys-remark-border:#934757;

  /* quick-contact */
  --qc-tell:#bb2b5b;
  --qc-open:#2bbb38;
  --qc-acc: var(--c-brand-pink);

  /* info-box */
  --info-grad: linear-gradient(90deg,
              var(--c-brand-pink),
              var(--c-brand-pink-2),
              var(--c-brand-pink),
              var(--c-brand-pink-2),
              var(--c-brand-pink));
}

/* =========================
   Base
   ========================= */
html{
  font-family: var(--font-sans);
  overflow-y:scroll;
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

body{
  font-size:12px!important;
  padding:0;
  margin:0;
  background-color:var(--c-white);
  -webkit-animation:var(--anim-fade);
  animation:var(--anim-fade);
  position:relative;
}

@-webkit-keyframes fade{0%{opacity:0}100%{opacity:1}}
@keyframes fade{0%{opacity:0}100%{opacity:1}}

a:hover{text-decoration:none;color:var(--c-white)}
ul,ul li{padding:0;margin:0;list-style:none}
.fade{opacity:0;-webkit-transition:1.4s ease-in-out;transition:1.4s ease-in-out}
.on{opacity:1 !important;-webkit-transform:translate(0);transform:translate(0)}

.bg_animation{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}
.bg_animation:after{
  width:100%;
  height:100%;
  background:var(--c-white);
  content:'';
  display:block;
  position:absolute;
  top:0;
  right:0;
  -webkit-transition:2.4s ease-in-out;
  transition:2.4s ease-in-out
}
.bg_animation.on:after{width:0%}

/* =========================
   Layout / Header
   ========================= */
.main{
  margin:auto !important;
  padding:0px;
  width:100% !important;
  /*max-width:1140px !important;*/
  padding:0!important;
}

header h1{
  margin:0;
  font-size:12px;
  padding:1.5em;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.3);
  color:#f8f2e4;
  background: var(--grad-main);
}

.header_top .bg_animation{background:url('../images/bg_pc.png');background-repeat:repeat-y;background-size:cover}

.staffindex,.staff,.access{
  position:relative;
  padding:7%;
  border:5px solid var(--c-white);
  box-shadow:var(--shadow-soft);
}
.staffindex .bg_animation{background:url('../images/staff_index_bg.jpg');background-repeat:repeat-y;background-size:100%}
.staff .bg_animation{background:url('../images/staff_bg.jpg');background-repeat:repeat-y;background-size:100%}
.access .bg_animation{background:url('../images/access_bg.jpg');background-repeat:repeat-y;background-size:100%}

.profile{ padding:10px; width:80%; margin:0 auto;}
.profile .bg_animation{background:url('../images/profile_bg.jpg');background-repeat:repeat-y;background-size:100%}
.floating{ background-color:#F66;}

.bgs{
  padding:3%;
  background:rgba(255,255,255,0.85);
  box-shadow:var(--shadow-mid);
  outline:solid 2px rgba(255,255,255,0.85);
  outline-offset:2px
}

.staffindexnr{height:450px;overflow-y:scroll;padding:10px}
.header_top{width:100%;height:100%;padding:0;position:relative}
.header{width:100%;height:100%;max-width:1020px;position:relative;margin:auto}
.titles{width:100%;padding:25px 10px;font-size:2rem;text-align:center}
.titles img{width:100%;max-width:180px}
.staffitem{width:70%;margin:0 auto;background-color:var(--c-white);padding:10px}
.staffitem span{display:block;font-size:16px;text-align:center;line-height:1.5;color:var(--c-black)}
.staffitem2{width:100%;margin:5px auto;background-color:var(--c-white);padding:10px}
.staffitem2 span{display:block;text-align:center;line-height:1.5;color:var(--c-black)}

header nav .toggle{display:none}

#collapse-nav{background: var(--grad-main)}

/* =========================
   Global Nav
   ========================= */
.nav{
  display:flex;
  list-style:none;
  flex-direction:row;
  align-content:flex-start;
  justify-content:center;
  align-items:center;
  text-align:center
}
.nav li{position:relative}
.nav li a{height:55px;background-image:none;padding:10px 50px;display:block}
.nav li a .sr-only{
  display:inline-block;
  position:relative;
  width:auto;
  height:auto;
  font-family:var(--font-serif-title);
  font-size:18px;
  color:#f8f2e4;
  text-transform:uppercase
}
.nav li a .sr-only small{
  display:block;
  font-size:10px;
  color:#f8f2e4;
  font-weight:normal;
  letter-spacing:0em;
  font-family:var(--font-serif-small)
}
.nav li:after{
  content:"";
  display:block;
  position:absolute;
  width:2px;
  border-right:1px solid var(--c-muted-2);
  right:-1px;
  height:30%;
  top:35%
}
.nav li:last-child:after{width:0;display:none}

.pct{display:block}
.mbt{display:none}

/* =========================
   Footer
   ========================= */
footer{
  position:relative;
  padding:0 0 20px;
  border-top:2px solid var(--c-white);
  color:var(--c-white);
  text-align:center;
  margin:auto;
}
footer nav a{display:inline-block;padding:0 1em;color:var(--c-white);position:relative}
footer nav a:after{
  content:"";
  position:absolute;
  display:block;
  width:2px;
  height:80%;
  top:8%;
  right:-0.4em;
  border-left:1px solid var(--c-white)
}

.copyright {text-align:center;margin:10px 0;}

.back2top a{
  display:block;
  position:fixed;
  right:15px;
  bottom:75px;
  padding:0;
  margin:0;
  width:48px;
  height:48px;
  font-size:32px;
  text-align:center;
  line-height:48px;
  vertical-align:middle;
  overflow:hidden;
  z-index:99;
  border:1px solid #ffd7e2;
  text-shadow:-1px -1px 1px rgba(0,0,0,0.8),1px 1px 1px rgba(255,255,255,0.8);
  background-color:var(--c-brand-pink);
  color:var(--c-white) !important;
  text-shadow:none;
  line-height:normal
}

.quick-contact{display:none !important;}
.quick-contact div{line-height:50px;width:33%!important;color:var(--c-white);}
.tell{background: var(--qc-tell);}
.opentime{background: var(--qc-open);}
.acc{background: var(--qc-acc);}

footer a{
  color:var(--c-white);
  font-size:14px;
}
footer a:hover{
  color: var(--c-accent-gold);
  text-decoration: underline
}

.mastFoot{background-color:var(--c-brand-pink);}

.tt{width:100%;font-size:14px;padding:10px}
.tt td{border-bottom:1px solid var(--c-black);padding:10px;color:var(--c-black)}
.bb{width:22%;text-align:center;font-weight:600}

/* =========================
   Responsive (<=750px)
   ========================= */
@media screen and (max-width:750px){
  .main{margin:0 auto 70px auto!important;}
  .nav li::after{width:0;display:none}
  .header_top .bg_animation{background:url('../images/bg_sm.png');background-repeat:no-repeat;background-size:cover}

  .pct{display:none}
  .mbt{display:block}
  .staffindex,.staff,.access{position:relative;padding:4%}

  header nav{
    position:fixed;
    top:0;
    bottom:0;
    left:-200px;
    background:rgba(0,0,0,0.3) none;
    width:200px;
    z-index:998;
    transition:left 1.0s ease 0s
  }
  header nav .nav{
    padding-top:1em;
    padding-right:16px;
    padding-bottom:40px;
    position:absolute;
    overflow-y:auto;
    bottom:0;
    height:100%
  }
  header nav li{
    width:100%;
    background: var(--grad-main);
    margin-bottom:10px
  }
  .nav li a{display:block;width:100%;height:50px;padding:5px 18px}

  header nav .toggle{
    display:inline-block;
    font-size:24px;
    height:50px;
    width:50px;
    position:absolute;
    right:-50px;
    top:0px;
    vertical-align:middle;
    background: var(--grad-main);
    color:var(--white);
    border:1px solid var(--c-brand-pink);
    border-radius:0;
    text-align:left;
    padding-left:15px;
    cursor:pointer
  }
  header nav .toggle .fa{line-height:50px}
  header nav.in{left:0}
  #collapse-nav{background:rgba(0,0,0,0.3) none}

  footer {padding-bottom:75px;}
  footer nav{
    padding:0;
    background: var(--grad-main);
    display:flex;
    flex-wrap:wrap;
  }
  footer nav a{ text-align:left;
  display:block;padding:1em;border-bottom:1px dotted var(--c-brand-pink-2);width:50%;}
  
  footer nav a:after{
    content:"";
    position:absolute;
    display:block;
    width:2px;
    height:80%;
    top:8%;
    right:-0.4em;
    border-left:1px solid var(--c-white);	
  }

  .quick-contact{
    gap:5px;
    display:flex!important;
    z-index:99999;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    padding:10px;
    background:rgba(0,0,0,0.8);
  }
}

/* =========================
   Title block
   ========================= */
h2.page_title{
  margin:40px 0 30px;
  text-align:center;
  font-weight:normal;
  line-height:1.4;
}

.page_title em, .s_title span, .list .cbox .rankno, #page-top .fbt_top, footer #copyright{
  font-family: var(--font-title-em);
}
.page_title span{
  font-family: var(--font-title-sub);
  font-weight:500;
}
.page_title{ padding:15px 0; }

.page_title em{
  position:relative;
  display:inline-block;
  vertical-align:top;
  font-size:36px;
  line-height:36px;
  padding:0 0 10px 0;
}
.page_title em:after{
  content:'';
  width:30px;
  border-bottom-width:1px;
  border-bottom-style:solid;
  position:absolute;
  bottom:6px;
  left:calc(50% - 15px);
}
.page_title span{
  display:block;
  font-size:16px;
  line-height:20px;
}

.page_title{
  background: var(--pt-bg); /* Old browsers */
  background: -moz-linear-gradient(left, var(--pt-bg) 0%, var(--pt-bg) 50%, var(--pt-bg) 100%);
  background: -webkit-linear-gradient(left, var(--pt-bg) 0%, var(--pt-bg) 50%, var(--pt-bg) 100%);
  background: linear-gradient(to right, var(--pt-bg) 0%, var(--pt-bg) 50%, var(--pt-bg) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255, 0.95)', endColorstr='rgba(255,255,255, 0.95)',GradientType=1 );
}
.page_title em{ color: var(--pt-em); }
.page_title em:before{
  position:absolute;
  top:0;
  left:0;
  display:block;
  content: attr(title);
  color: var(--pt-em-mask);
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(255,176,210,0) 20%, rgba(255,176,210,1) 40%, rgba(255,176,210,0) 80%);
}
.page_title em:after{ border-color: var(--pt-underline); }
.page_title span{ color: var(--pt-span); }

/* =========================
   System page
   ========================= */
.page-system{ padding:5px 0; text-align:center; }
.page-system h2{ font-size:2rem; margin-bottom:40px; }

.page-system .container{
  max-width:900px;
  padding-right:0px;
  padding-left:0px;
}

.page-system .system-cont .system-cost{
  border:1px solid var(--sys-border);
  background-color: var(--sys-bg);
  margin:40px 10px;
  padding:30px 10px 10px;
  position:relative;
  box-sizing:border-box;
  line-height:1.5;
  margin-bottom:5px; /* keep original adjustment */
}

.page-system .system-cont .system-cost .block-system-title .systemtitle-head{
  background-color: var(--sys-border);
  border:1px solid var(--sys-border);
  border-radius:5px;
  padding:10px 20px;
  position:absolute;
  left:20px;
  top:-20px;
  line-height:1.5;
  z-index:10;
  color:var(--c-white);
  font-size:16px;
  font-weight:700;
}

.page-system .system-cont .system-cost .block-system-title .systemtitle-desc{
  font-size:.875rem;
  margin-bottom:10px;
  color: var(--sys-label);
}

.page-system .system-cont .system-cost-title{display:none;}

dd{ margin-bottom:0rem !important; margin-left:0; }

.page-system .system-cont .system-cost-data{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.page-system .system-cont .system-cost-data dl{ margin-top:5px; }

.page-system .system-cont .cost-data-bundle{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}
.page-system .system-cont .cost-data-bundle:last-child{ align-self:center; }

.page-system .system-cont .cost-data-bundle .cost-data-label{
  flex:0 0 30%;
  background: var(--sys-label);
  color:var(--c-white);
  font-size:.875rem;
}

.page-system .system-cont .cost-data-bundle .cost-data-label,
.page-system .system-cont .cost-data-bundle .cost-data-price{
  display:flex;
  line-height:1.5;
  padding:5px 10px;
  box-sizing:border-box;
  justify-content:center;
  border:1px solid var(--sys-label);
}

.page-system .system-cont .cost-data-bundle .cost-data-price{
  flex:0 0 70%;
  background:var(--c-white);
  color: var(--sys-label);
  font-weight:700;
}

.page-system .system-cont .cost-data-bundle .cost-data-price .price-1{
  display:flex;
  flex:0 0 50%;
  font-size:1rem;
  color: var(--sys-label);
  justify-content:center;
}
.page-system .system-cont .cost-data-bundle .cost-data-price .price-1 .price-sub{ text-decoration:line-through; }
.page-system .system-cont .cost-data-bundle .cost-data-price .arrow{ font-size:.875rem; }

.page-system .system-cont .cost-data-bundle .cost-data-price .price-2{
  display:flex;
  flex:0 0 50%;
  font-size:1rem;
  color: var(--sys-price);
  justify-content:center;
}

.page-system .system-cont .cost-data-bundle .cost-data-desc{
  font-size:.875rem;
  margin:5px auto 10px;
}

.page-system .system-fee_remark1-box,
.page-system .system-fee_remark2-box{ margin-bottom:15px; }

.page-system .system-fee_remark1-box .systemtitle-head,
.page-system .system-fee_remark2-box .systemtitle-head{
  background-color: var(--sys-remark-head);
  border:1px solid var(--sys-remark-head);
  border-radius:5px;
  padding:5px 10px;
  line-height:1.5;
  color:var(--c-white);
  font-size:1rem;
  font-weight:700;
  text-align:center;
}

.page-system .system-fee_remark1-box .system-snippet,
.page-system .system-fee_remark2-box .system-snippet{
  background:var(--c-white);
  border:1px solid var(--sys-remark-border);
  color: var(--sys-label);
  font-size:.875rem;
  padding:10px;
}

/* =========================
   Misc blocks
   ========================= */
.new-item p{ line-height:1.0; }
.new-item .time{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  color:var(--c-white);
  background:#962116;
  padding:5px 25px 5px 10px;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
}

.news_photo img{ max-width:100px; height:auto; }

/* access */
.access-iframemap iframe{ width:100%; height:400px; }
.access-iframemap .iframemap-desc{ color:var(--c-black); }

.access-info{ color: var(--c-text); }
.access-info .access-item{
  display:flex;
  align-items:flex-start;
  background: hsla(0,0%,100%,.8);
  font-size:1rem;
  padding:8px 10px;
  margin-bottom:0;
}
.access-info .access-item .access-list-item-label{
  text-align:center;
  font-weight:400;
  line-height:2;
  margin-right:10px;
  width:30%;
}
.access-info .access-item .access-list-item-context{ line-height:2; width:70%; }
.access-info .access-item .access-list-item-context a{ color: var(--c-text); }
.access-info .access-item+.access-item{ margin-top:10px; }

.accessbox{ background: rgba(0,0,0,.8); padding:5px; }

/* info-box */
.info-box{
  margin-top:10px;
  color:var(--c-white);
  background-image: var(--info-grad);
  text-align:center;
  padding:7px 0;
  position:relative
}
.info-box:before{ top:-3px }
.info-box:after,.info-box:before{
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background:url(../images/line.jpg) repeat-x;
  content:""
}
.info-box:after{ bottom:-3px }
.info-box .time{ font-size:.875rem }
.info-box .tel{
  padding-left:35px;
  font-size:1.5rem;
  position:relative;
  line-height:1.2;
  display:inline-block
}
.info-box .tel:before{
  position:absolute;
  content:"";
  top:5px;
  left:0;
  background:url(../images/iphone.png);
  background-size:100%;
  width:24px;
  height:21px
}
.info-box .tel a{ color:var(--c-white) }
.info-box .snippet-notice{ font-size:.875rem }

/* =========================
   profile
   ========================= */
#profile{ width:100%; margin:0 auto; }
#profile_in{ width:100%; margin:0 auto; }

#profile_imgBox{
  width:95%;
  margin:0 auto 20px;
  font-size:14px;
  background: rgba(255,255,255,1);
  display:block;
  border:1px #ccc solid;
  border-radius:5px;
  box-shadow:2px 2px 2px rgba(0,0,0,0.1);
}

#MainPhoto{ width:79.7%; float:left; border:1px rgba(0,0,0,0) solid; }
#photo_1{ position:relative; }

#prof_photo{ width:100%; padding:2px; }
#prof_photo img{ cursor:pointer; }

#prof_photo ul{ width:20.3%; float:right; border:1px rgba(0,0,0,0) solid; }
#prof_photo li{ width:100%; float:left; }
#prof_photo li img{ width:100%; }

#prof_photo .triangle_new{
  border-right:90px solid transparent;
  border-top:70px solid rgba(143,17,17,0.8);
  top:1px;
  left:1px;
}
#prof_photo .new{ font-size:22px; }

#profile_dataBox{ clear:both; width:95%; margin:15px auto 0; }

#profile_inner h3{
  margin:0 auto;
  width:95%;
  text-align:center;
  background:none;
  border-bottom:1px var(--c-muted) solid;
  margin-bottom:5%;
  font-size:16px;
}

#profile .prof_name{
  clear:both;
  margin:0 auto;
  padding-top:2px;
  font-size:0px;
  text-align:center;
  display:block;
}
#profile .prof_size{
  margin:0 auto;
  margin-top:-10px;
  padding-bottom:10px;
  font-size:12px;
  text-align:center;
  display:block;
}

#profile .girls_type ul{ width:100%; border:none; border-top:1px var(--c-muted-2) solid; }
#profile .girls_type li{ width:100%; }
#profile .girls_type li a{
  font-size:12px;
  margin:0;
  padding:5px;
  color:#333;
}
#profile .girls_type li:first-child{ border-right:1px var(--c-muted-2) solid; }
#profile .girls_type li:last-child{ border-left:1px var(--c-muted-2) solid; }

#profile_inner .title{
  background: var(--c-brand-pink-light);
  background: -webkit-linear-gradient(left, var(--c-brand-pink-light) 0%, #f9e0e2 100%);
  background: linear-gradient(to right, var(--c-brand-pink-light) 0%, #f9e0e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdcea', endColorstr='#f9e0e2',GradientType=1 );
  outline: solid 1px var(--c-brand-pink-light);
  outline-offset:2px;
  color:#e76593;
}

#profile_dataList dd{
  margin:5px auto;
  padding:5px;
  font-size:14px;
  min-height:25px;
  color:#e66a8a;
}

.prof_qa{ width:100%; }
.prof_qa li{
  float:left;
  width:100%;
  border-bottom:1px dotted var(--c-muted);
  margin-bottom:10px;
  padding-bottom:5px;
}
.prof_qa li:last-child{ border-bottom:none; }

/* =========================
   sp bottom nav
   ========================= */
#spnavbar{ width:100%; }

/* visibleTS：默认隐藏，仅在手机/平板显示（你可按实际断点调整） */
.visibleTS{ display:none; }
@media (max-width: 900px){
  .visibleTS{ display:block; }
}

/* 固定到底部 */
@media (max-width: 900px){
  #spnavbar{ margin-top:10px; }

  #spnavbar .inner{
    box-sizing:border-box;
    width:100%;
    padding:0 10px;
  }

  #spnavbar ul{
    padding:5px 0 0 5px;
    border-radius:5px;
    background-color: var(--c-brand-pink);
  }

  .clearfix{ display:block; min-height:1%; }

  #spnavbar ul > li{
    float:left;
    box-sizing:border-box;
    width:50%;
    border-right:5px solid var(--c-brand-pink);
  }

  #spnavbar ul > li > a{
    display:block;
    margin-bottom:5px;
    padding:10px;
    border-radius:5px;
    background-color: var(--c-white);
    background-image:url(../images/ico02.png);
    background-position:right 10px center;
    background-size:17px 17px;
    background-repeat:no-repeat;
    font-size:12px;
    font-family:sans-serif;
    line-height:1.2;
  }

  #spnavbar ul > li > a > span{
    display:block;
    color: var(--c-brand-pink);
    font-weight:700;
    font-size:14px;
  }

  #spnavbar ul > li > a:active{ opacity:.75; }
}