@import url("http://www.harenchi.co.jp/tokyo/ipn/shopmodule/css/basic.css");
/*common
------------------------------------------------------------------------------------------------*/
body{background:url(../../ipn/images/common/bg.jpg) repeat; color:#454238;}
a{color:#1c8bd2;}
h1{
  background:-moz-linear-gradient(center top, #1c8bd2 0%,#21a6fc 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #1c8bd2),color-stop(1, #21a6fc));
  color:#ffffff;
}
section h2{
  background:-moz-linear-gradient(top, #c1e6fe 0%, #a2d9fd 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1e6fe), color-stop(100%,#a2d9fd));
  color:#1c8bd2;
  border-bottom:1px solid #c1e6fe;
}
body #mainWrapper h2 span.pagelink a{border-color:#a9e9db; color:#1c8bd2;}
.more a{
  background:-moz-linear-gradient(center top, #f3eedc 100%, #f8f5f2 0%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(1, #f3eedc),color-stop(0, #f8f5f2));
  border-color:#ebf4e2;
  color:#444444;
}
/*header
------------------------------------------------------------------------------------------------*/
header{
  background:-moz-linear-gradient(center top, #1c8bd2 0%,#21a6fc 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #1c8bd2),color-stop(1, #21a6fc));
}
header h1{border:none; margin:7px 0 0 3px; width:210px; height:40px;}
header h1 img{width:210px; height:40px;}
header p a{background:url(../../ipn/images/common/headnavi.png) no-repeat;}
header .headItem li a{background: #145c8a; border-color: #104465; color:#fff;}
/*navigation
------------------------------------------------------------------------------------------------*/
nav{
  background:-moz-linear-gradient(center top, #f6fafc 0%,#d5e1ee 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f6fafc),color-stop(1, #d5e1ee));
  border-bottom:1px solid #c2ccd6;
}
#menu > li{
  background:url(../../ipn/images/common/navi.png) no-repeat;
  border-color:#c2ccd6;
}
#menu .n5 ul{border-color:#c2ccd6; background-color:#ffffff; box-shadow:0 0px 3px #e1e1e1;}
#menu .n5 ul li{border-color:#c2ccd6;}
#menu .n5 ul .toList{background-color:#1c8bd2;}
#menu .n5 ul .toList a{color:#ffffff; width:100px;}
#menu .n5 ul .closeBtn{background:#145c8a; border-color:#c2ccd6;}
#menu .n5 ul .closeBtn a{color:#ffffff;}
/*contents
------------------------------------------------------------------------------------------------*/
/*#newFace
------------------------------------------------*/
#newFace .container{background-color:#ffffff;}
#newFace .item li img{border-color: #acddfd;}
#newFace .arrows{
  background:-moz-linear-gradient(center top, #f6f1de 0%,#e2dbc3 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f6f1de),color-stop(1, #e2dbc3));
}
/* navigation */
#newFace .arrows .prev,
#newFace .arrows .next {color:#62593b;}
#newFace .arrows .prev.off,
#newFace .arrows .next.off {color:#b9ab7b;}
#newFace .arrows .newfaceNav{background-color:#ffffff; border:1px solid #ffffff;}
#newFace .arrows .newfaceNav li a{color:#ac3581;}
#newFace .arrows .newfaceNav li.selected a{color:#960863;}
/*#typePickup
------------------------------------------------*/
#typePickup{background-color:#ffffff;}
#typePickup .typenavi li a{color:#614448; background:#f2f4d7;}
#typePickup .typenavi li a.typeselect{background:#1c8bd2; color:#ffffff;}
#typePickup .typegirls dt img{border-color:#acddfd;}
/*groupMenu-*/
#supportMenu{background-color:#ffffff;}
#supportMenu section div p{border-bottom:1px solid #efeeeb;}
#supportMenu section div p a:after{color: #e4dfd2;}
#cboxClose{background:#ffffff url(../../ipn/images/colorbox/close.png) no-repeat;}
#cboxTitle{color:#1c8bd2;}

/*for High-pixel-ratio-display*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min--moz-device-pixel-ratio:1.5){
 header p a{background:url(../../ipn/images/common/headnavi_ratio1_5.png) no-repeat; background-size:150px 45px;}
 #menu li{background:url(../../ipn/images/common/navi_ratio1_5.png) no-repeat; background-size:60px 300px;}
}
@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2){
 header p a{background:url(../../ipn/images/common/headnavi_ratio2.png) no-repeat; background-size:150px 45px;}
 #menu li{background:url(../../ipn/images/common/navi_ratio2.png) no-repeat; background-size:60px 300px;}
}

/*フリック操作時表示*/
#flicker_back,
#flicker_forward{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 80; padding-bottom: 100px; display: none;}
#flicker_back p,
#flicker_forward p{margin-top: 10px; width: 100%; color: #ffffff; text-align: center; font-size: 18px;}
#flicker_back p:before{content:"s"; font-family: fontello,Arial; display: block; color: #ffffff; font-size: 100px;}
#flicker_forward p:before{content:"t"; font-family: fontello,Arial; display: block; color: #ffffff; font-size: 100px;}

/*東京埼玉TEL各店用*/
.Tel .telephone{
background:-moz-linear-gradient(center top, #e2d569 0%,#e2d141 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e2d569),color-stop(1, #e2d141));
border-color: #c9b933;
font-weight: bold;
}

/*クリスマス用アイコン*/
.xmas_frame img{
  width: 100px;
}
.xmas_frame .animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
.xmas_frame .keyframe3{
  animation-name: anim_s;
  transform: rotate(30deg);
  animation-duration: 5s;
}
.xmas_frame{
  position: fixed;
  bottom: 0;
  right: 5px;
  z-index: 60;
}
@keyframes anim_s{
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

/*雪を降らすcss*/
.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 15px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
  z-index: 100;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}